diff --git a/apps/gallery/stories/composites/wui-icon-box.stories.ts b/apps/gallery/stories/composites/wui-icon-box.stories.ts
index 13dacb4e22..028cd47b2c 100644
--- a/apps/gallery/stories/composites/wui-icon-box.stories.ts
+++ b/apps/gallery/stories/composites/wui-icon-box.stories.ts
@@ -3,7 +3,12 @@ import '@web3modal/ui/src/composites/wui-icon-box'
 import type { WuiIconBox } from '@web3modal/ui/src/composites/wui-icon-box'
 import { html } from 'lit'
 
-import { backgroundOptions, colorOptions, iconOptions } from '../../utils/PresetUtils'
+import {
+  backgroundOptions,
+  colorOptions,
+  iconBoxBorderOptions,
+  iconOptions
+} from '../../utils/PresetUtils'
 
 type Component = Meta<WuiIconBox>
 
@@ -15,7 +20,8 @@ export default {
     iconColor: 'accent-100',
     icon: 'copy',
     background: 'transparent',
-    border: false
+    border: false,
+    borderColor: undefined
   },
 
   argTypes: {
@@ -42,6 +48,10 @@ export default {
     },
     border: {
       control: { type: 'boolean' }
+    },
+    borderColor: {
+      options: iconBoxBorderOptions,
+      control: { type: 'select' }
     }
   }
 } as Component
@@ -55,5 +65,6 @@ export const Default: Component = {
       icon=${args.icon}
       background=${args.background}
       ?border=${args.border}
+      .borderColor=${args.borderColor}
     ></wui-icon-box>`
 }
diff --git a/apps/gallery/utils/PresetUtils.ts b/apps/gallery/utils/PresetUtils.ts
index 72769bd5e1..835d3715f6 100644
--- a/apps/gallery/utils/PresetUtils.ts
+++ b/apps/gallery/utils/PresetUtils.ts
@@ -15,6 +15,7 @@ import type {
   FlexWrapType,
   GridContentType,
   GridItemsType,
+  IconBoxBorderType,
   IconType,
   LogoType,
   PlacementType,
@@ -259,4 +260,9 @@ export const accountEntryOptions: AccountEntryType[] = ['icon', 'image']
 
 export const themeOptions: ThemeType[] = ['dark', 'light']
 
+export const iconBoxBorderOptions: IconBoxBorderType[] = [
+  'wui-color-bg-125',
+  'wui-overlay-accent-010'
+]
+
 export const tagLabelOptions = ['get wallet', 'installed', 'qr code', 'recent']
diff --git a/packages/scaffold/src/partials/w3m-legal-footer/styles.ts b/packages/scaffold/src/partials/w3m-legal-footer/styles.ts
index f9ec9ae0ac..df53b74ffd 100644
--- a/packages/scaffold/src/partials/w3m-legal-footer/styles.ts
+++ b/packages/scaffold/src/partials/w3m-legal-footer/styles.ts
@@ -2,7 +2,7 @@ import { css } from 'lit'
 
 export default css`
   wui-flex {
-    background-color: var(--wui-overlay-005);
+    background-color: var(--wui-gray-glass-005);
   }
 
   a {
diff --git a/packages/scaffold/src/utils/w3m-connecting-widget/index.ts b/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
index 89cdf5c68f..1069e67c84 100644
--- a/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
+++ b/packages/scaffold/src/utils/w3m-connecting-widget/index.ts
@@ -126,6 +126,7 @@ export class W3mConnectingWidget extends LitElement {
             icon="close"
             size="sm"
             border
+            borderColor="wui-color-bg-125"
           ></wui-icon-box>
         </wui-flex>
 
diff --git a/packages/scaffold/src/views/w3m-all-wallets-view/index.ts b/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
index 7be6d32e1d..3abff006c3 100644
--- a/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
+++ b/packages/scaffold/src/views/w3m-all-wallets-view/index.ts
@@ -43,6 +43,8 @@ export class W3mAllWalletsView extends LitElement {
           backgroundcolor="accent-100"
           icon="qrCode"
           background="transparent"
+          border
+          borderColor="wui-overlay-accent-010"
           @click=${this.onWalletConnectQr.bind(this)}
         ></wui-icon-box>
       `
diff --git a/packages/scaffold/src/views/w3m-network-switch-view/index.ts b/packages/scaffold/src/views/w3m-network-switch-view/index.ts
index d5fe69b65b..617e03245d 100644
--- a/packages/scaffold/src/views/w3m-network-switch-view/index.ts
+++ b/packages/scaffold/src/views/w3m-network-switch-view/index.ts
@@ -56,6 +56,7 @@ export class W3mNetworkSwitchView extends LitElement {
             icon="close"
             size="sm"
             ?border=${true}
+            borderColor="wui-color-bg-125"
           ></wui-icon-box>
         </wui-flex>
 
diff --git a/packages/ui/src/components/wui-card/styles.ts b/packages/ui/src/components/wui-card/styles.ts
index 1216972ea7..460be4d907 100644
--- a/packages/ui/src/components/wui-card/styles.ts
+++ b/packages/ui/src/components/wui-card/styles.ts
@@ -4,7 +4,7 @@ export default css`
   :host {
     display: block;
     border-radius: clamp(0px, var(--wui-border-radius-l), 44px);
-    border: 1px solid var(--wui-overlay-005);
+    border: 1px solid var(--wui-gray-glass-005);
     background-color: var(--wui-color-bg-125);
     overflow: hidden;
   }
diff --git a/packages/ui/src/components/wui-shimmer/styles.ts b/packages/ui/src/components/wui-shimmer/styles.ts
index 75ad2a131d..2e60d564d5 100644
--- a/packages/ui/src/components/wui-shimmer/styles.ts
+++ b/packages/ui/src/components/wui-shimmer/styles.ts
@@ -3,7 +3,7 @@ import { css } from 'lit'
 export default css`
   :host {
     display: block;
-    outline: 1px solid var(--wui-overlay-005);
+    outline: 1px solid var(--wui-gray-glass-005);
     background: linear-gradient(
       90deg,
       var(--wui-color-bg-200) 5%,
diff --git a/packages/ui/src/composites/wui-account-button/styles.ts b/packages/ui/src/composites/wui-account-button/styles.ts
index 148c267300..30f9048c86 100644
--- a/packages/ui/src/composites/wui-account-button/styles.ts
+++ b/packages/ui/src/composites/wui-account-button/styles.ts
@@ -7,24 +7,24 @@ export default css`
 
   button {
     border-radius: var(--wui-border-radius-3xl);
-    background: var(--wui-overlay-002);
+    background: var(--wui-gray-glass-002);
     display: flex;
     gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-3xs) var(--wui-spacing-xs) var(--wui-spacing-3xs)
       var(--wui-spacing-xs);
-    border: 1px solid var(--wui-overlay-005);
+    border: 1px solid var(--wui-gray-glass-005);
   }
 
   button:disabled {
-    background: var(--wui-overlay-015);
+    background: var(--wui-gray-glass-015);
   }
 
   button:disabled > wui-text {
-    color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
   }
 
   button:disabled > wui-flex > wui-text {
-    color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
   }
 
   button:disabled > wui-image,
@@ -52,13 +52,13 @@ export default css`
     border-radius: var(--wui-border-radius-3xl);
     width: 24px;
     height: 24px;
-    outline: 2px solid var(--wui-overlay-005);
+    outline: 2px solid var(--wui-gray-glass-005);
   }
 
   wui-flex {
     border-radius: var(--wui-border-radius-3xl);
-    border: 1px solid var(--wui-overlay-005);
-    background: var(--wui-overlay-005);
+    border: 1px solid var(--wui-gray-glass-005);
+    background: var(--wui-gray-glass-005);
     padding: 4px var(--wui-spacing-m) 4px var(--wui-spacing-xxs);
   }
 
@@ -71,7 +71,7 @@ export default css`
   wui-avatar {
     width: 20px;
     height: 20px;
-    outline: 2px solid var(--wui-overlay-010);
+    outline: 2px solid var(--wui-gray-glass-010);
   }
 
   @media (hover: hover) and (pointer: fine) {
diff --git a/packages/ui/src/composites/wui-all-wallets-image/styles.ts b/packages/ui/src/composites/wui-all-wallets-image/styles.ts
index aff9a890f6..3170b97632 100644
--- a/packages/ui/src/composites/wui-all-wallets-image/styles.ts
+++ b/packages/ui/src/composites/wui-all-wallets-image/styles.ts
@@ -7,7 +7,7 @@ export default css`
     width: 40px;
     height: 40px;
     overflow: hidden;
-    background: var(--wui-overlay-002);
+    background: var(--wui-gray-glass-002);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -24,7 +24,7 @@ export default css`
     left: 0;
     right: 0;
     border-radius: inherit;
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
     pointer-events: none;
   }
 
diff --git a/packages/ui/src/composites/wui-avatar/styles.ts b/packages/ui/src/composites/wui-avatar/styles.ts
index f1aac9c46b..9bb131e61f 100644
--- a/packages/ui/src/composites/wui-avatar/styles.ts
+++ b/packages/ui/src/composites/wui-avatar/styles.ts
@@ -5,7 +5,7 @@ export default css`
     display: block;
     width: 64px;
     height: 64px;
-    outline: 8px solid var(--wui-overlay-005);
+    outline: 8px solid var(--wui-gray-glass-005);
     border-radius: var(--wui-border-radius-3xl);
     overflow: hidden;
     position: relative;
diff --git a/packages/ui/src/composites/wui-button/styles.ts b/packages/ui/src/composites/wui-button/styles.ts
index 1ec271a1a1..af8df86fc6 100644
--- a/packages/ui/src/composites/wui-button/styles.ts
+++ b/packages/ui/src/composites/wui-button/styles.ts
@@ -7,12 +7,12 @@ export default css`
   }
 
   button {
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
     border-radius: var(--wui-border-radius-m);
   }
 
   button:disabled {
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
   }
 
   button[data-size='sm'] {
diff --git a/packages/ui/src/composites/wui-card-select-loader/styles.ts b/packages/ui/src/composites/wui-card-select-loader/styles.ts
index 5102eb6d4d..056b8e25b0 100644
--- a/packages/ui/src/composites/wui-card-select-loader/styles.ts
+++ b/packages/ui/src/composites/wui-card-select-loader/styles.ts
@@ -8,7 +8,7 @@ export default css`
     width: 76px;
     row-gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-xs) 10px;
-    background-color: var(--wui-overlay-002);
+    background-color: var(--wui-gray-glass-002);
     border-radius: clamp(0px, var(--wui-border-radius-xs), 20px);
     position: relative;
   }
@@ -27,7 +27,7 @@ export default css`
   }
 
   svg > path {
-    stroke: var(--wui-overlay-010);
+    stroke: var(--wui-gray-glass-010);
     stroke-width: 1px;
   }
 `
diff --git a/packages/ui/src/composites/wui-card-select/styles.ts b/packages/ui/src/composites/wui-card-select/styles.ts
index 00ed7ac399..f721ea5327 100644
--- a/packages/ui/src/composites/wui-card-select/styles.ts
+++ b/packages/ui/src/composites/wui-card-select/styles.ts
@@ -6,7 +6,7 @@ export default css`
     width: 76px;
     row-gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-xs) var(--wui-spacing-0);
-    background-color: var(--wui-overlay-002);
+    background-color: var(--wui-gray-glass-002);
     border-radius: clamp(0px, var(--wui-border-radius-xs), 20px);
   }
 
@@ -20,20 +20,20 @@ export default css`
   }
 
   button:disabled > wui-text {
-    color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
   }
 
   [data-selected='true'] {
-    background-color: var(--wui-color-accent-020);
+    background-color: var(--wui-accent-glass-020);
   }
 
   @media (hover: hover) and (pointer: fine) {
     [data-selected='true']:hover:enabled {
-      background-color: var(--wui-color-accent-015);
+      background-color: var(--wui-accent-glass-015);
     }
   }
 
   [data-selected='true']:active:enabled {
-    background-color: var(--wui-color-accent-010);
+    background-color: var(--wui-accent-glass-010);
   }
 `
