diff --git a/CHANGELOG.md b/CHANGELOG.md
index c8137717bf122bc20e1972dee2120c1cfcde655f..1c72b38518f45e49e94c32a0f5a948c8b2b6bb1a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## 0.2 - 2021-02
 
+### Added
+- Pause playing animation
+  [#115](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/115) @onny
+
 ### Changed
 - Use mappers for store
   [#112](https://git.project-insanity.org/onny/nextcloud-app-podcast/-/issues/112) @onny
diff --git a/src/components/Table.vue b/src/components/Table.vue
index 7e56bfaaec16b7bffe02ff592e5a3b703f21e2e1..3150ae48ffcaac7f40108b0180b002b93e81f663 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -61,7 +61,7 @@
 				<td class="actionColumn">
 					<Actions>
 						<ActionButton
-							:icon="episodeLoaded(episode.id) ? 'icon-pause' : 'icon-play'"
+							:icon="playButtonIcon(episode.id)"
 							:close-after-click="true"
 							@click="doPlay(episode)">
 							{{ playButtonText(episode.id) }}
@@ -137,13 +137,26 @@ export default {
 	methods: {
 		playButtonText(episodeId) {
 			if (this.episodeLoaded(episodeId)) {
-				return t('podcast', 'Pause')
-			} else if (this.isPaused(episodeId)) {
-				return t('podcast', 'Resume')
+				if (this.isPaused(episodeId)) {
+					return t('podcast', 'Resume')
+				} else {
+					return t('podcast', 'Pause')
+				}
 			} else {
 				return t('podcast', 'Play')
 			}
 		},
+		playButtonIcon(episodeId) {
+			if (this.episodeLoaded(episodeId)) {
+				if (this.isPaused(episodeId)) {
+					return 'icon-play'
+				} else {
+					return 'icon-pause'
+				}
+			} else {
+				return 'icon-play'
+			}
+		},
 		escapedEpisodeDescription(episodeDescription) {
 			episodeDescription = episodeDescription.replace(/\n/g, '')
 			return episodeDescription