diff --git a/web/src/app.css b/web/src/app.css
index a07fbe76..ace54fb3 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -1,61 +1,73 @@
 :root {
     --primary: #0a0a0f;
-    --secondary: #e1e1e1;
+    --secondary: #f5f5f5;
 
     --white: #ffffff;
-    --gray: #6b7280;
+    --gray: #9ca3af;
 
     --red: #ef4444;
     --medium-red: #dc2626;
     --dark-red: #b91c1c;
     --green: #10b981;
-    --blue: #22d3ee;
-    --cyan: #22d3ee;
-    --cyan-glow: rgba(34, 211, 238, 0.3);
+    --blue: #3b82f6;
+    --cyan: #f97316;
+    --cyan-glow: rgba(249, 115, 22, 0.35);
     --magenta: #ec4899;
     --purple: #8b5cf6;
-    --orange: #f59e0b;
+    --orange: #f97316;
+    --amber: #f59e0b;
 
-    --focus-ring: solid 2px var(--cyan);
+    /* Glassmorphism Variables */
+    --glass-bg: rgba(255, 255, 255, 0.05);
+    --glass-bg-light: rgba(255, 255, 255, 0.08);
+    --glass-bg-medium: rgba(255, 255, 255, 0.12);
+    --glass-border: rgba(255, 255, 255, 0.15);
+    --glass-border-light: rgba(255, 255, 255, 0.1);
+    --glass-blur: blur(16px);
+    --glass-blur-heavy: blur(24px);
+    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    --glass-shadow-light: 0 4px 16px rgba(0, 0, 0, 0.2);
+
+    --focus-ring: solid 2px var(--orange);
     --focus-ring-offset: -2px;
 
-    --button: #111118;
-    --button-hover: #1a1a24;
-    --button-press: #222230;
-    --button-active-hover: #22d3ee;
+    --button: rgba(255, 255, 255, 0.06);
+    --button-hover: rgba(249, 115, 22, 0.15);
+    --button-press: rgba(249, 115, 22, 0.25);
+    --button-active-hover: #f97316;
 
-    --button-hover-transparent: rgba(34, 211, 238, 0.08);
-    --button-press-transparent: rgba(34, 211, 238, 0.12);
-    --button-stroke: rgba(34, 211, 238, 0.1);
-    --button-text: #e1e1e1;
-    --button-box-shadow: 0 0 0 1px var(--button-stroke) inset;
+    --button-hover-transparent: rgba(249, 115, 22, 0.1);
+    --button-press-transparent: rgba(249, 115, 22, 0.18);
+    --button-stroke: rgba(249, 115, 22, 0.2);
+    --button-text: #f5f5f5;
+    --button-box-shadow: 0 0 0 1px var(--glass-border-light) inset;
 
-    --button-elevated: #181820;
-    --button-elevated-hover: #1f1f2a;
-    --button-elevated-press: #282835;
-    --button-elevated-shimmer: #2a2a38;
+    --button-elevated: rgba(255, 255, 255, 0.08);
+    --button-elevated-hover: rgba(249, 115, 22, 0.12);
+    --button-elevated-press: rgba(249, 115, 22, 0.2);
+    --button-elevated-shimmer: rgba(249, 115, 22, 0.15);
 
-    --popover-glow: rgba(34, 211, 238, 0.15);
+    --popover-glow: rgba(249, 115, 22, 0.2);
 
-    --popup-bg: #0f0f16;
-    --popup-stroke: rgba(34, 211, 238, 0.12);
+    --popup-bg: rgba(15, 15, 22, 0.85);
+    --popup-stroke: rgba(249, 115, 22, 0.15);
 
-    --dialog-backdrop: rgba(0, 0, 0, 0.6);
+    --dialog-backdrop: rgba(0, 0, 0, 0.7);
 
-    --sidebar-bg: #08080c;
-    --sidebar-highlight: #22d3ee;
-    --sidebar-stroke: rgba(34, 211, 238, 0.08);
+    --sidebar-bg: rgba(8, 8, 12, 0.9);
+    --sidebar-highlight: #f97316;
+    --sidebar-stroke: rgba(249, 115, 22, 0.12);
 
-    --content-border: rgba(34, 211, 238, 0.06);
+    --content-border: rgba(249, 115, 22, 0.08);
     --content-border-thickness: 1px;
 
-    --input-border: #22d3ee;
+    --input-border: #f97316;
 
-    --toggle-bg: #2a2a35;
-    --toggle-bg-enabled: #22d3ee;
+    --toggle-bg: rgba(255, 255, 255, 0.1);
+    --toggle-bg-enabled: #f97316;
 
     --padding: 12px;
-    --border-radius: 11px;
+    --border-radius: 14px;
 
     --sidebar-width: 80px;
     --sidebar-font-size: 11px;
@@ -99,52 +111,62 @@
         var(--button-elevated-shimmer),
         var(--button-elevated)
     );
