diff --git a/extension-manifest-v3/src/pages/panel/components/alert.js b/extension-manifest-v3/src/pages/panel/components/alert.js
index 043713722..e709711d2 100644
--- a/extension-manifest-v3/src/pages/panel/components/alert.js
+++ b/extension-manifest-v3/src/pages/panel/components/alert.js
@@ -72,7 +72,7 @@ export default {
       layout[slide]="absolute inset bottom:auto"
     >
       <ui-icon name="${icon}"></ui-icon>
-      <ui-text type="label-s" underline layout="block:center">
+      <ui-text type="label-s" underline layout="block:center" color="inherit">
         <slot></slot>
       </ui-text>
       ${!!autoclose &&
@@ -86,8 +86,6 @@ export default {
       border: 1px solid var(--ui-color-gray-200);
       box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.15);
       border-radius: 30px;
-      --ui-text-color-heading: currentColor;
-      --ui-text-color-anchor: currentColor;
     }
 
     :host([type="success"]) {
diff --git a/extension-manifest-v3/src/pages/panel/components/button.js b/extension-manifest-v3/src/pages/panel/components/button.js
index 7e212804c..ec6e4c5dd 100644
--- a/extension-manifest-v3/src/pages/panel/components/button.js
+++ b/extension-manifest-v3/src/pages/panel/components/button.js
@@ -31,7 +31,7 @@ export default {
       transition: 0.2s all;
     }
 
-    @media (hover: hover) and (pointer: fine) {
+    @media (hover: hover) {
       ui-text:hover {
         background: var(--ui-color-primary-700);
       }
diff --git a/extension-manifest-v3/src/pages/panel/components/copy.js b/extension-manifest-v3/src/pages/panel/components/copy.js
index 3607bceb6..d0749e1e9 100644
--- a/extension-manifest-v3/src/pages/panel/components/copy.js
+++ b/extension-manifest-v3/src/pages/panel/components/copy.js
@@ -37,7 +37,6 @@ export default {
 
     @media (hover: hover) {
       button:hover ui-text, button:hover ui-icon {
-        --ui-text-color: var(--ui-color-primary-700);
         color: var(--ui-color-primary-700);
       }
     }
diff --git a/extension-manifest-v3/src/pages/panel/components/dialog.js b/extension-manifest-v3/src/pages/panel/components/dialog.js
index 1e9451f3b..5fea36de9 100644
--- a/extension-manifest-v3/src/pages/panel/components/dialog.js
+++ b/extension-manifest-v3/src/pages/panel/components/dialog.js
@@ -78,7 +78,7 @@ export default {
     #dialog {
       border: none;
       border-radius: 12px 12px 0 0;
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       overscroll-behavior: contain;
       transform: translateY(100%);
       transition: transform 500ms cubic-bezier(0.4, 0.15, 0, 1);
@@ -87,7 +87,7 @@ export default {
     #backdrop {
       background: var(--ui-color-backdrop);
       opacity: 0;
-      transition: all 500ms ease-out;
+      transition: all 300ms;
     }
 
     :host([open]) #dialog {
@@ -95,7 +95,7 @@ export default {
     }
 
     :host([open]) #backdrop {
-      opacity: 0.7;
+      opacity: 0.9;
     }
 
     #header {
diff --git a/extension-manifest-v3/src/pages/panel/components/menu-item.js b/extension-manifest-v3/src/pages/panel/components/menu-item.js
index 3b17c6f24..4aecaa20d 100644
--- a/extension-manifest-v3/src/pages/panel/components/menu-item.js
+++ b/extension-manifest-v3/src/pages/panel/components/menu-item.js
@@ -25,7 +25,6 @@ export default {
     :host {
       text-decoration: none;
       color: var(--ui-color-gray-800);
-      --ui-text-color-heading: currentColor;
     }
 
     ui-icon {
@@ -38,8 +37,8 @@ export default {
       overflow: hidden;
     }
 
-    @media (hover: hover) and (pointer: fine) {
-      :host(:hover) {
+    @media (hover: hover) {
+      :host(:hover) ui-text {
         color: var(--ui-color-primary-700);
       }
 
diff --git a/extension-manifest-v3/src/pages/panel/components/notification.js b/extension-manifest-v3/src/pages/panel/components/notification.js
index 084d43f13..164065e3f 100644
--- a/extension-manifest-v3/src/pages/panel/components/notification.js
+++ b/extension-manifest-v3/src/pages/panel/components/notification.js
@@ -31,7 +31,9 @@ export default {
             </div>
           `}
           <div layout="column gap grow">
-            <ui-text type="body-s"><slot></slot></ui-text>
+            <ui-text id="desc" type="body-s" color="gray-600">
+              <slot></slot>
+            </ui-text>
             <ui-text id="action" type="label-s">
               <slot name="action"></slot>
             </ui-text>
@@ -45,10 +47,6 @@ export default {
       --ui-panel-notification-color: var(--ui-color-primary-700);
     }
 
-    #action {
-      color: var(--ui-panel-notification-color);
-    }
-
     :host([type="warning"]) {
       --ui-panel-notification-bg: var(--ui-color-danger-100);
       --ui-panel-notification-color: var(--ui-color-danger-700);
@@ -57,40 +55,28 @@ export default {
     a {
       background: var(--ui-panel-notification-bg);
       border-radius: 12px;
-      color: inherit;
       text-decoration: none;
+      color: inherit;
+    }
+
+    #action {
+      color: var(--ui-panel-notification-color);
     }
 
     #icon {
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       box-shadow: 0px 2px 6px rgba(32, 44, 68, 0.08);
       border-radius: 8px;
     }
 
-    #icon ui-icon {
+    ui-icon {
       color: var(--ui-panel-notification-color);
     }
 
-    #close > * {
-      color: var(--ui-color-gray-600);
-      background: var(--ui-color-white);
-      border-radius: 12px;
-    }
-
-    @media (hover: hover) and (pointer: fine) {
-      a:hover:not(:has(#close:hover)) {
-        background: var(--ui-panel-notification-bg);
-        --ui-text-color: var(--ui-panel-notification-color);
-      }
-
-      a:hover:not(:has(#close:hover)) #action {
+    @media (hover: hover) {
+      a:hover ui-text {
         text-decoration: underline;
       }
-
-      #close:hover > * {
-        color: var(--ui-color-white);
-        background: var(--ui-panel-notification-color);
-      }
     }
   `,
 };
diff --git a/extension-manifest-v3/src/pages/panel/components/options-item.js b/extension-manifest-v3/src/pages/panel/components/options-item.js
index 03beb71dc..583763064 100644
--- a/extension-manifest-v3/src/pages/panel/components/options-item.js
+++ b/extension-manifest-v3/src/pages/panel/components/options-item.js
@@ -18,7 +18,7 @@ export default {
   render: ({ icon, enabled, terms }) => html`
     <template layout="row gap items:center padding:1:1.5">
       ${icon && html`<ui-icon name="${icon}" layout="margin:right"></ui-icon>`}
-      <ui-text type="body-s" color="gray-800" layout="grow">
+      <ui-text type="body-s" layout="grow">
         <slot></slot>
       </ui-text>
       <ui-text
@@ -36,7 +36,7 @@ export default {
     </template>
   `.css`
     :host {
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       border: 1px solid var(--ui-color-gray-200);
     }
 
@@ -56,7 +56,7 @@ export default {
       color: var(--ui-color-gray-600);
     }
 
-    @media (hover: hover) and (pointer: fine) {
+    @media (hover: hover) {
       :host(:hover) {
         background: var(--ui-color-primary-100);
       }
@@ -66,7 +66,7 @@ export default {
       }
 
       :host(:hover) ui-text {
-        --ui-text-color: var(--ui-color-primary-700);
+        color: var(--ui-color-primary-700);
       }
     }
   `,
diff --git a/extension-manifest-v3/src/pages/panel/components/pause.js b/extension-manifest-v3/src/pages/panel/components/pause.js
index 47e5c0cec..8d8330449 100644
--- a/extension-manifest-v3/src/pages/panel/components/pause.js
+++ b/extension-manifest-v3/src/pages/panel/components/pause.js
@@ -66,19 +66,30 @@ function simulateClickOnEnter(host, event) {
 export default {
   paused: { value: false, reflect: true },
   global: { value: false, reflect: true },
+  revokeAt: 0,
   pauseType: 1,
   pauseList: false,
-  render: ({ paused, pauseType, pauseList }) => html`
-    <template layout="grid">
+  render: ({ paused, pauseType, pauseList, revokeAt }) => html`
+    <template layout="grid relative">
       <button
         id="main"
-        class="${{ active: pauseList, paused }}"
+        class="${{ active: pauseList }}"
         layout="row center margin:1.5 height:6"
         layout@390px="height:7"
         onclick="${!pauseList && dispatchAction}"
       >
         <div id="label" layout="grow row center gap shrink overflow">
-          <slot></slot>
+          <ui-icon name="pause"></ui-icon>
+          <div layout="column">
+            <ui-text type="label-m" color="inherit">
+              ${paused ? msg`Ghostery is paused` : msg`Pause on this site`}
+            </ui-text>
+            ${!!revokeAt &&
+            html`<ui-text type="body-xs" color="inherit">
+              <ui-panel-revoke-at revokeAt="${revokeAt}"></ui-panel-revoke-at>
+            </ui-text>`}
+            <slot></slot>
+          </div>
         </div>
         <div
           id="type"
@@ -90,20 +101,20 @@ export default {
         >
           ${paused
             ? html`
-                <ui-icon name="refresh" color="gh-panel-action"></ui-icon>
+                <ui-icon name="refresh"></ui-icon>
                 <ui-text
                   type="label-m"
-                  color="gh-panel-action"
                   layout="margin:left:0.5"
+                  color="inherit"
                 >
                   Undo
                 </ui-text>
               `
             : html`
-                <ui-text type="label-m" color="gh-panel-action" layout="grow">
+                <ui-text type="label-m" layout="grow" color="inherit">
                   ${PAUSE_TYPES.find(({ value }) => value === pauseType).label}
                 </ui-text>
-                <ui-icon name="arrow-down" color="gh-panel-action"></ui-icon>
+                <ui-icon name="arrow-down"></ui-icon>
               `}
         </div>
       </button>
@@ -120,7 +131,7 @@ export default {
                 onclick="${dispatchTypeAction(value)}"
                 layout.active="grid:1|max:auto"
               >
-                <ui-text type="label-m" color="gray-800">${label}</ui-text>
+                <ui-text type="label-m">${label}</ui-text>
                 ${pauseType === value && html`<ui-icon name="check"></ui-icon>`}
                 <ui-text type="body-s" color="gray-600" layout="area:2">
                   ${description}
@@ -133,48 +144,29 @@ export default {
     </template>
   `.css`
     :host {
-      position: relative;
       background: var(--ui-color-primary-200);
-      --ui-color-gh-panel-action: var(--ui-color-primary-700);
-      --gh-pause-active-color: var(--ui-color-warning-500);
-      --gh-pause-active-background: var(--ui-color-warning-100);
-    }
-
-    :host([global]) {
-      --gh-pause-active-color: var(--ui-color-danger-500);
-      --gh-pause-active-background: var(--ui-color-danger-100);
-      --ui-color-gh-panel-action: var(--ui-color-white);
-    }
-
-    :host([paused]) {
-      background: var(--gh-pause-active-background);
     }
 
     button {
       cursor: pointer;
       appearance: none;
       border: none;
-      background: var(--ui-color-white);
       text-align: left;
+      color: var(--ui-color-gray-800);
+      background: var(--ui-color-layout);
     }
 
     #main {
-      background: var(--ui-color-white);
       box-shadow: 0px 2px 8px rgba(0, 105, 210, 0.2);
       border-radius: 8px;
       box-sizing: border-box;
       padding: 4px;
       white-space: nowrap;
+      color: var(--ui-color-primary-700);
+      transition: background 0.2s, opacity 0.2s;
     }
 
-    #main, #label, #type { transition: all 0.2s; }
-
-    #main.active {
-      background: var(--ui-color-primary-500);
-      --ui-color-gh-panel-action: var(--ui-color-white);
-    }
-
-    #main:active:not(:has(#type:hover)), #main:active.paused {
+    #main:active:not(:has(#type:hover)), :host([paused]) #main:active {
       opacity: 0.6;
     }
 
@@ -185,99 +177,150 @@ export default {
       border: 1px solid var(--ui-color-primary-300);
       padding: 8px 8px 8px 12px;
       white-space: nowrap;
+      transition: width 0.2s;
     }
 
     #type ui-icon {
       transition: transform 0.1s;
     }
 
-    #main.active #type {
-      --ui-color-gh-panel-action: var(--ui-color-white);
-      background: var(--ui-color-primary-700);
-      border-color: var(--ui-color-primary-700);
-    }
-
     #main.active #type ui-icon {
       transform: rotate(180deg);
     }
 
-    #main.paused, #main.paused:hover, #main.paused:active {
-      background: var(--gh-pause-active-color);
-      --ui-color-gh-panel-action: var(--ui-color-warning-text);
+    #type-list {
+      background: var(--ui-color-layout);
+      box-shadow: 0px 4px 12px rgba(0, 105, 210, 0.4);
+      border-radius: 12px;
+    }
+
+    #type-list button {
+      padding: 16px 20px;
+    }
+
+    #type-list button:first-child {
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+    }
+
+    #type-list button:last-child {
+      border-bottom-left-radius: 12px;
+      border-bottom-right-radius: 12px;
+    }
+
+    /* Website paused */
+
+    :host([paused]) {
+      background: var(--ui-color-warning-100);
+    }
+
+    :host([paused]) #main {
+      box-shadow: none;
+      background: var(--ui-color-warning-500);
+      color: var(--ui-color-gray-800);
+    }
+
+    :host([paused]) #type {
+      background: var(--ui-color-layout);
+      border: none;
+      pointer-events: all;
+      overflow: hidden;
     }
 
-    #main.paused #type {
-      --ui-color-gh-panel-action: var(--ui-color-gray-800);
+    /* Global pause */
+
+    :host([global]) {
+      background: var(--ui-color-danger-100);
     }
 
-    :host([global]) #main.paused {
-      --ui-color-gh-panel-action: var(--ui-color-white);
+    :host([global]) #main {
+      box-shadow: 0px 2px 8px rgba(210, 138, 0, 0.2);
+      background: var(--ui-color-danger-500);
+      color: white;
     }
 
-    :host([global]) #main.paused #type {
-      --ui-color-gh-panel-action: var(--ui-color-danger-500);
+    :host([global]) #type {
+      color: var(--ui-color-danger-500);
     }
 
-    @media (hover: hover) and (pointer: fine) {
-      #main:hover {
+    @media (hover: hover) {
+      :host(:not([paused])) #main:hover {
         background: var(--ui-color-primary-500);
-        --ui-color-gh-panel-action: var(--ui-color-white);
       }
 
-      #main:hover:not(.active, .paused) #type {
-        --ui-color-gh-panel-action: var(--ui-color-primary-700);
-        border-color: var(--ui-color-primary-100);
+      :host(:not([paused])) #main:hover #label {
+        color: white;
       }
 
-      #main:hover:not(.paused) #type:hover {
-        --ui-color-gh-panel-action: var(--ui-color-white);
+      :host(:not([paused])) #main:hover #type {
+        border: none;
+      }
+
+      :host(:not([paused])) #type:hover {
         background: var(--ui-color-primary-700);
-        border-color: var(--ui-color-primary-700);
+        color: white;
       }
 
