diff --git a/ui/src/components/ToastViewport.tsx b/ui/src/components/ToastViewport.tsx
index d0bb5a6d..aa8a53c1 100644
--- a/ui/src/components/ToastViewport.tsx
+++ b/ui/src/components/ToastViewport.tsx
@@ -5,17 +5,17 @@ import { useToast, type ToastItem, type ToastTone } from "../context/ToastContex
 import { cn } from "../lib/utils";
 
 const toneClasses: Record<ToastTone, string> = {
-  info: "border-sky-500/25 bg-sky-950/60 text-sky-100",
-  success: "border-emerald-500/25 bg-emerald-950/60 text-emerald-100",
-  warn: "border-amber-500/25 bg-amber-950/60 text-amber-100",
-  error: "border-red-500/30 bg-red-950/60 text-red-100",
+  info: "border-sky-300 bg-sky-50 text-sky-900 dark:border-sky-500/25 dark:bg-sky-950/60 dark:text-sky-100",
+  success: "border-emerald-300 bg-emerald-50 text-emerald-900 dark:border-emerald-500/25 dark:bg-emerald-950/60 dark:text-emerald-100",
+  warn: "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-500/25 dark:bg-amber-950/60 dark:text-amber-100",
+  error: "border-red-300 bg-red-50 text-red-900 dark:border-red-500/30 dark:bg-red-950/60 dark:text-red-100",
 };
 
 const toneDotClasses: Record<ToastTone, string> = {
-  info: "bg-sky-400",
-  success: "bg-emerald-400",
-  warn: "bg-amber-400",
-  error: "bg-red-400",
+  info: "bg-sky-500 dark:bg-sky-400",
+  success: "bg-emerald-500 dark:bg-emerald-400",
+  warn: "bg-amber-500 dark:bg-amber-400",
+  error: "bg-red-500 dark:bg-red-400",
 };
 
 function AnimatedToast({
@@ -35,7 +35,7 @@ function AnimatedToast({
   return (
     <li
       className={cn(
-        "pointer-events-auto rounded-lg border shadow-lg backdrop-blur-xl transition-all duration-300 ease-out",
+        "pointer-events-auto rounded-sm border shadow-lg backdrop-blur-xl transition-all duration-300 ease-out",
         visible
           ? "translate-y-0 opacity-100"
           : "translate-y-3 opacity-0",
@@ -65,7 +65,7 @@ function AnimatedToast({
           type="button"
           aria-label="Dismiss notification"
           onClick={() => onDismiss(toast.id)}
-          className="mt-0.5 shrink-0 rounded p-1 opacity-50 hover:bg-white/10 hover:opacity-100"
+          className="mt-0.5 shrink-0 rounded p-1 opacity-50 hover:bg-black/10 hover:opacity-100 dark:hover:bg-white/10"
         >
           <X className="h-3.5 w-3.5" />
         </button>