diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index ff68f33ba..ca3f6f022 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -8,7 +8,7 @@ import usePlayOptions from '~/composables/audio/usePlayOptions'
import useReport from '~/composables/moderation/useReport'
import { useStore } from '~/store'
import { useRouter, useRoute } from 'vue-router'
-import { color } from "~/composables/color.ts";
+import { color } from '~/composables/color.ts'
import Button from '~/components/ui/Button.vue'
import OptionsButton from '~/components/ui/button/Options.vue'
@@ -132,7 +132,6 @@ const isOpen = ref(false)
:class="[...buttonClasses]"
:isloading="isLoading"
:dropdownOnly="dropdownOnly"
- :tiny="discrete"
@click.stop.prevent="replacePlay()"
@split-click="isOpen = !isOpen"
>
@@ -242,21 +241,16 @@ const isOpen = ref(false)
:aria-label="labels.replacePlay"
:class="[...buttonClasses]"
:isloading="isLoading"
+ :tiny="discrete"
+ :icon="!playing ? playIconClass : 'bi-pause-fill'"
+ :round="iconOnly"
+ :secondary="iconOnly"
@click.stop.prevent="replacePlay()"
>
-
-
-
-
-
- {{ t('components.audio.PlayButton.button.discretePlay') }}
-
-
+
+
+ {{ t('components.audio.PlayButton.button.discretePlay') }}
+
+
diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index 03ab8afa4..6e3ef4f80 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -163,6 +163,7 @@ onMounted(() => {
--padding: 16px;
--shift-by: 0.5px;
+ gap: 8px;
position: relative;
display: inline-flex;