diff --git a/components/contributor/ContributorListItem.vue b/components/contributor/ContributorListItem.vue
index 3c323e42..6c61d39f 100644
--- a/components/contributor/ContributorListItem.vue
+++ b/components/contributor/ContributorListItem.vue
@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group col-span-5 relative mr-3 cursor-pointer py-3">
+  <li
+    class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+  >
     <NuxtLink
+      class="grid col-span-5 grid-cols-subgrid"
       :to="{
         name: 'playlist-contributor-id',
         params: { id: contributor.id },
@@ -17,8 +20,8 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative flex items-center justify-between gap-3">
-        <div class="w-10">
+      <div class="relative grid col-span-5 grid-cols-subgrid">
+        <div>
           <ProtectedImage
             v-if="contributor.cover"
             :src="contributor.cover"
@@ -26,7 +29,7 @@ defineProps<{
             class="aspect-square w-10 rounded-xl bg-background-2"
           />
         </div>
-        <div class="mr-auto w-1/3">
+        <div class="col-span-3 flex items-center">
           <h4
             class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
             :title="contributor.name || ''"
@@ -34,8 +37,8 @@ defineProps<{
             {{ contributor.name }}
           </h4>
         </div>
-        <div class="ml-auto flex items-center justify-center gap-1">
-          <button class="focus:bg-lime-400 rounded-lg px-2 py-0">
+        <div class="flex justify-end">
+          <button class="px-2">
             <NuxtIcon name="icon.chevron.right" class="text-2xl" />
           </button>
         </div>
diff --git a/components/podcast/PodcastItem.vue b/components/podcast/PodcastItem.vue
index 83041376..0cf11724 100644
--- a/components/podcast/PodcastItem.vue
+++ b/components/podcast/PodcastItem.vue
@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group col-span-5 relative mr-3 cursor-pointer py-3">
+  <li
+    class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+  >
     <NuxtLink
+      class="grid col-span-5 grid-cols-subgrid"
       :to="{
         name: 'playlist-podcast-id',
         params: { id: podcast.id },
@@ -17,15 +20,16 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative flex items-center justify-between gap-3">
-        <div v-if="podcast.cover" class="w-10">
+      <div class="relative grid col-span-5 grid-cols-subgrid">
+        <div>
           <ProtectedImage
+            v-if="podcast.cover"
             :src="podcast.cover"
             alt=""
             class="aspect-square w-10 rounded-xl bg-background-2"
           />
         </div>
-        <div class="mr-auto w-1/3">
+        <div class="col-span-3 flex items-center">
           <h4
             class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
             :title="podcast.title || ''"
@@ -33,8 +37,8 @@ defineProps<{
             {{ podcast.title }}
           </h4>
         </div>
-        <div class="ml-auto flex items-center justify-center gap-1">
-          <button class="focus:bg-lime-400 rounded-lg px-2 py-0">
+        <div class="flex justify-end">
+          <button class="px-2">
             <NuxtIcon name="icon.chevron.right" class="text-2xl" />
           </button>
         </div>
diff --git a/components/track/TrackItem.vue b/components/track/TrackItem.vue
index f879f01d..22086287 100644
--- a/components/track/TrackItem.vue
+++ b/components/track/TrackItem.vue
@@ -89,24 +89,33 @@ function secondsToTime(totalSeconds: number | undefined) {
 
 <template>
   <li
-    class="w-full cursor-pointer grid grid-flow-col col-span-5 grid-cols-subgrid"
+    class="group grid col-span-5 relative grid-cols-subgrid cursor-pointer gap-3 py-3"
     @click.stop="playTrack"
   >
-    <div class="grid grid-flow-col col-span-5 grid-cols-subgrid">
-      <div v-if="track.meta?.attachedPicture && showThumbnail" class="relative">
-        <ProtectedImage
-          :src="track.meta?.attachedPicture"
-          alt=""
-          class="aspect-square w-10 rounded-md bg-background-2"
-        />
-        <div class="absolute inset-0 opacity-0 group-hover:opacity-100">
-          <div
-            class="absolute inset-0 h-full w-full rounded-md bg-black-1 opacity-50 dark:bg-white-1"
-          ></div>
-          <NuxtIcon
-            name="play"
-            class="absolute inset-0 flex items-center justify-center text-2xl text-white-1 dark:text-black-1"
+    <div
+      class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
+    ></div>
+
+    <div class="relative grid col-span-5 grid-cols-subgrid">
+      <div
+        v-if="track.meta?.attachedPicture && showThumbnail"
+        class="flex items-center"
+      >
+        <div class="relative">
+          <ProtectedImage
+            :src="track.meta?.attachedPicture"
+            alt=""
+            class="aspect-square w-10 rounded-md bg-background-2"
           />
+          <div class="absolute inset-0 opacity-0 group-hover:opacity-100">
+            <div
+              class="absolute inset-0 h-full w-full rounded-md bg-black-1 opacity-50 dark:bg-white-1"
+            ></div>
+            <NuxtIcon
+              name="play"
+              class="absolute inset-0 flex items-center justify-center text-2xl text-white-1 dark:text-black-1"
+            />
+          </div>
         </div>
       </div>
 
@@ -114,7 +123,7 @@ function secondsToTime(totalSeconds: number | undefined) {
         v-if="!(track.meta?.attachedPicture && showThumbnail)"
         class="relative"
       ></div>
-      <div class="mr-auto">
+      <div class="flex flex-col justify-center">
         <h4
           class="block overflow-hidden text-ellipsis font-semibold"
           :title="track.meta?.title || ''"
@@ -129,18 +138,18 @@ function secondsToTime(totalSeconds: number | undefined) {
           {{ track.meta?.artist }}
         </span>
       </div>
-      <div v-if="!isTrackTypeKnown">
+      <div v-if="!isTrackTypeKnown" class="flex items-center">
         <span class="text-label-2">{{ track.subtype }}</span>
       </div>
-      <div v-if="isTrackTypeKnown">
+      <div v-if="isTrackTypeKnown" class="flex items-center">
         <span class="text-label-2">{{ track.meta?.album }}</span>
       </div>
-      <div class="ml-auto">
+      <div class="flex items-center">
         <span class="text-label-2">{{
           secondsToTime(track.media?.[0]?.files?.[0]?.duration)
         }}</span>
       </div>
-      <div class="ml-auto flex items-center justify-center gap-1">
+      <div class="flex items-center gap-1">
         <button
           class="px-2 py-0 opacity-0 hover:bg-[red] hover:opacity-100 focus:opacity-100 group-hover:opacity-100 group-focus:opacity-100"
           :aria-label="t('track.a11y.download')"