+
+    /* Gradient accents */
+    --gradient-orange: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
+    --gradient-glow: linear-gradient(135deg, rgba(249, 115, 22, 0.3) 0%, rgba(245, 158, 11, 0.2) 100%);
 }
 
 [data-theme="dark"] {
     --primary: #0a0a0f;
-    --secondary: #e1e1e1;
+    --secondary: #f5f5f5;
 
-    --gray: #6b7280;
+    --gray: #9ca3af;
 
-    --blue: #22d3ee;
-    --cyan: #22d3ee;
-    --cyan-glow: rgba(34, 211, 238, 0.3);
+    --blue: #3b82f6;
+    --cyan: #f97316;
+    --cyan-glow: rgba(249, 115, 22, 0.35);
     --green: #10b981;
 
-    --button: #111118;
-    --button-hover: #1a1a24;
-    --button-press: #222230;
+    --glass-bg: rgba(255, 255, 255, 0.05);
+    --glass-bg-light: rgba(255, 255, 255, 0.08);
+    --glass-bg-medium: rgba(255, 255, 255, 0.12);
+    --glass-border: rgba(255, 255, 255, 0.15);
+    --glass-border-light: rgba(255, 255, 255, 0.1);
 
-    --button-active-hover: #22d3ee;
+    --button: rgba(255, 255, 255, 0.06);
+    --button-hover: rgba(249, 115, 22, 0.15);
+    --button-press: rgba(249, 115, 22, 0.25);
 
-    --button-hover-transparent: rgba(34, 211, 238, 0.08);
-    --button-press-transparent: rgba(34, 211, 238, 0.12);
-    --button-stroke: rgba(34, 211, 238, 0.1);
-    --button-text: #e1e1e1;
-    --button-box-shadow: 0 0 0 1px var(--button-stroke) inset;
+    --button-active-hover: #f97316;
 
-    --button-elevated: #181820;
-    --button-elevated-hover: #1f1f2a;
-    --button-elevated-press: #282835;
+    --button-hover-transparent: rgba(249, 115, 22, 0.1);
+    --button-press-transparent: rgba(249, 115, 22, 0.18);
+    --button-stroke: rgba(249, 115, 22, 0.2);
+    --button-text: #f5f5f5;
+    --button-box-shadow: 0 0 0 1px var(--glass-border-light) inset;
 
-    --popover-glow: rgba(34, 211, 238, 0.15);
+    --button-elevated: rgba(255, 255, 255, 0.08);
+    --button-elevated-hover: rgba(249, 115, 22, 0.12);
+    --button-elevated-press: rgba(249, 115, 22, 0.2);
 
-    --popup-bg: #0f0f16;
-    --popup-stroke: rgba(34, 211, 238, 0.12);
+    --popover-glow: rgba(249, 115, 22, 0.2);
 
-    --dialog-backdrop: rgba(0, 0, 0, 0.6);
+    --popup-bg: rgba(15, 15, 22, 0.85);
+    --popup-stroke: rgba(249, 115, 22, 0.15);
 
-    --sidebar-bg: #08080c;
-    --sidebar-highlight: #22d3ee;
-    --sidebar-stroke: rgba(34, 211, 238, 0.08);
+    --dialog-backdrop: rgba(0, 0, 0, 0.7);
 
-    --content-border: rgba(34, 211, 238, 0.06);
+    --sidebar-bg: rgba(8, 8, 12, 0.9);
+    --sidebar-highlight: #f97316;
+    --sidebar-stroke: rgba(249, 115, 22, 0.12);
 
-    --input-border: #22d3ee;
+    --content-border: rgba(249, 115, 22, 0.08);
 
-    --toggle-bg: #2a2a35;
-    --toggle-bg-enabled: #22d3ee;
+    --input-border: #f97316;
+
+    --toggle-bg: rgba(255, 255, 255, 0.1);
+    --toggle-bg-enabled: #f97316;
 
     --sidebar-mobile-gradient: linear-gradient(
         90deg,
@@ -189,6 +211,8 @@ body {
     height: 100vh;
     overflow: hidden;
     overscroll-behavior-y: none;
+    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%);
+    background-attachment: fixed;
 }
 
 * {
@@ -206,19 +230,24 @@ body {
 
 ::selection {
     color: var(--primary);
-    background: #22d3ee;
+    background: #f97316;
 }
 
 a {
     color: inherit;
     text-underline-offset: 3px;
     -webkit-touch-callout: none;
+    transition: color 0.2s ease;
 }
 
 a:visited {
     color: inherit;
 }
 
+a:hover {
+    color: var(--orange);
+}
+
 svg,
 img {
     pointer-events: none;
@@ -228,15 +257,19 @@ button, .button {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 6px 13px;
-    gap: 6px;
+    padding: 8px 16px;
+    gap: 8px;
     border: none;
     border-radius: var(--border-radius);
-    font-size: 14.5px;
+    font-size: 14px;
     cursor: pointer;
-    background-color: var(--button);
+    background: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
     color: var(--button-text);
-    box-shadow: var(--button-box-shadow);
+    box-shadow: var(--button-box-shadow), var(--glass-shadow-light);
+    border: 1px solid var(--glass-border-light);
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 :focus-visible {
@@ -248,6 +281,7 @@ a:focus-visible,
 select:focus-visible {
     outline: var(--focus-ring);
     outline-offset: var(--focus-ring-offset);
+    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
 }
 
 a:not(.sidebar-tab):not(.subnav-tab):focus-visible {
@@ -256,12 +290,15 @@ a:not(.sidebar-tab):not(.subnav-tab):focus-visible {
 }
 
 .button.elevated {
-    background-color: var(--button-elevated);
+    background: var(--glass-bg-light);
+    border: 1px solid var(--glass-border);
 }
 
 .button.active {
     color: var(--primary);
-    background-color: var(--secondary);
+    background: var(--gradient-orange);
+    border-color: transparent;
+    box-shadow: 0 0 24px rgba(249, 115, 22, 0.4);
 }
 
 /* important is used because active class is toggled by state */
@@ -269,41 +306,47 @@ a:not(.sidebar-tab):not(.subnav-tab):focus-visible {
 .button.active:focus-visible,
 a.active:focus-visible {
     color: var(--white) !important;
-    background-color: var(--blue) !important;
+    background: var(--orange) !important;
 }
 
 @media (hover: hover) {
     .button:hover {
-        background-color: var(--button-hover);
+        background: var(--button-hover);
+        border-color: rgba(249, 115, 22, 0.3);
+        box-shadow: 0 0 20px rgba(249, 115, 22, 0.15);
+        transform: translateY(-1px);
     }
 
     .button.elevated:not(.color):hover {
-        background-color: var(--button-elevated-hover);
+        background: var(--button-elevated-hover);
     }
 
     .button.active:not(.color):hover {
-        background-color: var(--button-active-hover);
+        background: linear-gradient(135deg, #fb923c 0%, #fbbf24 100%);
+        box-shadow: 0 0 28px rgba(249, 115, 22, 0.5);
     }
 }
 
 .button:active {
-    background-color: var(--button-press);
+    background: var(--button-press);
+    transform: translateY(0);
 }
 
 .button.elevated:not(.color):active {
-    background-color: var(--button-elevated-press);
+    background: var(--button-elevated-press);
 }
 
 .button.elevated {
-    box-shadow: none;
+    box-shadow: var(--glass-shadow-light);
 }
 
 .button.active:not(.color):active {
-    background-color: var(--button-active-hover);
+    background: var(--button-active-hover);
 }
 
 button[disabled] {
     cursor: default;
+    opacity: 0.5;
 }
 
 /* workaround for typing into inputs being ignored on iPadOS 15 */
@@ -414,11 +457,11 @@ h6 {
     line-height: 1.3;
     margin-block-end: -0.3rem;
     padding: 6px 0;
-    border-bottom: 1.5px solid var(--button-elevated-hover);
+    border-bottom: 1.5px solid var(--glass-border);
 }
 
 .long-text img {
-    border-radius: 6px;
+    border-radius: 8px;
 }
 
 table,
@@ -430,12 +473,14 @@ th {
     border-collapse: collapse;
     text-align: center;
     padding: 3px 8px;
+    border-color: var(--glass-border);
 }
 
 code {
-    background: var(--button-elevated);
-    padding: 1px 4px;
-    border-radius: 4px;
+    background: var(--glass-bg-medium);
+    padding: 2px 6px;
+    border-radius: 6px;
+    border: 1px solid var(--glass-border-light);
 }
 
 tr td:first-child,
@@ -476,3 +521,44 @@ tr th:first-child {
         transform: rotate(360deg);
     }
 }
+
+/* Glassmorphism utility classes */
+.glass {
+    background: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--border-radius);
+}
+
+.glass-light {
+    background: var(--glass-bg-light);
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border: 1px solid var(--glass-border-light);
+    border-radius: var(--border-radius);
+}
+
+.glass-heavy {
+    background: var(--glass-bg-medium);
+    backdrop-filter: var(--glass-blur-heavy);
+    -webkit-backdrop-filter: var(--glass-blur-heavy);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--border-radius);
+    box-shadow: var(--glass-shadow);
+}
+
+.glow-orange {
+    box-shadow: 0 0 30px rgba(249, 115, 22, 0.3);
+}
+
+.accent-text {
+    color: var(--orange);
+}
+
+.accent-gradient {
+    background: var(--gradient-orange);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
diff --git a/web/src/components/buttons/Switcher.svelte b/web/src/components/buttons/Switcher.svelte
index 07f635fc..7ce70d2b 100644
--- a/web/src/components/buttons/Switcher.svelte
+++ b/web/src/components/buttons/Switcher.svelte
@@ -58,21 +58,25 @@
     }
 
     .switcher.big {
-        background: var(--button);
-        box-shadow: var(--button-box-shadow);
+        background: var(--glass-bg);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        border: 1px solid var(--glass-border-light);
+        box-shadow: var(--glass-shadow-light);
         padding: var(--switcher-padding);
         gap: calc(var(--switcher-padding) - 1.5px);
     }
 
     .switcher :global(.button.active) {
         pointer-events: none;
-        background: #22d3ee;
+        background: var(--gradient-orange);
         color: var(--primary);
-        box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
+        box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
+        border-color: transparent;
     }
 
     .switcher :global(.button.active:hover) {
-        background: #22d3ee;
+        background: var(--gradient-orange);
     }
 
     .switcher.big :global(.button) {
diff --git a/web/src/components/buttons/VerticalActionButton.svelte b/web/src/components/buttons/VerticalActionButton.svelte
index 14602500..3e679269 100644
--- a/web/src/components/buttons/VerticalActionButton.svelte
+++ b/web/src/components/buttons/VerticalActionButton.svelte
@@ -25,11 +25,25 @@
         line-height: 1;
         padding: var(--padding);
         gap: calc(var(--padding) / 2);
+        background: var(--glass-bg-light);
+        border: 1px solid var(--glass-border-light);
+        transition: all 0.25s ease;
+    }
+
+    .button.vertical:hover {
+        background: var(--button-hover);
+        border-color: rgba(249, 115, 22, 0.3);
+        box-shadow: 0 0 16px rgba(249, 115, 22, 0.15);
     }
 
     .button.vertical :global(svg) {
         width: 24px;
         height: 24px;
+        transition: color 0.2s ease;
+    }
+
+    .button.vertical:hover :global(svg) {
+        color: var(--orange);
     }
 
     .button.vertical.fill {
diff --git a/web/src/components/dialog/DialogButton.svelte b/web/src/components/dialog/DialogButton.svelte
index 69aaf722..11d7b109 100644
--- a/web/src/components/dialog/DialogButton.svelte
+++ b/web/src/components/dialog/DialogButton.svelte
@@ -51,20 +51,55 @@
         text-decoration: none;
         font-weight: 500;
         width: 100%;
+        background: var(--glass-bg-light);
+        border: 1px solid var(--glass-border-light);
+        transition: all 0.25s ease;
+    }
+
+    .link-button:hover {
+        background: var(--button-hover);
+        border-color: rgba(249, 115, 22, 0.3);
     }
 
     .popup-button {
         width: 100%;
-        height: 40px;
-        transition: 0.2s opacity;
+        height: 42px;
+        transition: all 0.25s ease;
+        background: var(--glass-bg-light);
+        border: 1px solid var(--glass-border-light);
+    }
+
+    .popup-button:hover {
+        background: var(--button-hover);
+        border-color: rgba(249, 115, 22, 0.3);
+        box-shadow: 0 0 20px rgba(249, 115, 22, 0.15);
+    }
+
+    .popup-button.active,
+    .link-button.active {
+        background: var(--gradient-orange);
+        border-color: transparent;
+        box-shadow: 0 0 24px rgba(249, 115, 22, 0.4);
+    }
+
+    .popup-button.active:hover,
+    .link-button.active:hover {
+        box-shadow: 0 0 32px rgba(249, 115, 22, 0.5);
     }
 
     .popup-button.red {
-        background-color: var(--red);
+        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
         color: var(--white);
+        border-color: transparent;
+        box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
+    }
+
+    .popup-button.red:hover {
+        box-shadow: 0 0 28px rgba(239, 68, 68, 0.4);
     }
 
     .popup-button[disabled] {
-        opacity: 0.6;
+        opacity: 0.5;
+        cursor: not-allowed;
     }
 </style>
diff --git a/web/src/components/dialog/DialogHolder.svelte b/web/src/components/dialog/DialogHolder.svelte
index b519340d..f8b0438e 100644
--- a/web/src/components/dialog/DialogHolder.svelte
+++ b/web/src/components/dialog/DialogHolder.svelte
@@ -81,13 +81,13 @@
 
         background-color: var(--dialog-backdrop);
 
-        backdrop-filter: blur(7px);
-        -webkit-backdrop-filter: blur(7px);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
 
         opacity: 0;
 
         will-change: opacity;
-        transition: opacity 0.2s;
+        transition: opacity 0.25s ease;
     }
 
     #dialog-backdrop.visible {
@@ -100,17 +100,22 @@
     }
 
     :global(.dialog-body) {
-        --dialog-padding: 18px;
+        --dialog-padding: 20px;
 
         display: flex;
         flex-direction: column;
         align-items: center;
 
-        background: var(--popup-bg);
-        box-shadow: 0 0 0 2px var(--popup-stroke) inset;
-        border-radius: 29px;
+        background: var(--glass-bg-medium);
+        backdrop-filter: var(--glass-blur-heavy);
+        -webkit-backdrop-filter: var(--glass-blur-heavy);
+        border: 1px solid var(--glass-border);
+        border-radius: 24px;
 
-        filter: drop-shadow(0 0 40px var(--button));
+        box-shadow: 
+            0 0 0 1px rgba(249, 115, 22, 0.1) inset,
+            0 8px 40px rgba(0, 0, 0, 0.4),
+            0 0 60px rgba(249, 115, 22, 0.1);
 
         padding: var(--dialog-padding);
 
@@ -146,7 +151,9 @@
                     )
                 )
             ) !important;
-            box-shadow: 0 0 0 2px var(--popup-stroke) inset;
+            box-shadow: 
+                0 0 0 1px rgba(249, 115, 22, 0.15) inset,
+                0 8px 40px rgba(0, 0, 0, 0.4);
         }
     }
 
diff --git a/web/src/components/dialog/PickerItem.svelte b/web/src/components/dialog/PickerItem.svelte
index 9b3eaaca..5ea3f9cc 100644
--- a/web/src/components/dialog/PickerItem.svelte
+++ b/web/src/components/dialog/PickerItem.svelte
@@ -137,9 +137,11 @@
     .picker-type {
         position: absolute;
         color: var(--white);
-        background: rgba(0, 0, 0, 0.5);
-        width: 24px;
-        height: 24px;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(8px);
+        -webkit-backdrop-filter: blur(8px);
+        width: 26px;
+        height: 26px;
         z-index: 3;
 
         display: flex;
@@ -150,7 +152,8 @@
         top: 6px;
         left: 6px;
 
-        border-radius: 6px;
+        border-radius: 8px;
+        border: 1px solid rgba(255, 255, 255, 0.15);
 
         pointer-events: none;
     }
diff --git a/web/src/components/misc/PopoverContainer.svelte b/web/src/components/misc/PopoverContainer.svelte
index 5a14ddd3..28e5d4a8 100644
--- a/web/src/components/misc/PopoverContainer.svelte
+++ b/web/src/components/misc/PopoverContainer.svelte
@@ -23,11 +23,14 @@
         display: flex;
         flex-direction: column;
         border-radius: 18px;
