diff --git a/app/components/Album/Wrapper.tsx b/app/components/Album/Wrapper.tsx
index 8f76cfa..d262aeb 100644
--- a/app/components/Album/Wrapper.tsx
+++ b/app/components/Album/Wrapper.tsx
@@ -73,7 +73,7 @@ const AlbumWrapper: React.FC<Props> = ({
                     keyFunction={(genre, i) => `${genre}-${i}`}
                     toFunction={(genre) => `/genre/${genre}`}
                     childFunction={(genre) => genre}
-                    className={clsx('btn-xs')}
+                    className={clsx('!btn-xs')}
                     wrapperClassName={clsx(
                       'stat-actions',
                       'sm:flex-col',
diff --git a/app/components/Base/index.tsx b/app/components/Base/index.tsx
index f4d6551..b4ae014 100644
--- a/app/components/Base/index.tsx
+++ b/app/components/Base/index.tsx
@@ -1,41 +1,63 @@
+import { Slot } from '@radix-ui/react-slot'
 import { LinkProps, Link as RemixLink } from '@remix-run/react'
-import clsx from 'clsx'
+import { type VariantProps, cva } from 'class-variance-authority'
 import React from 'react'
 
+import { cn } from '~/lib/util'
+
 export { default as Layout } from './Layout'
 export { default as EmojiText } from './EmojiText'
 
+const headingVariants = cva('', {
+  variants: {
+    level: {
+      h1: 'text-4xl md:text-5xl',
+      h2: 'text-3xl md:text-4xl',
+      h3: 'text-2xl md:text-3xl',
+      h4: 'text-xl md:text-2xl',
+      h5: 'uppercase font-bold text-xs',
+      h6: 'uppercase text-xs font-bold',
+    },
+    noSpacing: {
+      false: 'my-4',
+    },
+    noStyles: {
+      true: '',
+    },
+  },
+})
+
 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  asChild?: boolean
   noSpacing?: boolean
   noStyles?: boolean
 }
 
 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   (
-    { level, className, noSpacing = false, noStyles = false, ...props },
+    {
+      level,
+      asChild,
+      className,
+      noSpacing = false,
+      noStyles = false,
+      ...props
+    },
     ref,
   ) => {
-    const Component = level as unknown as React.FC<
-      JSX.IntrinsicElements[typeof level]
-    >
+    const Component = asChild ? Slot : level
 
     return (
       <Component
         ref={ref}
-        className={clsx(
-          !noStyles && [
-            {
-              'text-4xl md:text-5xl': level === 'h1',
-              'text-3xl md:text-4xl': level === 'h2',
-              'text-2xl md:text-3xl': level === 'h3',
-              'text-xl md:text-2xl': level === 'h4',
-              'uppercase font-bold text-xs': level === 'h5',
-              'uppercase text-xs font-bold': level === 'h6',
-            },
-            !noSpacing && 'my-4',
-          ],
-          className,
+        className={cn(
+          headingVariants({
+            level: noStyles ? undefined : level,
+            noSpacing,
+            noStyles,
+            className,
+          }),
         )}
         {...props}
       />
@@ -43,66 +65,84 @@ export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   },
 )
 
-export interface ButtonProps<T = HTMLButtonElement>
-  extends React.HTMLAttributes<T> {
-  color?: 'primary' | 'info' | 'warning' | 'danger' | 'reset'
-  size?: 'lg' | 'md' | 'sm' | 'xs' | null
-  ghost?: boolean
-  disabled?: boolean
-  loading?: boolean
-  type?: 'button' | 'reset' | 'submit'
-}
-
-function buttonStyles<T>({
-  color = 'primary',
-  className,
-  size,
-  ghost,
-  disabled,
-  loading,
-}: ButtonProps<T>) {
-  return clsx(
-    'btn',
-    {
-      'btn-primary': color === 'primary',
-      'btn-secondary': color === 'info',
-      'btn-warning': color === 'warning',
-      'btn-accent': color === 'danger',
+const buttonVariants = cva('btn', {
+  variants: {
+    color: {
+      primary: 'btn-primary',
+      secondary: 'btn-info',
+      success: 'btn-success',
+      info: 'btn-secondary',
+      warning: 'btn-warning',
+      danger: 'btn-accent',
+      reset: '',
     },
-    {
-      'btn-lg': size === 'lg',
-      'btn-md': size === 'md',
-      'btn-sm': size === 'sm',
-      'btn-xs': size === 'xs',
+    size: {
+      lg: 'btn-lg',
+      md: 'btn-md',
+      sm: 'btn-sm',
+      xs: 'btn-xs',
     },
-    ghost && 'btn-ghost',
-    disabled && 'btn-disabled',
-    loading && 'loading',
-    className,
-  )
+    ghost: {
+      true: 'btn-ghost',
+    },
+    disabled: {
+      true: 'btn-disabled',
+    },
+    loading: {
+      true: 'loading',
+    },
+  },
+  defaultVariants: {
+    color: 'primary',
+    size: 'md',
+  },
+})
+
+export type BaseButtonProps = VariantProps<typeof buttonVariants> & {
+  asChild?: boolean
+  disabled?: boolean
 }
 
-export const Button = React.forwardRef<
-  HTMLButtonElement,
-  ButtonProps<HTMLButtonElement>
->(({ className, color = 'primary', size = 'md', loading, ...props }, ref) => (
-  <button
-    ref={ref}
-    className={buttonStyles({ color, className, size, loading, ...props })}
-    {...props}
-  />
-))
+export type ButtonProps = BaseButtonProps &
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, color, size, loading, asChild, ...props }, ref) => {
+    const Component = asChild ? Slot : 'button'
+    return (
+      <Component
+        ref={ref}
+        className={cn(
+          buttonVariants({
+            color,
+            className,
+            size,
+            loading,
+            ...props,
+          }),
+        )}
+        {...props}
+      />
+    )
+  },
+)
 
 export const LabelButton = React.forwardRef<
   HTMLLabelElement,
-  ButtonProps<HTMLLabelElement>
->(({ className, color = 'primary', size = 'md', loading, ...props }, ref) => (
-  <label
-    ref={ref}
-    className={buttonStyles({ color, className, size, ...props })}
-    {...props}
-  />
-))
+  React.HTMLAttributes<HTMLLabelElement> & BaseButtonProps
+>(({ className, color, size, loading, ...props }, ref) => {
+  return (
+    <Button
+      asChild
+      color={color}
+      size={size}
+      loading={loading}
+      className={cn(className)}
+    >
+      <label ref={ref} {...props} />
+    </Button>
+  )
+})
 
 export type ButtonLinkProps = (
   | LinkProps
@@ -111,36 +151,69 @@ export type ButtonLinkProps = (
       target?: string
     })
 ) &
-  ButtonProps
+  BaseButtonProps
 
-export const ButtonLink: React.FC<ButtonLinkProps> = ({
-  className,
-  ...props
-}) => {
-  if ('href' in props) {
-    /* eslint-disable-next-line jsx-a11y/anchor-has-content */
-    return <a className={buttonStyles({ className, ...props })} {...props} />
-  }
+export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  ({ className, color, size, loading, ...props }, ref) => {
+    if ('href' in props) {
+      return (
+        <Button
+          asChild
+          color={color}
+          size={size}
+          loading={loading}
+          className={cn(className)}
+        >
+          {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
+          <a ref={ref} {...props} />
+        </Button>
+      )
+    }
 
-  return (
-    <RemixLink className={buttonStyles({ className, ...props })} {...props} />
-  )
-}
+    return (
+      <Button
+        asChild
+        color={color}
+        size={size}
+        loading={loading}
+        className={cn(className)}
+      >
+        <RemixLink ref={ref} {...props} />
+      </Button>
+    )
+  },
+)
 
-export const Link: React.FC<
-  LinkProps & {
-    color?: boolean
-    colorHover?: boolean
-  }
-> = ({ className, color = true, colorHover = false, ...props }) => (
+const linkVariants = cva('link link-hover', {
+  variants: {
+    color: {
+      true: '',
+    },
+    colorHover: {
+      true: 'hover:text-primary hover:no-underline',
+    },
+  },
+  compoundVariants: [
+    {
+      color: true,
+      colorHover: false,
+      className: 'link-primary',
+    },
+  ],
+  defaultVariants: {
+    color: true,
+    colorHover: false,
+  },
+})
+
+export const Link: React.FC<LinkProps & VariantProps<typeof linkVariants>> = ({
+  className,
+  color = true,
+  colorHover = false,
+  ...props
+}) => (
   <RemixLink
-    className={clsx(
-      'link',
-      'link-hover',
-      color && !colorHover && 'link-primary',
-      colorHover && ['hover:text-primary', 'hover:no-underline'],
-      className,
-    )}
+    className={cn(linkVariants({ className, color, colorHover, ...props }))}
     {...props}
   />
 )
@@ -148,29 +221,41 @@ export const Link: React.FC<
 export const ButtonGroup: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
   className,
   ...props
-}) => <div className={clsx(className, 'button-group')} {...props} />
+}) => <div className={cn(className, 'button-group')} {...props} />
 
-export interface TypographyProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
-  variant?: 'base' | 'italics' | 'bold' | 'hint'
-}
+const typographyVariants = cva('text-base', {
+  variants: {
+    variant: {
+      base: '',
+      hint: 'italic text-gray-400',
+      italics: 'italic',
+      bold: 'font-bold',
+    },
+  },
+  defaultVariants: {
+    variant: 'base',
+  },
+})
+
+export type TypographyProps = React.HTMLAttributes<HTMLParagraphElement> &
+  VariantProps<typeof typographyVariants> & {
+    asChild?: boolean
+  }
 
 export const Typography = React.forwardRef<
   HTMLParagraphElement,
   TypographyProps
