diff --git a/client/src/components/viewers/controls/FileControlsPlayback.vue b/client/src/components/viewers/controls/FileControlsPlayback.vue
new file mode 100644
index 00000000000..e8d7207d37a
--- /dev/null
+++ b/client/src/components/viewers/controls/FileControlsPlayback.vue
@@ -0,0 +1,35 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <file-controls-group>
+    <file-controls-button
+      :class="{ 'flip-horizontal-ion-icon': ended }"
+      :icon="playbackIcon"
+    />
+  </file-controls-group>
+</template>
+
+<script setup lang="ts">
+import { refresh, play, pause } from 'ionicons/icons';
+import { FileControlsButton, FileControlsGroup } from '@/components/viewers';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  ended: boolean;
+  paused: boolean;
+}>();
+
+const playbackIcon = computed((): string => {
+  if (props.ended) {
+    return refresh;
+  }
+  switch (props.paused) {
+    case true:
+      return play;
+    case false:
+      return pause;
+  }
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/client/src/components/viewers/index.ts b/client/src/components/viewers/index.ts
index 10546f37390..46816f523f4 100644
--- a/client/src/components/viewers/index.ts
+++ b/client/src/components/viewers/index.ts
@@ -5,6 +5,7 @@ import FileControlsButton from '@/components/viewers/controls/FileControlsButton
 import FileControlsGroup from '@/components/viewers/controls/FileControlsGroup.vue';
 import FileControlsInput from '@/components/viewers/controls/FileControlsInput.vue';
 import FileControlsPagination from '@/components/viewers/controls/FileControlsPagination.vue';
+import FileControlsPlayback from '@/components/viewers/controls/FileControlsPlayback.vue';
 import FileControlsVolume from '@/components/viewers/controls/FileControlsVolume.vue';
 import FileControlsZoom from '@/components/viewers/controls/FileControlsZoom.vue';
 
@@ -14,6 +15,7 @@ export {
   FileControlsGroup,
   FileControlsInput,
   FileControlsPagination,
+  FileControlsPlayback,
   FileControlsVolume,
   FileControlsZoom,
 };
diff --git a/client/src/views/viewers/AudioViewer.vue b/client/src/views/viewers/AudioViewer.vue
index 58fc611a599..40b3c1fa547 100644
--- a/client/src/views/viewers/AudioViewer.vue
+++ b/client/src/views/viewers/AudioViewer.vue
@@ -18,12 +18,11 @@
     </template>
     <template #controls>
       <file-controls>
-        <!-- Disabled till we add an illustration in the viewer -->
-        <!-- <file-controls-button
-          :class="{'flip-horizontal-ion-icon': ended}"
-          :icon="getPlaybackIcon()"
+        <file-controls-playback
+          :paused="paused"
+          :ended="ended"
           @click="togglePlayback"
-        /> -->
+        />
         <file-controls-volume @on-volume-change="updateVolume" />
       </file-controls>
     </template>
@@ -31,11 +30,10 @@
 </template>
 
 <script setup lang="ts">
-// import { refresh, play, pause, volumeHigh, volumeLow, volumeMedium, volumeMute } from 'ionicons/icons';
+import { FileControls, FileControlsPlayback, FileControlsVolume } from '@/components/viewers';
 import { onMounted, ref } from 'vue';
 import { FileViewerWrapper } from '@/views/viewers';
 import { FileContentInfo } from '@/views/viewers/utils';
-import { FileControls, FileControlsVolume } from '@/components/viewers';
 
 const props = defineProps<{
   contentInfo: FileContentInfo;
@@ -50,9 +48,9 @@ onMounted(async () => {
   src.value = URL.createObjectURL(new Blob([props.contentInfo.data], { type: props.contentInfo.mimeType }));
 });
 
-// function togglePlayback(): void {
-//   audioElement.value.paused ? audioElement.value.play() : audioElement.value.pause();
-// }
+function togglePlayback(): void {
+  audioElement.value.paused ? audioElement.value.play() : audioElement.value.pause();
+}
 
 function updateMediaData(event: Event): void {
   paused.value = (event.target as HTMLAudioElement).paused;
@@ -62,18 +60,6 @@ function updateMediaData(event: Event): void {
 function updateVolume(value: number): void {
   audioElement.value.volume = value;
 }
-
-// function getPlaybackIcon(): string {
-//   if (ended.value) {
-//     return refresh;
-//   }
-//   switch (paused.value) {
-//     case true:
-//       return play;
-//     case false:
-//       return pause;
-//   }
-// }
 </script>
 
 <style scoped lang="scss"></style>
diff --git a/client/src/views/viewers/VideoViewer.vue b/client/src/views/viewers/VideoViewer.vue
index df430a858b8..46fb29bb504 100644
--- a/client/src/views/viewers/VideoViewer.vue
+++ b/client/src/views/viewers/VideoViewer.vue
@@ -21,9 +21,9 @@
     </template>
     <template #controls>
       <file-controls>
-        <file-controls-button
-          :class="{ 'flip-horizontal-ion-icon': ended }"
-          :icon="getPlaybackIcon()"
+        <file-controls-playback
+          :paused="paused"
+          :ended="ended"
           @click="togglePlayback"
         />
         <file-controls-volume @on-volume-change="updateVolume" />
@@ -37,10 +37,10 @@
 </template>
 
 <script setup lang="ts">
-import { refresh, play, pause, scan } from 'ionicons/icons';
+import { scan } from 'ionicons/icons';
 import { onMounted, ref } from 'vue';
 import { FileContentInfo } from '@/views/viewers/utils';
-import { FileControls, FileControlsButton, FileControlsVolume } from '@/components/viewers';
+import { FileControls, FileControlsButton, FileControlsPlayback, FileControlsVolume } from '@/components/viewers';
 import { FileViewerWrapper } from '@/views/viewers';
 
 const props = defineProps<{
@@ -72,18 +72,6 @@ function updateMediaData(event: Event): void {
   paused.value = (event.target as HTMLVideoElement).paused;
   ended.value = (event.target as HTMLVideoElement).ended;
 }
-
-function getPlaybackIcon(): string {
-  if (ended.value) {
-    return refresh;
-  }
-  switch (paused.value) {
-    case true:
-      return play;
-    case false:
-      return pause;
-  }
-}
 </script>
 
 <style scoped lang="scss">