diff --git a/components/ui/Toast.tsx b/components/ui/Toast.tsx
index 690fdc5..040fb04 100644
--- a/components/ui/Toast.tsx
+++ b/components/ui/Toast.tsx
@@ -100,17 +100,17 @@ function ToastItem({
   return (
     <div
       className={cn(
-        'flex items-start gap-3 rounded-lg border p-4 shadow-lg pointer-events-auto',
-        'animate-slideInFromRight',
+        'flex items-start gap-3 rounded-lg border-2 p-4 shadow-2xl pointer-events-auto',
+        'animate-slideInFromRight backdrop-blur-sm',
         {
-          'bg-card border-border': variant === 'default',
-          'bg-success/10 border-success text-success-foreground':
+          'bg-card/95 border-border text-foreground': variant === 'default',
+          'bg-success/90 border-success text-white dark:text-white':
             variant === 'success',
-          'bg-destructive/10 border-destructive text-destructive-foreground':
+          'bg-destructive/90 border-destructive text-white dark:text-white':
             variant === 'error',
-          'bg-warning/10 border-warning text-warning-foreground':
+          'bg-warning/90 border-warning text-black dark:text-black':
             variant === 'warning',
-          'bg-info/10 border-info text-info-foreground': variant === 'info',
+          'bg-info/90 border-info text-white dark:text-white': variant === 'info',
         }
       )}
     >
@@ -125,7 +125,8 @@ function ToastItem({
       </div>
       <button
         onClick={() => onRemove(toast.id)}
-        className="flex-shrink-0 rounded-md p-1 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+        className="flex-shrink-0 rounded-md p-1 hover:bg-black/20 dark:hover:bg-white/20 transition-colors"
+        aria-label="Close"
       >
         <X className="h-4 w-4" />
       </button>