-      #main.paused:hover:has(#type:hover) #label, #main.paused:focus-visible #label {
+      :host([paused]) #main:hover:has(#type:hover) #label, :host([paused]) #main:focus-visible #label {
         width: 0;
       }
 
-      #main.paused #type:hover, #main.paused:focus-visible #type {
+      :host([paused]) #main #type:hover, :host([paused]) #main:focus-visible #type {
         width: 100%;
         transition: width 0.2s;
       }
-    }
 
-    #main.paused #type {
-      pointer-events: all;
-      overflow: hidden;
-      border: none;
-      background: var(--ui-color-white);
-    }
+      #type-list button:hover {
+        background: var(--ui-color-primary-100);
+      }
 
-    #type-list {
-      background: var(--ui-color-white);
-      box-shadow: 0px 4px 12px rgba(0, 105, 210, 0.4);
-      border-radius: 12px;
+      #type-list button:hover ui-text,
+      #type-list button:hover ui-icon {
+        color: var(--ui-color-primary-700);
+      }
     }
 
-    #type-list button {
-      padding: 16px 20px;
-    }
+    @media (prefers-color-scheme: dark) {
+      :host {
+        background: var(--ui-color-gray-100);
+      }
 
-    #type-list button:first-child {
-      border-top-left-radius: 12px;
-      border-top-right-radius: 12px;
-    }
+      #main {
+        background: var(--ui-color-primary-200);
+      }
 
-    #type-list button:last-child {
-      border-bottom-left-radius: 12px;
-      border-bottom-right-radius: 12px;
-    }
+      #type {
+        border: none;
+        background: var(--ui-color-primary-100);
+      }
 
-    #type-list button:hover {
-      background: var(--ui-color-primary-100);
+      #type-list {
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4);
+      }
+
+      :host([paused]) #label {
+        color: var(--ui-color-gray-100);
+      }
+
+      :host([global]) #label,
+      :host([global]) #type {
+        color: var(--ui-color-gray-800);
+      }
     }
 
-    #type-list button:hover ui-text {
-      color: var(--ui-color-primary-700);
+    @media (prefers-color-scheme: dark) and (hover: hover) {
+      :host(:not([paused])) #main:hover {
+        background: var(--ui-color-primary-300);
+      }
+
+      :host(:not([paused])) #main:hover #label {
+        color: var(--ui-color-primary-700);
+      }
+
+      :host(:not([paused])) #type:hover {
+        background: var(--ui-color-primary-200);
+        color: var(--ui-color-primary-700);
+      }
     }
   `,
 };
diff --git a/extension-manifest-v3/src/pages/panel/views/home.js b/extension-manifest-v3/src/pages/panel/views/home.js
index a2263fe77..3d63e8893 100644
--- a/extension-manifest-v3/src/pages/panel/views/home.js
+++ b/extension-manifest-v3/src/pages/panel/views/home.js
@@ -159,26 +159,8 @@ export default {
                 onaction="${globalPause ? revokeGlobalPause : togglePause}"
                 paused="${paused || globalPause}"
                 global="${globalPause}"
+                revokeAt="${globalPause?.revokeAt || paused?.revokeAt}"
               >
-                <ui-icon
-                  name="${globalPause ? 'pause' : 'circle'}"
-                  color="gh-panel-action"
-                ></ui-icon>
-                <div layout="column">
-                  <ui-text type="label-m" color="gh-panel-action">
-                    ${paused || globalPause
-                      ? msg`Ghostery is paused`
-                      : msg`Pause on this site`}
-                  </ui-text>
-                  ${((paused && !!paused.revokeAt) || globalPause) &&
-                  html`<ui-text type="body-xs" color="gh-panel-action">
-                    <ui-panel-revoke-at
-                      revokeAt="${globalPause
-                        ? globalPause.revokeAt
-                        : paused.revokeAt}"
-                    ></ui-panel-revoke-at>
-                  </ui-text>`}
-                </div>
               </gh-panel-pause>
             `
           : html`
diff --git a/extension-manifest-v3/src/pages/panel/views/tracker-details.js b/extension-manifest-v3/src/pages/panel/views/tracker-details.js
index 577051dc3..d139870ff 100644
--- a/extension-manifest-v3/src/pages/panel/views/tracker-details.js
+++ b/extension-manifest-v3/src/pages/panel/views/tracker-details.js
@@ -12,7 +12,7 @@
 import { html, msg, router, store } from 'hybrids';
 import * as labels from '@ghostery/ui/labels';
 
-import Options from '/store/options.js';
+import Options, { isPaused } from '/store/options.js';
 import TabStats from '/store/tab-stats.js';
 
 import { openTabWithUrl } from '/utils/tabs.js';
@@ -54,7 +54,7 @@ export default {
     tracker.category !== 'unidentified' &&
     `https://www.ghostery.com/whotracksme/trackers/${tracker.id}`,
   paused: ({ options, stats }) =>
-    store.ready(options, stats) && !!options.paused[stats.hostname],
+    store.ready(options, stats) && isPaused(options, stats.hostname),
   render: ({ tracker, status, wtmUrl, paused, options }) => html`
     <template layout="column">
       <gh-panel-dialog>
diff --git a/extension-manifest-v3/src/pages/settings/assets/selective_blocking.svg b/extension-manifest-v3/src/pages/settings/assets/selective_blocking.svg
deleted file mode 100644
index 1f7f11ecd..000000000
--- a/extension-manifest-v3/src/pages/settings/assets/selective_blocking.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<rect width="120" height="80" fill="#F0F2F7" />
-	<rect x="8" y="8" width="104" height="64" rx="6" fill="#00AEF0" />
-	<path d="M50.5746 30.5727L69.428 49.426M46.668 35.363V44.6357C46.668 44.9617 46.668 45.1248 46.7048 45.2783C46.7375 45.4144 46.7913 45.5444 46.8644 45.6637C46.9469 45.7983 47.0622 45.9136 47.2928 46.1441L53.8565 52.7079C54.0871 52.9384 54.2024 53.0537 54.3369 53.1361C54.4562 53.2093 54.5863 53.2632 54.7223 53.2959C54.8758 53.3327 55.0388 53.3327 55.365 53.3327H64.6377C64.9637 53.3327 65.1268 53.3327 65.2802 53.2959C65.4164 53.2632 65.5464 53.2093 65.6657 53.1361C65.8002 53.0537 65.9156 52.9384 66.1461 52.7079L72.7098 46.1441C72.9404 45.9136 73.0557 45.7983 73.1381 45.6637C73.2113 45.5444 73.2652 45.4144 73.2978 45.2783C73.3346 45.1248 73.3346 44.9617 73.3346 44.6357V35.363C73.3346 35.0369 73.3346 34.8738 73.2978 34.7204C73.2652 34.5843 73.2113 34.4543 73.1381 34.335C73.0557 34.2004 72.9404 34.0851 72.7098 33.8545L66.1461 27.2909C65.9156 27.0603 65.8002 26.9449 65.6657 26.8625C65.5464 26.7894 65.4164 26.7355 65.2802 26.7029C65.1268 26.666 64.9637 26.666 64.6377 26.666H55.365C55.0388 26.666 54.8758 26.666 54.7223 26.7029C54.5863 26.7355 54.4562 26.7894 54.3369 26.8625C54.2024 26.9449 54.0871 27.0603 53.8565 27.2909L47.2928 33.8545C47.0622 34.0851 46.9469 34.2004 46.8644 34.335C46.7913 34.4543 46.7375 34.5843 46.7048 34.7204C46.668 34.8738 46.668 35.0369 46.668 35.363Z" stroke="white" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round" />
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M104.375 19.125C104.375 21.5412 102.416 23.5 100 23.5C97.5838 23.5 95.625 21.5412 95.625 19.125C95.625 16.7088 97.5838 14.75 100 14.75C102.416 14.75 104.375 16.7088 104.375 19.125Z" fill="#00AEF0" />
-	<path fill-rule="evenodd" clip-rule="evenodd" d="M105.779 24.6259C105.198 23.2909 105.098 22.1596 105.082 21.7152V18.0582C105.082 15.2645 102.807 13 99.9991 13C97.1914 13 94.9154 15.2645 94.9154 18.0582V21.768C94.8937 22.2462 94.7796 23.3429 94.2214 24.6259C93.4711 26.35 94.092 26.1446 94.6482 26.0027C95.2043 25.8615 96.4462 25.3077 96.8341 25.9899C97.2219 26.6717 97.5455 27.2639 98.4508 26.8777C99.3563 26.4918 99.7829 26.3632 99.9122 26.3632H100.088C100.217 26.3632 100.644 26.4918 101.549 26.8777C102.455 27.2639 102.778 26.6717 103.166 25.9899C103.554 25.3077 104.796 25.8615 105.352 26.0027C105.908 26.1446 106.529 26.35 105.779 24.6259ZM98.43 15.7581C98.9775 15.7581 99.4214 16.457 99.4214 17.3193C99.4214 18.1816 98.9775 18.8807 98.43 18.8807C97.8825 18.8807 97.4385 18.1816 97.4385 17.3193C97.4385 16.457 97.8825 15.7581 98.43 15.7581ZM99.9991 21.9984C98.7925 21.9984 97.7768 20.8169 97.4708 19.5022C98.0619 20.3108 98.9743 20.8305 99.9991 20.8305C101.024 20.8305 101.936 20.3108 102.527 19.5022C102.221 20.8169 101.205 21.9984 99.9991 21.9984ZM101.568 18.8807C101.02 18.8807 100.577 18.1816 100.577 17.3193C100.577 16.457 101.02 15.7581 101.568 15.7581C102.116 15.7581 102.56 16.457 102.56 17.3193C102.56 18.1816 102.116 18.8807 101.568 18.8807Z" fill="white" />
-</svg>
diff --git a/extension-manifest-v3/src/pages/settings/components/dialog.js b/extension-manifest-v3/src/pages/settings/components/dialog.js
index f0e6f6d50..2bf4b3d9d 100644
--- a/extension-manifest-v3/src/pages/settings/components/dialog.js
+++ b/extension-manifest-v3/src/pages/settings/components/dialog.js
@@ -54,7 +54,7 @@ export default {
     #dialog {
       border: none;
       border-radius: 16px;
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       transform: translateY(100px);
       opacity: 0;
       transition: transform 250ms cubic-bezier(0.4, 0.15, 0, 1), opacity 250ms ease;
@@ -68,11 +68,11 @@ export default {
     #backdrop {
       background: var(--ui-color-backdrop);
       opacity: 0;
-      transition: all 500ms ease-out;
+      transition: all 300ms ease-out;
     }
 
     :host([open]) #backdrop {
-      opacity: 0.7;
+      opacity: 0.8;
     }
   `,
 };