diff --git a/packages/ui/src/composites/wui-chip/styles.ts b/packages/ui/src/composites/wui-chip/styles.ts
index 2d4ce37d24..4f4c01dbff 100644
--- a/packages/ui/src/composites/wui-chip/styles.ts
+++ b/packages/ui/src/composites/wui-chip/styles.ts
@@ -2,7 +2,7 @@ import { css } from 'lit'
 
 export default css`
   a {
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
     border-radius: var(--wui-border-radius-3xl);
   }
 
@@ -23,7 +23,7 @@ export default css`
 
   a[data-variant='shade'] {
     background-color: transparent;
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
     color: var(--wui-color-fg-200);
   }
 
@@ -61,7 +61,7 @@ export default css`
   }
 
   a[data-variant='shade'] > wui-image {
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
   }
 
   a[data-variant='fill'] > wui-icon,
@@ -85,16 +85,16 @@ export default css`
   }
 
   a[data-variant='shade']:focus-visible {
-    background-color: var(--wui-overlay-015);
+    background-color: var(--wui-gray-glass-015);
   }
 
   a[data-variant='transparent']:focus-visible {
-    background-color: var(--wui-overlay-005);
+    background-color: var(--wui-gray-glass-005);
   }
 
   a.disabled {
-    color: var(--wui-overlay-015);
-    background-color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
+    background-color: var(--wui-gray-glass-015);
     pointer-events: none;
   }
 
@@ -104,11 +104,11 @@ export default css`
     }
 
     a[data-variant='shade']:hover {
-      background-color: var(--wui-overlay-015);
+      background-color: var(--wui-gray-glass-015);
     }
 
     a[data-variant='transparent']:hover {
-      background-color: var(--wui-overlay-005);
+      background-color: var(--wui-gray-glass-005);
     }
   }
 
@@ -117,10 +117,10 @@ export default css`
   }
 
   a[data-variant='shade']:active {
-    background-color: var(--wui-overlay-020);
+    background-color: var(--wui-gray-glass-020);
   }
 
   a[data-variant='transparent']:active {
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
   }
 `
diff --git a/packages/ui/src/composites/wui-connect-button/styles.ts b/packages/ui/src/composites/wui-connect-button/styles.ts
index e917006954..aef0a1dba6 100644
--- a/packages/ui/src/composites/wui-connect-button/styles.ts
+++ b/packages/ui/src/composites/wui-connect-button/styles.ts
@@ -8,24 +8,24 @@ export default css`
 
   button {
     background: var(--wui-color-accent-100);
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
     border-radius: var(--wui-border-radius-m);
     gap: var(--wui-spacing-xs);
   }
 
   button.loading {
-    background: var(--wui-overlay-010);
-    border: 1px solid var(--wui-overlay-010);
+    background: var(--wui-gray-glass-010);
+    border: 1px solid var(--wui-gray-glass-010);
     pointer-events: none;
   }
 
   button:disabled {
-    background-color: var(--wui-overlay-015);
-    border: 1px solid var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-015);
+    border: 1px solid var(--wui-gray-glass-010);
   }
 
   button:disabled > wui-text {
-    color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -39,7 +39,7 @@ export default css`
   }
 
   button:focus-visible {
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
     background-color: var(--wui-color-accent-090);
     -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
diff --git a/packages/ui/src/composites/wui-icon-box/index.ts b/packages/ui/src/composites/wui-icon-box/index.ts
index 84d7a3d2ec..9c624bd989 100644
--- a/packages/ui/src/composites/wui-icon-box/index.ts
+++ b/packages/ui/src/composites/wui-icon-box/index.ts
@@ -2,7 +2,13 @@ import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import '../../components/wui-icon/index.js'
 import { elementStyles, resetStyles } from '../../utils/ThemeUtil.js'
-import type { BackgroundType, ColorType, IconType, SizeType } from '../../utils/TypesUtil.js'
+import type {
+  BackgroundType,
+  ColorType,
+  IconBoxBorderType,
+  IconType,
+  SizeType
+} from '../../utils/TypesUtil.js'
 import styles from './styles.js'
 
 @customElement('wui-icon-box')
@@ -20,6 +26,8 @@ export class WuiIconBox extends LitElement {
 
   @property({ type: Boolean }) public border? = false
 
+  @property() public borderColor?: IconBoxBorderType = 'wui-color-bg-125'
+
   @property() public icon: IconType = 'copy'
 
   // -- Render -------------------------------------------- //
@@ -57,7 +65,7 @@ export class WuiIconBox extends LitElement {
        --local-bg-mix: ${isColorChange ? `100%` : bgMix};
        --local-border-radius: var(--wui-border-radius-${borderRadius});
        --local-size: var(--wui-icon-box-size-${this.size});
-       --local-border: 2px solid ${this.border ? `var(--wui-color-bg-125)` : `transparent`}
+       --local-border: 2px solid ${this.border ? `var(--${this.borderColor})` : `transparent`}
    `
 
     return html` <wui-icon color=${this.iconColor} size=${iconSize} name=${this.icon}></wui-icon> `
diff --git a/packages/ui/src/composites/wui-icon-box/styles.ts b/packages/ui/src/composites/wui-icon-box/styles.ts
index e99b5e4f67..39a3d2fe14 100644
--- a/packages/ui/src/composites/wui-icon-box/styles.ts
+++ b/packages/ui/src/composites/wui-icon-box/styles.ts
@@ -7,7 +7,7 @@ export default css`
     align-items: center;
     position: relative;
     overflow: hidden;
-    background-color: var(--wui-overlay-020);
+    background-color: var(--wui-gray-glass-020);
     background-color: color-mix(in srgb, var(--local-bg-value) var(--local-bg-mix), transparent);
     border-radius: var(--local-border-radius);
     border: var(--local-border);
diff --git a/packages/ui/src/composites/wui-input-numeric/styles.ts b/packages/ui/src/composites/wui-input-numeric/styles.ts
index e20f83defa..7fb18315e2 100644
--- a/packages/ui/src/composites/wui-input-numeric/styles.ts
+++ b/packages/ui/src/composites/wui-input-numeric/styles.ts
@@ -9,9 +9,9 @@ export default css`
   input {
     width: 50px;
     height: 50px;
-    background: var(--wui-overlay-005);
+    background: var(--wui-gray-glass-005);
     border-radius: var(--wui-border-radius-xs);
-    border: 1px solid var(--wui-overlay-005);
+    border: 1px solid var(--wui-gray-glass-005);
     font-family: var(--wui-font-family);
     font-size: var(--wui-font-size-large);
     font-weight: var(--wui-font-weight-regular);
@@ -38,13 +38,13 @@ export default css`
 
   input:disabled {
     cursor: not-allowed;
-    border: 1px solid var(--wui-overlay-010);
-    background: var(--wui-overlay-015);
+    border: 1px solid var(--wui-gray-glass-010);
+    background: var(--wui-gray-glass-015);
   }
 
   input:focus:enabled {
     transition: all var(--wui-ease-out-power-2) var(--wui-duration-sm);
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
     border: 1px solid var(--wui-color-accent-100);
     -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
@@ -52,6 +52,6 @@ export default css`
   }
 
   input:hover:enabled {
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
   }
 `
diff --git a/packages/ui/src/composites/wui-input-text/styles.ts b/packages/ui/src/composites/wui-input-text/styles.ts
index 6e07f87672..2e0dfe3a94 100644
--- a/packages/ui/src/composites/wui-input-text/styles.ts
+++ b/packages/ui/src/composites/wui-input-text/styles.ts
@@ -11,8 +11,8 @@ export default css`
   input {
     width: 100%;
     border-radius: var(--wui-border-radius-xxs);
-    border: 1px solid var(--wui-overlay-005);
-    background: var(--wui-overlay-005);
+    border: 1px solid var(--wui-gray-glass-005);
+    background: var(--wui-gray-glass-005);
     font-size: var(--wui-font-size-paragraph);
     font-weight: var(--wui-font-weight-regular);
     letter-spacing: var(--wui-letter-spacing-paragraph);
@@ -23,8 +23,8 @@ export default css`
 
   input:disabled {
     cursor: not-allowed;
-    border: 1px solid var(--wui-overlay-010);
-    background: var(--wui-overlay-015);
+    border: 1px solid var(--wui-gray-glass-010);
+    background: var(--wui-gray-glass-015);
   }
 
   input:disabled::placeholder,
@@ -38,7 +38,7 @@ export default css`
 
   input:focus:enabled {
     transition: all var(--wui-ease-out-power-2) var(--wui-duration-sm);
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
     border: 1px solid var(--wui-color-accent-100);
     -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
@@ -46,7 +46,7 @@ export default css`
   }
 
   input:hover:enabled {
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
   }
 
   wui-icon {
diff --git a/packages/ui/src/composites/wui-link/styles.ts b/packages/ui/src/composites/wui-link/styles.ts
index 119ea23e94..f0ebf44b7e 100644
--- a/packages/ui/src/composites/wui-link/styles.ts
+++ b/packages/ui/src/composites/wui-link/styles.ts
@@ -10,6 +10,6 @@ export default css`
 
   button:disabled {
     background-color: transparent;
-    color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
   }
 `
diff --git a/packages/ui/src/composites/wui-list-item/styles.ts b/packages/ui/src/composites/wui-list-item/styles.ts
index 1f3898be6a..7ba2f4ec47 100644
--- a/packages/ui/src/composites/wui-list-item/styles.ts
+++ b/packages/ui/src/composites/wui-list-item/styles.ts
@@ -5,7 +5,7 @@ export default css`
     column-gap: var(--wui-spacing-s);
     padding: 11px 18px 11px var(--wui-spacing-s);
     width: 100%;
-    background-color: var(--wui-overlay-002);
+    background-color: var(--wui-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-250);
   }
@@ -17,16 +17,16 @@ export default css`
   button > wui-image {
     width: 32px;
     height: 32px;
-    outline: 2px solid var(--wui-overlay-005);
+    outline: 2px solid var(--wui-gray-glass-005);
     border-radius: var(--wui-border-radius-3xl);
   }
 
   button > wui-icon-box[data-variant='blue'] {
-    outline: 2px solid var(--wui-color-accent-005);
+    outline: 2px solid var(--wui-accent-glass-005);
   }
 
   button > wui-icon-box[data-variant='overlay'] {
-    outline: 2px solid var(--wui-overlay-005);
+    outline: 2px solid var(--wui-gray-glass-005);
   }
 
   button > wui-icon {
@@ -35,8 +35,8 @@ export default css`
   }
 
   button:disabled {
-    background-color: var(--wui-overlay-015);
-    color: var(--wui-overlay-015);
+    background-color: var(--wui-gray-glass-015);
+    color: var(--wui-gray-glass-015);
   }
 
   button[data-loading='true'] > wui-icon {
diff --git a/packages/ui/src/composites/wui-list-transaction/styles.ts b/packages/ui/src/composites/wui-list-transaction/styles.ts
index 6bd7afb886..2a4bf612a2 100644
--- a/packages/ui/src/composites/wui-list-transaction/styles.ts
+++ b/packages/ui/src/composites/wui-list-transaction/styles.ts
@@ -5,7 +5,7 @@ export default css`
     column-gap: var(--wui-spacing-s);
     padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs);
     width: 100%;
-    background-color: var(--wui-overlay-002);
+    background-color: var(--wui-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-250);
   }
diff --git a/packages/ui/src/composites/wui-list-wallet/styles.ts b/packages/ui/src/composites/wui-list-wallet/styles.ts
index 13b4b08742..675d84f6c8 100644
--- a/packages/ui/src/composites/wui-list-wallet/styles.ts
+++ b/packages/ui/src/composites/wui-list-wallet/styles.ts
@@ -5,7 +5,7 @@ export default css`
     column-gap: var(--wui-spacing-s);
     padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs);
     width: 100%;
-    background-color: var(--wui-overlay-002);
+    background-color: var(--wui-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
     color: var(--wui-color-fg-100);
   }
@@ -20,12 +20,12 @@ export default css`
   }
 
   button:disabled {
-    background-color: var(--wui-overlay-015);
-    color: var(--wui-overlay-015);
+    background-color: var(--wui-gray-glass-015);
+    color: var(--wui-gray-glass-015);
   }
 
   button:disabled > wui-tag {
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
     color: var(--wui-color-fg-300);
   }
 `
diff --git a/packages/ui/src/composites/wui-logo-select/styles.ts b/packages/ui/src/composites/wui-logo-select/styles.ts
index 9ab9ca9426..c82db2e641 100644
--- a/packages/ui/src/composites/wui-logo-select/styles.ts
+++ b/packages/ui/src/composites/wui-logo-select/styles.ts
@@ -8,7 +8,7 @@ export default css`
   button {
     width: 50px;
     height: 50px;
-    background: var(--wui-overlay-002);
+    background: var(--wui-gray-glass-002);
     border-radius: var(--wui-border-radius-xs);
   }
 `
diff --git a/packages/ui/src/composites/wui-logo/styles.ts b/packages/ui/src/composites/wui-logo/styles.ts
index ce075639ab..4688d9a3ef 100644
--- a/packages/ui/src/composites/wui-logo/styles.ts
+++ b/packages/ui/src/composites/wui-logo/styles.ts
@@ -6,7 +6,7 @@ export default css`
     width: 40px;
     height: 40px;
     border-radius: var(--wui-border-radius-3xl);
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
     overflow: hidden;
   }
 
diff --git a/packages/ui/src/composites/wui-network-button/styles.ts b/packages/ui/src/composites/wui-network-button/styles.ts
index f7c76bcbea..43ba7b7943 100644
--- a/packages/ui/src/composites/wui-network-button/styles.ts
+++ b/packages/ui/src/composites/wui-network-button/styles.ts
@@ -11,24 +11,24 @@ export default css`
     gap: var(--wui-spacing-xs);
     padding: var(--wui-spacing-2xs) var(--wui-spacing-s) var(--wui-spacing-2xs)
       var(--wui-spacing-xs);
-    border: 1px solid var(--wui-overlay-010);
-    background-color: var(--wui-overlay-005);
+    border: 1px solid var(--wui-gray-glass-010);
+    background-color: var(--wui-gray-glass-005);
     color: var(--wui-color-fg-100);
   }
 
   button:disabled {
-    border: 1px solid var(--wui-overlay-005);
-    background-color: var(--wui-overlay-015);
-    color: var(--wui-overlay-015);
+    border: 1px solid var(--wui-gray-glass-005);
+    background-color: var(--wui-gray-glass-015);
+    color: var(--wui-gray-glass-015);
   }
 
   @media (hover: hover) and (pointer: fine) {
     button:hover:enabled {
-      background-color: var(--wui-overlay-010);
+      background-color: var(--wui-gray-glass-010);
     }
 
     button:active:enabled {
-      background-color: var(--wui-overlay-015);
+      background-color: var(--wui-gray-glass-015);
     }
   }
 
