diff --git a/src/index.tsx b/src/index.tsx
index 3f60b7b..e75a979 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -360,7 +360,7 @@ const Toast = (props: ToastProps) => {
           ) : null}
 
           <div data-content="">
-            <div data-title="" className={cn(classNames?.title, toast.classNames.title)}>
+            <div data-title="" className={cn(classNames?.title, toast?.classNames?.title)}>
               {toast.title}
             </div>
             {toast.description ? (
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 30914fe..6052d6a 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -20,16 +20,7 @@ export default function Home() {
   return (
     <div className="wrapper">
       <Head />
-      <Toaster
-        theme="light"
-        richColors={richColors}
-        closeButton={closeButton}
-        expand={expand}
-        position={position}
-        toastOptions={{
-          classNames: {},
-        }}
-      />
+      <Toaster theme="light" richColors={richColors} closeButton={closeButton} expand={expand} position={position} />
       <main className="container">
         <Hero />
         <div className="content">
diff --git a/website/src/pages/styling.mdx b/website/src/pages/styling.mdx
index 6f052cd..753fc85 100644
--- a/website/src/pages/styling.mdx
+++ b/website/src/pages/styling.mdx
@@ -49,7 +49,7 @@ You can do the same when calling `toast()`.
 toast('Hello World', {
   classNames: {
     toast: '!bg-blue-400',
-    title: '!text-red-400',
+    title: '!text-red-400 !text-2xl',
     description: '!text-red-400',
     actionButton: '!bg-zinc-400',
     cancelButton: '!bg-orange-400',