-        background: var(--button);
-        box-shadow: var(--button-box-shadow);
+        background: var(--glass-bg-medium);
+        backdrop-filter: var(--glass-blur-heavy);
+        -webkit-backdrop-filter: var(--glass-blur-heavy);
+        border: 1px solid var(--glass-border);
+        box-shadow: 
+            0 8px 32px rgba(0, 0, 0, 0.3),
+            0 0 40px rgba(249, 115, 22, 0.1);
 
-        filter: drop-shadow(0 0 8px var(--popover-glow))
-            drop-shadow(0 0 10px var(--popover-glow));
         position: relative;
         padding: var(--padding);
         gap: 6px;
diff --git a/web/src/components/queue/ProcessingQueueItem.svelte b/web/src/components/queue/ProcessingQueueItem.svelte
index c8c2e79c..315d67aa 100644
--- a/web/src/components/queue/ProcessingQueueItem.svelte
+++ b/web/src/components/queue/ProcessingQueueItem.svelte
@@ -268,9 +268,9 @@
 
     .processing-item {
         width: 100%;
-        padding: 8px 0;
-        gap: 8px;
-        border-bottom: 1.5px var(--button-elevated) solid;
+        padding: 10px 0;
+        gap: 10px;
+        border-bottom: 1px var(--glass-border-light) solid;
     }
 
     .processing-type {
@@ -360,14 +360,16 @@
         .file-actions {
             position: absolute;
             right: 0;
-            background-color: var(--button);
+            background: linear-gradient(90deg, transparent, var(--glass-bg-medium) 20%);
+            backdrop-filter: var(--glass-blur);
+            -webkit-backdrop-filter: var(--glass-blur);
             height: 90%;
             padding-left: 18px;
 
             transform: translateX(5px);
 
             opacity: 0;
-            transition: opacity 0.15s, transform 0.15s;
+            transition: opacity 0.2s ease, transform 0.2s ease;
 
             mask-image: linear-gradient(
                 90deg,
@@ -412,8 +414,15 @@
     .action-button {
         padding: 8px;
         height: auto;
+        background: var(--glass-bg-light);
+        border: 1px solid var(--glass-border-light);
         box-shadow: none;
-        transition: opacity 0.2s;
+        transition: all 0.2s ease;
+    }
+
+    .action-button:hover {
+        background: var(--button-hover);
+        border-color: rgba(249, 115, 22, 0.3);
     }
 
     .action-button :global(svg) {
diff --git a/web/src/components/queue/ProcessingStatus.svelte b/web/src/components/queue/ProcessingStatus.svelte
index bd0a7223..407f5ca0 100644
--- a/web/src/components/queue/ProcessingStatus.svelte
+++ b/web/src/components/queue/ProcessingStatus.svelte
@@ -59,18 +59,24 @@
         padding: 7px;
         border-radius: 30px;
 
-        filter: drop-shadow(0 0 3px var(--button-elevated-hover));
+        background: var(--glass-bg-light);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        border: 1px solid var(--glass-border-light);
+        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 
         transition:
             background-color 0.2s,
-            transform 0.2s;
+            transform 0.2s,
+            box-shadow 0.2s;
 
         will-change: transform, background-color;
     }
 
     #processing-status:focus-visible {
-        outline: 2px solid var(--secondary);
+        outline: 2px solid var(--orange);
         outline-offset: 2px;
+        box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
     }
 
     #processing-status:active {
@@ -78,20 +84,21 @@
     }
 
     #processing-status.completed {
-        box-shadow: 0 0 0 2px var(--blue) inset;
+        border-color: var(--orange);
+        box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
     }
 
     :global([data-theme="light"]) #processing-status.completed {
