diff --git a/package.json b/package.json
index 2955ea5..1f0eb95 100644
--- a/package.json
+++ b/package.json
@@ -24,11 +24,13 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",
 		"globals": "^15.0.0",
+		"mode-watcher": "^0.4.1",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.5",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
+		"svelte-sonner": "^0.3.28",
 		"tailwind-merge": "^2.5.4",
 		"tailwind-variants": "^0.2.1",
 		"tailwindcss": "^3.4.9",
@@ -41,7 +43,6 @@
 		"@prisma/client": "^5.21.1",
 		"lucia": "^3.2.2",
 		"lucide-svelte": "^0.454.0",
-		"mode-watcher": "^0.4.1",
 		"nodemailer": "^6.9.16",
 		"oslo": "^1.2.1",
 		"prisma": "^5.21.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 64dd328..52f9519 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,9 +20,6 @@ importers:
       lucide-svelte:
         specifier: ^0.454.0
         version: 0.454.0(svelte@5.1.3)
-      mode-watcher:
-        specifier: ^0.4.1
-        version: 0.4.1(svelte@5.1.3)
       nodemailer:
         specifier: ^6.9.16
         version: 6.9.16
@@ -75,6 +72,9 @@ importers:
       globals:
         specifier: ^15.0.0
         version: 15.11.0
+      mode-watcher:
+        specifier: ^0.4.1
+        version: 0.4.1(svelte@5.1.3)
       prettier:
         specifier: ^3.3.2
         version: 3.3.3
@@ -90,6 +90,9 @@ importers:
       svelte-check:
         specifier: ^4.0.0
         version: 4.0.5(picomatch@4.0.2)(svelte@5.1.3)(typescript@5.6.3)
+      svelte-sonner:
+        specifier: ^0.3.28
+        version: 0.3.28(svelte@5.1.3)
       tailwind-merge:
         specifier: ^2.5.4
         version: 2.5.4
@@ -1730,6 +1733,11 @@ packages:
       svelte:
         optional: true
 
+  svelte-sonner@0.3.28:
+    resolution: {integrity: sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==}
+    peerDependencies:
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
+
   svelte@5.1.3:
     resolution: {integrity: sha512-Sl8UFHlBvF54aK8MElFvyvaUfPE2REOz6LnhR2pBClCL11MU4qpn4V+KgAggaXxDyrP2iQixvHbtpHqL/zXlSQ==}
     engines: {node: '>=18'}
@@ -3342,6 +3350,10 @@ snapshots:
     optionalDependencies:
       svelte: 5.1.3
 
+  svelte-sonner@0.3.28(svelte@5.1.3):
+    dependencies:
+      svelte: 5.1.3
+
   svelte@5.1.3:
     dependencies:
       '@ampproject/remapping': 2.3.0
diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts
new file mode 100644
index 0000000..1ad9f4a
--- /dev/null
+++ b/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte
new file mode 100644
index 0000000..7d5b2f1
--- /dev/null
+++ b/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	type $$Props = SonnerProps;
+</script>
+
+<Sonner
+	theme={$mode}
+	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}
+/>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0e9a0cf..47da55a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,10 @@
 <script>
 	import '../app.css';
 	import { ModeWatcher } from 'mode-watcher';
+	import { Toaster } from '$lib/components/ui/sonner';
 </script>
 
 <ModeWatcher />
 
+<Toaster />
 <slot></slot>