diff --git a/components/layouts/SimpleLayout.tsx b/components/layouts/SimpleLayout.tsx
index 3b7d3e7..9f32750 100644
--- a/components/layouts/SimpleLayout.tsx
+++ b/components/layouts/SimpleLayout.tsx
@@ -1,6 +1,6 @@
 import {ReactNode} from 'react'
-import clsx from 'clsx'
 import {Container} from '@/components/Container'
+import {twMerge} from 'tailwind-merge'
 
 type SimpleLayout = {
     title: string
@@ -19,9 +19,15 @@ export function SimpleLayout({
         <Container className="mt-16 sm:mt-32">
             <header className="max-w-2xl">
                 <h1
-                    className={clsx(gradient
-                        ? `${gradient} bg-clip-text dark:text-transparent`
-                        : '', 'text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl')}>
+                    className={twMerge(`
+                        text-4xl
+                        font-bold
+                        tracking-tight
+                        text-zinc-800
+                        dark:text-zinc-100
+                        sm:text-5xl
+                        ${gradient ? `${gradient} bg-clip-text dark:text-transparent` : ''}
+                    `)}>
                     {title}
                 </h1>
                 <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">