->(({ variant = 'base', className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={clsx(
-      'text-base',
-      variant === 'hint' && ['italic', 'text-gray-400'],
-      variant === 'italics' && 'italic',
-      variant === 'bold' && 'font-bold',
-      className,
-    )}
-    {...props}
-  />
-))
+>(({ variant = 'base', asChild, className, ...props }, ref) => {
+  const Component = asChild ? Slot : 'p'
+
+  return (
+    <Component
+      ref={ref}
+      className={cn(typographyVariants({ variant, className, ...props }))}
+      {...props}
+    />
+  )
+})
 
 export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
   width?: 'full' | 'half'
@@ -183,7 +268,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, width = 'full', ...props }, ref) => (
     <input
       ref={ref}
-      className={clsx(
+      className={cn(
         'input',
         'input-bordered',
         'w-full',
@@ -196,29 +281,30 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ),
 )
 
-export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  center?: boolean
-}
+const containerVariants = cva('container mx-auto', {
+  variants: {
+    center: {
+      true: 'text-center flex justify-items-center align-items-center flex-col',
+    },
+  },
+})
+
+export type ContainerProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof containerVariants> & {
+    asChild?: boolean
+  }
 
 export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
-  ({ className, center, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={clsx(
-        'container',
-        'mx-auto',
-        center && [
-          'text-center',
-          'flex',
-          'justify-items-center',
-          'align-items-center',
-          'flex-col',
-        ],
-        className,
-      )}
-      {...props}
-    />
-  ),
+  ({ className, center, asChild, ...props }, ref) => {
+    const Component = asChild ? Slot : 'div'
+    return (
+      <Component
+        ref={ref}
+        className={containerVariants({ center, className, ...props })}
+        {...props}
+      />
+    )
+  },
 )
 
 type AProps = React.HTMLAttributes<HTMLHyperlinkElementUtils> & {
@@ -231,7 +317,7 @@ export const A = React.forwardRef<HTMLAnchorElement, AProps>(
     /* eslint-disable-next-line jsx-a11y/anchor-has-content */
     <a
       ref={ref}
-      className={clsx('link', 'link-hover', 'link-primary', className)}
+      className={cn('link', 'link-hover', 'link-primary', className)}
       {...props}
     />
   ),
@@ -246,7 +332,7 @@ export const Fieldset = React.forwardRef<HTMLFieldSetElement, FieldsetProps>(
   ({ className, flexDirection, ...props }, ref) => (
     <fieldset
       ref={ref}
-      className={clsx(
+      className={cn(
         'my-4',
         'p-2',
         'border-2',
@@ -268,7 +354,7 @@ export const Legend = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <legend
     ref={ref}
-    className={clsx('font-bold', 'mb-2', 'px-2', className)}
+    className={cn('font-bold', 'mb-2', 'px-2', className)}
     {...props}
   />
 ))
@@ -286,9 +372,9 @@ export const Checkbox: React.FC<React.PropsWithChildren<CheckboxProps>> = ({
   ...props
 }) => (
   <div className="form-control">
-    <label className={clsx('label', 'justify-start', 'gap-2')}>
+    <label className={cn('label', 'justify-start', 'gap-2')}>
       <input
-        className={clsx('checkbox', 'checkbox-primary', className)}
+        className={cn('checkbox', 'checkbox-primary', className)}
         type="checkbox"
         name={name}
         {...props}
diff --git a/app/lib/util.ts b/app/lib/util.ts
new file mode 100644
index 0000000..d32b0fe
--- /dev/null
+++ b/app/lib/util.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/package-lock.json b/package-lock.json
index f9cb5c2..d3e83a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@growthbook/growthbook-react": "^0.17.0",
         "@libsql/client": "^0.3.1",
         "@netlify/functions": "^1.6.0",
+        "@radix-ui/react-slot": "^1.0.2",
         "@react-hookz/web": "^23.1.0",
         "@remix-run/netlify": "^1.19.3",
         "@remix-run/node": "^1.19.3",
@@ -20,6 +21,7 @@
         "@spotify/web-api-ts-sdk": "^1.2.0",
         "async-retry": "^1.3.3",
         "axios": "^1.4.0",
+        "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
         "daisyui": "^3.1.6",
         "date-fns": "^2.30.0",
@@ -36,6 +38,7 @@
         "remix-auth-spotify": "^1.3.0",
         "remix-utils": "^6.6.0",
         "resend": "^0.17.2",
+        "tailwind-merge": "^2.3.0",
         "wikipedia": "^2.1.0",
         "winston": "^3.10.0",
         "winston-transport": "^4.5.0",
@@ -2110,11 +2113,11 @@
       "dev": true
     },
     "node_modules/@babel/runtime": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
-      "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.6.tgz",
+      "integrity": "sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -3139,6 +3142,41 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-email/render": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/@react-email/render/-/render-0.0.7.tgz",
@@ -6161,6 +6199,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -15135,9 +15184,9 @@
       }
     },
     "node_modules/regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.1",
@@ -16952,6 +17001,18 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz",
+      "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
@@ -20475,11 +20536,11 @@
       "dev": true
     },
     "@babel/runtime": {
-      "version": "7.21.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
-      "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.6.tgz",
+      "integrity": "sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==",
       "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
       }
     },
     "@babel/template": {
@@ -21162,6 +21223,23 @@
         }
       }
     },
+    "@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "requires": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      }
+    },
     "@react-email/render": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/@react-email/render/-/render-0.0.7.tgz",