-        background-color: #e0eeff;
+        background-color: rgba(249, 115, 22, 0.1);
     }
 
     :global([data-theme="dark"]) #processing-status.completed {
-        background-color: #1f3249;
+        background-color: rgba(249, 115, 22, 0.15);
     }
 
     .icon-holder {
         display: flex;
-        background-color: var(--button-elevated-hover);
+        background: var(--glass-bg-medium);
         padding: 2px;
         border-radius: 20px;
         transition: background-color 0.2s;
@@ -106,7 +113,7 @@
     }
 
     .completed .icon-holder {
-        background-color: var(--blue);
+        background: var(--gradient-orange);
     }
 
     .completed .icon-holder :global(svg) {
@@ -123,7 +130,7 @@
     }
 
     #progress-ring circle {
-        stroke: var(--blue);
+        stroke: var(--orange);
         stroke-width: 4;
         stroke-dashoffset: 0;
     }
diff --git a/web/src/components/queue/ProgressBar.svelte b/web/src/components/queue/ProgressBar.svelte
index f5db2dc5..4b5f364b 100644
--- a/web/src/components/queue/ProgressBar.svelte
+++ b/web/src/components/queue/ProgressBar.svelte
@@ -34,14 +34,15 @@
 <style>
     .file-progress {
         width: 100%;
-        background-color: var(--button-elevated);
+        background: var(--glass-bg);
+        border: 1px solid var(--glass-border-light);
     }
 
     .file-progress,
     .file-progress .progress {
         height: 6px;
         border-radius: 10px;
-        transition: width 0.1s;
+        transition: width 0.15s ease;
     }
 
     .file-progress :global(.indeterminate-progress) {
@@ -49,6 +50,7 @@
     }
 
     .file-progress .progress {
-        background-color: var(--blue);
+        background: var(--gradient-orange);
+        box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
     }
 </style>
diff --git a/web/src/components/save/Omnibox.svelte b/web/src/components/save/Omnibox.svelte
index 8f38c489..034e87fb 100644
--- a/web/src/components/save/Omnibox.svelte
+++ b/web/src/components/save/Omnibox.svelte
@@ -239,25 +239,26 @@
         flex-direction: column;
         max-width: 640px;
         width: 100%;
-        gap: 6px;
+        gap: 8px;
         position: relative;
     }
 
     #input-container {
-        --input-padding: 10px;
+        --input-padding: 12px;
         display: flex;
-        box-shadow: 0 0 0 1.5px rgba(34, 211, 238, 0.3) inset;
-        /* webkit can't render the 1.5px box shadow properly,
-           so we duplicate the border as outline to fix it visually */
-        outline: 1.5px solid rgba(34, 211, 238, 0.3);
-        outline-offset: -1.5px;
+        background: var(--glass-bg);
+        backdrop-filter: var(--glass-blur);
+        -webkit-backdrop-filter: var(--glass-blur);
+        border: 1px solid var(--glass-border);
+        box-shadow: 
+            0 0 0 1px rgba(249, 115, 22, 0.15) inset,
+            0 4px 24px rgba(0, 0, 0, 0.2);
         border-radius: var(--border-radius);
         align-items: center;
         gap: var(--input-padding);
         font-size: 14px;
         flex: 1;
-        background: var(--button);
-        transition: all 0.2s ease;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     #input-container:not(.clear-visible) :global(#clear-button) {
@@ -286,13 +287,15 @@
     }
 
     #input-container.focused {
-        box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
-        outline: #22d3ee 2px solid;
-        outline-offset: -1px;
+        border-color: var(--orange);
+        box-shadow: 
+            0 0 0 1px rgba(249, 115, 22, 0.3) inset,
+            0 0 30px rgba(249, 115, 22, 0.2),
+            0 4px 24px rgba(0, 0, 0, 0.2);
     }
 
     #input-container.focused :global(#input-icons svg) {
-        stroke: var(--secondary);
+        stroke: var(--orange);
     }
 
     #input-container.downloadable :global(#input-icons svg) {
@@ -305,7 +308,7 @@
         margin: 0;
         padding: var(--input-padding) 0;
         padding-left: calc(var(--input-padding) + 28px);
-        height: 18px;
+        height: 20px;
 
         align-items: center;
 
@@ -345,9 +348,6 @@
     #action-container {
         display: flex;
         flex-direction: row;
-    }
-
-    #action-container {
         justify-content: space-between;
     }
 
@@ -357,14 +357,15 @@
 
     #instance-label {
         font-size: 13px;
-        color: var(--gray);
+        color: var(--orange);
         font-weight: 500;
+        opacity: 0.8;
     }
 
     @media screen and (max-width: 440px) {
         #action-container {
             flex-direction: column;
-            gap: 5px;
+            gap: 6px;
         }
 
         #action-container :global(.button) {
diff --git a/web/src/components/save/OmniboxIcon.svelte b/web/src/components/save/OmniboxIcon.svelte
index dbaa0aa1..cba44cdf 100644
--- a/web/src/components/save/OmniboxIcon.svelte
+++ b/web/src/components/save/OmniboxIcon.svelte
@@ -72,6 +72,12 @@
         stroke: var(--gray);
         stroke-width: 2px;
         will-change: transform;
+        transition: stroke 0.25s ease;
+    }
+
+    .loading #input-icons :global(svg),
+    #input-icons.loading :global(svg) {
+        stroke: var(--orange);
     }
 
     .input-icon {
diff --git a/web/src/components/save/buttons/ClearButton.svelte b/web/src/components/save/buttons/ClearButton.svelte
index a5f6d2cc..9bda3879 100644
--- a/web/src/components/save/buttons/ClearButton.svelte
+++ b/web/src/components/save/buttons/ClearButton.svelte
@@ -16,8 +16,16 @@
 
 <style>
     #clear-button {
-        padding: 3px;
+        padding: 4px;
         border-radius: 100%;
+        background: var(--glass-bg-light);
+        border: 1px solid var(--glass-border-light);
+        transition: all 0.2s ease;
+    }
+
+    #clear-button:hover {
+        background: rgba(249, 115, 22, 0.15);
+        border-color: rgba(249, 115, 22, 0.3);
     }
 
     #clear-button :global(svg) {
