diff --git a/frontend/src/lib/components/Toast.svelte b/frontend/src/lib/components/Toast.svelte
index 402786ce0e..f38d04c42b 100644
--- a/frontend/src/lib/components/Toast.svelte
+++ b/frontend/src/lib/components/Toast.svelte
@@ -18,7 +18,8 @@
 
 <div class="w-full flex flex-col gap-2">
 	<div>
-		<p class="text-xs font-semibold text-secondary break-words">{message}</p>
+		<p class="text-xs font-semibold text-primary dark:text-primary-inverse break-words">{message}</p
+		>
 		{#if errorMessage}
 			<p
 				class=" w-full text-secondary border border-red-200 rounded-md text-xs bg-red-100 p-2 overflow-auto mt-2"
diff --git a/frontend/src/lib/toast.ts b/frontend/src/lib/toast.ts
index c88f8a9b0f..b76cbc8970 100644
--- a/frontend/src/lib/toast.ts
+++ b/frontend/src/lib/toast.ts
@@ -22,7 +22,9 @@ export function sendUserToast(
 			actions,
 			errorMessage,
 			duration,
-			onClose
+			onClose,
+			unstyled: true,
+			classes: error ? 'bg-red-50' : 'bg-green-500'
 		}
 	}
 
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 55c1938bb6..f9c3b42021 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -36,4 +36,14 @@
 	.wrap :global(strong) {
 		font-weight: 600;
 	}
+
+	:global([data-sonner-toaster][data-theme='dark']) {
+		--info-bg: #eaeef4 !important;
+		--info-border: #3b82f6 !important;
+		--info-text: #3b82f6 !important;
+
+		--error-bg: #fef2f2 !important;
+		--error-border: #ef4444 !important;
+		--error-text: #ef4444 !important;
+	}
 </style>