@@ -37,6 +37,6 @@ export default css`
     border-radius: var(--wui-border-radius-3xl);
     width: 24px;
     height: 24px;
-    outline: 2px solid var(--wui-overlay-005);
+    outline: 2px solid var(--wui-gray-glass-005);
   }
 `
diff --git a/packages/ui/src/composites/wui-network-image/index.ts b/packages/ui/src/composites/wui-network-image/index.ts
index 609171f3b7..39284dbdbb 100644
--- a/packages/ui/src/composites/wui-network-image/index.ts
+++ b/packages/ui/src/composites/wui-network-image/index.ts
@@ -25,7 +25,9 @@ export class WuiNetworkImage extends LitElement {
   public override render() {
     const isLg = this.size === 'lg'
     this.style.cssText = `
-      --local-stroke: ${this.selected ? 'var(--wui-color-accent-100)' : 'var(--wui-overlay-010)'};
+      --local-stroke: ${
+        this.selected ? 'var(--wui-color-accent-100)' : 'var(--wui-gray-glass-010)'
+      };
       --local-path: ${isLg ? 'var(--wui-path-network-lg)' : 'var(--wui-path-network)'};
       --local-width: ${isLg ? '86px' : '48px'};
       --local-height: ${isLg ? '96px' : '54px'};
diff --git a/packages/ui/src/composites/wui-network-image/styles.ts b/packages/ui/src/composites/wui-network-image/styles.ts
index 06d4d33782..5b7a20a143 100644
--- a/packages/ui/src/composites/wui-network-image/styles.ts
+++ b/packages/ui/src/composites/wui-network-image/styles.ts
@@ -18,7 +18,7 @@ export default css`
     width: 100%;
     height: 100%;
     z-index: 1;
-    fill: var(--wui-overlay-002);
+    fill: var(--wui-gray-glass-002);
   }
 
   svg > path {
@@ -31,7 +31,7 @@ export default css`
     height: 100%;
     -webkit-clip-path: var(--local-path);
     clip-path: var(--local-path);
-    background: var(--wui-overlay-002);
+    background: var(--wui-gray-glass-002);
   }
 
   wui-icon {
diff --git a/packages/ui/src/composites/wui-snackbar/styles.ts b/packages/ui/src/composites/wui-snackbar/styles.ts
index 178f48c11a..2b2d3cc44e 100644
--- a/packages/ui/src/composites/wui-snackbar/styles.ts
+++ b/packages/ui/src/composites/wui-snackbar/styles.ts
@@ -7,7 +7,7 @@ export default css`
     align-items: center;
     padding: 7px var(--wui-spacing-l) 7px var(--wui-spacing-xs);
     border-radius: var(--wui-border-radius-3xl);
-    border: 1px solid var(--wui-overlay-005);
+    border: 1px solid var(--wui-gray-glass-005);
     background-color: var(--wui-color-bg-175);
     box-shadow:
       0px 14px 64px -4px rgba(0, 0, 0, 0.15),
diff --git a/packages/ui/src/composites/wui-tabs/styles.ts b/packages/ui/src/composites/wui-tabs/styles.ts
index 3267e929b0..428b5a5b0e 100644
--- a/packages/ui/src/composites/wui-tabs/styles.ts
+++ b/packages/ui/src/composites/wui-tabs/styles.ts
@@ -3,7 +3,7 @@ import { css } from 'lit'
 export default css`
   :host {
     display: inline-flex;
-    background-color: var(--wui-overlay-002);
+    background-color: var(--wui-gray-glass-002);
     border-radius: var(--wui-border-radius-3xl);
     padding: var(--wui-spacing-3xs);
     position: relative;
@@ -21,8 +21,8 @@ export default css`
     width: var(--local-tab-width);
     height: 28px;
     border-radius: var(--wui-border-radius-3xl);
-    background-color: var(--wui-overlay-002);
-    box-shadow: inset 0 0 0 1px var(--wui-overlay-002);
+    background-color: var(--wui-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-gray-glass-002);
     transform: translateX(calc(var(--local-tab) * var(--local-tab-width)));
     transition: transform var(--wui-ease-out-power-2) var(--wui-duration-lg);
   }
diff --git a/packages/ui/src/composites/wui-tag/styles.ts b/packages/ui/src/composites/wui-tag/styles.ts
index 0777cecfb3..a402d5162f 100644
--- a/packages/ui/src/composites/wui-tag/styles.ts
+++ b/packages/ui/src/composites/wui-tag/styles.ts
@@ -8,12 +8,12 @@ export default css`
   }
 
   :host([data-variant='main']) {
-    background-color: var(--wui-color-accent-015);
+    background-color: var(--wui-accent-glass-015);
     color: var(--wui-color-accent-100);
   }
 
   :host([data-variant='shade']) {
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
     color: var(--wui-color-fg-200);
   }
 
diff --git a/packages/ui/src/composites/wui-transaction-visual/index.ts b/packages/ui/src/composites/wui-transaction-visual/index.ts
index aac7762e5c..0728868910 100644
--- a/packages/ui/src/composites/wui-transaction-visual/index.ts
+++ b/packages/ui/src/composites/wui-transaction-visual/index.ts
@@ -51,6 +51,7 @@ export class WuiTransactionVisual extends LitElement {
         background="opaque"
         .icon=${icon}
         ?border=${true}
+        borderColor="wui-color-bg-125"
       ></wui-icon-box>
     `
   }
