diff --git a/README.md b/README.md
index 5d0855d87..16d761582 100644
--- a/README.md
+++ b/README.md
@@ -123,4 +123,4 @@ If you would like to test out the current functionality of V2 in a small browser
 - Checkout the V2 feature branch: `git checkout v2-web3-onboard`
 - Install the dependencies: `yarn` (if running a M1 mac - `yarn install-m1-mac`)
 - Run all packages in dev mode: `yarn dev`
-- [View demo app in the browser](http://localhost:8080)
+- To view the demo app in the browser after running the above steps navigate to [http://localhost:8080](http://localhost:8080)
diff --git a/docs/src/lib/components/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.svelte
index 23e7c052e..7bbfa90ee 100644
--- a/docs/src/lib/components/ThemeCustomizer.svelte
+++ b/docs/src/lib/components/ThemeCustomizer.svelte
@@ -18,15 +18,44 @@
         rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
       },
       {
-        id: '0x3',
-        token: 'tROP',
-        label: 'Ethereum Ropsten Testnet',
-        rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
+        id: '0x5',
+        token: 'ETH',
+        label: 'Ethereum Goerli Testnet',
+        rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
+      },
+      {
+        id: '0x13881',
+        token: 'MATIC',
+        label: 'Polygon - Mumbai',
+        rpcUrl: 'https://matic-mumbai.chainstacklabs.com	'
+      },
+      {
+        id: '0x38',
+        token: 'BNB',
+        label: 'Binance',
+        rpcUrl: 'https://bsc-dataseed.binance.org/'
+      },
+      {
+        id: 137,
+        token: 'MATIC',
+        label: 'Polygon',
+        rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
+      },
+      {
+        id: 10,
+        token: 'OETH',
+        label: 'Optimism',
+        rpcUrl: 'https://mainnet.optimism.io'
+      },
+      {
+        id: 42161,
+        token: 'ARB-ETH',
+        label: 'Arbitrum',
+        rpcUrl: 'https://rpc.ankr.com/arbitrum'
       }
     ],
     appMetadata: {
       name: 'Documentation',
-      icon: '<svg></svg>',
       description: 'Example showcasing how to connect a wallet.',
       recommendedInjectedWallets: [
         { name: 'MetaMask', url: 'https://metamask.io' },
@@ -34,11 +63,15 @@
       ]
     },
     accountCenter: {
-      desktop: { enabled: false },
-      mobile: { enabled: false }
-    }
+      desktop: { enabled: true },
+      mobile: { enabled: true }
+    },
+    theme: 'system'
   })
 
+  const themes = ['system', 'default', 'light', 'dark', 'custom']
+  let selectedTheme = 'system'
+
   // Subscribe to wallet updates
   const wallets$ = onboard.state.select('wallets').pipe(share())
 
@@ -73,8 +106,9 @@
     uploaded_image = undefined
     webURL = ''
     resetTheme()
-    const onboardCloseBtnVisible =
-      document?.querySelector('body > onboard-v2')?.shadowRoot?.querySelector('.close-button')
+    const onboardCloseBtnVisible = document
+      ?.querySelector('body > onboard-v2')
+      ?.shadowRoot?.querySelector('.close-button')
     if (onboardCloseBtnVisible) onboardCloseBtnVisible?.click()
   }
 
@@ -84,34 +118,43 @@
       : onboard.connectWallet()
   }
 
-  const baseStyles = {
-    '--background-color': '#ffffff',
-    '--text-color': '#1a1d26',
-    '--border-color': '#ebebed',
-    '--accent-background': '#ebebed',
-    '--accent-color': '#929bed',
-    '--accent-color-hover': '#eff1fc',
-    '--secondary-text-color': '#707481'
-  }
-
-  let defaultStyling = {...baseStyles}
-
-  const baseStyling = `--onboard-connect-sidebar-background: var(--accent-background);
-  --onboard-close-button-background: var(--accent-background);
-  --onboard-connect-sidebar-color: var(--text-color);
-  --onboard-connect-sidebar-progress-background: var(--secondary-text-color);
-  --onboard-connect-sidebar-progress-color: var(--accent-color);
-  --onboard-connect-header-background: var(--background-color);
-  --onboard-connect-header-color: var(--text-color);
-  --onboard-main-scroll-container-background: var(--background-color);
-  --onboard-link-color: var(--accent-color);
-  --onboard-wallet-button-background: var(--background-color);
-  --onboard-wallet-button-background-hover: var(--accent-color-hover);
-  --onboard-wallet-button-border-color: var(--border-color);
-  --onboard-wallet-app-icon-border-color: var(--border-color);`
+  const themingObjects = {
+    default: {
+      '--w3o-background-color': 'unset',
+      '--w3o-foreground-color': 'unset',
+      '--w3o-text-color': 'unset',
+      '--w3o-border-color': 'unset',
+      '--w3o-action-color': 'unset',
+      '--w3o-border-radius': 'unset'
+    },
+    custom: {
+      '--w3o-background-color': 'unset',
+      '--w3o-foreground-color': 'unset',
+      '--w3o-text-color': 'unset',
+      '--w3o-border-color': 'unset',
+      '--w3o-action-color': 'unset',
+      '--w3o-border-radius': 'unset'
+    },
+    light: {
+      '--w3o-background-color': '#ffffff',
+      '--w3o-foreground-color': '#EFF1FC',
+      '--w3o-text-color': '#1a1d26',
+      '--w3o-border-color': '#d0d4f7',
+      '--w3o-action-color': '#6370E5',
+      '--w3o-border-radius': '16px'
+    },
+    dark: {
+      '--w3o-background-color': '#1A1D26',
+      '--w3o-foreground-color': '#242835',
+      '--w3o-text-color': '#EFF1FC',
+      '--w3o-border-color': '#33394B',
+      '--w3o-action-color': '#929bed',
+      '--w3o-border-radius': '16px'
+    }
+  }
 
   const styleToString = (style) => {
-    return Object.keys(style).reduce((acc, key) => acc + key + ': ' + style[key] + '; \n  ', '')
+    return Object.keys(style).reduce((acc, key) => acc + `"${key}": "${style[key]}", \n`, '')
   }
 
   async function copyStylingConfig() {
@@ -123,18 +166,28 @@
     }
   }
 
-  let copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
+  let copyableStyles =
+    selectedTheme !== 'custom' ? '' : `{\n ${styleToString(themingObjects[selectedTheme])}}`
+
+  const updateTheme = () => {
+    selectedTheme !== 'custom'
+      ? onboard.state.actions.updateTheme(selectedTheme)
+      : onboard.state.actions.updateTheme('default')
+    copyableStyles =
+      selectedTheme !== 'custom' ? '' : `{\n ${styleToString(themingObjects[selectedTheme])}}`
+  }
 