diff --git a/extension-manifest-v3/src/pages/settings/components/help-image.js b/extension-manifest-v3/src/pages/settings/components/help-image.js
index 3f3b3e8d2..1e5c11a28 100644
--- a/extension-manifest-v3/src/pages/settings/components/help-image.js
+++ b/extension-manifest-v3/src/pages/settings/components/help-image.js
@@ -45,7 +45,7 @@ export default {
       #icon {
         border-radius:12px;
         border: 1px solid var(--ui-color-gray-300);
-        background: var(--ui-color-white);
+        background: var(--ui-color-layout);
       }
     `,
 };
diff --git a/extension-manifest-v3/src/pages/settings/components/input.js b/extension-manifest-v3/src/pages/settings/components/input.js
index 98967d25f..bbfbab879 100644
--- a/extension-manifest-v3/src/pages/settings/components/input.js
+++ b/extension-manifest-v3/src/pages/settings/components/input.js
@@ -34,7 +34,7 @@ export default {
     ::slotted(input),
     ::slotted(textarea),
     ::slotted(select) {
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       border: 1px solid var(--ui-color-gray-200);
       border-radius: 8px;
       padding: 11px;
diff --git a/extension-manifest-v3/src/pages/settings/components/layout.js b/extension-manifest-v3/src/pages/settings/components/layout.js
index b5641259a..e8598055d 100644
--- a/extension-manifest-v3/src/pages/settings/components/layout.js
+++ b/extension-manifest-v3/src/pages/settings/components/layout.js
@@ -41,11 +41,11 @@ export default {
       </template>
     `.css`
     :host {
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
     }
 
     header, nav {
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       box-shadow: 0px 0px 80px rgba(32, 44, 68, 0.1);
     }
 
@@ -77,7 +77,7 @@ export default {
       transition: color 0.2s, opacity 0.2s;
     }
 
-    @media (hover: hover) and (pointer: fine) {
+    @media (hover: hover) {
       nav ::slotted(a:hover) {
         color: var(--ui-color-primary-700);
         --ui-color-nav: currentColor;
diff --git a/extension-manifest-v3/src/pages/settings/components/preview-dialog.js b/extension-manifest-v3/src/pages/settings/components/preview-dialog.js
index 5ec779949..9fd3386cb 100644
--- a/extension-manifest-v3/src/pages/settings/components/preview-dialog.js
+++ b/extension-manifest-v3/src/pages/settings/components/preview-dialog.js
@@ -54,7 +54,7 @@ export default {
     }
 
     a {
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       border-radius: 50%;
       box-shadow: 0px 4px 16px rgba(32, 44, 68, 0.1);
     }
@@ -70,7 +70,7 @@ export default {
     }
 
     footer {
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       border-radius: 8px;
     }
   `,