diff --git a/packages/ui/src/composites/wui-transaction-visual/styles.ts b/packages/ui/src/composites/wui-transaction-visual/styles.ts
index dc4e042e9c..19afe944df 100644
--- a/packages/ui/src/composites/wui-transaction-visual/styles.ts
+++ b/packages/ui/src/composites/wui-transaction-visual/styles.ts
@@ -8,7 +8,7 @@ export default css`
     position: relative;
     width: 40px;
     height: 40px;
-    border: 1px solid var(--wui-overlay-005);
+    border: 1px solid var(--wui-gray-glass-005);
     border-radius: var(--wui-border-radius-3xl);
   }
 
diff --git a/packages/ui/src/composites/wui-wallet-image/styles.ts b/packages/ui/src/composites/wui-wallet-image/styles.ts
index 533382c26d..b57640da46 100644
--- a/packages/ui/src/composites/wui-wallet-image/styles.ts
+++ b/packages/ui/src/composites/wui-wallet-image/styles.ts
@@ -5,7 +5,7 @@ export default css`
     position: relative;
     border-radius: inherit;
     overflow: hidden;
-    background-color: var(--wui-overlay-002);
+    background-color: var(--wui-gray-glass-002);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -22,12 +22,12 @@ export default css`
     left: 0;
     right: 0;
     border-radius: inherit;
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
     pointer-events: none;
   }
 
   :host([name='Extension'])::after {
-    border: 1px solid var(--wui-color-accent-010);
+    border: 1px solid var(--wui-accent-glass-010);
   }
 
   :host([data-wallet-icon='allWallets']) {
@@ -35,7 +35,7 @@ export default css`
   }
 
   :host([data-wallet-icon='allWallets'])::after {
-    border: 1px solid var(--wui-color-accent-010);
+    border: 1px solid var(--wui-accent-glass-010);
   }
 
   wui-icon[data-parent-size='inherit'] {
diff --git a/packages/ui/src/layout/wui-separator/styles.ts b/packages/ui/src/layout/wui-separator/styles.ts
index d029086d95..8843fe56c0 100644
--- a/packages/ui/src/layout/wui-separator/styles.ts
+++ b/packages/ui/src/layout/wui-separator/styles.ts
@@ -6,7 +6,7 @@ export default css`
     display: flex;
     width: 100%;
     height: 1px;
-    background-color: var(--wui-overlay-005);
+    background-color: var(--wui-gray-glass-005);
     justify-content: center;
     align-items: center;
   }
diff --git a/packages/ui/src/utils/ThemeUtil.ts b/packages/ui/src/utils/ThemeUtil.ts
index 26ae2571dd..67dcaf2bfe 100644
--- a/packages/ui/src/utils/ThemeUtil.ts
+++ b/packages/ui/src/utils/ThemeUtil.ts
@@ -138,12 +138,16 @@ function createRootStyles(themeVariables: ThemeVariables) {
       --wui-color-blue-015: var(--wui-color-accent-base-015);
 
       --wui-color-accent-100: var(--wui-color-accent-base-100);
-      --wui-color-accent-090: var(--wui-color-accent-base-100);
+      --wui-color-accent-090: var(--wui-color-accent-base-090);
       --wui-color-accent-080: var(--wui-color-accent-base-080);
-      --wui-color-accent-020: var(--wui-color-accent-base-020);
-      --wui-color-accent-015: var(--wui-color-accent-base-015);
-      --wui-color-accent-010: var(--wui-color-accent-base-010);
-      --wui-color-accent-005: var(--wui-color-accent-base-005);
+
+      --wui-accent-glass-090: var(--wui-accent-glass-base-090);
+      --wui-accent-glass-080: var(--wui-accent-glass-base-080);
+      --wui-accent-glass-020: var(--wui-accent-glass-base-020);
+      --wui-accent-glass-015: var(--wui-accent-glass-base-015);
+      --wui-accent-glass-010: var(--wui-accent-glass-base-010);
+      --wui-accent-glass-005: var(--wui-accent-glass-base-005);
+      --wui-accent-glass-002: var(--wui-accent-glass-base-002);
 
       --wui-color-fg-100: var(--wui-color-fg-base-100);
       --wui-color-fg-125: var(--wui-color-fg-base-125);
@@ -190,10 +194,17 @@ function createRootStyles(themeVariables: ThemeVariables) {
         var(--wui-color-accent-base-100) 80%,
         var(--w3m-default)
       );
-      --wui-color-accent-020: color-mix(in srgb, var(--wui-color-accent-base-100) 20%, transparent);
-      --wui-color-accent-015: color-mix(in srgb, var(--wui-color-accent-base-100) 15%, transparent);
-      --wui-color-accent-010: color-mix(in srgb, var(--wui-color-accent-base-100) 10%, transparent);
-      --wui-color-accent-005: color-mix(in srgb, var(--wui-color-accent-base-100) 5%, transparent);
+
+      --wui-color-accent-090: color-mix(in srgb, var(--wui-color-accent-base-100) 90%, transparent);
+      --wui-color-accent-080: color-mix(in srgb, var(--wui-color-accent-base-100) 80%, transparent);
+
+      --wui-accent-glass-090: color-mix(in srgb, var(--wui-color-accent-base-100) 90%, transparent);
+      --wui-accent-glass-080: color-mix(in srgb, var(--wui-color-accent-base-100) 80%, transparent);
+      --wui-accent-glass-020: color-mix(in srgb, var(--wui-color-accent-base-100) 20%, transparent);
+      --wui-accent-glass-015: color-mix(in srgb, var(--wui-color-accent-base-100) 15%, transparent);
+      --wui-accent-glass-010: color-mix(in srgb, var(--wui-color-accent-base-100) 10%, transparent);
+      --wui-accent-glass-005: color-mix(in srgb, var(--wui-color-accent-base-100) 5%, transparent);
+      --wui-color-accent-002: color-mix(in srgb, var(--wui-color-accent-base-100) 2%, transparent);
 
       --wui-color-fg-100: color-mix(
         in srgb,
@@ -342,10 +353,14 @@ function createRootStyles(themeVariables: ThemeVariables) {
       --wui-color-accent-base-100: var(--w3m-accent);
       --wui-color-accent-base-090: #59aaff;
       --wui-color-accent-base-080: #6cb4ff;
-      --wui-color-accent-base-020: rgba(71, 161, 255, 0.2);
-      --wui-color-accent-base-015: rgba(71, 161, 255, 0.15);
-      --wui-color-accent-base-010: rgba(71, 161, 255, 0.1);
-      --wui-color-accent-base-005: rgba(71, 161, 255, 0.05);
+
+      --wui-accent-glass-base-090: rgba(71, 161, 255, 0.9);
+      --wui-accent-glass-base-080: rgba(71, 161, 255, 0.8);
+      --wui-accent-glass-base-020: rgba(71, 161, 255, 0.2);
+      --wui-accent-glass-base-015: rgba(71, 161, 255, 0.15);
+      --wui-accent-glass-base-010: rgba(71, 161, 255, 0.1);
+      --wui-accent-glass-base-005: rgba(71, 161, 255, 0.05);
+      --wui-accent-glass-base-002: rgba(71, 161, 255, 0.02);
 
       --wui-color-fg-base-100: #e4e7e7;
       --wui-color-fg-base-125: #d0d5d5;
@@ -379,13 +394,16 @@ function createRootStyles(themeVariables: ThemeVariables) {
 
       --wui-avatar-border-base: #252525;
 
-      --wui-overlay-002: rgba(255, 255, 255, 0.02);
-      --wui-overlay-005: rgba(255, 255, 255, 0.05);
-      --wui-overlay-010: rgba(255, 255, 255, 0.1);
-      --wui-overlay-015: rgba(255, 255, 255, 0.15);
-      --wui-overlay-020: rgba(255, 255, 255, 0.2);
-      --wui-overlay-025: rgba(255, 255, 255, 0.25);
-      --wui-overlay-030: rgba(255, 255, 255, 0.3);
+      --wui-gray-glass-001: rgba(255, 255, 255, 0.01);
+      --wui-gray-glass-002: rgba(255, 255, 255, 0.02);
+      --wui-gray-glass-005: rgba(255, 255, 255, 0.05);
+      --wui-gray-glass-010: rgba(255, 255, 255, 0.1);
+      --wui-gray-glass-015: rgba(255, 255, 255, 0.15);
+      --wui-gray-glass-020: rgba(255, 255, 255, 0.2);
+      --wui-gray-glass-025: rgba(255, 255, 255, 0.25);
+      --wui-gray-glass-030: rgba(255, 255, 255, 0.3);
+      --wui-gray-glass-060: rgba(255, 255, 255, 0.6);
+      --wui-gray-glass-080: rgba(255, 255, 255, 0.8);
     }
 
     [data-wui-theme='light'] {
@@ -398,10 +416,14 @@ function createRootStyles(themeVariables: ThemeVariables) {
       --wui-color-accent-base-100: var(--w3m-accent);
       --wui-color-accent-base-090: #2d7dd2;
       --wui-color-accent-base-080: #2978cc;
-      --wui-color-accent-base-020: rgba(51, 150, 255, 0.2);
-      --wui-color-accent-base-015: rgba(51, 150, 255, 0.15);
-      --wui-color-accent-base-010: rgba(51, 150, 255, 0.1);
-      --wui-color-accent-base-005: rgba(51, 150, 255, 0.05);
+
+      --wui-accent-glass-base-090: rgba(51, 150, 255, 0.9);
+      --wui-accent-glass-base-080: rgba(51, 150, 255, 0.8);
+      --wui-accent-glass-base-020: rgba(51, 150, 255, 0.2);
+      --wui-accent-glass-base-015: rgba(51, 150, 255, 0.15);
+      --wui-accent-glass-base-010: rgba(51, 150, 255, 0.1);
+      --wui-accent-glass-base-005: rgba(51, 150, 255, 0.05);
+      --wui-accent-glass-base-002: rgba(51, 150, 255, 0.02);
 
       --wui-color-fg-base-100: #141414;
       --wui-color-fg-base-125: #2d3131;
@@ -431,17 +453,20 @@ function createRootStyles(themeVariables: ThemeVariables) {
       --wui-icon-box-bg-success-base-100: #daf0e4;
       --wui-icon-box-bg-inverse-base-100: #dcecfc;
 
-      --wui-all-wallets-bg-base-100: #c1dfde;
+      --wui-all-wallets-bg-base-100: #e8f1fa;
 
       --wui-avatar-border-base: #f3f4f4;
 
-      --wui-overlay-002: rgba(0, 0, 0, 0.02);
-      --wui-overlay-005: rgba(0, 0, 0, 0.05);
-      --wui-overlay-010: rgba(0, 0, 0, 0.1);
-      --wui-overlay-015: rgba(0, 0, 0, 0.15);
-      --wui-overlay-020: rgba(0, 0, 0, 0.2);
-      --wui-overlay-025: rgba(0, 0, 0, 0.25);
-      --wui-overlay-030: rgba(0, 0, 0, 0.3);
+      --wui-gray-glass-001: rgba(0, 0, 0, 0.01);
+      --wui-gray-glass-002: rgba(0, 0, 0, 0.02);
+      --wui-gray-glass-005: rgba(0, 0, 0, 0.05);
+      --wui-gray-glass-010: rgba(0, 0, 0, 0.1);
+      --wui-gray-glass-015: rgba(0, 0, 0, 0.15);
+      --wui-gray-glass-020: rgba(0, 0, 0, 0.2);
+      --wui-gray-glass-025: rgba(0, 0, 0, 0.25);
+      --wui-gray-glass-030: rgba(0, 0, 0, 0.3);
+      --wui-gray-glass-060: rgba(0, 0, 0, 0.6);
+      --wui-gray-glass-080: rgba(0, 0, 0, 0.8);
     }
   `
 }
