diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index 5284517e..1c376739 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -34,7 +34,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay",
         className,
       )}
       {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 9ff99906..64249170 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -36,7 +36,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay",
         className,
       )}
       {...props}
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
index a227f7ac..f449ce91 100644
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -34,7 +34,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 data-[state=closed]:pointer-events-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay data-[state=closed]:pointer-events-none",
         className,
       )}
       {...props}
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index 74e41490..231c5a81 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -51,7 +51,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-elevated shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 04e0013c..264f0503 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from "next-themes";
+import { useTheme } from "@/components/theme-provider";
 import { Toaster as Sonner, type ToasterProps, toast } from "sonner";
 import { useRef } from "react";
 
diff --git a/src/index.css b/src/index.css
index 54785e07..7ce244ea 100644
--- a/src/index.css
+++ b/src/index.css
@@ -79,6 +79,9 @@
   --scrollbar-thumb: #c1c1c3;
   --scrollbar-thumb-hover: #a1a1a3;
   --scrollbar-track: #f3f4f6;
+
+  /* Modal Overlay - Light Mode */
+  --bg-overlay: rgba(0, 0, 0, 0.5);
 }
 
 @theme inline {
@@ -168,6 +171,9 @@
   /* NEW SEMANTIC TEXT COLOR MAPPINGS - Creates Tailwind text classes */
   --color-foreground-secondary: var(--foreground-secondary);
   --color-foreground-subtle: var(--foreground-subtle);
+
+  /* Modal Overlay Mapping - Creates Tailwind bg-overlay class */
+  --color-overlay: var(--bg-overlay);
 }
 
 .dark {
@@ -233,6 +239,9 @@
   --scrollbar-thumb: #434345;
   --scrollbar-thumb-hover: #5a5a5d;
   --scrollbar-track: #18181b;
+
+  /* Modal Overlay - Dark Mode */
+  --bg-overlay: rgba(0, 0, 0, 0.7);
 }
 
 @layer base {
diff --git a/src/locales/en.json b/src/locales/en.json
index d3d522c2..d83a9b2a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -2427,5 +2427,9 @@
     "stats": "Stats",
     "consoleTab": "Console",
     "startContainerToAccess": "Start the container to access the console"
+  },
+  "theme": {
+    "switchToLight": "Switch to Light",
+    "switchToDark": "Switch to Dark"
   }
 }
