diff --git a/front/src/components/federation/UserFollowButton.vue b/front/src/components/federation/UserFollowButton.vue
index cdd83abf3..edd2422e6 100644
--- a/front/src/components/federation/UserFollowButton.vue
+++ b/front/src/components/federation/UserFollowButton.vue
@@ -5,6 +5,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 
+import Button from '~/components/ui/Button.vue'
+
 const { t } = useI18n()
 
 interface Events {
@@ -36,11 +38,12 @@ const toggle = () => {
 </script>
 
 <template>
-  <button
+  <Button
+    secondary
     :class="['ui', 'pink', {'inverted': isApproved || isPending}, {'favorited': isApproved}, 'icon', 'labeled', 'button']"
+    :icon="isPending ? 'bi-heart' : 'bi-heart-fill'"
     @click.stop="toggle"
   >
-    <i class="heart icon" />
     <span v-if="isApproved">
       {{ t('components.audio.LibraryFollowButton.button.unfollow') }}
     </span>