diff --git a/src/site/globals.css b/src/site/globals.css
index 0b7ef0e6..81c052e0 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -103,12 +103,6 @@
       p-0 min-h-0
       border-none active:bg-transparent shadow-none
   }
-  /* Toasts */
-  .toaster [data-sonner-toast] {
-    @apply
-      font-mono font-normal
-      !border-gray-200 dark:!border-gray-800
-  }
   /* Common Utilities */
   .text-main {
     @apply
diff --git a/src/toast/ToasterWithThemes.tsx b/src/toast/ToasterWithThemes.tsx
index 63d0782f..1190d353 100644
--- a/src/toast/ToasterWithThemes.tsx
+++ b/src/toast/ToasterWithThemes.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { cc } from '@/utility/css';
 import { useTheme } from 'next-themes';
 import { Toaster } from 'sonner';
 
@@ -8,7 +9,14 @@ export default function ToasterWithThemes() {
   return (
     <Toaster
       theme={theme as 'system' | 'light' | 'dark'}
-      className="toaster"
+      toastOptions={{
+        classNames: {
+          toast: cc(
+            'font-mono font-normal',
+            '!border-gray-200 dark:!border-gray-800',
+          ),
+        },
+      }}
     />
   );
 }