diff --git a/app/components/items/cards/item-card.tsx b/app/components/items/cards/item-card.tsx
index 259f2081..b251356c 100644
--- a/app/components/items/cards/item-card.tsx
+++ b/app/components/items/cards/item-card.tsx
@@ -1,10 +1,11 @@
 'use client'
 
-import { ItemImage, ItemName, ItemArtists } from '../misc'
+import { ItemArtists, ItemImage, ItemName } from '../misc'
 
-import { Card } from '@app/components/ui/card'
-import { SpotifyLink } from '@app/components/common'
 import type { AlbumEntity, ArtistEntity, TrackEntity } from '@app/api/types'
+import { SpotifyLink } from '@app/components/common'
+import { Card } from '@app/components/ui/card'
+import { cn } from '@app/utils/cn'
 
 interface ItemCardAlbum
   extends Pick<AlbumEntity, 'images' | 'albumType' | 'releaseDate'> {
@@ -43,30 +44,38 @@ function ItemCard({
   album,
 }: ItemCard.Props) {
   return (
-    <Card className="flex flex-col gap-3 rounded-lg bg-neutral-800 p-4">
+    <Card className="flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4">
       <ItemImage images={images ?? album} alt={name} size={200} />
 
-      <div>
+      <div
+        className={cn(!album && !artists && 'flex flex-row justify-between')}
+      >
         <ItemName
           name={name}
           href={`/${artists ? (album ? 'track' : 'album') : 'artist'}/${id}`}
           className="!max-w-[200px]"
         />
 
-        <div className="flex flex-row justify-between">
-          {albumType ? (
-            <div>
-              {new Date(releaseDate).getFullYear()} &bull;&nbsp;
-              <span className="capitalize">{albumType}</span>
-            </div>
-          ) : album ? (
-            <ItemArtists artists={artists} />
-          ) : (
-            <div />
-          )}
+        {(album ?? albumType) ? (
+          <div className="flex flex-row justify-between">
+            {albumType && (
+              <div>
+                {new Date(releaseDate).getFullYear()} &bull;&nbsp;
+                <span className="capitalize">{albumType}</span>
+              </div>
+            )}
+
+            {album && (
+              <div className="flex max-w-[150px] justify-start">
+                <ItemArtists artists={artists} />
+              </div>
+            )}
 
+            {(album ?? artists) && <SpotifyLink href={href} />}
+          </div>
+        ) : (
           <SpotifyLink href={href} />
-        </div>
+        )}
       </div>
     </Card>
   )
diff --git a/app/components/items/list/items-list.skeleton.tsx b/app/components/items/list/items-list.skeleton.tsx
index c7d504b4..c108bee4 100644
--- a/app/components/items/list/items-list.skeleton.tsx
+++ b/app/components/items/list/items-list.skeleton.tsx
@@ -25,7 +25,7 @@ function ItemsListSkeleton({
 }: ItemsListSkeleton.Props) {
   return (
     <div className="flex flex-col gap-8">
-      {view === View.CARD && (
+      {view === View.TOP && (
         <>
           <div className="mt-16 flex w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex-row md:items-start lg:mt-24">
             <div className="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row">
@@ -87,6 +87,21 @@ function ItemsListSkeleton({
             ))}
         </div>
       )}
+
+      {view === View.CARD && (
+        <div className="flex flex-col md:flex-row gap-4">
+          {Array.from({ length: 10 })
+            .fill(0)
+            .map((_, index) => (
+              <ItemsListElementSkeleton
+                key={index}
+                withArtists={withArtists}
+                withPlayedAt={withPlayedAt}
+                withPlaysOrPlayTime={withProgress}
+              />
+            ))}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/app/components/items/list/items-list.spec.tsx b/app/components/items/list/items-list.spec.tsx
index e1b76418..dcb3918d 100644
--- a/app/components/items/list/items-list.spec.tsx
+++ b/app/components/items/list/items-list.spec.tsx
@@ -73,6 +73,7 @@ describe('ItemsList', () => {
   test('should match snapshot with playTime', () => {
     const view = render(
       <ItemsList
+        isRounded
         items={tracksMock.map(track => ({
           ...track,
           playTime: 1000 * 60 * 60 * 2,
@@ -88,6 +89,7 @@ describe('ItemsList', () => {
     const view = render(
       <ItemsList
         isTop
+        isRounded
         items={tracksMock.map(track => ({
           ...track,
           playTime: 1000 * 60 * 60 * 2,
diff --git a/app/components/items/list/items-list.stories.tsx b/app/components/items/list/items-list.stories.tsx
index 37a6970e..db7a9d01 100644
--- a/app/components/items/list/items-list.stories.tsx
+++ b/app/components/items/list/items-list.stories.tsx
@@ -141,7 +141,7 @@ export const Skeleton: ItemsListStory = {
 }
 
 export const SkeletonWithTop: ItemsListStory = {
-  render: () => <ItemsListSkeleton view={View.CARD} />,
+  render: () => <ItemsListSkeleton view={View.TOP} />,
 }
 
 export const SkeletonWithArtists: ItemsListStory = {
diff --git a/app/components/items/list/items-list.tsx b/app/components/items/list/items-list.tsx
index 72d64dc0..58f18c27 100644
--- a/app/components/items/list/items-list.tsx
+++ b/app/components/items/list/items-list.tsx
@@ -2,7 +2,7 @@
 
 import type { HtmlHTMLAttributes } from 'react'
 
-import { ItemTopCard } from '../cards'
+import { ItemCard, ItemTopCard } from '../cards'
 import { formatItems } from '../helpers'
 import type { ItemPosition } from '../misc'
 
@@ -32,6 +32,7 @@ namespace ItemsList {
         | TrackEntity[]
         | RigtchStatsResponse<ArtistEntity | TrackEntity | AlbumEntity>
       isTop?: boolean
+      isCard?: boolean
       positionSize?: ItemPosition.Props['size']
       positionClassName?: string
       lastItemSeparator?: boolean
@@ -44,6 +45,7 @@ namespace ItemsList {
 function ItemsList({
   items,
   isTop,
+  isCard,
   positionSize,
   className,
   positionClassName,
@@ -59,7 +61,7 @@ function ItemsList({
   if (isTop) sortedItems.splice(0, 2, sortedItems[1], sortedItems[0])
 
   return (
-    <div className={cn('flex flex-col gap-8', className)}>
+    <div className={cn('align-center flex flex-col gap-8', className)}>
       {isTop && (
         <>
           <div className="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24">
@@ -90,22 +92,32 @@ function ItemsList({
         </>
       )}
 
-      <div className="flex flex-col">
+      <div
+        className={cn(
+          isCard
+            ? 'grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4'
+            : 'flex flex-col'
+        )}
+      >
         {sortedItems.slice(isTop ? 3 : 0).map((item, index, items) => (
           <div key={index}>
-            {/* @ts-expect-error: conditional types are already handled */}
-            <ItemsListElement
-              {...item}
-              genresDisplayLength={genresDisplayLength}
-              positionSize={positionSize}
-              positionClassName={positionClassName}
-              className={cn(
-                isRounded && index === 0 && 'rounded-t-lg',
-                isRounded && index === items.length - 1 && 'rounded-bl-lg'
-              )}
-            />
+            {isCard ? (
+              <ItemCard {...item} />
+            ) : (
+              /* @ts-expect-error: conditional types are already handled */
+              <ItemsListElement
+                {...item}
+                genresDisplayLength={genresDisplayLength}
+                positionSize={positionSize}
+                positionClassName={positionClassName}
+                className={cn(
+                  isRounded && index === 0 && 'rounded-t-lg',
+                  isRounded && index === items.length - 1 && 'rounded-bl-lg'
+                )}
+              />
+            )}
 
-            {items.length === index + 1 ? (
+            {isCard ? null : items.length === index + 1 ? (
               lastItemSeparator ? (
                 <Separator />
               ) : null
diff --git a/app/components/items/misc/item-artists.tsx b/app/components/items/misc/item-artists.tsx
index 1a2e5934..863a80ab 100644
--- a/app/components/items/misc/item-artists.tsx
+++ b/app/components/items/misc/item-artists.tsx
@@ -1,8 +1,8 @@
 'use client'
 
+import type { ArtistEntity } from '@app/api/types'
 import { LinkButton } from '@app/components/common/buttons'
 import { cn } from '@app/utils/cn'
-import type { ArtistEntity } from '@app/api/types'
 
 namespace ItemArtists {
   export type Props = Readonly<
@@ -14,7 +14,7 @@ namespace ItemArtists {
 
 function ItemArtists({ artists, className }: ItemArtists.Props) {
   return (
-    <>
+    <span className="truncate">
       {artists.map(({ name, id }, index) => (
         <span key={name}>
           <LinkButton
@@ -30,7 +30,7 @@ function ItemArtists({ artists, className }: ItemArtists.Props) {
           {index !== artists.length - 1 && <span>, </span>}
         </span>
       ))}
-    </>
+    </span>
   )
 }
 
diff --git a/app/components/items/misc/relative-time.tsx b/app/components/items/misc/relative-time.tsx
index 70069310..22108752 100644
--- a/app/components/items/misc/relative-time.tsx
+++ b/app/components/items/misc/relative-time.tsx
@@ -18,7 +18,7 @@ function RelativeTime({ value, options, className }: RelativeTime.Props) {
       className={cn('whitespace-nowrap text-primary-foreground/80', className)}
       suppressHydrationWarning
     >
-      {DateTime.fromISO(value, options).toRelative()}
+      {DateTime.fromISO(value, options).setLocale('en').toRelative()}
     </p>
   )
 }
diff --git a/app/profile/components/common/selects/select-view.tsx b/app/profile/components/common/selects/select-view.tsx
index a202eb23..0256d00d 100644
--- a/app/profile/components/common/selects/select-view.tsx
+++ b/app/profile/components/common/selects/select-view.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
-import { LuLayers, LuList } from 'react-icons/lu'
+import { LuLayers, LuList, LuStar } from 'react-icons/lu'
 
 import type { ProfileSelectProps } from './props'
 
@@ -19,15 +19,20 @@ import { formatSearchParams } from '@app/utils/formatters'
 export function SelectView({ initialValue }: ProfileSelectProps<View>) {
   const viewOptions = [
     {
-      icon: <LuLayers />,
-      value: View.CARD,
-      label: 'Card',
+      icon: <LuStar />,
+      value: View.TOP,
+      label: 'Top',
     },
     {
       icon: <LuList />,
       value: View.LIST,
       label: 'List',
     },
+    {
+      icon: <LuLayers />,
+      value: View.CARD,
+      label: 'Card',
+    },
   ]
 
   const pathname = usePathname()
diff --git a/app/profile/enums/view.ts b/app/profile/enums/view.ts
index 26b6e304..dc2245ca 100644
--- a/app/profile/enums/view.ts
+++ b/app/profile/enums/view.ts
@@ -1,4 +1,5 @@
 export enum View {
   LIST = 'list',
+  TOP = 'TOP',
   CARD = 'card',
 }
diff --git a/app/profile/sections/items-section.tsx b/app/profile/sections/items-section.tsx
index a55d2ba4..df44ef41 100644
--- a/app/profile/sections/items-section.tsx
+++ b/app/profile/sections/items-section.tsx
@@ -1,6 +1,5 @@
 import { NoDataAlert } from '../components/common'
 
-import { DefaultSection } from '@app/sections'
 import type {
   AlbumEntity,
   ArtistEntity,
@@ -9,6 +8,7 @@ import type {
 } from '@app/api/types'
 import { ItemsList } from '@app/components/items/list'
 import { View } from '@app/profile/enums'
+import { DefaultSection } from '@app/sections'
 
 namespace ItemsSection {
   export type Props = Readonly<
@@ -31,7 +31,11 @@ function ItemsSection({
   return (
     <DefaultSection {...props}>
       {items.length > 0 && (
-        <ItemsList items={items} isTop={view === View.CARD} />
+        <ItemsList
+          items={items}
+          isTop={view === View.TOP}
+          isCard={view === View.CARD}
+        />
       )}
 
       {items.length === 0 && <NoDataAlert />}
diff --git a/app/sections/default-section.tsx b/app/sections/default-section.tsx
index 3f4b3f6b..8a0342ed 100644
--- a/app/sections/default-section.tsx
+++ b/app/sections/default-section.tsx
@@ -19,7 +19,7 @@ function DefaultSection({
   ...props
 }: DefaultSection.Props) {
   return (
-    <section className="flex flex-col gap-4">
+    <section className="flex flex-col gap-6">
       <header className="flex items-center justify-between">
         <h2 className="text-4xl">{title}</h2>
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 24bbf4bf..6a3e5f1b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,6 @@
 import { type Config } from 'tailwindcss'
-import plugin from 'tailwindcss/plugin'
 import TailwindCSSAnimate from 'tailwindcss-animate'
+import plugin from 'tailwindcss/plugin'
 
 export default {
   darkMode: ['class'],
diff --git a/tests/snapshots/item-artists.spec.tsx.snap b/tests/snapshots/item-artists.spec.tsx.snap
index 77accd4d..de2bd607 100644
--- a/tests/snapshots/item-artists.spec.tsx.snap
+++ b/tests/snapshots/item-artists.spec.tsx.snap
@@ -5,6 +5,24 @@ exports[`ItemArtists > should match snapshot with artist entity 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <span
+        class="truncate"
+      >
+        <span>
+          <a
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+            href="/artist/123"
+          >
+            Darkthrone
+          </a>
+        </span>
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span
+      class="truncate"
+    >
       <span>
         <a
           class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
@@ -13,16 +31,6 @@ exports[`ItemArtists > should match snapshot with artist entity 1`] = `
           Darkthrone
         </a>
       </span>
-    </div>
-  </body>,
-  "container": <div>
-    <span>
-      <a
-        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-        href="/artist/123"
-      >
-        Darkthrone
-      </a>
     </span>
   </div>,
   "debug": [Function],
@@ -84,6 +92,57 @@ exports[`ItemArtists > should match snapshot with multiple artist entities 1`] =
   "asFragment": [Function],
   "baseElement": <body>
     <div>
+      <span
+        class="truncate"
+      >
+        <span>
+          <a
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+            href="/artist/123"
+          >
+            Darkthrone
+          </a>
+          <span>
+            , 
+          </span>
+        </span>
+        <span>
+          <a
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+            href="/artist/2"
+          >
+            Darkthrone
+          </a>
+          <span>
+            , 
+          </span>
+        </span>
+        <span>
+          <a
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+            href="/artist/3"
+          >
+            Darkthrone
+          </a>
+          <span>
+            , 
+          </span>
+        </span>
+        <span>
+          <a
+            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+            href="/artist/4"
+          >
+            Darkthrone
+          </a>
+        </span>
+      </span>
+    </div>
+  </body>,
+  "container": <div>
+    <span
+      class="truncate"
+    >
       <span>
         <a
           class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
@@ -125,49 +184,6 @@ exports[`ItemArtists > should match snapshot with multiple artist entities 1`] =
           Darkthrone
         </a>
       </span>
-    </div>
-  </body>,
-  "container": <div>
-    <span>
-      <a
-        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-        href="/artist/123"
-      >
-        Darkthrone
-      </a>
-      <span>
-        , 
-      </span>
-    </span>
-    <span>
-      <a
-        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-        href="/artist/2"
-      >
-        Darkthrone
-      </a>
-      <span>
-        , 
-      </span>
-    </span>
-    <span>
-      <a
-        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-        href="/artist/3"
-      >
-        Darkthrone
-      </a>
-      <span>
-        , 
-      </span>
-    </span>
-    <span>
-      <a
-        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-        href="/artist/4"
-      >
-        Darkthrone
-      </a>
     </span>
   </div>,
   "debug": [Function],
diff --git a/tests/snapshots/item-card.spec.tsx.snap b/tests/snapshots/item-card.spec.tsx.snap
index 79f26afa..1b64f468 100644
--- a/tests/snapshots/item-card.spec.tsx.snap
+++ b/tests/snapshots/item-card.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`ItemCard > should match snapshot as album 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="border border-card text-card-foreground shadow flex flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+        class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
       >
         <img
           alt="Album 1"
@@ -20,7 +20,9 @@ exports[`ItemCard > should match snapshot as album 1`] = `
           style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
           width="200"
         />
-        <div>
+        <div
+          class="flex flex-row justify-between"
+        >
           <a
             class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
             href="/artist/undefined"
@@ -31,42 +33,37 @@ exports[`ItemCard > should match snapshot as album 1`] = `
               Album 1
             </p>
           </a>
-          <div
-            class="flex flex-row justify-between"
+          <button
+            data-state="closed"
           >
-            <div />
-            <button
-              data-state="closed"
+            <a
+              class="cursor-pointer"
+              href="https://spotify.com"
+              target="_blank"
             >
-              <a
-                class="cursor-pointer"
-                href="https://spotify.com"
-                target="_blank"
+              <svg
+                class="min-w-[20px] h-[20px]"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 496 512"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  class="min-w-[20px] h-[20px]"
-                  fill="currentColor"
-                  height="1em"
-                  stroke="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 496 512"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
-                  />
-                </svg>
-              </a>
-            </button>
-          </div>
+                <path
+                  d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                />
+              </svg>
+            </a>
+          </button>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="border border-card text-card-foreground shadow flex flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+      class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
     >
       <img
         alt="Album 1"
@@ -80,7 +77,9 @@ exports[`ItemCard > should match snapshot as album 1`] = `
         style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
         width="200"
       />
-      <div>
+      <div
+        class="flex flex-row justify-between"
+      >
         <a
           class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
           href="/artist/undefined"
@@ -91,35 +90,30 @@ exports[`ItemCard > should match snapshot as album 1`] = `
             Album 1
           </p>
         </a>
-        <div
-          class="flex flex-row justify-between"
+        <button
+          data-state="closed"
         >
-          <div />
-          <button
-            data-state="closed"
+          <a
+            class="cursor-pointer"
+            href="https://spotify.com"
+            target="_blank"
           >
-            <a
-              class="cursor-pointer"
-              href="https://spotify.com"
-              target="_blank"
+            <svg
+              class="min-w-[20px] h-[20px]"
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 496 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                class="min-w-[20px] h-[20px]"
-                fill="currentColor"
-                height="1em"
-                stroke="currentColor"
-                stroke-width="0"
-                viewBox="0 0 496 512"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
-                />
-              </svg>
-            </a>
-          </button>
-        </div>
+              <path
+                d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+              />
+            </svg>
+          </a>
+        </button>
       </div>
     </div>
   </div>,
@@ -183,7 +177,7 @@ exports[`ItemCard > should match snapshot as artist 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="border border-card text-card-foreground shadow flex flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+        class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
       >
         <img
           alt="Darkthrone"
@@ -197,7 +191,9 @@ exports[`ItemCard > should match snapshot as artist 1`] = `
           style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
           width="200"
         />
-        <div>
+        <div
+          class="flex flex-row justify-between"
+        >
           <a
             class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
             href="/artist/123"
@@ -208,42 +204,37 @@ exports[`ItemCard > should match snapshot as artist 1`] = `
               Darkthrone
             </p>
           </a>
-          <div
-            class="flex flex-row justify-between"
+          <button
+            data-state="closed"
           >
-            <div />
-            <button
-              data-state="closed"
+            <a
+              class="cursor-pointer"
+              href="https://spotify.com"
+              target="_blank"
             >
-              <a
-                class="cursor-pointer"
-                href="https://spotify.com"
-                target="_blank"
+              <svg
+                class="min-w-[20px] h-[20px]"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 496 512"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  class="min-w-[20px] h-[20px]"
-                  fill="currentColor"
-                  height="1em"
-                  stroke="currentColor"
-                  stroke-width="0"
-                  viewBox="0 0 496 512"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
-                  />
-                </svg>
-              </a>
-            </button>
-          </div>
+                <path
+                  d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                />
+              </svg>
+            </a>
+          </button>
         </div>
       </div>
     </div>
   </body>,
   "container": <div>
     <div
-      class="border border-card text-card-foreground shadow flex flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+      class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
     >
       <img
         alt="Darkthrone"
@@ -257,7 +248,9 @@ exports[`ItemCard > should match snapshot as artist 1`] = `
         style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
         width="200"
       />
-      <div>
+      <div
+        class="flex flex-row justify-between"
+      >
         <a
           class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
           href="/artist/123"
@@ -268,35 +261,30 @@ exports[`ItemCard > should match snapshot as artist 1`] = `
             Darkthrone
           </p>
         </a>
-        <div
-          class="flex flex-row justify-between"
+        <button
+          data-state="closed"
         >
-          <div />
-          <button
-            data-state="closed"
+          <a
+            class="cursor-pointer"
+            href="https://spotify.com"
+            target="_blank"
           >
-            <a
-              class="cursor-pointer"
-              href="https://spotify.com"
-              target="_blank"
+            <svg
+              class="min-w-[20px] h-[20px]"
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 496 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                class="min-w-[20px] h-[20px]"
-                fill="currentColor"
-                height="1em"
-                stroke="currentColor"
-                stroke-width="0"
-                viewBox="0 0 496 512"
-                width="1em"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
-                />
-              </svg>
-            </a>
-          </button>
-        </div>
+              <path
+                d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+              />
+            </svg>
+          </a>
+        </button>
       </div>
     </div>
   </div>,
@@ -360,7 +348,7 @@ exports[`ItemCard > should match snapshot as track 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="border border-card text-card-foreground shadow flex flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+        class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
       >
         <img
           alt="Track 1"
@@ -374,7 +362,9 @@ exports[`ItemCard > should match snapshot as track 1`] = `
           style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
           width="200"
         />
-        <div>
+        <div
+          class=""
+        >
           <a
             class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
             href="/track/123"
@@ -388,14 +378,22 @@ exports[`ItemCard > should match snapshot as track 1`] = `
           <div
             class="flex flex-row justify-between"
           >
-            <span>
-              <a
-                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                href="/artist/123"
+            <div
+              class="flex max-w-[150px] justify-start"
+            >
+              <span
+                class="truncate"
               >
-                Darkthrone
-              </a>
-            </span>
+                <span>
+                  <a
+                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                    href="/artist/123"
+                  >
+                    Darkthrone
+                  </a>
+                </span>
+              </span>
+            </div>
             <button
               data-state="closed"
             >
@@ -427,7 +425,7 @@ exports[`ItemCard > should match snapshot as track 1`] = `
   </body>,
   "container": <div>
     <div
-      class="border border-card text-card-foreground shadow flex flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+      class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
     >
       <img
         alt="Track 1"
@@ -441,7 +439,9 @@ exports[`ItemCard > should match snapshot as track 1`] = `
         style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
         width="200"
       />
-      <div>
+      <div
+        class=""
+      >
         <a
           class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
           href="/track/123"
@@ -455,14 +455,22 @@ exports[`ItemCard > should match snapshot as track 1`] = `
         <div
           class="flex flex-row justify-between"
         >
-          <span>
-            <a
-              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-              href="/artist/123"
+          <div
+            class="flex max-w-[150px] justify-start"
+          >
+            <span
+              class="truncate"
             >
-              Darkthrone
-            </a>
-          </span>
+              <span>
+                <a
+                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                  href="/artist/123"
+                >
+                  Darkthrone
+                </a>
+              </span>
+            </span>
+          </div>
           <button
             data-state="closed"
           >
diff --git a/tests/snapshots/item-header-section.spec.tsx.snap b/tests/snapshots/item-header-section.spec.tsx.snap
index 3a44a2fb..9636d21c 100644
--- a/tests/snapshots/item-header-section.spec.tsx.snap
+++ b/tests/snapshots/item-header-section.spec.tsx.snap
@@ -62,46 +62,50 @@ exports[`ItemHeaderSection > should match snapshot with artists 1`] = `
                 class="w-full text-xl"
               >
                 by 
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/123"
-                  >
-                    Darkthrone
-                  </a>
+                <span
+                  class="truncate"
+                >
                   <span>
-                    , 
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/123"
+                    >
+                      Darkthrone
+                    </a>
+                    <span>
+                      , 
+                    </span>
                   </span>
-                </span>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/2"
-                  >
-                    Darkthrone
-                  </a>
                   <span>
-                    , 
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/2"
+                    >
+                      Darkthrone
+                    </a>
+                    <span>
+                      , 
+                    </span>
                   </span>
-                </span>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/3"
-                  >
-                    Darkthrone
-                  </a>
                   <span>
-                    , 
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/3"
+                    >
+                      Darkthrone
+                    </a>
+                    <span>
+                      , 
+                    </span>
+                  </span>
+                  <span>
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/4"
+                    >
+                      Darkthrone
+                    </a>
                   </span>
-                </span>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/4"
-                  >
-                    Darkthrone
-                  </a>
                 </span>
               </span>
             </div>
@@ -168,46 +172,50 @@ exports[`ItemHeaderSection > should match snapshot with artists 1`] = `
               class="w-full text-xl"
             >
               by 
-              <span>
-                <a
-                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                  href="/artist/123"
-                >
-                  Darkthrone
-                </a>
+              <span
+                class="truncate"
+              >
                 <span>
-                  , 
+                  <a
+                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                    href="/artist/123"
+                  >
+                    Darkthrone
+                  </a>
+                  <span>
+                    , 
+                  </span>
                 </span>
-              </span>
-              <span>
-                <a
-                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                  href="/artist/2"
-                >
-                  Darkthrone
-                </a>
                 <span>
-                  , 
+                  <a
+                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                    href="/artist/2"
+                  >
+                    Darkthrone
+                  </a>
+                  <span>
+                    , 
+                  </span>
                 </span>
-              </span>
-              <span>
-                <a
-                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                  href="/artist/3"
-                >
-                  Darkthrone
-                </a>
                 <span>
-                  , 
+                  <a
+                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                    href="/artist/3"
+                  >
+                    Darkthrone
+                  </a>
+                  <span>
+                    , 
+                  </span>
+                </span>
+                <span>
+                  <a
+                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                    href="/artist/4"
+                  >
+                    Darkthrone
+                  </a>
                 </span>
-              </span>
-              <span>
-                <a
-                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                  href="/artist/4"
-                >
-                  Darkthrone
-                </a>
               </span>
             </span>
           </div>
diff --git a/tests/snapshots/item-top-card.spec.tsx.snap b/tests/snapshots/item-top-card.spec.tsx.snap
index 793a116c..6c9b2074 100644
--- a/tests/snapshots/item-top-card.spec.tsx.snap
+++ b/tests/snapshots/item-top-card.spec.tsx.snap
@@ -384,13 +384,17 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = `
                 Track 1
               </p>
             </a>
-            <span>
-              <a
-                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                href="/artist/123"
-              >
-                Darkthrone
-              </a>
+            <span
+              class="truncate"
+            >
+              <span>
+                <a
+                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                  href="/artist/123"
+                >
+                  Darkthrone
+                </a>
+              </span>
             </span>
           </div>
           <div
@@ -537,13 +541,17 @@ exports[`ItemTopCard > should match snapshot as top 2 1`] = `
               Track 1
             </p>
           </a>
-          <span>
-            <a
-              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-              href="/artist/123"
-            >
-              Darkthrone
-            </a>
+          <span
+            class="truncate"
+          >
+            <span>
+              <a
+                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                href="/artist/123"
+              >
+                Darkthrone
+              </a>
+            </span>
           </span>
         </div>
         <div
@@ -747,13 +755,17 @@ exports[`ItemTopCard > should match snapshot as top 3 1`] = `
                 Track 1
               </p>
             </a>
-            <span>
-              <a
-                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                href="/artist/123"
-              >
-                Darkthrone
-              </a>
+            <span
+              class="truncate"
+            >
+              <span>
+                <a
+                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                  href="/artist/123"
+                >
+                  Darkthrone
+                </a>
+              </span>
             </span>
           </div>
           <div
@@ -906,13 +918,17 @@ exports[`ItemTopCard > should match snapshot as top 3 1`] = `
               Track 1
             </p>
           </a>
-          <span>
-            <a
-              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-              href="/artist/123"
-            >
-              Darkthrone
-            </a>
+          <span
+            class="truncate"
+          >
+            <span>
+              <a
+                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                href="/artist/123"
+              >
+                Darkthrone
+              </a>
+            </span>
           </span>
         </div>
         <div
@@ -1122,13 +1138,17 @@ exports[`ItemTopCard > should match snapshot as track 1`] = `
                 Track 1
               </p>
             </a>
-            <span>
-              <a
-                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                href="/artist/123"
-              >
-                Darkthrone
-              </a>
+            <span
+              class="truncate"
+            >
+              <span>
+                <a
+                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                  href="/artist/123"
+                >
+                  Darkthrone
+                </a>
+              </span>
             </span>
           </div>
           <div
@@ -1178,13 +1198,17 @@ exports[`ItemTopCard > should match snapshot as track 1`] = `
               Track 1
             </p>
           </a>
-          <span>
-            <a
-              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-              href="/artist/123"
-            >
-              Darkthrone
-            </a>
+          <span
+            class="truncate"
+          >
+            <span>
+              <a
+                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                href="/artist/123"
+              >
+                Darkthrone
+              </a>
+            </span>
           </span>
         </div>
         <div
@@ -1291,13 +1315,17 @@ exports[`ItemTopCard > should match snapshot as track with play time 1`] = `
                 Track 1
               </p>
             </a>
-            <span>
-              <a
-                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                href="/artist/123"
-              >
-                Darkthrone
-              </a>
+            <span
+              class="truncate"
+            >
+              <span>
+                <a
+                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                  href="/artist/123"
+                >
+                  Darkthrone
+                </a>
+              </span>
             </span>
           </div>
           <div
@@ -1372,13 +1400,17 @@ exports[`ItemTopCard > should match snapshot as track with play time 1`] = `
               Track 1
             </p>
           </a>
-          <span>
-            <a
-              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-              href="/artist/123"
-            >
-              Darkthrone
-            </a>
+          <span
+            class="truncate"
+          >
+            <span>
+              <a
+                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                href="/artist/123"
+              >
+                Darkthrone
+              </a>
+            </span>
           </span>
         </div>
         <div
@@ -1510,13 +1542,17 @@ exports[`ItemTopCard > should match snapshot as track with play time and plays 1
                 Track 1
               </p>
             </a>
-            <span>
-              <a
-                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                href="/artist/123"
-              >
-                Darkthrone
-              </a>
+            <span
+              class="truncate"
+            >
+              <span>
+                <a
+                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                  href="/artist/123"
+                >
+                  Darkthrone
+                </a>
+              </span>
             </span>
           </div>
           <div
@@ -1591,13 +1627,17 @@ exports[`ItemTopCard > should match snapshot as track with play time and plays 1
               Track 1
             </p>
           </a>
-          <span>
-            <a
-              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-              href="/artist/123"
-            >
-              Darkthrone
-            </a>
+          <span
+            class="truncate"
+          >
+            <span>
+              <a
+                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                href="/artist/123"
+              >
+                Darkthrone
+              </a>
+            </span>
           </span>
         </div>
         <div
diff --git a/tests/snapshots/items-list-element.spec.tsx.snap b/tests/snapshots/items-list-element.spec.tsx.snap
index 5536307d..7fd69489 100644
--- a/tests/snapshots/items-list-element.spec.tsx.snap
+++ b/tests/snapshots/items-list-element.spec.tsx.snap
@@ -48,46 +48,50 @@ exports[`ItemsListElement > should match snapshot with artists 1`] = `
                 class="flex w-full items-center justify-between"
               >
                 <div>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                      href="/artist/123"
-                    >
-                      Darkthrone
-                    </a>
+                  <span
+                    class="truncate"
+                  >
                     <span>
-                      , 
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                        href="/artist/123"
+                      >
+                        Darkthrone
+                      </a>
+                      <span>
+                        , 
+                      </span>
                     </span>
-                  </span>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                      href="/artist/2"
-                    >
-                      Mayhem
-                    </a>
                     <span>
-                      , 
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                        href="/artist/2"
+                      >
+                        Mayhem
+                      </a>
+                      <span>
+                        , 
+                      </span>
                     </span>
-                  </span>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                      href="/artist/3"
-                    >
-                      Darkthrone
-                    </a>
                     <span>
-                      , 
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                        href="/artist/3"
+                      >
+                        Darkthrone
+                      </a>
+                      <span>
+                        , 
+                      </span>
+                    </span>
+                    <span>
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                        href="/artist/4"
+                      >
+                        Darkthrone
+                      </a>
                     </span>
-                  </span>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                      href="/artist/4"
-                    >
-                      Darkthrone
-                    </a>
                   </span>
                   <div
                     class="hidden flex-row gap-1 md:flex"
@@ -172,47 +176,51 @@ exports[`ItemsListElement > should match snapshot with artists 1`] = `
               class="flex w-full items-center justify-between"
             >
               <div>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/123"
-                  >
-                    Darkthrone
-                  </a>
+                <span
+                  class="truncate"
+                >
+                  <span>
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/123"
+                    >
+                      Darkthrone
+                    </a>
+                    <span>
+                      , 
+                    </span>
+                  </span>
                   <span>
-                    , 
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/2"
+                    >
+                      Mayhem
+                    </a>
+                    <span>
+                      , 
+                    </span>
                   </span>
-                </span>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/2"
-                  >
-                    Mayhem
-                  </a>
                   <span>
-                    , 
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/3"
+                    >
+                      Darkthrone
+                    </a>
+                    <span>
+                      , 
+                    </span>
                   </span>
-                </span>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/3"
-                  >
-                    Darkthrone
-                  </a>
                   <span>
-                    , 
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/4"
+                    >
+                      Darkthrone
+                    </a>
                   </span>
                 </span>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/4"
-                  >
-                    Darkthrone
-                  </a>
-                </span>
                 <div
                   class="hidden flex-row gap-1 md:flex"
                 />
@@ -353,46 +361,50 @@ exports[`ItemsListElement > should match snapshot with artists and albums 1`] =
                 class="flex w-full items-center justify-between"
               >
                 <div>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                      href="/artist/123"
-                    >
-                      Darkthrone
-                    </a>
+                  <span
+                    class="truncate"
+                  >
                     <span>
-                      , 
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                        href="/artist/123"
+                      >
+                        Darkthrone
+                      </a>
+                      <span>
+                        , 
+                      </span>
                     </span>
-                  </span>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                      href="/artist/2"
-                    >
-                      Mayhem
-                    </a>
                     <span>
-                      , 
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                        href="/artist/2"
+                      >
+                        Mayhem
+                      </a>
+                      <span>
+                        , 
+                      </span>
                     </span>
-                  </span>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                      href="/artist/3"
-                    >
-                      Darkthrone
-                    </a>
                     <span>
-                      , 
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                        href="/artist/3"
+                      >
+                        Darkthrone
+                      </a>
+                      <span>
+                        , 
+                      </span>
+                    </span>
+                    <span>
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                        href="/artist/4"
+                      >
+                        Darkthrone
+                      </a>
                     </span>
-                  </span>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                      href="/artist/4"
-                    >
-                      Darkthrone
-                    </a>
                   </span>
                   <div
                     class="hidden flex-row gap-1 md:flex"
@@ -477,47 +489,51 @@ exports[`ItemsListElement > should match snapshot with artists and albums 1`] =
               class="flex w-full items-center justify-between"
             >
               <div>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/123"
-                  >
-                    Darkthrone
-                  </a>
+                <span
+                  class="truncate"
+                >
+                  <span>
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/123"
+                    >
+                      Darkthrone
+                    </a>
+                    <span>
+                      , 
+                    </span>
+                  </span>
                   <span>
-                    , 
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/2"
+                    >
+                      Mayhem
+                    </a>
+                    <span>
+                      , 
+                    </span>
                   </span>
-                </span>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/2"
-                  >
-                    Mayhem
-                  </a>
                   <span>
-                    , 
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/3"
+                    >
+                      Darkthrone
+                    </a>
+                    <span>
+                      , 
+                    </span>
                   </span>
-                </span>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/3"
-                  >
-                    Darkthrone
-                  </a>
                   <span>
-                    , 
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                      href="/artist/4"
+                    >
+                      Darkthrone
+                    </a>
                   </span>
                 </span>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                    href="/artist/4"
-                  >
-                    Darkthrone
-                  </a>
-                </span>
                 <div
                   class="hidden flex-row gap-1 md:flex"
                 />
diff --git a/tests/snapshots/items-list.spec.tsx.snap b/tests/snapshots/items-list.spec.tsx.snap
index cc7fdb90..cb31cad1 100644
--- a/tests/snapshots/items-list.spec.tsx.snap
+++ b/tests/snapshots/items-list.spec.tsx.snap
@@ -6,17 +6,17 @@ exports[`ItemsList > should match snapshot with playTime 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col gap-8"
+        class="align-center flex flex-col gap-8"
       >
         <div
           class="flex flex-col"
         >
           <div>
             <div
-              class="relative overflow-hidden"
+              class="relative overflow-hidden rounded-t-lg"
             >
               <div
-                class="absolute -left-[8px] -z-10 h-full -skew-x-12 bg-primary transition-all duration-700 ease-in-out"
+                class="absolute -left-[8px] -z-10 h-full -skew-x-12 bg-primary transition-all duration-700 ease-in-out rounded-t-lg"
                 style="width: calc(0% + 16px);"
               />
               <div
@@ -59,13 +59,17 @@ exports[`ItemsList > should match snapshot with playTime 1`] = `
                       class="flex w-full items-center justify-between"
                     >
                       <div>
-                        <span>
-                          <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                            href="/artist/123"
-                          >
-                            Darkthrone
-                          </a>
+                        <span
+                          class="truncate"
+                        >
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
                         </span>
                         <div
                           class="hidden flex-row gap-1 md:flex"
@@ -159,13 +163,17 @@ exports[`ItemsList > should match snapshot with playTime 1`] = `
                       class="flex w-full items-center justify-between"
                     >
                       <div>
-                        <span>
-                          <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                            href="/artist/123"
-                          >
-                            Darkthrone
-                          </a>
+                        <span
+                          class="truncate"
+                        >
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
                         </span>
                         <div
                           class="hidden flex-row gap-1 md:flex"
@@ -213,10 +221,10 @@ exports[`ItemsList > should match snapshot with playTime 1`] = `
           </div>
           <div>
             <div
-              class="relative overflow-hidden"
+              class="relative overflow-hidden rounded-bl-lg"
             >
               <div
-                class="absolute -left-[8px] -z-10 h-full -skew-x-12 bg-primary transition-all duration-700 ease-in-out"
+                class="absolute -left-[8px] -z-10 h-full -skew-x-12 bg-primary transition-all duration-700 ease-in-out rounded-bl-lg"
                 style="width: calc(0% + 16px);"
               />
               <div
@@ -259,13 +267,17 @@ exports[`ItemsList > should match snapshot with playTime 1`] = `
                       class="flex w-full items-center justify-between"
                     >
                       <div>
-                        <span>
-                          <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                            href="/artist/123"
-                          >
-                            Darkthrone
-                          </a>
+                        <span
+                          class="truncate"
+                        >
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
                         </span>
                         <div
                           class="hidden flex-row gap-1 md:flex"
@@ -312,17 +324,17 @@ exports[`ItemsList > should match snapshot with playTime 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-col gap-8"
+      class="align-center flex flex-col gap-8"
     >
       <div
         class="flex flex-col"
       >
         <div>
           <div
-            class="relative overflow-hidden"
+            class="relative overflow-hidden rounded-t-lg"
           >
             <div
-              class="absolute -left-[8px] -z-10 h-full -skew-x-12 bg-primary transition-all duration-700 ease-in-out"
+              class="absolute -left-[8px] -z-10 h-full -skew-x-12 bg-primary transition-all duration-700 ease-in-out rounded-t-lg"
               style="width: calc(0% + 16px);"
             />
             <div
@@ -365,13 +377,17 @@ exports[`ItemsList > should match snapshot with playTime 1`] = `
                     class="flex w-full items-center justify-between"
                   >
                     <div>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                       <div
                         class="hidden flex-row gap-1 md:flex"
@@ -465,13 +481,17 @@ exports[`ItemsList > should match snapshot with playTime 1`] = `
                     class="flex w-full items-center justify-between"
                   >
                     <div>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                       <div
                         class="hidden flex-row gap-1 md:flex"
@@ -519,10 +539,10 @@ exports[`ItemsList > should match snapshot with playTime 1`] = `
         </div>
         <div>
           <div
-            class="relative overflow-hidden"
+            class="relative overflow-hidden rounded-bl-lg"
           >
             <div
-              class="absolute -left-[8px] -z-10 h-full -skew-x-12 bg-primary transition-all duration-700 ease-in-out"
+              class="absolute -left-[8px] -z-10 h-full -skew-x-12 bg-primary transition-all duration-700 ease-in-out rounded-bl-lg"
               style="width: calc(0% + 16px);"
             />
             <div
@@ -565,13 +585,17 @@ exports[`ItemsList > should match snapshot with playTime 1`] = `
                     class="flex w-full items-center justify-between"
                   >
                     <div>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                       <div
                         class="hidden flex-row gap-1 md:flex"
@@ -675,7 +699,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col gap-8"
+        class="align-center flex flex-col gap-8"
       >
         <div
           class="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24"
@@ -718,13 +742,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                       Track 1
                     </p>
                   </a>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                      href="/artist/123"
-                    >
-                      Darkthrone
-                    </a>
+                  <span
+                    class="truncate"
+                  >
+                    <span>
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                        href="/artist/123"
+                      >
+                        Darkthrone
+                      </a>
+                    </span>
                   </span>
                 </div>
                 <div
@@ -801,13 +829,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                       Track 1
                     </p>
                   </a>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                      href="/artist/123"
-                    >
-                      Darkthrone
-                    </a>
+                  <span
+                    class="truncate"
+                  >
+                    <span>
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                        href="/artist/123"
+                      >
+                        Darkthrone
+                      </a>
+                    </span>
                   </span>
                 </div>
                 <div
@@ -888,13 +920,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                       Track 1
                     </p>
                   </a>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                      href="/artist/123"
-                    >
-                      Darkthrone
-                    </a>
+                  <span
+                    class="truncate"
+                  >
+                    <span>
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                        href="/artist/123"
+                      >
+                        Darkthrone
+                      </a>
+                    </span>
                   </span>
                 </div>
                 <div
@@ -990,13 +1026,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                           Track 1
                         </p>
                       </a>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                     </div>
                     <div
@@ -1079,13 +1119,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                           Track 1
                         </p>
                       </a>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                     </div>
                     <div
@@ -1168,13 +1212,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                           Track 1
                         </p>
                       </a>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                     </div>
                     <div
@@ -1278,7 +1326,7 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-col gap-8"
+      class="align-center flex flex-col gap-8"
     >
       <div
         class="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24"
@@ -1321,13 +1369,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                     Track 1
                   </p>
                 </a>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                    href="/artist/123"
-                  >
-                    Darkthrone
-                  </a>
+                <span
+                  class="truncate"
+                >
+                  <span>
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                      href="/artist/123"
+                    >
+                      Darkthrone
+                    </a>
+                  </span>
                 </span>
               </div>
               <div
@@ -1404,13 +1456,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                     Track 1
                   </p>
                 </a>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                    href="/artist/123"
-                  >
-                    Darkthrone
-                  </a>
+                <span
+                  class="truncate"
+                >
+                  <span>
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                      href="/artist/123"
+                    >
+                      Darkthrone
+                    </a>
+                  </span>
                 </span>
               </div>
               <div
@@ -1491,13 +1547,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                     Track 1
                   </p>
                 </a>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                    href="/artist/123"
-                  >
-                    Darkthrone
-                  </a>
+                <span
+                  class="truncate"
+                >
+                  <span>
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                      href="/artist/123"
+                    >
+                      Darkthrone
+                    </a>
+                  </span>
                 </span>
               </div>
               <div
@@ -1593,13 +1653,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                         Track 1
                       </p>
                     </a>
-                    <span>
-                      <a
-                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                        href="/artist/123"
-                      >
-                        Darkthrone
-                      </a>
+                    <span
+                      class="truncate"
+                    >
+                      <span>
+                        <a
+                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                          href="/artist/123"
+                        >
+                          Darkthrone
+                        </a>
+                      </span>
                     </span>
                   </div>
                   <div
@@ -1682,13 +1746,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                         Track 1
                       </p>
                     </a>
-                    <span>
-                      <a
-                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                        href="/artist/123"
-                      >
-                        Darkthrone
-                      </a>
+                    <span
+                      class="truncate"
+                    >
+                      <span>
+                        <a
+                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                          href="/artist/123"
+                        >
+                          Darkthrone
+                        </a>
+                      </span>
                     </span>
                   </div>
                   <div
@@ -1771,13 +1839,17 @@ exports[`ItemsList > should match snapshot with playTime and top 1`] = `
                         Track 1
                       </p>
                     </a>
-                    <span>
-                      <a
-                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                        href="/artist/123"
-                      >
-                        Darkthrone
-                      </a>
+                    <span
+                      class="truncate"
+                    >
+                      <span>
+                        <a
+                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                          href="/artist/123"
+                        >
+                          Darkthrone
+                        </a>
+                      </span>
                     </span>
                   </div>
                   <div
@@ -1938,7 +2010,7 @@ exports[`ItemsList > should match snapshot with plays 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col gap-8"
+        class="align-center flex flex-col gap-8"
       >
         <div
           class="flex flex-col"
@@ -1991,13 +2063,17 @@ exports[`ItemsList > should match snapshot with plays 1`] = `
                       class="flex w-full items-center justify-between"
                     >
                       <div>
-                        <span>
-                          <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                            href="/artist/123"
-                          >
-                            Darkthrone
-                          </a>
+                        <span
+                          class="truncate"
+                        >
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
                         </span>
                         <div
                           class="hidden flex-row gap-1 md:flex"
@@ -2091,13 +2167,17 @@ exports[`ItemsList > should match snapshot with plays 1`] = `
                       class="flex w-full items-center justify-between"
                     >
                       <div>
-                        <span>
-                          <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                            href="/artist/123"
-                          >
-                            Darkthrone
-                          </a>
+                        <span
+                          class="truncate"
+                        >
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
                         </span>
                         <div
                           class="hidden flex-row gap-1 md:flex"
@@ -2191,13 +2271,17 @@ exports[`ItemsList > should match snapshot with plays 1`] = `
                       class="flex w-full items-center justify-between"
                     >
                       <div>
-                        <span>
-                          <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                            href="/artist/123"
-                          >
-                            Darkthrone
-                          </a>
+                        <span
+                          class="truncate"
+                        >
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
                         </span>
                         <div
                           class="hidden flex-row gap-1 md:flex"
@@ -2244,7 +2328,7 @@ exports[`ItemsList > should match snapshot with plays 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-col gap-8"
+      class="align-center flex flex-col gap-8"
     >
       <div
         class="flex flex-col"
@@ -2297,13 +2381,17 @@ exports[`ItemsList > should match snapshot with plays 1`] = `
                     class="flex w-full items-center justify-between"
                   >
                     <div>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                       <div
                         class="hidden flex-row gap-1 md:flex"
@@ -2397,13 +2485,17 @@ exports[`ItemsList > should match snapshot with plays 1`] = `
                     class="flex w-full items-center justify-between"
                   >
                     <div>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                       <div
                         class="hidden flex-row gap-1 md:flex"
@@ -2497,13 +2589,17 @@ exports[`ItemsList > should match snapshot with plays 1`] = `
                     class="flex w-full items-center justify-between"
                   >
                     <div>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                       <div
                         class="hidden flex-row gap-1 md:flex"
@@ -2607,7 +2703,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col gap-8"
+        class="align-center flex flex-col gap-8"
       >
         <div
           class="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24"
@@ -2650,13 +2746,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       Track 1
                     </p>
                   </a>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                      href="/artist/123"
-                    >
-                      Darkthrone
-                    </a>
+                  <span
+                    class="truncate"
+                  >
+                    <span>
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                        href="/artist/123"
+                      >
+                        Darkthrone
+                      </a>
+                    </span>
                   </span>
                 </div>
                 <div
@@ -2733,13 +2833,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       Track 1
                     </p>
                   </a>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                      href="/artist/123"
-                    >
-                      Darkthrone
-                    </a>
+                  <span
+                    class="truncate"
+                  >
+                    <span>
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                        href="/artist/123"
+                      >
+                        Darkthrone
+                      </a>
+                    </span>
                   </span>
                 </div>
                 <div
@@ -2820,13 +2924,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                       Track 1
                     </p>
                   </a>
-                  <span>
-                    <a
-                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                      href="/artist/123"
-                    >
-                      Darkthrone
-                    </a>
+                  <span
+                    class="truncate"
+                  >
+                    <span>
+                      <a
+                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                        href="/artist/123"
+                      >
+                        Darkthrone
+                      </a>
+                    </span>
                   </span>
                 </div>
                 <div
@@ -2922,13 +3030,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                           Track 1
                         </p>
                       </a>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                     </div>
                     <div
@@ -3011,13 +3123,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                           Track 1
                         </p>
                       </a>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                     </div>
                     <div
@@ -3100,13 +3216,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                           Track 1
                         </p>
                       </a>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                     </div>
                     <div
@@ -3210,7 +3330,7 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-col gap-8"
+      class="align-center flex flex-col gap-8"
     >
       <div
         class="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24"
@@ -3253,13 +3373,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     Track 1
                   </p>
                 </a>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                    href="/artist/123"
-                  >
-                    Darkthrone
-                  </a>
+                <span
+                  class="truncate"
+                >
+                  <span>
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                      href="/artist/123"
+                    >
+                      Darkthrone
+                    </a>
+                  </span>
                 </span>
               </div>
               <div
@@ -3336,13 +3460,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     Track 1
                   </p>
                 </a>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                    href="/artist/123"
-                  >
-                    Darkthrone
-                  </a>
+                <span
+                  class="truncate"
+                >
+                  <span>
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                      href="/artist/123"
+                    >
+                      Darkthrone
+                    </a>
+                  </span>
                 </span>
               </div>
               <div
@@ -3423,13 +3551,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                     Track 1
                   </p>
                 </a>
-                <span>
-                  <a
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                    href="/artist/123"
-                  >
-                    Darkthrone
-                  </a>
+                <span
+                  class="truncate"
+                >
+                  <span>
+                    <a
+                      class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                      href="/artist/123"
+                    >
+                      Darkthrone
+                    </a>
+                  </span>
                 </span>
               </div>
               <div
@@ -3525,13 +3657,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                         Track 1
                       </p>
                     </a>
-                    <span>
-                      <a
-                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                        href="/artist/123"
-                      >
-                        Darkthrone
-                      </a>
+                    <span
+                      class="truncate"
+                    >
+                      <span>
+                        <a
+                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                          href="/artist/123"
+                        >
+                          Darkthrone
+                        </a>
+                      </span>
                     </span>
                   </div>
                   <div
@@ -3614,13 +3750,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                         Track 1
                       </p>
                     </a>
-                    <span>
-                      <a
-                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                        href="/artist/123"
-                      >
-                        Darkthrone
-                      </a>
+                    <span
+                      class="truncate"
+                    >
+                      <span>
+                        <a
+                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                          href="/artist/123"
+                        >
+                          Darkthrone
+                        </a>
+                      </span>
                     </span>
                   </div>
                   <div
@@ -3703,13 +3843,17 @@ exports[`ItemsList > should match snapshot with plays and top 1`] = `
                         Track 1
                       </p>
                     </a>
-                    <span>
-                      <a
-                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                        href="/artist/123"
-                      >
-                        Darkthrone
-                      </a>
+                    <span
+                      class="truncate"
+                    >
+                      <span>
+                        <a
+                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                          href="/artist/123"
+                        >
+                          Darkthrone
+                        </a>
+                      </span>
                     </span>
                   </div>
                   <div
@@ -3870,7 +4014,7 @@ exports[`ItemsList > should match snapshot with position 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col gap-8"
+        class="align-center flex flex-col gap-8"
       >
         <div
           class="flex flex-col"
@@ -4288,7 +4432,7 @@ exports[`ItemsList > should match snapshot with position 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-col gap-8"
+      class="align-center flex flex-col gap-8"
     >
       <div
         class="flex flex-col"
@@ -4763,7 +4907,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col gap-8"
+        class="align-center flex flex-col gap-8"
       >
         <div
           class="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24"
@@ -5933,7 +6077,7 @@ exports[`ItemsList > should match snapshot with position and top 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-col gap-8"
+      class="align-center flex flex-col gap-8"
     >
       <div
         class="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24"
@@ -7160,7 +7304,7 @@ exports[`ItemsList > should match snapshot with position size 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col gap-8"
+        class="align-center flex flex-col gap-8"
       >
         <div
           class="flex flex-col"
@@ -7578,7 +7722,7 @@ exports[`ItemsList > should match snapshot with position size 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-col gap-8"
+      class="align-center flex flex-col gap-8"
     >
       <div
         class="flex flex-col"
@@ -8053,7 +8197,7 @@ exports[`ItemsList > should match snapshot with relative time 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-col gap-8"
+        class="align-center flex flex-col gap-8"
       >
         <div
           class="flex flex-col"
@@ -8097,13 +8241,17 @@ exports[`ItemsList > should match snapshot with relative time 1`] = `
                       class="flex w-full items-center justify-between"
                     >
                       <div>
-                        <span>
-                          <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                            href="/artist/123"
-                          >
-                            Darkthrone
-                          </a>
+                        <span
+                          class="truncate"
+                        >
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
                         </span>
                         <div
                           class="hidden flex-row gap-1 md:flex"
@@ -8192,13 +8340,17 @@ exports[`ItemsList > should match snapshot with relative time 1`] = `
                       class="flex w-full items-center justify-between"
                     >
                       <div>
-                        <span>
-                          <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                            href="/artist/123"
-                          >
-                            Darkthrone
-                          </a>
+                        <span
+                          class="truncate"
+                        >
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
                         </span>
                         <div
                           class="hidden flex-row gap-1 md:flex"
@@ -8287,13 +8439,17 @@ exports[`ItemsList > should match snapshot with relative time 1`] = `
                       class="flex w-full items-center justify-between"
                     >
                       <div>
-                        <span>
-                          <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                            href="/artist/123"
-                          >
-                            Darkthrone
-                          </a>
+                        <span
+                          class="truncate"
+                        >
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
                         </span>
                         <div
                           class="hidden flex-row gap-1 md:flex"
@@ -8344,7 +8500,7 @@ exports[`ItemsList > should match snapshot with relative time 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-col gap-8"
+      class="align-center flex flex-col gap-8"
     >
       <div
         class="flex flex-col"
@@ -8388,13 +8544,17 @@ exports[`ItemsList > should match snapshot with relative time 1`] = `
                     class="flex w-full items-center justify-between"
                   >
                     <div>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                       <div
                         class="hidden flex-row gap-1 md:flex"
@@ -8483,13 +8643,17 @@ exports[`ItemsList > should match snapshot with relative time 1`] = `
                     class="flex w-full items-center justify-between"
                   >
                     <div>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                       <div
                         class="hidden flex-row gap-1 md:flex"
@@ -8578,13 +8742,17 @@ exports[`ItemsList > should match snapshot with relative time 1`] = `
                     class="flex w-full items-center justify-between"
                   >
                     <div>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
+                      <span
+                        class="truncate"
+                      >
+                        <span>
+                          <a
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                            href="/artist/123"
+                          >
+                            Darkthrone
+                          </a>
+                        </span>
                       </span>
                       <div
                         class="hidden flex-row gap-1 md:flex"
diff --git a/tests/snapshots/items-section.spec.tsx.snap b/tests/snapshots/items-section.spec.tsx.snap
index 4294d217..37146718 100644
--- a/tests/snapshots/items-section.spec.tsx.snap
+++ b/tests/snapshots/items-section.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
   "baseElement": <body>
     <div>
       <section
-        class="flex flex-col gap-4"
+        class="flex flex-col gap-6"
       >
         <header
           class="flex items-center justify-between"
@@ -21,3610 +21,603 @@ exports[`ItemsSection > should match snapshot as artists with view card 1`] = `
           class="flex flex-col gap-4"
         >
           <div
-            class="flex flex-col gap-8"
+            class="align-center flex flex-col gap-8"
           >
             <div
-              class="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24"
+              class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4"
             >
-              <div
-                class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
-              >
+              <div>
                 <div
-                  class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
+                  class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
                 >
-                  <header
-                    class="m-0 flex w-full flex-col items-center gap-2 p-0"
+                  <img
+                    alt="Darkthrone"
+                    class="rounded-md"
+                    data-nimg="1"
+                    decoding="async"
+                    height="200"
+                    loading="lazy"
+                    src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                    srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                    style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                    width="200"
+                  />
+                  <div
+                    class="flex flex-row justify-between"
                   >
-                    <div
-                      class="rounded-xl p-1"
+                    <a
+                      class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                      href="/artist/123"
                     >
-                      <img
-                        alt="Darkthrone"
-                        class="rounded-md"
-                        data-nimg="1"
-                        decoding="async"
-                        fetchpriority="high"
-                        height="164"
-                        src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                        srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                        style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                        width="164"
-                      />
-                    </div>
-                    <div
-                      class="flex flex-col items-center"
+                      <p
+                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+                      >
+                        Darkthrone
+                      </p>
+                    </a>
+                    <button
+                      data-state="closed"
                     >
                       <a
-                        class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                        href="/artist/2"
+                        class="cursor-pointer"
+                        href="https://spotify.com"
+                        target="_blank"
                       >
-                        <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        <svg
+                          class="min-w-[20px] h-[20px]"
+                          fill="currentColor"
+                          height="1em"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 496 512"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          Darkthrone
-                        </p>
+                          <path
+                            d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                          />
+                        </svg>
                       </a>
-                    </div>
-                    <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div
+                  class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+                >
+                  <img
+                    alt="Darkthrone"
+                    class="rounded-md"
+                    data-nimg="1"
+                    decoding="async"
+                    height="200"
+                    loading="lazy"
+                    src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                    srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                    style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                    width="200"
+                  />
+                  <div
+                    class="flex flex-row justify-between"
+                  >
+                    <a
+                      class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                      href="/artist/2"
                     >
-                      <span
-                        class="w-[2rem] text-center text-5xl"
+                      <p
+                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
                       >
-                        2
-                      </span>
-                      <div
-                        class="flex h-full flex-wrap justify-center gap-2 flex-row"
+                        Darkthrone
+                      </p>
+                    </a>
+                    <button
+                      data-state="closed"
+                    >
+                      <a
+                        class="cursor-pointer"
+                        href="https://spotify.com"
+                        target="_blank"
                       >
-                        <div
-                          class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                        >
-                          pop
-                        </div>
-                        <div
-                          class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                        >
-                          rock
-                        </div>
-                        <div
-                          class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
+                        <svg
+                          class="min-w-[20px] h-[20px]"
+                          fill="currentColor"
+                          height="1em"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 496 512"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          rap
-                        </div>
-                      </div>
-                      <div
-                        class="mt-4 flex w-full flex-row justify-center gap-1"
-                      >
-                        <div>
-                          <svg
-                            class="text-slate-400"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-slate-400"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-slate-400"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 42px; margin-top: -12px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-slate-400"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-slate-400"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                  </header>
+                          <path
+                            d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                          />
+                        </svg>
+                      </a>
+                    </button>
+                  </div>
                 </div>
+              </div>
+              <div>
                 <div
-                  class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
+                  class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
                 >
-                  <header
-                    class="m-0 flex w-full flex-col items-center gap-2 p-0"
+                  <img
+                    alt="Darkthrone"
+                    class="rounded-md"
+                    data-nimg="1"
+                    decoding="async"
+                    height="200"
+                    loading="lazy"
+                    src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                    srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                    style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                    width="200"
+                  />
+                  <div
+                    class="flex flex-row justify-between"
                   >
-                    <div
-                      class="rounded-xl p-1"
+                    <a
+                      class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                      href="/artist/3"
                     >
-                      <img
-                        alt="Darkthrone"
-                        class="rounded-md"
-                        data-nimg="1"
-                        decoding="async"
-                        fetchpriority="high"
-                        height="164"
-                        src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                        srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                        style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                        width="164"
-                      />
-                    </div>
-                    <div
-                      class="flex flex-col items-center"
+                      <p
+                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+                      >
+                        Darkthrone
+                      </p>
+                    </a>
+                    <button
+                      data-state="closed"
                     >
                       <a
-                        class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                        href="/artist/123"
+                        class="cursor-pointer"
+                        href="https://spotify.com"
+                        target="_blank"
                       >
-                        <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        <svg
+                          class="min-w-[20px] h-[20px]"
+                          fill="currentColor"
+                          height="1em"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 496 512"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          Darkthrone
-                        </p>
+                          <path
+                            d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                          />
+                        </svg>
                       </a>
-                    </div>
-                    <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <div
+                  class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+                >
+                  <img
+                    alt="Darkthrone"
+                    class="rounded-md"
+                    data-nimg="1"
+                    decoding="async"
+                    height="200"
+                    loading="lazy"
+                    src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                    srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                    style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                    width="200"
+                  />
+                  <div
+                    class="flex flex-row justify-between"
+                  >
+                    <a
+                      class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                      href="/artist/4"
                     >
-                      <span
-                        class="w-[2rem] text-center text-5xl"
+                      <p
+                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
                       >
-                        1
-                      </span>
-                      <div
-                        class="flex h-full flex-wrap justify-center gap-2 flex-row"
+                        Darkthrone
+                      </p>
+                    </a>
+                    <button
+                      data-state="closed"
+                    >
+                      <a
+                        class="cursor-pointer"
+                        href="https://spotify.com"
+                        target="_blank"
                       >
-                        <div
-                          class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                        >
-                          pop
-                        </div>
-                        <div
-                          class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                        >
-                          rock
-                        </div>
-                        <div
-                          class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
+                        <svg
+                          class="min-w-[20px] h-[20px]"
+                          fill="currentColor"
+                          height="1em"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 496 512"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          rap
-                        </div>
-                      </div>
-                      <div
-                        class="mt-4 flex w-full flex-row justify-center gap-1"
-                      >
-                        <div>
-                          <svg
-                            class="text-yellow-600"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-600"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-600"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 42px; margin-top: -12px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-600"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-600"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                  </header>
-                </div>
-              </div>
-              <div
-                class="h-full md:w-1/3"
-              >
-                <div
-                  class="relative flex h-full w-full flex-col justify-start gap-2"
-                >
-                  <header
-                    class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                  >
-                    <div
-                      class="rounded-xl p-1"
-                    >
-                      <img
-                        alt="Darkthrone"
-                        class="rounded-md"
-                        data-nimg="1"
-                        decoding="async"
-                        fetchpriority="high"
-                        height="164"
-                        src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                        srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                        style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                        width="164"
-                      />
-                    </div>
-                    <div
-                      class="flex flex-col items-center"
-                    >
-                      <a
-                        class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                        href="/artist/3"
-                      >
-                        <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                        >
-                          Darkthrone
-                        </p>
-                      </a>
-                    </div>
-                    <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
-                    >
-                      <span
-                        class="w-[2rem] text-center text-5xl"
-                      >
-                        3
-                      </span>
-                      <div
-                        class="flex h-full flex-wrap justify-center gap-2 flex-row"
-                      >
-                        <div
-                          class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                        >
-                          pop
-                        </div>
-                        <div
-                          class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                        >
-                          rock
-                        </div>
-                        <div
-                          class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                        >
-                          rap
-                        </div>
-                      </div>
-                      <div
-                        class="mt-4 flex w-full flex-row justify-center gap-1"
-                      >
-                        <div>
-                          <svg
-                            class="text-yellow-900"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-900"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-900"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 42px; margin-top: -12px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-900"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-900"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                  </header>
-                </div>
-              </div>
-            </div>
-            <div
-              aria-roledescription="carousel"
-              class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
-              role="region"
-            >
-              <div
-                class="overflow-hidden"
-              >
-                <div
-                  class="flex -ml-4"
-                  style="transform: translate3d(NaNpx,0px,0px);"
-                >
-                  <div
-                    aria-roledescription="slide"
-                    class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                    role="group"
-                  >
-                    <div
-                      class="relative flex h-full w-full flex-col justify-start gap-2"
-                    >
-                      <header
-                        class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                      >
-                        <div
-                          class="rounded-xl p-1"
-                        >
-                          <img
-                            alt="Darkthrone"
-                            class="rounded-md"
-                            data-nimg="1"
-                            decoding="async"
-                            fetchpriority="high"
-                            height="164"
-                            src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                            srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                            style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                            width="164"
-                          />
-                        </div>
-                        <div
-                          class="flex flex-col items-center"
-                        >
-                          <a
-                            class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                            href="/artist/123"
-                          >
-                            <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                            >
-                              Darkthrone
-                            </p>
-                          </a>
-                        </div>
-                        <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
-                        >
-                          <span
-                            class="w-[2rem] text-center text-5xl"
-                          >
-                            1
-                          </span>
-                          <div
-                            class="flex h-full flex-wrap justify-center gap-2 flex-col"
-                          >
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              pop
-                            </div>
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              rock
-                            </div>
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              rap
-                            </div>
-                          </div>
-                          <div
-                            class="mt-4 flex w-full flex-row justify-center gap-1"
-                          >
-                            <div>
-                              <svg
-                                class="text-yellow-600"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-600"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-600"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 42px; margin-top: -12px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-600"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-600"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                          </div>
-                        </div>
-                      </header>
-                    </div>
-                  </div>
-                  <div
-                    aria-roledescription="slide"
-                    class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                    role="group"
-                  >
-                    <div
-                      class="relative flex h-full w-full flex-col justify-start gap-2"
-                    >
-                      <header
-                        class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                      >
-                        <div
-                          class="rounded-xl p-1"
-                        >
-                          <img
-                            alt="Darkthrone"
-                            class="rounded-md"
-                            data-nimg="1"
-                            decoding="async"
-                            fetchpriority="high"
-                            height="164"
-                            src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                            srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                            style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                            width="164"
-                          />
-                        </div>
-                        <div
-                          class="flex flex-col items-center"
-                        >
-                          <a
-                            class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                            href="/artist/2"
-                          >
-                            <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                            >
-                              Darkthrone
-                            </p>
-                          </a>
-                        </div>
-                        <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
-                        >
-                          <span
-                            class="w-[2rem] text-center text-5xl"
-                          >
-                            2
-                          </span>
-                          <div
-                            class="flex h-full flex-wrap justify-center gap-2 flex-col"
-                          >
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              pop
-                            </div>
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              rock
-                            </div>
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              rap
-                            </div>
-                          </div>
-                          <div
-                            class="mt-4 flex w-full flex-row justify-center gap-1"
-                          >
-                            <div>
-                              <svg
-                                class="text-slate-400"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-slate-400"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-slate-400"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 42px; margin-top: -12px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-slate-400"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-slate-400"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                          </div>
-                        </div>
-                      </header>
-                    </div>
-                  </div>
-                  <div
-                    aria-roledescription="slide"
-                    class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                    role="group"
-                  >
-                    <div
-                      class="relative flex h-full w-full flex-col justify-start gap-2"
-                    >
-                      <header
-                        class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                      >
-                        <div
-                          class="rounded-xl p-1"
-                        >
-                          <img
-                            alt="Darkthrone"
-                            class="rounded-md"
-                            data-nimg="1"
-                            decoding="async"
-                            fetchpriority="high"
-                            height="164"
-                            src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                            srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                            style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                            width="164"
-                          />
-                        </div>
-                        <div
-                          class="flex flex-col items-center"
-                        >
-                          <a
-                            class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                            href="/artist/3"
-                          >
-                            <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                            >
-                              Darkthrone
-                            </p>
-                          </a>
-                        </div>
-                        <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
-                        >
-                          <span
-                            class="w-[2rem] text-center text-5xl"
-                          >
-                            3
-                          </span>
-                          <div
-                            class="flex h-full flex-wrap justify-center gap-2 flex-col"
-                          >
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              pop
-                            </div>
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              rock
-                            </div>
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              rap
-                            </div>
-                          </div>
-                          <div
-                            class="mt-4 flex w-full flex-row justify-center gap-1"
-                          >
-                            <div>
-                              <svg
-                                class="text-yellow-900"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-900"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-900"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 42px; margin-top: -12px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-900"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-900"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                          </div>
-                        </div>
-                      </header>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <button
-                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -left-12 top-1/2 -translate-y-1/2"
-                disabled=""
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  height="15"
-                  viewBox="0 0 15 15"
-                  width="15"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-                <span
-                  class="sr-only"
-                >
-                  Previous slide
-                </span>
-              </button>
-              <button
-                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -right-12 top-1/2 -translate-y-1/2"
-                disabled=""
-              >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  height="15"
-                  viewBox="0 0 15 15"
-                  width="15"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-                <span
-                  class="sr-only"
-                >
-                  Next slide
-                </span>
-              </button>
-            </div>
-            <div
-              class="flex flex-col"
-            >
-              <div>
-                <div
-                  class="relative overflow-hidden"
-                >
-                  <div
-                    class="flex flex-row justify-between gap-2 p-2 md:gap-4"
-                  >
-                    <header
-                      class="flex w-full max-w-[calc(100%-30px)] flex-row items-center gap-4"
-                    >
-                      <span
-                        class="w-[2rem] text-center text-xl"
-                      >
-                        4
-                      </span>
-                      <img
-                        alt="Darkthrone"
-                        class="rounded-md"
-                        data-nimg="1"
-                        decoding="async"
-                        height="48"
-                        loading="lazy"
-                        src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=96&q=75"
-                        srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=96&q=75 2x"
-                        style="color: transparent; min-height: 48px; max-height: 48px; min-width: 48px; max-width: 48px; object-fit: cover;"
-                        width="48"
-                      />
-                      <div
-                        class="flex w-full flex-col items-start overflow-hidden"
-                      >
-                        <a
-                          class="items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 text-lg inline-grid p-0 leading-5"
-                          href="/artist/4"
-                        >
-                          <h3
-                            class="truncate text-xl md:text-2xl"
-                          >
-                            Darkthrone
-                          </h3>
-                        </a>
-                        <div
-                          class="flex w-full items-center justify-between"
-                        >
-                          <div>
-                            <div
-                              class="hidden flex-row gap-1 md:flex"
-                            >
-                              <div
-                                class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                              >
-                                pop
-                              </div>
-                              <div
-                                class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                              >
-                                rock
-                              </div>
-                              <div
-                                class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                              >
-                                rap
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </header>
-                    <div
-                      class="min-w-[22px] self-end"
-                    >
-                      <button
-                        data-state="closed"
-                      >
-                        <a
-                          class="cursor-pointer"
-                          href="https://spotify.com"
-                          target="_blank"
-                        >
-                          <svg
-                            class="min-w-[20px] h-[20px]"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            viewBox="0 0 496 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
-                            />
-                          </svg>
-                        </a>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="flex justify-center"
-          />
-        </main>
-      </section>
-    </div>
-  </body>,
-  "container": <div>
-    <section
-      class="flex flex-col gap-4"
-    >
-      <header
-        class="flex items-center justify-between"
-      >
-        <h2
-          class="text-4xl"
-        >
-          Top Items
-        </h2>
-      </header>
-      <main
-        class="flex flex-col gap-4"
-      >
-        <div
-          class="flex flex-col gap-8"
-        >
-          <div
-            class="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24"
-          >
-            <div
-              class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
-            >
-              <div
-                class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
-              >
-                <header
-                  class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                >
-                  <div
-                    class="rounded-xl p-1"
-                  >
-                    <img
-                      alt="Darkthrone"
-                      class="rounded-md"
-                      data-nimg="1"
-                      decoding="async"
-                      fetchpriority="high"
-                      height="164"
-                      src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                      srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                      style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                      width="164"
-                    />
-                  </div>
-                  <div
-                    class="flex flex-col items-center"
-                  >
-                    <a
-                      class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                      href="/artist/2"
-                    >
-                      <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                      >
-                        Darkthrone
-                      </p>
-                    </a>
-                  </div>
-                  <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
-                  >
-                    <span
-                      class="w-[2rem] text-center text-5xl"
-                    >
-                      2
-                    </span>
-                    <div
-                      class="flex h-full flex-wrap justify-center gap-2 flex-row"
-                    >
-                      <div
-                        class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                      >
-                        pop
-                      </div>
-                      <div
-                        class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                      >
-                        rock
-                      </div>
-                      <div
-                        class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                      >
-                        rap
-                      </div>
-                    </div>
-                    <div
-                      class="mt-4 flex w-full flex-row justify-center gap-1"
-                    >
-                      <div>
-                        <svg
-                          class="text-slate-400"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-slate-400"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-slate-400"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 42px; margin-top: -12px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-slate-400"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-slate-400"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-                </header>
-              </div>
-              <div
-                class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
-              >
-                <header
-                  class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                >
-                  <div
-                    class="rounded-xl p-1"
-                  >
-                    <img
-                      alt="Darkthrone"
-                      class="rounded-md"
-                      data-nimg="1"
-                      decoding="async"
-                      fetchpriority="high"
-                      height="164"
-                      src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                      srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                      style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                      width="164"
-                    />
-                  </div>
-                  <div
-                    class="flex flex-col items-center"
-                  >
-                    <a
-                      class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                      href="/artist/123"
-                    >
-                      <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                      >
-                        Darkthrone
-                      </p>
-                    </a>
-                  </div>
-                  <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
-                  >
-                    <span
-                      class="w-[2rem] text-center text-5xl"
-                    >
-                      1
-                    </span>
-                    <div
-                      class="flex h-full flex-wrap justify-center gap-2 flex-row"
-                    >
-                      <div
-                        class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                      >
-                        pop
-                      </div>
-                      <div
-                        class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                      >
-                        rock
-                      </div>
-                      <div
-                        class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                      >
-                        rap
-                      </div>
-                    </div>
-                    <div
-                      class="mt-4 flex w-full flex-row justify-center gap-1"
-                    >
-                      <div>
-                        <svg
-                          class="text-yellow-600"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-600"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-600"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 42px; margin-top: -12px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-600"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-600"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-                </header>
-              </div>
-            </div>
-            <div
-              class="h-full md:w-1/3"
-            >
-              <div
-                class="relative flex h-full w-full flex-col justify-start gap-2"
-              >
-                <header
-                  class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                >
-                  <div
-                    class="rounded-xl p-1"
-                  >
-                    <img
-                      alt="Darkthrone"
-                      class="rounded-md"
-                      data-nimg="1"
-                      decoding="async"
-                      fetchpriority="high"
-                      height="164"
-                      src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                      srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                      style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                      width="164"
-                    />
-                  </div>
-                  <div
-                    class="flex flex-col items-center"
-                  >
-                    <a
-                      class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                      href="/artist/3"
-                    >
-                      <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                      >
-                        Darkthrone
-                      </p>
-                    </a>
-                  </div>
-                  <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
-                  >
-                    <span
-                      class="w-[2rem] text-center text-5xl"
-                    >
-                      3
-                    </span>
-                    <div
-                      class="flex h-full flex-wrap justify-center gap-2 flex-row"
-                    >
-                      <div
-                        class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                      >
-                        pop
-                      </div>
-                      <div
-                        class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                      >
-                        rock
-                      </div>
-                      <div
-                        class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                      >
-                        rap
-                      </div>
-                    </div>
-                    <div
-                      class="mt-4 flex w-full flex-row justify-center gap-1"
-                    >
-                      <div>
-                        <svg
-                          class="text-yellow-900"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-900"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-900"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 42px; margin-top: -12px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-900"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-900"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-                </header>
-              </div>
-            </div>
-          </div>
-          <div
-            aria-roledescription="carousel"
-            class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
-            role="region"
-          >
-            <div
-              class="overflow-hidden"
-            >
-              <div
-                class="flex -ml-4"
-                style="transform: translate3d(NaNpx,0px,0px);"
-              >
-                <div
-                  aria-roledescription="slide"
-                  class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                  role="group"
-                >
-                  <div
-                    class="relative flex h-full w-full flex-col justify-start gap-2"
-                  >
-                    <header
-                      class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                    >
-                      <div
-                        class="rounded-xl p-1"
-                      >
-                        <img
-                          alt="Darkthrone"
-                          class="rounded-md"
-                          data-nimg="1"
-                          decoding="async"
-                          fetchpriority="high"
-                          height="164"
-                          src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                          srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                          style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                          width="164"
-                        />
-                      </div>
-                      <div
-                        class="flex flex-col items-center"
-                      >
-                        <a
-                          class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                          href="/artist/123"
-                        >
-                          <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                          >
-                            Darkthrone
-                          </p>
-                        </a>
-                      </div>
-                      <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
-                      >
-                        <span
-                          class="w-[2rem] text-center text-5xl"
-                        >
-                          1
-                        </span>
-                        <div
-                          class="flex h-full flex-wrap justify-center gap-2 flex-col"
-                        >
-                          <div
-                            class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                          >
-                            pop
-                          </div>
-                          <div
-                            class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                          >
-                            rock
-                          </div>
-                          <div
-                            class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                          >
-                            rap
-                          </div>
-                        </div>
-                        <div
-                          class="mt-4 flex w-full flex-row justify-center gap-1"
-                        >
-                          <div>
-                            <svg
-                              class="text-yellow-600"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-600"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-600"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 42px; margin-top: -12px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-600"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-600"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                        </div>
-                      </div>
-                    </header>
-                  </div>
-                </div>
-                <div
-                  aria-roledescription="slide"
-                  class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                  role="group"
-                >
-                  <div
-                    class="relative flex h-full w-full flex-col justify-start gap-2"
-                  >
-                    <header
-                      class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                    >
-                      <div
-                        class="rounded-xl p-1"
-                      >
-                        <img
-                          alt="Darkthrone"
-                          class="rounded-md"
-                          data-nimg="1"
-                          decoding="async"
-                          fetchpriority="high"
-                          height="164"
-                          src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                          srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                          style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                          width="164"
-                        />
-                      </div>
-                      <div
-                        class="flex flex-col items-center"
-                      >
-                        <a
-                          class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                          href="/artist/2"
-                        >
-                          <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                          >
-                            Darkthrone
-                          </p>
-                        </a>
-                      </div>
-                      <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
-                      >
-                        <span
-                          class="w-[2rem] text-center text-5xl"
-                        >
-                          2
-                        </span>
-                        <div
-                          class="flex h-full flex-wrap justify-center gap-2 flex-col"
-                        >
-                          <div
-                            class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                          >
-                            pop
-                          </div>
-                          <div
-                            class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                          >
-                            rock
-                          </div>
-                          <div
-                            class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                          >
-                            rap
-                          </div>
-                        </div>
-                        <div
-                          class="mt-4 flex w-full flex-row justify-center gap-1"
-                        >
-                          <div>
-                            <svg
-                              class="text-slate-400"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-slate-400"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-slate-400"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 42px; margin-top: -12px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-slate-400"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-slate-400"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                        </div>
-                      </div>
-                    </header>
-                  </div>
-                </div>
-                <div
-                  aria-roledescription="slide"
-                  class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                  role="group"
-                >
-                  <div
-                    class="relative flex h-full w-full flex-col justify-start gap-2"
-                  >
-                    <header
-                      class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                    >
-                      <div
-                        class="rounded-xl p-1"
-                      >
-                        <img
-                          alt="Darkthrone"
-                          class="rounded-md"
-                          data-nimg="1"
-                          decoding="async"
-                          fetchpriority="high"
-                          height="164"
-                          src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                          srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                          style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                          width="164"
-                        />
-                      </div>
-                      <div
-                        class="flex flex-col items-center"
-                      >
-                        <a
-                          class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                          href="/artist/3"
-                        >
-                          <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                          >
-                            Darkthrone
-                          </p>
-                        </a>
-                      </div>
-                      <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
-                      >
-                        <span
-                          class="w-[2rem] text-center text-5xl"
-                        >
-                          3
-                        </span>
-                        <div
-                          class="flex h-full flex-wrap justify-center gap-2 flex-col"
-                        >
-                          <div
-                            class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                          >
-                            pop
-                          </div>
-                          <div
-                            class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                          >
-                            rock
-                          </div>
-                          <div
-                            class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                          >
-                            rap
-                          </div>
-                        </div>
-                        <div
-                          class="mt-4 flex w-full flex-row justify-center gap-1"
-                        >
-                          <div>
-                            <svg
-                              class="text-yellow-900"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-900"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-900"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 42px; margin-top: -12px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-900"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-900"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                        </div>
-                      </div>
-                    </header>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <button
-              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -left-12 top-1/2 -translate-y-1/2"
-              disabled=""
-            >
-              <svg
-                class="h-4 w-4"
-                fill="none"
-                height="15"
-                viewBox="0 0 15 15"
-                width="15"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <span
-                class="sr-only"
-              >
-                Previous slide
-              </span>
-            </button>
-            <button
-              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -right-12 top-1/2 -translate-y-1/2"
-              disabled=""
-            >
-              <svg
-                class="h-4 w-4"
-                fill="none"
-                height="15"
-                viewBox="0 0 15 15"
-                width="15"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <span
-                class="sr-only"
-              >
-                Next slide
-              </span>
-            </button>
-          </div>
-          <div
-            class="flex flex-col"
-          >
-            <div>
-              <div
-                class="relative overflow-hidden"
-              >
-                <div
-                  class="flex flex-row justify-between gap-2 p-2 md:gap-4"
-                >
-                  <header
-                    class="flex w-full max-w-[calc(100%-30px)] flex-row items-center gap-4"
-                  >
-                    <span
-                      class="w-[2rem] text-center text-xl"
-                    >
-                      4
-                    </span>
-                    <img
-                      alt="Darkthrone"
-                      class="rounded-md"
-                      data-nimg="1"
-                      decoding="async"
-                      height="48"
-                      loading="lazy"
-                      src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=96&q=75"
-                      srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=48&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=96&q=75 2x"
-                      style="color: transparent; min-height: 48px; max-height: 48px; min-width: 48px; max-width: 48px; object-fit: cover;"
-                      width="48"
-                    />
-                    <div
-                      class="flex w-full flex-col items-start overflow-hidden"
-                    >
-                      <a
-                        class="items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 text-lg inline-grid p-0 leading-5"
-                        href="/artist/4"
-                      >
-                        <h3
-                          class="truncate text-xl md:text-2xl"
-                        >
-                          Darkthrone
-                        </h3>
-                      </a>
-                      <div
-                        class="flex w-full items-center justify-between"
-                      >
-                        <div>
-                          <div
-                            class="hidden flex-row gap-1 md:flex"
-                          >
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              pop
-                            </div>
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              rock
-                            </div>
-                            <div
-                              class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary shadow hover:bg-primary/80 text-primary-foreground/80"
-                            >
-                              rap
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </header>
-                  <div
-                    class="min-w-[22px] self-end"
-                  >
-                    <button
-                      data-state="closed"
-                    >
-                      <a
-                        class="cursor-pointer"
-                        href="https://spotify.com"
-                        target="_blank"
-                      >
-                        <svg
-                          class="min-w-[20px] h-[20px]"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          viewBox="0 0 496 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
-                          />
-                        </svg>
-                      </a>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="flex justify-center"
-        />
-      </main>
-    </section>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`ItemsSection > should match snapshot with no data 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <section
-        class="flex flex-col gap-4"
-      >
-        <header
-          class="flex items-center justify-between"
-        >
-          <h2
-            class="text-4xl"
-          >
-            Top Items
-          </h2>
-        </header>
-        <main
-          class="flex flex-col gap-4"
-        >
-          <div
-            class="relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7 border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
-            role="alert"
-          >
-            <svg
-              aria-hidden="true"
-              class="h-5 w-5"
-              fill="none"
-              height="1em"
-              stroke="currentColor"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-            <h5
-              class="mb-1 font-medium leading-none tracking-tight"
-            >
-              No Data
-            </h5>
-            <div
-              class="text-sm [&_p]:leading-relaxed"
-            >
-              Oops... Looks like nothing's there yet.
-            </div>
-          </div>
-          <div
-            class="flex justify-center"
-          />
-        </main>
-      </section>
-    </div>
-  </body>,
-  "container": <div>
-    <section
-      class="flex flex-col gap-4"
-    >
-      <header
-        class="flex items-center justify-between"
-      >
-        <h2
-          class="text-4xl"
-        >
-          Top Items
-        </h2>
-      </header>
-      <main
-        class="flex flex-col gap-4"
-      >
-        <div
-          class="relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7 border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
-          role="alert"
-        >
-          <svg
-            aria-hidden="true"
-            class="h-5 w-5"
-            fill="none"
-            height="1em"
-            stroke="currentColor"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-          <h5
-            class="mb-1 font-medium leading-none tracking-tight"
-          >
-            No Data
-          </h5>
-          <div
-            class="text-sm [&_p]:leading-relaxed"
-          >
-            Oops... Looks like nothing's there yet.
-          </div>
-        </div>
-        <div
-          class="flex justify-center"
-        />
-      </main>
-    </section>
-  </div>,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
-
-exports[`ItemsSection > should match snapshot with view card 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body>
-    <div>
-      <section
-        class="flex flex-col gap-4"
-      >
-        <header
-          class="flex items-center justify-between"
-        >
-          <h2
-            class="text-4xl"
-          >
-            Top Items
-          </h2>
-        </header>
-        <main
-          class="flex flex-col gap-4"
-        >
-          <div
-            class="flex flex-col gap-8"
-          >
-            <div
-              class="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24"
-            >
-              <div
-                class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
-              >
-                <div
-                  class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
-                >
-                  <header
-                    class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                  >
-                    <div
-                      class="rounded-xl p-1"
-                    >
-                      <img
-                        alt="Track 1"
-                        class="rounded-md"
-                        data-nimg="1"
-                        decoding="async"
-                        fetchpriority="high"
-                        height="164"
-                        src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                        srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                        style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                        width="164"
-                      />
-                    </div>
-                    <div
-                      class="flex flex-col items-center"
-                    >
-                      <a
-                        class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                        href="/track/2"
-                      >
-                        <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                        >
-                          Track 1
-                        </p>
-                      </a>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
-                      </span>
-                    </div>
-                    <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
-                    >
-                      <span
-                        class="w-[2rem] text-center text-5xl"
-                      >
-                        2
-                      </span>
-                      <div
-                        class="mt-4 flex w-full flex-row justify-center gap-1"
-                      >
-                        <div>
-                          <svg
-                            class="text-slate-400"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-slate-400"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-slate-400"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 42px; margin-top: -12px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-slate-400"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-slate-400"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                  </header>
-                </div>
-                <div
-                  class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
-                >
-                  <header
-                    class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                  >
-                    <div
-                      class="rounded-xl p-1"
-                    >
-                      <img
-                        alt="Track 1"
-                        class="rounded-md"
-                        data-nimg="1"
-                        decoding="async"
-                        fetchpriority="high"
-                        height="164"
-                        src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                        srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                        style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                        width="164"
-                      />
-                    </div>
-                    <div
-                      class="flex flex-col items-center"
-                    >
-                      <a
-                        class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                        href="/track/123"
-                      >
-                        <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                        >
-                          Track 1
-                        </p>
+                          <path
+                            d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                          />
+                        </svg>
                       </a>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
-                      </span>
-                    </div>
-                    <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
-                    >
-                      <span
-                        class="w-[2rem] text-center text-5xl"
-                      >
-                        1
-                      </span>
-                      <div
-                        class="mt-4 flex w-full flex-row justify-center gap-1"
-                      >
-                        <div>
-                          <svg
-                            class="text-yellow-600"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-600"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-600"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 42px; margin-top: -12px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-600"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-600"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                  </header>
+                    </button>
+                  </div>
                 </div>
               </div>
+            </div>
+          </div>
+          <div
+            class="flex justify-center"
+          />
+        </main>
+      </section>
+    </div>
+  </body>,
+  "container": <div>
+    <section
+      class="flex flex-col gap-6"
+    >
+      <header
+        class="flex items-center justify-between"
+      >
+        <h2
+          class="text-4xl"
+        >
+          Top Items
+        </h2>
+      </header>
+      <main
+        class="flex flex-col gap-4"
+      >
+        <div
+          class="align-center flex flex-col gap-8"
+        >
+          <div
+            class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4"
+          >
+            <div>
               <div
-                class="h-full md:w-1/3"
+                class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
               >
+                <img
+                  alt="Darkthrone"
+                  class="rounded-md"
+                  data-nimg="1"
+                  decoding="async"
+                  height="200"
+                  loading="lazy"
+                  src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                  srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                  style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                  width="200"
+                />
                 <div
-                  class="relative flex h-full w-full flex-col justify-start gap-2"
+                  class="flex flex-row justify-between"
                 >
-                  <header
-                    class="m-0 flex w-full flex-col items-center gap-2 p-0"
+                  <a
+                    class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                    href="/artist/123"
                   >
-                    <div
-                      class="rounded-xl p-1"
-                    >
-                      <img
-                        alt="Track 1"
-                        class="rounded-md"
-                        data-nimg="1"
-                        decoding="async"
-                        fetchpriority="high"
-                        height="164"
-                        src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                        srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                        style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                        width="164"
-                      />
-                    </div>
-                    <div
-                      class="flex flex-col items-center"
-                    >
-                      <a
-                        class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                        href="/track/3"
-                      >
-                        <p
-                          class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                        >
-                          Track 1
-                        </p>
-                      </a>
-                      <span>
-                        <a
-                          class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                          href="/artist/123"
-                        >
-                          Darkthrone
-                        </a>
-                      </span>
-                    </div>
-                    <div
-                      class="flex w-full flex-col items-center justify-center gap-4"
-                    >
-                      <span
-                        class="w-[2rem] text-center text-5xl"
-                      >
-                        3
-                      </span>
-                      <div
-                        class="mt-4 flex w-full flex-row justify-center gap-1"
-                      >
-                        <div>
-                          <svg
-                            class="text-yellow-900"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-900"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-900"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 42px; margin-top: -12px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-900"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 28px; margin-top: -8px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                        <div>
-                          <svg
-                            class="text-yellow-900"
-                            fill="currentColor"
-                            height="1em"
-                            stroke="currentColor"
-                            stroke-width="0"
-                            style="font-size: 14px; margin-top: -4px;"
-                            viewBox="0 0 512 512"
-                            width="1em"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                              fill="none"
-                              stroke-linejoin="round"
-                              stroke-width="32"
-                            />
-                          </svg>
-                        </div>
-                      </div>
-                    </div>
-                  </header>
+                    <p
+                      class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+                    >
+                      Darkthrone
+                    </p>
+                  </a>
+                  <button
+                    data-state="closed"
+                  >
+                    <a
+                      class="cursor-pointer"
+                      href="https://spotify.com"
+                      target="_blank"
+                    >
+                      <svg
+                        class="min-w-[20px] h-[20px]"
+                        fill="currentColor"
+                        height="1em"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 496 512"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                        />
+                      </svg>
+                    </a>
+                  </button>
                 </div>
               </div>
             </div>
-            <div
-              aria-roledescription="carousel"
-              class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
-              role="region"
-            >
+            <div>
               <div
-                class="overflow-hidden"
+                class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
               >
+                <img
+                  alt="Darkthrone"
+                  class="rounded-md"
+                  data-nimg="1"
+                  decoding="async"
+                  height="200"
+                  loading="lazy"
+                  src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                  srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                  style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                  width="200"
+                />
                 <div
-                  class="flex -ml-4"
-                  style="transform: translate3d(NaNpx,0px,0px);"
+                  class="flex flex-row justify-between"
                 >
-                  <div
-                    aria-roledescription="slide"
-                    class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                    role="group"
-                  >
-                    <div
-                      class="relative flex h-full w-full flex-col justify-start gap-2"
-                    >
-                      <header
-                        class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                      >
-                        <div
-                          class="rounded-xl p-1"
-                        >
-                          <img
-                            alt="Track 1"
-                            class="rounded-md"
-                            data-nimg="1"
-                            decoding="async"
-                            fetchpriority="high"
-                            height="164"
-                            src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                            srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                            style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                            width="164"
-                          />
-                        </div>
-                        <div
-                          class="flex flex-col items-center"
-                        >
-                          <a
-                            class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                            href="/track/123"
-                          >
-                            <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                            >
-                              Track 1
-                            </p>
-                          </a>
-                          <span>
-                            <a
-                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                              href="/artist/123"
-                            >
-                              Darkthrone
-                            </a>
-                          </span>
-                        </div>
-                        <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
-                        >
-                          <span
-                            class="w-[2rem] text-center text-5xl"
-                          >
-                            1
-                          </span>
-                          <div
-                            class="mt-4 flex w-full flex-row justify-center gap-1"
-                          >
-                            <div>
-                              <svg
-                                class="text-yellow-600"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-600"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-600"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 42px; margin-top: -12px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-600"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-600"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                          </div>
-                        </div>
-                      </header>
-                    </div>
-                  </div>
-                  <div
-                    aria-roledescription="slide"
-                    class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                    role="group"
+                  <a
+                    class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                    href="/artist/2"
                   >
-                    <div
-                      class="relative flex h-full w-full flex-col justify-start gap-2"
-                    >
-                      <header
-                        class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                      >
-                        <div
-                          class="rounded-xl p-1"
-                        >
-                          <img
-                            alt="Track 1"
-                            class="rounded-md"
-                            data-nimg="1"
-                            decoding="async"
-                            fetchpriority="high"
-                            height="164"
-                            src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                            srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                            style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                            width="164"
-                          />
-                        </div>
-                        <div
-                          class="flex flex-col items-center"
-                        >
-                          <a
-                            class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                            href="/track/2"
-                          >
-                            <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                            >
-                              Track 1
-                            </p>
-                          </a>
-                          <span>
-                            <a
-                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                              href="/artist/123"
-                            >
-                              Darkthrone
-                            </a>
-                          </span>
-                        </div>
-                        <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
-                        >
-                          <span
-                            class="w-[2rem] text-center text-5xl"
-                          >
-                            2
-                          </span>
-                          <div
-                            class="mt-4 flex w-full flex-row justify-center gap-1"
-                          >
-                            <div>
-                              <svg
-                                class="text-slate-400"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-slate-400"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-slate-400"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 42px; margin-top: -12px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-slate-400"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-slate-400"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                          </div>
-                        </div>
-                      </header>
-                    </div>
-                  </div>
-                  <div
-                    aria-roledescription="slide"
-                    class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                    role="group"
+                    <p
+                      class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+                    >
+                      Darkthrone
+                    </p>
+                  </a>
+                  <button
+                    data-state="closed"
                   >
-                    <div
-                      class="relative flex h-full w-full flex-col justify-start gap-2"
-                    >
-                      <header
-                        class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                      >
-                        <div
-                          class="rounded-xl p-1"
-                        >
-                          <img
-                            alt="Track 1"
-                            class="rounded-md"
-                            data-nimg="1"
-                            decoding="async"
-                            fetchpriority="high"
-                            height="164"
-                            src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                            srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                            style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                            width="164"
-                          />
-                        </div>
-                        <div
-                          class="flex flex-col items-center"
-                        >
-                          <a
-                            class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                            href="/track/3"
-                          >
-                            <p
-                              class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                            >
-                              Track 1
-                            </p>
-                          </a>
-                          <span>
-                            <a
-                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                              href="/artist/123"
-                            >
-                              Darkthrone
-                            </a>
-                          </span>
-                        </div>
-                        <div
-                          class="flex w-full flex-col items-center justify-center gap-4"
-                        >
-                          <span
-                            class="w-[2rem] text-center text-5xl"
-                          >
-                            3
-                          </span>
-                          <div
-                            class="mt-4 flex w-full flex-row justify-center gap-1"
-                          >
-                            <div>
-                              <svg
-                                class="text-yellow-900"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-900"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-900"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 42px; margin-top: -12px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-900"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 28px; margin-top: -8px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                            <div>
-                              <svg
-                                class="text-yellow-900"
-                                fill="currentColor"
-                                height="1em"
-                                stroke="currentColor"
-                                stroke-width="0"
-                                style="font-size: 14px; margin-top: -4px;"
-                                viewBox="0 0 512 512"
-                                width="1em"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                  fill="none"
-                                  stroke-linejoin="round"
-                                  stroke-width="32"
-                                />
-                              </svg>
-                            </div>
-                          </div>
-                        </div>
-                      </header>
-                    </div>
-                  </div>
+                    <a
+                      class="cursor-pointer"
+                      href="https://spotify.com"
+                      target="_blank"
+                    >
+                      <svg
+                        class="min-w-[20px] h-[20px]"
+                        fill="currentColor"
+                        height="1em"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 496 512"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                        />
+                      </svg>
+                    </a>
+                  </button>
                 </div>
               </div>
-              <button
-                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -left-12 top-1/2 -translate-y-1/2"
-                disabled=""
+            </div>
+            <div>
+              <div
+                class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
               >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  height="15"
-                  viewBox="0 0 15 15"
-                  width="15"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-                <span
-                  class="sr-only"
+                <img
+                  alt="Darkthrone"
+                  class="rounded-md"
+                  data-nimg="1"
+                  decoding="async"
+                  height="200"
+                  loading="lazy"
+                  src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                  srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                  style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                  width="200"
+                />
+                <div
+                  class="flex flex-row justify-between"
                 >
-                  Previous slide
-                </span>
-              </button>
-              <button
-                class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -right-12 top-1/2 -translate-y-1/2"
-                disabled=""
+                  <a
+                    class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                    href="/artist/3"
+                  >
+                    <p
+                      class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+                    >
+                      Darkthrone
+                    </p>
+                  </a>
+                  <button
+                    data-state="closed"
+                  >
+                    <a
+                      class="cursor-pointer"
+                      href="https://spotify.com"
+                      target="_blank"
+                    >
+                      <svg
+                        class="min-w-[20px] h-[20px]"
+                        fill="currentColor"
+                        height="1em"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 496 512"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                        />
+                      </svg>
+                    </a>
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
               >
-                <svg
-                  class="h-4 w-4"
-                  fill="none"
-                  height="15"
-                  viewBox="0 0 15 15"
-                  width="15"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
-                    fill="currentColor"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-                <span
-                  class="sr-only"
+                <img
+                  alt="Darkthrone"
+                  class="rounded-md"
+                  data-nimg="1"
+                  decoding="async"
+                  height="200"
+                  loading="lazy"
+                  src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                  srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                  style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                  width="200"
+                />
+                <div
+                  class="flex flex-row justify-between"
                 >
-                  Next slide
-                </span>
-              </button>
+                  <a
+                    class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                    href="/artist/4"
+                  >
+                    <p
+                      class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+                    >
+                      Darkthrone
+                    </p>
+                  </a>
+                  <button
+                    data-state="closed"
+                  >
+                    <a
+                      class="cursor-pointer"
+                      href="https://spotify.com"
+                      target="_blank"
+                    >
+                      <svg
+                        class="min-w-[20px] h-[20px]"
+                        fill="currentColor"
+                        height="1em"
+                        stroke="currentColor"
+                        stroke-width="0"
+                        viewBox="0 0 496 512"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                        />
+                      </svg>
+                    </a>
+                  </button>
+                </div>
+              </div>
             </div>
+          </div>
+        </div>
+        <div
+          class="flex justify-center"
+        />
+      </main>
+    </section>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`ItemsSection > should match snapshot with no data 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <section
+        class="flex flex-col gap-6"
+      >
+        <header
+          class="flex items-center justify-between"
+        >
+          <h2
+            class="text-4xl"
+          >
+            Top Items
+          </h2>
+        </header>
+        <main
+          class="flex flex-col gap-4"
+        >
+          <div
+            class="relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7 border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+            role="alert"
+          >
+            <svg
+              aria-hidden="true"
+              class="h-5 w-5"
+              fill="none"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+            <h5
+              class="mb-1 font-medium leading-none tracking-tight"
+            >
+              No Data
+            </h5>
             <div
-              class="flex flex-col"
-            />
+              class="text-sm [&_p]:leading-relaxed"
+            >
+              Oops... Looks like nothing's there yet.
+            </div>
           </div>
           <div
             class="flex justify-center"
@@ -3635,7 +628,7 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
   </body>,
   "container": <div>
     <section
-      class="flex flex-col gap-4"
+      class="flex flex-col gap-6"
     >
       <header
         class="flex items-center justify-between"
@@ -3650,1006 +643,611 @@ exports[`ItemsSection > should match snapshot with view card 1`] = `
         class="flex flex-col gap-4"
       >
         <div
-          class="flex flex-col gap-8"
+          class="relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7 border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
+          role="alert"
+        >
+          <svg
+            aria-hidden="true"
+            class="h-5 w-5"
+            fill="none"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <h5
+            class="mb-1 font-medium leading-none tracking-tight"
+          >
+            No Data
+          </h5>
+          <div
+            class="text-sm [&_p]:leading-relaxed"
+          >
+            Oops... Looks like nothing's there yet.
+          </div>
+        </div>
+        <div
+          class="flex justify-center"
+        />
+      </main>
+    </section>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`ItemsSection > should match snapshot with view card 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <section
+        class="flex flex-col gap-6"
+      >
+        <header
+          class="flex items-center justify-between"
+        >
+          <h2
+            class="text-4xl"
+          >
+            Top Items
+          </h2>
+        </header>
+        <main
+          class="flex flex-col gap-4"
         >
           <div
-            class="mt-16 hidden w-full flex-col items-center justify-center gap-4 self-center pt-4 md:flex md:flex-row md:items-start lg:mt-24"
+            class="align-center flex flex-col gap-8"
           >
             <div
-              class="flex h-full flex-col-reverse justify-center gap-4 md:w-2/3 md:flex-row"
+              class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4"
             >
-              <div
-                class="relative flex h-full w-full flex-col justify-start gap-2 -top-8 lg:-top-12"
-              >
-                <header
-                  class="m-0 flex w-full flex-col items-center gap-2 p-0"
+              <div>
+                <div
+                  class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
                 >
+                  <img
+                    alt="Track 1"
+                    class="rounded-md"
+                    data-nimg="1"
+                    decoding="async"
+                    height="200"
+                    loading="lazy"
+                    src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                    srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                    style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                    width="200"
+                  />
                   <div
-                    class="rounded-xl p-1"
-                  >
-                    <img
-                      alt="Track 1"
-                      class="rounded-md"
-                      data-nimg="1"
-                      decoding="async"
-                      fetchpriority="high"
-                      height="164"
-                      src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                      srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                      style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                      width="164"
-                    />
-                  </div>
-                  <div
-                    class="flex flex-col items-center"
+                    class=""
                   >
                     <a
                       class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                      href="/track/2"
+                      href="/track/123"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
                       >
                         Track 1
                       </p>
                     </a>
-                    <span>
-                      <a
-                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                        href="/artist/123"
-                      >
-                        Darkthrone
-                      </a>
-                    </span>
-                  </div>
-                  <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
-                  >
-                    <span
-                      class="w-[2rem] text-center text-5xl"
-                    >
-                      2
-                    </span>
                     <div
-                      class="mt-4 flex w-full flex-row justify-center gap-1"
+                      class="flex flex-row justify-between"
                     >
-                      <div>
-                        <svg
-                          class="text-slate-400"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-slate-400"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-slate-400"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 42px; margin-top: -12px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-slate-400"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        class="flex max-w-[150px] justify-start"
+                      >
+                        <span
+                          class="truncate"
                         >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
+                        </span>
                       </div>
-                      <div>
-                        <svg
-                          class="text-slate-400"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                      <button
+                        data-state="closed"
+                      >
+                        <a
+                          class="cursor-pointer"
+                          href="https://spotify.com"
+                          target="_blank"
                         >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
+                          <svg
+                            class="min-w-[20px] h-[20px]"
+                            fill="currentColor"
+                            height="1em"
+                            stroke="currentColor"
+                            stroke-width="0"
+                            viewBox="0 0 496 512"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                            />
+                          </svg>
+                        </a>
+                      </button>
                     </div>
                   </div>
-                </header>
+                </div>
               </div>
-              <div
-                class="relative flex h-full w-full flex-col justify-start gap-2 -top-16 lg:-top-24"
-              >
-                <header
-                  class="m-0 flex w-full flex-col items-center gap-2 p-0"
+              <div>
+                <div
+                  class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
                 >
+                  <img
+                    alt="Track 1"
+                    class="rounded-md"
+                    data-nimg="1"
+                    decoding="async"
+                    height="200"
+                    loading="lazy"
+                    src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                    srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                    style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                    width="200"
+                  />
                   <div
-                    class="rounded-xl p-1"
-                  >
-                    <img
-                      alt="Track 1"
-                      class="rounded-md"
-                      data-nimg="1"
-                      decoding="async"
-                      fetchpriority="high"
-                      height="164"
-                      src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                      srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                      style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                      width="164"
-                    />
-                  </div>
-                  <div
-                    class="flex flex-col items-center"
+                    class=""
                   >
                     <a
                       class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                      href="/track/123"
+                      href="/track/2"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
                       >
                         Track 1
                       </p>
                     </a>
-                    <span>
-                      <a
-                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                        href="/artist/123"
-                      >
-                        Darkthrone
-                      </a>
-                    </span>
-                  </div>
-                  <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
-                  >
-                    <span
-                      class="w-[2rem] text-center text-5xl"
-                    >
-                      1
-                    </span>
                     <div
-                      class="mt-4 flex w-full flex-row justify-center gap-1"
+                      class="flex flex-row justify-between"
                     >
-                      <div>
-                        <svg
-                          class="text-yellow-600"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-600"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-600"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 42px; margin-top: -12px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-600"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        class="flex max-w-[150px] justify-start"
+                      >
+                        <span
+                          class="truncate"
                         >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
+                        </span>
                       </div>
-                      <div>
-                        <svg
-                          class="text-yellow-600"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                      <button
+                        data-state="closed"
+                      >
+                        <a
+                          class="cursor-pointer"
+                          href="https://spotify.com"
+                          target="_blank"
                         >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
+                          <svg
+                            class="min-w-[20px] h-[20px]"
+                            fill="currentColor"
+                            height="1em"
+                            stroke="currentColor"
+                            stroke-width="0"
+                            viewBox="0 0 496 512"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                            />
+                          </svg>
+                        </a>
+                      </button>
                     </div>
                   </div>
-                </header>
+                </div>
               </div>
-            </div>
-            <div
-              class="h-full md:w-1/3"
-            >
-              <div
-                class="relative flex h-full w-full flex-col justify-start gap-2"
-              >
-                <header
-                  class="m-0 flex w-full flex-col items-center gap-2 p-0"
-                >
-                  <div
-                    class="rounded-xl p-1"
-                  >
-                    <img
-                      alt="Track 1"
-                      class="rounded-md"
-                      data-nimg="1"
-                      decoding="async"
-                      fetchpriority="high"
-                      height="164"
-                      src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                      srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                      style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                      width="164"
-                    />
-                  </div>
+              <div>
+                <div
+                  class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+                >
+                  <img
+                    alt="Track 1"
+                    class="rounded-md"
+                    data-nimg="1"
+                    decoding="async"
+                    height="200"
+                    loading="lazy"
+                    src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                    srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                    style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                    width="200"
+                  />
                   <div
-                    class="flex flex-col items-center"
+                    class=""
                   >
                     <a
                       class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
                       href="/track/3"
                     >
                       <p
-                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
+                        class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
                       >
                         Track 1
                       </p>
                     </a>
-                    <span>
-                      <a
-                        class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
-                        href="/artist/123"
-                      >
-                        Darkthrone
-                      </a>
-                    </span>
-                  </div>
-                  <div
-                    class="flex w-full flex-col items-center justify-center gap-4"
-                  >
-                    <span
-                      class="w-[2rem] text-center text-5xl"
-                    >
-                      3
-                    </span>
                     <div
-                      class="mt-4 flex w-full flex-row justify-center gap-1"
+                      class="flex flex-row justify-between"
                     >
-                      <div>
-                        <svg
-                          class="text-yellow-900"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-900"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-900"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 42px; margin-top: -12px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                          />
-                        </svg>
-                      </div>
-                      <div>
-                        <svg
-                          class="text-yellow-900"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 28px; margin-top: -8px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                      <div
+                        class="flex max-w-[150px] justify-start"
+                      >
+                        <span
+                          class="truncate"
                         >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
+                          <span>
+                            <a
+                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                              href="/artist/123"
+                            >
+                              Darkthrone
+                            </a>
+                          </span>
+                        </span>
                       </div>
-                      <div>
-                        <svg
-                          class="text-yellow-900"
-                          fill="currentColor"
-                          height="1em"
-                          stroke="currentColor"
-                          stroke-width="0"
-                          style="font-size: 14px; margin-top: -4px;"
-                          viewBox="0 0 512 512"
-                          width="1em"
-                          xmlns="http://www.w3.org/2000/svg"
+                      <button
+                        data-state="closed"
+                      >
+                        <a
+                          class="cursor-pointer"
+                          href="https://spotify.com"
+                          target="_blank"
                         >
-                          <path
-                            d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                            fill="none"
-                            stroke-linejoin="round"
-                            stroke-width="32"
-                          />
-                        </svg>
-                      </div>
+                          <svg
+                            class="min-w-[20px] h-[20px]"
+                            fill="currentColor"
+                            height="1em"
+                            stroke="currentColor"
+                            stroke-width="0"
+                            viewBox="0 0 496 512"
+                            width="1em"
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                            />
+                          </svg>
+                        </a>
+                      </button>
                     </div>
                   </div>
-                </header>
+                </div>
               </div>
             </div>
           </div>
           <div
-            aria-roledescription="carousel"
-            class="relative max-w-[60vw] self-center sm:max-w-[300px] md:hidden"
-            role="region"
+            class="flex justify-center"
+          />
+        </main>
+      </section>
+    </div>
+  </body>,
+  "container": <div>
+    <section
+      class="flex flex-col gap-6"
+    >
+      <header
+        class="flex items-center justify-between"
+      >
+        <h2
+          class="text-4xl"
+        >
+          Top Items
+        </h2>
+      </header>
+      <main
+        class="flex flex-col gap-4"
+      >
+        <div
+          class="align-center flex flex-col gap-8"
+        >
+          <div
+            class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4"
           >
-            <div
-              class="overflow-hidden"
-            >
+            <div>
               <div
-                class="flex -ml-4"
-                style="transform: translate3d(NaNpx,0px,0px);"
+                class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
               >
+                <img
+                  alt="Track 1"
+                  class="rounded-md"
+                  data-nimg="1"
+                  decoding="async"
+                  height="200"
+                  loading="lazy"
+                  src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                  srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                  style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                  width="200"
+                />
                 <div
-                  aria-roledescription="slide"
-                  class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                  role="group"
+                  class=""
                 >
+                  <a
+                    class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                    href="/track/123"
+                  >
+                    <p
+                      class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+                    >
+                      Track 1
+                    </p>
+                  </a>
                   <div
-                    class="relative flex h-full w-full flex-col justify-start gap-2"
+                    class="flex flex-row justify-between"
                   >
-                    <header
-                      class="m-0 flex w-full flex-col items-center gap-2 p-0"
+                    <div
+                      class="flex max-w-[150px] justify-start"
                     >
-                      <div
-                        class="rounded-xl p-1"
-                      >
-                        <img
-                          alt="Track 1"
-                          class="rounded-md"
-                          data-nimg="1"
-                          decoding="async"
-                          fetchpriority="high"
-                          height="164"
-                          src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                          srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                          style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                          width="164"
-                        />
-                      </div>
-                      <div
-                        class="flex flex-col items-center"
+                      <span
+                        class="truncate"
                       >
-                        <a
-                          class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                          href="/track/123"
-                        >
-                          <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                          >
-                            Track 1
-                          </p>
-                        </a>
                         <span>
                           <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
                             href="/artist/123"
                           >
                             Darkthrone
                           </a>
                         </span>
-                      </div>
-                      <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
+                      </span>
+                    </div>
+                    <button
+                      data-state="closed"
+                    >
+                      <a
+                        class="cursor-pointer"
+                        href="https://spotify.com"
+                        target="_blank"
                       >
-                        <span
-                          class="w-[2rem] text-center text-5xl"
-                        >
-                          1
-                        </span>
-                        <div
-                          class="mt-4 flex w-full flex-row justify-center gap-1"
+                        <svg
+                          class="min-w-[20px] h-[20px]"
+                          fill="currentColor"
+                          height="1em"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 496 512"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <div>
-                            <svg
-                              class="text-yellow-600"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-600"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-600"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 42px; margin-top: -12px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-600"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-600"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                        </div>
-                      </div>
-                    </header>
+                          <path
+                            d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                          />
+                        </svg>
+                      </a>
+                    </button>
                   </div>
                 </div>
+              </div>
+            </div>
+            <div>
+              <div
+                class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+              >
+                <img
+                  alt="Track 1"
+                  class="rounded-md"
+                  data-nimg="1"
+                  decoding="async"
+                  height="200"
+                  loading="lazy"
+                  src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                  srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                  style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                  width="200"
+                />
                 <div
-                  aria-roledescription="slide"
-                  class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                  role="group"
+                  class=""
                 >
+                  <a
+                    class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                    href="/track/2"
+                  >
+                    <p
+                      class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+                    >
+                      Track 1
+                    </p>
+                  </a>
                   <div
-                    class="relative flex h-full w-full flex-col justify-start gap-2"
+                    class="flex flex-row justify-between"
                   >
-                    <header
-                      class="m-0 flex w-full flex-col items-center gap-2 p-0"
+                    <div
+                      class="flex max-w-[150px] justify-start"
                     >
-                      <div
-                        class="rounded-xl p-1"
-                      >
-                        <img
-                          alt="Track 1"
-                          class="rounded-md"
-                          data-nimg="1"
-                          decoding="async"
-                          fetchpriority="high"
-                          height="164"
-                          src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                          srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                          style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                          width="164"
-                        />
-                      </div>
-                      <div
-                        class="flex flex-col items-center"
+                      <span
+                        class="truncate"
                       >
-                        <a
-                          class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                          href="/track/2"
-                        >
-                          <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                          >
-                            Track 1
-                          </p>
-                        </a>
                         <span>
                           <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
                             href="/artist/123"
                           >
                             Darkthrone
                           </a>
                         </span>
-                      </div>
-                      <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
-                      >
-                        <span
-                          class="w-[2rem] text-center text-5xl"
-                        >
-                          2
-                        </span>
-                        <div
-                          class="mt-4 flex w-full flex-row justify-center gap-1"
-                        >
-                          <div>
-                            <svg
-                              class="text-slate-400"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-slate-400"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-slate-400"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 42px; margin-top: -12px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-slate-400"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-slate-400"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                        </div>
-                      </div>
-                    </header>
+                      </span>
+                    </div>
+                    <button
+                      data-state="closed"
+                    >
+                      <a
+                        class="cursor-pointer"
+                        href="https://spotify.com"
+                        target="_blank"
+                      >
+                        <svg
+                          class="min-w-[20px] h-[20px]"
+                          fill="currentColor"
+                          height="1em"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 496 512"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                          />
+                        </svg>
+                      </a>
+                    </button>
                   </div>
                 </div>
+              </div>
+            </div>
+            <div>
+              <div
+                class="border border-card text-card-foreground shadow flex w-full flex-col gap-3 rounded-lg bg-neutral-800 p-4"
+              >
+                <img
+                  alt="Track 1"
+                  class="rounded-md"
+                  data-nimg="1"
+                  decoding="async"
+                  height="200"
+                  loading="lazy"
+                  src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75"
+                  srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=640&q=75 2x"
+                  style="color: transparent; min-height: 200px; max-height: 200px; min-width: 200px; max-width: 200px; object-fit: cover;"
+                  width="200"
+                />
                 <div
-                  aria-roledescription="slide"
-                  class="min-w-0 shrink-0 grow-0 basis-full pl-4"
-                  role="group"
+                  class=""
                 >
+                  <a
+                    class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
+                    href="/track/3"
+                  >
+                    <p
+                      class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] !max-w-[200px]"
+                    >
+                      Track 1
+                    </p>
+                  </a>
                   <div
-                    class="relative flex h-full w-full flex-col justify-start gap-2"
+                    class="flex flex-row justify-between"
                   >
-                    <header
-                      class="m-0 flex w-full flex-col items-center gap-2 p-0"
+                    <div
+                      class="flex max-w-[150px] justify-start"
                     >
-                      <div
-                        class="rounded-xl p-1"
-                      >
-                        <img
-                          alt="Track 1"
-                          class="rounded-md"
-                          data-nimg="1"
-                          decoding="async"
-                          fetchpriority="high"
-                          height="164"
-                          src="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75"
-                          srcset="/_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=256&q=75 1x, /_next/image?url=https%3A%2F%2Fspotify.com%2Fimage.png&w=384&q=75 2x"
-                          style="color: transparent; min-height: 164px; max-height: 164px; min-width: 164px; max-width: 164px; object-fit: cover;"
-                          width="164"
-                        />
-                      </div>
-                      <div
-                        class="flex flex-col items-center"
+                      <span
+                        class="truncate"
                       >
-                        <a
-                          class="items-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer text-primary-foreground underline-offset-4 hover:underline h-9 p-0 text-lg leading-none flex justify-start"
-                          href="/track/3"
-                        >
-                          <p
-                            class="max-w-[220px] truncate sm:max-w-[240px] xl:max-w-[340px] text-2xl"
-                          >
-                            Track 1
-                          </p>
-                        </a>
                         <span>
                           <a
-                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-xl"
+                            class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
                             href="/artist/123"
                           >
                             Darkthrone
                           </a>
                         </span>
-                      </div>
-                      <div
-                        class="flex w-full flex-col items-center justify-center gap-4"
+                      </span>
+                    </div>
+                    <button
+                      data-state="closed"
+                    >
+                      <a
+                        class="cursor-pointer"
+                        href="https://spotify.com"
+                        target="_blank"
                       >
-                        <span
-                          class="w-[2rem] text-center text-5xl"
-                        >
-                          3
-                        </span>
-                        <div
-                          class="mt-4 flex w-full flex-row justify-center gap-1"
+                        <svg
+                          class="min-w-[20px] h-[20px]"
+                          fill="currentColor"
+                          height="1em"
+                          stroke="currentColor"
+                          stroke-width="0"
+                          viewBox="0 0 496 512"
+                          width="1em"
+                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <div>
-                            <svg
-                              class="text-yellow-900"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-900"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-900"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 42px; margin-top: -12px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M394 480a16 16 0 0 1-9.39-3L256 383.76 127.39 477a16 16 0 0 1-24.55-18.08L153 310.35 23 221.2a16 16 0 0 1 9-29.2h160.38l48.4-148.95a16 16 0 0 1 30.44 0l48.4 149H480a16 16 0 0 1 9.05 29.2L359 310.35l50.13 148.53A16 16 0 0 1 394 480z"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-900"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 28px; margin-top: -8px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                          <div>
-                            <svg
-                              class="text-yellow-900"
-                              fill="currentColor"
-                              height="1em"
-                              stroke="currentColor"
-                              stroke-width="0"
-                              style="font-size: 14px; margin-top: -4px;"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M480 208H308L256 48l-52 160H32l140 96-54 160 138-100 138 100-54-160z"
-                                fill="none"
-                                stroke-linejoin="round"
-                                stroke-width="32"
-                              />
-                            </svg>
-                          </div>
-                        </div>
-                      </div>
-                    </header>
+                          <path
+                            d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
+                          />
+                        </svg>
+                      </a>
+                    </button>
                   </div>
                 </div>
               </div>
             </div>
-            <button
-              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -left-12 top-1/2 -translate-y-1/2"
-              disabled=""
-            >
-              <svg
-                class="h-4 w-4"
-                fill="none"
-                height="15"
-                viewBox="0 0 15 15"
-                width="15"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355L3.70711 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H3.70711L6.85355 11.1464C7.04882 11.3417 7.04882 11.6583 6.85355 11.8536C6.65829 12.0488 6.34171 12.0488 6.14645 11.8536L2.14645 7.85355C1.95118 7.65829 1.95118 7.34171 2.14645 7.14645L6.14645 3.14645C6.34171 2.95118 6.65829 2.95118 6.85355 3.14645Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <span
-                class="sr-only"
-              >
-                Previous slide
-              </span>
-            </button>
-            <button
-              class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer border border-input bg-transparent shadow-sm hover:text-accent-foreground absolute h-8 w-8 rounded-full hover:bg-white -right-12 top-1/2 -translate-y-1/2"
-              disabled=""
-            >
-              <svg
-                class="h-4 w-4"
-                fill="none"
-                height="15"
-                viewBox="0 0 15 15"
-                width="15"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  clip-rule="evenodd"
-                  d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                />
-              </svg>
-              <span
-                class="sr-only"
-              >
-                Next slide
-              </span>
-            </button>
           </div>
-          <div
-            class="flex flex-col"
-          />
         </div>
         <div
           class="flex justify-center"
@@ -4717,7 +1315,7 @@ exports[`ItemsSection > should match snapshot with view list 1`] = `
   "baseElement": <body>
     <div>
       <section
-        class="flex flex-col gap-4"
+        class="flex flex-col gap-6"
       >
         <header
           class="flex items-center justify-between"
@@ -4732,7 +1330,7 @@ exports[`ItemsSection > should match snapshot with view list 1`] = `
           class="flex flex-col gap-4"
         >
           <div
-            class="flex flex-col gap-8"
+            class="align-center flex flex-col gap-8"
           >
             <div
               class="flex flex-col"
@@ -4781,13 +1379,17 @@ exports[`ItemsSection > should match snapshot with view list 1`] = `
                           class="flex w-full items-center justify-between"
                         >
                           <div>
-                            <span>
-                              <a
-                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                                href="/artist/123"
-                              >
-                                Darkthrone
-                              </a>
+                            <span
+                              class="truncate"
+                            >
+                              <span>
+                                <a
+                                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                  href="/artist/123"
+                                >
+                                  Darkthrone
+                                </a>
+                              </span>
                             </span>
                             <div
                               class="hidden flex-row gap-1 md:flex"
@@ -4876,13 +1478,17 @@ exports[`ItemsSection > should match snapshot with view list 1`] = `
                           class="flex w-full items-center justify-between"
                         >
                           <div>
-                            <span>
-                              <a
-                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                                href="/artist/123"
-                              >
-                                Darkthrone
-                              </a>
+                            <span
+                              class="truncate"
+                            >
+                              <span>
+                                <a
+                                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                  href="/artist/123"
+                                >
+                                  Darkthrone
+                                </a>
+                              </span>
                             </span>
                             <div
                               class="hidden flex-row gap-1 md:flex"
@@ -4971,13 +1577,17 @@ exports[`ItemsSection > should match snapshot with view list 1`] = `
                           class="flex w-full items-center justify-between"
                         >
                           <div>
-                            <span>
-                              <a
-                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                                href="/artist/123"
-                              >
-                                Darkthrone
-                              </a>
+                            <span
+                              class="truncate"
+                            >
+                              <span>
+                                <a
+                                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                  href="/artist/123"
+                                >
+                                  Darkthrone
+                                </a>
+                              </span>
                             </span>
                             <div
                               class="hidden flex-row gap-1 md:flex"
@@ -5028,7 +1638,7 @@ exports[`ItemsSection > should match snapshot with view list 1`] = `
   </body>,
   "container": <div>
     <section
-      class="flex flex-col gap-4"
+      class="flex flex-col gap-6"
     >
       <header
         class="flex items-center justify-between"
@@ -5043,7 +1653,7 @@ exports[`ItemsSection > should match snapshot with view list 1`] = `
         class="flex flex-col gap-4"
       >
         <div
-          class="flex flex-col gap-8"
+          class="align-center flex flex-col gap-8"
         >
           <div
             class="flex flex-col"
@@ -5092,13 +1702,17 @@ exports[`ItemsSection > should match snapshot with view list 1`] = `
                         class="flex w-full items-center justify-between"
                       >
                         <div>
-                          <span>
-                            <a
-                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                              href="/artist/123"
-                            >
-                              Darkthrone
-                            </a>
+                          <span
+                            class="truncate"
+                          >
+                            <span>
+                              <a
+                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                href="/artist/123"
+                              >
+                                Darkthrone
+                              </a>
+                            </span>
                           </span>
                           <div
                             class="hidden flex-row gap-1 md:flex"
@@ -5187,13 +1801,17 @@ exports[`ItemsSection > should match snapshot with view list 1`] = `
                         class="flex w-full items-center justify-between"
                       >
                         <div>
-                          <span>
-                            <a
-                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                              href="/artist/123"
-                            >
-                              Darkthrone
-                            </a>
+                          <span
+                            class="truncate"
+                          >
+                            <span>
+                              <a
+                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                href="/artist/123"
+                              >
+                                Darkthrone
+                              </a>
+                            </span>
                           </span>
                           <div
                             class="hidden flex-row gap-1 md:flex"
@@ -5282,13 +1900,17 @@ exports[`ItemsSection > should match snapshot with view list 1`] = `
                         class="flex w-full items-center justify-between"
                       >
                         <div>
-                          <span>
-                            <a
-                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                              href="/artist/123"
-                            >
-                              Darkthrone
-                            </a>
+                          <span
+                            class="truncate"
+                          >
+                            <span>
+                              <a
+                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                href="/artist/123"
+                              >
+                                Darkthrone
+                              </a>
+                            </span>
                           </span>
                           <div
                             class="hidden flex-row gap-1 md:flex"
@@ -5396,7 +2018,7 @@ exports[`ItemsSection > should match snapshot with view list and relative time 1
   "baseElement": <body>
     <div>
       <section
-        class="flex flex-col gap-4"
+        class="flex flex-col gap-6"
       >
         <header
           class="flex items-center justify-between"
@@ -5411,7 +2033,7 @@ exports[`ItemsSection > should match snapshot with view list and relative time 1
           class="flex flex-col gap-4"
         >
           <div
-            class="flex flex-col gap-8"
+            class="align-center flex flex-col gap-8"
           >
             <div
               class="flex flex-col"
@@ -5455,13 +2077,17 @@ exports[`ItemsSection > should match snapshot with view list and relative time 1
                           class="flex w-full items-center justify-between"
                         >
                           <div>
-                            <span>
-                              <a
-                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                                href="/artist/123"
-                              >
-                                Darkthrone
-                              </a>
+                            <span
+                              class="truncate"
+                            >
+                              <span>
+                                <a
+                                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                  href="/artist/123"
+                                >
+                                  Darkthrone
+                                </a>
+                              </span>
                             </span>
                             <div
                               class="hidden flex-row gap-1 md:flex"
@@ -5550,13 +2176,17 @@ exports[`ItemsSection > should match snapshot with view list and relative time 1
                           class="flex w-full items-center justify-between"
                         >
                           <div>
-                            <span>
-                              <a
-                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                                href="/artist/123"
-                              >
-                                Darkthrone
-                              </a>
+                            <span
+                              class="truncate"
+                            >
+                              <span>
+                                <a
+                                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                  href="/artist/123"
+                                >
+                                  Darkthrone
+                                </a>
+                              </span>
                             </span>
                             <div
                               class="hidden flex-row gap-1 md:flex"
@@ -5645,13 +2275,17 @@ exports[`ItemsSection > should match snapshot with view list and relative time 1
                           class="flex w-full items-center justify-between"
                         >
                           <div>
-                            <span>
-                              <a
-                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                                href="/artist/123"
-                              >
-                                Darkthrone
-                              </a>
+                            <span
+                              class="truncate"
+                            >
+                              <span>
+                                <a
+                                  class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                  href="/artist/123"
+                                >
+                                  Darkthrone
+                                </a>
+                              </span>
                             </span>
                             <div
                               class="hidden flex-row gap-1 md:flex"
@@ -5707,7 +2341,7 @@ exports[`ItemsSection > should match snapshot with view list and relative time 1
   </body>,
   "container": <div>
     <section
-      class="flex flex-col gap-4"
+      class="flex flex-col gap-6"
     >
       <header
         class="flex items-center justify-between"
@@ -5722,7 +2356,7 @@ exports[`ItemsSection > should match snapshot with view list and relative time 1
         class="flex flex-col gap-4"
       >
         <div
-          class="flex flex-col gap-8"
+          class="align-center flex flex-col gap-8"
         >
           <div
             class="flex flex-col"
@@ -5766,13 +2400,17 @@ exports[`ItemsSection > should match snapshot with view list and relative time 1
                         class="flex w-full items-center justify-between"
                       >
                         <div>
-                          <span>
-                            <a
-                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                              href="/artist/123"
-                            >
-                              Darkthrone
-                            </a>
+                          <span
+                            class="truncate"
+                          >
+                            <span>
+                              <a
+                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                href="/artist/123"
+                              >
+                                Darkthrone
+                              </a>
+                            </span>
                           </span>
                           <div
                             class="hidden flex-row gap-1 md:flex"
@@ -5861,13 +2499,17 @@ exports[`ItemsSection > should match snapshot with view list and relative time 1
                         class="flex w-full items-center justify-between"
                       >
                         <div>
-                          <span>
-                            <a
-                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                              href="/artist/123"
-                            >
-                              Darkthrone
-                            </a>
+                          <span
+                            class="truncate"
+                          >
+                            <span>
+                              <a
+                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                href="/artist/123"
+                              >
+                                Darkthrone
+                              </a>
+                            </span>
                           </span>
                           <div
                             class="hidden flex-row gap-1 md:flex"
@@ -5956,13 +2598,17 @@ exports[`ItemsSection > should match snapshot with view list and relative time 1
                         class="flex w-full items-center justify-between"
                       >
                         <div>
-                          <span>
-                            <a
-                              class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
-                              href="/artist/123"
-                            >
-                              Darkthrone
-                            </a>
+                          <span
+                            class="truncate"
+                          >
+                            <span>
+                              <a
+                                class="inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 cursor-pointer underline-offset-4 hover:underline p-0 h-auto text-primary-foreground/80 text-md"
+                                href="/artist/123"
+                              >
+                                Darkthrone
+                              </a>
+                            </span>
                           </span>
                           <div
                             class="hidden flex-row gap-1 md:flex"
diff --git a/tests/snapshots/top-genres-section.spec.tsx.snap b/tests/snapshots/top-genres-section.spec.tsx.snap
index f9f15b32..fe5ab5b9 100644
--- a/tests/snapshots/top-genres-section.spec.tsx.snap
+++ b/tests/snapshots/top-genres-section.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`TopGenresSection > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <section
-        class="flex flex-col gap-4"
+        class="flex flex-col gap-6"
       >
         <header
           class="flex items-center justify-between"
@@ -81,7 +81,7 @@ exports[`TopGenresSection > should match snapshot 1`] = `
   </body>,
   "container": <div>
     <section
-      class="flex flex-col gap-4"
+      class="flex flex-col gap-6"
     >
       <header
         class="flex items-center justify-between"
@@ -213,7 +213,7 @@ exports[`TopGenresSection > should match snapshot with no data 1`] = `
   "baseElement": <body>
     <div>
       <section
-        class="flex flex-col gap-4"
+        class="flex flex-col gap-6"
       >
         <header
           class="flex items-center justify-between"
@@ -268,7 +268,7 @@ exports[`TopGenresSection > should match snapshot with no data 1`] = `
   </body>,
   "container": <div>
     <section
-      class="flex flex-col gap-4"
+      class="flex flex-col gap-6"
     >
       <header
         class="flex items-center justify-between"