diff --git a/src/ui/desktop/DesktopApp.tsx b/src/ui/desktop/DesktopApp.tsx
index 9fd5c141..d5c38610 100644
--- a/src/ui/desktop/DesktopApp.tsx
+++ b/src/ui/desktop/DesktopApp.tsx
@@ -200,8 +200,8 @@ function AppContent() {
             225deg,
             transparent,
             transparent 35px,
-            rgba(255, 255, 255, 0.03) 35px,
-            rgba(255, 255, 255, 0.03) 37px
+            var(--border-subtle) 35px,
+            var(--border-subtle) 37px
           )`,
         }}
       >
@@ -310,17 +310,16 @@ function AppContent() {
 
       {isTransitioning && (
         <div
-          className={`fixed inset-0 bg-background z-[20000] transition-opacity duration-700 ${
+          className={`fixed inset-0 bg-deepest z-[20000] transition-opacity duration-700 ${
             transitionPhase === "fadeOut" ? "opacity-100" : "opacity-0"
           }`}
           style={{
-            background: "#0e0e10",
             backgroundImage: `repeating-linear-gradient(
               45deg,
               transparent,
               transparent 35px,
-              rgba(255, 255, 255, 0.03) 35px,
-              rgba(255, 255, 255, 0.03) 37px
+              var(--border-subtle) 35px,
+              var(--border-subtle) 37px
             )`,
           }}
         >
diff --git a/src/ui/desktop/apps/features/docker/components/ConsoleTerminal.tsx b/src/ui/desktop/apps/features/docker/components/ConsoleTerminal.tsx
index 6b953860..30b474ff 100644
--- a/src/ui/desktop/apps/features/docker/components/ConsoleTerminal.tsx
+++ b/src/ui/desktop/apps/features/docker/components/ConsoleTerminal.tsx
@@ -103,8 +103,8 @@ export function ConsoleTerminal({
       .trim();
 
     terminal.options.theme = {
-      background: backgroundColor || "#ffffff",
-      foreground: foregroundColor || "#09090b",
+      background: backgroundColor || "var(--bg-elevated)",
+      foreground: foregroundColor || "var(--foreground)",
     };
 
     setTimeout(() => {
diff --git a/src/ui/desktop/apps/features/docker/components/ContainerCard.tsx b/src/ui/desktop/apps/features/docker/components/ContainerCard.tsx
index c45ab169..788bb581 100644
--- a/src/ui/desktop/apps/features/docker/components/ContainerCard.tsx
+++ b/src/ui/desktop/apps/features/docker/components/ContainerCard.tsx
@@ -312,7 +312,7 @@ export function ContainerCard({
             </div>
           </div>
 
-          <div className="flex flex-wrap gap-2 pt-2 border-t border-gray-700/50">
+          <div className="flex flex-wrap gap-2 pt-2 border-t border-edge-panel">
             <TooltipProvider>
               {container.state !== "running" && (
                 <Tooltip>
@@ -325,7 +325,7 @@ export function ContainerCard({
                       disabled={isLoading}
                     >
                       {isStarting ? (
-                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
                       ) : (
                         <Play className="h-4 w-4" />
                       )}
@@ -346,7 +346,7 @@ export function ContainerCard({
                       disabled={isLoading}
                     >
                       {isStopping ? (
-                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
                       ) : (
                         <Square className="h-4 w-4" />
                       )}
@@ -368,7 +368,7 @@ export function ContainerCard({
                       disabled={isLoading}
                     >
                       {isPausing ? (
-                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
                       ) : container.state === "paused" ? (
                         <PlayCircle className="h-4 w-4" />
                       ) : (
@@ -394,7 +394,7 @@ export function ContainerCard({
                     disabled={isLoading || container.state === "exited"}
                   >
                     {isRestarting ? (
-                      <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                      <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
                     ) : (
                       <RotateCw className="h-4 w-4" />
                     )}
diff --git a/src/ui/desktop/apps/features/docker/components/LogViewer.tsx b/src/ui/desktop/apps/features/docker/components/LogViewer.tsx
index e00d2387..0babe7f7 100644
--- a/src/ui/desktop/apps/features/docker/components/LogViewer.tsx
+++ b/src/ui/desktop/apps/features/docker/components/LogViewer.tsx
@@ -184,7 +184,7 @@ export function LogViewer({
                   className="flex-1 h-full"
                 >
                   {isLoading ? (
-                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
                   ) : (
                     <RefreshCw className="h-4 w-4" />
                   )}
@@ -197,7 +197,7 @@ export function LogViewer({
                   className="flex-1 h-full"
                 >
                   {isDownloading ? (
-                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
                   ) : (
                     <Download className="h-4 w-4" />
                   )}
diff --git a/src/ui/desktop/apps/features/file-manager/FileManagerGrid.tsx b/src/ui/desktop/apps/features/file-manager/FileManagerGrid.tsx
index 11768f29..020c7a7b 100644
--- a/src/ui/desktop/apps/features/file-manager/FileManagerGrid.tsx
+++ b/src/ui/desktop/apps/features/file-manager/FileManagerGrid.tsx
@@ -1091,7 +1091,7 @@ export function FileManagerGrid({
                             onKeyDown={handleEditKeyDown}
                             onBlur={handleEditConfirm}
                             className={cn(
-                              "max-w-[120px] min-w-[60px] w-fit rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs shadow-xs transition-[color,box-shadow] outline-none",
+                              "max-w-[120px] min-w-[60px] w-fit rounded-md border border-edge bg-elevated px-2 py-1 text-xs shadow-xs transition-[color,box-shadow] outline-none",
                               "text-center text-foreground placeholder:text-muted-foreground",
                               "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
                             )}
@@ -1180,7 +1180,7 @@ export function FileManagerGrid({
                           onKeyDown={handleEditKeyDown}
                           onBlur={handleEditConfirm}
                           className={cn(
-                            "flex-1 min-w-0 max-w-[200px] rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
+                            "flex-1 min-w-0 max-w-[200px] rounded-md border border-edge bg-elevated px-2 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none",
                             "text-foreground placeholder:text-muted-foreground",
                             "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
                           )}
@@ -1370,7 +1370,7 @@ function CreateIntentGridItem({
           onChange={(e) => setInputName(e.target.value)}
           onKeyDown={handleKeyDown}
           onBlur={() => onConfirm?.(inputName.trim())}
-          className="w-full max-w-[120px] rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-xs text-center text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
+          className="w-full max-w-[120px] rounded-md border border-edge bg-elevated px-2 py-1 text-xs text-center text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
           placeholder={
             intent.type === "directory"
               ? t("fileManager.folderName")
@@ -1426,7 +1426,7 @@ function CreateIntentListItem({
         onChange={(e) => setInputName(e.target.value)}
         onKeyDown={handleKeyDown}
         onBlur={() => onConfirm?.(inputName.trim())}
-        className="flex-1 min-w-0 max-w-[200px] rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-2 py-1 text-sm text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
+        className="flex-1 min-w-0 max-w-[200px] rounded-md border border-edge bg-elevated px-2 py-1 text-sm text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px] outline-none"
         placeholder={
           intent.type === "directory"
             ? t("fileManager.folderName")
diff --git a/src/ui/desktop/apps/features/file-manager/components/FileViewer.tsx b/src/ui/desktop/apps/features/file-manager/components/FileViewer.tsx
index 8de9c877..f294c83b 100644
--- a/src/ui/desktop/apps/features/file-manager/components/FileViewer.tsx
+++ b/src/ui/desktop/apps/features/file-manager/components/FileViewer.tsx
@@ -1255,7 +1255,7 @@ export function FileViewer({
               </div>
             </div>
 
-            <div className="flex-1 overflow-auto thin-scrollbar p-6 bg-gray-100 dark:bg-gray-900">
+            <div className="flex-1 overflow-auto thin-scrollbar p-6 bg-surface">
               <div className="flex justify-center">
                 {pdfError ? (
                   <div className="text-center text-muted-foreground p-8">
diff --git a/src/ui/desktop/apps/features/server-stats/widgets/NetworkWidget.tsx b/src/ui/desktop/apps/features/server-stats/widgets/NetworkWidget.tsx
index 00299ee6..08eaf348 100644
--- a/src/ui/desktop/apps/features/server-stats/widgets/NetworkWidget.tsx
+++ b/src/ui/desktop/apps/features/server-stats/widgets/NetworkWidget.tsx
@@ -57,7 +57,7 @@ export function NetworkWidget({ metrics }: NetworkWidgetProps) {
                   className={`text-xs px-2.5 py-0.5 rounded-full font-medium ${
                     iface.state === "UP"
                       ? "bg-green-500/20 text-green-400"
-                      : "bg-gray-500/20 text-foreground-subtle"
+                      : "bg-surface text-foreground-subtle"
                   }`}
                 >
                   {iface.state}
diff --git a/src/ui/desktop/apps/features/terminal/command-history/CommandAutocomplete.tsx b/src/ui/desktop/apps/features/terminal/command-history/CommandAutocomplete.tsx
index 40ef12b9..9099ca2e 100644
--- a/src/ui/desktop/apps/features/terminal/command-history/CommandAutocomplete.tsx
+++ b/src/ui/desktop/apps/features/terminal/command-history/CommandAutocomplete.tsx
@@ -56,7 +56,7 @@ export function CommandAutocomplete({
             className={cn(
               "px-3 py-1.5 text-sm font-mono cursor-pointer transition-colors",
               "hover:bg-hover",
-              index === selectedIndex && "bg-gray-500/20 text-muted-foreground",
+              index === selectedIndex && "bg-surface text-muted-foreground",
             )}
             onClick={() => onSelect(suggestion)}
             onMouseEnter={() => {}}
diff --git a/src/ui/desktop/apps/features/tunnel/TunnelManager.tsx b/src/ui/desktop/apps/features/tunnel/TunnelManager.tsx
index 11110b40..ea7346cc 100644
--- a/src/ui/desktop/apps/features/tunnel/TunnelManager.tsx
+++ b/src/ui/desktop/apps/features/tunnel/TunnelManager.tsx
@@ -127,10 +127,10 @@ export function TunnelManager({
           ) : (
             <div className="flex items-center justify-center h-full">
               <div className="text-center">
-                <p className="text-gray-400 text-lg">
+                <p className="text-foreground-subtle text-lg">
                   {t("tunnel.noTunnelsConfigured")}
                 </p>
-                <p className="text-gray-500 text-sm mt-2">
+                <p className="text-foreground-subtle text-sm mt-2">
                   {t("tunnel.configureTunnelsInHostSettings")}
                 </p>
               </div>
diff --git a/src/ui/desktop/apps/host-manager/credentials/CredentialEditor.tsx b/src/ui/desktop/apps/host-manager/credentials/CredentialEditor.tsx
index bc9ff2fe..795ffdec 100644
--- a/src/ui/desktop/apps/host-manager/credentials/CredentialEditor.tsx
+++ b/src/ui/desktop/apps/host-manager/credentials/CredentialEditor.tsx
@@ -616,12 +616,12 @@ export function CredentialEditor({
                               (tag: string, idx: number) => (
                                 <span
                                   key={`${tag}-${idx}`}
-                                  className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
+                                  className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
                                 >
                                   {tag}
                                   <button
                                     type="button"
-                                    className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
+                                    className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
                                     onClick={(e) => {
                                       e.preventDefault();
                                       e.stopPropagation();
diff --git a/src/ui/desktop/apps/host-manager/credentials/CredentialViewer.tsx b/src/ui/desktop/apps/host-manager/credentials/CredentialViewer.tsx
index c60b8813..56032cd0 100644
--- a/src/ui/desktop/apps/host-manager/credentials/CredentialViewer.tsx
+++ b/src/ui/desktop/apps/host-manager/credentials/CredentialViewer.tsx
@@ -108,9 +108,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
 
   const getAuthIcon = (authType: string) => {
     return authType === "password" ? (
-      <Key className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+      <Key className="h-5 w-5 text-foreground-subtle" />
     ) : (
-      <Shield className="h-5 w-5 text-zinc-500 dark:text-zinc-400" />
+      <Shield className="h-5 w-5 text-foreground-subtle" />
     );
   };
 
@@ -127,7 +127,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
     return (
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">
+          <label className="text-sm font-medium text-foreground-secondary">
             {label}
           </label>
           <div className="flex items-center space-x-2">
@@ -152,7 +152,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
           </div>
         </div>
         <div
-          className={`p-3 rounded-md bg-zinc-800 dark:bg-zinc-800 ${isMultiline ? "" : "min-h-[2.5rem]"}`}
+          className={`p-3 rounded-md bg-surface ${isMultiline ? "" : "min-h-[2.5rem]"}`}
         >
           {isVisible ? (
             <pre
@@ -161,7 +161,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
               {value}
             </pre>
           ) : (
-            <div className="text-sm text-zinc-500 dark:text-zinc-400">
+            <div className="text-sm text-foreground-subtle">
               {"•".repeat(isMultiline ? 50 : 20)}
             </div>
           )}
@@ -175,7 +175,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
       <Sheet open={true} onOpenChange={onClose}>
         <SheetContent className="w-[600px] max-w-[50vw]">
           <div className="flex items-center justify-center h-64">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-zinc-600"></div>
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground-subtle"></div>
           </div>
         </SheetContent>
       </Sheet>
@@ -187,28 +187,25 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
       <SheetContent className="w-[600px] max-w-[50vw] overflow-y-auto thin-scrollbar">
         <SheetHeader className="space-y-6 pb-8">
           <SheetTitle className="flex items-center space-x-4">
-            <div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800">
+            <div className="p-2 rounded-lg bg-surface">
               {getAuthIcon(credentialDetails.authType)}
             </div>
             <div className="flex-1">
               <div className="text-xl font-semibold">
                 {credentialDetails.name}
               </div>
-              <div className="text-sm font-normal text-zinc-600 dark:text-zinc-400 mt-1">
+              <div className="text-sm font-normal text-foreground-subtle mt-1">
                 {credentialDetails.description}
               </div>
             </div>
             <div className="flex items-center space-x-2">
-              <Badge
-                variant="outline"
-                className="border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-400"
-              >
+              <Badge variant="outline" className="text-foreground-subtle">
                 {credentialDetails.authType}
               </Badge>
               {credentialDetails.keyType && (
                 <Badge
                   variant="secondary"
-                  className="bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300"
+                  className="bg-surface text-foreground-secondary"
                 >
                   {credentialDetails.keyType}
                 </Badge>
@@ -218,7 +215,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
         </SheetHeader>
 
         <div className="space-y-10">
-          <div className="flex space-x-2 p-2 bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-lg">
+          <div className="flex space-x-2 p-2 bg-surface border border-border rounded-lg">
             <Button
               variant={activeTab === "overview" ? "default" : "ghost"}
               size="sm"
@@ -250,7 +247,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
 
           {activeTab === "overview" && (
             <div className="grid gap-10 lg:grid-cols-2">
-              <Card className="border-zinc-200 dark:border-zinc-700">
+              <Card className="border-border">
                 <CardHeader className="pb-8">
                   <CardTitle className="text-lg font-semibold">
                     {t("credentials.basicInformation")}
@@ -258,14 +255,14 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
                 </CardHeader>
                 <CardContent className="space-y-8">
                   <div className="flex items-center space-x-5">
-                    <div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800">
-                      <User className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+                    <div className="p-2 rounded-lg bg-surface">
+                      <User className="h-4 w-4 text-foreground-subtle" />
                     </div>
                     <div>
-                      <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                      <div className="text-sm text-foreground-subtle">
                         {t("common.username")}
                       </div>
-                      <div className="font-medium text-zinc-800 dark:text-zinc-200">
+                      <div className="font-medium text-foreground">
                         {credentialDetails.username}
                       </div>
                     </div>
@@ -273,9 +270,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
 
                   {credentialDetails.folder && (
                     <div className="flex items-center space-x-4">
-                      <Folder className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+                      <Folder className="h-4 w-4 text-foreground-subtle" />
                       <div>
-                        <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                        <div className="text-sm text-foreground-subtle">
                           {t("common.folder")}
                         </div>
                         <div className="font-medium">
@@ -287,9 +284,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
 
                   {credentialDetails.tags.length > 0 && (
                     <div className="flex items-start space-x-4">
-                      <Hash className="h-4 w-4 text-zinc-500 dark:text-zinc-400 mt-1" />
+                      <Hash className="h-4 w-4 text-foreground-subtle mt-1" />
                       <div className="flex-1">
-                        <div className="text-sm text-zinc-500 dark:text-zinc-400 mb-3">
+                        <div className="text-sm text-foreground-subtle mb-3">
                           {t("hosts.tags")}
                         </div>
                         <div className="flex flex-wrap gap-2">
@@ -310,9 +307,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
                   <Separator />
 
                   <div className="flex items-center space-x-4">
-                    <Calendar className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+                    <Calendar className="h-4 w-4 text-foreground-subtle" />
                     <div>
-                      <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                      <div className="text-sm text-foreground-subtle">
                         {t("credentials.created")}
                       </div>
                       <div className="font-medium">
@@ -322,9 +319,9 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
                   </div>
 
                   <div className="flex items-center space-x-4">
-                    <Calendar className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+                    <Calendar className="h-4 w-4 text-foreground-subtle" />
                     <div>
-                      <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                      <div className="text-sm text-foreground-subtle">
                         {t("credentials.lastModified")}
                       </div>
                       <div className="font-medium">
@@ -342,20 +339,20 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
                   </CardTitle>
                 </CardHeader>
                 <CardContent className="space-y-6">
-                  <div className="text-center p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
-                    <div className="text-3xl font-bold text-zinc-600 dark:text-zinc-400">
+                  <div className="text-center p-6 bg-surface rounded-lg">
+                    <div className="text-3xl font-bold text-foreground-subtle">
                       {credentialDetails.usageCount}
                     </div>
-                    <div className="text-sm text-zinc-600 dark:text-zinc-400">
+                    <div className="text-sm text-foreground-subtle">
                       {t("credentials.timesUsed")}
                     </div>
                   </div>
 
                   {credentialDetails.lastUsed && (
-                    <div className="flex items-center space-x-4 p-4 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
-                      <Clock className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+                    <div className="flex items-center space-x-4 p-4 bg-surface rounded-lg">
+                      <Clock className="h-5 w-5 text-foreground-subtle" />
                       <div>
-                        <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                        <div className="text-sm text-foreground-subtle">
                           {t("credentials.lastUsed")}
                         </div>
                         <div className="font-medium">
@@ -365,10 +362,10 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
                     </div>
                   )}
 
-                  <div className="flex items-center space-x-4 p-4 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
-                    <Server className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+                  <div className="flex items-center space-x-4 p-4 bg-surface rounded-lg">
+                    <Server className="h-5 w-5 text-foreground-subtle" />
                     <div>
-                      <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                      <div className="text-sm text-foreground-subtle">
                         {t("credentials.connectedHosts")}
                       </div>
                       <div className="font-medium">{hostsUsing.length}</div>
@@ -383,7 +380,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
             <Card>
               <CardHeader>
                 <CardTitle className="text-lg flex items-center space-x-2">
-                  <Shield className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+                  <Shield className="h-5 w-5 text-foreground-subtle" />
                   <span>{t("credentials.securityDetails")}</span>
                 </CardTitle>
                 <CardDescription>
@@ -391,13 +388,13 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
                 </CardDescription>
               </CardHeader>
               <CardContent className="space-y-6">
-                <div className="flex items-center space-x-4 p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
-                  <CheckCircle className="h-6 w-6 text-zinc-600 dark:text-zinc-400" />
+                <div className="flex items-center space-x-4 p-6 bg-surface rounded-lg">
+                  <CheckCircle className="h-6 w-6 text-foreground-subtle" />
                   <div>
-                    <div className="font-medium text-zinc-800 dark:text-zinc-200">
+                    <div className="font-medium text-foreground">
                       {t("credentials.credentialSecured")}
                     </div>
-                    <div className="text-sm text-zinc-700 dark:text-zinc-300">
+                    <div className="text-sm text-foreground-secondary">
                       {t("credentials.credentialSecuredDescription")}
                     </div>
                   </div>
@@ -424,7 +421,7 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
 
                     <div className="grid gap-6 md:grid-cols-2">
                       <div>
-                        <div className="text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-3">
+                        <div className="text-sm font-medium text-foreground-secondary mb-3">
                           {t("credentials.keyType")}
                         </div>
                         <Badge variant="outline" className="text-sm">
@@ -450,13 +447,13 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
                   </div>
                 )}
 
-                <div className="flex items-start space-x-4 p-6 bg-zinc-900/20 dark:bg-zinc-900/20 rounded-lg">
-                  <AlertTriangle className="h-5 w-5 text-zinc-600 dark:text-zinc-400 mt-0.5" />
+                <div className="flex items-start space-x-4 p-6 bg-surface rounded-lg">
+                  <AlertTriangle className="h-5 w-5 text-foreground-subtle mt-0.5" />
                   <div className="text-sm">
-                    <div className="font-medium text-zinc-800 dark:text-zinc-200 mb-2">
+                    <div className="font-medium text-foreground mb-2">
                       {t("credentials.securityReminder")}
                     </div>
-                    <div className="text-zinc-700 dark:text-zinc-300">
+                    <div className="text-foreground-secondary">
                       {t("credentials.securityReminderText")}
                     </div>
                   </div>
@@ -469,15 +466,15 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
             <Card>
               <CardHeader>
                 <CardTitle className="text-lg flex items-center space-x-2">
-                  <Server className="h-5 w-5 text-zinc-600 dark:text-zinc-400" />
+                  <Server className="h-5 w-5 text-foreground-subtle" />
                   <span>{t("credentials.hostsUsingCredential")}</span>
                   <Badge variant="secondary">{hostsUsing.length}</Badge>
                 </CardTitle>
               </CardHeader>
               <CardContent>
                 {hostsUsing.length === 0 ? (
-                  <div className="text-center py-10 text-zinc-500 dark:text-zinc-400">
-                    <Server className="h-12 w-12 mx-auto mb-6 text-zinc-300 dark:text-zinc-600" />
+                  <div className="text-center py-10 text-foreground-subtle">
+                    <Server className="h-12 w-12 mx-auto mb-6 text-foreground-subtle" />
                     <p>{t("credentials.noHostsUsingCredential")}</p>
                   </div>
                 ) : (
@@ -486,22 +483,22 @@ const CredentialViewer: React.FC<CredentialViewerProps> = ({
                       {hostsUsing.map((host) => (
                         <div
                           key={host.id}
-                          className="flex items-center justify-between p-4 border rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800"
+                          className="flex items-center justify-between p-4 border rounded-lg hover:bg-surface"
                         >
                           <div className="flex items-center space-x-3">
-                            <div className="p-2 bg-zinc-100 dark:bg-zinc-800 rounded">
-                              <Server className="h-4 w-4 text-zinc-600 dark:text-zinc-400" />
+                            <div className="p-2 bg-surface rounded">
+                              <Server className="h-4 w-4 text-foreground-subtle" />
                             </div>
                             <div>
                               <div className="font-medium">
                                 {host.name || `${host.ip}:${host.port}`}
                               </div>
-                              <div className="text-sm text-zinc-500 dark:text-zinc-400">
+                              <div className="text-sm text-foreground-subtle">
                                 {host.ip}:{host.port}
                               </div>
                             </div>
                           </div>
-                          <div className="text-right text-sm text-zinc-500 dark:text-zinc-400">
+                          <div className="text-right text-sm text-foreground-subtle">
                             {formatDate(host.createdAt)}
                           </div>
                         </div>
diff --git a/src/ui/desktop/apps/host-manager/credentials/tabs/CredentialGeneralTab.tsx b/src/ui/desktop/apps/host-manager/credentials/tabs/CredentialGeneralTab.tsx
index 810612a1..fedadcd9 100644
--- a/src/ui/desktop/apps/host-manager/credentials/tabs/CredentialGeneralTab.tsx
+++ b/src/ui/desktop/apps/host-manager/credentials/tabs/CredentialGeneralTab.tsx
@@ -176,12 +176,12 @@ export function CredentialGeneralTab({
                   {(field.value || []).map((tag: string, idx: number) => (
                     <span
                       key={`${tag}-${idx}`}
-                      className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
+                      className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
                     >
                       {tag}
                       <button
                         type="button"
-                        className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
+                        className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
diff --git a/src/ui/desktop/apps/host-manager/hosts/HostManagerEditor.tsx b/src/ui/desktop/apps/host-manager/hosts/HostManagerEditor.tsx
index c0736c3a..04f82b71 100644
--- a/src/ui/desktop/apps/host-manager/hosts/HostManagerEditor.tsx
+++ b/src/ui/desktop/apps/host-manager/hosts/HostManagerEditor.tsx
@@ -1348,7 +1348,7 @@ export function HostManagerEditor({
                                     type="button"
                                     variant="ghost"
                                     size="sm"
-                                    className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
+                                    className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
                                     onClick={() => handleFolderClick(folder)}
                                   >
                                     {folder}
@@ -1372,12 +1372,12 @@ export function HostManagerEditor({
                               {field.value.map((tag: string, idx: number) => (
                                 <span
                                   key={tag + idx}
-                                  className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
+                                  className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
                                 >
                                   {tag}
                                   <button
                                     type="button"
-                                    className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
+                                    className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
                                     onClick={() => {
                                       const newTags = field.value.filter(
                                         (_: string, i: number) => i !== idx,
@@ -1683,7 +1683,7 @@ export function HostManagerEditor({
                                             type="button"
                                             variant="ghost"
                                             size="sm"
-                                            className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-white/15 focus:bg-white/20 focus:outline-none"
+                                            className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
                                             onClick={() => {
                                               field.onChange(opt.value);
                                               setKeyTypeDropdownOpen(false);
@@ -3231,7 +3231,7 @@ export function HostManagerEditor({
                                                         type="button"
                                                         variant="ghost"
                                                         size="sm"
-                                                        className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
+                                                        className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
                                                         onClick={() =>
                                                           handleSshConfigClick(
                                                             config,
diff --git a/src/ui/desktop/apps/host-manager/hosts/tabs/HostAuthenticationSection.tsx b/src/ui/desktop/apps/host-manager/hosts/tabs/HostAuthenticationSection.tsx
index 686bd154..f562d673 100644
--- a/src/ui/desktop/apps/host-manager/hosts/tabs/HostAuthenticationSection.tsx
+++ b/src/ui/desktop/apps/host-manager/hosts/tabs/HostAuthenticationSection.tsx
@@ -268,7 +268,7 @@ export function HostAuthenticationSection({
                               type="button"
                               variant="ghost"
                               size="sm"
-                              className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-white/15 focus:bg-white/20 focus:outline-none"
+                              className="w-full justify-start text-left rounded-md px-2 py-1.5 bg-canvas text-foreground hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
                               onClick={() => {
                                 field.onChange(opt.value);
                                 setKeyTypeDropdownOpen(false);
diff --git a/src/ui/desktop/apps/host-manager/hosts/tabs/HostGeneralTab.tsx b/src/ui/desktop/apps/host-manager/hosts/tabs/HostGeneralTab.tsx
index 09824543..b37fd5fe 100644
--- a/src/ui/desktop/apps/host-manager/hosts/tabs/HostGeneralTab.tsx
+++ b/src/ui/desktop/apps/host-manager/hosts/tabs/HostGeneralTab.tsx
@@ -226,7 +226,7 @@ export function HostGeneralTab({
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
+                        className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
                         onClick={() => handleFolderClick(folder)}
                       >
                         {folder}
@@ -250,12 +250,12 @@ export function HostGeneralTab({
                   {field.value.map((tag: string, idx: number) => (
                     <span
                       key={tag + idx}
-                      className="flex items-center bg-gray-200 text-gray-800 rounded-full px-2 py-0.5 text-xs"
+                      className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
                     >
                       {tag}
                       <button
                         type="button"
-                        className="ml-1 text-gray-500 hover:text-red-500 focus:outline-none"
+                        className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
                         onClick={() => {
                           const newTags = field.value.filter(
                             (_: string, i: number) => i !== idx,
diff --git a/src/ui/desktop/apps/host-manager/hosts/tabs/HostTerminalTab.tsx b/src/ui/desktop/apps/host-manager/hosts/tabs/HostTerminalTab.tsx
index aa47be25..03861946 100644
--- a/src/ui/desktop/apps/host-manager/hosts/tabs/HostTerminalTab.tsx
+++ b/src/ui/desktop/apps/host-manager/hosts/tabs/HostTerminalTab.tsx
@@ -106,6 +106,119 @@ export function HostTerminalTab({
             )}
           />
 
+          <FormField
+            control={control}
+            name="terminalConfig.theme"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("hosts.terminalTheme")}</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={t("hosts.selectTheme")} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="termix">Termix Default</SelectItem>
+                    <SelectItem value="termixDark">Termix Dark</SelectItem>
+                    <SelectItem value="termixLight">Termix Light</SelectItem>
+                    <SelectItem value="dracula">Dracula</SelectItem>
+                    <SelectItem value="monokai">Monokai</SelectItem>
+                    <SelectItem value="nord">Nord</SelectItem>
+                    <SelectItem value="gruvboxDark">Gruvbox Dark</SelectItem>
+                    <SelectItem value="gruvboxLight">Gruvbox Light</SelectItem>
+                    <SelectItem value="solarizedDark">
+                      Solarized Dark
+                    </SelectItem>
+                    <SelectItem value="solarizedLight">
+                      Solarized Light
+                    </SelectItem>
+                    <SelectItem value="oneDark">One Dark</SelectItem>
+                    <SelectItem value="tokyoNight">Tokyo Night</SelectItem>
+                    <SelectItem value="ayuDark">Ayu Dark</SelectItem>
+                    <SelectItem value="ayuLight">Ayu Light</SelectItem>
+                    <SelectItem value="materialTheme">
+                      Material Theme
+                    </SelectItem>
+                    <SelectItem value="palenight">Palenight</SelectItem>
+                    <SelectItem value="oceanicNext">Oceanic Next</SelectItem>
+                    <SelectItem value="nightOwl">Night Owl</SelectItem>
+                    <SelectItem value="synthwave84">Synthwave '84</SelectItem>
+                    <SelectItem value="cobalt2">Cobalt2</SelectItem>
+                    <SelectItem value="snazzy">Snazzy</SelectItem>
+                    <SelectItem value="atomOneDark">Atom One Dark</SelectItem>
+                    <SelectItem value="catppuccinMocha">
+                      Catppuccin Mocha
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormDescription>
+                  {t("hosts.chooseTerminalTheme")}
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={control}
+            name="terminalConfig.fontFamily"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t("hosts.terminalFont")}</FormLabel>
+                <Select onValueChange={field.onChange} value={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder={t("hosts.selectFont")} />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="Caskaydia Cove Nerd Font Mono">
+                      Caskaydia Cove Nerd Font Mono
+                    </SelectItem>
+                    <SelectItem value="JetBrains Mono">
+                      JetBrains Mono
+                    </SelectItem>
+                    <SelectItem value="Fira Code">Fira Code</SelectItem>
+                    <SelectItem value="Cascadia Code">Cascadia Code</SelectItem>
+                    <SelectItem value="Source Code Pro">
+                      Source Code Pro
+                    </SelectItem>
+                    <SelectItem value="SF Mono">SF Mono</SelectItem>
+                    <SelectItem value="Consolas">Consolas</SelectItem>
+                    <SelectItem value="Monaco">Monaco</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormDescription>
+                  {t("hosts.chooseTerminalFont")}
+                </FormDescription>
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={control}
+            name="terminalConfig.fontSize"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>
+                  {t("hosts.fontSizeValue", {
+                    value: field.value,
+                  })}
+                </FormLabel>
+                <FormControl>
+                  <Slider
+                    min={8}
+                    max={24}
+                    step={1}
+                    value={[field.value]}
+                    onValueChange={([value]) => field.onChange(value)}
+                  />
+                </FormControl>
+                <FormDescription>{t("hosts.adjustFontSize")}</FormDescription>
+              </FormItem>
+            )}
+          />
+
           <FormField
             control={control}
             name="terminalConfig.cursorStyle"
diff --git a/src/ui/desktop/apps/host-manager/hosts/tabs/HostTunnelTab.tsx b/src/ui/desktop/apps/host-manager/hosts/tabs/HostTunnelTab.tsx
index 282515a0..ce43840c 100644
--- a/src/ui/desktop/apps/host-manager/hosts/tabs/HostTunnelTab.tsx
+++ b/src/ui/desktop/apps/host-manager/hosts/tabs/HostTunnelTab.tsx
@@ -314,7 +314,7 @@ export function HostTunnelTab({
                                               type="button"
                                               variant="ghost"
                                               size="sm"
-                                              className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
+                                              className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-surface-hover focus:bg-surface-hover focus:outline-none"
                                               onClick={() =>
                                                 handleSshConfigClick(
                                                   config,
diff --git a/src/ui/desktop/apps/tools/SSHToolsSidebar.tsx b/src/ui/desktop/apps/tools/SSHToolsSidebar.tsx
index 35986bfc..4cafbbda 100644
--- a/src/ui/desktop/apps/tools/SSHToolsSidebar.tsx
+++ b/src/ui/desktop/apps/tools/SSHToolsSidebar.tsx
@@ -1184,7 +1184,7 @@ export function SSHToolsSidebar({
                                   size="sm"
                                   className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
                                     selectedTabIds.includes(tab.id)
-                                      ? "text-foreground bg-gray-700"
+                                      ? "text-foreground bg-surface"
                                       : "text-foreground-subtle"
                                   }`}
                                   onClick={() => handleTabToggle(tab.id)}
@@ -1266,7 +1266,7 @@ export function SSHToolsSidebar({
                                   size="sm"
                                   className={`rounded-full px-3 py-1 text-xs flex items-center gap-1 ${
                                     selectedSnippetTabIds.includes(tab.id)
-                                      ? "text-foreground bg-gray-700"
+                                      ? "text-foreground bg-surface"
                                       : "text-foreground-subtle"
                                   }`}
                                   onClick={() => handleSnippetTabToggle(tab.id)}
@@ -1415,7 +1415,7 @@ export function SSHToolsSidebar({
                                           }
                                           onDrop={(e) => handleDrop(e, snippet)}
                                           onDragEnd={handleDragEnd}
-                                          className={`bg-field border border-input rounded-lg cursor-move hover:shadow-lg hover:border-gray-400/50 hover:bg-hover-alt transition-all duration-200 p-3 group ${
+                                          className={`bg-field border border-input rounded-lg cursor-move hover:shadow-lg hover:border-edge-hover hover:bg-hover-alt transition-all duration-200 p-3 group ${
                                             draggedSnippet?.id === snippet.id
                                               ? "opacity-50"
                                               : ""
@@ -1638,7 +1638,7 @@ export function SSHToolsSidebar({
                           {filteredCommands.map((command, index) => (
                             <div
                               key={index}
-                              className="bg-canvas border-2 border-edge rounded-md px-3 py-2.5 hover:bg-hover-alt hover:border-gray-600 transition-all duration-200 group h-12 flex items-center"
+                              className="bg-canvas border-2 border-edge rounded-md px-3 py-2.5 hover:bg-hover-alt hover:border-edge-hover transition-all duration-200 group h-12 flex items-center"
                             >
                               <div className="flex items-center justify-between gap-2 w-full min-w-0">
                                 <span
@@ -1729,7 +1729,7 @@ export function SSHToolsSidebar({
                                       ${
                                         isAssigned
                                           ? "bg-canvas/50 text-muted-foreground cursor-not-allowed opacity-50"
-                                          : "bg-canvas border border-edge hover:border-gray-400 hover:bg-field"
+                                          : "bg-canvas border border-edge hover:border-edge-hover hover:bg-field"
                                       }
                                       ${isDragging ? "opacity-50" : ""}
                                     `}
@@ -1786,11 +1786,11 @@ export function SSHToolsSidebar({
                                         ${
                                           isEmpty
                                             ? "border-dashed border-edge"
-                                            : "border-solid border-gray-400 bg-gray-500/10"
+                                            : "border-solid border-edge-hover bg-surface"
                                         }
                                         ${
                                           isHovered && draggedTabId
-                                            ? "border-gray-500 bg-gray-500/20 ring-2 ring-gray-500/50"
+                                            ? "border-edge-hover bg-surface ring-2 ring-edge-hover"
                                             : ""
                                         }
                                       `}
diff --git a/src/ui/desktop/navigation/AppView.tsx b/src/ui/desktop/navigation/AppView.tsx
index 9ee997be..3356b36b 100644
--- a/src/ui/desktop/navigation/AppView.tsx
+++ b/src/ui/desktop/navigation/AppView.tsx
@@ -411,7 +411,7 @@ export function AppView({
     const handleStyle = {
       pointerEvents: "auto",
       zIndex: 12,
-      background: isDarkMode ? "#303032" : "#e5e7eb",
+      background: "var(--border-base)",
     } as React.CSSProperties;
     const commonGroupProps: {
       onLayout: () => void;
diff --git a/src/ui/desktop/navigation/LeftSidebar.tsx b/src/ui/desktop/navigation/LeftSidebar.tsx
index 735a50e7..08bda3b6 100644
--- a/src/ui/desktop/navigation/LeftSidebar.tsx
+++ b/src/ui/desktop/navigation/LeftSidebar.tsx
@@ -585,7 +585,7 @@ export function LeftSidebar({
                       className="min-w-[var(--radix-popper-anchor-width)] bg-sidebar-accent text-sidebar-accent-foreground border border-border rounded-md shadow-2xl p-1"
                     >
                       <DropdownMenuItem
-                        className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
+                        className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
                         onClick={() => {
                           openUserProfileTab();
                         }}
@@ -594,7 +594,7 @@ export function LeftSidebar({
                       </DropdownMenuItem>
                       {isAdmin && (
                         <DropdownMenuItem
-                          className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
+                          className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
                           onClick={() => {
                             if (isAdmin) openAdminTab();
                           }}
@@ -603,7 +603,7 @@ export function LeftSidebar({
                         </DropdownMenuItem>
                       )}
                       <DropdownMenuItem
-                        className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
+                        className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
                         onClick={onLogout || handleLogout}
                       >
                         <span>{t("common.logout")}</span>
diff --git a/src/ui/mobile/apps/terminal/Terminal.tsx b/src/ui/mobile/apps/terminal/Terminal.tsx
index ccaa0c7c..efff09c3 100644
--- a/src/ui/mobile/apps/terminal/Terminal.tsx
+++ b/src/ui/mobile/apps/terminal/Terminal.tsx
@@ -69,11 +69,14 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
     const DEBOUNCE_MS = 140;
 
     // Auto-switch terminal theme based on app theme
-    const isDarkMode = appTheme === "dark" ||
-      (appTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
-    const themeColors = isDarkMode
-      ? TERMINAL_THEMES.termixDark.colors
-      : TERMINAL_THEMES.termixLight.colors;
+    const isDarkMode =
+      appTheme === "dark" ||
+      (appTheme === "system" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches);
+    const themeColors = {
+      background: isDarkMode ? "#0e0e10" : "#ffffff",
+      foreground: isDarkMode ? "#f7f7f7" : "#18181b",
+    };
 
     useEffect(() => {
       isVisibleRef.current = isVisible;
diff --git a/src/ui/mobile/navigation/LeftSidebar.tsx b/src/ui/mobile/navigation/LeftSidebar.tsx
index 1ca78a6b..1da1ba6f 100644
--- a/src/ui/mobile/navigation/LeftSidebar.tsx
+++ b/src/ui/mobile/navigation/LeftSidebar.tsx
@@ -11,12 +11,13 @@ import {
   SidebarProvider,
 } from "@/components/ui/sidebar.tsx";
 import { Button } from "@/components/ui/button.tsx";
-import { ChevronUp, Menu, User2 } from "lucide-react";
+import { ChevronUp, Menu, User2, Moon, Sun } from "lucide-react";
 import React, { useState, useEffect, useMemo, useCallback } from "react";
 import { Separator } from "@/components/ui/separator.tsx";
 import { FolderCard } from "@/ui/mobile/navigation/hosts/FolderCard.tsx";
 import { getSSHHosts, logoutUser } from "@/ui/main-axios.ts";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "@/components/theme-provider";
 import { Input } from "@/components/ui/input.tsx";
 import {
   DropdownMenu,
@@ -81,6 +82,7 @@ export function LeftSidebar({
   username,
 }: LeftSidebarProps) {
   const { t } = useTranslation();
+  const { theme, setTheme } = useTheme();
   const [hosts, setHosts] = useState<SSHHost[]>([]);
   const [hostsLoading] = useState(false);
   const [hostsError, setHostsError] = useState<string | null>(null);
@@ -252,7 +254,23 @@ export function LeftSidebar({
                     className="min-w-[var(--radix-popper-anchor-width)] bg-sidebar-accent text-sidebar-accent-foreground border border-border rounded-md shadow-2xl p-1"
                   >
                     <DropdownMenuItem
-                      className="rounded px-2 py-1.5 hover:bg-white/15 hover:text-accent-foreground focus:bg-white/20 focus:text-accent-foreground cursor-pointer focus:outline-none"
+                      className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
+                      onClick={() =>
+                        setTheme(theme === "dark" ? "light" : "dark")
+                      }
+                    >
+                      {theme === "dark" ? (
+                        <>
+                          <span>{t("theme.switchToLight")}</span>
+                        </>
+                      ) : (
+                        <>
+                          <span>{t("theme.switchToDark")}</span>
+                        </>
+                      )}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      className="rounded px-2 py-1.5 hover:bg-surface-hover hover:text-accent-foreground focus:bg-surface-hover focus:text-accent-foreground cursor-pointer focus:outline-none"
                       onClick={handleLogout}
                     >
                       <span>{t("common.logout")}</span>