@@ -23522,6 +23600,14 @@
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true
     },
+    "class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "requires": {
+        "clsx": "2.0.0"
+      }
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -29947,9 +30033,9 @@
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "regenerator-transform": {
       "version": "0.15.1",
@@ -31344,6 +31430,14 @@
         "tslib": "^2.5.0"
       }
     },
+    "tailwind-merge": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.3.0.tgz",
+      "integrity": "sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==",
+      "requires": {
+        "@babel/runtime": "^7.24.1"
+      }
+    },
     "tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
diff --git a/package.json b/package.json
index a5b4f04..659d072 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@growthbook/growthbook-react": "^0.17.0",
     "@libsql/client": "^0.3.1",
     "@netlify/functions": "^1.6.0",
+    "@radix-ui/react-slot": "^1.0.2",
     "@react-hookz/web": "^23.1.0",
     "@remix-run/netlify": "^1.19.3",
     "@remix-run/node": "^1.19.3",
@@ -34,6 +35,7 @@
     "@spotify/web-api-ts-sdk": "^1.2.0",
     "async-retry": "^1.3.3",
     "axios": "^1.4.0",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "daisyui": "^3.1.6",
     "date-fns": "^2.30.0",
@@ -50,6 +52,7 @@
     "remix-auth-spotify": "^1.3.0",
     "remix-utils": "^6.6.0",
     "resend": "^0.17.2",
+    "tailwind-merge": "^2.3.0",
     "wikipedia": "^2.1.0",
     "winston": "^3.10.0",
     "winston-transport": "^4.5.0",