@@ -26,5 +34,10 @@
         stroke-width: 2px;
         stroke: var(--secondary);
         will-change: transform;
+        transition: stroke 0.2s ease;
+    }
+
+    #clear-button:hover :global(svg) {
+        stroke: var(--orange);
     }
 </style>
diff --git a/web/src/components/save/buttons/DownloadButton.svelte b/web/src/components/save/buttons/DownloadButton.svelte
index 8c70d582..1e262c22 100644
--- a/web/src/components/save/buttons/DownloadButton.svelte
+++ b/web/src/components/save/buttons/DownloadButton.svelte
@@ -70,22 +70,24 @@
         justify-content: center;
 
         height: 100%;
-        min-width: 48px;
-        width: 48px;
+        min-width: 52px;
+        width: 52px;
 
         border-radius: 0;
 
-        /* visually align the button, +1.5px because of inset box-shadow on parent */
-        padding: 0 13.5px 0 12px;
+        /* visually align the button */
+        padding: 0 14px 0 12px;
 
-        background: none;
+        background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
         box-shadow: none;
         transform: none;
+        border: none;
 
-        border-left: 1.5px rgba(34, 211, 238, 0.3) solid;
+        border-left: 1px rgba(249, 115, 22, 0.3) solid;
         border-top-right-radius: var(--border-radius);
         border-bottom-right-radius: var(--border-radius);
-        color: #22d3ee;
+        color: var(--orange);
+        transition: all 0.25s ease;
     }
 
     #download-button:dir(rtl) {
@@ -93,18 +95,18 @@
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
 
-        border-right: 1.5px rgba(34, 211, 238, 0.3) solid;
+        border-right: 1px rgba(249, 115, 22, 0.3) solid;
         border-top-left-radius: var(--border-radius);
         border-bottom-left-radius: var(--border-radius);
 
         direction: ltr;
-        padding: 0 12px 0 15px;
+        padding: 0 12px 0 14px;
     }
 
     #download-state {
         font-size: 24px;
         font-family: "Noto Sans Mono", "IBM Plex Mono", monospace;
-        font-weight: 400;
+        font-weight: 500;
 
         text-align: center;
         text-indent: -5px;
@@ -116,25 +118,28 @@
     #download-button:disabled {
         cursor: unset;
         color: var(--gray);
+        opacity: 0.6;
     }
 
     :global(#input-container.focused) #download-button {
-        border-left: 2px #22d3ee solid;
-        color: #22d3ee;
+        border-left: 1px var(--orange) solid;
+        color: var(--orange);
+        background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
     }
 
     :global(#input-container.focused) #download-button:dir(rtl) {
         border-left: 0;
-        border-right: 2px #22d3ee solid;
+        border-right: 1px var(--orange) solid;
     }
 
     @media (hover: hover) {
         #download-button:hover:not(:disabled) {
-            background: var(--button-hover-transparent);
+            background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(245, 158, 11, 0.15) 100%);
+            box-shadow: 0 0 20px rgba(249, 115, 22, 0.2);
         }
     }
 
     #download-button:active:not(:disabled) {
-        background: var(--button-press-transparent);
+        background: linear-gradient(135deg, rgba(249, 115, 22, 0.35) 0%, rgba(245, 158, 11, 0.25) 100%);
     }
 </style>
diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte
index 6ea00f37..54097637 100644
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/web/src/components/settings/SettingsCategory.svelte
@@ -71,10 +71,10 @@
             box-shadow: none;
         }
         10% {
-            box-shadow: 0 0 0 3.5px var(--blue) inset;
+            box-shadow: 0 0 0 3.5px var(--orange) inset;
         }
         20%, 50% {
-            box-shadow: 0 0 0 3px var(--blue) inset;
+            box-shadow: 0 0 0 3px var(--orange) inset, 0 0 20px rgba(249, 115, 22, 0.2);
         }
         100% {
             box-shadow: none;
@@ -86,7 +86,7 @@
             box-shadow: none;
         }
         10%, 50% {
-            box-shadow: 0 0 0 3px var(--blue) inset;
+            box-shadow: 0 0 0 3px var(--orange) inset;
         }
         100% {
             box-shadow: none;
diff --git a/web/src/components/sidebar/CobaltLogo.svelte b/web/src/components/sidebar/CobaltLogo.svelte
index 6c88ab20..59730ca4 100644
--- a/web/src/components/sidebar/CobaltLogo.svelte
+++ b/web/src/components/sidebar/CobaltLogo.svelte
@@ -14,8 +14,14 @@
     #cobalt-logo img {
         width: 60px;
         height: auto;
-        filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.4));
+        filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.5));
         pointer-events: none;