-  const updateTheme = (e, targetStyle) => {
+  const updateThemeEl = (e, targetStyle) => {
+    if (selectedTheme !== 'custom') return
     document.documentElement.style.setProperty(targetStyle, e.target.value)
 
-    copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
+    copyableStyles = `{\n ${styleToString(themingObjects[selectedTheme])}}`
   }
 
   const resetTheme = () => {
-    defaultStyling = {...baseStyles}
-    Object.keys(defaultStyling).forEach(style => {
-      document.documentElement.style.setProperty(style, defaultStyling[style])
+    selectedTheme = 'custom'
+    Object.keys(themingObjects['custom']).forEach((style) => {
+      document.documentElement.style.setProperty(style, themingObjects['custom'][style])
     })
   }
 
@@ -187,28 +240,66 @@
 
 <section>
   <div class="control-panel">
-    <label for="Theme">Click Color Circles to Set Theme: </label>
-    <hr />
-    <div class="theming-container">
-      {#each Object.keys(defaultStyling) as target}
-        <div class="theming-inputs-wrapper">
-          <div class="theming-inputs">
-            <input
-              type="color"
-              name="Theme"
-              bind:value={defaultStyling[target]}
-              on:input={(e) => updateTheme(e, target)}
-            />
-          </div>
-          <span class="text" id="current-theme">{target} : {defaultStyling[target]}</span>
-        </div>
+    <label>Select a theme:</label>
+    <select bind:value={selectedTheme} on:change={() => updateTheme()}>
+      {#each themes as theme}
+        <option value={theme}>
+          {theme}
+        </option>
       {/each}
-    </div>
-    <div class="copy-styles-container">
-      <textarea readonly bind:value={copyableStyles} rows="10" class="copy-styles-textarea" />
-      <button on:click={async () => await copyStylingConfig()}> Copy Styling Config </button>
-    </div>
-    <hr />
+    </select>
+    {#if selectedTheme === 'custom'}
+      <label for="Theme"
+        >Click Color Circles to Customize Theme, Copy Config and Paste as `theme` property value in
+        Onboard config:
+      </label>
+      <hr />
+      <div class="theming-container">
+        {#each Object.keys(themingObjects[selectedTheme]) as target}
+          {#if !target.includes('border-radius')}
+            <div class="theming-inputs-wrapper">
+              <div class="theming-inputs">
+                <input
+                  type="color"
+                  name="Theme"
+                  bind:value={themingObjects[selectedTheme][target]}
+                  on:input={(e) => updateThemeEl(e, target)}
+                />
+              </div>
+              <span class="text" id="current-theme"
+                >{target} : {themingObjects[selectedTheme][target]}</span
+              >
+            </div>
+          {:else}
+            <div class="theming-inputs-wrapper">
+              <div class="theming-inputs-text">
+                <input
+                  class="br-text-input"
+                  type="text"
+                  bind:value={themingObjects[selectedTheme][target]}
+                  on:input={(e) => updateThemeEl(e, target)}
+                />
+              </div>
+              <span class="text" id="current-theme"
+                >{target} : {themingObjects[selectedTheme][target]}</span
+              >
+            </div>
+          {/if}
+        {/each}
+      </div>
+      <div class="copy-styles-container">
+        <textarea readonly bind:value={copyableStyles} rows="8" class="copy-styles-textarea" />
+        <button on:click={async () => await copyStylingConfig()}> Copy Theming Config </button>
+      </div>
+      <hr />
+    {:else}
+      <label for="Theme">
+        The system theme will align the theme with the users system preferences
+      </label>
+      <hr />
+      <div class="theming-container" />
+    {/if}
+
     <div class="backdrop-toggle">
       <label class="switch">
         <input type="checkbox" on:change={() => handleBackdrop()} bind:checked />
@@ -255,40 +346,6 @@
 </section>
 
 <style>
-  /* iframe { width: 100%; height: 62.5rem;} */
-  :root {
-    --background-color: #ffffff; /* --white */
-    --text-color: #1a1d26; /* --gray-700 */
-    --border-color: #ebebed; /* --gray-100 taken from future mock */
-
-    --accent-background: #ebebed; /* --gray-100 (currently gray-100 in connect modal) */
-    --accent-color: #929bed; /* --primary-400 */
-    --accent-color-hover: #eff1fc; /* --primary-200 */
-
-    /* Account Center & Notify */
-    --secondary-text-color: #707481; /* --gray-400 (balance and token name) */
-    /* --secondary-accent-background: #242835; --gray-600 (Upper background in maximized) */
-
-    /* --onboard-font-family-normal: System,monospace; */
-    --onboard-connect-sidebar-background: var(--accent-background);
-    --onboard-close-button-background: var(--accent-background);
-    --onboard-connect-sidebar-color: var(--text-color);
-    --onboard-connect-sidebar-progress-background: var(
-      --secondary-text-color
-    ); /* defaults to gray-200 */
-    --onboard-connect-sidebar-progress-color: var(--accent-color); /* defaults to  primary-600 */
-    --onboard-connect-header-background: var(--background-color);
-    --onboard-connect-header-color: var(--text-color);
-    --onboard-main-scroll-container-background: var(--background-color);
-    --onboard-link-color: var(--accent-color);
-    --onboard-wallet-button-background: var(--background-color);
-    --onboard-wallet-button-background-hover: var(--accent-color-hover);
-    --onboard-wallet-button-color-hover: var(--text-color);
-    --onboard-wallet-button-color: var(--text-color);
-    --onboard-wallet-button-border-color: var(--border-color);
-    --onboard-wallet-app-icon-border-color: var(--border-color);
-  }
-
   section {
     position: relative;
     height: 100%;
@@ -315,9 +372,9 @@
   }
 
   .control-panel {
-    z-index: 9999;
-    left: auto;
-    right: 0;
+    z-index: 25;
+    left: 0;
+    right: auto;
     bottom: 0;
     position: fixed;
     overflow: hidden;
@@ -368,6 +425,18 @@
     height: 2em;
     margin: 0.5em;
   }
+  .theming-inputs-text {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 2em;
+    margin: 0.25em;
+  }
+  .br-text-input {
+    width: 3rem;
+    padding: 0.25rem;
+    text-align: center;
+  }
   .iframe-input {
     flex: 1;
     padding: 1rem;
@@ -503,6 +572,11 @@
     transform: translateX(26px);
   }
 
+  select {
+    width: 100%;
+    padding: 1rem;
+  }
+
   .backdrop-toggle {
     display: flex;
     align-items: center;
diff --git a/docs/src/lib/services/onboard.js b/docs/src/lib/services/onboard.js
index 5a9ada76f..73d608b35 100644
--- a/docs/src/lib/services/onboard.js
+++ b/docs/src/lib/services/onboard.js
@@ -2,12 +2,34 @@ import bnIcon from '$lib/components/icons/bnWhiteBackground.js'
 let onboard
 const getOnboard = async () => {
   if (!onboard) {
-    onboard = await intiOnboard()
+    const key = 'svelteness::color-scheme'
+    const scheme = localStorage[key]
+    let theme = scheme || 'system'
+    onboard = await intiOnboard(theme)
+    classMutationListener()
   }
   return onboard
 }
 
-const intiOnboard = async () => {
+const classMutationsCheck = (mutationsList) => {
+  mutationsList.forEach((mutation) => {
+    if (onboard && mutation.attributeName === 'class') {
+      if (mutation.target.className.includes('dark')) {
+        onboard.state.actions.updateTheme('dark')
+      } else {
+        onboard.state.actions.updateTheme('light')
+      }
+    }
+  })
+}
+
+const classMutationListener = () => {
+  // Listens for class changes on HTML element
+  const mutationObserver = new MutationObserver(classMutationsCheck)
+  mutationObserver.observe(document.querySelector('html'), { attributes: true })
+}
+
+const intiOnboard = async (theme) => {
   const { default: Onboard } = await import('@web3-onboard/core')
   const { default: injectedModule } = await import('@web3-onboard/injected-wallets')
   const { default: trezorModule } = await import('@web3-onboard/trezor')
@@ -66,8 +88,7 @@ const intiOnboard = async () => {
   const uauthOptions = {
     clientID: 'a25c3a65-a1f2-46cc-a515-a46fe7acb78c',
     redirectUri: 'http://localhost:8080/',
-    scope:
-      'openid wallet email:optional humanity_check:optional profile:optional social:optional'
+    scope: 'openid wallet email:optional humanity_check:optional profile:optional social:optional'
   }
   const uauth = uauthModule(uauthOptions)
   const magic = magicModule({
@@ -155,7 +176,8 @@ const intiOnboard = async () => {
         { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
       ]
     },
-    accountCenter: { desktop: { enabled: true }, mobile: { enabled: true } }
+    accountCenter: { desktop: { enabled: true }, mobile: { enabled: true } },
+    theme: theme || 'system'
   })
 }
 
diff --git a/docs/src/routes/__layout-kit-docs.svelte b/docs/src/routes/__layout-kit-docs.svelte
index b2c1cce7b..d54a5ec93 100644
--- a/docs/src/routes/__layout-kit-docs.svelte
+++ b/docs/src/routes/__layout-kit-docs.svelte
@@ -99,7 +99,6 @@
 <style>
   :global(:root) {
     --kd-color-brand-rgb: 99, 112, 229;
-    /* --kd-font-family-sans: 'Sofia Pro'; */
     --account-center-position-top: 5rem;
   }
 </style>
diff --git a/docs/src/routes/docs/[...2]getting-started/[...2]customization.md b/docs/src/routes/docs/[...2]getting-started/[...2]customization.md
index f23818e0a..3d6c06953 100644
--- a/docs/src/routes/docs/[...2]getting-started/[...2]customization.md
+++ b/docs/src/routes/docs/[...2]getting-started/[...2]customization.md
@@ -7,7 +7,7 @@ Interested in seeing how web3-onboard will look on your site?
 
 [Try out our theming tool](/theming-tool)
 
-It will allow you to customize the look and feel of web3-onboard, copy your custom css properties, and preview how web3-onboard will look on your site by entering a URL or adding a screenshot.
+It will allow you to customize the look and feel of web3-onboard, try different themes or create your own, and preview how web3-onboard will look on your site by entering a URL or adding a screenshot.
 :::
 
 ## CSS custom properties (variables)
diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md
index 52079d872..838c91c83 100644
--- a/docs/src/routes/docs/[...3]modules/core.md
+++ b/docs/src/routes/docs/[...3]modules/core.md
@@ -29,14 +29,14 @@ If you would like to support all wallets, then you can install all of the wallet
 <TabPanel value="yarn">
 
 ```sh copy
-yarn add @web3-onboard/injected-wallets @web3-onboard/coinbase @web3-onboard/ledger @web3-onboard/trezor @web3-onboard/keepkey @web3-onboard/walletconnect @web3-onboard/web3auth @web3-onboard/torus @web3-onboard/portis @web3-onboard/mew @web3-onboard/gnosis @web3-onboard/magic @web3-onboard/fortmatic @web3-onboard/dcent
+yarn add @web3-onboard/coinbase @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/injected-wallets @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/magic @web3-onboard/portis @web3-onboard/react @web3-onboard/torus @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/web3auth @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/enkrypt @web3-onboard/mew-wallet @web3-onboard/uauth @web3-onboard/zeal @web3-onboard/frontier
 ```
 
   </TabPanel>
   <TabPanel value="npm">
 
 ```sh copy
-npm install @web3-onboard/injected-wallets @web3-onboard/coinbase @web3-onboard/ledger @web3-onboard/trezor @web3-onboard/keepkey @web3-onboard/walletconnect @web3-onboard/web3auth @web3-onboard/torus @web3-onboard/portis @web3-onboard/mew @web3-onboard/gnosis @web3-onboard/magic @web3-onboard/fortmatic @web3-onboard/dcent
+npm install @web3-onboard/coinbase @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/injected-wallets @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/magic @web3-onboard/portis @web3-onboard/react @web3-onboard/torus @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/web3auth @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/enkrypt @web3-onboard/mew-wallet @web3-onboard/uauth @web3-onboard/zeal @web3-onboard/frontier
 ```
 
   </TabPanel>
@@ -44,12 +44,23 @@ npm install @web3-onboard/injected-wallets @web3-onboard/coinbase @web3-onboard/
 
 :::admonition type=note
 
-- MEW wallet currently fails to install on M1 macs
 - All wallet modules (except for `injected-wallets`) require extra dependencies and may require polyfilling the node built in modules for the browser. See the [Build Environments](#build-environments) section for more info
 - **If using React** you may be interested in checking out the React Hooks package here - https://www.npmjs.com/package/@web3-onboard/react
 - **If using Vue** you may be interested in checking out the Vue package here - https://www.npmjs.com/package/@web3-onboard/vue
   :::
 
+## Quick start
+Checkout our full library of quick start examples for connecting and interacting with EVM based wallets
+
+- **[React](https://github.com/blocknative/react-demo)**
+- **[Nextjs 13](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-nextjs-13)**
+- **[Nextjs](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-nextjs)**
+- **[Svelte](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/packages/demo)**
+- **[SvelteKit](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-sveltekit)**
+- **[Vite/React](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-vite-react)**
+- **[Vue](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-vuejs)**
+- **[Vue2](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-vuejs-v2)**
+
 ## Initialization
 
 Onboard needs to be initialized with an options object before the API can be used:
@@ -68,7 +79,12 @@ type InitOptions {
    * Object mapping for W3O components with the key being the component and the value the DOM element to mount the component to. This element must be available at time of package script execution.
    */
   containerElements?: Partial<ContainerElements>
+    /**
+   * Custom or predefined theme for Web3Onboard i.e. default, dark, Custom, etc.
+   */
+  theme?: Theme
 }
+
 ```
 
 ### Options
@@ -146,6 +162,36 @@ type i18nOptions = Record<Locale, i18n>
 To see a list of all of the text values that can be internationalized or replaced, check out the [default en file](https://github.com/blocknative/web3-onboard/blob/v2-web3-onboard-develop/packages/core/src/i18n/en.json).
 Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood.
 
+**`theme`**
+A string or an object that defines the color theme web3-onboard will render the components.
+Define a custom or predefined theme for Web3Onboard using either: 
+  * BuiltInThemes: ['default', 'dark', 'light', 'system']
+  * ThemingMap object to create a totally custom theme
+
+Note: `system` will default to the theme set by the users system.
+
+```typescript
+export type Theme = ThemingMap | BuiltInThemes | 'system'
+
+export type BuiltInThemes = 'default' | 'dark' | 'light'
+
+export type ThemingMap = {
+  '--w3o-background-color'?: string
+  '--w3o-foreground-color'?: string
+  '--w3o-text-color'?: string
+  '--w3o-border-color'?: string
+  '--w3o-action-color'?: string
+  '--w3o-border-radius'?: string
+}
+```
+:::admonition type="experimental"
+Interested in seeing how web3-onboard will look on your site?
+
+[Try out our theming tool](/theming-tool)
+
+It will allow you to customize the look and feel of web3-onboard, try different themes or create your own, and preview how web3-onboard will look on your site by entering a URL or adding a screenshot.
+:::
+
 **`accountCenter`**
 An object that defines whether the account center UI (default and minimal) is enabled and it's position on the screen. Currently the account center is enabled for both desktop and mobile devices.
 
diff --git a/examples/with-nextjs-13/yarn.lock b/examples/with-nextjs-13/yarn.lock
index 229f2fd5b..582789036 100644
--- a/examples/with-nextjs-13/yarn.lock
+++ b/examples/with-nextjs-13/yarn.lock
@@ -2227,9 +2227,9 @@
     "@web3-onboard/core" "^2.10.1"
     use-sync-external-store "1.0.0"
 
-"@web3-onboard/sequence@^2.0.3-alpha.1":
+"@web3-onboard/sequence@^2.0.3":
   version "2.0.4"
-  resolved "https://registry.npmjs.org/@web3-onboard/sequence/-/sequence-2.0.4.tgz#424e120e78578a9655f8168ae2cad45372a41c8a"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/sequence/-/sequence-2.0.4.tgz#424e120e78578a9655f8168ae2cad45372a41c8a"
   integrity sha512-qz6qblHusoyj12A6NnIlqDl6kmeACFrA03gmEufmiPUCH3AX5fVBMK2f0xiM30sWoeYjTYGrUrgDmAmfjKytTg==
   dependencies:
     "0xsequence" "^0.43.1"
diff --git a/packages/core/README.md b/packages/core/README.md
index 3f918ece2..f81430c60 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -6,6 +6,18 @@
 
 This is the core package that contains all of the UI and logic to be able to seamlessly connect user's wallets to your app and track the state of those wallets. Onboard no longer contains any wallet specific code, so wallets need to be passed in upon initialization.
 
+## Quick start
+Checkout our full library of quick start examples for connecting and interacting with EVM based wallets
+
+- **[React](https://github.com/blocknative/react-demo)**
+- **[Nextjs 13](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-nextjs-13)**
+- **[Nextjs](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-nextjs)**
+- **[Svelte](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/packages/demo)**
+- **[SvelteKit](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-sveltekit)**
+- **[Vite/React](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-vite-react)**
+- **[Vue](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-vuejs)**
+- **[Vue2](https://github.com/blocknative/web3-onboard/tree/v2-web3-onboard/examples/with-vuejs-v2)**
+
 ## Installation
 
 Install the core module:
@@ -14,11 +26,17 @@ Install the core module:
 
 If you would like to support all wallets, then you can install all of the wallet modules:
 
-`npm i @web3-onboard/injected-wallets @web3-onboard/coinbase @web3-onboard/ledger @web3-onboard/trezor @web3-onboard/keepkey @web3-onboard/walletconnect @web3-onboard/web3auth @web3-onboard/torus @web3-onboard/portis @web3-onboard/mew @web3-onboard/gnosis @web3-onboard/magic @web3-onboard/fortmatic @web3-onboard/dcent`
+```bash 
+npm i @web3-onboard/coinbase @web3-onboard/fortmatic @web3-onboard/gnosis 
+@web3-onboard/injected-wallets @web3-onboard/keepkey @web3-onboard/keystone 
+@web3-onboard/ledger @web3-onboard/magic @web3-onboard/portis @web3-onboard/torus 
+@web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/web3auth 
+@web3-onboard/dcent @web3-onboard/sequence @web3-onboard/enkrypt 
+@web3-onboard/mew-wallet @web3-onboard/uauth @web3-onboard/zeal @web3-onboard/frontier
+```
 
 Note:
 
-- MEW wallet currently fails to install on M1 macs
 - All wallet modules (except for `injected-wallets`) require extra dependencies and may require polyfilling the node built in modules for the browser. See the [Build Environments](#build-environments) section for more info
 - **If using React** you may be interested in checking out the React Hooks package here - https://www.npmjs.com/package/@web3-onboard/react
 - **If using Vue** you may be interested in checking out the Vue package here - https://www.npmjs.com/package/@web3-onboard/vue
@@ -28,7 +46,7 @@ Note:
 Onboard needs to be initialized with an options object before the API can be used:
 
 ```typescript
-type InitOptions {
+type InitOptions = {
   wallets: WalletInit[]
   chains: Chain[]
   appMetadata?: AppMetadata
@@ -42,6 +60,12 @@ type InitOptions {
    * Object mapping for W3O components with the key being the component and the value the DOM element to mount the component to. This element must be available at time of package script execution.
    */
   containerElements?: Partial<ContainerElements>
+  /**
+   * Custom or predefined theme for Web3Onboard
+   * BuiltInThemes: ['default', 'dark', 'light', 'system']
+   * or customize with a ThemingMap object.
+   */
+  theme?: Theme
 }
 ```
 
@@ -107,6 +131,27 @@ type ConnectModalOptions = {
 }
 ```
 
+**`theme`**
+A string or an object that defines the color theme web3-onboard will render the components.
+Define a custom or predefined theme for Web3Onboard using either: 
+  * BuiltInThemes: ['default', 'dark', 'light', 'system']
+  * ThemingMap object to create a totally custom theme
+
+Note: `system` will default to the theme set by the users system.
+
+```typescript
+export type Theme = ThemingMap | BuiltInThemes | 'system'
+export type BuiltInThemes = 'default' | 'dark' | 'light'
+export type ThemingMap = {
+  '--w3o-background-color'?: string
+  '--w3o-foreground-color'?: string
+  '--w3o-text-color'?: string
+  '--w3o-border-color'?: string
+  '--w3o-action-color'?: string
+  '--w3o-border-radius'?: string
+}
+```
+
 **`i18n`**
 An object that defines the display text for different locales. Can also be used to override the default text. To override the default text, pass in a object for the `en` locale.
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 2f70f311e..28b755549 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.13.2-alpha.1",
+  "version": "2.14.0-alpha.1",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
diff --git a/packages/core/src/icons/blocknative-icon.ts b/packages/core/src/icons/blocknative-icon.ts
new file mode 100644
index 000000000..a85040b7c
--- /dev/null
+++ b/packages/core/src/icons/blocknative-icon.ts
@@ -0,0 +1,26 @@
+export default `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="56" rx="8" fill="#262A3D"/>
+<g clip-path="url(#clip0_15747_103507)">
+<path d="M20.6176 35.9801L16.0142 27.9949H25.2218L29.826 35.9801H20.6176Z" fill="#262A3D"/>
+<path d="M20.6176 35.9801L16.0142 27.9949H25.2218L29.826 35.9801H20.6176Z" fill="white"/>
+<path d="M25.2218 27.9947H16.0142L20.6176 20.0095H29.826L25.2218 27.9947Z" fill="url(#paint0_linear_15747_103507)"/>
+<path d="M34.4302 27.9948L29.826 20.0096H20.6176L16.0142 12.0244H34.4302L43.6379 27.9948H34.4302Z" fill="#262A3D"/>
+<path d="M34.4302 27.9948L29.826 20.0096H20.6176L16.0142 12.0244H34.4302L43.6379 27.9948H34.4302Z" fill="white"/>
+<path d="M34.4302 43.9652H16.0142L20.6176 35.9801H29.826L34.4302 27.9949H43.6379L34.4302 43.9652Z" fill="url(#paint1_linear_15747_103507)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_15747_103507" x1="16.0142" y1="24.0021" x2="29.826" y2="24.0021" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55CCFE"/>
+<stop offset="1" stop-color="#5E93EF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_15747_103507" x1="76.5102" y1="5214.05" x2="10391.8" y2="5214.05" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55CCFE"/>
+<stop offset="1" stop-color="#5E93EF"/>
+</linearGradient>
+<clipPath id="clip0_15747_103507">
+<rect width="27.6667" height="32" fill="white" transform="translate(16 12)"/>
+</clipPath>
+</defs>
+</svg>
+
+`
diff --git a/packages/core/src/icons/blocknative.ts b/packages/core/src/icons/blocknative.ts
deleted file mode 100644
index 019a4ed48..000000000
--- a/packages/core/src/icons/blocknative.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export default `
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 790.34 114.51" width="100%">
-  <defs>
-    <style>.cls-1{fill:#262a3d;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}</style>
-    <linearGradient id="linear-gradient" x1="694.45" y1="46.08" x2="741.39" y2="46.08" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#55ccfe"/><stop offset="1" stop-color="#5e93ef"/>
-    </linearGradient>
-    <linearGradient id="linear-gradient-2" x1="694.45" y1="86.73" x2="788.33" y2="86.73" xlink:href="#linear-gradient"/>
-  </defs>
-  <polygon class="cls-1" points="710.09 86.73 694.45 59.63 725.74 59.63 725.74 59.63 741.39 86.73 710.09 86.73"/>
-  <polygon class="cls-2" points="725.74 59.63 694.45 59.63 710.09 32.53 741.39 32.53 725.74 59.63"/>
-  <polygon class="cls-1" points="757.03 59.63 741.39 32.53 710.09 32.53 694.45 5.43 757.03 5.43 788.33 59.63 757.03 59.63"/>
-  <polygon class="cls-3" points="757.03 113.83 694.45 113.83 710.09 86.73 741.39 86.73 757.03 59.63 788.33 59.63 757.03 113.83"/>
-  <path class="cls-1" d="M70.51,65.77c0,19.47-14.37,34.5-31.88,34.5-9.54,0-16.47-3.53-21.17-9.54v7.71H.6V6.87L17.46,1.68V40.82c4.7-6,11.63-9.54,21.17-9.54C56.14,31.28,70.51,46.3,70.51,65.77Zm-16.86,0c0-11-7.7-18.42-18.16-18.42s-18,7.45-18,18.42,7.71,18.43,18,18.43S53.65,76.75,53.65,65.77Z"/>
-  <path class="cls-1" d="M78.09,6.87,94.94,1.68V98.44H78.09Z"/><path class="cls-1" d="M102.39,65.77a34.56,34.56,0,1,1,34.49,34.5A34.13,34.13,0,0,1,102.39,65.77Zm52.26,0c0-10.58-7.71-18-17.77-18s-17.64,7.45-17.64,18,7.71,18,17.64,18S154.65,76.36,154.65,65.77Z"/>
-  <path class="cls-1" d="M177.9,65.77c0-19.47,14.63-34.49,34.49-34.49,12.81,0,23.91,6.79,29.27,16.85l-14.5,8.5c-2.62-5.36-8.24-8.76-14.9-8.76-10.06,0-17.51,7.45-17.51,17.9s7.45,17.77,17.51,17.77c6.8,0,12.41-3.26,15-8.62l14.63,8.36a33.47,33.47,0,0,1-29.53,17C192.53,100.27,177.9,85.24,177.9,65.77Z"/>
-  <path class="cls-1" d="M290.32,98.44,266.54,68.78V98.44H249.68V6.87l16.86-5.19V61.85L289,33.11h20.12L282.87,65.38l27.05,33.06Z"/>
-  <path class="cls-1" d="M377.26,58.32V98.44H360.4v-38c0-8.89-5.35-13.46-12.93-13.46-8.23,0-14.38,4.83-14.38,16.2V98.44H316.24V33.11h16.85v7.31c3.92-5.88,10.72-9.14,19.47-9.14C366.41,31.28,377.26,41,377.26,58.32Z"/>
-  <path class="cls-1" d="M454.72,33.11V98.44H437.87V90.73c-4.71,5.88-11.76,9.54-21.3,9.54-17.38,0-31.75-15-31.75-34.5s14.37-34.49,31.75-34.49c9.54,0,16.59,3.66,21.3,9.54V33.11ZM437.87,65.77c0-11-7.71-18.42-18.17-18.42s-18,7.45-18,18.42,7.71,18.43,18,18.43S437.87,76.75,437.87,65.77Z"/>
-  <path class="cls-1" d="M498.65,49.31V33.11H483.88V13.9L467,19.09v57.4c0,17.64,8,24.56,31.63,22V83.15c-9.67.53-14.77.39-14.77-6.66V49.31Z"/><path class="cls-1" d="M510.46,33.11h16.85V98.44H510.46Z"/>
-  <path class="cls-1" d="M603.13,33.11,578.3,98.44H559.09L534.27,33.11h18.55l15.81,45.73,15.94-45.73Z"/><path class="cls-1" d="M639.2,85c6.53,0,11.76-2.74,14.64-6.53l13.58,7.84c-6.14,8.88-15.94,14-28.48,14-22,0-35.8-15-35.8-34.5s14-34.49,34.49-34.49c19.34,0,33.06,15.29,33.06,34.49A39.11,39.11,0,0,1,670,72.7H620.78C623.13,81.32,630.32,85,639.2,85Zm14.64-25.35c-2.1-9.41-9.15-13.2-16.21-13.2-9,0-15.15,4.84-17.12,13.2Z"/>
-</svg>
-`
diff --git a/packages/core/src/icons/bn-icon.ts b/packages/core/src/icons/bn-icon.ts
deleted file mode 100644
index c7790a9ab..000000000
--- a/packages/core/src/icons/bn-icon.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export default `<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_545_236)">
-<path d="M32 0H8C3.58172 0 0 3.58172 0 8V32C0 36.4183 3.58172 40 8 40H32C36.4183 40 40 36.4183 40 32V8C40 3.58172 36.4183 0 32 0Z" fill="#262A3D"/>
-<path d="M14.7267 25.7L11.4385 19.9963H18.0154L21.3041 25.7H14.7267Z" fill="#262A3D"/>
-<path d="M14.7267 25.7L11.4385 19.9963H18.0154L21.3041 25.7H14.7267Z" fill="white"/>
-<path d="M18.0154 19.9964H11.4385L14.7267 14.2927H21.3041L18.0154 19.9964Z" fill="url(#paint0_linear_545_236)"/>
-<path d="M24.5928 19.9965L21.3041 14.2928H14.7267L11.4385 8.58911H24.5928L31.1697 19.9965H24.5928Z" fill="#262A3D"/>
-<path d="M24.5928 19.9965L21.3041 14.2928H14.7267L11.4385 8.58911H24.5928L31.1697 19.9965H24.5928Z" fill="white"/>
-<path d="M24.5928 31.4037H11.4385L14.7267 25.7H21.3041L24.5928 19.9963H31.1697L24.5928 31.4037Z" fill="url(#paint1_linear_545_236)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_545_236" x1="11.4385" y1="17.1446" x2="21.3041" y2="17.1446" gradientUnits="userSpaceOnUse">
-<stop stop-color="#55CCFE"/>
-<stop offset="1" stop-color="#5E93EF"/>
-</linearGradient>
-<linearGradient id="paint1_linear_545_236" x1="54.6499" y1="3724.32" x2="7422.7" y2="3724.32" gradientUnits="userSpaceOnUse">
-<stop stop-color="#55CCFE"/>
-<stop offset="1" stop-color="#5E93EF"/>
-</linearGradient>
-<clipPath id="clip0_545_236">
-<rect width="40" height="40" fill="white"/>
-</clipPath>
-</defs>
-</svg>
-`
diff --git a/packages/core/src/icons/index.ts b/packages/core/src/icons/index.ts
index 775c1d05d..ded63789b 100644
--- a/packages/core/src/icons/index.ts
+++ b/packages/core/src/icons/index.ts
@@ -1,11 +1,11 @@
 // bn branding
-export { default as defaultBnIcon } from './bn-icon.js'
-export { default as poweredByBlocknativeIcon } from './poweredByBlocknative.js'
+export { default as defaultBnIcon } from './blocknative-icon.js'
+export { default as poweredByBlocknative } from './poweredByBlocknative.js'
 // other
 export { default as hourglass } from './hourglass.js'
+export { default as questionIcon } from './question.js'
 export { default as ethereumIcon } from './ethereum.js'
 export { default as polygonIcon } from './polygon.js'
-export { default as questionIcon } from './question.js'
 export { default as binanceIcon } from './binance.js'
 export { default as fantomIcon } from './fantom.js'
 export { default as optimismIcon } from './optimism.js'
diff --git a/packages/core/src/icons/poweredByBlocknative.ts b/packages/core/src/icons/poweredByBlocknative.ts
index 962a0e0c9..41523d85e 100644
--- a/packages/core/src/icons/poweredByBlocknative.ts
+++ b/packages/core/src/icons/poweredByBlocknative.ts
@@ -1,22 +1,22 @@
 export default `
 <svg width="152" height="16" viewBox="0 0 152 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.03641 6.252C3.23241 6.252 2.41641 6.636 2.04441 7.272V6.396H1.00041V14.724H2.04441V11.124C2.41641 11.784 3.20841 12.144 4.04841 12.144C5.58441 12.144 6.84441 10.98 6.84441 9.204C6.84441 7.44 5.57241 6.252 4.03641 6.252ZM3.94041 11.16C3.02841 11.16 2.04441 10.428 2.04441 9.216C2.04441 8.016 2.94441 7.236 3.94041 7.236C4.97241 7.236 5.78841 8.1 5.78841 9.216C5.78841 10.344 4.97241 11.16 3.94041 11.16ZM10.8452 12.144C12.4412 12.144 13.7852 10.968 13.7852 9.192C13.7852 7.416 12.4412 6.252 10.8452 6.252C9.24919 6.252 7.91719 7.416 7.91719 9.192C7.91719 10.968 9.24919 12.144 10.8452 12.144ZM10.8452 11.16C9.82519 11.16 8.97319 10.356 8.97319 9.192C8.97319 8.04 9.82519 7.236 10.8452 7.236C11.8772 7.236 12.7412 8.04 12.7412 9.192C12.7412 10.356 11.8772 11.16 10.8452 11.16ZM22.2729 6.396L20.8449 10.38L19.4049 6.396H18.3849L16.9569 10.38L15.5289 6.396H14.4009L16.5369 12H17.4009L18.8889 7.836L20.4369 12H21.3129L23.4009 6.396H22.2729ZM29.6948 9.18C29.6948 7.404 28.5068 6.252 26.9108 6.252C25.3148 6.252 24.0308 7.404 24.0308 9.18C24.0308 10.956 25.3148 12.144 26.9108 12.144C27.9908 12.144 28.9988 11.616 29.4788 10.644L28.5788 10.284C28.2548 10.848 27.6308 11.16 26.9468 11.16C25.9868 11.16 25.2668 10.644 25.1108 9.648H29.6708C29.6828 9.492 29.6948 9.336 29.6948 9.18ZM25.1228 8.748C25.2908 7.74 25.9628 7.236 26.9108 7.236C27.8348 7.236 28.5188 7.788 28.6508 8.748H25.1228ZM33.7456 6.252C33.0016 6.252 32.4616 6.684 32.1736 7.668V6.396H31.1176V12H32.1736V9.948C32.1736 8.472 32.6176 7.26 33.7336 7.26C33.9496 7.26 34.2496 7.308 34.5496 7.452L34.7176 6.468C34.5496 6.36 34.1416 6.252 33.7456 6.252ZM40.8627 9.18C40.8627 7.404 39.6747 6.252 38.0787 6.252C36.4827 6.252 35.1987 7.404 35.1987 9.18C35.1987 10.956 36.4827 12.144 38.0787 12.144C39.1587 12.144 40.1667 11.616 40.6467 10.644L39.7467 10.284C39.4227 10.848 38.7987 11.16 38.1147 11.16C37.1547 11.16 36.4347 10.644 36.2787 9.648H40.8387C40.8507 9.492 40.8627 9.336 40.8627 9.18ZM36.2907 8.748C36.4587 7.74 37.1307 7.236 38.0787 7.236C39.0027 7.236 39.6867 7.788 39.8187 8.748H36.2907ZM46.7136 3.348V7.272C46.3416 6.612 45.5496 6.252 44.7096 6.252C43.1736 6.252 41.9136 7.416 41.9136 9.192C41.9136 10.956 43.1856 12.144 44.7216 12.144C45.5256 12.144 46.3416 11.76 46.7136 11.124V12H47.7576V3.348H46.7136ZM44.8056 11.16C43.7856 11.16 42.9696 10.296 42.9696 9.18C42.9696 8.052 43.7856 7.236 44.8056 7.236C45.7296 7.236 46.7136 7.968 46.7136 9.18C46.7136 10.38 45.8136 11.16 44.8056 11.16ZM55.6695 6.252C54.8295 6.252 54.0375 6.612 53.6655 7.272V3.348H52.6215V12H53.6655V11.124C54.0375 11.76 54.8535 12.144 55.6575 12.144C57.1935 12.144 58.4655 10.956 58.4655 9.192C58.4655 7.416 57.2055 6.252 55.6695 6.252ZM55.5615 11.16C54.5655 11.16 53.6655 10.38 53.6655 9.18C53.6655 7.968 54.6495 7.236 55.5615 7.236C56.5935 7.236 57.4095 8.052 57.4095 9.18C57.4095 10.296 56.5935 11.16 55.5615 11.16ZM63.6097 6.396L61.8937 10.524L60.2017 6.396H59.0737L61.3297 11.832L60.1537 14.724H61.2577L64.7377 6.396H63.6097Z" fill="#707481"/>
+<path d="M4.03641 6.252C3.23241 6.252 2.41641 6.636 2.04441 7.272V6.396H1.00041V14.724H2.04441V11.124C2.41641 11.784 3.20841 12.144 4.04841 12.144C5.58441 12.144 6.84441 10.98 6.84441 9.204C6.84441 7.44 5.57241 6.252 4.03641 6.252ZM3.94041 11.16C3.02841 11.16 2.04441 10.428 2.04441 9.216C2.04441 8.016 2.94441 7.236 3.94041 7.236C4.97241 7.236 5.78841 8.1 5.78841 9.216C5.78841 10.344 4.97241 11.16 3.94041 11.16ZM10.8452 12.144C12.4412 12.144 13.7852 10.968 13.7852 9.192C13.7852 7.416 12.4412 6.252 10.8452 6.252C9.24919 6.252 7.91719 7.416 7.91719 9.192C7.91719 10.968 9.24919 12.144 10.8452 12.144ZM10.8452 11.16C9.82519 11.16 8.97319 10.356 8.97319 9.192C8.97319 8.04 9.82519 7.236 10.8452 7.236C11.8772 7.236 12.7412 8.04 12.7412 9.192C12.7412 10.356 11.8772 11.16 10.8452 11.16ZM22.2729 6.396L20.8449 10.38L19.4049 6.396H18.3849L16.9569 10.38L15.5289 6.396H14.4009L16.5369 12H17.4009L18.8889 7.836L20.4369 12H21.3129L23.4009 6.396H22.2729ZM29.6948 9.18C29.6948 7.404 28.5068 6.252 26.9108 6.252C25.3148 6.252 24.0308 7.404 24.0308 9.18C24.0308 10.956 25.3148 12.144 26.9108 12.144C27.9908 12.144 28.9988 11.616 29.4788 10.644L28.5788 10.284C28.2548 10.848 27.6308 11.16 26.9468 11.16C25.9868 11.16 25.2668 10.644 25.1108 9.648H29.6708C29.6828 9.492 29.6948 9.336 29.6948 9.18ZM25.1228 8.748C25.2908 7.74 25.9628 7.236 26.9108 7.236C27.8348 7.236 28.5188 7.788 28.6508 8.748H25.1228ZM33.7456 6.252C33.0016 6.252 32.4616 6.684 32.1736 7.668V6.396H31.1176V12H32.1736V9.948C32.1736 8.472 32.6176 7.26 33.7336 7.26C33.9496 7.26 34.2496 7.308 34.5496 7.452L34.7176 6.468C34.5496 6.36 34.1416 6.252 33.7456 6.252ZM40.8627 9.18C40.8627 7.404 39.6747 6.252 38.0787 6.252C36.4827 6.252 35.1987 7.404 35.1987 9.18C35.1987 10.956 36.4827 12.144 38.0787 12.144C39.1587 12.144 40.1667 11.616 40.6467 10.644L39.7467 10.284C39.4227 10.848 38.7987 11.16 38.1147 11.16C37.1547 11.16 36.4347 10.644 36.2787 9.648H40.8387C40.8507 9.492 40.8627 9.336 40.8627 9.18ZM36.2907 8.748C36.4587 7.74 37.1307 7.236 38.0787 7.236C39.0027 7.236 39.6867 7.788 39.8187 8.748H36.2907ZM46.7136 3.348V7.272C46.3416 6.612 45.5496 6.252 44.7096 6.252C43.1736 6.252 41.9136 7.416 41.9136 9.192C41.9136 10.956 43.1856 12.144 44.7216 12.144C45.5256 12.144 46.3416 11.76 46.7136 11.124V12H47.7576V3.348H46.7136ZM44.8056 11.16C43.7856 11.16 42.9696 10.296 42.9696 9.18C42.9696 8.052 43.7856 7.236 44.8056 7.236C45.7296 7.236 46.7136 7.968 46.7136 9.18C46.7136 10.38 45.8136 11.16 44.8056 11.16ZM55.6695 6.252C54.8295 6.252 54.0375 6.612 53.6655 7.272V3.348H52.6215V12H53.6655V11.124C54.0375 11.76 54.8535 12.144 55.6575 12.144C57.1935 12.144 58.4655 10.956 58.4655 9.192C58.4655 7.416 57.2055 6.252 55.6695 6.252ZM55.5615 11.16C54.5655 11.16 53.6655 10.38 53.6655 9.18C53.6655 7.968 54.6495 7.236 55.5615 7.236C56.5935 7.236 57.4095 8.052 57.4095 9.18C57.4095 10.296 56.5935 11.16 55.5615 11.16ZM63.6097 6.396L61.8937 10.524L60.2017 6.396H59.0737L61.3297 11.832L60.1537 14.724H61.2577L64.7377 6.396H63.6097Z" fill="var(--w3o-text-color, #707481)"/>
 <g clip-path="url(#clip0_13558_103869)">
-<path d="M143.502 11.0888L141.863 8.24889H145.142L146.782 11.0888H143.502Z" fill="#262A3D"/>
+<path d="M143.502 11.0888L141.863 8.24889H145.142L146.782 11.0888H143.502Z" fill="currentColor"/>
 <path d="M145.142 8.24887H141.863L143.502 5.40895H146.782L145.142 8.24887Z" fill="url(#paint0_linear_13558_103869)"/>
-<path d="M148.421 8.24888L146.782 5.40896H143.502L141.863 2.56903H148.421L151.701 8.24888H148.421Z" fill="#262A3D"/>
+<path d="M148.421 8.24888L146.782 5.40896H143.502L141.863 2.56903H148.421L151.701 8.24888H148.421Z" fill="currentColor"/>
 <path d="M148.421 13.9287H141.863L143.502 11.0888H146.782L148.421 8.24889H151.701L148.421 13.9287Z" fill="url(#paint1_linear_13558_103869)"/>
-<path d="M76.4774 8.89232C76.4774 10.9327 74.9716 12.5077 73.1366 12.5077C72.1369 12.5077 71.4106 12.1378 70.9181 11.508V12.316H69.1513V2.71994L70.9181 2.17606V6.27771C71.4106 5.64894 72.1369 5.27797 73.1366 5.27797C74.9716 5.27797 76.4774 6.85198 76.4774 8.89232ZM74.7106 8.89232C74.7106 7.73959 73.9037 6.96201 72.8076 6.96201C71.7114 6.96201 70.9213 7.74273 70.9213 8.89232C70.9213 10.0419 71.7292 10.8237 72.8076 10.8237C73.8859 10.8237 74.7106 10.043 74.7106 8.89232Z" fill="#262A3D"/>
-<path d="M77.2718 2.71994L79.0376 2.17606V12.316H77.2718V2.71994Z" fill="#262A3D"/>
-<path d="M79.8183 8.89232C79.8171 8.17544 80.0286 7.47431 80.4261 6.87774C80.8236 6.28117 81.3893 5.816 82.0514 5.54113C82.7135 5.26627 83.4422 5.19408 84.1454 5.33371C84.8485 5.47333 85.4944 5.8185 86.0013 6.32549C86.5081 6.83247 86.8531 7.47847 86.9925 8.18166C87.1319 8.88486 87.0595 9.61361 86.7845 10.2756C86.5094 10.9376 86.0441 11.5031 85.4474 11.9005C84.8507 12.2978 84.1495 12.5092 83.4326 12.5077C82.9565 12.5128 82.4842 12.4227 82.0433 12.2428C81.6024 12.0629 81.2019 11.7967 80.8653 11.46C80.5286 11.1232 80.2626 10.7227 80.0828 10.2817C79.903 9.84083 79.8131 9.36845 79.8183 8.89232ZM85.2948 8.89232C85.2948 7.78359 84.4869 7.00602 83.4326 7.00602C82.3784 7.00602 81.5841 7.78674 81.5841 8.89232C81.5841 9.9979 82.392 10.7786 83.4326 10.7786C84.4733 10.7786 85.2948 10.0021 85.2948 8.89232Z" fill="#262A3D"/>
-<path d="M87.7313 8.89233C87.7313 6.85198 89.2645 5.27797 91.3457 5.27797C92.6881 5.27797 93.8513 5.98952 94.413 7.04375L92.8935 7.93451C92.6189 7.37281 92.03 7.01651 91.3321 7.01651C90.2778 7.01651 89.4971 7.79723 89.4971 8.89233C89.4971 9.98743 90.2778 10.7545 91.3321 10.7545C92.0447 10.7545 92.6326 10.4129 92.904 9.8512L94.4371 10.7273C94.1281 11.2741 93.6779 11.7279 93.1335 12.0413C92.5891 12.3547 91.9706 12.5161 91.3425 12.5088C89.2645 12.5077 87.7313 10.9327 87.7313 8.89233Z" fill="#262A3D"/>
-<path d="M99.5123 12.316L97.0203 9.20776V12.316H95.2534V2.71994L97.0203 2.17606V8.48153L99.374 5.46974H101.482L98.7316 8.85145L101.566 12.316H99.5123Z" fill="#262A3D"/>
-<path d="M108.623 8.11161V12.316H106.856V8.33377C106.856 7.40215 106.296 6.92324 105.501 6.92324C104.639 6.92324 103.994 7.4294 103.994 8.62091V12.316H102.229V5.46974H103.994V6.23579C104.405 5.6196 105.118 5.27797 106.035 5.27797C107.486 5.27797 108.623 6.29657 108.623 8.11161Z" fill="#262A3D"/>
-<path d="M116.74 5.46974V12.316H114.975V11.508C114.481 12.1242 113.742 12.5077 112.743 12.5077C110.921 12.5077 109.415 10.9358 109.415 8.89233C109.415 6.84884 110.921 5.27797 112.743 5.27797C113.742 5.27797 114.481 5.66152 114.975 6.27771V5.46974H116.74ZM114.975 8.89233C114.975 7.73959 114.167 6.96201 113.071 6.96201C111.974 6.96201 111.184 7.74273 111.184 8.89233C111.184 10.0419 111.992 10.8237 113.071 10.8237C114.149 10.8237 114.975 10.043 114.975 8.89233Z" fill="#262A3D"/>
-<path d="M121.344 7.16742V5.46975H119.796V3.45665L118.027 4.00053V10.0157C118.027 11.8643 118.866 12.5895 121.342 12.3212V10.7137C120.329 10.7692 119.794 10.7545 119.794 10.0157V7.16742H121.344Z" fill="#262A3D"/>
-<path d="M122.582 5.46974H124.347V12.316H122.582V5.46974Z" fill="#262A3D"/>
-<path d="M132.293 5.46974L129.691 12.316H127.678L125.077 5.46974H127.021L128.678 10.262L130.348 5.46974H132.293Z" fill="#262A3D"/>
-<path d="M136.073 10.9075C136.757 10.9075 137.305 10.6204 137.607 10.2232L139.03 11.0448C138.387 11.9754 137.36 12.5119 136.046 12.5119C133.74 12.5119 132.294 10.94 132.294 8.89652C132.294 6.85303 133.761 5.28217 135.908 5.28217C137.935 5.28217 139.373 6.88447 139.373 8.89652C139.37 9.13886 139.346 9.38049 139.301 9.61856H134.143C134.389 10.5219 135.142 10.9075 136.073 10.9075ZM137.607 8.25099C137.387 7.26487 136.648 6.8677 135.908 6.8677C134.965 6.8677 134.321 7.37491 134.114 8.25099H137.607Z" fill="#262A3D"/>
+<path d="M76.4774 8.89232C76.4774 10.9327 74.9716 12.5077 73.1366 12.5077C72.1369 12.5077 71.4106 12.1378 70.9181 11.508V12.316H69.1513V2.71994L70.9181 2.17606V6.27771C71.4106 5.64894 72.1369 5.27797 73.1366 5.27797C74.9716 5.27797 76.4774 6.85198 76.4774 8.89232ZM74.7106 8.89232C74.7106 7.73959 73.9037 6.96201 72.8076 6.96201C71.7114 6.96201 70.9213 7.74273 70.9213 8.89232C70.9213 10.0419 71.7292 10.8237 72.8076 10.8237C73.8859 10.8237 74.7106 10.043 74.7106 8.89232Z" fill="currentColor"/>
+<path d="M77.2718 2.71994L79.0376 2.17606V12.316H77.2718V2.71994Z" fill="currentColor"/>
+<path d="M79.8183 8.89232C79.8171 8.17544 80.0286 7.47431 80.4261 6.87774C80.8236 6.28117 81.3893 5.816 82.0514 5.54113C82.7135 5.26627 83.4422 5.19408 84.1454 5.33371C84.8485 5.47333 85.4944 5.8185 86.0013 6.32549C86.5081 6.83247 86.8531 7.47847 86.9925 8.18166C87.1319 8.88486 87.0595 9.61361 86.7845 10.2756C86.5094 10.9376 86.0441 11.5031 85.4474 11.9005C84.8507 12.2978 84.1495 12.5092 83.4326 12.5077C82.9565 12.5128 82.4842 12.4227 82.0433 12.2428C81.6024 12.0629 81.2019 11.7967 80.8653 11.46C80.5286 11.1232 80.2626 10.7227 80.0828 10.2817C79.903 9.84083 79.8131 9.36845 79.8183 8.89232ZM85.2948 8.89232C85.2948 7.78359 84.4869 7.00602 83.4326 7.00602C82.3784 7.00602 81.5841 7.78674 81.5841 8.89232C81.5841 9.9979 82.392 10.7786 83.4326 10.7786C84.4733 10.7786 85.2948 10.0021 85.2948 8.89232Z" fill="currentColor"/>
+<path d="M87.7313 8.89233C87.7313 6.85198 89.2645 5.27797 91.3457 5.27797C92.6881 5.27797 93.8513 5.98952 94.413 7.04375L92.8935 7.93451C92.6189 7.37281 92.03 7.01651 91.3321 7.01651C90.2778 7.01651 89.4971 7.79723 89.4971 8.89233C89.4971 9.98743 90.2778 10.7545 91.3321 10.7545C92.0447 10.7545 92.6326 10.4129 92.904 9.8512L94.4371 10.7273C94.1281 11.2741 93.6779 11.7279 93.1335 12.0413C92.5891 12.3547 91.9706 12.5161 91.3425 12.5088C89.2645 12.5077 87.7313 10.9327 87.7313 8.89233Z" fill="currentColor"/>
+<path d="M99.5123 12.316L97.0203 9.20776V12.316H95.2534V2.71994L97.0203 2.17606V8.48153L99.374 5.46974H101.482L98.7316 8.85145L101.566 12.316H99.5123Z" fill="currentColor"/>
+<path d="M108.623 8.11161V12.316H106.856V8.33377C106.856 7.40215 106.296 6.92324 105.501 6.92324C104.639 6.92324 103.994 7.4294 103.994 8.62091V12.316H102.229V5.46974H103.994V6.23579C104.405 5.6196 105.118 5.27797 106.035 5.27797C107.486 5.27797 108.623 6.29657 108.623 8.11161Z" fill="currentColor"/>
+<path d="M116.74 5.46974V12.316H114.975V11.508C114.481 12.1242 113.742 12.5077 112.743 12.5077C110.921 12.5077 109.415 10.9358 109.415 8.89233C109.415 6.84884 110.921 5.27797 112.743 5.27797C113.742 5.27797 114.481 5.66152 114.975 6.27771V5.46974H116.74ZM114.975 8.89233C114.975 7.73959 114.167 6.96201 113.071 6.96201C111.974 6.96201 111.184 7.74273 111.184 8.89233C111.184 10.0419 111.992 10.8237 113.071 10.8237C114.149 10.8237 114.975 10.043 114.975 8.89233Z" fill="currentColor"/>
+<path d="M121.344 7.16742V5.46975H119.796V3.45665L118.027 4.00053V10.0157C118.027 11.8643 118.866 12.5895 121.342 12.3212V10.7137C120.329 10.7692 119.794 10.7545 119.794 10.0157V7.16742H121.344Z" fill="currentColor"/>
+<path d="M122.582 5.46974H124.347V12.316H122.582V5.46974Z" fill="currentColor"/>
+<path d="M132.293 5.46974L129.691 12.316H127.678L125.077 5.46974H127.021L128.678 10.262L130.348 5.46974H132.293Z" fill="currentColor"/>
+<path d="M136.073 10.9075C136.757 10.9075 137.305 10.6204 137.607 10.2232L139.03 11.0448C138.387 11.9754 137.36 12.5119 136.046 12.5119C133.74 12.5119 132.294 10.94 132.294 8.89652C132.294 6.85303 133.761 5.28217 135.908 5.28217C137.935 5.28217 139.373 6.88447 139.373 8.89652C139.37 9.13886 139.346 9.38049 139.301 9.61856H134.143C134.389 10.5219 135.142 10.9075 136.073 10.9075ZM137.607 8.25099C137.387 7.26487 136.648 6.8677 135.908 6.8677C134.965 6.8677 134.321 7.37491 134.114 8.25099H137.607Z" fill="currentColor"/>
 </g>
 <defs>
 <linearGradient id="paint0_linear_13558_103869" x1="141.863" y1="6.82891" x2="146.782" y2="6.82891" gradientUnits="userSpaceOnUse">
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 54ef0cf8c..1b7691747 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -27,7 +27,8 @@ import {
   setLocale,
   setPrimaryWallet,
   setWalletModules,
-  updateConnectModal
+  updateConnectModal,
+  updateTheme
 } from './store/actions.js'
 import type { PatchedEIP1193Provider } from '@web3-onboard/transaction-preview'
 import { getBlocknativeSdk } from './services.js'
@@ -48,7 +49,8 @@ const API = {
       preflightNotifications,
       updateBalances,
       updateAccountCenter,
-      setPrimaryWallet
+      setPrimaryWallet,
+      updateTheme
     }
   }
 }
@@ -67,7 +69,8 @@ export type {
   Notification,
   Notify,
   UpdateNotification,
-  PreflightNotificationsOptions
+  PreflightNotificationsOptions,
+  Theme
 } from './types.js'
 
 export type { EIP1193Provider } from '@web3-onboard/common'
@@ -94,7 +97,8 @@ function init(options: InitOptions): OnboardAPI {
     gas,
     connect,
     containerElements,
-    transactionPreview
+    transactionPreview,
+    theme
   } = options
 
   if (containerElements) updateConfiguration({ containerElements })
@@ -205,7 +209,7 @@ function init(options: InitOptions): OnboardAPI {
     transactionPreview
   })
 
-  if (transactionPreview) {
+  if (apiKey && transactionPreview) {
     const getBnSDK = async () => {
       transactionPreview.init({
         containerElement: '#transaction-preview-container',
@@ -221,6 +225,8 @@ function init(options: InitOptions): OnboardAPI {
     getBnSDK()
   }
 
+  theme && updateTheme(theme)
+
   return API
 }
 
@@ -329,7 +335,7 @@ function mountApp() {
           --shadow-0: none;
           --shadow-1: 0px 4px 12px rgba(0, 0, 0, 0.1);
           --shadow-2: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
-          --shadow-3: 0px 4px 16px rgba(179, 179, 179, 0.2);
+          --shadow-3: 0px 4px 16px rgba(0, 0, 0, 0.2);
 
           /* MODAL POSITIONING */
           --modal-z-index: 10;
@@ -340,6 +346,7 @@ function mountApp() {
 
           /* MODAL STYLES */
           --modal-backdrop: rgba(0, 0, 0, 0.6);
+
         }
       </style>
     `
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
index 440359d82..77d6c6e99 100644
--- a/packages/core/src/store/actions.ts
+++ b/packages/core/src/store/actions.ts
@@ -2,6 +2,7 @@ import type { Chain, WalletInit, WalletModule } from '@web3-onboard/common'
 import { nanoid } from 'nanoid'
 import { dispatch } from './index.js'
 import { configuration } from '../configuration.js'
+import { handleThemeChange, returnTheme } from '../themes.js'
 
 import type {
   Account,
@@ -26,7 +27,8 @@ import type {
   CustomNotificationUpdate,
   Notify,
   ConnectModalOptions,
-  UpdateConnectModalAction
+  UpdateConnectModalAction,
+  Theme
 } from '../types.js'
 
 import {
@@ -40,7 +42,8 @@ import {
   validateWalletInit,
   validateUpdateBalances,
   validateNotify,
-  validateConnectModalUpdate
+  validateConnectModalUpdate,
+  validateUpdateTheme
 } from '../validation.js'
 
 import {
@@ -400,3 +403,13 @@ export function uniqueWalletsByLabel(
       ) === i
   )
 }
+
+export function updateTheme(theme: Theme): void {
+  const error = validateUpdateTheme(theme)
+  if (error) {
+    throw error
+  }
+
+  const themingObj = returnTheme(theme)
+  themingObj && handleThemeChange(themingObj)
+}
diff --git a/packages/core/src/themes.ts b/packages/core/src/themes.ts
new file mode 100644
index 000000000..ec1e9d5a5
--- /dev/null
+++ b/packages/core/src/themes.ts
@@ -0,0 +1,71 @@
+import { fromEvent, takeUntil } from 'rxjs'
+import { reset$ } from './streams'
+import type { BuiltInThemes, Theme, ThemingMap } from './types'
+
+export const themes = {
+  default: {
+    '--w3o-background-color': 'unset',
+    '--w3o-foreground-color': 'unset',
+    '--w3o-text-color': 'unset',
+    '--w3o-border-color': 'unset',
+    '--w3o-action-color': 'unset',
+    '--w3o-border-radius': 'unset'
+  },
+  light: {
+    '--w3o-background-color': '#ffffff',
+    '--w3o-foreground-color': '#EFF1FC',
+    '--w3o-text-color': '#1a1d26',
+    '--w3o-border-color': '#d0d4f7',
+    '--w3o-action-color': '#6370E5',
+    '--w3o-border-radius': '16px'
+  },
+  dark: {
+    '--w3o-background-color': '#1A1D26',
+    '--w3o-foreground-color': '#242835',
+    '--w3o-text-color': '#EFF1FC',
+    '--w3o-border-color': '#33394B',
+    '--w3o-action-color': '#929bed',
+    '--w3o-border-radius': '16px'
+  }
+}
+
+export const returnTheme = (theme: Theme): void | ThemingMap => {
+  if (typeof theme === 'string' && theme === 'system') {
+    return watchForSystemThemeChange()
+  }
+  return returnThemeMap(theme)
+}
+
+export const returnThemeMap = (theme: Theme): void | ThemingMap => {
+  if (typeof theme === 'string' && theme in themes) {
+    return themes[theme as BuiltInThemes]
+  }
+  if (typeof theme === 'object') {
+    return theme
+  }
+}
+
+export const handleThemeChange = (update: ThemingMap): void => {
+  Object.keys(update).forEach(targetStyle => {
+    document.documentElement.style.setProperty(
+      targetStyle,
+      update[targetStyle as keyof ThemingMap]
+    )
+  })
+}
+
+export const watchForSystemThemeChange = (): void => {
+  const systemThemeDark = window.matchMedia('(prefers-color-scheme: dark)')
+  systemThemeDark.matches
+    ? handleThemeChange(themes['dark'])
+    : handleThemeChange(themes['light'])
+
+  fromEvent(systemThemeDark, 'change')
+    .pipe(takeUntil(reset$))
+    .subscribe((changes: Event) => {
+      const themeChange = changes as MediaQueryListEvent
+      themeChange.matches
+        ? handleThemeChange(themes['dark'])
+        : handleThemeChange(themes['light'])
+    })
+}
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index 6eee2d445..f664fd266 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -63,8 +63,26 @@ export interface InitOptions {
    * Transaction Preview module
    */
   transactionPreview?: TransactionPreviewAPI
+  /**
+   * Custom or predefined theme for Web3Onboard 
+   * BuiltInThemes: ['default', 'dark', 'light', 'system']
+   * or customize with a ThemingMap object.
+   */
+  theme?: Theme
 }
 
+export type Theme = ThemingMap | BuiltInThemes | 'system'
+
+export type BuiltInThemes = 'default' | 'dark' | 'light'
+
+export type ThemingMap = {
+  '--w3o-background-color'?: string
+  '--w3o-foreground-color'?: string
+  '--w3o-text-color'?: string
+  '--w3o-border-color'?: string
+  '--w3o-action-color'?: string
+  '--w3o-border-radius'?: string
+}
 export interface ConnectOptions {
   autoSelect?: { label: string; disableModals: boolean }
 }
diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts
index 468624685..ab8a87eaf 100644
--- a/packages/core/src/validation.ts
+++ b/packages/core/src/validation.ts
@@ -26,7 +26,8 @@ import type {
   CustomNotificationUpdate,
   Notify,
   PreflightNotificationsOptions,
-  ConnectModalOptions
+  ConnectModalOptions,
+  Theme
 } from './types.js'
 
 const unknownObject = Joi.object().unknown()
@@ -178,6 +179,19 @@ const containerElements = Joi.object({
   connectModal: Joi.string()
 })
 
+const themeMap = Joi.object({
+  '--w3o-background-color': Joi.string(),
+  '--w3o-foreground-color': Joi.string(),
+  '--w3o-text-color': Joi.string(),
+  '--w3o-border-color': Joi.string(),
+  '--w3o-action-color': Joi.string(),
+  '--w3o-border-radius': Joi.string()
+})
+
+const presetTheme = Joi.string().valid('default', 'dark', 'light', 'system')
+
+const theme = Joi.alternatives().try(themeMap, presetTheme)
+
 const initOptions = Joi.object({
   wallets: walletInit,
   chains: chains.required(),
@@ -198,7 +212,8 @@ const initOptions = Joi.object({
   transactionPreview: Joi.object({
     patchProvider: Joi.function().required(),
     init: Joi.function().required()
-  })
+  }),
+  theme: theme
 })
 
 const connectOptions = Joi.object({
@@ -379,3 +394,7 @@ export function validateCustomNotification(
 export function validateUpdateBalances(data: WalletState[]): ValidateReturn {
   return validate(wallets, data)
 }
+
+export function validateUpdateTheme(data: Theme): ValidateReturn {
+  return validate(theme, data)
+}
diff --git a/packages/core/src/views/account-center/Maximized.svelte b/packages/core/src/views/account-center/Maximized.svelte
index 023cc6d01..48214969a 100644
--- a/packages/core/src/views/account-center/Maximized.svelte
+++ b/packages/core/src/views/account-center/Maximized.svelte
@@ -15,8 +15,8 @@
   import caretLightIcon from '../../icons/caret-light.js'
   import warningIcon from '../../icons/warning.js'
   import questionIcon from '../../icons/question.js'
+  import { poweredByBlocknative } from '../../icons/index.js'
   import { updateAccountCenter } from '../../store/actions.js'
-  import blocknative from '../../icons/blocknative.js'
   import DisconnectAllConfirm from './DisconnectAllConfirm.svelte'
   import { configuration } from '../../configuration.js'
 
@@ -48,26 +48,27 @@
 
 <style>
   .outer-container {
-    background: var(
-      --account-center-maximized-upper-background,
-      var(--onboard-gray-600, var(--gray-600))
-    );
-    border-radius: var(
-      --account-center-border-radius,
-      var(--onboard-border-radius-3, var(--border-radius-3))
-    );
+    --background-color: var(--w3o-background-color);
+    --text-color: var(--w3o-text-color);
+    --border-color: var(--w3o-border-color, var(--gray-500));
+    --action-color: var(--w3o-action-color, var(--primary-500));
+    --border-radius: var(--w3o-border-radius, 1rem);
+
+    --account-center-network-selector-color: var(--text-color, white);
+
     width: 100%;
-    filter: drop-shadow(0px 4px 16px rgba(178, 178, 178, 0.2));
-    padding: 0 1px 1px 1px;
+    overflow: hidden;
     pointer-events: auto;
+    border: 1px solid transparent;
+    background: var(--account-center-maximized-upper-background, var(--background-color));
+    border-color: var(--border-color);
+    border-radius: var(--account-center-border-radius, var(--border-radius));
   }
 
   .wallets-section {
     width: 100%;
-    border-radius: var(
-      --account-center-border-radius,
-      var(--onboard-border-radius-3, var(--border-radius-3))
-    );
+    color: var(--text-color, var(--gray-100));
+    background: var(--background-color, var(--gray-700));
   }
 
   .p5 {
@@ -80,10 +81,7 @@
   }
 
   .actions {
-    color: var(
-      --account-center-maximized-upper-action-color,
-      var(--onboard-primary-400, var(--primary-400))
-    );
+    color: var(--account-center-maximized-upper-action-color, var(--action-color));
     padding-left: 2px;
   }
 
@@ -134,16 +132,17 @@
   }
 
   .network-container {
+    background: var(--backround-color);
+    border-top: 1px solid var(--border-color);
+
     border-radius: var(
       --account-center-border-radius,
       var(--onboard-border-radius-3, var(--border-radius-3))
     );
+
     color: var(
       --account-center-maximized-network-text-color,
-      var(
-        --account-center-maximized-network-section,
-        var(--onboard-gray-500, var(--gray-500))
-      )
+      var(--account-center-maximized-network-section, inherit)
     );
   }
 
@@ -162,58 +161,40 @@
   }
 
   .app-info-container {
-    background: var(
-      --account-center-maximized-info-section-background-color,
-      var(
-        --account-center-maximized-info-section,
-        var(--onboard-white, var(--white))
-      )
-    );
-    border-radius: var(
-      --account-center-border-radius,
-      var(--onboard-border-radius-3, var(--border-radius-3))
+    color: var(--text-color, var(--gray-700));
+    background: var(--account-center-maximized-info-section-background-color,
+      var(--account-center-maximized-info-section, var(--background-color, #FFF))
     );
+    border-top: 1px solid var(--border-color);
+    border-radius: var(--account-center-border-radius, inherit);
     padding: 12px;
   }
 
   .app-name {
+    font-size: 1rem;
     font-weight: 700;
-    font-size: var(--onboard-font-size-5, var(--font-size-5));
-    line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
-    color: var(
-      --account-center-maximized-app-name-color,
-      var(--onboard-gray-600, var(--gray-600))
-    );
-    margin-bottom: var(--onboard-spacing-5, var(--spacing-5));
-    margin-top: 0;
+    line-height: 1rem;
+    margin-bottom: 0.25rem;
+    color: var(--account-center-maximized-app-name-color, inherit);
   }
 
   .app-description {
+    margin: 0;
     font-size: var(--onboard-font-size-7, var(--font-size-7));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
-    color: var(
-      --account-center-maximized-app-info-color,
-      var(--onboard-gray-500, var(--gray-500))
-    );
-    margin: 0;
+    color: var(--account-center-maximized-app-info-color, inherit);
   }
 
   .app-info {
     font-size: var(--onboard-font-size-7, var(--font-size-7));
     line-height: var(--onboard-font-line-height-3, var(--font-line-height-3));
-    color: var(
-      --account-center-maximized-app-info-color,
-      var(--onboard-gray-500, var(--gray-500))
-    );
+    color: var(--account-center-maximized-app-info-color, inherit);
   }
   .app-info-heading {
-    color: var(
-      --account-center-maximized-app-info-color,
-      var(--onboard-gray-600, var(--gray-600))
-    );
     font-weight: 700;
     margin-top: var(--onboard-spacing-5, var(--spacing-5));
     margin-bottom: var(--onboard-spacing-7, var(--spacing-7));
+    color: var(--account-center-maximized-app-info-color, inherit);
   }
 
   a {
@@ -229,20 +210,15 @@
   }
 
   .app-button {
-    margin-top: var(--onboard-spacing-5, var(--spacing-5));
-    color: var(
-      --account-center-app-btn-text-color,
-      var(--onboard-white, var(--white))
-    );
-    background: var(
-      --account-center-app-btn-background,
-      var(--onboard-gray-500, var(--gray-500))
-    );
     font-family: var(--account-center-app-btn-font-family, inherit);
+    margin-top: var(--onboard-spacing-5, var(--spacing-5));
+    color: var(--account-center-app-btn-text-color, var(--background-color, #FFF));
+    background: var(--account-center-app-btn-background, var(--action-color));
   }
 
   .powered-by-container {
     margin-top: 12px;
+    color: var(--text-color);
   }
 
   .powered-by {
@@ -391,28 +367,21 @@
             <WalletAppBadge
               size={32}
               padding={4}
-              background="transparent"
+              background="white"
               border="black"
               radius={8}
               icon={(appMetadata && appMetadata.icon) || questionIcon}
             />
-
-            <div
-              style="right: -5px; bottom: -5px;"
-              class="drop-shadow absolute"
-            >
-              <SuccessStatusIcon size={14} color="blue" />
-            </div>
           </div>
 
           <div class="ml4">
-            <h4 class="app-name">
+            <div class="app-name">
               {(appMetadata && appMetadata.name) || 'App Name'}
-            </h4>
-            <p class="app-description">
+            </div>
+            <div class="app-description">
               {(appMetadata && appMetadata.description) ||
                 'This app has not added a description.'}
-            </p>
+            </div>
           </div>
         </div>
 
@@ -478,14 +447,7 @@
           rel="noopener noreferrer"
           class="flex justify-center items-center powered-by-container"
         >
-          <span class="powered-by"
-            >{$_('accountCenter.poweredBy', {
-              default: en.accountCenter.poweredBy
-            })}</span
-          >
-          <div class="flex items-center" style="width: 83px; margin-left: 4px;">
-            {@html blocknative}
-          </div>
+          {@html poweredByBlocknative}
         </a>
       </div>
     </div>
diff --git a/packages/core/src/views/account-center/Micro.svelte b/packages/core/src/views/account-center/Micro.svelte
index 0d2a2ed15..12f59be35 100644
--- a/packages/core/src/views/account-center/Micro.svelte
+++ b/packages/core/src/views/account-center/Micro.svelte
@@ -16,35 +16,34 @@
 
 <style>
   .minimized {
-    background: var(
-      --account-center-micro-background,
-      var(--onboard-white, var(--white))
-    );
-    border: 1px solid
-      var(--account-center-border, var(--onboard-gray-100, var(--gray-100)));
+    --background-color: var(--account-center-micro-background, var(--w3o-background-color, white));
+    --text-color: var(--w3o-text-color);
+    --border-color: var(--account-center-border, var(--w3o-border-color, var(--onboard-gray-200, var(--gray-200))));
+    --border-radius: var(--account-center-border-radius, var(--w3o-border-radius, 1rem));
+
+    cursor: pointer;
+    pointer-events: auto;
+    border: 1px solid transparent;
+
+    background: var(--background-color);
+    color: var(--text-color);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
     box-shadow: var(
       --account-center-box-shadow,
       var(--onboard-shadow-3, var(--shadow-3))
     );
-    width: 80px;
-    pointer-events: auto;
-  }
-
-  .radius {
-    border-radius: var(
-      --account-center-border-radius,
-      var(--onboard-border-radius-3, var(--border-radius-3))
-    );
   }
 
   .drop-shadow {
     filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
   }
 
-  .inner-box-wrapper {
+  .inner-row {
     display: flex;
     flex-flow: row nowrap;
-    padding: 12px;
+    width: 80px;
+    padding: 0.75rem;
   }
 
   .wallet-square-wrapper {
@@ -59,8 +58,8 @@
   }
 </style>
 
-<div class="minimized pointer radius" on:click|stopPropagation={maximize}>
-  <div class="inner-box-wrapper">
+<div class="minimized" on:click|stopPropagation={maximize}>
+  <div class="inner-row">
     <!-- app and wallet icon badge -->
     <div class="drop-shadow">
       <WalletAppBadge
diff --git a/packages/core/src/views/account-center/Minimized.svelte b/packages/core/src/views/account-center/Minimized.svelte
index 4e0db5623..908d3e617 100644
--- a/packages/core/src/views/account-center/Minimized.svelte
+++ b/packages/core/src/views/account-center/Minimized.svelte
@@ -61,56 +61,61 @@
 
 <style>
   .minimized {
-    background: var(
-      --account-center-minimized-background,
-      var(--onboard-white, var(--white))
-    );
-    border: 1px solid
-      var(--account-center-border, var(--onboard-gray-100, var(--gray-100)));
+    --background-color: var(--account-center-minimized-background, var(--w3o-background-color, white));
+    --text-color: var(--w3o-text-color, var(--gray-700));
+    --border-color: var(--account-center-border, var(--w3o-border-color, var(--onboard-gray-200, var(--gray-200))));
+    --border-radius: var(--account-center-border-radius, var(--w3o-border-radius, 1rem));
+
+    cursor: pointer;
+    pointer-events: auto;
     width: 100%;
+    padding: 0.5rem;
+    border: 1px solid;
+
+    background: var(--background-color);
+    color: var(--text-color);
+    border-color: var(--border-color);
+    border-radius: var(--border-radius);
     box-shadow: var(
       --account-center-box-shadow,
       var(--onboard-shadow-3, var(--shadow-3))
     );
-    pointer-events: auto;
   }
 
-  .radius {
-    border-radius: var(
-      --account-center-border-radius,
-      var(--onboard-border-radius-3, var(--border-radius-3))
-    );
-  }
-
-  .padding-5 {
-    padding: var(--onboard-spacing-5, var(--spacing-5));
+  .inner-row {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0 0.25rem;
   }
 
-  .drop-shadow {
-    filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
+  .wallet-info {
+    display: flex;
+    flex: 1;
+    flex-flow: column;
+    height: 2.5rem;
+    overflow: hidden;
   }
 
   .address {
     font-weight: 700;
-    line-height: var(--onboard-font-line-height-2, var(--font-line-height-2));
-    color: var(--account-center-minimized-address-color, initial);
+    line-height: 1.25rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    /* legacy variables */
+    color: var(--account-center-minimized-address-color, inherit);
   }
 
   .balance {
     font-weight: 400;
-    line-height: var(--onboard-font-line-height-2, var(--font-line-height-2));
-    color: var(
-      --account-center-minimized-balance-color,
-      var(--onboard-gray-400, var(--gray-400))
-    );
+    line-height: 1.25rem;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    width: 7.25rem;
-  }
-
-  .network {
-    margin-left: 0.2rem;
+    opacity: 0.6;
+    color: var(--account-center-minimized-balance-color, inherit);
   }
 
   .chain-icon {
@@ -130,6 +135,10 @@
     cursor: default;
   }
 
+  .drop-shadow {
+    filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.2));
+  }
+
   .color-yellow {
     color: var(
       --account-center-chain-warning,
@@ -145,58 +154,55 @@
 <div
   in:fade={{ duration: 250 }}
   out:fade={{ duration: 100 }}
-  class="minimized pointer radius padding-5"
+  class="minimized"
   on:click|stopPropagation={maximize}
 >
-  <div class="flex items-center justify-between" style="padding: 0 4px;">
-    <div class="flex items-center w-100">
-      <!-- app and wallet icon badge -->
-      <div class="flex items-centered relative">
-        <div class="drop-shadow">
-          <WalletAppBadge
-            size={32}
-            padding={4}
-            background={'white'}
-            border="darkGreen"
-            radius={8}
-            icon={appIcon}
-          />
-        </div>
+  <div class="inner-row">
+    <div class="flex relative">
+      <div class="drop-shadow">
+        <WalletAppBadge
+          size={32}
+          padding={4}
+          background={'white'}
+          border="darkGreen"
+          radius={8}
+          icon={appIcon}
+        />
+      </div>
 
-        <div style="right: 0.5rem;" class="drop-shadow relative">
-          <WalletAppBadge
-            size={32}
-            padding={4}
-            background="green"
-            border="darkGreen"
-            radius={8}
-            icon={primaryWallet ? primaryWallet.icon : ''}
-          />
-        </div>
+      <div style="margin-left: -0.5rem;" class="drop-shadow">
+        <WalletAppBadge
+          size={32}
+          padding={4}
+          background="green"
+          border="darkGreen"
+          radius={8}
+          icon={primaryWallet ? primaryWallet.icon : ''}
+        />
+      </div>
 
-        <div style="right: 5px; bottom: -5px;" class="drop-shadow absolute">
-          <SuccessStatusIcon size={14} />
-        </div>
+      <div style="right: -4px; bottom: -4px;" class="drop-shadow absolute">
+        <SuccessStatusIcon size={14} />
       </div>
+    </div>
 
-      <!-- address and balance -->
-      <div class="flex flex-column" style="height: 40px;">
-        <div class="address">
-          {ensName
-            ? shortenDomain(ensName)
-            : unsName
-            ? shortenDomain(unsName)
-            : shortenedFirstAddress}
-        </div>
-        {#if firstAddressBalance}
-          <div in:fade class="balance">
-            {firstAddressBalance.length > 8
-              ? firstAddressBalance.slice(0, 8)
-              : firstAddressBalance}
-            {firstAddressAsset}
-          </div>
-        {/if}
+    <!-- address and balance -->
+    <div class="wallet-info">
+      <div class="address">
+        {ensName
+          ? shortenDomain(ensName)
+          : unsName
+          ? shortenDomain(unsName)
+          : shortenedFirstAddress}
       </div>
+      {#if firstAddressBalance}
+        <div in:fade class="balance">
+          {firstAddressBalance.length > 8
+            ? firstAddressBalance.slice(0, 8)
+            : firstAddressBalance}
+          {firstAddressAsset}
+        </div>
+      {/if}
     </div>
 
     <!-- network badge -->
@@ -243,5 +249,6 @@
         </div>
       </div>
     </div>
+
   </div>
 </div>
diff --git a/packages/core/src/views/account-center/WalletRow.svelte b/packages/core/src/views/account-center/WalletRow.svelte
index 351cf4cbf..46e5ca9e2 100644
--- a/packages/core/src/views/account-center/WalletRow.svelte
+++ b/packages/core/src/views/account-center/WalletRow.svelte
@@ -64,51 +64,63 @@
 
 <style>
   .container {
+    position: relative;
+    z-index: 0;
+    width: 100%;
     padding: 0.25rem;
     margin-bottom: 0.25rem;
-    width: 100%;
-    font-size: var(--onboard-font-size-5, var(--font-size-5));
-    line-height: var(--onboard-font-line-height-2, var(--font-line-height-2));
     border-radius: 12px;
     transition: background-color 150ms ease-in-out;
   }
 
-  .container:hover {
-    background: var(--onboard-gray-500, var(--gray-500));
+  .container::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    background: var(--action-color);
+    border-radius: 12px;
+    z-index: 0;
+    opacity: 0;
+  }
+
+  .container:hover::before {
+    opacity: 0.2;
+  }
+
+  .container:hover .balance,
+  .container:hover .elipsis-container {
+    opacity: 1;
   }
 
-  .container:hover > div > span.balance {
-    color: var(
-      --account-center-maximized-balance-color,
-      var(--onboard-gray-100, var(--gray-100))
-    );
+  .container:hover .balance {
+    color: var(--account-center-maximized-balance-color, inherit);
   }
 
   .container.primary:hover {
-    background: var(
-      --account-center-maximized-account-section-background-hover,
-      var(--onboard-gray-700, var(--gray-700))
-    );
+    background-color: var(--account-center-maximized-account-section-background-hover);
   }
 
   .address-domain {
     margin-left: 0.5rem;
     font-weight: 700;
-    color: var(
-      --account-center-maximized-address-color,
-      var(--onboard-primary-100, var(--primary-100))
-    );
+    color: var(--account-center-maximized-address-color, inherit);
   }
 
   .balance {
     margin-left: 0.5rem;
-    color: var(--onboard-gray-300, var(--gray-300));
     transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     width: 7.25rem;
     text-align: end;
+    opacity: 0.4;
   }
 
   .elipsis-container {
@@ -117,7 +129,7 @@
     border-radius: 24px;
     transition: color 150ms ease-in-out, background-color 150ms ease-in-out;
     background-color: transparent;
-    color: var(--onboard-gray-400, var(--gray-400));
+    opacity: 0.4;
   }
 
   .elipsis {
@@ -125,11 +137,11 @@
   }
 
   .elipsis-container:hover {
-    color: var(--onboard-gray-100, var(--gray-100));
+    color: var(--text-color)
   }
 
   .elipsis-container.active {
-    background: var(--onboard-gray-700, var(--gray-700));
+    color: var(--text-color)
   }
 
   .menu {
diff --git a/packages/core/src/views/connect/ConnectedWallet.svelte b/packages/core/src/views/connect/ConnectedWallet.svelte
index c10882daa..1f6d966ae 100644
--- a/packages/core/src/views/connect/ConnectedWallet.svelte
+++ b/packages/core/src/views/connect/ConnectedWallet.svelte
@@ -14,6 +14,10 @@
 <style>
   .container {
     padding: var(--onboard-spacing-4, var(--spacing-4));
+    color: var(
+      --onboard-connect-accent-text-color,
+      var(--onboard-gray-700, var(--gray-700))
+    );
   }
 
   .connecting-container {
diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
index 4179da432..5c3474a52 100644
--- a/packages/core/src/views/connect/Index.svelte
+++ b/packages/core/src/views/connect/Index.svelte
@@ -381,13 +381,21 @@
 
 <style>
   .container {
+    /* component values */
+    --background-color: var(--onboard-main-scroll-container-background, var(--w3o-background-color));
+    --foreground-color: var(--w3o-foreground-color);
+    --text-color: var(--onboard-connect-text-color, var(--w3o-text-color));
+    --border-color: var(--w3o-border-color, var(--gray-200));
+    --action-color: var(--w3o-action-color, var(--primary-500));
+
+    /* themeable properties */
     font-family: var(--onboard-font-family-normal, var(--font-family-normal));
-    font-size: var(--onboard-font-size-5, var(--font-size-5));
-    color: var(--onboard-gray-700, var(--gray-700));
-    background: var(
-      --onboard-main-scroll-container-background,
-      var(--onboard-white, var(--white))
-    );
+    font-size: var(--onboard-font-size-5, 1rem);
+    background: var(--background-color);
+    color: var(--text-color);
+    border-color: var(--border-color);
+
+    /* non-themeable properties */
     line-height: 24px;
     overflow: hidden;
     position: relative;
@@ -400,60 +408,36 @@
     width: var(--onboard-connect-content-width, 100%);
   }
 
-  .scroll-container {
-    overflow-y: auto;
-    transition: opacity 250ms ease-in-out;
-    scrollbar-width: none; /* Firefox */
-  }
-
-  .scroll-container::-webkit-scrollbar {
-    display: none; /* Chrome, Safari and Opera */
-  }
-
   .header {
     display: flex;
     padding: 1rem;
-    border-bottom: 1px solid var(--onboard-primary-200, var(--primary-200));
-    background: var(
-      --onboard-connect-header-background,
-      var(--onboard-white, var(--white))
-    );
-    color: var(
-      --onboard-connect-header-color,
-      var(--onboard-black, var(--black))
-    );
+    border-bottom: 1px solid transparent;
+    background: var(--onboard-connect-header-background);
+    color: var(--onboard-connect-header-color);
+    border-color: var(--border-color);
   }
 
   .header-heading {
-    line-height: 16px;
+    line-height: 1rem;
   }
 
   .button-container {
-    right: var(--onboard-spacing-5, var(--spacing-5));
-    top: var(--onboard-spacing-5, var(--spacing-5));
-  }
-
-  .disabled {
-    opacity: 0.2;
-    pointer-events: none;
+    right: 0.5rem;
+    top: 0.5rem;
   }
 
   .mobile-header {
-    height: 4.5rem; /* 72px */
-    padding: 1rem;
     display: flex;
     gap: 0.5rem;
-
-    border-bottom: 1px solid
-      var(
-        --onboard-wallet-button-border-color,
-        var(--onboard-primary-200, var(--primary-200))
-      );
+    height: 4.5rem; /* 72px */
+    padding: 1rem;
+    border-bottom: 1px solid;
+    border-color: var(--border-color);
   }
 
   .mobile-subheader {
-    color: var(--onboard-gray-400, var(--gray-400));
-    font-size: var(--onboard-font-size-6, var(--font-size-6));
+    opacity: 0.6;
+    font-size: 0.875rem;
     font-weight: 400;
     line-height: 1rem;
     margin-top: 0.25rem;
@@ -466,6 +450,12 @@
     width: 2.5rem;
     min-width: 2.5rem;
     justify-content: center;
+    align-items: center;
+  }
+
+  .disabled {
+    opacity: 0.2;
+    pointer-events: none;
     overflow: hidden;
   }
 
@@ -479,6 +469,16 @@
     width: 100%;
   }
 
+  .scroll-container {
+    overflow-y: auto;
+    transition: opacity 250ms ease-in-out;
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .scroll-container::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+
   @media all and (min-width: 768px) {
     .container {
       margin: 0;
diff --git a/packages/core/src/views/connect/SelectingWallet.svelte b/packages/core/src/views/connect/SelectingWallet.svelte
index 40ac391db..c4fe1e81b 100644
--- a/packages/core/src/views/connect/SelectingWallet.svelte
+++ b/packages/core/src/views/connect/SelectingWallet.svelte
@@ -24,14 +24,8 @@
     gap: 0.5rem;
     overflow-x: scroll;
     overflow-y: hidden;
-
     padding: 0.75rem 0.5rem;
-
-    border-bottom: 1px solid
-      var(
-        --onboard-wallet-button-border-color,
-        var(--onboard-primary-200, var(--primary-200))
-      );
+    border-bottom: 1px solid var(--border-color);
 
     /* Hide scrollbar for IE, Edge and Firefox */
     -ms-overflow-style: none; /* IE and Edge */
@@ -52,6 +46,7 @@
       display: grid;
       grid-template-columns: repeat(var(--onboard-wallet-columns, 2), 1fr);
       padding: 1rem;
+      border: none;
     }
   }
 </style>
diff --git a/packages/core/src/views/connect/Sidebar.svelte b/packages/core/src/views/connect/Sidebar.svelte
index 8a223e222..dd53ca0c8 100644
--- a/packages/core/src/views/connect/Sidebar.svelte
+++ b/packages/core/src/views/connect/Sidebar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { _ } from 'svelte-i18n'
-  import { defaultBnIcon, poweredByBlocknativeIcon } from '../../icons/index.js'
+  import { defaultBnIcon, poweredByBlocknative } from '../../icons/index.js'
   import en from '../../i18n/en.json'
   import type { i18n } from '../../types.js'
   import { isSVG } from '../../utils.js'
@@ -20,15 +20,15 @@
 
 <style>
   .sidebar {
+    --background-color: var(--onboard-connect-sidebar-background, var(--w3o-foreground-color, none));
+    --text-color: var(--onboard-connect-sidebar-color, inherit);
+    --border-color: var(--onboard-connect-sidebar-border-color, inherit);
+
     display: flex;
     flex-flow: column;
     gap: 1rem;
     padding: 1rem;
     align-items: center;
-    color: var(
-      --onboard-connect-sidebar-color,
-      var(--onboard-gray-700, var(--gray-700))
-    );
   }
 
   .inner-container {
@@ -39,16 +39,11 @@
     gap: 0.5rem;
     padding: 1.5rem;
     text-align: center;
-    border: 1px solid;
+    border: 1px solid transparent;
     border-radius: 12px;
-    border-color: var(
-      --onboard-connect-sidebar-border-color,
-      var(--onboard-primary-200, var(--primary-200))
-    );
-    background: var(
-      --onboard-connect-sidebar-background,
-      var(--onboard-primary-100, var(--primary-100))
-    );
+    border-color: var(--border-color);
+    background-color: var(--background-color);
+    color: var(--text-color);
   }
 
   .icon-container {
@@ -92,7 +87,7 @@
   .indicator.on {
     background: var(
       --onboard-connect-sidebar-progress-color,
-      var(--onboard-primary-600, var(--primary-600))
+      var(--action-color)
     );
     border: 2px solid
       var(
@@ -116,7 +111,7 @@
   .join.active {
     background: var(
       --onboard-connect-sidebar-progress-color,
-      var(--onboard-primary-600, var(--primary-600))
+      var(--action-color)
     );
   }
 
@@ -124,14 +119,9 @@
     .sidebar {
       max-width: 280px;
       border-right: 1px solid;
-      border-color: var(
-        --onboard-connect-sidebar-border-color,
-        var(--onboard-primary-200, var(--primary-200))
-      );
-      background: var(
-        --onboard-connect-sidebar-background,
-        var(--onboard-primary-100, var(--primary-100))
-      );
+
+      border-color: var(--border-color);
+      background-color: var(--background-color);
     }
     .inner-container {
       border: none;
@@ -206,8 +196,9 @@
         class:on={step === 'connectedWallet'}
       />
     </div>
+
   </div>
   <div>
-    {@html poweredByBlocknativeIcon}
+    {@html poweredByBlocknative}
   </div>
 </div>
diff --git a/packages/core/src/views/connect/WalletButton.svelte b/packages/core/src/views/connect/WalletButton.svelte
index cceb31e3b..e41d961c4 100644
--- a/packages/core/src/views/connect/WalletButton.svelte
+++ b/packages/core/src/views/connect/WalletButton.svelte
@@ -25,21 +25,7 @@
     flex: 1;
     padding: 0;
     background: none;
-    color: var(
-      --onboard-wallet-button-color,
-      var(--onboard-gray-700, var(--gray-700))
-    );
-  }
-
-  button.wallet-button-styling:hover {
-    background: var(
-      --onboard-wallet-button-background-hover,
-      var(--onboard-primary-100, var(--primary-100))
-    );
-    color: var(
-      --onboard-wallet-button-color-hover,
-      var(--onboard-gray-700, var(--gray-700))
-    );
+    color: var(--onboard-wallet-button-color, inherit);
   }
 
   .wallet-button-container {
@@ -74,26 +60,16 @@
   @media screen and (min-width: 768px) {
     button.wallet-button-styling {
       transition: background-color 250ms ease-in-out;
-      background: var(
-        --onboard-wallet-button-background,
-        var(--onboard-white, var(--white))
-      );
-      border-radius: var(
-        --onboard-wallet-button-border-radius,
-        var(--border-radius-1)
-      );
-      border: 1px solid
-        var(
-          --onboard-wallet-button-border-color,
-          var(--onboard-primary-200, var(--primary-200))
-        );
+
+      background: var(--onboard-wallet-button-background, none);
+      border: 1px solid transparent;
+      border-color: var(--onboard-wallet-button-border-color, var(--border-color));
+      border-radius: var(--onboard-wallet-button-border-radius, var(--border-radius-1));
     }
 
     button.wallet-button-styling:hover {
-      background: var(
-        --onboard-wallet-button-background-hover,
-        var(--onboard-primary-100, var(--primary-100))
-      );
+      background: var(--onboard-wallet-button-background-hover, var(--foreground-color));
+      color: var(--onboard-wallet-button-color-hover);
     }
 
     .wallet-button-container-inner {
@@ -107,10 +83,6 @@
       border-color: var(--onboard-success-500, var(--success-500));
     }
 
-    button.connected:hover {
-      background: var(--onboard-success-100, var(--success-100));
-    }
-
     .name {
       font-size: 1rem;
       line-height: 1.25rem;
@@ -145,7 +117,7 @@
         size={windowWidth >= MOBILE_WINDOW_WIDTH ? 48 : 56}
         {icon}
         loading={connecting}
-        border={connected ? 'green' : 'blue'}
+        border={connected ? 'green' : 'custom'}
         background="transparent"
       />
       <div class="name">{label}</div>
diff --git a/packages/core/src/views/notify/Index.svelte b/packages/core/src/views/notify/Index.svelte
index d1018598a..348750e97 100644
--- a/packages/core/src/views/notify/Index.svelte
+++ b/packages/core/src/views/notify/Index.svelte
@@ -63,7 +63,7 @@
     display: flex;
     flex-flow: column nowrap;
     font-size: var(
-      --notify-onboard-font-size-5,
+      --notify-onboard-font-size,
       var(--onboard-font-size-5, var(--font-size-5))
     );
     list-style-type: none;
@@ -72,8 +72,8 @@
     box-sizing: border-box;
     z-index: var(--notify-onboard-z-index, 300);
     font-family: var(
-      --notify-onboard-font-family-normal,
-      var(--onboard-font-family-normal, var(--font-family-normal))
+      --notify-onboard-font-family,
+      var(--onboard-font-family-normal, inherit)
     );
     margin: 8px 0;
     pointer-events: all;
diff --git a/packages/core/src/views/notify/Notification.svelte b/packages/core/src/views/notify/Notification.svelte
index a67f3f560..0e0afae5f 100644
--- a/packages/core/src/views/notify/Notification.svelte
+++ b/packages/core/src/views/notify/Notification.svelte
@@ -59,24 +59,29 @@
 
 <style>
   .bn-notify-notification {
+    --backround-color: var(--notify-onboard-background, var(--w3o-backround-color, var(--gray-700)));
+    --foreground-color: var(--w3o-foreground-color, var(--gray-600));
+    --text-color: var(--w3o-text-color, #FFF);
+    --border-color: var(--w3o-border-color);
+
     font-family: inherit;
     transition: background 300ms ease-in-out, color 300ms ease-in-out;
     pointer-events: all;
     backdrop-filter: blur(5px);
     width: 100%;
     min-height: 56px;
-    background: var(
-      --notify-onboard-background,
-      var(--onboard-gray-600, var(--gray-600))
-    );
-    border-radius: var(
-      --notify-onboard-border-radius,
-      var(--onboard-border-radius-4, var(--border-radius-4))
-    );
     display: flex;
     flex-direction: column;
     position: relative;
     overflow: hidden;
+    border: 1px solid transparent;
+    border-color: var(--border-color);
+    border-radius: var(
+      --notify-onboard-border-radius,
+      var(--onboard-border-radius-4, var(--border-radius-4))
+    );
+    background: var(--foreground-color);
+    color: var(--text-color);
   }
 
   .bn-notify-notification-inner {
@@ -111,20 +116,15 @@
   .notify-close-btn .close-icon {
     width: 20px;
     margin: auto;
+    color: var(--text-color);
   }
 
   .notify-close-btn > .close-icon {
-    color: var(
-      --notify-onboard-close-icon-color,
-      var(--onboard-gray-300, var(--gray-300))
-    );
+    color: var(--notify-onboard-close-icon-color);
   }
 
   .notify-close-btn:hover > .close-icon {
-    color: var(
-      --notify-onboard-close-icon-hover,
-      var(--onboard-gray-100, var(--gray-100))
-    );
+    color: var(--notify-onboard-close-icon-hover);
   }
 
   .transaction-status {
@@ -147,7 +147,7 @@
 
   .dropdown-buttons {
     background-color: var(
-      --notify-onboard-gray-700,
+      --notify-onboard-dropdown-background,
       var(--onboard-gray-700, var(--gray-700))
     );
     width: 100%;
@@ -157,16 +157,16 @@
   .dropdown-button {
     padding: 4px 12px;
     border-radius: var(
-      --notify-onboard-border-radius-5,
+      --notify-onboard-dropdown-border-radius,
       var(--onboard-border-radius-5, var(--border-radius-5))
     );
     background-color: transparent;
     font-size: var(
-      --notify-onboard-font-size-6,
+      --notify-onboard-dropdown-font-size,
       var(--onboard-font-size-6, var(--font-size-6))
     );
     color: var(
-      --notify-onboard-primary-400,
+      --notify-onboard-dropdown-text-color,
       var(--onboard-primary-400, var(--primary-400))
     );
     transition: all 150ms ease-in-out;
@@ -174,7 +174,10 @@
   }
 
   .dropdown-button:hover {
-    background-color: rgba(146, 155, 237, 0.2);
+    background: var(
+      --notify-onboard-dropdown-btn-hover-background,
+      rgba(146, 155, 237, 0.2)
+    );
   }
 </style>
 
diff --git a/packages/core/src/views/notify/NotificationContent.svelte b/packages/core/src/views/notify/NotificationContent.svelte
index 5c869e5af..ebcc331b1 100644
--- a/packages/core/src/views/notify/NotificationContent.svelte
+++ b/packages/core/src/views/notify/NotificationContent.svelte
@@ -52,10 +52,7 @@
   }
 
   .transaction-status {
-    color: var(
-      --notify-onboard-transaction-status,
-      var(--onboard-primary-100, var(--primary-100))
-    );
+    color: var(--notify-onboard-transaction-status, inherit);
     line-height: var(
       --notify-onboard-font-size-5,
       var(--onboard-font-size-5, var(--font-size-5))
diff --git a/packages/core/src/views/notify/StatusIconBadge.svelte b/packages/core/src/views/notify/StatusIconBadge.svelte
index 2b6f489bc..edcda5408 100644
--- a/packages/core/src/views/notify/StatusIconBadge.svelte
+++ b/packages/core/src/views/notify/StatusIconBadge.svelte
@@ -99,7 +99,7 @@
           icon={chainStyles.icon}
           size={16}
           background={chainStyles.color}
-          borderColorVar={'--onboard-gray-600, var(--gray-600)'}
+          borderColorVar={`--notify-onboard-background, var(--onboard-gray-600, var(--gray-600))`}
           padding={3}
         />
       </div>
diff --git a/packages/core/src/views/shared/CloseButton.svelte b/packages/core/src/views/shared/CloseButton.svelte
index 12e8b8d10..953cb55ec 100644
--- a/packages/core/src/views/shared/CloseButton.svelte
+++ b/packages/core/src/views/shared/CloseButton.svelte
@@ -1,31 +1,49 @@
 <script>
   import closeIcon from '../../icons/close.js'
-
-  export let width = '24px'
-  export let backgroundColor = `var(
-      --onboard-close-button-background,
-      var(--onboard-gray-100, var(--gray-100))
-    );`
 </script>
 
 <style>
   .close-button {
-    padding: 0.25rem;
-    border-radius: 40px;
-    color: var(
-      --onboard-close-button-color,
-      var(--onboard-gray-300, var(--gray-300))
-    );
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2rem;
+    width: 2rem;
+    border-radius: 2rem;
+    cursor: pointer;
+    color: var(--onboard-close-button-color, inherit);
+  }
+
+  .close-button:hover::before {
+    opacity: 0.2;
+  }
+  .close-button:hover .svg-box {
+    opacity: 1;
+  }
+
+  .close-button::before {
+    content: '';
+    position: absolute;
+    height: inherit;
+    width: inherit;
+    opacity: 0.1;
+    background: currentColor;
+    transition: 300ms ease-in-out opacity;
+  }
+
+   .svg-box {
+    position: absolute;
+    height: 1.5rem;
+    width: 1.5rem;
+    opacity: 0.6;
+    transition: 300ms ease-in-out opacity;
   }
 </style>
 
-<div class="flex justify-center items-center pointer">
-  <div
-    class="close-button flex justify-center items-center"
-    style={`background:${backgroundColor}`}
-  >
-    <div class="flex items-center" style="width:{width};">
-      {@html closeIcon}
-    </div>
+<div class="close-button">
+  <div class="svg-box">
+    {@html closeIcon}
   </div>
 </div>
diff --git a/packages/core/src/views/shared/Modal.svelte b/packages/core/src/views/shared/Modal.svelte
index bcc380fd5..69452f642 100644
--- a/packages/core/src/views/shared/Modal.svelte
+++ b/packages/core/src/views/shared/Modal.svelte
@@ -71,8 +71,10 @@
   }
 
   .modal-styling {
-    border-radius: var(--onboard-modal-border-radius, var(--border-radius-1))
-      var(--onboard-modal-border-radius, var(--border-radius-1)) 0 0;
+    --border-radius: var(--onboard-modal-border-radius,
+      var(--w3o-border-radius, 1rem)
+    );
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
     box-shadow: var(--onboard-modal-box-shadow, var(--box-shadow-0));
     max-width: 100vw;
   }
@@ -93,7 +95,7 @@
 
   @media all and (min-width: 768px) {
     .modal-styling {
-      border-radius: var(--onboard-modal-border-radius, var(--border-radius-1));
+      border-radius: var(--border-radius);
     }
     .modal-container-mobile {
       bottom: unset;
diff --git a/packages/core/src/views/shared/NetworkSelector.svelte b/packages/core/src/views/shared/NetworkSelector.svelte
index 1349e876d..ba38d6271 100644
--- a/packages/core/src/views/shared/NetworkSelector.svelte
+++ b/packages/core/src/views/shared/NetworkSelector.svelte
@@ -111,8 +111,8 @@
     <span
       class={`switching-placeholder ${parentCSSId}`}
       style={`
-        color: var(${colorVar}, 
-        var(--account-center-network-selector-color, var (--gray-500))); 
+        color: var(${colorVar},
+        var(--account-center-network-selector-color, var(--gray-500)));
       `}>switching...</span
     >
   {:else}
@@ -122,8 +122,8 @@
       value={wallet.chains[0].id}
       on:change={handleSelect}
       style={`
-        color: var(${colorVar}, 
-        var(--account-center-network-selector-color, var (--gray-500)));
+        color: var(${colorVar},
+        var(--account-center-network-selector-color, var(--gray-500)));
         background-image: url('data:image/svg+xml;utf8,${selectIcon}'); ${
         bold ? 'font-weight: 700;' : ''
       }`}
diff --git a/packages/core/src/views/shared/WalletAppBadge.svelte b/packages/core/src/views/shared/WalletAppBadge.svelte
index 7c48fdb8a..a81fd5929 100644
--- a/packages/core/src/views/shared/WalletAppBadge.svelte
+++ b/packages/core/src/views/shared/WalletAppBadge.svelte
@@ -13,6 +13,7 @@
   export let color = 'black'
 
   export let border:
+    | 'custom'
     | 'yellow'
     | 'gray'
     | 'green'
@@ -43,6 +44,10 @@
     height: 100%;
   }
 
+  .border-custom {
+    border: 1px solid var(--border-color);
+  }
+
   .border-yellow {
     border: 1px solid var(--onboard-warning-500, var(--warning-500));
   }
@@ -168,6 +173,7 @@
 <svelte:window bind:innerWidth={windowWidth} />
 
 <div
+  class:border-custom={border === 'custom'}
   class:border-yellow={border === 'yellow'}
   class:border-gray={border === 'gray'}
   class:border-green={border === 'green'}
diff --git a/packages/dcent/package.json b/packages/dcent/package.json
index 218346f2f..6a1186ee2 100644
--- a/packages/dcent/package.json
+++ b/packages/dcent/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/dcent",
-  "version": "2.2.3-alpha.1",
+  "version": "2.2.3-alpha.2",
   "description": "D'CENT wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/hw-common": "^2.0.5-alpha.1",
+    "@web3-onboard/hw-common": "^2.1.0-alpha.1",
     "@ethereumjs/tx": "^3.4.0",
     "@ethersproject/providers": "^5.5.0",
     "eth-dcent-keyring": "^0.2.2"
diff --git a/packages/demo/README.md b/packages/demo/README.md
index 6268c00d6..9bc872f6b 100644
--- a/packages/demo/README.md
+++ b/packages/demo/README.md
@@ -1,3 +1,5 @@
-# Onboard Demo
+# Onboard Demo using Svelte
 
 This is a quick demo for testing and development of Onboard V2.
+
+From the root of the project run `yarn && yarn dev` then navigate to `http://localhost:8080/`
diff --git a/packages/demo/package.json b/packages/demo/package.json
index ce6808630..a64f124b8 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -23,24 +23,24 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.13.2-alpha.1",
+    "@web3-onboard/core": "^2.14.0-alpha.1",
     "@web3-onboard/coinbase": "^2.1.4",
     "@web3-onboard/transaction-preview": "^2.0.0",
     "@web3-onboard/dcent": "^2.2.3-alpha.1",
     "@web3-onboard/frontier": "^2.0.0",
     "@web3-onboard/fortmatic": "^2.0.14",
     "@web3-onboard/gas": "^2.1.3",
-    "@web3-onboard/gnosis": "^2.1.5",
+    "@web3-onboard/gnosis": "^2.1.6-alpha.1",
+    "@web3-onboard/keepkey": "^2.3.3-alpha.2",
+    "@web3-onboard/keystone": "^2.3.3-alpha.2",
+    "@web3-onboard/ledger": "^2.4.2-alpha.1",
     "@web3-onboard/injected-wallets": "^2.6.0",
-    "@web3-onboard/keepkey": "^2.3.3-alpha.1",
-    "@web3-onboard/keystone": "^2.3.3-alpha.1",
-    "@web3-onboard/ledger": "^2.4.1",
     "@web3-onboard/magic": "^2.1.3",
     "@web3-onboard/phantom": "^2.0.0-alpha.1",
     "@web3-onboard/portis": "^2.1.3",
     "@web3-onboard/sequence": "^2.0.4",
+    "@web3-onboard/trezor": "^2.3.3-alpha.2",
     "@web3-onboard/torus": "^2.2.1",
-    "@web3-onboard/trezor": "^2.3.3-alpha.1",
     "@web3-onboard/tallyho": "^2.0.1",
     "@web3-onboard/web3auth": "^2.1.4",
     "@web3-onboard/walletconnect": "^2.2.2",
diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index ad81cf92b..f60f899bf 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -35,15 +35,12 @@
   import VConsole from 'vconsole'
   import blocknativeIcon from './blocknative-icon'
   import blocknativeLogo from './blocknative-logo'
-  import { onMount } from 'svelte'
-
-  let windowWidth
 
   if (window.innerWidth < 700) {
     new VConsole()
   }
 
-  const apiKey = 'xxxxxx-bf21-42ec-a093-9d37e426xxxx'
+  const apiKey = '0fcf74ed-b95b-4b8d-a8d8-4d655ae479d9'
   const infura_key = '80633e48116943128cbab25e402764ab'
 
   let defaultTransactionObject = JSON.stringify(
@@ -155,7 +152,9 @@
   const sequence = sequenceModule()
   const enkrypt = enkryptModule()
   const mewWallet = mewWalletModule()
-  const transactionPreview = transactionPreviewModule()
+  const transactionPreview = transactionPreviewModule({
+    requireTransactionApproval: true
+  })
 
   const onboard = Onboard({
     wallets: [
@@ -191,12 +190,6 @@
         label: 'Ethereum',
         rpcUrl: `https://mainnet.infura.io/v3/${infura_key}`
       },
-      {
-        id: 3,
-        token: 'tROP',
-        label: 'Ropsten',
-        rpcUrl: `https://ropsten.infura.io/v3/${infura_key}`
-      },
       {
         id: '0x5',
         token: 'ETH',
@@ -293,7 +286,7 @@
         },
         position: 'topRight'
       }
-    }
+    },
     // containerElements: {
     // // El must be present at time of JS script execution
     // // See ../public/index.html for element example
@@ -301,8 +294,8 @@
     //   accountCenter: '#sample-container-el2'
     // },
     // Sign up for your free api key at www.Blocknative.com
-    // Add apiKey to test transaction notifications
-    // apiKey
+    apiKey,
+    theme: 'system'
   })
 
   // Subscribe to wallet updates
@@ -461,266 +454,14 @@
     console.log(verifyTypedData(domain, types, message, signature))
   }
 
-  const defaultStyling = {
-    '--background-color': '#ffffff',
-    '--text-color': '#1a1d26',
-    '--border-color': '#d0d4f7',
-    '--accent-background': '#ebebed',
-    '--accent-color': '#929bed',
-    '--accent-color-hover': '#eff1fc',
-    '--secondary-text-color': '#707481',
-    '--secondary-accent-background': '#242835'
-  }
-
-  const baseStyling = `--onboard-connect-sidebar-border-color: var(--border-color);
-  --onboard-connect-sidebar-background: var(--accent-background);
-  --onboard-connect-sidebar-color: var(--text-color);
-  --onboard-connect-sidebar-progress-background: var(--secondary-text-color);
-  --onboard-connect-sidebar-progress-color: var(--accent-color);
-  --onboard-connect-header-background: var(--background-color);
-  --onboard-connect-header-color: var(--text-color);
-  --onboard-main-scroll-container-background: var(--background-color);
-  --onboard-link-color: var(--accent-color);
-  --onboard-wallet-button-background: var(--background-color);
-  --onboard-wallet-button-background-hover: var(--accent-color-hover);
-  --onboard-wallet-button-border-color: var(--border-color);
-  --onboard-wallet-app-icon-border-color: var(--border-color);
-  --onboard-close-button-background: var(--accent-background);
-  --onboard-wallet-button-color-hover: var(--text-color);
-  --onboard-wallet-button-color: var(--text-color);
-
-  --account-center-minimized-background: var(--background-color);
-  --account-center-minimized-address-color: var(--text-color);
-  --account-center-minimized-balance-color: var(--secondary-text-color);
-  --account-center-minimized-chain-select-background: var(
-    --accent-color-hover
-  );
-  --account-center-maximized-info-section-background: var(
-    --background-color
-  );
-  --account-center-maximized-network-section-background: var(
-    --accent-background
-  );
-  --account-center-maximized-upper-background: var(
-    --secondary-accent-background
-  );
-  --account-center-maximized-address-color: var(--background-color);
-  --account-center-maximized-account-section-background-hover: var(
-    --text-color
-  );
-  --account-center-maximized-balance-color: var(--border-color);
-  --account-center-maximized-upper-action-color: var(--accent-color);
-  --account-center-maximized-network-text-color: var(
-    --secondary-accent-background
-  );
-  --account-center-maximized-info-section-background-color: var(
-    --background-color
-  );
-  --account-center-maximized-app-name-color: var(
-    --secondary-accent-background
-  );
-  --account-center-maximized-app-info-color: var(
-    --secondary-accent-background
-  );
-  --account-center-app-btn-background: var(--secondary-accent-background);
-  --account-center-app-btn-text-color: var(--background-color);
-
-  --notify-onboard-background: var(----secondary-accent-color);
-  --notify-onboard-transaction-status: var(--accent-background);
-  --notify-onboard-address-hash-color: var(--accent-color-hover);
-  --notify-onboard-anchor-color: var(--accent-color);
-  --notify-onboard-timer-color: var(--secondary-text-color);`
-
-  const styleToString = style => {
-    return Object.keys(style).reduce(
-      (acc, key) => acc + key + ': ' + style[key] + '; \n  ',
-      ''
-    )
-  }
-
-  async function copyStylingConfig() {
-    try {
-      const copy = await navigator.clipboard.writeText(copyableStyles)
-      return copy
-    } catch (err) {
-      console.error('Failed to copy: ', err)
-    }
-  }
-
-  let copyableStyles = `:root {\n  ${styleToString(
-    defaultStyling
-  )}${baseStyling}\n}`
-
-  const updateTheme = (e, targetStyle) => {
-    const iframe = document.getElementById('inlineFrameExample')
-    iframe.contentWindow.document.documentElement.style.setProperty(
-      targetStyle,
-      e.target.value
-    )
-
-    copyableStyles = `:root {\n  ${styleToString(
-      defaultStyling
-    )}${baseStyling}\n}`
-  }
-
-  let checked = false
-
-  const handleBackdrop = () => {
-    const iframe = document.getElementById('inlineFrameExample')
-
-    if (!checked) {
-      iframe.contentWindow.document.documentElement.style.setProperty(
-        '--onboard-modal-backdrop',
-        'rgba(0, 0, 0, 0)'
-      )
-    } else {
-      iframe.contentWindow.document.documentElement.style.setProperty(
-        '--onboard-modal-backdrop',
-        'rgba(0, 0, 0, 0.6)'
-      )
-    }
+  const themes = ['system', 'default', 'light', 'dark']
+  let selectedTheme = 'system'
+  const updateTheme = () => {
+    onboard.state.actions.updateTheme(selectedTheme)
   }
-
-  // Converts the image into a data URI
-  const readImage = file => {
-    const reader = new FileReader()
-    reader.addEventListener('load', event => {
-      uploaded_image = event.target.result
-      document.querySelector(
-        '#image_drop_area'
-      ).style.backgroundImage = `url(${uploaded_image})`
-    })
-    reader.readAsDataURL(file)
-  }
-
-  let hideForIframe = false
-  let uploaded_image
-  const handleImageDrop = () => {
-    if (window.location !== window.parent.location) {
-      if (image_drop_area) {
-        // Event listener for dragging the image over the div
-        const connectButton = window.document.getElementById('connectBtn')
-        connectButton.style.visibility = 'hidden'
-        image_drop_area.addEventListener('dragover', event => {
-          event.stopPropagation()
-          event.preventDefault()
-          // Style the drag-and-drop as a "copy file" operation.
-          event.dataTransfer.dropEffect = 'copy'
-        })
-
-        // Event listener for dropping the image inside the div
-        image_drop_area.addEventListener('drop', event => {
-          const image_drop_area_direction = document.querySelector(
-            '#image_drop_area_direction'
-          )
-          document.body.style.padding = 0
-          image_drop_area_direction.style.display = 'none'
-          connectButton.click()
-          connectButton.style.display = 'none'
-          event.stopPropagation()
-          event.preventDefault()
-          let fileList = event.dataTransfer.files
-
-          readImage(fileList[0])
-        })
-      }
-    }
-  }
-  const initIFrame = async () => {
-    if (window.location !== window.parent.location) {
-      return (hideForIframe = true)
-    }
-  }
-
-  onMount(async () => {
-    await initIFrame()
-    handleImageDrop()
-  })
 </script>
 
 <style>
-  :root {
-    --background-color: #ffffff; /* --white */
-    --text-color: #1a1d26; /* --gray-700 */
-    --border-color: #d0d4f7; /* --gray-100 taken from future mock */
-
-    --accent-background: #eff1fc; /* --gray-100 (currently gray-100 in connect modal) */
-    --accent-color: #929bed; /* --primary-400 */
-    --accent-color-hover: #eff1fc; /* --primary-200 */
-
-    /* Account Center & Notify */
-    --secondary-text-color: #707481; /* --gray-400 (balance and token name) */
-    --secondary-accent-background: #242835; /* --gray-600 (Upper background in maximized) */
-
-    /* --onboard-font-family-normal: System,monospace; */
-    --onboard-connect-sidebar-background: var(--accent-background);
-    --onboard-connect-sidebar-border-color: var(--border-color);
-    --onboard-close-button-background: var(--accent-background);
-    --onboard-connect-sidebar-color: var(--text-color);
-    --onboard-connect-sidebar-progress-background: var(
-      --secondary-text-color
-    ); /* defaults to gray-200 */
-    --onboard-connect-sidebar-progress-color: var(
-      --accent-color
-    ); /* defaults to  primary-600 */
-    --onboard-connect-header-background: var(--background-color);
-    --onboard-connect-header-color: var(--text-color);
-    --onboard-main-scroll-container-background: var(--background-color);
-    --onboard-link-color: var(--accent-color);
-    --onboard-wallet-button-background: var(--background-color);
-    --onboard-wallet-button-background-hover: var(--accent-color-hover);
-    --onboard-wallet-button-color-hover: var(--text-color);
-    --onboard-wallet-button-color: var(--text-color);
-    --onboard-wallet-button-border-color: var(--border-color);
-    --onboard-wallet-app-icon-border-color: var(--border-color);
-
-    --account-center-minimized-background: var(--background-color);
-    --account-center-minimized-address-color: var(--text-color);
-    --account-center-minimized-balance-color: var(--secondary-text-color);
-    --account-center-minimized-chain-select-background: var(
-      --accent-color-hover
-    );
-    --account-center-maximized-info-section-background: var(--background-color);
-    --account-center-maximized-network-section-background: var(
-      --accent-background
-    );
-    --account-center-maximized-upper-background: var(
-      --secondary-accent-background
-    );
-    --account-center-maximized-address-color: var(--background-color);
-    --account-center-maximized-account-section-background-hover: var(
-      --text-color
-    );
-    --account-center-maximized-balance-color: var(--border-color);
-    --account-center-maximized-upper-action-color: var(--accent-color);
-    --account-center-maximized-network-text-color: var(
-      --secondary-accent-background
-    );
-    --account-center-maximized-info-section-background-color: var(
-      --background-color
-    );
-    --account-center-maximized-app-name-color: var(
-      --secondary-accent-background
-    );
-    --account-center-maximized-app-info-color: var(
-      --secondary-accent-background
-    );
-    --account-center-app-btn-background: var(--secondary-accent-background);
-    --account-center-app-btn-text-color: var(--background-color);
-
-    --notify-onboard-background: var(--secondary-accent-background);
-    --notify-onboard-transaction-status: var(--accent-background);
-    --notify-onboard-address-hash-color: var(--accent-color-hover);
-    --notify-onboard-anchor-color: var(--accent-color);
-    --notify-onboard-timer-color: var(--secondary-text-color);
-
-    /*
-		NEEDS TARGET AS IT USES OPACITY:
-		--account-center-maximized-upper-action-background-hover
-		NEEDS UPDATES FOR DIFFERNT STYLING, DOESNT FIT BASIC VARIABLES ABOVE:
-		Notify status icons, icon backgrounds and icon borders
-	*/
-  }
   main {
     height: 100%;
   }
@@ -755,18 +496,6 @@
     align-items: end;
   }
 
-  .copy-styles-container {
-    display: flex;
-    flex-direction: row;
-    align-items: end;
-  }
-
-  .copy-styles-textarea {
-    width: 30rem;
-    height: 16rem;
-    margin: 0 0 8px;
-  }
-
   .sign-transaction-textarea {
     width: 24rem;
     height: 12rem;
@@ -782,206 +511,21 @@
     flex-direction: column;
     width: 15rem;
   }
-
-  .themes {
-    padding: 1rem;
-    border-radius: 4px;
-    margin: 0.5rem;
-    border: 1px solid gray;
-    width: fit-content;
-  }
-
-  .theming-container {
-    height: 16rem;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-    width: 54rem;
-    flex-wrap: wrap;
-    justify-content: space-around;
-  }
-
-  .theming-inputs-wrapper {
-    display: flex;
-    align-items: center;
-    width: 25rem;
-  }
-  .theming-inputs {
-    display: inline-flex;
-    overflow: hidden;
-    width: 2em;
-    height: 2em;
-    border-radius: 50%;
-    box-shadow: 1px 1px 3px 0px grey;
-    margin: 1em;
-  }
-  input[type='color'] {
-    padding: 0;
-    width: 150%;
-    height: 150%;
-    margin: -25%;
-  }
-  iframe {
-    height: 850px;
-    width: 1000px;
-    resize: both;
-    overflow: auto;
-    margin: 8px 8px 16px;
-  }
-  #image_drop_area {
-    width: 100%;
-    height: 100%;
-    background-position: center;
-    background-size: cover;
-    box-sizing: border-box;
-  }
-
-  .switch {
-    position: relative;
-    display: inline-block;
-    width: 60px;
-    height: 34px;
-  }
-
-  .switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  .slider {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: #ccc;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 34px;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: '';
-    height: 26px;
-    width: 26px;
-    left: 4px;
-    bottom: 4px;
-    background-color: white;
-    -webkit-transition: 0.4s;
-    transition: 0.4s;
-    border-radius: 50%;
-  }
-
-  input:checked + .slider {
-    background-color: #929bed;
-  }
-
-  input:checked + .slider {
-    box-shadow: 0 0 1px #929bed;
-  }
-
-  input:checked + .slider:before {
-    -webkit-transform: translateX(26px);
-    -ms-transform: translateX(26px);
-    transform: translateX(26px);
-  }
-
-  .backdrop-toggle {
-    display: flex;
-    align-items: center;
-    margin: 8px 8px 16px 4px;
-  }
-
-  .backdrop-toggle > label {
-    margin-right: 8px;
-  }
 </style>
 
-<svelte:window bind:innerWidth={windowWidth} />
-
 <main>
-  {#if hideForIframe}
-    <div id="image_drop_area">
-      <p id="image_drop_area_direction">
-        Drag and drop a screen shot of your site to customize styling.
-        <br />
-        Click color circles above to change the theme.
-      </p>
-      {#if uploaded_image}
-        <button on:click={() => onboard.connectWallet()}>Connect Wallet</button>
-        {#if $wallets$}
-          <div class="notify-chain-container">
-            <div class="notify-action-container">
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    type: 'hint',
-                    message: 'This is a custom DApp hint',
-                    autoDismiss: 0
-                  })}>Send Hint Notification</button
-              >
-              <button
-                on:click={() => {
-                  const { update, dismiss } =
-                    onboard.state.actions.customNotification({
-                      type: 'pending',
-                      message:
-                        'This is a custom DApp pending notification to use however you want',
-                      autoDismiss: 0
-                    })
-                  setTimeout(
-                    () =>
-                      update({
-                        eventCode: 'dbUpdateSuccess',
-                        message: 'Updated status for custom notification',
-                        type: 'success',
-                        autoDismiss: 0
-                      }),
-                    4000
-                  )
-                }}>Send Success Notification</button
-              >
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    message:
-                      'This is a custom DApp success notification to use however you want',
-                    autoDismiss: 0,
-                    type: 'pending'
-                  })}>Send Pending Notification</button
-              >
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    type: 'error',
-                    message:
-                      'This is a custom DApp Error notification to use however you want',
-                    autoDismiss: 0
-                  })}>Send Error Notification</button
-              >
-              <button
-                on:click={() =>
-                  onboard.state.actions.customNotification({
-                    message:
-                      'This is a custom non-descript DApp notification to use however you want',
-                    autoDismiss: 0
-                  })}>Send DApp Notification</button
-              >
-            </div>
-          </div>
-        {/if}
-      {/if}
-    </div>
-  {/if}
   <div class="cta">
     <button on:click={() => onboard.connectWallet()} id="connectBtn"
       >Connect Wallet</button
     >
-
-    {#if $wallets$ && !hideForIframe}
+    <select bind:value={selectedTheme} on:change={() => updateTheme()}>
+      {#each themes as theme}
+        <option value={theme}>
+          {theme}
+        </option>
+      {/each}
+    </select>
+    {#if $wallets$}
       <button
         class="updateBalanceBtn"
         on:click={() => {
@@ -1061,7 +605,7 @@
       </div>
     {/if}
   </div>
-  {#if $wallets$ && !hideForIframe}
+  {#if $wallets$}
     {#each $wallets$ as { icon, label, accounts, chains, provider, instance }}
       <div class="connected-wallet">
         <div class="flex-centered" style="width: 10rem;">
@@ -1168,53 +712,4 @@
       </div>
     {/each}
   {/if}
-  {#if !hideForIframe && windowWidth > 1040}
-    <div class="themes">
-      <label for="Theme">Click Colored Circles to Set Theme: </label>
-      <div class="theming-container">
-        {#each Object.keys(defaultStyling) as target}
-          <div class="theming-inputs-wrapper">
-            <div class="theming-inputs">
-              <input
-                type="color"
-                name="Theme"
-                bind:value={defaultStyling[target]}
-                on:input={e => updateTheme(e, target)}
-              />
-            </div>
-            <span class="text" id="current-theme"
-              >{target} : {defaultStyling[target]}</span
-            >
-          </div>
-        {/each}
-      </div>
-      <div class="backdrop-toggle">
-        <label class="switch">
-          <input
-            type="checkbox"
-            on:change={() => handleBackdrop()}
-            bind:checked
-          />
-          <span class="slider" />
-        </label>
-        Disabled Backdrop for Styling
-      </div>
-      <div class="copy-styles-container">
-        <textarea
-          readonly
-          bind:value={copyableStyles}
-          class="copy-styles-textarea"
-        />
-        <button on:click={async () => await copyStylingConfig()}>
-          Copy Styling Config
-        </button>
-      </div>
-    </div>
-    <iframe
-      id="inlineFrameExample"
-      name="inlineFrameExample"
-      title="Inline Frame Example"
-      src={window.location.href}
-    />
-  {/if}
 </main>
diff --git a/packages/gnosis/package.json b/packages/gnosis/package.json
index b9ffc7994..8ca0d6b60 100644
--- a/packages/gnosis/package.json
+++ b/packages/gnosis/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/gnosis",
-  "version": "2.1.5",
+  "version": "2.1.6-alpha.1",
   "description": "Gnosis Safe module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
diff --git a/packages/gnosis/src/icon.ts b/packages/gnosis/src/icon.ts
index 1bd36fd17..2276e406c 100644
--- a/packages/gnosis/src/icon.ts
+++ b/packages/gnosis/src/icon.ts
@@ -1,5 +1,5 @@
 export default `
   <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M21.757 11.998h-2.485c-.742 0-1.343.579-1.343 1.293v3.47c0 .714-.602 1.293-1.344 1.293H6.699c-.743 0-1.344.578-1.344 1.292v2.391c0 .714.601 1.293 1.344 1.293h10.458c.742 0 1.335-.579 1.335-1.293V19.82c0-.714.602-1.22 1.344-1.22h1.92c.743 0 1.344-.58 1.344-1.293v-4.03c0-.714-.601-1.278-1.343-1.278ZM5.355 7.249c0-.714.6-1.293 1.343-1.293h9.88c.743 0 1.344-.579 1.344-1.293v-2.39c0-.714-.601-1.293-1.344-1.293H6.125c-.742 0-1.343.579-1.343 1.293v1.842c0 .714-.602 1.292-1.344 1.292H1.526C.784 5.407.182 5.986.182 6.7v4.034c0 .714.604 1.264 1.346 1.264h2.485c.743 0 1.344-.579 1.344-1.293L5.355 7.25ZM10.472 9.485h2.387c.778 0 1.409.608 1.409 1.356v2.296c0 .748-.632 1.356-1.41 1.356h-2.386c-.778 0-1.409-.608-1.409-1.356v-2.296c0-.749.632-1.356 1.409-1.356Z" fill="currentColor"/>
+      <path d="M21.757 11.998h-2.485c-.742 0-1.343.579-1.343 1.293v3.47c0 .714-.602 1.293-1.344 1.293H6.699c-.743 0-1.344.578-1.344 1.292v2.391c0 .714.601 1.293 1.344 1.293h10.458c.742 0 1.335-.579 1.335-1.293V19.82c0-.714.602-1.22 1.344-1.22h1.92c.743 0 1.344-.58 1.344-1.293v-4.03c0-.714-.601-1.278-1.343-1.278ZM5.355 7.249c0-.714.6-1.293 1.343-1.293h9.88c.743 0 1.344-.579 1.344-1.293v-2.39c0-.714-.601-1.293-1.344-1.293H6.125c-.742 0-1.343.579-1.343 1.293v1.842c0 .714-.602 1.292-1.344 1.292H1.526C.784 5.407.182 5.986.182 6.7v4.034c0 .714.604 1.264 1.346 1.264h2.485c.743 0 1.344-.579 1.344-1.293L5.355 7.25ZM10.472 9.485h2.387c.778 0 1.409.608 1.409 1.356v2.296c0 .748-.632 1.356-1.41 1.356h-2.386c-.778 0-1.409-.608-1.409-1.356v-2.296c0-.749.632-1.356 1.409-1.356Z" fill="var(--w3o-text-color, currentColor)"/>
   </svg>
 `
diff --git a/packages/hw-common/package.json b/packages/hw-common/package.json
index 788181bb4..170dc6671 100644
--- a/packages/hw-common/package.json
+++ b/packages/hw-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/hw-common",
-  "version": "2.0.5-alpha.1",
+  "version": "2.1.0-alpha.1",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
diff --git a/packages/hw-common/src/account-select.ts b/packages/hw-common/src/account-select.ts
index 7bc2be2f3..1882e51ea 100644
--- a/packages/hw-common/src/account-select.ts
+++ b/packages/hw-common/src/account-select.ts
@@ -59,7 +59,7 @@ const mountAccountSelect = (
 
   target.innerHTML = `
     <style>
-      :host {  
+      :host {
         /* COLORS */
         --white: white;
         --black: black;
@@ -96,8 +96,14 @@ const mountAccountSelect = (
 
         /* SHADOWS */
         --shadow-1: 0px 4px 12px rgba(0, 0, 0, 0.1);
-      }
 
+        /* THEMING */
+        --background-color: var(--w3o-background-color, #FFF);
+        --foreground-color: var(--w3o-foreground-color);
+        --text-color: var(--w3o-text-color, inherit);
+        --border-color: var(--w3o-border-color, var(--gray-200));
+        --action-color: var(--w3o-action-color, var(--primary-500));
+      }
     </style>
   `
 
diff --git a/packages/hw-common/src/elements/AddressTable.svelte b/packages/hw-common/src/elements/AddressTable.svelte
index 73cadf03f..711cc08d1 100644
--- a/packages/hw-common/src/elements/AddressTable.svelte
+++ b/packages/hw-common/src/elements/AddressTable.svelte
@@ -21,10 +21,8 @@
   }
 
   table thead {
-    position: sticky;
-    inset-block-start: 0; /* "top" */
     box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
-    background: var(--account-select-white, var(--onboard-white, var(--white)));
+    background: var(--account-select-background-color, var(--foreground-color));
   }
 
   th,
@@ -34,12 +32,6 @@
   }
 
   td {
-    font-family: var(
-      --account-select-font-family-normal,
-      var(--font-family-normal)
-    );
-    font-style: normal;
-    font-weight: normal;
     font-size: var(
       --account-select-font-size-6,
       var(--onboard-font-size-6, var(--font-size-6))
@@ -59,7 +51,7 @@
       --account-select-primary-100,
       var(--onboard-primary-100, var(--primary-100))
     );
-    color: var(--account-select-black, var(--onboard-black, var(--black)));
+    color: var(--account-select-text-color, var(--onboard-black, var(--black)));
   }
 
   .address-table {
diff --git a/packages/hw-common/src/elements/CloseButton.svelte b/packages/hw-common/src/elements/CloseButton.svelte
index 699d77ed4..1a1a944a7 100644
--- a/packages/hw-common/src/elements/CloseButton.svelte
+++ b/packages/hw-common/src/elements/CloseButton.svelte
@@ -3,33 +3,48 @@
 </script>
 
 <style>
-  .close-button-container {
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
   .close-button {
-    width: 2rem;
-    height: 2rem;
-    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
     display: flex;
-    justify-content: center;
     align-items: center;
-    padding: 0.4rem;
-    border-radius: 40px;
-    color: var(--onboard-gray-400, var(--gray-400));
-    background: var(--onboard-white, var(--white));
+    justify-content: center;
+    height: 2rem;
+    width: 2rem;
+    border-radius: 2rem;
+    cursor: pointer;
+    color: var(--onboard-close-button-color, inherit);
   }
-  .close-icon {
-    width: 14px;
+
+  .close-button:hover::before {
+    opacity: 0.2;
+  }
+  .close-button:hover .svg-box {
+    opacity: 1;
+  }
+
+  .close-button::before {
+    content: '';
+    position: absolute;
+    height: inherit;
+    width: inherit;
+    opacity: 0.1;
+    background: currentColor;
+    transition: 300ms ease-in-out opacity;
+  }
+
+  .svg-box {
     display: flex;
-    align-items: center;
+    position: absolute;
+    height: 14px;
+    width: 14px;
+    opacity: 0.6;
+    transition: 300ms ease-in-out opacity;
   }
 </style>
 
 <div class="close-button-container">
   <div class="close-button">
-    <div class="close-icon">{@html closeIcon}</div>
+    <div class="svg-box">{@html closeIcon}</div>
   </div>
 </div>
diff --git a/packages/hw-common/src/elements/TableHeader.svelte b/packages/hw-common/src/elements/TableHeader.svelte
index b79abb05d..4c1aeb423 100644
--- a/packages/hw-common/src/elements/TableHeader.svelte
+++ b/packages/hw-common/src/elements/TableHeader.svelte
@@ -33,18 +33,8 @@
   }
 
   .scan-accounts-btn {
-    line-height: var(
-      --account-select-font-line-height-1,
-      var(--onboard-line-height-1, var(--line-height-1))
-    );
-    background: var(
-      --account-select-gray-500,
-      var(--onboard-gray-500, var(--gray-500))
-    );
-    color: var(
-      --account-select-primary-100,
-      var(--onboard-primary-100, var(--primary-100))
-    );
+    background: var(--account-select-gray-500, var(--action-color));
+    color: var(--account-select-primary-100, inherit);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -74,7 +64,7 @@
 
   input:disabled {
     background: var(
-      --account-select-gray-100,
+      --account-select-accent-background-color,
       var(--onboard-gray-100, var(--gray-100))
     );
   }
@@ -82,7 +72,7 @@
   input[type='checkbox'] {
     -webkit-appearance: none;
     width: auto;
-    background: var(--account-select-white, var(--onboard-white, var(--white)));
+    background: var(--account-select-background-color, var(--onboard-white, var(--white)));
     border: 1px solid
       var(--account-select-gray-300, var(--onboard-gray-300, var(--gray-300)));
     padding: 0.5em;
@@ -143,10 +133,6 @@
       --account-select-danger-500,
       var(--onboard-danger-500, var(--danger-500))
     );
-    font-family: var(
-      --account-select-font-family-light,
-      var(--font-family-light)
-    );
     font-size: var(--account-select-font-size-7, var(--font-size-7));
     max-width: 15rem;
     line-height: 1;
@@ -162,12 +148,7 @@
     align-items: center;
     padding: 0.5rem;
     border-radius: 0.4rem 0.4rem 0 0;
-    background: var(
-      --account-select-gray-100,
-      var(--onboard-gray-100, var(--gray-100))
-    );
-    border-bottom: 1px solid
-      var(--account-select-gray-200, var(--onboard-gray-200, var(--gray-200)));
+    background: var(--account-select-accent-background-color, var(--border-color));
   }
 
   .cursor-pointer {
diff --git a/packages/hw-common/src/views/AccountSelect.svelte b/packages/hw-common/src/views/AccountSelect.svelte
index 8eff4c217..1f7b3f6c0 100644
--- a/packages/hw-common/src/views/AccountSelect.svelte
+++ b/packages/hw-common/src/views/AccountSelect.svelte
@@ -123,17 +123,8 @@
       --account-select-font-size-5,
       var(--onboard-font-size-5, var(--font-size-5))
     );
-    line-height: var(
-      --account-select-font-line-height-1,
-      var(--onboard-font-line-height-1, var(--font-line-height-1))
-    );
-    color: var(
-      --account-select-gray-600,
-      var(--onboard-gray-600, var(--gray-600))
-    );
     transition: all 200ms ease-in-out;
-    border: 2px solid
-      var(--account-select-gray-200, var(--onboard-gray-200, var(--gray-200)));
+    border: 2px solid var(--account-select-gray-200, var(--border-color));
     box-sizing: border-box;
     height: 3rem;
     -ms-overflow-style: none;
@@ -254,7 +245,7 @@
 
   select:disabled {
     background: var(
-      --account-select-gray-100,
+      --account-select-accent-background-color,
       var(--onboard-gray-100, var(--gray-100))
     );
   }
@@ -269,11 +260,8 @@
   }
 
   .container {
-    font-family: var(
-      --account-select-font-family-normal,
-      var(--onboard-font-family-normal, var(--font-family-normal))
-    );
-    color: var(--account-select-black, var(--onboard-black, var(--black)));
+    font-family: var(--onboard-font-family-normal, var(--font-family-normal));
+    color: var(--account-select-text-color, var(--text-color));
     position: fixed;
     top: 0;
     right: 0;
@@ -295,9 +283,12 @@
     flex-flow: column;
     display: flex;
     max-height: 51.75rem;
-    background: var(--account-select-white, var(--onboard-white, var(--white)));
+    background: var(
+      --account-select-background-color,
+      var(--background-color)
+    );
     box-shadow: var(
-      --account-select-shadow-1,
+      --account-select-shadow,
       var(--onboard-shadow-1, var(--shadow-1))
     );
     border-radius: 1.5rem;
@@ -327,10 +318,7 @@
 
   .connect-wallet-header {
     position: relative;
-    background: var(
-      --account-select-gray-100,
-      var(--onboard-gray-100, var(--gray-100))
-    );
+    border-bottom: 1px solid var(--border-color, transparent);
     border-radius: 1.5rem 1.5rem 0 0;
     display: flex;
     justify-content: space-between;
@@ -348,10 +336,6 @@
   }
 
   .control-label {
-    font-family: var(
-      --account-select-font-family-normal,
-      var(--onboard-font-family-normal, var(--font-family-normal))
-    );
     font-style: normal;
     font-weight: bold;
     font-size: var(
@@ -370,10 +354,7 @@
       --account-select-margin-5,
       var(--onboard-margin-5, var(--margin-5))
     );
-    color: var(
-      --account-select-gray-700,
-      var(--onboard-gray-700, var(--gray-700))
-    );
+    color: var(--account-select-gray-700, inherit);
   }
 
   .asset-select {
@@ -396,19 +377,14 @@
     );
   }
 
-  .input-select {
-    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23242835%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E),
-      linear-gradient(to bottom, transparent 0%, transparent 100%);
-    background-repeat: no-repeat, repeat;
-    background-position: center;
-    background-size: 0.65em auto, 100%;
+  .hidden-input-select {
     position: absolute;
     top: 2.7rem;
     right: 0.2rem;
     width: 2.5rem;
     height: 2.5rem;
-    background: var(--account-select-white, var(--onboard-white, var(--white)));
-    border-radius: 1rem;
+    background: transparent;
+    cursor: pointer;
   }
 
   .asset-container {
@@ -425,19 +401,13 @@
   }
 
   .table-container {
-    background: var(--account-select-white, var(--onboard-white, var(--white)));
-    border: 2px solid
-      var(--account-select-gray-200, var(--onboard-gray-200, var(--gray-200)));
+    border: 2px solid var(--account-select-gray-200, var(--border-color));
     box-sizing: border-box;
     border-radius: 0.5rem;
   }
 
   .address-found-count {
-    padding: 1rem;
-    color: var(
-      --account-select-gray-500,
-      var(--onboard-gray-500, var(--gray-500))
-    );
+    padding: 0 2rem;
   }
   @media all and (min-width: 768px) {
     .hardware-connect-modal {
@@ -486,7 +456,7 @@
             on:change={handleCustomPath}
           />
           <span
-            class="input-select"
+            class="hidden-input-select"
             on:click={toggleDerivationPathToDropdown}
           />
         {:else if !customDerivationPath}
diff --git a/packages/keepkey/package.json b/packages/keepkey/package.json
index 4c8800b37..00d85bc37 100644
--- a/packages/keepkey/package.json
+++ b/packages/keepkey/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/keepkey",
-  "version": "2.3.3-alpha.1",
+  "version": "2.3.3-alpha.2",
   "description": "KeepKey hardware wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -64,7 +64,7 @@
     "@shapeshiftoss/hdwallet-core": "^1.15.2",
     "@shapeshiftoss/hdwallet-keepkey-webusb": "^1.15.2",
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/hw-common": "^2.0.5-alpha.1",
+    "@web3-onboard/hw-common": "^2.1.0-alpha.1",
     "ethereumjs-util": "^7.1.3"
   }
 }
diff --git a/packages/keepkey/src/icon.ts b/packages/keepkey/src/icon.ts
index 4ace121f2..3cf6e86c0 100644
--- a/packages/keepkey/src/icon.ts
+++ b/packages/keepkey/src/icon.ts
@@ -1,3 +1,3 @@
 export default `
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0, 0, 400,325.18703241895264"><g><path id="keep-path0" d="M2.244 1.029 C -1.296 2.452,-1.242 21.945,2.303 21.945 C 9.009 21.945,8.450 10.864,8.740 149.545 L 9.000 274.314 19.463 274.314 L 29.925 274.314 29.925 255.362 L 29.925 236.409 37.356 236.409 L 44.786 236.409 59.550 255.349 L 74.314 274.289 84.539 274.301 L 94.763 274.314 94.763 264.838 L 94.763 255.362 90.429 255.362 C 86.172 255.362,85.980 255.213,79.809 247.132 C 76.352 242.606,70.857 235.447,67.599 231.224 L 61.676 223.544 73.400 210.027 L 85.124 196.509 89.944 196.509 L 94.763 196.509 94.763 186.534 L 94.763 176.559 84.539 176.574 L 74.314 176.590 59.365 193.532 L 44.415 210.474 37.170 210.474 L 29.925 210.474 29.925 160.100 L 29.925 109.726 37.341 109.726 L 44.757 109.726 59.456 128.678 L 74.154 147.631 84.459 147.631 L 94.763 147.631 94.763 138.155 L 94.763 128.678 90.395 128.678 L 86.028 128.678 74.767 113.965 C 68.573 105.873,63.095 98.712,62.593 98.053 C 61.964 97.226,65.316 92.664,73.403 83.340 L 85.124 69.825 89.944 69.825 L 94.763 69.825 94.763 59.850 L 94.763 49.875 84.539 49.891 L 74.314 49.907 59.365 66.849 L 44.415 83.791 37.170 83.791 L 29.925 83.791 29.925 47.283 C 29.925 6.077,29.837 5.512,22.845 1.945 C 18.722 -0.158,6.545 -0.700,2.244 1.029 M308.479 49.043 L 304.239 49.993 304.239 59.703 L 304.239 69.413 307.467 70.367 C 313.294 72.091,313.186 70.844,313.202 136.409 L 313.217 196.509 323.691 196.509 L 334.165 196.509 334.165 167.588 L 334.165 138.667 338.603 142.054 C 356.769 155.921,386.924 149.717,396.150 130.215 L 399.001 124.190 398.996 99.252 C 398.991 72.207,398.598 69.435,393.739 62.174 C 383.216 46.449,354.715 43.753,337.416 56.846 L 332.344 60.685 331.130 57.754 C 327.955 50.089,319.069 46.672,308.479 49.043 M136.763 50.456 C 114.954 56.321,103.498 75.920,105.019 104.763 C 107.201 146.114,139.276 161.431,181.297 141.189 C 192.114 135.978,192.093 136.049,185.819 126.422 C 183.231 122.451,181.072 119.100,181.021 118.976 C 180.970 118.852,176.762 120.872,171.669 123.465 C 151.756 133.605,131.422 127.651,127.303 110.474 L 126.645 107.731 160.062 107.731 L 193.478 107.731 194.133 105.121 C 196.535 95.551,192.210 73.042,186.275 64.221 C 177.440 51.093,156.275 45.209,136.763 50.456 M238.903 50.204 C 217.452 55.678,206.535 72.658,206.499 100.604 C 206.441 144.920,239.497 162.365,283.042 140.997 C 293.868 135.685,293.664 136.405,287.156 126.492 C 281.342 117.636,282.003 118.064,278.259 120.731 C 259.429 134.138,232.287 128.782,228.812 110.973 L 228.180 107.731 261.582 107.731 L 294.985 107.731 295.550 101.502 C 298.937 64.139,273.733 41.315,238.903 50.204 M163.092 71.701 C 169.454 74.623,173.407 80.812,173.522 88.030 L 173.566 90.773 150.057 90.773 L 126.549 90.773 127.218 88.529 C 131.611 73.806,149.451 65.437,163.092 71.701 M266.498 72.611 C 270.656 75.180,274.011 80.935,274.470 86.284 L 274.813 90.274 251.621 90.542 C 225.960 90.838,226.730 91.054,230.037 84.489 C 236.476 71.706,255.176 65.614,266.498 72.611 M368.059 72.070 C 376.258 76.259,376.559 77.220,376.559 99.252 C 376.559 117.184,376.412 118.757,374.499 121.373 C 367.219 131.329,345.435 130.487,337.389 119.938 C 334.197 115.754,332.771 92.671,335.157 83.811 C 338.263 72.273,356.042 65.929,368.059 72.070 M139.152 177.908 C 117.908 183.429,106.763 200.642,106.763 227.930 C 106.763 272.611,139.775 290.240,183.292 268.799 C 194.103 263.472,193.923 264.100,187.465 254.264 L 182.412 246.566 173.431 251.213 C 154.352 261.085,132.258 254.830,129.068 238.653 L 128.429 235.411 161.841 235.411 L 195.254 235.411 195.920 229.517 C 200.073 192.811,173.781 168.908,139.152 177.908 M201.496 186.534 L 201.496 196.509 206.427 196.509 L 211.357 196.509 211.664 224.688 C 212.008 256.314,212.404 258.222,220.255 266.073 C 231.620 277.439,254.853 278.242,270.361 267.805 L 275.312 264.474 275.312 282.240 C 275.312 301.472,275.269 301.628,269.640 303.133 L 266.833 303.884 266.833 313.724 L 266.833 323.564 270.324 324.470 C 276.211 325.999,287.769 324.955,290.972 322.606 C 297.501 317.817,297.254 320.862,297.255 245.137 L 297.257 176.559 281.297 176.559 L 265.337 176.559 265.337 186.534 L 265.337 196.509 270.324 196.509 L 275.312 196.509 275.312 217.890 C 275.312 230.615,274.881 240.409,274.248 242.080 C 268.930 256.116,242.366 258.974,234.926 246.310 C 233.002 243.036,232.932 241.504,233.265 209.726 L 233.612 176.559 217.554 176.559 L 201.496 176.559 201.496 186.534 M166.990 200.442 C 171.213 203.052,174.302 208.469,174.749 214.050 L 175.062 217.955 151.870 218.223 C 126.209 218.519,126.979 218.735,130.286 212.170 C 136.798 199.242,155.420 193.291,166.990 200.442 " stroke="none" fill="currentColor" fill-rule="evenodd"/></g></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0, 0, 400,325.18703241895264"><g><path id="keep-path0" d="M2.244 1.029 C -1.296 2.452,-1.242 21.945,2.303 21.945 C 9.009 21.945,8.450 10.864,8.740 149.545 L 9.000 274.314 19.463 274.314 L 29.925 274.314 29.925 255.362 L 29.925 236.409 37.356 236.409 L 44.786 236.409 59.550 255.349 L 74.314 274.289 84.539 274.301 L 94.763 274.314 94.763 264.838 L 94.763 255.362 90.429 255.362 C 86.172 255.362,85.980 255.213,79.809 247.132 C 76.352 242.606,70.857 235.447,67.599 231.224 L 61.676 223.544 73.400 210.027 L 85.124 196.509 89.944 196.509 L 94.763 196.509 94.763 186.534 L 94.763 176.559 84.539 176.574 L 74.314 176.590 59.365 193.532 L 44.415 210.474 37.170 210.474 L 29.925 210.474 29.925 160.100 L 29.925 109.726 37.341 109.726 L 44.757 109.726 59.456 128.678 L 74.154 147.631 84.459 147.631 L 94.763 147.631 94.763 138.155 L 94.763 128.678 90.395 128.678 L 86.028 128.678 74.767 113.965 C 68.573 105.873,63.095 98.712,62.593 98.053 C 61.964 97.226,65.316 92.664,73.403 83.340 L 85.124 69.825 89.944 69.825 L 94.763 69.825 94.763 59.850 L 94.763 49.875 84.539 49.891 L 74.314 49.907 59.365 66.849 L 44.415 83.791 37.170 83.791 L 29.925 83.791 29.925 47.283 C 29.925 6.077,29.837 5.512,22.845 1.945 C 18.722 -0.158,6.545 -0.700,2.244 1.029 M308.479 49.043 L 304.239 49.993 304.239 59.703 L 304.239 69.413 307.467 70.367 C 313.294 72.091,313.186 70.844,313.202 136.409 L 313.217 196.509 323.691 196.509 L 334.165 196.509 334.165 167.588 L 334.165 138.667 338.603 142.054 C 356.769 155.921,386.924 149.717,396.150 130.215 L 399.001 124.190 398.996 99.252 C 398.991 72.207,398.598 69.435,393.739 62.174 C 383.216 46.449,354.715 43.753,337.416 56.846 L 332.344 60.685 331.130 57.754 C 327.955 50.089,319.069 46.672,308.479 49.043 M136.763 50.456 C 114.954 56.321,103.498 75.920,105.019 104.763 C 107.201 146.114,139.276 161.431,181.297 141.189 C 192.114 135.978,192.093 136.049,185.819 126.422 C 183.231 122.451,181.072 119.100,181.021 118.976 C 180.970 118.852,176.762 120.872,171.669 123.465 C 151.756 133.605,131.422 127.651,127.303 110.474 L 126.645 107.731 160.062 107.731 L 193.478 107.731 194.133 105.121 C 196.535 95.551,192.210 73.042,186.275 64.221 C 177.440 51.093,156.275 45.209,136.763 50.456 M238.903 50.204 C 217.452 55.678,206.535 72.658,206.499 100.604 C 206.441 144.920,239.497 162.365,283.042 140.997 C 293.868 135.685,293.664 136.405,287.156 126.492 C 281.342 117.636,282.003 118.064,278.259 120.731 C 259.429 134.138,232.287 128.782,228.812 110.973 L 228.180 107.731 261.582 107.731 L 294.985 107.731 295.550 101.502 C 298.937 64.139,273.733 41.315,238.903 50.204 M163.092 71.701 C 169.454 74.623,173.407 80.812,173.522 88.030 L 173.566 90.773 150.057 90.773 L 126.549 90.773 127.218 88.529 C 131.611 73.806,149.451 65.437,163.092 71.701 M266.498 72.611 C 270.656 75.180,274.011 80.935,274.470 86.284 L 274.813 90.274 251.621 90.542 C 225.960 90.838,226.730 91.054,230.037 84.489 C 236.476 71.706,255.176 65.614,266.498 72.611 M368.059 72.070 C 376.258 76.259,376.559 77.220,376.559 99.252 C 376.559 117.184,376.412 118.757,374.499 121.373 C 367.219 131.329,345.435 130.487,337.389 119.938 C 334.197 115.754,332.771 92.671,335.157 83.811 C 338.263 72.273,356.042 65.929,368.059 72.070 M139.152 177.908 C 117.908 183.429,106.763 200.642,106.763 227.930 C 106.763 272.611,139.775 290.240,183.292 268.799 C 194.103 263.472,193.923 264.100,187.465 254.264 L 182.412 246.566 173.431 251.213 C 154.352 261.085,132.258 254.830,129.068 238.653 L 128.429 235.411 161.841 235.411 L 195.254 235.411 195.920 229.517 C 200.073 192.811,173.781 168.908,139.152 177.908 M201.496 186.534 L 201.496 196.509 206.427 196.509 L 211.357 196.509 211.664 224.688 C 212.008 256.314,212.404 258.222,220.255 266.073 C 231.620 277.439,254.853 278.242,270.361 267.805 L 275.312 264.474 275.312 282.240 C 275.312 301.472,275.269 301.628,269.640 303.133 L 266.833 303.884 266.833 313.724 L 266.833 323.564 270.324 324.470 C 276.211 325.999,287.769 324.955,290.972 322.606 C 297.501 317.817,297.254 320.862,297.255 245.137 L 297.257 176.559 281.297 176.559 L 265.337 176.559 265.337 186.534 L 265.337 196.509 270.324 196.509 L 275.312 196.509 275.312 217.890 C 275.312 230.615,274.881 240.409,274.248 242.080 C 268.930 256.116,242.366 258.974,234.926 246.310 C 233.002 243.036,232.932 241.504,233.265 209.726 L 233.612 176.559 217.554 176.559 L 201.496 176.559 201.496 186.534 M166.990 200.442 C 171.213 203.052,174.302 208.469,174.749 214.050 L 175.062 217.955 151.870 218.223 C 126.209 218.519,126.979 218.735,130.286 212.170 C 136.798 199.242,155.420 193.291,166.990 200.442 " stroke="none" fill="var(--w3o-text-color, currentColor)" fill-rule="evenodd"/></g></svg>
 `
diff --git a/packages/keystone/package.json b/packages/keystone/package.json
index b82eb5eb0..bbbdac811 100644
--- a/packages/keystone/package.json
+++ b/packages/keystone/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/keystone",
-  "version": "2.3.3-alpha.1",
+  "version": "2.3.3-alpha.2",
   "description": "Keystone hardware wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -59,6 +59,6 @@
     "@ethersproject/providers": "^5.5.0",
     "@keystonehq/eth-keyring": "^0.14.00.3",
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/hw-common": "^2.0.5-alpha.1"
+    "@web3-onboard/hw-common": "^2.1.0-alpha.1"
   }
 }
diff --git a/packages/keystone/src/icon.ts b/packages/keystone/src/icon.ts
index 4d39bfc91..02cf2556e 100644
--- a/packages/keystone/src/icon.ts
+++ b/packages/keystone/src/icon.ts
@@ -1,3 +1,3 @@
 export default `
-  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0, 0, 400,400"><g><path d="M216.167 223.335 C 207.555 224.855,202.555 234.774,206.463 242.583 C 207.709 245.073,208.214 245.592,243.517 280.709 C 254.924 292.055,256.790 293.740,259.095 294.770 C 259.455 294.930,260.200 295.267,260.750 295.516 C 267.628 298.640,276.813 298.064,283.083 294.115 C 285.806 292.400,285.719 292.482,300.853 277.475 C 304.703 273.657,308.843 269.561,310.052 268.371 C 313.108 265.364,314.218 264.176,314.735 263.357 C 314.980 262.969,315.421 262.332,315.715 261.941 C 316.377 261.062,317.162 259.500,317.820 257.750 C 321.680 247.489,317.971 236.530,308.133 229.126 C 306.231 227.695,301.895 225.295,300.883 225.113 C 300.718 225.084,299.863 224.825,298.982 224.538 C 298.102 224.251,296.639 223.846,295.732 223.638 L 294.083 223.259 255.500 223.231 C 234.279 223.216,216.579 223.263,216.167 223.335 " stroke="none" fill="#2464fc" fill-rule="evenodd"></path><path id="path1" d="M190.852 43.082 C 186.086 44.155,182.177 47.017,179.781 51.186 C 179.339 51.955,178.634 53.183,178.213 53.917 C 177.792 54.650,177.109 55.813,176.693 56.500 C 176.278 57.188,175.671 58.250,175.344 58.861 C 175.017 59.472,174.285 60.749,173.717 61.699 C 173.149 62.649,172.631 63.574,172.565 63.754 C 172.500 63.935,172.203 64.458,171.905 64.917 C 171.608 65.375,170.867 66.644,170.258 67.736 C 169.649 68.828,169.014 69.915,168.848 70.152 C 168.682 70.389,168.049 71.496,167.443 72.611 C 166.837 73.726,166.116 74.972,165.841 75.379 C 165.567 75.786,165.189 76.448,165.001 76.851 C 164.814 77.254,164.287 78.183,163.831 78.917 C 163.375 79.650,162.849 80.568,162.661 80.956 C 162.473 81.345,161.960 82.245,161.520 82.956 C 161.080 83.668,160.362 84.925,159.924 85.750 C 159.486 86.575,159.034 87.362,158.920 87.500 C 158.806 87.638,158.526 88.087,158.298 88.500 C 157.454 90.027,155.961 92.606,155.501 93.333 C 155.240 93.746,155.020 94.210,155.013 94.365 C 155.006 94.520,154.935 94.687,154.857 94.736 C 154.679 94.846,152.879 97.844,152.448 98.750 C 152.273 99.117,151.887 99.792,151.589 100.250 C 151.291 100.708,150.542 101.983,149.925 103.083 C 148.787 105.110,147.939 106.587,146.636 108.811 C 146.240 109.486,145.617 110.589,145.250 111.262 C 144.883 111.936,144.125 113.258,143.565 114.202 C 143.005 115.145,142.501 116.049,142.445 116.210 C 142.388 116.372,142.013 117.009,141.611 117.627 C 141.209 118.245,140.520 119.425,140.081 120.250 C 139.642 121.075,139.080 122.050,138.832 122.417 C 138.583 122.783,138.059 123.683,137.666 124.417 C 137.273 125.150,136.556 126.401,136.072 127.197 C 135.588 127.993,135.037 128.968,134.848 129.364 C 134.658 129.759,134.056 130.796,133.510 131.667 C 132.964 132.537,132.513 133.332,132.509 133.432 C 132.504 133.533,132.210 134.063,131.857 134.610 C 131.503 135.158,130.740 136.463,130.161 137.511 C 129.582 138.559,128.851 139.820,128.535 140.313 C 128.220 140.806,127.816 141.519,127.638 141.897 C 127.459 142.274,126.945 143.183,126.495 143.917 C 126.045 144.650,125.460 145.662,125.196 146.167 C 124.931 146.671,124.305 147.758,123.804 148.583 C 123.304 149.408,122.648 150.571,122.348 151.167 C 122.047 151.762,121.704 152.362,121.584 152.500 C 121.464 152.637,120.825 153.725,120.164 154.917 C 119.503 156.108,118.717 157.458,118.419 157.917 C 118.121 158.375,117.731 159.050,117.554 159.417 C 117.376 159.783,116.777 160.833,116.223 161.750 C 115.669 162.667,115.055 163.754,114.859 164.167 C 114.664 164.579,114.192 165.404,113.811 166.000 C 113.429 166.596,112.797 167.690,112.405 168.431 C 112.014 169.173,111.493 170.073,111.247 170.431 C 111.002 170.790,110.576 171.528,110.300 172.072 C 110.023 172.616,109.401 173.704,108.916 174.489 C 108.431 175.274,107.858 176.270,107.642 176.703 C 107.426 177.135,106.770 178.287,106.184 179.264 C 105.598 180.240,104.923 181.403,104.684 181.850 C 104.127 182.891,102.439 185.838,101.783 186.917 C 101.504 187.375,100.701 188.770,100.000 190.018 C 99.298 191.265,98.558 192.517,98.356 192.801 C 98.154 193.085,97.801 193.715,97.572 194.200 C 97.343 194.686,96.782 195.683,96.325 196.417 C 95.868 197.150,95.284 198.162,95.028 198.667 C 94.771 199.171,94.240 200.101,93.847 200.733 C 93.454 201.366,92.829 202.453,92.458 203.150 C 92.086 203.847,91.581 204.717,91.335 205.083 C 91.089 205.450,90.526 206.425,90.084 207.250 C 89.642 208.075,88.912 209.339,88.462 210.058 C 88.012 210.778,87.599 211.491,87.545 211.642 C 87.492 211.793,86.909 212.817,86.251 213.917 C 85.594 215.017,85.004 216.057,84.942 216.229 C 84.879 216.401,84.426 217.191,83.934 217.986 C 83.443 218.780,82.834 219.840,82.580 220.340 C 82.327 220.841,81.781 221.808,81.367 222.489 C 80.953 223.171,80.330 224.385,79.982 225.187 C 79.635 225.989,79.132 227.119,78.866 227.698 C 78.110 229.342,77.022 232.707,76.263 235.750 C 74.371 243.332,74.471 253.175,76.519 260.917 C 76.786 261.925,77.125 263.275,77.272 263.917 C 77.598 265.337,78.410 268.388,78.824 269.750 C 78.991 270.300,79.328 271.425,79.573 272.250 C 80.357 274.889,80.688 275.868,81.574 278.167 C 82.051 279.404,82.541 280.717,82.662 281.083 C 83.228 282.793,86.642 289.829,88.484 293.083 C 90.268 296.235,91.891 297.525,94.836 298.134 C 98.529 298.898,101.950 297.186,104.057 293.520 C 104.458 292.822,105.064 291.762,105.402 291.167 C 105.741 290.571,106.265 289.671,106.567 289.167 C 106.869 288.662,107.514 287.545,108.001 286.683 C 108.488 285.821,109.137 284.735,109.443 284.270 C 109.749 283.805,110.000 283.363,110.000 283.287 C 110.000 283.212,110.563 282.223,111.250 281.089 C 111.938 279.955,112.500 278.960,112.500 278.879 C 112.500 278.798,112.900 278.098,113.390 277.324 C 113.879 276.550,114.603 275.317,114.999 274.583 C 115.394 273.850,115.921 272.950,116.169 272.583 C 116.417 272.217,116.942 271.317,117.335 270.583 C 117.729 269.850,118.440 268.612,118.915 267.833 C 119.390 267.054,119.928 266.117,120.110 265.750 C 120.293 265.383,120.758 264.574,121.143 263.952 C 121.529 263.330,122.113 262.317,122.442 261.702 C 122.770 261.087,123.283 260.208,123.582 259.750 C 123.881 259.292,124.559 258.129,125.089 257.167 C 125.618 256.204,126.256 255.116,126.506 254.749 C 126.755 254.382,127.144 253.707,127.369 253.249 C 127.593 252.791,128.278 251.598,128.889 250.597 C 129.500 249.597,130.000 248.711,130.000 248.630 C 130.000 248.549,130.326 247.980,130.723 247.366 C 131.121 246.752,131.732 245.725,132.081 245.083 C 132.430 244.442,133.143 243.204,133.665 242.333 C 134.187 241.463,135.042 240.000,135.565 239.083 C 136.088 238.167,136.732 237.079,136.995 236.667 C 137.258 236.254,137.480 235.810,137.487 235.680 C 137.494 235.550,137.599 235.325,137.721 235.180 C 138.066 234.769,140.000 231.544,140.000 231.379 C 140.000 231.298,140.399 230.598,140.888 229.824 C 141.376 229.050,141.954 228.079,142.172 227.667 C 142.390 227.254,143.115 226.009,143.784 224.901 C 144.453 223.792,145.000 222.838,145.000 222.782 C 145.000 222.726,145.427 221.983,145.949 221.131 C 146.471 220.280,147.149 219.096,147.455 218.500 C 147.762 217.904,148.391 216.817,148.853 216.083 C 149.315 215.350,149.807 214.491,149.947 214.174 C 150.086 213.857,150.519 213.107,150.909 212.508 C 151.300 211.908,151.941 210.817,152.334 210.083 C 153.108 208.641,153.275 208.357,154.104 207.067 C 154.405 206.600,154.748 206.001,154.867 205.736 C 154.986 205.471,155.477 204.615,155.957 203.835 C 156.438 203.055,157.099 201.892,157.427 201.251 C 157.754 200.610,158.120 199.972,158.239 199.834 C 158.359 199.696,158.982 198.646,159.625 197.500 C 160.267 196.354,161.158 194.803,161.605 194.052 C 162.659 192.281,163.933 190.074,164.667 188.751 C 164.987 188.172,165.737 186.886,166.333 185.893 C 166.929 184.900,167.513 183.865,167.631 183.594 C 167.749 183.322,168.095 182.721,168.401 182.258 C 168.706 181.795,169.442 180.554,170.036 179.500 C 171.144 177.534,171.320 177.232,173.549 173.462 C 174.263 172.254,174.994 170.962,175.173 170.591 C 175.352 170.220,175.918 169.242,176.432 168.417 C 176.946 167.592,177.427 166.761,177.501 166.571 C 177.576 166.380,178.116 165.443,178.703 164.487 C 179.289 163.532,179.981 162.337,180.240 161.833 C 180.499 161.329,181.029 160.429,181.416 159.833 C 181.804 159.237,182.267 158.450,182.445 158.083 C 182.623 157.717,183.236 156.646,183.807 155.705 C 184.377 154.764,184.910 153.820,184.991 153.608 C 185.071 153.396,185.471 152.704,185.879 152.070 C 186.287 151.436,186.942 150.317,187.334 149.583 C 187.726 148.850,188.250 147.950,188.498 147.583 C 188.746 147.217,189.422 146.054,190.000 145.000 C 190.578 143.946,191.270 142.762,191.537 142.369 C 191.805 141.977,192.178 141.302,192.366 140.869 C 192.554 140.437,192.806 139.971,192.925 139.833 C 193.045 139.696,193.629 138.721,194.224 137.667 C 194.819 136.612,195.473 135.487,195.676 135.167 C 195.880 134.846,196.571 133.646,197.212 132.500 C 197.852 131.354,198.634 130.004,198.948 129.500 C 199.262 128.996,199.898 127.908,200.361 127.083 C 200.823 126.258,201.446 125.208,201.744 124.750 C 202.043 124.292,202.446 123.579,202.639 123.167 C 202.833 122.754,203.412 121.742,203.928 120.917 C 204.443 120.092,204.937 119.229,205.027 119.000 C 205.116 118.771,205.547 118.021,205.985 117.333 C 206.423 116.646,207.104 115.483,207.498 114.750 C 207.892 114.017,208.430 113.091,208.695 112.694 C 208.959 112.296,209.484 111.396,209.863 110.694 C 210.241 109.991,210.923 108.817,211.378 108.083 C 211.833 107.350,212.385 106.375,212.605 105.917 C 212.826 105.458,213.316 104.596,213.695 104.001 C 214.074 103.406,214.683 102.356,215.047 101.668 C 215.412 100.980,215.806 100.304,215.922 100.167 C 216.162 99.883,218.857 95.145,219.435 93.991 C 222.211 88.448,222.817 80.550,220.917 74.667 C 219.979 71.761,219.616 70.877,218.708 69.290 C 218.181 68.370,217.487 67.120,217.167 66.513 C 216.846 65.906,216.426 65.186,216.233 64.913 C 216.040 64.640,215.411 63.559,214.834 62.511 C 214.258 61.463,213.497 60.158,213.143 59.610 C 212.790 59.063,212.500 58.558,212.500 58.489 C 212.500 58.420,212.002 57.551,211.393 56.557 C 210.784 55.563,210.034 54.262,209.725 53.667 C 209.166 52.587,208.791 51.966,207.361 49.750 C 204.157 44.785,196.689 41.769,190.852 43.082 M234.500 122.502 C 227.919 122.929,220.660 127.841,217.622 133.923 C 217.395 134.378,216.731 135.555,216.146 136.539 C 215.562 137.524,214.521 139.303,213.833 140.493 C 213.146 141.683,212.214 143.278,211.762 144.037 C 211.311 144.796,210.673 145.917,210.346 146.527 C 210.018 147.138,209.300 148.376,208.750 149.277 C 208.200 150.179,207.563 151.274,207.333 151.711 C 207.104 152.148,206.543 153.123,206.087 153.878 C 205.631 154.632,205.049 155.656,204.793 156.152 C 204.538 156.649,204.079 157.436,203.774 157.902 C 203.468 158.369,202.933 159.275,202.584 159.917 C 201.886 161.202,201.703 161.511,200.887 162.779 C 200.582 163.253,200.184 163.966,200.002 164.362 C 199.820 164.759,199.253 165.758,198.741 166.583 C 198.228 167.408,197.639 168.421,197.432 168.833 C 197.224 169.246,196.603 170.333,196.051 171.250 C 195.499 172.167,194.771 173.404,194.433 174.000 C 194.096 174.596,193.586 175.458,193.301 175.917 C 186.045 187.601,193.953 203.263,207.823 204.675 C 211.595 205.059,261.827 204.796,263.583 204.383 C 266.851 203.615,270.754 201.900,272.197 200.598 C 272.410 200.407,272.900 200.035,273.286 199.773 C 279.169 195.779,282.720 184.335,280.250 177.333 C 280.112 176.944,280.000 176.476,280.000 176.293 C 280.000 175.902,278.756 173.043,278.425 172.673 C 278.299 172.532,277.927 171.892,277.598 171.250 C 277.270 170.608,276.627 169.483,276.171 168.750 C 275.714 168.017,275.199 167.117,275.026 166.750 C 274.853 166.383,274.214 165.271,273.606 164.279 C 272.998 163.286,272.500 162.420,272.500 162.354 C 272.500 162.288,272.051 161.505,271.502 160.613 C 270.952 159.722,270.192 158.413,269.811 157.704 C 269.431 156.996,268.755 155.847,268.310 155.150 C 267.864 154.453,267.499 153.816,267.497 153.733 C 267.496 153.651,267.007 152.796,266.412 151.833 C 265.816 150.871,265.180 149.759,264.998 149.362 C 264.816 148.966,264.418 148.253,264.113 147.779 C 263.275 146.476,263.110 146.195,262.335 144.750 C 261.941 144.017,261.415 143.117,261.165 142.750 C 260.915 142.383,260.499 141.671,260.239 141.167 C 259.980 140.662,259.270 139.425,258.661 138.417 C 258.052 137.408,257.504 136.447,257.444 136.280 C 257.384 136.112,256.865 135.225,256.292 134.307 C 255.719 133.390,255.074 132.314,254.860 131.917 C 254.440 131.141,251.407 127.667,251.148 127.667 C 251.063 127.667,250.675 127.376,250.288 127.021 C 246.695 123.731,240.940 122.084,234.500 122.502 M164.500 240.972 C 163.089 241.268,160.400 242.098,160.083 242.336 C 159.992 242.405,159.681 242.512,159.393 242.573 C 158.246 242.818,155.074 245.035,153.109 246.965 C 151.344 248.698,150.482 249.916,148.241 253.833 C 147.900 254.429,147.032 255.906,146.311 257.115 C 145.590 258.324,144.996 259.374,144.991 259.448 C 144.986 259.522,144.536 260.296,143.991 261.167 C 143.446 262.037,142.789 263.162,142.531 263.667 C 142.273 264.171,141.740 265.101,141.347 265.733 C 140.954 266.366,140.329 267.453,139.958 268.150 C 139.586 268.847,139.080 269.717,138.832 270.083 C 138.583 270.450,138.058 271.350,137.665 272.083 C 137.271 272.817,136.578 274.009,136.125 274.732 C 135.672 275.456,135.157 276.356,134.980 276.732 C 134.804 277.109,134.286 278.017,133.828 278.750 C 133.371 279.483,132.767 280.533,132.487 281.083 C 132.206 281.633,131.729 282.458,131.426 282.917 C 131.123 283.375,130.483 284.462,130.003 285.333 C 129.524 286.204,128.880 287.300,128.572 287.769 C 122.787 296.578,123.066 309.679,129.221 318.167 C 130.992 320.609,135.113 324.581,136.352 325.040 C 136.565 325.118,136.967 325.355,137.245 325.564 C 137.976 326.116,139.032 326.635,148.833 331.255 C 150.254 331.925,152.594 333.041,154.032 333.736 C 155.471 334.431,156.712 335.000,156.791 335.000 C 156.870 335.000,157.831 335.460,158.926 336.023 C 160.021 336.586,161.254 337.172,161.667 337.326 C 162.079 337.479,163.542 338.151,164.917 338.818 C 166.292 339.485,168.504 340.542,169.833 341.168 C 177.538 344.796,178.933 345.457,180.750 346.339 C 181.850 346.873,183.125 347.461,183.583 347.646 C 184.042 347.830,185.220 348.392,186.202 348.894 C 187.184 349.396,188.159 349.859,188.369 349.923 C 188.578 349.988,189.875 350.585,191.250 351.251 C 196.309 353.701,198.774 354.840,199.750 355.180 C 206.702 357.601,212.296 357.629,218.833 355.275 C 223.687 353.527,225.574 352.124,232.844 344.848 C 239.673 338.014,241.090 336.082,243.062 330.917 C 246.237 322.597,245.314 311.941,240.847 305.333 C 240.506 304.829,240.112 304.183,239.971 303.898 C 239.326 302.590,236.009 299.188,212.167 275.377 C 179.521 242.773,182.582 245.768,180.416 244.314 C 178.520 243.041,178.188 242.872,175.872 242.008 C 172.445 240.729,167.719 240.298,164.500 240.972 " stroke="none" fill="#040404" fill-rule="evenodd"></path><path id="path2" d="" stroke="none" fill="#1434100" fill-rule="evenodd"></path><path id="path3" d="" stroke="none" fill="#143444" fill-rule="evenodd"></path><path id="path4" d="" stroke="none" fill="#143804" fill-rule="evenodd"></path></g></svg>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0, 0, 400,400"><g><path d="M216.167 223.335 C 207.555 224.855,202.555 234.774,206.463 242.583 C 207.709 245.073,208.214 245.592,243.517 280.709 C 254.924 292.055,256.790 293.740,259.095 294.770 C 259.455 294.930,260.200 295.267,260.750 295.516 C 267.628 298.640,276.813 298.064,283.083 294.115 C 285.806 292.400,285.719 292.482,300.853 277.475 C 304.703 273.657,308.843 269.561,310.052 268.371 C 313.108 265.364,314.218 264.176,314.735 263.357 C 314.980 262.969,315.421 262.332,315.715 261.941 C 316.377 261.062,317.162 259.500,317.820 257.750 C 321.680 247.489,317.971 236.530,308.133 229.126 C 306.231 227.695,301.895 225.295,300.883 225.113 C 300.718 225.084,299.863 224.825,298.982 224.538 C 298.102 224.251,296.639 223.846,295.732 223.638 L 294.083 223.259 255.500 223.231 C 234.279 223.216,216.579 223.263,216.167 223.335 " stroke="none" fill="#2464fc" fill-rule="evenodd"></path><path id="path1" d="M190.852 43.082 C 186.086 44.155,182.177 47.017,179.781 51.186 C 179.339 51.955,178.634 53.183,178.213 53.917 C 177.792 54.650,177.109 55.813,176.693 56.500 C 176.278 57.188,175.671 58.250,175.344 58.861 C 175.017 59.472,174.285 60.749,173.717 61.699 C 173.149 62.649,172.631 63.574,172.565 63.754 C 172.500 63.935,172.203 64.458,171.905 64.917 C 171.608 65.375,170.867 66.644,170.258 67.736 C 169.649 68.828,169.014 69.915,168.848 70.152 C 168.682 70.389,168.049 71.496,167.443 72.611 C 166.837 73.726,166.116 74.972,165.841 75.379 C 165.567 75.786,165.189 76.448,165.001 76.851 C 164.814 77.254,164.287 78.183,163.831 78.917 C 163.375 79.650,162.849 80.568,162.661 80.956 C 162.473 81.345,161.960 82.245,161.520 82.956 C 161.080 83.668,160.362 84.925,159.924 85.750 C 159.486 86.575,159.034 87.362,158.920 87.500 C 158.806 87.638,158.526 88.087,158.298 88.500 C 157.454 90.027,155.961 92.606,155.501 93.333 C 155.240 93.746,155.020 94.210,155.013 94.365 C 155.006 94.520,154.935 94.687,154.857 94.736 C 154.679 94.846,152.879 97.844,152.448 98.750 C 152.273 99.117,151.887 99.792,151.589 100.250 C 151.291 100.708,150.542 101.983,149.925 103.083 C 148.787 105.110,147.939 106.587,146.636 108.811 C 146.240 109.486,145.617 110.589,145.250 111.262 C 144.883 111.936,144.125 113.258,143.565 114.202 C 143.005 115.145,142.501 116.049,142.445 116.210 C 142.388 116.372,142.013 117.009,141.611 117.627 C 141.209 118.245,140.520 119.425,140.081 120.250 C 139.642 121.075,139.080 122.050,138.832 122.417 C 138.583 122.783,138.059 123.683,137.666 124.417 C 137.273 125.150,136.556 126.401,136.072 127.197 C 135.588 127.993,135.037 128.968,134.848 129.364 C 134.658 129.759,134.056 130.796,133.510 131.667 C 132.964 132.537,132.513 133.332,132.509 133.432 C 132.504 133.533,132.210 134.063,131.857 134.610 C 131.503 135.158,130.740 136.463,130.161 137.511 C 129.582 138.559,128.851 139.820,128.535 140.313 C 128.220 140.806,127.816 141.519,127.638 141.897 C 127.459 142.274,126.945 143.183,126.495 143.917 C 126.045 144.650,125.460 145.662,125.196 146.167 C 124.931 146.671,124.305 147.758,123.804 148.583 C 123.304 149.408,122.648 150.571,122.348 151.167 C 122.047 151.762,121.704 152.362,121.584 152.500 C 121.464 152.637,120.825 153.725,120.164 154.917 C 119.503 156.108,118.717 157.458,118.419 157.917 C 118.121 158.375,117.731 159.050,117.554 159.417 C 117.376 159.783,116.777 160.833,116.223 161.750 C 115.669 162.667,115.055 163.754,114.859 164.167 C 114.664 164.579,114.192 165.404,113.811 166.000 C 113.429 166.596,112.797 167.690,112.405 168.431 C 112.014 169.173,111.493 170.073,111.247 170.431 C 111.002 170.790,110.576 171.528,110.300 172.072 C 110.023 172.616,109.401 173.704,108.916 174.489 C 108.431 175.274,107.858 176.270,107.642 176.703 C 107.426 177.135,106.770 178.287,106.184 179.264 C 105.598 180.240,104.923 181.403,104.684 181.850 C 104.127 182.891,102.439 185.838,101.783 186.917 C 101.504 187.375,100.701 188.770,100.000 190.018 C 99.298 191.265,98.558 192.517,98.356 192.801 C 98.154 193.085,97.801 193.715,97.572 194.200 C 97.343 194.686,96.782 195.683,96.325 196.417 C 95.868 197.150,95.284 198.162,95.028 198.667 C 94.771 199.171,94.240 200.101,93.847 200.733 C 93.454 201.366,92.829 202.453,92.458 203.150 C 92.086 203.847,91.581 204.717,91.335 205.083 C 91.089 205.450,90.526 206.425,90.084 207.250 C 89.642 208.075,88.912 209.339,88.462 210.058 C 88.012 210.778,87.599 211.491,87.545 211.642 C 87.492 211.793,86.909 212.817,86.251 213.917 C 85.594 215.017,85.004 216.057,84.942 216.229 C 84.879 216.401,84.426 217.191,83.934 217.986 C 83.443 218.780,82.834 219.840,82.580 220.340 C 82.327 220.841,81.781 221.808,81.367 222.489 C 80.953 223.171,80.330 224.385,79.982 225.187 C 79.635 225.989,79.132 227.119,78.866 227.698 C 78.110 229.342,77.022 232.707,76.263 235.750 C 74.371 243.332,74.471 253.175,76.519 260.917 C 76.786 261.925,77.125 263.275,77.272 263.917 C 77.598 265.337,78.410 268.388,78.824 269.750 C 78.991 270.300,79.328 271.425,79.573 272.250 C 80.357 274.889,80.688 275.868,81.574 278.167 C 82.051 279.404,82.541 280.717,82.662 281.083 C 83.228 282.793,86.642 289.829,88.484 293.083 C 90.268 296.235,91.891 297.525,94.836 298.134 C 98.529 298.898,101.950 297.186,104.057 293.520 C 104.458 292.822,105.064 291.762,105.402 291.167 C 105.741 290.571,106.265 289.671,106.567 289.167 C 106.869 288.662,107.514 287.545,108.001 286.683 C 108.488 285.821,109.137 284.735,109.443 284.270 C 109.749 283.805,110.000 283.363,110.000 283.287 C 110.000 283.212,110.563 282.223,111.250 281.089 C 111.938 279.955,112.500 278.960,112.500 278.879 C 112.500 278.798,112.900 278.098,113.390 277.324 C 113.879 276.550,114.603 275.317,114.999 274.583 C 115.394 273.850,115.921 272.950,116.169 272.583 C 116.417 272.217,116.942 271.317,117.335 270.583 C 117.729 269.850,118.440 268.612,118.915 267.833 C 119.390 267.054,119.928 266.117,120.110 265.750 C 120.293 265.383,120.758 264.574,121.143 263.952 C 121.529 263.330,122.113 262.317,122.442 261.702 C 122.770 261.087,123.283 260.208,123.582 259.750 C 123.881 259.292,124.559 258.129,125.089 257.167 C 125.618 256.204,126.256 255.116,126.506 254.749 C 126.755 254.382,127.144 253.707,127.369 253.249 C 127.593 252.791,128.278 251.598,128.889 250.597 C 129.500 249.597,130.000 248.711,130.000 248.630 C 130.000 248.549,130.326 247.980,130.723 247.366 C 131.121 246.752,131.732 245.725,132.081 245.083 C 132.430 244.442,133.143 243.204,133.665 242.333 C 134.187 241.463,135.042 240.000,135.565 239.083 C 136.088 238.167,136.732 237.079,136.995 236.667 C 137.258 236.254,137.480 235.810,137.487 235.680 C 137.494 235.550,137.599 235.325,137.721 235.180 C 138.066 234.769,140.000 231.544,140.000 231.379 C 140.000 231.298,140.399 230.598,140.888 229.824 C 141.376 229.050,141.954 228.079,142.172 227.667 C 142.390 227.254,143.115 226.009,143.784 224.901 C 144.453 223.792,145.000 222.838,145.000 222.782 C 145.000 222.726,145.427 221.983,145.949 221.131 C 146.471 220.280,147.149 219.096,147.455 218.500 C 147.762 217.904,148.391 216.817,148.853 216.083 C 149.315 215.350,149.807 214.491,149.947 214.174 C 150.086 213.857,150.519 213.107,150.909 212.508 C 151.300 211.908,151.941 210.817,152.334 210.083 C 153.108 208.641,153.275 208.357,154.104 207.067 C 154.405 206.600,154.748 206.001,154.867 205.736 C 154.986 205.471,155.477 204.615,155.957 203.835 C 156.438 203.055,157.099 201.892,157.427 201.251 C 157.754 200.610,158.120 199.972,158.239 199.834 C 158.359 199.696,158.982 198.646,159.625 197.500 C 160.267 196.354,161.158 194.803,161.605 194.052 C 162.659 192.281,163.933 190.074,164.667 188.751 C 164.987 188.172,165.737 186.886,166.333 185.893 C 166.929 184.900,167.513 183.865,167.631 183.594 C 167.749 183.322,168.095 182.721,168.401 182.258 C 168.706 181.795,169.442 180.554,170.036 179.500 C 171.144 177.534,171.320 177.232,173.549 173.462 C 174.263 172.254,174.994 170.962,175.173 170.591 C 175.352 170.220,175.918 169.242,176.432 168.417 C 176.946 167.592,177.427 166.761,177.501 166.571 C 177.576 166.380,178.116 165.443,178.703 164.487 C 179.289 163.532,179.981 162.337,180.240 161.833 C 180.499 161.329,181.029 160.429,181.416 159.833 C 181.804 159.237,182.267 158.450,182.445 158.083 C 182.623 157.717,183.236 156.646,183.807 155.705 C 184.377 154.764,184.910 153.820,184.991 153.608 C 185.071 153.396,185.471 152.704,185.879 152.070 C 186.287 151.436,186.942 150.317,187.334 149.583 C 187.726 148.850,188.250 147.950,188.498 147.583 C 188.746 147.217,189.422 146.054,190.000 145.000 C 190.578 143.946,191.270 142.762,191.537 142.369 C 191.805 141.977,192.178 141.302,192.366 140.869 C 192.554 140.437,192.806 139.971,192.925 139.833 C 193.045 139.696,193.629 138.721,194.224 137.667 C 194.819 136.612,195.473 135.487,195.676 135.167 C 195.880 134.846,196.571 133.646,197.212 132.500 C 197.852 131.354,198.634 130.004,198.948 129.500 C 199.262 128.996,199.898 127.908,200.361 127.083 C 200.823 126.258,201.446 125.208,201.744 124.750 C 202.043 124.292,202.446 123.579,202.639 123.167 C 202.833 122.754,203.412 121.742,203.928 120.917 C 204.443 120.092,204.937 119.229,205.027 119.000 C 205.116 118.771,205.547 118.021,205.985 117.333 C 206.423 116.646,207.104 115.483,207.498 114.750 C 207.892 114.017,208.430 113.091,208.695 112.694 C 208.959 112.296,209.484 111.396,209.863 110.694 C 210.241 109.991,210.923 108.817,211.378 108.083 C 211.833 107.350,212.385 106.375,212.605 105.917 C 212.826 105.458,213.316 104.596,213.695 104.001 C 214.074 103.406,214.683 102.356,215.047 101.668 C 215.412 100.980,215.806 100.304,215.922 100.167 C 216.162 99.883,218.857 95.145,219.435 93.991 C 222.211 88.448,222.817 80.550,220.917 74.667 C 219.979 71.761,219.616 70.877,218.708 69.290 C 218.181 68.370,217.487 67.120,217.167 66.513 C 216.846 65.906,216.426 65.186,216.233 64.913 C 216.040 64.640,215.411 63.559,214.834 62.511 C 214.258 61.463,213.497 60.158,213.143 59.610 C 212.790 59.063,212.500 58.558,212.500 58.489 C 212.500 58.420,212.002 57.551,211.393 56.557 C 210.784 55.563,210.034 54.262,209.725 53.667 C 209.166 52.587,208.791 51.966,207.361 49.750 C 204.157 44.785,196.689 41.769,190.852 43.082 M234.500 122.502 C 227.919 122.929,220.660 127.841,217.622 133.923 C 217.395 134.378,216.731 135.555,216.146 136.539 C 215.562 137.524,214.521 139.303,213.833 140.493 C 213.146 141.683,212.214 143.278,211.762 144.037 C 211.311 144.796,210.673 145.917,210.346 146.527 C 210.018 147.138,209.300 148.376,208.750 149.277 C 208.200 150.179,207.563 151.274,207.333 151.711 C 207.104 152.148,206.543 153.123,206.087 153.878 C 205.631 154.632,205.049 155.656,204.793 156.152 C 204.538 156.649,204.079 157.436,203.774 157.902 C 203.468 158.369,202.933 159.275,202.584 159.917 C 201.886 161.202,201.703 161.511,200.887 162.779 C 200.582 163.253,200.184 163.966,200.002 164.362 C 199.820 164.759,199.253 165.758,198.741 166.583 C 198.228 167.408,197.639 168.421,197.432 168.833 C 197.224 169.246,196.603 170.333,196.051 171.250 C 195.499 172.167,194.771 173.404,194.433 174.000 C 194.096 174.596,193.586 175.458,193.301 175.917 C 186.045 187.601,193.953 203.263,207.823 204.675 C 211.595 205.059,261.827 204.796,263.583 204.383 C 266.851 203.615,270.754 201.900,272.197 200.598 C 272.410 200.407,272.900 200.035,273.286 199.773 C 279.169 195.779,282.720 184.335,280.250 177.333 C 280.112 176.944,280.000 176.476,280.000 176.293 C 280.000 175.902,278.756 173.043,278.425 172.673 C 278.299 172.532,277.927 171.892,277.598 171.250 C 277.270 170.608,276.627 169.483,276.171 168.750 C 275.714 168.017,275.199 167.117,275.026 166.750 C 274.853 166.383,274.214 165.271,273.606 164.279 C 272.998 163.286,272.500 162.420,272.500 162.354 C 272.500 162.288,272.051 161.505,271.502 160.613 C 270.952 159.722,270.192 158.413,269.811 157.704 C 269.431 156.996,268.755 155.847,268.310 155.150 C 267.864 154.453,267.499 153.816,267.497 153.733 C 267.496 153.651,267.007 152.796,266.412 151.833 C 265.816 150.871,265.180 149.759,264.998 149.362 C 264.816 148.966,264.418 148.253,264.113 147.779 C 263.275 146.476,263.110 146.195,262.335 144.750 C 261.941 144.017,261.415 143.117,261.165 142.750 C 260.915 142.383,260.499 141.671,260.239 141.167 C 259.980 140.662,259.270 139.425,258.661 138.417 C 258.052 137.408,257.504 136.447,257.444 136.280 C 257.384 136.112,256.865 135.225,256.292 134.307 C 255.719 133.390,255.074 132.314,254.860 131.917 C 254.440 131.141,251.407 127.667,251.148 127.667 C 251.063 127.667,250.675 127.376,250.288 127.021 C 246.695 123.731,240.940 122.084,234.500 122.502 M164.500 240.972 C 163.089 241.268,160.400 242.098,160.083 242.336 C 159.992 242.405,159.681 242.512,159.393 242.573 C 158.246 242.818,155.074 245.035,153.109 246.965 C 151.344 248.698,150.482 249.916,148.241 253.833 C 147.900 254.429,147.032 255.906,146.311 257.115 C 145.590 258.324,144.996 259.374,144.991 259.448 C 144.986 259.522,144.536 260.296,143.991 261.167 C 143.446 262.037,142.789 263.162,142.531 263.667 C 142.273 264.171,141.740 265.101,141.347 265.733 C 140.954 266.366,140.329 267.453,139.958 268.150 C 139.586 268.847,139.080 269.717,138.832 270.083 C 138.583 270.450,138.058 271.350,137.665 272.083 C 137.271 272.817,136.578 274.009,136.125 274.732 C 135.672 275.456,135.157 276.356,134.980 276.732 C 134.804 277.109,134.286 278.017,133.828 278.750 C 133.371 279.483,132.767 280.533,132.487 281.083 C 132.206 281.633,131.729 282.458,131.426 282.917 C 131.123 283.375,130.483 284.462,130.003 285.333 C 129.524 286.204,128.880 287.300,128.572 287.769 C 122.787 296.578,123.066 309.679,129.221 318.167 C 130.992 320.609,135.113 324.581,136.352 325.040 C 136.565 325.118,136.967 325.355,137.245 325.564 C 137.976 326.116,139.032 326.635,148.833 331.255 C 150.254 331.925,152.594 333.041,154.032 333.736 C 155.471 334.431,156.712 335.000,156.791 335.000 C 156.870 335.000,157.831 335.460,158.926 336.023 C 160.021 336.586,161.254 337.172,161.667 337.326 C 162.079 337.479,163.542 338.151,164.917 338.818 C 166.292 339.485,168.504 340.542,169.833 341.168 C 177.538 344.796,178.933 345.457,180.750 346.339 C 181.850 346.873,183.125 347.461,183.583 347.646 C 184.042 347.830,185.220 348.392,186.202 348.894 C 187.184 349.396,188.159 349.859,188.369 349.923 C 188.578 349.988,189.875 350.585,191.250 351.251 C 196.309 353.701,198.774 354.840,199.750 355.180 C 206.702 357.601,212.296 357.629,218.833 355.275 C 223.687 353.527,225.574 352.124,232.844 344.848 C 239.673 338.014,241.090 336.082,243.062 330.917 C 246.237 322.597,245.314 311.941,240.847 305.333 C 240.506 304.829,240.112 304.183,239.971 303.898 C 239.326 302.590,236.009 299.188,212.167 275.377 C 179.521 242.773,182.582 245.768,180.416 244.314 C 178.520 243.041,178.188 242.872,175.872 242.008 C 172.445 240.729,167.719 240.298,164.500 240.972 " stroke="none" fill="var(--w3o-text-color, #040404)" fill-rule="evenodd"></path><path id="path2" d="" stroke="none" fill="#1434100" fill-rule="evenodd"></path><path id="path3" d="" stroke="none" fill="#143444" fill-rule="evenodd"></path><path id="path4" d="" stroke="none" fill="#143804" fill-rule="evenodd"></path></g></svg>
 `
diff --git a/packages/keystone/src/index.ts b/packages/keystone/src/index.ts
index cae0f6b75..9c2956844 100644
--- a/packages/keystone/src/index.ts
+++ b/packages/keystone/src/index.ts
@@ -95,6 +95,7 @@ function keystone({
 
         // Super weird esm issue where the default export is an object with a property default on it
         // if that is the case then we just grab the default value
+        // @ts-ignore
         AirGappedKeyring =
           'default' in AirGappedKeyring
             ? // @ts-ignore
diff --git a/packages/ledger/package.json b/packages/ledger/package.json
index 590db948c..3e58bc9eb 100644
--- a/packages/ledger/package.json
+++ b/packages/ledger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/ledger",
-  "version": "2.4.1",
+  "version": "2.4.2-alpha.1",
   "description": "Ledger hardare wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
diff --git a/packages/react/package.json b/packages/react/package.json
index 93d88c595..5873ba431 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.5.6-alpha.1",
+  "version": "2.6.0-alpha.1",
   "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -62,7 +62,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.13.2-alpha.1",
+    "@web3-onboard/core": "^2.14.0-alpha.1",
     "@web3-onboard/common": "^2.2.3",
     "use-sync-external-store": "1.0.0"
   },
diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts
index ffff4e239..3d0303841 100644
--- a/packages/react/src/hooks/index.ts
+++ b/packages/react/src/hooks/index.ts
@@ -6,3 +6,4 @@ export { useNotifications } from './useNotifications.js'
 export { useSetChain } from './useSetChain.js'
 export { useSetLocale } from './useSetLocale.js'
 export { useWallets } from './useWallets.js'
+export { useUpdateTheme } from './useUpdateTheme.js'
diff --git a/packages/react/src/hooks/useUpdateTheme.ts b/packages/react/src/hooks/useUpdateTheme.ts
new file mode 100644
index 000000000..3c422c5ab
--- /dev/null
+++ b/packages/react/src/hooks/useUpdateTheme.ts
@@ -0,0 +1,6 @@
+import type { Theme } from '@web3-onboard/core'
+import { useWeb3Onboard } from '../context.js'
+
+export const useUpdateTheme = (): ((
+  update: Theme
+) => void) => useWeb3Onboard().state.actions.updateTheme
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 33afb1206..9a785ba2d 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -5,6 +5,7 @@ export {
   useNotifications,
   useSetChain,
   useSetLocale,
+  useUpdateTheme,
   useWallets
 } from './hooks/index.js'
 
diff --git a/packages/sequence/src/icon.ts b/packages/sequence/src/icon.ts
index a98e54bca..c492532ea 100644
--- a/packages/sequence/src/icon.ts
+++ b/packages/sequence/src/icon.ts
@@ -18,7 +18,7 @@ export default `
 <defs>
 <linearGradient id="paint0_linear_5_131" x1="198" y1="4.05854e-05" x2="198" y2="318" gradientUnits="userSpaceOnUse">
 <stop stop-color="#1D273D"/>
-<stop offset="1" stop-color="#0D0F13"/>
+<stop offset="1" stop-color="var(--w3o-text-color, #0D0F13)"/>
 </linearGradient>
 <linearGradient id="paint1_linear_5_131" x1="65.5" y1="99" x2="92.5" y2="63" gradientUnits="userSpaceOnUse">
 <stop stop-color="#4462FE"/>
diff --git a/packages/transaction-preview/src/index.ts b/packages/transaction-preview/src/index.ts
index 54b11dd28..b5c184e08 100644
--- a/packages/transaction-preview/src/index.ts
+++ b/packages/transaction-preview/src/index.ts
@@ -71,7 +71,7 @@ export const patchProvider = (
 ): PatchedEIP1193Provider => {
   if (!walletProvider) {
     throw new Error(
-      `An EIP 1193 wallet provider is required to preform patching and 
+      `An EIP 1193 wallet provider is required to preform patching and
       watch for transactions e.g. an injected wallet using window.ethereum`
     )
   }
@@ -130,7 +130,7 @@ export const patchProvider = (
     patchedProvider.simPatched = true
   } catch (err) {
     console.error(
-      `There was an error patching the passed in wallet provider. 
+      `There was an error patching the passed in wallet provider.
       The provider may be read only and may be incompatible with Transaction Preview`
     )
   }
@@ -197,10 +197,6 @@ const mountTransactionPreview = (simResponse: MultiSimOutput) => {
 
   transactionPreviewDomElement.style.all = 'initial'
 
-  target.innerHTML = `
-    <style>
-    </style>
-  `
   const getW3OEl = document.querySelector('onboard-v2')
 
   const containerElementQuery = options.containerElement || 'body'
diff --git a/packages/transaction-preview/src/views/Index.svelte b/packages/transaction-preview/src/views/Index.svelte
index 81a46488b..aafd34012 100644
--- a/packages/transaction-preview/src/views/Index.svelte
+++ b/packages/transaction-preview/src/views/Index.svelte
@@ -26,7 +26,25 @@
   }
 </script>
 
-<div in:fade={{ duration: 250, easing: cubicOut }}>
+<style>
+  .tp-main {
+    --text-color: var(--w3o-text-color, white);
+    --action-color: var(--w3o-action-color, var(--primary-400));
+    --border-color: var(--w3o-border-color, var(--gray-500));
+    --background-color: var(--w3o-background-color, var(--gray-700));
+    --foreground-color: var(--w3o-foreground-color, var(--gray-600));
+    --border-radius: var(--w3o-border-radius, 1rem);
+
+    font-family: var(--onboard-font-family-normal, var(--font-family-normal));
+    border: 1px solid transparent;
+    border-color: var(--border-color);
+    background: var(--foreground-color, var(--background-color));
+    color: var(--text-color);
+    border-radius: var(--border-radius);
+  }
+</style>
+
+<div in:fade={{ duration: 250, easing: cubicOut }} class="tp-main">
   {#if expanded || requireTransactionApproval}
     <Maximized
       {toggleExpanded}
diff --git a/packages/transaction-preview/src/views/Maximized.svelte b/packages/transaction-preview/src/views/Maximized.svelte
index 821f18149..8084e3c14 100644
--- a/packages/transaction-preview/src/views/Maximized.svelte
+++ b/packages/transaction-preview/src/views/Maximized.svelte
@@ -54,12 +54,9 @@
 
 <style>
   .maximized {
-    font-family: var(--onboard-font-family-normal, var(--font-family-normal));
     pointer-events: all;
-    backdrop-filter: blur(5px);
     width: 100%;
     min-height: 3.5rem;
-    background: var(--onboard-gray-600, var(--gray-600));
     display: flex;
     flex-direction: column;
     position: relative;
@@ -67,7 +64,7 @@
   }
 
   .radius {
-    border-radius: var(--onboard-border-radius-4, var(--border-radius-4));
+    border-radius: inherit;
   }
 
   div.tp-close-btn {
@@ -103,48 +100,47 @@
     margin: auto;
   }
 
-  .tp-close-btn > .close-icon {
-    color: var(--onboard-gray-300, var(--gray-300));
+  .tp-close-btn .close-icon {
+    color: currentColor;
   }
 
-  .tp-close-btn:hover > .close-icon {
-    color: var(--onboard-gray-100, var(--gray-100));
+  .tp-close-btn:hover .close-icon {
+    color: currentColor;
   }
 
   .table-radius {
-    border-radius: var(--onboard-border-radius-5, var(--border-radius-5));
+    border-radius: var(--border-radius-5);
   }
 
   .bn-notify-notification-inner {
     padding: 0.75rem;
+    background: var(--foreground-color);
   }
   .details {
-    background: var(--onboard-gray-700, var(--gray-700));
     display: flex;
     flex-direction: column;
     padding: 0.75rem;
     gap: 0.5rem;
+    border-top: 1px solid var(--border-color);
   }
   .address-info {
     font-size: 0.75rem;
     font-weight: 400;
     line-height: 1rem;
     display: inline-flex;
-    color: var(--onboard-gray-200, var(--gray-200));
   }
   .details-cta {
-    color: var(--onboard-primary-400, var(--primary-400));
+    color: inherit;
     font-weight: 700;
     font-size: 0.875rem;
     display: flex;
     justify-content: flex-end;
-    background: var(--onboard-gray-700, var(--gray-700));
     flex-direction: row;
     align-items: center;
     padding: 0.5rem;
     gap: 0.5rem;
     height: 3rem;
-    border: 1px solid var(--onboard-gray-600, var(--gray-600));
+    border-top: 1px solid var(--border-color);
     flex: none;
     order: 2;
     align-self: stretch;
@@ -153,11 +149,11 @@
 
   table.balance-change-table {
     width: 100%;
-    background: var(--onboard-gray-600, var(--gray-600));
-    border: 1px solid var(--onboard-gray-500, var(--gray-500));
-    color: var(--onboard-gray-100, var(--gray-100));
     overflow: hidden;
     border-spacing: 0;
+    border: 1px solid transparent;
+    border-color:var(--border-color);
+    color: var(--text-color);
   }
 
   table.balance-change-table td,
@@ -166,6 +162,7 @@
     text-align: start;
     line-height: 1rem;
   }
+
   table.balance-change-table th {
     font-size: 0.75rem;
   }
@@ -178,12 +175,12 @@
   }
 
   tbody > tr:not(:first-child) {
-    box-shadow: inset 0px 1px 0px var(--onboard-gray-500, var(--gray-500));
+    box-shadow: inset 0px 1px 0px
+      var(--border-color);
   }
 
   table.balance-change-table thead {
-    background: var(--onboard-gray-500, var(--gray-500));
-    color: var(--onboard-gray-100, var(--gray-100));
+    background: var(--border-color);
   }
 
   .negative {
diff --git a/packages/transaction-preview/src/views/Minimized.svelte b/packages/transaction-preview/src/views/Minimized.svelte
index ed7454a4d..aaa232fc6 100644
--- a/packages/transaction-preview/src/views/Minimized.svelte
+++ b/packages/transaction-preview/src/views/Minimized.svelte
@@ -17,13 +17,12 @@
 
 <style>
   .minimized {
-    font-family: var(--onboard-font-family-normal, var(--font-family-normal));
     transition: background 300ms ease-in-out, color 300ms ease-in-out;
     pointer-events: all;
     backdrop-filter: blur(5px);
     width: 100%;
     min-height: 3.5rem;
-    background: var(--onboard-gray-600, var(--gray-600));
+    background: var(--foreground-color);
     display: flex;
     flex-direction: column;
     position: relative;
@@ -31,11 +30,12 @@
   }
 
   .radius {
-    border-radius: var(--onboard-border-radius-4, var(--border-radius-4));
+    border-radius: inherit;
   }
 
-  .bn-notify-notification-inner {
+  .tp-header {
     padding: 0.75rem;
+    border-bottom: var(--border-color, transparent) 1px solid;
   }
 
   div.tp-close-btn {
@@ -72,26 +72,24 @@
   }
 
   .tp-close-btn > .close-icon {
-    color: var(--onboard-gray-300, var(--gray-300));
+    color: var(--tp-close-icon-color, var(--onboard-gray-300, var(--gray-300)));
   }
 
   .tp-close-btn:hover > .close-icon {
-    color: var(--onboard-gray-100, var(--gray-100));
+    color: var(--tp-close-icon-hover, var(--onboard-gray-100, var(--gray-100)));
   }
 
   .details-cta {
-    font-style: normal;
     font-weight: 700;
     font-size: 0.875rem;
     display: flex;
     justify-content: flex-end;
     flex-direction: row;
     align-items: center;
-    background: var(--onboard-gray-700, var(--gray-700));
     padding: 0.5rem;
     gap: 0.5rem;
     height: 3rem;
-    border: 1px solid var(--onboard-gray-600, var(--gray-600));
+    border-top: 1px solid var(--border-color);
     flex: none;
     order: 2;
     align-self: stretch;
@@ -110,7 +108,7 @@
       {@html closeIcon}
     </div>
   </div>
-  <div class="flex bn-notify-notification-inner">
+  <div class="flex tp-header">
     <IconBadge />
     <SimulationHeader {startTime} />
   </div>
diff --git a/packages/transaction-preview/src/views/components/Button.svelte b/packages/transaction-preview/src/views/components/Button.svelte
index 529e349f4..c73831491 100644
--- a/packages/transaction-preview/src/views/components/Button.svelte
+++ b/packages/transaction-preview/src/views/components/Button.svelte
@@ -11,14 +11,11 @@
     padding: 0.25rem 0.75rem;
     gap: 0.25rem;
     border-radius: var(--onboard-border-radius-5, var(--border-radius-5));
-    background: var(--onboard-gray-700, var(--gray-700));
-    color: var(
-      --transaction-sim-details-cta-color,
-      var(--onboard-primary-400, var(--primary-400))
-    );
+    background: transparent;
+    color: var(--action-color);
   }
   button:hover {
-    background: rgba(146, 155, 237, 0.2);
+    background: var(--border-color, rgba(146, 155, 237, 0.2));
   }
 </style>
 
diff --git a/packages/transaction-preview/src/views/components/IconBadge.svelte b/packages/transaction-preview/src/views/components/IconBadge.svelte
index 3b19b15da..6867a60fe 100644
--- a/packages/transaction-preview/src/views/components/IconBadge.svelte
+++ b/packages/transaction-preview/src/views/components/IconBadge.svelte
@@ -5,8 +5,8 @@
   div.notification-icons-wrapper {
     height: 2rem;
     width: 2rem;
-    background: var(--onboard-gray-500, var(--gray-500));
-    border: 2px solid var(--onboard-gray-500, var(--gray-500));
+    background: var(--border-color);
+    border: 2px solid var(--border-color);
     font-size: 1rem;
   }
   .border {
diff --git a/packages/transaction-preview/src/views/components/SimulationHeader.svelte b/packages/transaction-preview/src/views/components/SimulationHeader.svelte
index 188fc6b4d..841abc263 100644
--- a/packages/transaction-preview/src/views/components/SimulationHeader.svelte
+++ b/packages/transaction-preview/src/views/components/SimulationHeader.svelte
@@ -21,7 +21,6 @@
   }
 
   .transaction-status {
-    color: var(--onboard-primary-100, var(--primary-100));
     line-height: var(--onboard-font-size-5, var(--font-size-5));
     font-weight: 400;
     overflow: hidden;
diff --git a/packages/transaction-preview/src/views/components/Timer.svelte b/packages/transaction-preview/src/views/components/Timer.svelte
index 22676d2ae..cada37b16 100644
--- a/packages/transaction-preview/src/views/components/Timer.svelte
+++ b/packages/transaction-preview/src/views/components/Timer.svelte
@@ -48,7 +48,7 @@
   }
 
   .time {
-    color: var(--onboard-gray-300, var(--gray-300))
+    color: inherit;
   }
 
   .stale {
diff --git a/packages/trezor/package.json b/packages/trezor/package.json
index d14245f08..f4554e31b 100644
--- a/packages/trezor/package.json
+++ b/packages/trezor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/trezor",
-  "version": "2.3.3-alpha.1",
+  "version": "2.3.3-alpha.2",
   "description": "Trezor hardware wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -61,7 +61,7 @@
     "@ethereumjs/tx": "^3.4.0",
     "@ethersproject/providers": "^5.5.0",
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/hw-common": "^2.0.5-alpha.1",
+    "@web3-onboard/hw-common": "^2.1.0-alpha.1",
     "buffer": "^6.0.3",
     "eth-crypto": "^2.1.0",
     "ethereumjs-util": "^7.1.3",
diff --git a/packages/trezor/src/icon.ts b/packages/trezor/src/icon.ts
index 8b2edc233..5fb696a51 100644
--- a/packages/trezor/src/icon.ts
+++ b/packages/trezor/src/icon.ts
@@ -1,7 +1,7 @@
 const trezorIcon = `
 	<svg height="100%" viewBox="0 0 114 166" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 		<g id="Styles" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-			<path d="M17,51.453125 L17,40 C17,17.90861 34.90861,-1.0658141e-14 57,-1.0658141e-14 C79.09139,-1.0658141e-14 97,17.90861 97,40 L97,51.453125 L113.736328,51.453125 L113.736328,139.193359 L57.5,166 L0,139.193359 L0,51.453125 L17,51.453125 Z M37,51.453125 L77,51.453125 L77,40 L76.9678398,40 C76.3750564,29.406335 67.6617997,21 57,21 C46.3382003,21 37.6249436,29.406335 37.0321602,40 L37,40 L37,51.453125 Z M23,72 L23,125 L56.8681641,140.966797 L91,125 L91,72 L23,72 Z" id="Trezor-logo" fill="currentColor"></path>
+			<path d="M17,51.453125 L17,40 C17,17.90861 34.90861,-1.0658141e-14 57,-1.0658141e-14 C79.09139,-1.0658141e-14 97,17.90861 97,40 L97,51.453125 L113.736328,51.453125 L113.736328,139.193359 L57.5,166 L0,139.193359 L0,51.453125 L17,51.453125 Z M37,51.453125 L77,51.453125 L77,40 L76.9678398,40 C76.3750564,29.406335 67.6617997,21 57,21 C46.3382003,21 37.6249436,29.406335 37.0321602,40 L37,40 L37,51.453125 Z M23,72 L23,125 L56.8681641,140.966797 L91,125 L91,72 L23,72 Z" id="Trezor-logo" fill="var(--w3o-text-color, currentColor)"></path>
 		</g>
 	</svg>
 `
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 6469b3500..560513b40 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.4.6-alpha.1",
+  "version": "2.5.0-alpha.1",
   "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -63,7 +63,7 @@
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/core": "^2.13.2-alpha.1",
+    "@web3-onboard/core": "^2.14.0-alpha.1",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {