diff --git a/front/src/components/playlist/Card.vue b/front/src/components/playlist/Card.vue
index 5394bd52b..2d9095141 100644
--- a/front/src/components/playlist/Card.vue
+++ b/front/src/components/playlist/Card.vue
@@ -1,23 +1,25 @@
 <script setup lang="ts">
-import { FwCard, FwPlayButton, FwOptionsButton } from '~/components'
+import Card from '~/components/ui/Card.vue'
+import PlayButton from '~/components/ui/button/Play.vue'
+import OptionsButton from '~/components/ui/button/Options.vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { computed } from 'vue'
 
-import type { Playlist } from '~/types/models'
+import type { Playlist } from '~/types'
 
 const { t } = useI18n()
 
 const play = defineEmit<[playlist: Playlist]>()
-const playlist = defineProp<Playlist>('playlist', { required: true })
+const {playlist} = defineProps<{playlist: Playlist}>()
 
-const covers = computed(() => playlist.value.album_covers
+const covers = computed(() => playlist.album_covers
   .filter((src, index, array) => array.indexOf(src) === index)
   .slice(0, 4)
 )
 
 const profileParams = computed(() => {
-  const [username, domain] = playlist.value.user.full_username.split('@')
+  const [username, domain] = playlist.user.full_username.split('@')
   return { username, domain }
 })
 
@@ -26,13 +28,13 @@ let navigate = (to: 'playlist' | 'user') => {}
 if (import.meta.env.PROD) {
   const router = useRouter()
   navigate = (to: 'playlist' | 'user') => to === 'playlist'
-    ? router.push({ name: 'library.playlists.detail', params: { id: playlist.value.id } })
+    ? router.push({ name: 'library.playlists.detail', params: { id: playlist.id } })
     : router.push({ name: 'profile.full', params: profileParams.value })
 }
 </script>
 
 <template>
-  <fw-card
+  <Card
     :title="playlist.name"
     @click="navigate('playlist')"
     class="playlist-card"
@@ -49,20 +51,20 @@ if (import.meta.env.PROD) {
       />
     </template>
 
-    <fw-play-button @play="play(playlist)" />
+    <PlayButton @play="play(playlist)" />
 
     <a
       @click.stop="navigate('user')"
       class="funkwhale link"
     >
-      {{ t('vui.by-user', playlist.user) }}
+      {{ t('vui.by-user', playlist.user.full_username) }}
     </a>
 
     <template #footer>
       {{ t('vui.tracks', playlist.tracks_count) }}
-      <fw-options-button />
+      <OptionsButton />
     </template>
-  </fw-card>
+  </Card>
 </template>
 
 <style lang="scss">