diff --git a/src/components/app-update-toast.tsx b/src/components/app-update-toast.tsx
index 7030c04..7631b76 100644
--- a/src/components/app-update-toast.tsx
+++ b/src/components/app-update-toast.tsx
@@ -79,7 +79,7 @@ export function AppUpdateToast({
       updateProgress.stage === "completed");
 
   return (
-    <div className="flex items-start p-4 w-full max-w-md bg-white rounded-lg border border-gray-200 shadow-lg dark:bg-gray-800 dark:border-gray-700">
+    <div className="flex items-start p-4 w-full max-w-md bg-card rounded-lg border border-border shadow-lg text-card-foreground">
       <div className="mr-3 mt-0.5">
         {getStageIcon(updateProgress?.stage, isUpdating)}
       </div>
@@ -134,9 +134,9 @@ export function AppUpdateToast({
                 {updateProgress.eta && ` • ${updateProgress.eta} remaining`}
               </p>
             </div>
-            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+            <div className="w-full bg-muted rounded-full h-1.5">
               <div
-                className="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+                className="bg-primary h-1.5 rounded-full transition-all duration-300"
                 style={{ width: `${updateProgress.percentage}%` }}
               />
             </div>
@@ -147,12 +147,12 @@ export function AppUpdateToast({
         {showOtherStageProgress && (
           <div className="mt-2 space-y-1">
             {/* Progress indicator for non-downloading stages */}
-            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+            <div className="w-full bg-muted rounded-full h-1.5">
               <div
                 className={`h-1.5 rounded-full transition-all duration-500 ${
                   updateProgress.stage === "completed"
                     ? "bg-green-500 w-full"
-                    : "bg-blue-500 w-full animate-pulse"
+                    : "bg-primary w-full animate-pulse"
                 }`}
               />
             </div>
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index c018f0e..ce54483 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -12,8 +12,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
       className="toaster group"
       style={
         {
-          "--normal-bg": "var(--popover)",
-          "--normal-text": "var(--popover-foreground)",
+          "--normal-bg": "var(--card)",
+          "--normal-text": "var(--card-foreground)",
           "--normal-border": "var(--border)",
           zIndex: 99999,
         } as React.CSSProperties
@@ -22,6 +22,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
         style: {
           zIndex: 99999,
           pointerEvents: "auto",
+          backdropFilter: "saturate(1.2)",
         },
       }}
       {...props}
diff --git a/src/hooks/use-app-update-notifications.tsx b/src/hooks/use-app-update-notifications.tsx
index dd10b2b..c0587ca 100644
--- a/src/hooks/use-app-update-notifications.tsx
+++ b/src/hooks/use-app-update-notifications.tsx
@@ -156,6 +156,7 @@ export function useAppUpdateNotifications() {
         style: {
           zIndex: 99999, // Ensure app updates appear above dialogs
           pointerEvents: "auto", // Ensure app updates remain interactive
+          marginTop: "16px", // slightly lower on macOS-like top controls
         },
       },
     );