diff --git a/src-web/components/CookieDialog.tsx b/src-web/components/CookieDialog.tsx
index d14a22d5..5048a97c 100644
--- a/src-web/components/CookieDialog.tsx
+++ b/src-web/components/CookieDialog.tsx
@@ -28,7 +28,7 @@ export const CookieDialog = function ({ cookieJarId }: Props) {
 
   return (
     <div className="pb-2">
-      <table className="w-full text-xs mb-auto min-w-full max-w-full divide-y">
+      <table className="w-full text-xs mb-auto min-w-full max-w-full divide-y divide-background-highlight">
         <thead>
           <tr>
             <th className="py-2 text-left">Domain</th>
@@ -53,11 +53,6 @@ export const CookieDialog = function ({ cookieJarId }: Props) {
                   title="Delete"
                   className="ml-auto"
                   onClick={async () => {
-                    console.log(
-                      'DELETE COOKIE',
-                      c,
-                      cookieJar.cookies.filter((c2) => c2 !== c).length,
-                    );
                     await updateCookieJar.mutateAsync({
                       ...cookieJar,
                       cookies: cookieJar.cookies.filter((c2) => c2 !== c),
diff --git a/src-web/components/core/Dialog.tsx b/src-web/components/core/Dialog.tsx
index 015541d1..66d74db3 100644
--- a/src-web/components/core/Dialog.tsx
+++ b/src-web/components/core/Dialog.tsx
@@ -65,7 +65,7 @@ export function Dialog({
               'grid grid-rows-[auto_auto_minmax(0,1fr)]',
               'relative bg-background pointer-events-auto',
               'rounded-lg',
-              'border border-background-highlight shadow-lg shadow-[rgba(0,0,0,0.1)]',
+              'border border-background-highlight-secondary shadow-lg shadow-[rgba(0,0,0,0.1)]',
               'max-w-[calc(100vw-5rem)] max-h-[calc(100vh-6rem)]',
               size === 'sm' && 'w-[25rem] max-h-[80vh]',
               size === 'md' && 'w-[45rem] max-h-[80vh]',
diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx
index adf650ef..ee49bdea 100644
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -441,7 +441,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle'>, MenuPro
                   className={classNames(
                     className,
                     'h-auto bg-background rounded-md shadow-lg py-1.5 border',
-                    'border-background-highlight overflow-auto mb-1 mx-0.5',
+                    'border-background-highlight-secondary overflow-auto mb-1 mx-0.5',
                   )}
                 >
                   {filter && (
diff --git a/src-web/lib/theme/themes.ts b/src-web/lib/theme/themes.ts
index f0a99925..8afd56bb 100644
--- a/src-web/lib/theme/themes.ts
+++ b/src-web/lib/theme/themes.ts
@@ -32,11 +32,11 @@ export const yaakDark: YaakTheme = {
   id: 'yaak-dark',
   name: 'Yaak',
   background: new Color('hsl(244,23%,13%)', 'dark'),
-  backgroundHighlight: new Color('hsl(244,23%,13%)', 'dark').lift(0.17),
-  backgroundHighlightSecondary: new Color('hsl(244,23%,13%)', 'dark').lift(0.1),
-  foreground: new Color('#bcbad4', 'dark'),
-  foregroundSubtle: new Color('#bcbad4', 'dark').lower(0.25),
-  foregroundSubtler: new Color('#bcbad4', 'dark').lower(0.4),
+  backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'),
+  backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'),
+  foreground: new Color('hsl(245,23%,86%)', 'dark'),
+  foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'),
+  foregroundSubtler: new Color('hsl(245,18%,50%)', 'dark'),
 
   colors: {
     primary: new Color('hsl(266,100%,79%)', 'dark'),
@@ -61,14 +61,14 @@ export const yaakDark: YaakTheme = {
       },
     },
     input: {
-      backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.18),
+      backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
     },
     dialog: {
-      backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.11),
+      backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'),
     },
     sidebar: {
       background: new Color('hsl(243,23%,16%)', 'dark'),
-      backgroundHighlight: new Color('hsl(244,23%,16%)', 'dark').lift(0.08),
+      backgroundHighlight: new Color('hsl(244,23%,22%)', 'dark'),
     },
     responsePane: {
       background: new Color('hsl(243,23%,16%)', 'dark'),
diff --git a/src-web/lib/theme/window.ts b/src-web/lib/theme/window.ts
index 3dedf6a2..2b82a49c 100644
--- a/src-web/lib/theme/window.ts
+++ b/src-web/lib/theme/window.ts
@@ -65,7 +65,11 @@ function themeVariables(theme?: ThemeComponent, base?: CSSVariables): CSSVariabl
     '--fg-subtle': theme?.foregroundSubtle?.css() ?? theme?.foreground?.lower(0.2).css(),
     '--fg-subtler': theme?.foregroundSubtler?.css() ?? theme?.foreground?.lower(0.3).css(),
     '--border-focus': theme?.colors?.info?.css(),
-    '--shadow': theme?.shadow?.css() ?? Color.black().translucify(0.7).css(),
+    '--shadow':
+      theme?.shadow?.css() ??
+      Color.black()
+        .translucify(isThemeDark(theme ?? {}) ? 0.7 : 0.93)
+        .css(),
   };
 
   for (const [color, value] of Object.entries(theme?.colors ?? {})) {
@@ -180,7 +184,7 @@ function placeholderCSS(color: ColorName, colors?: Partial<RootColors>): string
   ].join('\n\n');
 }
 
-export function isThemeDark(theme: YaakTheme): boolean {
+export function isThemeDark(theme: ThemeComponent): boolean {
   if (theme.background && theme.foreground) {
     return theme.foreground.lighterThan(theme.background);
   }