diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
index 0631191..0a4b70d 100644
--- a/src/lib/components/ui/sonner/sonner.svelte
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -1,20 +1,21 @@
 <script lang="ts">
-	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
-	import { mode } from "mode-watcher";
+  import { Toaster as Sonner, type ToasterProps as SonnerProps } from 'svelte-sonner';
+  import { mode } from 'mode-watcher';
 
-	let { ...restProps }: SonnerProps = $props();
+  let { ...restProps }: SonnerProps = $props();
 </script>
 
 <Sonner
-	theme={mode.current}
-	class="toaster group"
-	toastOptions={{
-		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-		},
-	}}
-	{...restProps}
+  theme={mode.current}
+  class="toaster group z-[5000]"
+  toastOptions={{
+    classes: {
+      toast:
+        'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+      description: 'group-[.toast]:text-muted-foreground',
+      actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+      cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+    },
+  }}
+  {...restProps}
 />