diff --git a/.vscode/settings.json b/.vscode/settings.json
index 76a9c3a4..d90d6c9c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,6 +13,15 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "always"
   },
+  // Enable suggestions inside strings for Tailwind CSS class names
+  // https://github.com/tailwindlabs/tailwindcss-intellisense#editorquicksuggestions
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "tailwindCSS.experimental.configFile": {
+    "apps/frontend/src/app/globals.css": "apps/frontend/src/**"
+  },
+  "tailwindCSS.classFunctions": ["tw", "clsx", "cn"],
   "files.associations": {
     ".css": "tailwindcss",
     "*.scss": "tailwindcss"
diff --git a/apps/frontend/components.json b/apps/frontend/components.json
index d09c9490..b9835b61 100644
--- a/apps/frontend/components.json
+++ b/apps/frontend/components.json
@@ -12,7 +12,7 @@
     "rsc": true,
     "tsx": true
   },
-  "iconLibrary": "lucide",
+  "iconLibrary": "fontawesome",
   "aliases": {
     "components": "@web/modules/shared/components",
     "utils": "@web/lib/utils",
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 80d26fdf..2b406af5 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -59,7 +59,7 @@
     "schema-dts": "^1.1.5",
     "sharp": "^0.34.5",
     "tailwind-merge": "^3.4.0",
-    "tailwindcss": "4.1.17",
+    "tailwindcss": "^4.1.18",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.9.3",
     "zod": "^4.1.13",
@@ -67,8 +67,7 @@
     "zustand": "^5.0.9"
   },
   "devDependencies": {
-    "@shrutibalasa/tailwind-grid-auto-fit": "^1.1.0",
-    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/mdx": "^2.0.13",
     "@types/react-modal": "^3.16.3",
     "eslint-config-next": "16.0.8",
diff --git a/apps/frontend/postcss.config.js b/apps/frontend/postcss.config.mjs
similarity index 56%
rename from apps/frontend/postcss.config.js
rename to apps/frontend/postcss.config.mjs
index b4bee663..297374d8 100644
--- a/apps/frontend/postcss.config.js
+++ b/apps/frontend/postcss.config.mjs
@@ -1,6 +1,7 @@
-module.exports = {
+const config = {
   plugins: {
     '@tailwindcss/postcss': {},
-    autoprefixer: {},
   },
 };
+
+export default config;
diff --git a/apps/frontend/src/app/(content)/(info)/about/page.tsx b/apps/frontend/src/app/(content)/(info)/about/page.tsx
index 37916161..d7e9ceea 100644
--- a/apps/frontend/src/app/(content)/(info)/about/page.tsx
+++ b/apps/frontend/src/app/(content)/(info)/about/page.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 const AboutPage = () => {
   return (
     <>
-      <article className='max-w-screen-md mx-auto mb-36'>
+      <article className='max-w-(--breakpoint-md) mx-auto mb-36'>
         <NoteBlockWorldLogo
           size={112}
           orientation='horizontal'
diff --git a/apps/frontend/src/app/(content)/(info)/blog/[id]/page.tsx b/apps/frontend/src/app/(content)/(info)/blog/[id]/page.tsx
index 5773f799..a0e90d94 100644
--- a/apps/frontend/src/app/(content)/(info)/blog/[id]/page.tsx
+++ b/apps/frontend/src/app/(content)/(info)/blog/[id]/page.tsx
@@ -50,12 +50,12 @@ const BlogPost = async ({ params }: BlogPageProps) => {
         <Image
           src={post.image}
           alt=''
-          className='w-full h-[30vh] md:h-[50vh] object-cover mb-8 mt-[-2.5rem] rounded-xl'
+          className='w-full h-[30vh] md:h-[50vh] object-cover mb-8 -mt-10 rounded-xl'
           width={1920}
           height={1080}
         />
       )}
-      <article className='max-w-screen-md mx-auto mb-36'>
+      <article className='max-w-(--breakpoint-md) mx-auto mb-36'>
         <Link
           href='/blog'
           className='text-zinc-500 hover:text-zinc-400 text-sm'
diff --git a/apps/frontend/src/app/(content)/(info)/blog/page.tsx b/apps/frontend/src/app/(content)/(info)/blog/page.tsx
index bcadb92c..4cdab16b 100644
--- a/apps/frontend/src/app/(content)/(info)/blog/page.tsx
+++ b/apps/frontend/src/app/(content)/(info)/blog/page.tsx
@@ -33,7 +33,7 @@ const BlogPageComponent = ({ posts }: { posts: PostType[] }) => {
         {"See what we've been working on!"}
       </h2>
 
-      <section className='grid grid-auto-fit-xl max-w-screen-md mx-auto justify-center w-full items-center gap-8'>
+      <section className='grid grid-auto-fit-xl max-w-(--breakpoint-md) mx-auto justify-center w-full items-center gap-8'>
         {posts.map((post, i) => (
           <Link
             key={i}
@@ -46,10 +46,10 @@ const BlogPageComponent = ({ posts }: { posts: PostType[] }) => {
                 width={480}
                 height={360}
                 alt=''
-                className='rounded-md aspect-[16/9] w-full object-cover transition-all duration-300 mb-2'
+                className='rounded-md aspect-video w-full object-cover transition-all duration-300 mb-2'
               />
 
-              <h3 className='text-lg font-bold text-opacity-50 mb-2 leading-6 flex-grow'>
+              <h3 className='text-lg font-bold mb-2 leading-6 grow'>
                 {post.title}
               </h3>
               <p className='text-zinc-300 tracking-wide text-sm mb-2'>
diff --git a/apps/frontend/src/app/(content)/(info)/contact/page.tsx b/apps/frontend/src/app/(content)/(info)/contact/page.tsx
index ebd20a1a..18f5728d 100644
--- a/apps/frontend/src/app/(content)/(info)/contact/page.tsx
+++ b/apps/frontend/src/app/(content)/(info)/contact/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 const AboutPage = () => {
   return (
     <>
-      <article className='max-w-screen-md mx-auto mb-36'>
+      <article className='max-w-(--breakpoint-md) mx-auto mb-36'>
         <BackButton className='text-zinc-500 hover:text-zinc-400 text-sm'>
           {'< Back'}
         </BackButton>
diff --git a/apps/frontend/src/app/(content)/(info)/help/[id]/page.tsx b/apps/frontend/src/app/(content)/(info)/help/[id]/page.tsx
index d776871e..5c372fbc 100644
--- a/apps/frontend/src/app/(content)/(info)/help/[id]/page.tsx
+++ b/apps/frontend/src/app/(content)/(info)/help/[id]/page.tsx
@@ -46,7 +46,7 @@ const HelpPost = async ({ params }: HelpPageProps) => {
 
   return (
     <>
-      <article className='max-w-screen-md mx-auto mb-36'>
+      <article className='max-w-(--breakpoint-md) mx-auto mb-36'>
         <Link
           href='/help'
           className='text-zinc-500 hover:text-zinc-400 text-sm'
diff --git a/apps/frontend/src/app/(content)/(info)/help/page.tsx b/apps/frontend/src/app/(content)/(info)/help/page.tsx
index f0984c24..83805466 100644
--- a/apps/frontend/src/app/(content)/(info)/help/page.tsx
+++ b/apps/frontend/src/app/(content)/(info)/help/page.tsx
@@ -45,11 +45,11 @@ const HelpPageComponent = ({ posts }: { posts: PostType[] }) => {
                 width={480}
                 height={360}
                 alt={post.title}
-                className='rounded-2xl aspect-[3/2] object-cover brightness-150 transition-all duration-300'
+                className='rounded-2xl aspect-3/2 object-cover brightness-150 transition-all duration-300'
               />
 
               {/* Gradient over the image */}
-              <div className='absolute top-0 left-0 w-full h-full hover:bg-white/20 transition-all duration-300 bg-gradient-to-b from-transparent to-black/80 rounded-2xl'>
+              <div className='absolute top-0 left-0 w-full h-full hover:bg-white/20 transition-all duration-300 bg-linear-to-b from-transparent to-black/80 rounded-2xl'>
                 <h3 className='relative w-full h-full p-3 sm:p-6 flex justify-center items-end text-xl text-opacity-50'>
                   {post.shortTitle || post.title}
                 </h3>
diff --git a/apps/frontend/src/app/(external)/layout.tsx b/apps/frontend/src/app/(external)/layout.tsx
index aa9d1eb1..36d17c19 100644
--- a/apps/frontend/src/app/(external)/layout.tsx
+++ b/apps/frontend/src/app/(external)/layout.tsx
@@ -10,7 +10,7 @@ export default async function LoginLayout({
   return (
     <>
       <div
-        className="fixed z-[-1] w-full h-full bg-center bg-repeat grayscale-[50%] before:content-[''] before:absolute before:w-full before:h-full before:bg-gradient-to-b before:from-black/20 before:to-black/90"
+        className="fixed z-[-1] w-full h-full bg-center bg-repeat grayscale-50 before:content-[''] before:absolute before:w-full before:h-full before:bg-linear-to-b before:from-black/20 before:to-black/90"
         style={{
           backgroundImage: "url('/background-tile-flat.png')",
         }}
diff --git a/apps/frontend/src/app/globals.css b/apps/frontend/src/app/globals.css
index b5e385a9..b4a005fa 100644
--- a/apps/frontend/src/app/globals.css
+++ b/apps/frontend/src/app/globals.css
@@ -1,9 +1,40 @@
 @import 'tailwindcss';
-/*---break---*/
+
 @plugin "tailwindcss-animate";
-/*---break---*/
+
 @custom-variant dark (&:is(.dark *));
 
+@theme {
+  --font-sans: var(--font-lato);
+  --ease-out-back: cubic-bezier(0.34, 1.56, 0.51, 1.2);
+}
+
+/************** Grid utilities **************/
+
+@utility grid-auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
+
+@utility grid-auto-fit-xs {
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+}
+
+@utility grid-auto-fit-sm {
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+}
+
+@utility grid-auto-fit-md {
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+}
+
+@utility grid-auto-fit-lg {
+  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
+}
+
+@utility grid-auto-fit-xl {
+  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
+}
+
 /************** Scrollbar **************/
 
 html {
@@ -302,3 +333,12 @@ ins.adsbygoogle[data-ad-status='unfilled'] {
   }
 }
 */
+
+/* Make buttons use pointer cursor */
+/* See: https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */
+@layer base {
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}
diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
index 6e9f65ae..9e25cfbf 100644
--- a/apps/frontend/src/app/layout.tsx
+++ b/apps/frontend/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import { config } from '@fortawesome/fontawesome-svg-core';
 import { GoogleAnalytics } from '@next/third-parties/google';
 import type { Metadata } from 'next';
 import { Lato } from 'next/font/google';
@@ -14,9 +15,17 @@ import DetectAdBlock from '../modules/shared/components/client/ads/DetectAdBlock
 import GoogleAdSense from '../modules/shared/components/GoogleAdSense';
 import { TooltipProvider } from '../modules/shared/components/tooltip';
 
+// Pre-import FontAwesome CSS to avoid FOUC
+// See: https://fontawesome.com/docs/web/use-with/react/use-with#nextjs
+import '@fortawesome/fontawesome-svg-core/styles.css';
+
+// Prevent FontAwesome from injecting CSS after initial render
+config.autoAddCss = false;
+
 const lato = Lato({
   subsets: ['latin'],
   weight: ['100', '300', '400', '700', '900'],
+  variable: '--font-lato',
 });
 
 export const metadata: Metadata = {
@@ -50,7 +59,7 @@ export default function RootLayout({
 }) {
   return (
     <ReCaptchaProvider useEnterprise>
-      <html lang='en'>
+      <html lang='en' className={lato.variable}>
         <head>
           <GoogleAdSense pId={process.env.NEXT_PUBLIC_ADSENSE_CLIENT} />
           {/* https://nextjs.org/docs/app/building-your-application/optimizing/metadata#json-ld */}
@@ -102,7 +111,7 @@ export default function RootLayout({
           <Toaster
             position='bottom-center'
             toastOptions={{
-              className: '!bg-zinc-700 !text-white !max-w-fit',
+              className: 'bg-zinc-700! text-white! max-w-fit!',
               duration: 4000,
             }}
           />
diff --git a/apps/frontend/src/app/not-found.tsx b/apps/frontend/src/app/not-found.tsx
index 618e98f6..e6544d41 100644
--- a/apps/frontend/src/app/not-found.tsx
+++ b/apps/frontend/src/app/not-found.tsx
@@ -40,13 +40,13 @@ export default function NotFound() {
   return (
     <>
       <div
-        className="fixed w-full h-full bg-center bg-repeat grayscale brightness-50 opacity-30 before:content-[''] before:absolute before:w-full before:h-full before:bg-gradient-to-b before:from-black/20 before:to-black/80"
+        className="fixed w-full h-full bg-center bg-repeat grayscale brightness-50 opacity-30 before:content-[''] before:absolute before:w-full before:h-full before:bg-linear-to-b before:from-black/20 before:to-black/80"
         style={{
           backgroundImage: "url('/background-tile-flat.png')",
         }}
       ></div>
 
-      <main className='w-full h-screen text-center [&>*]:z-[2] p-2 bg-zinc-900 flex flex-col items-center justify-center gap-8'>
+      <main className='w-full h-screen text-center *:z-2 p-2 bg-zinc-900 flex flex-col items-center justify-center gap-8'>
         {/* Background image */}
 
         <p className='font-light text-zinc-400 text-5xl'>Oops...</p>
@@ -57,7 +57,7 @@ export default function NotFound() {
             width={400}
             height={400}
             quality={95}
-            className='object-contain relative md:left-8 top-8 w-64 md:w-full z-[2]'
+            className='object-contain relative md:left-8 top-8 w-64 md:w-full z-2'
           />
           <h1 className='leading-none font-black text-[10rem] md:text-[18rem] z-1 text-zinc-600/30 relative bottom-8 md:right-12 md:bottom-16'>
             404
diff --git a/apps/frontend/src/modules/auth/components/loginPage.tsx b/apps/frontend/src/modules/auth/components/loginPage.tsx
index 5551d6d3..75a1f05e 100644
--- a/apps/frontend/src/modules/auth/components/loginPage.tsx
+++ b/apps/frontend/src/modules/auth/components/loginPage.tsx
@@ -51,9 +51,9 @@ export const LoginPage = () => {
         <NoteBlockWorldLogo glow={true} orientation='adaptive' size={128} />
 
         {/* Vertical divider (mobile) */}
-        <div className='w-[1px] min-h-full hidden sm:block bg-zinc-600'></div>
+        <div className='w-px min-h-full hidden sm:block bg-zinc-600'></div>
         {/* Horizontal divider (desktop) */}
-        <div className='h-[1px] min-w-full block sm:hidden bg-zinc-600'></div>
+        <div className='h-px min-w-full block sm:hidden bg-zinc-600'></div>
 
         {/* Right half */}
         <div className='flex flex-col justify-center items-center gap-5'>
@@ -87,6 +87,7 @@ export const LoginPage = () => {
               <FontAwesomeIcon
                 icon={faGoogle}
                 className='align-middle mr-2 h-5'
+                size='lg'
               />
               <span className='flex-1 text-nowrap'>Log in with Google</span>
             </Link>
@@ -99,6 +100,7 @@ export const LoginPage = () => {
               <FontAwesomeIcon
                 icon={faGithub}
                 className='align-middle mr-2 h-5'
+                size='lg'
               />
               <span className='flex-1'>Log in with GitHub</span>
             </Link>
@@ -111,6 +113,7 @@ export const LoginPage = () => {
               <FontAwesomeIcon
                 icon={faDiscord}
                 className='align-middle mr-2 h-5'
+                size='lg'
               />
               <span className='flex-1 text-nowrap'>Log in with Discord</span>
             </Link>
diff --git a/apps/frontend/src/modules/auth/components/loginWithEmailPage.tsx b/apps/frontend/src/modules/auth/components/loginWithEmailPage.tsx
index 06367fd3..9607bdec 100644
--- a/apps/frontend/src/modules/auth/components/loginWithEmailPage.tsx
+++ b/apps/frontend/src/modules/auth/components/loginWithEmailPage.tsx
@@ -14,9 +14,9 @@ export const LoginWithEmailPage = () => {
         <NoteBlockWorldLogo glow={true} orientation='adaptive' size={128} />
 
         {/* Vertical divider (mobile) */}
-        <div className='w-[1px] min-h-full hidden sm:block bg-zinc-600'></div>
+        <div className='w-px min-h-full hidden sm:block bg-zinc-600'></div>
         {/* Horizontal divider (desktop) */}
-        <div className='h-[1px] min-w-full block sm:hidden bg-zinc-600'></div>
+        <div className='h-px min-w-full block sm:hidden bg-zinc-600'></div>
 
         {/* Right half */}
         <div className='flex flex-col justify-center items-center gap-5'>
diff --git a/apps/frontend/src/modules/browse/EventBanner.tsx b/apps/frontend/src/modules/browse/EventBanner.tsx
index 496b0791..81f864fc 100644
--- a/apps/frontend/src/modules/browse/EventBanner.tsx
+++ b/apps/frontend/src/modules/browse/EventBanner.tsx
@@ -32,7 +32,7 @@ export const EventBanner = () => {
   };
 
   return (
-    <div className='flex flex-row mx-auto w-fit justify-between items-center text-pretty gap-6 py-4 px-2 sm:px-8 text-md rounded-xl mb-10 bg-top backdrop-filter backdrop-blur-lg bg-opacity-50 bg-gradient-to-br from-15% from-pink-800 via-rose-900 to-85% to-red-900 relative'>
+    <div className='flex flex-row mx-auto w-fit justify-between items-center text-pretty gap-6 py-4 px-2 sm:px-8 text-md rounded-xl mb-10 bg-top backdrop-filter backdrop-blur-lg bg-linear-to-br from-15% from-pink-800/50 via-rose-900/50 to-85% to-red-900/50 relative'>
       <div
         className='absolute h-full w-full top-0 left-0 z-[-1] rounded-xl opacity-50 brightness-[0.3]'
         style={{
@@ -43,7 +43,7 @@ export const EventBanner = () => {
       ></div>
       <Image src='/img/event/maestro-icon.png' alt='' width={64} height={64} />
 
-      <div className='flex-1 leading-tight max-w-screen-md w-fit'>
+      <div className='flex-1 leading-tight max-w-(--breakpoint-md) w-fit'>
         <p className='uppercase text-md font-bold tracking-wider text-yellow-300 mb-1 w-fit'>
           <FontAwesomeIcon icon={faExclamationCircle} />{' '}
           {timeLeft === 0 ? (
diff --git a/apps/frontend/src/modules/browse/WelcomeBanner.tsx b/apps/frontend/src/modules/browse/WelcomeBanner.tsx
index ba489bc2..63f3e264 100644
--- a/apps/frontend/src/modules/browse/WelcomeBanner.tsx
+++ b/apps/frontend/src/modules/browse/WelcomeBanner.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 export const WelcomeBanner = () => {
   return (
-    <div className='flex flex-col md:flex-row mx-auto w-fit justify-between items-center text-center text-balance gap-1 py-4 px-2 sm:px-8 text-sm rounded-xl mb-10 bg-top backdrop-filter backdrop-blur-lg bg-opacity-50 bg-gradient-to-br from-15% from-green-700 via-cyan-800 to-85% to-blue-900 border-2 border-white/20'>
+    <div className='flex flex-col md:flex-row mx-auto w-fit justify-between items-center text-center text-balance gap-1 py-4 px-2 sm:px-8 text-sm rounded-xl mb-10 bg-top backdrop-filter backdrop-blur-lg bg-linear-to-br from-15% from-green-700/50 via-cyan-800/50 to-85% to-blue-900/50 border-2 border-white/20'>
       <div
         className='absolute h-full w-full top-0 left-0 z-[-1] rounded-xl opacity-20 brightness-50 hue-rotate-90'
         style={{
@@ -19,7 +19,7 @@ export const WelcomeBanner = () => {
         width={100}
         height={100}
       />
-      <div className='flex-1 leading-tight max-w-screen-md'>
+      <div className='flex-1 leading-tight max-w-(--breakpoint-md)'>
         <h1 className='text-lg font-bold mb-1 text-green-400'>
           Welcome to <strong className='text-teal-300'>Note Block World</strong>
           !
diff --git a/apps/frontend/src/modules/browse/components/HomePageComponent.tsx b/apps/frontend/src/modules/browse/components/HomePageComponent.tsx
index 9edcd140..0f9d3ccf 100644
--- a/apps/frontend/src/modules/browse/components/HomePageComponent.tsx
+++ b/apps/frontend/src/modules/browse/components/HomePageComponent.tsx
@@ -82,7 +82,7 @@ export const HomePageComponent = () => {
 
       {/* RECENT SONGS */}
       <div className='flex flex-row flex-wrap justify-between items-center gap-4 mb-2'>
-        <h2 className='text-xl uppercase z-[2]'>Recent songs</h2>
+        <h2 className='text-xl uppercase z-2'>Recent songs</h2>
         <CategoryButtonGroup />
       </div>
       <div className='h-6' />
diff --git a/apps/frontend/src/modules/browse/components/SongCard.tsx b/apps/frontend/src/modules/browse/components/SongCard.tsx
index e2e3d4ac..5910abbc 100644
--- a/apps/frontend/src/modules/browse/components/SongCard.tsx
+++ b/apps/frontend/src/modules/browse/components/SongCard.tsx
@@ -17,7 +17,7 @@ const SongDataDisplay = ({ song }: { song: SongPreviewDtoType | null }) => {
       <div className='relative'>
         {!song ? (
           <Skeleton
-            className='w-full h-full rounded-lg aspect-[5/3] object-cover'
+            className='w-full h-full rounded-lg aspect-5/3 object-cover'
             containerClassName='block leading-none'
           />
         ) : (
@@ -33,9 +33,9 @@ const SongDataDisplay = ({ song }: { song: SongPreviewDtoType | null }) => {
       </div>
 
       {/* Song info */}
-      <div className='flex flex-row justify-between px-4 pt-0.5 text-pretty flex-grow'>
+      <div className='flex flex-row justify-between px-4 pt-0.5 text-pretty grow'>
         {/* Song title */}
-        <h3 className='text-md font-semibold leading-tight w-full h-10 flex-grow line-clamp-2'>
+        <h3 className='text-md font-semibold leading-tight w-full h-10 grow line-clamp-2'>
           {song?.title || <Skeleton count={2} />}
         </h3>
       </div>
@@ -51,7 +51,7 @@ const SongDataDisplay = ({ song }: { song: SongPreviewDtoType | null }) => {
           )}
         </p>
         {/* Play icon & count */}
-        <div className='text-md flex items-center gap-1 flex-shrink'>
+        <div className='text-md flex items-center gap-1 shrink'>
           {!song ? (
             <Skeleton className='min-w-16' />
           ) : (
diff --git a/apps/frontend/src/modules/browse/components/SongCardGroup.tsx b/apps/frontend/src/modules/browse/components/SongCardGroup.tsx
index c247d636..1d62d49e 100644
--- a/apps/frontend/src/modules/browse/components/SongCardGroup.tsx
+++ b/apps/frontend/src/modules/browse/components/SongCardGroup.tsx
@@ -1,25 +1,6 @@
-const SongCardGroup = ({
-  children,
-  size = 'md',
-}: {
-  children: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-}) => {
-  // Define min column widths for each size
-  const minWidths = {
-    sm: '200px',
-    md: '280px',
-    lg: '320px',
-    xl: '400px',
-  };
-
+const SongCardGroup = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div
-      className='grid w-full items-center gap-4'
-      style={{
-        gridTemplateColumns: `repeat(auto-fit, minmax(${minWidths[size]}, 1fr))`,
-      }}
-    >
+    <div className='grid grid-auto-fit-md w-full items-center gap-4'>
       {children}
     </div>
   );
diff --git a/apps/frontend/src/modules/my-songs/components/client/SongRow.tsx b/apps/frontend/src/modules/my-songs/components/client/SongRow.tsx
index 418e8f38..9333cb9b 100644
--- a/apps/frontend/src/modules/my-songs/components/client/SongRow.tsx
+++ b/apps/frontend/src/modules/my-songs/components/client/SongRow.tsx
@@ -41,7 +41,7 @@ export const SongRow = ({ song }: { song?: SongPreviewDtoType | null }) => {
     >
       {/* Thumbnail */}
       <div className='col-span-1'>
-        <div className='aspect-[5/3] w-full object-cover rounded-lg relative block leading-none'>
+        <div className='aspect-5/3 w-full object-cover rounded-lg relative block leading-none'>
           {!song ? (
             <Skeleton className='w-full h-full' />
           ) : (
diff --git a/apps/frontend/src/modules/shared/components/CustomMarkdown.tsx b/apps/frontend/src/modules/shared/components/CustomMarkdown.tsx
index fdad1fec..523597ee 100644
--- a/apps/frontend/src/modules/shared/components/CustomMarkdown.tsx
+++ b/apps/frontend/src/modules/shared/components/CustomMarkdown.tsx
@@ -105,7 +105,7 @@ const code = ({
   return (
     <code
       {...props}
-      className='bg-zinc-950/50 text-green-400 rounded-md outline outline-1 outline-zinc-600 text-sm font-mono px-1 py-0.5 mx-0.5'
+      className='bg-zinc-950/50 text-green-400 rounded-md outline-1 outline-zinc-600 text-sm font-mono px-1 py-0.5 mx-0.5'
     />
   );
 };
diff --git a/apps/frontend/src/modules/shared/components/NoteBlockWorldLogo.tsx b/apps/frontend/src/modules/shared/components/NoteBlockWorldLogo.tsx
index 4b83afe1..e302ef18 100644
--- a/apps/frontend/src/modules/shared/components/NoteBlockWorldLogo.tsx
+++ b/apps/frontend/src/modules/shared/components/NoteBlockWorldLogo.tsx
@@ -16,13 +16,13 @@ export const NoteBlockWorldLogo = ({
   let flexConfig, marginConfig;
 
   if (orientation === 'horizontal') {
-    flexConfig = 'flex-row mr-[-2rem]';
+    flexConfig = 'flex-row -mr-8';
     marginConfig = 'right-8';
   } else if (orientation === 'vertical') {
-    flexConfig = 'flex-col mb-[-2.5rem]';
+    flexConfig = 'flex-col -mb-10';
     marginConfig = 'bottom-10';
   } else {
-    flexConfig = 'flex-row sm:flex-col mr-[-2rem] sm:mr-0 sm:mb-[-2.5rem]';
+    flexConfig = 'flex-row sm:flex-col -mr-8 sm:mr-0 sm:-mb-10';
     marginConfig = 'right-8 sm:right-0 sm:bottom-10';
   }
 
diff --git a/apps/frontend/src/modules/shared/components/client/Carousel.tsx b/apps/frontend/src/modules/shared/components/client/Carousel.tsx
index e28ad30c..add8b9e3 100644
--- a/apps/frontend/src/modules/shared/components/client/Carousel.tsx
+++ b/apps/frontend/src/modules/shared/components/client/Carousel.tsx
@@ -181,7 +181,7 @@ export const CarouselContent = forwardRef<
   const { carouselRef } = useCarousel();
 
   return (
-    <div ref={carouselRef} className='overflow-hidden p-4 m-[-1rem]'>
+    <div ref={carouselRef} className='overflow-hidden p-4 -m-4'>
       <div ref={ref} className={cn('flex', className)} {...props} />
     </div>
   );
diff --git a/apps/frontend/src/modules/shared/components/client/Command.tsx b/apps/frontend/src/modules/shared/components/client/Command.tsx
index a8c20b3f..05134107 100644
--- a/apps/frontend/src/modules/shared/components/client/Command.tsx
+++ b/apps/frontend/src/modules/shared/components/client/Command.tsx
@@ -39,7 +39,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
@@ -82,7 +82,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
       className,
     )}
     {...props}
@@ -111,7 +111,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none hover:bg-blue-600 transition-colors duration-100 data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-hidden hover:bg-blue-600 transition-colors duration-100 data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
       className,
     )}
     {...props}
diff --git a/apps/frontend/src/modules/shared/components/client/CookieBanner.tsx b/apps/frontend/src/modules/shared/components/client/CookieBanner.tsx
index 527dae0e..f20ab2a4 100644
--- a/apps/frontend/src/modules/shared/components/client/CookieBanner.tsx
+++ b/apps/frontend/src/modules/shared/components/client/CookieBanner.tsx
@@ -25,11 +25,11 @@ export const CookieBanner = () => {
 
   return (
     <div className='fixed bottom-0 w-full min-h-32 z-10 flex justify-center bg-blue-900/80 border-t-blue-500/80 border-t-4 border-zinc-700 backdrop-blur-md py-4'>
-      <div className='relative w-[1280px] max-w-screen-xl px-6 sm:px-10'>
+      <div className='relative w-(--breakpoint-xl) max-w-(--breakpoint-xl) px-6 sm:px-10'>
         {/* Close button */}
         <button
           onClick={handleAccept}
-          className='absolute top-[-0.5rem] right-12 text-lg text-zinc-400 hover:text-zinc-300'
+          className='absolute -top-2 right-12 text-lg text-zinc-400 hover:text-zinc-300'
         >
           <FontAwesomeIcon icon={faClose} />
         </button>
diff --git a/apps/frontend/src/modules/shared/components/client/ErrorBox.tsx b/apps/frontend/src/modules/shared/components/client/ErrorBox.tsx
index b5d2619a..ac56739f 100644
--- a/apps/frontend/src/modules/shared/components/client/ErrorBox.tsx
+++ b/apps/frontend/src/modules/shared/components/client/ErrorBox.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export const ErrorBox = ({ message }: { message: string }) => {
   return (
-    <div className='outline outline-2 text-center text-balance outline-red-500 bg-red-800 p-2 rounded-lg'>
+    <div className='outline-2 text-center text-balance outline-red-500 bg-red-800 p-2 rounded-lg'>
       <FontAwesomeIcon icon={faWarning} className='mr-2 h-4' />
       {message}
     </div>
diff --git a/apps/frontend/src/modules/shared/components/client/FormElements.tsx b/apps/frontend/src/modules/shared/components/client/FormElements.tsx
index 614fcbbc..e96218ef 100644
--- a/apps/frontend/src/modules/shared/components/client/FormElements.tsx
+++ b/apps/frontend/src/modules/shared/components/client/FormElements.tsx
@@ -1,7 +1,7 @@
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as SliderPrimitive from '@radix-ui/react-slider';
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import Skeleton from 'react-loading-skeleton';
 import Markdown from 'react-markdown';
 
@@ -20,7 +20,7 @@ export const Label = forwardRef<
   const { id, label } = props;
 
   return (
-    <label htmlFor={id} ref={ref} className='text-sm text-zinc-300'>
+    <label htmlFor={id} ref={ref} className='text-zinc-300 text-sm'>
       {label}
     </label>
   );
@@ -49,7 +49,7 @@ export const Area = ({
       ) : (
         <div
           className={cn(
-            'flex justify-center w-full rounded-lg outline-none border-2 border-zinc-500 p-8 mb-4',
+            'flex justify-center w-full rounded-lg outline-hidden border-2 border-zinc-500 p-8 mb-4',
             className,
           )}
         >
@@ -231,21 +231,21 @@ export const Option = forwardRef<
 Option.displayName = 'Option';
 
 export const Slider = forwardRef<
-  ElementRef<typeof SliderPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
     className={cn(
-      'relative flex w-full touch-none select-none items-center',
+      'group relative flex w-full touch-none select-none items-center transition-colors',
       className,
     )}
     {...props}
   >
-    <SliderPrimitive.Track className='relative h-2 w-full grow overflow-hidden rounded-full bg-secondary'>
-      <SliderPrimitive.Range className='absolute h-full bg-primary' />
+    <SliderPrimitive.Track className='relative h-2 w-full grow overflow-hidden rounded-full bg-zinc-600'>
+      <SliderPrimitive.Range className='absolute h-full bg-blue-500 group-hover:bg-blue-600 group-active:bg-blue-400' />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className='block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50' />
+    <SliderPrimitive.Thumb className='block h-4 w-4 rounded-full bg-blue-500 group-hover:bg-blue-600 group-active:bg-blue-400 shadow focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50' />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
diff --git a/apps/frontend/src/modules/shared/components/client/Popover.tsx b/apps/frontend/src/modules/shared/components/client/Popover.tsx
index 7f15c4be..82437a7a 100644
--- a/apps/frontend/src/modules/shared/components/client/Popover.tsx
+++ b/apps/frontend/src/modules/shared/components/client/Popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
       )}
       {...props}
diff --git a/apps/frontend/src/modules/shared/components/client/ads/AdSlots.tsx b/apps/frontend/src/modules/shared/components/client/ads/AdSlots.tsx
index c55eee35..d626e2a1 100644
--- a/apps/frontend/src/modules/shared/components/client/ads/AdSlots.tsx
+++ b/apps/frontend/src/modules/shared/components/client/ads/AdSlots.tsx
@@ -14,7 +14,7 @@ const HideAdButton = ({
 }: {
   setIsHidden: (hidden: boolean) => void;
 }) => (
-  <div className='absolute w-0 h-0 top-full right-[0.75rem]'>
+  <div className='absolute w-0 h-0 top-full right-3'>
     <button
       className='h-6 w-3'
       onClick={() => {
@@ -208,7 +208,7 @@ export const InterSectionAdSlot = ({ className }: { className?: string }) => {
       adSlot='4046918224'
       adFormat='auto'
       fullWidthResponsive='true'
-      hiddenClassName='!hidden'
+      hiddenClassName='hidden!'
     />
   );
 };
diff --git a/apps/frontend/src/modules/shared/components/layout/DocumentLayout.tsx b/apps/frontend/src/modules/shared/components/layout/DocumentLayout.tsx
index bee4d004..3be7ce12 100644
--- a/apps/frontend/src/modules/shared/components/layout/DocumentLayout.tsx
+++ b/apps/frontend/src/modules/shared/components/layout/DocumentLayout.tsx
@@ -9,7 +9,7 @@ import { CopyrightFooter } from './CopyrightFooter';
 const DocumentLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <main className='sm:p-4 flex flex-col items-center justify-between'>
-      <div className='md:px-10 lg:px-20 py-8 mx-auto sm:my-[8rem] max-w-screen-lg sm:rounded-3xl bg-zinc-950/50 backdrop-blur-[10px]'>
+      <div className='md:px-10 lg:px-20 py-8 mx-auto sm:my-32 max-w-(--breakpoint-lg) sm:rounded-3xl bg-zinc-950/50 backdrop-blur-[10px]'>
         <BackButton className='px-8 text-zinc-500 hover:text-zinc-400 text-sm'>
           {'< Back'}
         </BackButton>
diff --git a/apps/frontend/src/modules/shared/components/layout/Footer.tsx b/apps/frontend/src/modules/shared/components/layout/Footer.tsx
index b7bb7eb7..899ae1d7 100644
--- a/apps/frontend/src/modules/shared/components/layout/Footer.tsx
+++ b/apps/frontend/src/modules/shared/components/layout/Footer.tsx
@@ -21,9 +21,9 @@ const FooterIcon = ({ icon, href }: { href: string; icon: IconDefinition }) => (
 export function Footer() {
   return (
     <footer className='flex items-center justify-center w-full h-fit min-h-12 py-4 z-10 border-t border-zinc-700 text-sm text-zinc-400'>
-      <div className='flex-1 flex flex-col sm:flex-row gap-2 justify-around items-center max-w-screen-xl px-6 sm:px-10'>
+      <div className='flex-1 flex flex-col sm:flex-row gap-2 justify-around items-center max-w-(--breakpoint-xl) px-6 sm:px-10'>
         {/* Social links */}
-        <div className='flex-grow flex flex-row gap-2'>
+        <div className='grow flex flex-row gap-2'>
           <FooterIcon icon={faTwitter} href='https://twitter.com/OpenNBS' />
           <FooterIcon icon={faYoutube} href='https://youtube.com/@OpenNBS' />
           <FooterIcon icon={faGithub} href='https://github.com/OpenNBS' />
@@ -39,7 +39,7 @@ export function Footer() {
           />
         </div>
 
-        <div className='flex-shrink'>
+        <div className='shrink'>
           <p>
             © {new Date().getFullYear()}{' '}
             <Link href='https://opennbs.org/' className='hover:underline'>
@@ -48,7 +48,7 @@ export function Footer() {
           </p>
         </div>
 
-        <div className='flex-grow flex justify-end'>
+        <div className='grow flex justify-end'>
           <Link href='/terms' className='hover:underline'>
             Terms
           </Link>
diff --git a/apps/frontend/src/modules/shared/components/layout/Header.tsx b/apps/frontend/src/modules/shared/components/layout/Header.tsx
index 1998f73a..c51710ed 100644
--- a/apps/frontend/src/modules/shared/components/layout/Header.tsx
+++ b/apps/frontend/src/modules/shared/components/layout/Header.tsx
@@ -31,9 +31,9 @@ export async function Header() {
   }
 
   return (
-    <header className='fixed w-[calc(100vw_-_16px)] h-14 flex flex-row justify-center items-center bg-zinc-900 border-b border-zinc-700 py-2 z-10'>
+    <header className='fixed w-[calc(100vw-16px)] h-14 flex flex-row justify-center items-center bg-zinc-900 border-b border-zinc-700 py-2 z-10'>
       {/* Navbar */}
-      <nav className='w-full flex flex-row justify-between items-center gap-8 md:gap-12 max-w-screen-xl px-6 sm:px-10 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden'>
+      <nav className='w-full flex flex-row justify-between items-center gap-8 md:gap-12 max-w-(--breakpoint-xl) px-6 sm:px-10 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden'>
         {/* Icon */}
         <div className='flex-0 flex justify-start lg:justify-center min-w-fit'>
           <Link href='/'>
diff --git a/apps/frontend/src/modules/shared/components/layout/NavbarLayout.tsx b/apps/frontend/src/modules/shared/components/layout/NavbarLayout.tsx
index e9e225f0..b72418f5 100644
--- a/apps/frontend/src/modules/shared/components/layout/NavbarLayout.tsx
+++ b/apps/frontend/src/modules/shared/components/layout/NavbarLayout.tsx
@@ -17,7 +17,7 @@ async function Layout({ children }: TNavbarLayoutProps) {
         {/* Main content */}
         <div className='flex flex-row justify-around w-full pt-24 pb-10'>
           <SideRailAdSlot />
-          <main className='flex-1 w-full max-w-screen-xl px-6 sm:px-10 mb-8'>
+          <main className='flex-1 w-full max-w-(--breakpoint-xl) px-6 sm:px-10 mb-8'>
             {children}
           </main>
           <SideRailAdSlot />
diff --git a/apps/frontend/src/modules/shared/components/layout/SearchBar.tsx b/apps/frontend/src/modules/shared/components/layout/SearchBar.tsx
index 73ebec00..e194d804 100644
--- a/apps/frontend/src/modules/shared/components/layout/SearchBar.tsx
+++ b/apps/frontend/src/modules/shared/components/layout/SearchBar.tsx
@@ -40,7 +40,7 @@ export function SearchBar() {
         autoCorrect='off'
         autoCapitalize='none'
         spellCheck={false}
-        className='flex-1 px-3 py-2 pr-1 bg-transparent border border-zinc-700 rounded-l-full text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-blue-500'
+        className='flex-1 px-3 py-2 pr-1 bg-transparent border border-zinc-700 rounded-l-full text-sm text-white placeholder-zinc-500 focus:outline-hidden focus:border-blue-500'
       />
       <button
         type='submit'
diff --git a/apps/frontend/src/modules/shared/components/layout/SongThumbnail.tsx b/apps/frontend/src/modules/shared/components/layout/SongThumbnail.tsx
index fea41dfb..fbb116f0 100644
--- a/apps/frontend/src/modules/shared/components/layout/SongThumbnail.tsx
+++ b/apps/frontend/src/modules/shared/components/layout/SongThumbnail.tsx
@@ -29,7 +29,7 @@ const SongThumbnail = ({
     <Image
       unoptimized={isLocalhost} // Disable optimization for localhost to avoid private IP errors
       src={src}
-      className='w-full h-full rounded-lg aspect-[5/3] object-cover'
+      className='w-full h-full rounded-lg aspect-5/3 object-cover'
       width={640}
       height={384}
       alt=''
diff --git a/apps/frontend/src/modules/shared/components/layout/UserMenu.tsx b/apps/frontend/src/modules/shared/components/layout/UserMenu.tsx
index d7adf1fe..3f17ffc3 100644
--- a/apps/frontend/src/modules/shared/components/layout/UserMenu.tsx
+++ b/apps/frontend/src/modules/shared/components/layout/UserMenu.tsx
@@ -124,7 +124,7 @@ export const UserMenu = ({ userData }: { userData: LoggedUserData }) => {
                 className='rounded-full'
               />
             </div>
-            <div className='flex-shrink min-w-0 flex flex-col leading-tight'>
+            <div className='shrink min-w-0 flex flex-col leading-tight'>
               <div className='flex justify-start items-center gap-2'>
                 {!isEditingUsername ? (
                   <>
diff --git a/apps/frontend/src/modules/shared/components/layout/UserMenuLink.tsx b/apps/frontend/src/modules/shared/components/layout/UserMenuLink.tsx
index 4a248ad6..7062cdd1 100644
--- a/apps/frontend/src/modules/shared/components/layout/UserMenuLink.tsx
+++ b/apps/frontend/src/modules/shared/components/layout/UserMenuLink.tsx
@@ -35,7 +35,7 @@ const UserMenuLink = ({
         <div className='h-8 w-8 flex items-center justify-center'>
           <FontAwesomeIcon icon={icon} size='lg' className={textColor} />
         </div>
-        <p className={`flex-grow text-left ${textColor}`}>{label}</p>
+        <p className={`grow text-left ${textColor}`}>{label}</p>
         {external && (
           <div className='h-5 w-5 text-zinc-500 flex items-center'>
             <FontAwesomeIcon
diff --git a/apps/frontend/src/modules/shared/components/layout/popover.tsx b/apps/frontend/src/modules/shared/components/layout/popover.tsx
index 4e334bfd..504b782e 100644
--- a/apps/frontend/src/modules/shared/components/layout/popover.tsx
+++ b/apps/frontend/src/modules/shared/components/layout/popover.tsx
@@ -21,7 +21,7 @@ export const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md p-4 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 w-72 rounded-md p-4 outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
       )}
       {...props}
diff --git a/apps/frontend/src/modules/shared/components/ui/badge.tsx b/apps/frontend/src/modules/shared/components/ui/badge.tsx
index 82b6841c..9d7d46f4 100644
--- a/apps/frontend/src/modules/shared/components/ui/badge.tsx
+++ b/apps/frontend/src/modules/shared/components/ui/badge.tsx
@@ -1,10 +1,13 @@
+// TODO: this component uses bg-primary etc. instead of bg-blue-500 as the rest of the project.
+// We must either standardize the color scheme (preferably) or make this component use the same color scheme.
+
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 import { cn } from '@web/lib/utils';
 
 const badgeVariants = cva(
-  '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',
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
diff --git a/apps/frontend/src/modules/shared/components/ui/command.tsx b/apps/frontend/src/modules/shared/components/ui/command.tsx
index e5743a60..f2026a0c 100644
--- a/apps/frontend/src/modules/shared/components/ui/command.tsx
+++ b/apps/frontend/src/modules/shared/components/ui/command.tsx
@@ -1,3 +1,5 @@
+// TODO: use FontAwesome icons instead of lucide-react
+
 'use client';
 
 import { type DialogProps } from '@radix-ui/react-dialog';
@@ -30,7 +32,7 @@ const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className='overflow-hidden p-0'>
-        <Command className='[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
+        <Command className='**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
           {children}
         </Command>
       </DialogContent>
@@ -47,7 +49,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
@@ -90,7 +92,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+      'overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
       className,
     )}
     {...props}
@@ -118,7 +120,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'relative flex cursor-default gap-2 select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
       className,
     )}
     {...props}
diff --git a/apps/frontend/src/modules/shared/components/ui/dialog.tsx b/apps/frontend/src/modules/shared/components/ui/dialog.tsx
index 5ec5215a..44f6dbf0 100644
--- a/apps/frontend/src/modules/shared/components/ui/dialog.tsx
+++ b/apps/frontend/src/modules/shared/components/ui/dialog.tsx
@@ -1,3 +1,5 @@
+// TODO: use FontAwesome icons instead of lucide-react
+
 'use client';
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
diff --git a/apps/frontend/src/modules/shared/components/ui/dualRangeSlider.tsx b/apps/frontend/src/modules/shared/components/ui/dualRangeSlider.tsx
index 8b900555..a5bfd164 100644
--- a/apps/frontend/src/modules/shared/components/ui/dualRangeSlider.tsx
+++ b/apps/frontend/src/modules/shared/components/ui/dualRangeSlider.tsx
@@ -1,3 +1,6 @@
+// TODO: this component uses bg-primary etc. instead of bg-blue-500 as the rest of the project.
+// We must either standardize the color scheme (preferably) or make this component use the same color scheme.
+
 'use client';
 
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -33,7 +36,7 @@ const DualRangeSlider = React.forwardRef<
       </SliderPrimitive.Track>
       {initialValue.map((value, index) => (
         <React.Fragment key={index}>
-          <SliderPrimitive.Thumb className='relative block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'>
+          <SliderPrimitive.Thumb className='relative block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50'>
             {label && (
               <span
                 className={cn(
diff --git a/apps/frontend/src/modules/shared/components/ui/multipleSelectorProps.tsx b/apps/frontend/src/modules/shared/components/ui/multipleSelectorProps.tsx
index de5740a2..919d1881 100644
--- a/apps/frontend/src/modules/shared/components/ui/multipleSelectorProps.tsx
+++ b/apps/frontend/src/modules/shared/components/ui/multipleSelectorProps.tsx
@@ -1,3 +1,5 @@
+// TODO: use FontAwesome icons instead of lucide-react
+
 'use client';
 
 import { Command as CommandPrimitive, useCommandState } from 'cmdk';
@@ -486,7 +488,7 @@ const MultipleSelector = React.forwardRef<
                   <button
                     type='button'
                     className={cn(
-                      'ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2',
+                      'ml-1 rounded-full outline-hidden ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2',
                       (disabled || option.fixed) && 'hidden',
                     )}
                     onKeyDown={(e) => {
@@ -531,7 +533,7 @@ const MultipleSelector = React.forwardRef<
                   : placeholder
               }
               className={cn(
-                'flex-1 self-baseline bg-transparent outline-none placeholder:text-muted-foreground',
+                'flex-1 self-baseline bg-transparent outline-hidden placeholder:text-muted-foreground',
                 {
                   'w-full': hidePlaceholderWhenSelected,
                   'ml-1': selected.length !== 0,
@@ -571,7 +573,7 @@ const MultipleSelector = React.forwardRef<
         <div className='relative'>
           {open && (
             <CommandList
-              className='absolute top-1 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in'
+              className='absolute top-1 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-hidden animate-in'
               onMouseLeave={() => {
                 setOnScrollbar(false);
               }}
diff --git a/apps/frontend/src/modules/shared/components/ui/select.tsx b/apps/frontend/src/modules/shared/components/ui/select.tsx
index 52f6abef..b7678c53 100644
--- a/apps/frontend/src/modules/shared/components/ui/select.tsx
+++ b/apps/frontend/src/modules/shared/components/ui/select.tsx
@@ -1,3 +1,5 @@
+// TODO: use FontAwesome icons instead of lucide-react
+
 'use client';
 
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -19,7 +21,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
     )}
     {...props}
@@ -75,7 +77,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]',
+        'relative z-50 max-h-(--radix-select-content-available-height) min-w-32 overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-select-content-transform-origin)',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
@@ -88,7 +90,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           'p-1',
           position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+            'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)',
         )}
       >
         {children}
@@ -118,7 +120,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
       className,
     )}
     {...props}
diff --git a/apps/frontend/src/modules/shared/components/ui/slider.tsx b/apps/frontend/src/modules/shared/components/ui/slider.tsx
index 48804c64..fd178577 100644
--- a/apps/frontend/src/modules/shared/components/ui/slider.tsx
+++ b/apps/frontend/src/modules/shared/components/ui/slider.tsx
@@ -12,15 +12,15 @@ const Slider = React.forwardRef<
   <SliderPrimitive.Root
     ref={ref}
     className={cn(
-      'relative flex w-full touch-none select-none items-center',
+      'group relative flex w-full touch-none select-none items-center transition-colors',
       className,
     )}
     {...props}
   >
-    <SliderPrimitive.Track className='relative h-1.5 w-full grow overflow-hidden rounded-full bg-zinc-700'>
-      <SliderPrimitive.Range className='absolute h-full bg-zinc-500' />
+    <SliderPrimitive.Track className='relative h-2 w-full grow overflow-hidden rounded-full bg-zinc-600'>
+      <SliderPrimitive.Range className='absolute h-full bg-blue-500 group-hover:bg-blue-600 group-active:bg-blue-400' />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className='block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50' />
+    <SliderPrimitive.Thumb className='block h-4 w-4 rounded-full bg-blue-500 group-hover:bg-blue-600 group-active:bg-blue-400 shadow focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50' />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
diff --git a/apps/frontend/src/modules/song-search/SearchSongPage.tsx b/apps/frontend/src/modules/song-search/SearchSongPage.tsx
index 67919c1a..c9811060 100644
--- a/apps/frontend/src/modules/song-search/SearchSongPage.tsx
+++ b/apps/frontend/src/modules/song-search/SearchSongPage.tsx
@@ -320,7 +320,7 @@ const SearchFilters = ({ filters, onFilterChange }: SearchFiltersProps) => {
             options={Object.entries(UPLOAD_CONSTANTS.categories).map(
               ([key, value]) => ({ value: key, label: value }),
             )}
-            className='block w-full h-fit rounded-lg bg-zinc-900 border-2 border-zinc-600 hover:border-zinc-500 focus:border-blue-500 focus:outline-none p-2 transition-colors'
+            className='block w-full h-fit rounded-lg bg-zinc-900 border-2 border-zinc-600 hover:border-zinc-500 focus:border-blue-500 focus:outline-hidden p-2 transition-colors'
           />
         </div>
 
@@ -341,7 +341,7 @@ const SearchFilters = ({ filters, onFilterChange }: SearchFiltersProps) => {
               value: value,
               label: key,
             }))}
-            className='block w-full h-fit rounded-lg bg-zinc-900 border-2 border-zinc-600 hover:border-zinc-500 focus:border-blue-500 focus:outline-none p-2 transition-colors'
+            className='block w-full h-fit rounded-lg bg-zinc-900 border-2 border-zinc-600 hover:border-zinc-500 focus:border-blue-500 focus:outline-hidden p-2 transition-colors'
           />
         </div>
 
@@ -362,7 +362,7 @@ const SearchFilters = ({ filters, onFilterChange }: SearchFiltersProps) => {
               value: value,
               label: key,
             }))}
-            className='block w-full h-fit rounded-lg bg-zinc-900 border-2 border-zinc-600 hover:border-zinc-500 focus:border-blue-500 focus:outline-none p-2 transition-colors'
+            className='block w-full h-fit rounded-lg bg-zinc-900 border-2 border-zinc-600 hover:border-zinc-500 focus:border-blue-500 focus:outline-hidden p-2 transition-colors'
           />
         </div>
       </div>
@@ -562,7 +562,7 @@ export const SearchSongPage = () => {
                   value={sort}
                   onChange={(e) => handleSortChange(e.target.value)}
                   disabled={loading}
-                  className='h-10 w-48 rounded-md bg-zinc-900 border-2 border-zinc-600 hover:enabled:border-zinc-500 disabled:opacity-50 focus:border-blue-500 focus:outline-none px-1.5 text-sm transition-colors'
+                  className='h-10 w-48 rounded-md bg-zinc-900 border-2 border-zinc-600 hover:enabled:border-zinc-500 disabled:opacity-50 focus:border-blue-500 focus:outline-hidden px-1.5 text-sm transition-colors'
                 >
                   <option value={SongSortType.RECENT}>Recent</option>
                   <option value={SongSortType.PLAY_COUNT}>Popular</option>
diff --git a/apps/frontend/src/modules/song-upload/components/client/UploadCompleteModal.tsx b/apps/frontend/src/modules/song-upload/components/client/UploadCompleteModal.tsx
index 66e72bbb..f89f755f 100644
--- a/apps/frontend/src/modules/song-upload/components/client/UploadCompleteModal.tsx
+++ b/apps/frontend/src/modules/song-upload/components/client/UploadCompleteModal.tsx
@@ -64,7 +64,7 @@ export default function UploadCompleteModal({
         <button
           type='button'
           disabled={isCopied}
-          className='rounded-md h-full px-2 w-[4.25rem] text-nowrap bg-zinc-700 text-white enabled:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-default disabled:text-xs'
+          className='rounded-md h-full px-2 w-17 text-nowrap bg-zinc-700 text-white enabled:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-default disabled:text-xs'
           onClick={handleCopy()}
         >
           {isCopied ? 'Copied!' : 'Copy'}
diff --git a/apps/frontend/src/modules/song/components/SongDetails.tsx b/apps/frontend/src/modules/song/components/SongDetails.tsx
index 8b46defc..5059f10b 100644
--- a/apps/frontend/src/modules/song/components/SongDetails.tsx
+++ b/apps/frontend/src/modules/song/components/SongDetails.tsx
@@ -22,7 +22,7 @@ const SongDetailsRow = ({ children }: { children: React.ReactNode }) => {
 
 const SongDetailsCell = ({ children }: { children: React.ReactNode }) => {
   return (
-    <td className='first:w-[40%] last:max-w-0 p-2 py-[10px] break-words align-top first:text-zinc-400 first:text-right last:font-bold'>
+    <td className='first:w-[40%] last:max-w-0 p-2 py-[10px] wrap-break-word align-top first:text-zinc-400 first:text-right last:font-bold'>
       {children}
     </td>
   );
diff --git a/apps/frontend/src/modules/song/components/SongPage.tsx b/apps/frontend/src/modules/song/components/SongPage.tsx
index ec4168f7..eca3878c 100644
--- a/apps/frontend/src/modules/song/components/SongPage.tsx
+++ b/apps/frontend/src/modules/song/components/SongPage.tsx
@@ -109,7 +109,7 @@ export async function SongPage({ id }: { id: string }) {
           <div className='flex flex-row flex-wrap justify-start items-center gap-8 w-full'>
             <UploaderBadge user={song.uploader} />
             {/* <FollowButton /> */}
-            <div className='flex-grow'></div>
+            <div className='grow'></div>
             <div className='flex flex-row gap-4 overflow-x-auto'>
               {/* <LikeButton /> */}
               {song.visibility !== 'private' && (
diff --git a/apps/frontend/src/modules/song/components/client/DownloadSongModal.tsx b/apps/frontend/src/modules/song/components/client/DownloadSongModal.tsx
index b1b75efa..c6533a9b 100644
--- a/apps/frontend/src/modules/song/components/client/DownloadSongModal.tsx
+++ b/apps/frontend/src/modules/song/components/client/DownloadSongModal.tsx
@@ -57,7 +57,7 @@ export default function DownloadSongModal({
         <button
           type='button'
           disabled={isCopied}
-          className='rounded-md h-8 px-2 w-[4.25rem] text-nowrap bg-zinc-700 text-white enabled:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-default disabled:text-xs'
+          className='rounded-md h-8 px-2 w-17 text-nowrap bg-zinc-700 text-white enabled:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-default disabled:text-xs'
           onClick={handleCopy()}
         >
           {isCopied ? 'Copied!' : 'Copy'}
diff --git a/apps/frontend/src/modules/song/components/client/FileDisplay.tsx b/apps/frontend/src/modules/song/components/client/FileDisplay.tsx
index dc716444..908bd25a 100644
--- a/apps/frontend/src/modules/song/components/client/FileDisplay.tsx
+++ b/apps/frontend/src/modules/song/components/client/FileDisplay.tsx
@@ -22,9 +22,9 @@ export const FileDisplay = ({
       className,
     )}
   >
-    <div className='flex-shrink min-w-0 max-w-96 flex flex-row gap-2 items-center'>
+    <div className='shrink min-w-0 max-w-96 flex flex-row gap-2 items-center'>
       <FontAwesomeIcon icon={faFile} size='lg' />
-      <p className='text-md flex-shrink min-w-0 text-wrap line-clamp-2 leading-tight'>
+      <p className='text-md shrink min-w-0 text-wrap line-clamp-2 leading-tight'>
         {fileName}
       </p>
     </div>
diff --git a/apps/frontend/src/modules/song/components/client/InstrumentPicker.tsx b/apps/frontend/src/modules/song/components/client/InstrumentPicker.tsx
index 863b4fe8..d22e1e9f 100644
--- a/apps/frontend/src/modules/song/components/client/InstrumentPicker.tsx
+++ b/apps/frontend/src/modules/song/components/client/InstrumentPicker.tsx
@@ -105,7 +105,7 @@ const InstrumentTable = ({ type }: { type: 'upload' | 'edit' }) => {
   return (
     <div className='flex flex-col w-full'>
       {/* Header */}
-      <div className='flex-shrink grid grid-cols-8'>
+      <div className='shrink grid grid-cols-8'>
         <InstrumentTableHeader className='text-right'>#</InstrumentTableHeader>
         <InstrumentTableHeader className='col-span-3'>
           Instrument
@@ -119,7 +119,7 @@ const InstrumentTable = ({ type }: { type: 'upload' | 'edit' }) => {
       </div>
 
       {/* Instruments */}
-      <div className='overflow-y-scroll max-h-72 flex flex-col mr-[-1rem]'>
+      <div className='overflow-y-scroll max-h-72 flex flex-col -mr-4'>
         {song?.instruments.map((instrument, i) => (
           <InstrumentTableRow
             key={i}
diff --git a/apps/frontend/src/modules/song/components/client/ShareModal.tsx b/apps/frontend/src/modules/song/components/client/ShareModal.tsx
index 057d80de..664be7cd 100644
--- a/apps/frontend/src/modules/song/components/client/ShareModal.tsx
+++ b/apps/frontend/src/modules/song/components/client/ShareModal.tsx
@@ -55,7 +55,7 @@ export default function ShareModal({
         <button
           type='button'
           disabled={isCopied}
-          className='rounded-md h-full px-2 w-[4.25rem] text-nowrap bg-zinc-700 text-white enabled:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-default disabled:text-xs'
+          className='rounded-md h-full px-2 w-17 text-nowrap bg-zinc-700 text-white enabled:hover:bg-zinc-600 disabled:opacity-50 disabled:cursor-default disabled:text-xs'
           onClick={handleCopy()}
         >
           {isCopied ? 'Copied!' : 'Copy'}
diff --git a/apps/frontend/src/modules/song/components/client/SongCanvas.tsx b/apps/frontend/src/modules/song/components/client/SongCanvas.tsx
index 07e34e6d..cac049d6 100644
--- a/apps/frontend/src/modules/song/components/client/SongCanvas.tsx
+++ b/apps/frontend/src/modules/song/components/client/SongCanvas.tsx
@@ -121,7 +121,7 @@ export const SongCanvas = ({ song }: { song: SongViewDtoType }) => {
     <div
       ref={canvasContainerRef}
       id='song-renderer-container'
-      className='bg-zinc-800 aspect-[5/3] rounded-xl'
+      className='bg-zinc-800 aspect-5/3 rounded-xl'
     >
       <canvas
         id='song-renderer'
diff --git a/apps/frontend/src/modules/song/components/client/SongSelector.tsx b/apps/frontend/src/modules/song/components/client/SongSelector.tsx
index f8f23af5..20b5d946 100644
--- a/apps/frontend/src/modules/song/components/client/SongSelector.tsx
+++ b/apps/frontend/src/modules/song/components/client/SongSelector.tsx
@@ -55,12 +55,12 @@ export const SongSelector = () => {
           icon={faFile}
           className={`${
             isDragActive ? 'text-blue-400 scale-105' : 'text-zinc-600'
-          } transition-all duration-250 ease-in-out !h-20 text-7xl`}
+          } transition-all duration-250 ease-in-out h-20! text-7xl`}
         />
 
         <FontAwesomeIcon
           icon={faMusic}
-          className={`absolute translate-y-9 !h-8 !w-8 text-zinc-900 ${
+          className={`absolute translate-y-9 h-8! w-8! text-zinc-900 ${
             isDragActive ? 'scale-105' : ''
           } transition-all duration-250 ease-in-out`}
         />
diff --git a/apps/frontend/src/modules/song/components/client/SongThumbnailInput.tsx b/apps/frontend/src/modules/song/components/client/SongThumbnailInput.tsx
index 40acb09b..868b7b03 100644
--- a/apps/frontend/src/modules/song/components/client/SongThumbnailInput.tsx
+++ b/apps/frontend/src/modules/song/components/client/SongThumbnailInput.tsx
@@ -3,12 +3,12 @@ import { UseFormReturn } from 'react-hook-form';
 
 import { BG_COLORS, THUMBNAIL_CONSTANTS } from '@nbw/config';
 import { cn } from '@web/lib/utils';
+import { Slider } from '@web/modules/shared/components/client/FormElements';
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@web/modules/shared/components/tooltip';
-import { Slider } from '@web/modules/shared/components/ui/slider';
 
 import { useSongProvider } from './context/Song.context';
 import { EditSongFormInput, UploadSongFormInput } from './SongForm.zod';
@@ -127,7 +127,7 @@ const ColorButton: React.FC<ColorButtonProps> = ({
         type='button'
         className={cn(
           'w-6 h-6 rounded-full flex-none border-2 border-zinc-200/30 disabled:opacity-30',
-          active && 'outline outline-2 outline-zinc-200',
+          active && 'outline-2 outline-zinc-200',
         )}
         style={{ backgroundColor: color }}
         disabled={disabled}
diff --git a/apps/frontend/src/modules/song/components/client/ThumbnailRenderer.tsx b/apps/frontend/src/modules/song/components/client/ThumbnailRenderer.tsx
index 6cd0da89..c7d77afa 100644
--- a/apps/frontend/src/modules/song/components/client/ThumbnailRenderer.tsx
+++ b/apps/frontend/src/modules/song/components/client/ThumbnailRenderer.tsx
@@ -82,10 +82,7 @@ export const ThumbnailRendererCanvas = ({
 
   return (
     <div className='relative w-full'>
-      <canvas
-        ref={canvasRef}
-        className='w-full h-full aspect-[5/3] rounded-lg'
-      />
+      <canvas ref={canvasRef} className='w-full h-full aspect-5/3 rounded-lg' />
       {loading && (
         <div className='absolute top-0 flex items-center justify-center bg-black w-full h-full rounded-lg opacity-80'>
           Loading...
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.js
deleted file mode 100644
index 1094916c..00000000
--- a/apps/frontend/tailwind.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ['./src/**/*.{ts,tsx}'],
-  theme: {
-    extend: {
-      transitionTimingFunction: {
-        'out-back': 'cubic-bezier(0.34, 1.56, 0.51, 1.2)',
-      },
-    },
-  },
-  plugins: [require('@shrutibalasa/tailwind-grid-auto-fit')],
-};
diff --git a/bun.lock b/bun.lock
index c5cf1237..20afc225 100644
--- a/bun.lock
+++ b/bun.lock
@@ -157,7 +157,7 @@
         "schema-dts": "^1.1.5",
         "sharp": "^0.34.5",
         "tailwind-merge": "^3.4.0",
-        "tailwindcss": "4.1.17",
+        "tailwindcss": "^4.1.18",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.9.3",
         "zod": "^4.1.13",
@@ -165,8 +165,7 @@
         "zustand": "^5.0.9",
       },
       "devDependencies": {
-        "@shrutibalasa/tailwind-grid-auto-fit": "^1.1.0",
-        "@tailwindcss/postcss": "^4.1.17",
+        "@tailwindcss/postcss": "^4.1.18",
         "@types/mdx": "^2.0.13",
         "@types/react-modal": "^3.16.3",
         "eslint-config-next": "16.0.8",
@@ -844,8 +843,6 @@
 
     "@selderee/plugin-htmlparser2": ["@selderee/plugin-htmlparser2@0.11.0", "", { "dependencies": { "domhandler": "^5.0.3", "selderee": "^0.11.0" } }, "sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ=="],
 
-    "@shrutibalasa/tailwind-grid-auto-fit": ["@shrutibalasa/tailwind-grid-auto-fit@1.1.0", "", {}, "sha512-sh/Vmdz/xTVziUF9ZYDb5YpECApdK85KXSRIJY58GzmdUuum5QBE3jqDeNMjICEVaVOSrOnp+gqUWx8A9dmZjA=="],
-
     "@sinclair/typebox": ["@sinclair/typebox@0.34.41", "", {}, "sha512-6gS8pZzSXdyRHTIqoqSVknxolr1kzfy4/CeDnrzsVz8TTIWUbOBr6gnzOmTYJ3eXQNh4IYHIGi5aIL7sOZ2G/g=="],
 
     "@sinonjs/commons": ["@sinonjs/commons@3.0.1", "", { "dependencies": { "type-detect": "4.0.8" } }, "sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ=="],
@@ -960,35 +957,35 @@
 
     "@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
 
-    "@tailwindcss/node": ["@tailwindcss/node@4.1.17", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.17" } }, "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg=="],
+    "@tailwindcss/node": ["@tailwindcss/node@4.1.18", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "enhanced-resolve": "^5.18.3", "jiti": "^2.6.1", "lightningcss": "1.30.2", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.1.18" } }, "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ=="],
 
-    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.17", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.17", "@tailwindcss/oxide-darwin-arm64": "4.1.17", "@tailwindcss/oxide-darwin-x64": "4.1.17", "@tailwindcss/oxide-freebsd-x64": "4.1.17", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17", "@tailwindcss/oxide-linux-arm64-musl": "4.1.17", "@tailwindcss/oxide-linux-x64-gnu": "4.1.17", "@tailwindcss/oxide-linux-x64-musl": "4.1.17", "@tailwindcss/oxide-wasm32-wasi": "4.1.17", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17", "@tailwindcss/oxide-win32-x64-msvc": "4.1.17" } }, "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA=="],
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.1.18", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.1.18", "@tailwindcss/oxide-darwin-arm64": "4.1.18", "@tailwindcss/oxide-darwin-x64": "4.1.18", "@tailwindcss/oxide-freebsd-x64": "4.1.18", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18", "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18", "@tailwindcss/oxide-linux-arm64-musl": "4.1.18", "@tailwindcss/oxide-linux-x64-gnu": "4.1.18", "@tailwindcss/oxide-linux-x64-musl": "4.1.18", "@tailwindcss/oxide-wasm32-wasi": "4.1.18", "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18", "@tailwindcss/oxide-win32-x64-msvc": "4.1.18" } }, "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A=="],
 
-    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.17", "", { "os": "android", "cpu": "arm64" }, "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ=="],
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.1.18", "", { "os": "android", "cpu": "arm64" }, "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q=="],
 
-    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.17", "", { "os": "darwin", "cpu": "arm64" }, "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg=="],
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.1.18", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A=="],
 
-    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.17", "", { "os": "darwin", "cpu": "x64" }, "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog=="],
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.1.18", "", { "os": "darwin", "cpu": "x64" }, "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw=="],
 
-    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.17", "", { "os": "freebsd", "cpu": "x64" }, "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g=="],
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.1.18", "", { "os": "freebsd", "cpu": "x64" }, "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA=="],
 
-    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17", "", { "os": "linux", "cpu": "arm" }, "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ=="],
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18", "", { "os": "linux", "cpu": "arm" }, "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA=="],
 
-    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.17", "", { "os": "linux", "cpu": "arm64" }, "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ=="],
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.1.18", "", { "os": "linux", "cpu": "arm64" }, "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw=="],
 
-    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.17", "", { "os": "linux", "cpu": "arm64" }, "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg=="],
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.1.18", "", { "os": "linux", "cpu": "arm64" }, "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg=="],
 
-    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.17", "", { "os": "linux", "cpu": "x64" }, "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ=="],
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.1.18", "", { "os": "linux", "cpu": "x64" }, "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g=="],
 
-    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.17", "", { "os": "linux", "cpu": "x64" }, "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ=="],
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.1.18", "", { "os": "linux", "cpu": "x64" }, "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ=="],
 
-    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.17", "", { "dependencies": { "@emnapi/core": "^1.6.0", "@emnapi/runtime": "^1.6.0", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.0.7", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.4.0" }, "cpu": "none" }, "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg=="],
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.1.18", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.0", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.4.0" }, "cpu": "none" }, "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA=="],
 
-    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.17", "", { "os": "win32", "cpu": "arm64" }, "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A=="],
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.1.18", "", { "os": "win32", "cpu": "arm64" }, "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA=="],
 
-    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.17", "", { "os": "win32", "cpu": "x64" }, "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw=="],
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.1.18", "", { "os": "win32", "cpu": "x64" }, "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q=="],
 
-    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.17", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.17", "@tailwindcss/oxide": "4.1.17", "postcss": "^8.4.41", "tailwindcss": "4.1.17" } }, "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw=="],
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.1.18", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.18", "@tailwindcss/oxide": "4.1.18", "postcss": "^8.4.41", "tailwindcss": "4.1.18" } }, "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g=="],
 
     "@tanstack/react-virtual": ["@tanstack/react-virtual@3.13.12", "", { "dependencies": { "@tanstack/virtual-core": "3.13.12" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA=="],
 
@@ -2976,7 +2973,7 @@
 
     "tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
 
-    "tailwindcss": ["tailwindcss@4.1.17", "", {}, "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q=="],
+    "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],
 
     "tailwindcss-animate": ["tailwindcss-animate@1.0.7", "", { "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders" } }, "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA=="],
 
@@ -3316,17 +3313,17 @@
 
     "@nbw/backend/@types/node": ["@types/node@24.10.2", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-WOhQTZ4G8xZ1tjJTvKOpyEVSGgOTvJAfDK3FNFgELyaTpzhdgHVHeqW8V+UJvzF5BT+/B54T/1S2K6gd9c7bbA=="],
 
-    "@nbw/config/@types/bun": ["@types/bun@1.3.5", "", { "dependencies": { "bun-types": "1.3.5" } }, "sha512-RnygCqNrd3srIPEWBd5LFeUYG7plCoH2Yw9WaZGyNmdTEei+gWaHqydbaIRkIkcbXwhBT94q78QljxN0Sk838w=="],
+    "@nbw/config/@types/bun": ["@types/bun@1.3.6", "", { "dependencies": { "bun-types": "1.3.6" } }, "sha512-uWCv6FO/8LcpREhenN1d1b6fcspAB+cefwD7uti8C8VffIv0Um08TKMn98FynpTiU38+y2dUO55T11NgDt8VAA=="],
 
-    "@nbw/database/@types/bun": ["@types/bun@1.3.5", "", { "dependencies": { "bun-types": "1.3.5" } }, "sha512-RnygCqNrd3srIPEWBd5LFeUYG7plCoH2Yw9WaZGyNmdTEei+gWaHqydbaIRkIkcbXwhBT94q78QljxN0Sk838w=="],
+    "@nbw/database/@types/bun": ["@types/bun@1.3.6", "", { "dependencies": { "bun-types": "1.3.6" } }, "sha512-uWCv6FO/8LcpREhenN1d1b6fcspAB+cefwD7uti8C8VffIv0Um08TKMn98FynpTiU38+y2dUO55T11NgDt8VAA=="],
 
     "@nbw/frontend/@types/node": ["@types/node@24.10.2", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-WOhQTZ4G8xZ1tjJTvKOpyEVSGgOTvJAfDK3FNFgELyaTpzhdgHVHeqW8V+UJvzF5BT+/B54T/1S2K6gd9c7bbA=="],
 
-    "@nbw/song/@types/bun": ["@types/bun@1.3.5", "", { "dependencies": { "bun-types": "1.3.5" } }, "sha512-RnygCqNrd3srIPEWBd5LFeUYG7plCoH2Yw9WaZGyNmdTEei+gWaHqydbaIRkIkcbXwhBT94q78QljxN0Sk838w=="],
+    "@nbw/song/@types/bun": ["@types/bun@1.3.6", "", { "dependencies": { "bun-types": "1.3.6" } }, "sha512-uWCv6FO/8LcpREhenN1d1b6fcspAB+cefwD7uti8C8VffIv0Um08TKMn98FynpTiU38+y2dUO55T11NgDt8VAA=="],
 
     "@nbw/sounds/@types/bun": ["@types/bun@1.3.5", "", { "dependencies": { "bun-types": "1.3.5" } }, "sha512-RnygCqNrd3srIPEWBd5LFeUYG7plCoH2Yw9WaZGyNmdTEei+gWaHqydbaIRkIkcbXwhBT94q78QljxN0Sk838w=="],
 
-    "@nbw/thumbnail/@types/bun": ["@types/bun@1.3.5", "", { "dependencies": { "bun-types": "1.3.5" } }, "sha512-RnygCqNrd3srIPEWBd5LFeUYG7plCoH2Yw9WaZGyNmdTEei+gWaHqydbaIRkIkcbXwhBT94q78QljxN0Sk838w=="],
+    "@nbw/thumbnail/@types/bun": ["@types/bun@1.3.6", "", { "dependencies": { "bun-types": "1.3.6" } }, "sha512-uWCv6FO/8LcpREhenN1d1b6fcspAB+cefwD7uti8C8VffIv0Um08TKMn98FynpTiU38+y2dUO55T11NgDt8VAA=="],
 
     "@nbw/thumbnail/jest": ["jest@29.7.0", "", { "dependencies": { "@jest/core": "^29.7.0", "@jest/types": "^29.6.3", "import-local": "^3.0.2", "jest-cli": "^29.7.0" }, "peerDependencies": { "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0" }, "optionalPeers": ["node-notifier"], "bin": { "jest": "bin/jest.js" } }, "sha512-NIy3oAFp9shda19hy4HK0HRTWKtPJmGdnvywu01nOqNC2vZg+Z+fvJDxpMQA88eb2I9EcafcdjYgsDthnYTvGw=="],
 
@@ -4076,17 +4073,17 @@
 
     "@nbw/backend/@types/node/undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
 
-    "@nbw/config/@types/bun/bun-types": ["bun-types@1.3.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-inmAYe2PFLs0SUbFOWSVD24sg1jFlMPxOjOSSCYqUgn4Hsc3rDc7dFvfVYjFPNHtov6kgUeulV4SxbuIV/stPw=="],
+    "@nbw/config/@types/bun/bun-types": ["bun-types@1.3.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-OlFwHcnNV99r//9v5IIOgQ9Uk37gZqrNMCcqEaExdkVq3Avwqok1bJFmvGMCkCE0FqzdY8VMOZpfpR3lwI+CsQ=="],
 
-    "@nbw/database/@types/bun/bun-types": ["bun-types@1.3.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-inmAYe2PFLs0SUbFOWSVD24sg1jFlMPxOjOSSCYqUgn4Hsc3rDc7dFvfVYjFPNHtov6kgUeulV4SxbuIV/stPw=="],
+    "@nbw/database/@types/bun/bun-types": ["bun-types@1.3.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-OlFwHcnNV99r//9v5IIOgQ9Uk37gZqrNMCcqEaExdkVq3Avwqok1bJFmvGMCkCE0FqzdY8VMOZpfpR3lwI+CsQ=="],
 
     "@nbw/frontend/@types/node/undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
 
-    "@nbw/song/@types/bun/bun-types": ["bun-types@1.3.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-inmAYe2PFLs0SUbFOWSVD24sg1jFlMPxOjOSSCYqUgn4Hsc3rDc7dFvfVYjFPNHtov6kgUeulV4SxbuIV/stPw=="],
+    "@nbw/song/@types/bun/bun-types": ["bun-types@1.3.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-OlFwHcnNV99r//9v5IIOgQ9Uk37gZqrNMCcqEaExdkVq3Avwqok1bJFmvGMCkCE0FqzdY8VMOZpfpR3lwI+CsQ=="],
 
     "@nbw/sounds/@types/bun/bun-types": ["bun-types@1.3.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-inmAYe2PFLs0SUbFOWSVD24sg1jFlMPxOjOSSCYqUgn4Hsc3rDc7dFvfVYjFPNHtov6kgUeulV4SxbuIV/stPw=="],
 
-    "@nbw/thumbnail/@types/bun/bun-types": ["bun-types@1.3.5", "", { "dependencies": { "@types/node": "*" } }, "sha512-inmAYe2PFLs0SUbFOWSVD24sg1jFlMPxOjOSSCYqUgn4Hsc3rDc7dFvfVYjFPNHtov6kgUeulV4SxbuIV/stPw=="],
+    "@nbw/thumbnail/@types/bun/bun-types": ["bun-types@1.3.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-OlFwHcnNV99r//9v5IIOgQ9Uk37gZqrNMCcqEaExdkVq3Avwqok1bJFmvGMCkCE0FqzdY8VMOZpfpR3lwI+CsQ=="],
 
     "@nbw/thumbnail/jest/@jest/core": ["@jest/core@29.7.0", "", { "dependencies": { "@jest/console": "^29.7.0", "@jest/reporters": "^29.7.0", "@jest/test-result": "^29.7.0", "@jest/transform": "^29.7.0", "@jest/types": "^29.6.3", "@types/node": "*", "ansi-escapes": "^4.2.1", "chalk": "^4.0.0", "ci-info": "^3.2.0", "exit": "^0.1.2", "graceful-fs": "^4.2.9", "jest-changed-files": "^29.7.0", "jest-config": "^29.7.0", "jest-haste-map": "^29.7.0", "jest-message-util": "^29.7.0", "jest-regex-util": "^29.6.3", "jest-resolve": "^29.7.0", "jest-resolve-dependencies": "^29.7.0", "jest-runner": "^29.7.0", "jest-runtime": "^29.7.0", "jest-snapshot": "^29.7.0", "jest-util": "^29.7.0", "jest-validate": "^29.7.0", "jest-watcher": "^29.7.0", "micromatch": "^4.0.4", "pretty-format": "^29.7.0", "slash": "^3.0.0", "strip-ansi": "^6.0.0" }, "peerDependencies": { "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0" }, "optionalPeers": ["node-notifier"] }, "sha512-n7aeXWKMnGtDA48y8TLWJPJmLmmZ642Ceo78cYWEpiD7FzDgmNDV/GCVRorPABdXLJZ/9wzzgZAlHjXjxDHGsg=="],