diff --git a/extension-manifest-v3/src/pages/settings/components/trackers-list.js b/extension-manifest-v3/src/pages/settings/components/trackers-list.js
index 7e2ed44de..11ca4712f 100644
--- a/extension-manifest-v3/src/pages/settings/components/trackers-list.js
+++ b/extension-manifest-v3/src/pages/settings/components/trackers-list.js
@@ -77,7 +77,7 @@ export default {
     :host {
       border-radius: 8px;
       border: 1px solid var(--ui-color-gray-200);
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
     }
 
     :host([open]) #arrow {
diff --git a/extension-manifest-v3/src/pages/settings/views/tracker-details.js b/extension-manifest-v3/src/pages/settings/views/tracker-details.js
index 371825e8e..51cf1e15c 100644
--- a/extension-manifest-v3/src/pages/settings/views/tracker-details.js
+++ b/extension-manifest-v3/src/pages/settings/views/tracker-details.js
@@ -18,8 +18,6 @@ import { toggleExceptionDomain } from '/store/tracker-exception.js';
 import { openTabWithUrl } from '/utils/tabs.js';
 import { WTM_PAGE_URL } from '/utils/api.js';
 
-import assets from '../assets/index.js';
-
 import { toggleException } from './trackers.js';
 import TrackerAddException from './tracker-add-exception.js';
 import WebsiteDetails from './website-details.js';
@@ -91,16 +89,6 @@ export default {
                 </div>
               </div>
               <div layout="row gap:5 items:start">
-                <gh-settings-help-image
-                  static
-                  layout="hidden"
-                  layout@768px="row"
-                >
-                  <img
-                    src="${assets.selective_blocking}"
-                    alt="Selective blocking"
-                  />
-                </gh-settings-help-image>
                 <div layout="column items:start gap:2 grow">
                   <div layout="row gap:2 items:start self:stretch">
                     <div layout="column gap:0.5 grow">
@@ -249,7 +237,7 @@ export default {
                   <ui-text type="label-xs" uppercase>
                     Organization's website
                   </ui-text>
-                  <ui-text type="label-s" color="primary-700">
+                  <ui-text type="label-s" color="primary-700" underline>
                     <a
                       href="${tracker.organization.websiteUrl}"
                       onclick="${openTabWithUrl}"
@@ -264,7 +252,7 @@ export default {
                     <ui-text type="label-xs" uppercase>
                       Privacy policy
                     </ui-text>
-                    <ui-text type="label-s" color="primary-700">
+                    <ui-text type="label-s" color="primary-700" underline>
                       <a
                         href="${tracker.organization.privacyPolicyUrl}"
                         onclick="${openTabWithUrl}"
diff --git a/packages/ui/src/modules/global/components/button.js b/packages/ui/src/modules/global/components/button.js
index 8cf726a6f..7a906c18c 100644
--- a/packages/ui/src/modules/global/components/button.js
+++ b/packages/ui/src/modules/global/components/button.js
@@ -62,20 +62,20 @@ export default {
 
       :host([type="outline"]) {
         color: var(--ui-color-gray-700);
-        background: var(--ui-color-white);
+        background: var(--ui-color-layout);
         border: 1px solid var(--ui-color-gray-200);
         --ui-button-hover-color: var(--ui-color-primary-500);
         --ui-button-hover-border: var(--ui-color-primary-500);
-        --ui-button-hover-background: var(--ui-color-white);
+        --ui-button-hover-background: var(--ui-color-layout);
       }
 
       :host([type="outline-error"]) {
         color: var(--ui-color-error-400);
-        background: var(--ui-color-white);
+        background: var(--ui-color-layout);
         border: 1px solid var(--ui-color-gray-200);
         --ui-button-hover-color: var(--ui-color-error-500);
         --ui-button-hover-border: var(--ui-color-error-500);
-        --ui-button-hover-background: var(--ui-color-white);
+        --ui-button-hover-background: var(--ui-color-layout);
       }
 
       @media (hover: hover) and (pointer: fine) {
diff --git a/packages/ui/src/modules/global/components/icon.js b/packages/ui/src/modules/global/components/icon.js
index d1d665788..9c7e72dfb 100644
--- a/packages/ui/src/modules/global/components/icon.js
+++ b/packages/ui/src/modules/global/components/icon.js
@@ -18,7 +18,7 @@ export default {
     <template layout="block">${icons[name] || ''}</template>
   `.css`
     :host {
-      ${color ? `color: var(--ui-color-${color});` : ''}
+      color: ${color ? `var(--ui-color-${color});` : 'inherit'};
     }
 
     svg {
@@ -254,18 +254,6 @@ const icons = {
       <path d="M9 12L5 8L9 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
   `,
-  'circle': html`
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <g clip-path="url(#clip0_87_483)">
-        <path d="M14.6668 7.99948C14.6668 11.6813 11.682 14.6661 8.00016 14.6661C4.31826 14.6661 1.3335 11.6813 1.3335 7.99948C1.3335 4.31758 4.31826 1.33281 8.00016 1.33281C11.682 1.33281 14.6668 4.31758 14.6668 7.99948Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      </g>
-      <defs>
-        <clipPath id="clip0_87_483">
-          <rect width="16" height="16" fill="white"/>
-        </clipPath>
-      </defs>
-    </svg>
-  `,
   'close': html`
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
diff --git a/packages/ui/src/modules/global/components/text.js b/packages/ui/src/modules/global/components/text.js
index 28cb994e8..ba6537a42 100644
--- a/packages/ui/src/modules/global/components/text.js
+++ b/packages/ui/src/modules/global/components/text.js
@@ -3,7 +3,7 @@ import { html } from 'hybrids';
 export default {
   type: { value: 'body-m', reflect: true },
   mobileType: { value: '', reflect: true },
-  color: { value: '', reflect: true },
+  color: 'gray-800',
   ellipsis: { value: false, reflect: true },
   underline: { value: false, reflect: true },
   uppercase: { value: false, reflect: true },
@@ -11,7 +11,7 @@ export default {
     :host {
       display: block;
       font: var(--ui-font-${mobileType || type});
-      color: var(--ui-text-color, inherit);
+      color: var(--ui-color-${color});
     }
 
     :host([hidden]) {
@@ -19,25 +19,12 @@ export default {
     }
 
     ${
-      mobileType
-        ? /*css*/ `
+      mobileType &&
+      /*css*/ `
           @media screen and (min-width: 768px) {
             :host { font: var(--ui-font-${type}); }
           }
         `
-        : ''
-    }
-
-    :host([type^="display"]),
-    :host([type^="headline"]),
-    :host([type^="label"]) {
-      color: var(--ui-text-color-heading, var(--ui-color-gray-800));
-    }
-
-    :host([color]) {
-      --ui-text-color: var(--ui-color-${color});
-      --ui-text-color-anchor: var(--ui-color-${color});
-      --ui-text-color-heading: var(--ui-color-${color});
     }
 
     :host([type^="display"]), :host([type^="button"]) {
@@ -58,6 +45,10 @@ export default {
       text-transform: uppercase;
     }
 
+    @media (hover: hover) and (pointer: fine) {
+      :host([underline]) ::slotted(a:hover) { text-decoration: underline; }
+    }
+
     ::slotted(ui-text) {
       display: inline;
     }
@@ -67,13 +58,6 @@ export default {
     }
 
     ::slotted(a) { transition: color 0.2s, opacity 0.2s; text-decoration: none; -webkit-tap-highlight-color: transparent; }
-    ::slotted(a:hover, a:focus-visible) { color: var(--ui-text-color-anchor, inherit); }
-
-    @media (hover: hover) and (pointer: fine) {
-      ::slotted(a:hover) { color: var(--ui-text-color-anchor, inherit) }
-      :host([underline]) ::slotted(a:hover) { text-decoration: underline; }
-    }
-
     ::slotted(a:active) { opacity: 0.6; }
     ::slotted(a:not([href])) { opacity: 0.6; pointer-events: none; }
 
diff --git a/packages/ui/src/modules/global/components/toggle.js b/packages/ui/src/modules/global/components/toggle.js
index f20ed61bf..51dcc1991 100644
--- a/packages/ui/src/modules/global/components/toggle.js
+++ b/packages/ui/src/modules/global/components/toggle.js
@@ -45,7 +45,7 @@ export default {
             <div id="toggle" layout="block relative size:36px:20px">
               <span layout="block size:2 absolute top left margin:2px"></span>
             </div>
-            <ui-text type="label-m" layout="width::36px">
+            <ui-text type="label-m" layout="width::36px" color="inherit">
               ${value ? msg`On` : msg`Off`}
             </ui-text>
           </div>
@@ -56,7 +56,6 @@ export default {
         pointer-events: none;
       }
 
-
       button {
         cursor: pointer;
         background: none;
@@ -74,11 +73,7 @@ export default {
       }
 
       #button {
-        --ui-text-color-heading: var(--ui-color-gray-300);
-      }
-
-      :host([disabled]) #button {
-        --ui-text-color-heading: var(--ui-color-gray-300) !important;
+        color: var(--ui-color-gray-300);
       }
 
       #toggle {
@@ -88,21 +83,17 @@ export default {
       }
 
       #toggle span {
-        background: var(--ui-color-white);
+        background: var(--ui-color-layout);
         border-radius: 8px;
         transition: left 0.2s;
       }
 
-      :host([disabled]) #toggle {
-        background: var(--ui-color-gray-200) !important;
-      }
-
       :host([value]) #toggle {
         background: var(--ui-color-gray-600);
       }
 
       :host([value]) #button {
-        --ui-text-color-heading: var(--ui-color-gray-600);
+        color: var(--ui-color-gray-600);
       }
 
       :host([value]) #toggle span {
@@ -113,9 +104,17 @@ export default {
         display: none;
       }
 
+      :host([disabled]) #toggle {
+        background: var(--ui-color-gray-200);
+      }
+
+      :host([disabled]) #button {
+        color: var(--ui-color-gray-300);
+      }
+
       @media (hover: hover) and (pointer: fine) {
         button:hover #button {
-          --ui-text-color-heading: var(--ui-color-gray-400);
+          color: var(--ui-color-gray-400);
         }
 
         button:hover #toggle {
diff --git a/packages/ui/src/modules/global/components/tooltip.js b/packages/ui/src/modules/global/components/tooltip.js
index 433712541..10078e083 100644
--- a/packages/ui/src/modules/global/components/tooltip.js
+++ b/packages/ui/src/modules/global/components/tooltip.js
@@ -119,7 +119,7 @@ export default {
     }
 
     #tooltip ui-text {
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       border: 0.5px solid var(--ui-color-gray-300);
       box-shadow: 0px 4px 12px rgba(32, 44, 68, 0.2);
       border-radius: 4px;
diff --git a/packages/ui/src/modules/onboarding/components/dialog.js b/packages/ui/src/modules/onboarding/components/dialog.js
index 4b24d475c..5088146a1 100644
--- a/packages/ui/src/modules/onboarding/components/dialog.js
+++ b/packages/ui/src/modules/onboarding/components/dialog.js
@@ -47,7 +47,7 @@ export default {
     }
 
     #dialog {
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       border-radius: 16px;
       box-shadow: 30px 60px 160px rgba(0, 0, 0, 0.2);
     }
@@ -59,7 +59,7 @@ export default {
       position: absolute;
       inset: 0;
       border-radius: 16px;
-      background: linear-gradient(0deg, var(--ui-color-white) 0%, rgba(47, 49, 54, 0) 100%);
+      background: linear-gradient(0deg, var(--ui-color-layout) 0%, rgba(47, 49, 54, 0) 100%);
     }
   `,
 };
diff --git a/packages/ui/src/modules/onboarding/styles.css b/packages/ui/src/modules/onboarding/styles.css
index dae7dadd3..25084c566 100644
--- a/packages/ui/src/modules/onboarding/styles.css
+++ b/packages/ui/src/modules/onboarding/styles.css
@@ -47,7 +47,7 @@ html {
   --ui-color-gray-300: #b9bbbe;
   --ui-color-gray-200: #d4d6d9;
   --ui-color-gray-100: #f2f4f7;
-  --ui-color-white: white;
+  --ui-color-layout: white;
 
   --ui-color-primary-700: #0077cc;
   --ui-color-primary-500: #00aef0;
@@ -63,7 +63,7 @@ html {
   --ui-color-error-400: #ff5d35;
 
   --ui-color-current: currentColor;
-  --ui-color-onboarding-card: var(--ui-color-white);
+  --ui-color-onboarding-card: var(--ui-color-layout);
 
   /* Fonts */
 
@@ -105,8 +105,6 @@ html {
   --ui-font-body-m: 14px / 20px var(--ui-font-family-body);
   --ui-font-body-s: 12px / 18px var(--ui-font-family-body);
   --ui-font-body-xs: 12px / 18px var(--ui-font-family-body);
-
-  --ui-text-color-anchor: var(--ui-color-primary-500);
 }
 
 @media screen and (min-width: 768px) {
@@ -163,11 +161,16 @@ body {
   font-size: 13px;
   -moz-osx-font-smoothing: grayscale;
   color: var(--ui-color-gray-600);
-  background: var(--ui-color-white);
+  background: var(--ui-color-layout);
 }
 
 button,
 label,
 input {
   font-family: inherit !important;
+  color: inherit;
+}
+
+a {
+  color: inherit;
 }
diff --git a/packages/ui/src/modules/panel/components/action.js b/packages/ui/src/modules/panel/components/action.js
index 20ac4e8ee..700e9f4e2 100644
--- a/packages/ui/src/modules/panel/components/action.js
+++ b/packages/ui/src/modules/panel/components/action.js
@@ -28,7 +28,7 @@ export default {
       justify-content: center;
       appearance: none;
       border: none;
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       border: 1px solid var(--ui-color-gray-200);
       box-shadow: 0px 2px 6px rgba(32, 44, 68, 0.08);
       border-radius: 8px;
@@ -49,7 +49,6 @@ export default {
       box-shadow: none;
       background: var(--ui-color-gray-100);
       color: var(--ui-color-gray-600);
-      --ui-text-color-heading: var(--ui-color-gray-600);
     }
 
     @media (hover: hover) and (pointer: fine) {
diff --git a/packages/ui/src/modules/panel/components/header.js b/packages/ui/src/modules/panel/components/header.js
index 7897c39d7..cbb0171c9 100644
--- a/packages/ui/src/modules/panel/components/header.js
+++ b/packages/ui/src/modules/panel/components/header.js
@@ -27,7 +27,7 @@ export default {
     </template>
   `.css`
     :host {
-      background: var(--ui-color-white);
+      background: var(--ui-color-layout);
       box-shadow: var(--ui-shadow-header);
     }
    `,
diff --git a/packages/ui/src/modules/panel/components/list.js b/packages/ui/src/modules/panel/components/list.js
index 64fa20f5b..7910903ff 100644
--- a/packages/ui/src/modules/panel/components/list.js
+++ b/packages/ui/src/modules/panel/components/list.js
@@ -73,15 +73,12 @@ export default {
     }
 
     #arrow {
+      transform: rotate(180deg);
       transition: transform 0.1s;
     }
 
     :host([closed]) #arrow {
-      transform: rotate(180deg);
-    }
-
-    #content ::slotted(*) {
-      --ui-text-color-anchor: var(--ui-color-gray-800);
+      transform: rotate(0deg);
     }
 
     :host([closed]) #content {
diff --git a/packages/ui/src/modules/panel/components/protection-status-toggle.js b/packages/ui/src/modules/panel/components/protection-status-toggle.js
index 809c26f71..3b9587ad0 100644
--- a/packages/ui/src/modules/panel/components/protection-status-toggle.js
+++ b/packages/ui/src/modules/panel/components/protection-status-toggle.js
@@ -13,8 +13,10 @@ import { dispatch, html } from 'hybrids';
 
 function updateValue(value) {
   return (host) => {
-    host.value = value;
-    dispatch(host, 'change', { detail: value });
+    if (host.value !== value) {
+      host.value = value;
+      dispatch(host, 'change', { detail: value });
+    }
   };
 }
 
@@ -34,7 +36,7 @@ export default {
             onclick="${updateValue(true)}"
           >
             <ui-icon name="block-s"></ui-icon>
-            <ui-text type="label-xs">Blocked</ui-text>
+            <ui-text type="label-xs" color="inherit">Blocked</ui-text>
           </button>
         </ui-panel-action>
         <ui-panel-action class="trusted" grouped active="${!value}">
@@ -43,7 +45,7 @@ export default {
             onclick="${updateValue(false)}"
           >
             <ui-icon name="trust-s"></ui-icon>
-            <ui-text type="label-xs">Trusted</ui-text>
+            <ui-text type="label-xs" color="inherit">Trusted</ui-text>
           </button>
         </ui-panel-action>
       </ui-panel-action-group>
@@ -53,7 +55,6 @@ export default {
       width: auto;
       height: 28px;
       color: var(--ui-color-gray-600);
-      --ui-text-color-heading: currentColor;
     }
 
     ui-panel-action[active] {
diff --git a/packages/ui/src/modules/panel/dark.css b/packages/ui/src/modules/panel/dark.css
index d32d0a27f..8589a2ce6 100644
--- a/packages/ui/src/modules/panel/dark.css
+++ b/packages/ui/src/modules/panel/dark.css
@@ -1,18 +1,19 @@
 @media (prefers-color-scheme: dark) {
   html {
-    --ui-color-gray-100: #0e1218;
-    --ui-color-gray-200: #2b3444;
-    --ui-color-gray-300: #57616e;
-    --ui-color-gray-400: #7f8aa3;
-    --ui-color-gray-600: #b2b9cf;
-    --ui-color-gray-800: #eceff5;
-    --ui-color-white: #181d27;
+    --ui-color-layout: #1f2125;
+
+    --ui-color-gray-100: #13151a;
+    --ui-color-gray-200: #2f3136;
+    --ui-color-gray-300: #636468;
+    --ui-color-gray-400: #88898c;
+    --ui-color-gray-600: #b9bbbe;
+    --ui-color-gray-800: #f2f4f7;
 
     --ui-color-primary-100: #0a1e31;
-    --ui-color-primary-200: #1a4065;
-    --ui-color-primary-300: #144878;
-    --ui-color-primary-500: #4fa9e4;
-    --ui-color-primary-700: #7dc7f8;
+    --ui-color-primary-200: #00365c;
+    --ui-color-primary-300: #004f88;
+    --ui-color-primary-500: #00aef0;
+    --ui-color-primary-700: #33c7ff;
 
     --ui-color-success-100: #056605;
     --ui-color-success-500: #1b911b;
diff --git a/packages/ui/src/modules/panel/styles.css b/packages/ui/src/modules/panel/styles.css
index 0a74286bc..a02cd81ab 100644
--- a/packages/ui/src/modules/panel/styles.css
+++ b/packages/ui/src/modules/panel/styles.css
@@ -15,13 +15,14 @@
 }
 
 html {
+  --ui-color-layout: white;
+
   --ui-color-gray-800: #202c44;
   --ui-color-gray-600: #49556e;
   --ui-color-gray-400: #9ba3b4;
   --ui-color-gray-300: #c3cad9;
   --ui-color-gray-200: #dfe3eb;
   --ui-color-gray-100: #f0f2f7;
-  --ui-color-white: white;
 
   --ui-color-primary-700: #0077cc;
   --ui-color-primary-500: #00aef0;
@@ -43,7 +44,7 @@ html {
   --ui-color-danger-500: #f13436;
   --ui-color-danger-100: #ffecec;
 
-  --ui-color-backdrop: var(--ui-color-gray-800);
+  --ui-color-backdrop: var(--ui-color-gray-600);
   --ui-color-warning-text: var(--ui-color-gray-800);
   --ui-color-scroll-shadow: rgba(0, 0, 0, 0.1);
 
@@ -71,10 +72,6 @@ html {
 
   --ui-font-button-m: var(--ui-font-label-m);
   --ui-font-button-s: 600 14px / 24px var(--ui-font-family);
-
-  /* UI components overwrites */
-  --ui-text-color-heading: var(--ui-color-gray-800);
-  --ui-text-color-anchor: var(--ui-color-primary-700);
 }
 
 html,
@@ -91,7 +88,7 @@ body {
   font-size: 13px;
   -moz-osx-font-smoothing: grayscale;
   width: 100%;
-  background: var(--ui-color-white);
+  background: var(--ui-color-layout);
   max-height: 100dvh;
 }