@@ -483,12 +508,12 @@ export const elementStyles = css`
 
   @media (hover: hover) and (pointer: fine) {
     button:hover:enabled {
-      background-color: var(--wui-overlay-005);
+      background-color: var(--wui-gray-glass-005);
     }
 
     button:active:enabled {
       transition: all var(--wui-ease-out-power-2) var(--wui-duration-sm);
-      background-color: var(--wui-overlay-010);
+      background-color: var(--wui-gray-glass-010);
     }
 
     button[data-variant='fill']:hover:enabled {
@@ -498,13 +523,13 @@ export const elementStyles = css`
 
   button:disabled {
     cursor: not-allowed;
-    background-color: var(--wui-overlay-005);
+    background-color: var(--wui-gray-glass-005);
   }
 
   button[data-variant='shade']:disabled,
   button[data-variant='accent']:disabled {
-    background-color: var(--wui-overlay-010);
-    color: var(--wui-overlay-015);
+    background-color: var(--wui-gray-glass-010);
+    color: var(--wui-gray-glass-015);
     filter: grayscale(1);
   }
 
@@ -521,7 +546,7 @@ export const elementStyles = css`
   button:focus-visible,
   a:focus-visible {
     border: 1px solid var(--wui-color-accent-100);
-    background-color: var(--wui-overlay-005);
+    background-color: var(--wui-gray-glass-005);
     -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
     box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
@@ -537,12 +562,12 @@ export const elementStyles = css`
   }
 
   button[data-variant='fill']:disabled {
-    color: var(--wui-overlay-015);
-    background-color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
+    background-color: var(--wui-gray-glass-015);
   }
 
   button[data-variant='fill']:disabled > wui-icon {
-    color: var(--wui-overlay-015);
+    color: var(--wui-gray-glass-015);
   }
 
   button[data-variant='shade'] {
@@ -558,18 +583,18 @@ export const elementStyles = css`
     border-radius: var(--wui-border-radius-xs);
     height: 56px;
     border: none;
-    background-color: var(--wui-overlay-002);
+    background-color: var(--wui-gray-glass-002);
     color: var(--wui-color-fg-200);
     gap: var(--wui-spacing-xs);
   }
 
   button:active:enabled {
-    background-color: var(--wui-overlay-010);
+    background-color: var(--wui-gray-glass-010);
   }
 
   button[data-variant='fill']:active:enabled {
     background-color: var(--wui-color-accent-080);
-    border: 1px solid var(--wui-overlay-010);
+    border: 1px solid var(--wui-gray-glass-010);
   }
 
   input {
diff --git a/packages/ui/src/utils/TypesUtil.ts b/packages/ui/src/utils/TypesUtil.ts
index 57438a905c..aded0af7fb 100644
--- a/packages/ui/src/utils/TypesUtil.ts
+++ b/packages/ui/src/utils/TypesUtil.ts
@@ -218,3 +218,5 @@ export interface ThemeVariables {
   '--w3m-border-radius-master'?: string
   '--w3m-z-index'?: string
 }
+
+export type IconBoxBorderType = 'wui-color-bg-125' | 'wui-overlay-accent-010'