+        transition: filter 0.3s ease, transform 0.3s ease;
+    }
+
+    #cobalt-logo:hover img {
+        filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.7));
+        transform: scale(1.05);
     }
 
     @media screen and (max-width: 535px) {
diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index 0c692731..117552a1 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -54,10 +54,14 @@
     }
 
     #sidebar {
-        background: var(--sidebar-bg);
+        background: var(--glass-bg);
+        backdrop-filter: var(--glass-blur-heavy);
+        -webkit-backdrop-filter: var(--glass-blur-heavy);
+        border-right: 1px solid var(--glass-border-light);
         height: 100vh;
         width: calc(var(--sidebar-width) + var(--sidebar-inner-padding) * 2);
         position: sticky;
+        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
     }
 
     #sidebar-tabs {
@@ -84,6 +88,9 @@
             align-items: flex-start;
             z-index: 3;
             padding: var(--sidebar-inner-padding) 0;
+            border-right: none;
+            border-top: 1px solid var(--glass-border-light);
+            box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
         }
 
         #sidebar::before {
diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte
index fb06d28e..11742235 100644
--- a/web/src/components/sidebar/SidebarTab.svelte
+++ b/web/src/components/sidebar/SidebarTab.svelte
@@ -57,14 +57,14 @@
         flex-direction: column;
         align-items: center;
         text-align: center;
-        gap: 3px;
-        padding: var(--sidebar-tab-padding) 3px;
+        gap: 4px;
+        padding: var(--sidebar-tab-padding) 4px;
         color: var(--sidebar-highlight);
         font-size: var(--sidebar-font-size);
-        opacity: 0.75;
+        opacity: 0.7;
         height: fit-content;
         border-radius: var(--border-radius);
-        transition: transform 0.2s;
+        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
 
         text-decoration: none;
         text-decoration-line: none;
@@ -72,12 +72,15 @@
         scroll-behavior: smooth;
 
         cursor: pointer;
+        background: transparent;
+        border: 1px solid transparent;
     }
 
     .sidebar-tab :global(svg) {
-        stroke-width: 1.2px;
+        stroke-width: 1.3px;
         height: 22px;
         width: 22px;
+        transition: transform 0.2s ease;
     }
 
     :global([data-iphone="true"] .sidebar-tab svg) {
@@ -86,13 +89,14 @@
 
     .sidebar-tab.active {
         color: var(--primary);
-        background: var(--sidebar-highlight);
+        background: var(--gradient-orange);
         opacity: 1;
         transform: none;
         transition: none;
         animation: pressButton 0.3s;
         cursor: default;
-        box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
+        box-shadow: 0 0 24px rgba(249, 115, 22, 0.5), 0 4px 12px rgba(249, 115, 22, 0.3);
+        border-color: transparent;
     }
 
     .sidebar-tab:not(.active):active {
@@ -106,7 +110,9 @@
     .beta-sign {
         position: absolute;
         transform: translateX(16px) translateY(-6px);
-        opacity: 0.7;
+        opacity: 0.8;
+        color: var(--orange);
+        font-weight: 600;
     }
 
     .tab-title {
@@ -122,7 +128,7 @@
             transform: scale(0.9);
         }
         50% {
-            transform: scale(1.015);
+            transform: scale(1.02);
         }
         100% {
             transform: scale(1);
@@ -131,12 +137,19 @@
 
     @media (hover: hover) {
         .sidebar-tab:hover:not(.active) {
-            background-color: var(--button-hover-transparent);
+            background: var(--glass-bg-light);
+            border-color: var(--glass-border-light);
+            box-shadow: 0 0 16px rgba(249, 115, 22, 0.15);
+        }
+
+        .sidebar-tab:hover:not(.active) :global(svg) {
+            transform: scale(1.1);
         }
 
         .sidebar-tab:active:not(.active),
         .sidebar-tab:focus:hover:not(.active) {
-            background-color: var(--button-press-transparent);
+            background: var(--button-press-transparent);
+            border-color: rgba(249, 115, 22, 0.3);
         }
 
         .sidebar-tab:hover:not(.active) {
@@ -146,13 +159,13 @@
         .sidebar-tab:active:not(.active),
         .sidebar-tab:focus:hover:not(.active) {
             opacity: 1;
-            box-shadow: 0 0 0 1px var(--sidebar-stroke) inset;
+            box-shadow: 0 0 20px rgba(249, 115, 22, 0.2);
         }
     }
 
     @media screen and (max-width: 535px) {
         .sidebar-tab {
-            padding: 5px var(--padding);
+            padding: 6px var(--padding);
             min-width: calc(var(--sidebar-width) / 2);
         }
 
diff --git a/web/src/components/subnav/PageNav.svelte b/web/src/components/subnav/PageNav.svelte
index a4e4c7b2..6a0ef4a3 100644
--- a/web/src/components/subnav/PageNav.svelte
+++ b/web/src/components/subnav/PageNav.svelte
@@ -200,11 +200,16 @@
 
         position: absolute;
         left: var(--back-padding);
+        border-radius: var(--border-radius);
+        transition: all 0.2s ease;
+    }
+
+    .back-button:hover {
+        color: var(--orange);
     }
 
     .back-button:active {
         background: var(--button-hover-transparent);
-        border-radius: var(--border-radius);
     }
 
     .back-button :global(svg) {