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/package.json b/docs/package.json
index 640548d0e..13de43f20 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -55,23 +55,23 @@
   "type": "module",
   "dependencies": {
     "@web3-onboard/coinbase": "^2.1.4",
-    "@web3-onboard/core": "^2.12.0",
-    "@web3-onboard/dcent": "^2.2.2",
+    "@web3-onboard/core": "^2.14.0",
+    "@web3-onboard/dcent": "^2.2.3",
     "@web3-onboard/enkrypt": "^2.0.0",
     "@web3-onboard/fortmatic": "^2.0.14",
     "@web3-onboard/gas": "^2.1.4",
-    "@web3-onboard/gnosis": "^2.1.5",
-    "@web3-onboard/injected-wallets": "^2.4.0",
-    "@web3-onboard/keepkey": "^2.3.2",
-    "@web3-onboard/keystone": "^2.3.2",
-    "@web3-onboard/ledger": "^2.3.2",
+    "@web3-onboard/gnosis": "^2.1.6",
+    "@web3-onboard/injected-wallets": "^2.6.1",
+    "@web3-onboard/keepkey": "^2.3.3",
+    "@web3-onboard/keystone": "^2.3.3",
+    "@web3-onboard/ledger": "^2.4.2",
     "@web3-onboard/magic": "^2.1.3",
     "@web3-onboard/mew-wallet": "^2.0.0",
     "@web3-onboard/portis": "^2.1.3",
     "@web3-onboard/sequence": "^2.0.4",
     "@web3-onboard/tallyho": "^2.0.1",
     "@web3-onboard/torus": "^2.2.0",
-    "@web3-onboard/trezor": "^2.3.2",
+    "@web3-onboard/trezor": "^2.3.3",
     "@web3-onboard/uauth": "^2.0.1",
     "@web3-onboard/walletconnect": "^2.2.1",
     "@web3-onboard/web3auth": "^2.1.4",
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/[...1]overview/[...1]introduction.md b/docs/src/routes/docs/[...1]overview/[...1]introduction.md
index 23f5ecfa1..47ef55454 100644
--- a/docs/src/routes/docs/[...1]overview/[...1]introduction.md
+++ b/docs/src/routes/docs/[...1]overview/[...1]introduction.md
@@ -23,7 +23,7 @@ Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain
 - **Unified Provider Interface:** All wallet modules expose a provider that is patched to be compliant with the EIP-1193, EIP-1102, EIP-3085 and EIP-3326 specifications. Whether your user is using Ledger or Metamask the provider will operate identically.
 
 - **Dynamic Imports:** Supporting multiple wallets in your app requires a lot of dependencies. Onboard dynamically imports a wallet
-and it's dependencies only when the user selects it, so that minimal bandwidth is used.
+and its dependencies only when the user selects it, so that minimal bandwidth is used.
 
 - **Framework Agnostic:** Avoid framework lock in -- Web3-Onboard works with any framework and includes helper packages for vue & react.
 
diff --git a/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide.md b/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide.md
index b994ed964..1e621c866 100644
--- a/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide.md
+++ b/docs/src/routes/docs/[...1]overview/[...3]onboard.js-migration-guide.md
@@ -71,7 +71,7 @@ We've also added more expansive custom CSS properties so you can style every par
 
 ```
 :root {
- /* CUSTOMIZE THE COLOR  PALLETTE */
+ /* CUSTOMIZE THE COLOR  PALETTE */
  --onboard-success-100: #d1fae3;
  /* CUSTOMIZE ACCOUNT CENTER*/
  --account-center-z-index: 30
@@ -89,7 +89,7 @@ We've also added more expansive custom CSS properties so you can style every par
 }
 ```
 
-The full list of CSS variables for web3-onboard are available [here](/docs/modules/core#custom-styling).
+The full list of CSS variables for web3-onboard is available [here](/docs/modules/core#custom-styling).
 
 ### Other Important Changes
 
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..f2536f09d 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)
@@ -16,7 +16,7 @@ The Onboard styles can customized via [CSS custom properties](https://developer.
 
 ```css
 :root {
-  /* CUSTOMIZE THE COLOR  PALLETTE */
+  /* CUSTOMIZE THE COLOR  PALETTE */
   --onboard-white: white;
   --onboard-black: black;
   --onboard-primary-1: #2f80ed;
diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md
index 9ca88dac5..d85e0bf79 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:
@@ -64,11 +75,20 @@ type InitOptions {
   apiKey?: string
   notify?: Partial<NotifyOptions>
   gas?: typeof gas
+  /**
+   * Customize the connect modal
+   */
+  connect?: ConnectModalOptions
   /**
    * 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
@@ -102,8 +122,11 @@ type AppMetadata = {
   name: string
   // SVG icon string, with height or width (whichever is larger) set to 100% or a valid image URL
   // note: if using an emoji make sure to send base64 string
+  // Note: `icon` is displayed on both mobile AND desktop. If `logo`
+  // below is provided then `icon` displays on mobile and `logo` on desktop
   icon: string
   // Optional wide format logo (ie icon and text) to be displayed in the sidebar of connect modal. Defaults to icon if not provided
+  // Note: This will ONLY display on desktop. It is best used with wide format logos. Use `icon` for standard 40x40 icons.
   logo?: string
   // description of app
   description?: string
@@ -118,7 +141,7 @@ type AppMetadata = {
 }
 
 type TermsOfServiceAgreementOptions = {
-  // user aggrees with exact version of terms and privacy policy
+  // user agrees with exact version of terms and privacy policy
   version: string
   // url that points to the Terms & Conditions of the dapp
   termsUrl?: string
@@ -132,8 +155,23 @@ type RecommendedInjectedWallets = {
 }
 ```
 
+**`connectModal`**
+An object that allows for customizing the connect modal layout and behavior
+
+```typescript
+type ConnectModalOptions = {
+  showSidebar?: boolean
+  /**
+   * Disabled close of the connect modal with background click and
+   * hides the close button forcing an action from the connect modal
+   * Defaults to false
+   */
+  disableClose?: boolean
+}
+```
+
 **`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.
+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 an object for the `en` locale.
 
 ```typescript
 type Locale = string // eg 'en', 'es'
@@ -143,8 +181,38 @@ 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.
+An object that defines whether the account center UI (default and minimal) is enabled and its position on the screen. Currently the account center is enabled for both desktop and mobile devices.
 
 ```ts
 export type AccountCenter = {
@@ -183,7 +251,7 @@ type ContainerElements = {
 ```
 
 **`notify`**
-Notify provides by default transaction notifications for all connected wallets on the current blockchain. When switching chains the previous chain listeners remain active for 60 seconds to allow capture and report of an remaining transactions that may be in flight.
+Notify provides by default transaction notifications for all connected wallets on the current blockchain. When switching chains the previous chain listeners remain active for 60 seconds to allow capture and report of remaining transactions that may be in flight.
 By default transaction notifications are captured if a DAppID is provided in the Onboard config along with the Account Center being enabled.
 An object that defines whether transaction notifications will display (defaults to true if an API key is provided). This object contains an `enabled` flag prop and an optional `transactionHandler` which is a callback that can disable or allow customizations of notifications.
 Currently notifications are positioned in the same location as the account center (either below, if the Account Center is positioned along the top, or above if positioned on the bottom of the view).
@@ -686,7 +754,7 @@ setTimeout(
 ```
 
 **`preflightNotifications`**
-Notify can be used to deliver standard notifications along with preflight information by passing a `PreflightNotificationsOptions` object to the `preflightNotifications` action. This will return a a promise that resolves to the transaction hash (if `sendTransaction` resolves the transaction hash and is successful), the internal notification id (if no `sendTransaction` function is provided) or return nothing if an error occurs or `sendTransaction` is not provided or doesn't resolve to a string.
+Notify can be used to deliver standard notifications along with preflight information by passing a `PreflightNotificationsOptions` object to the `preflightNotifications` action. This will return a promise that resolves to the transaction hash (if `sendTransaction` resolves the transaction hash and is successful), the internal notification id (if no `sendTransaction` function is provided) or return nothing if an error occurs or `sendTransaction` is not provided or doesn't resolve to a string.
 
 Preflight event types include
 
@@ -784,11 +852,11 @@ The `setChain` methods takes an options object with a `chainId` property hex enc
 
 ## Custom Styling
 
-The Onboard styles can customized via [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). The following properties and their default properties can be customized by adding these variables to the `:root` in your CSS file:
+The Onboard styles can be customized via [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). The following properties and their default properties can be customized by adding these variables to the `:root` in your CSS file:
 
 ```css
 :root {
-  /* CUSTOMIZE THE COLOR  PALLETTE */
+  /* CUSTOMIZE THE COLOR  PALETTE */
   --onboard-white: white;
   --onboard-black: black;
   --onboard-primary-1: #2f80ed;
@@ -989,7 +1057,7 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
 
 ## Build Environments
 
-Many of the wallet modules require dependencies that are not normally included in browser builds (namely the node builtin modules such as `crypto`, `buffer`, `util` etc). If you are having build issues you can try the following bundler configs to resolve these dependency issues:
+Many of the wallet modules require dependencies that are not normally included in browser builds (namely the node built-in modules such as `crypto`, `buffer`, `util` etc). If you are having build issues you can try the following bundler configs to resolve these dependency issues:
 
 ### Webpack 4
 
@@ -1070,7 +1138,7 @@ module.exports = {
 
 #### If using create-react-app
 
-[CRACO](https://www.npmjs.com/package/@craco/craco) provides an similar way to override webpack config which is obfuscated in Create React App built applications.
+[CRACO](https://www.npmjs.com/package/@craco/craco) provides a similar way to override webpack config which is obfuscated in Create React App built applications.
 
 The above webpack 5 example can be used in the `craco.config.js` file at the root level in this case.
 
diff --git a/docs/src/routes/docs/[...3]modules/react.md b/docs/src/routes/docs/[...3]modules/react.md
index 82a4c303c..dc4e78d7a 100644
--- a/docs/src/routes/docs/[...3]modules/react.md
+++ b/docs/src/routes/docs/[...3]modules/react.md
@@ -1,6 +1,6 @@
 # React
 
-A collection of React hooks for implementing web3-onboard in to a React project
+A collection of React hooks for implementing web3-onboard into a React project
 
 ## Quickstart with Injected Wallets and Ethers Provider
 
@@ -395,7 +395,7 @@ updateLocale('es')
 
 ## Build Environments
 
-Many of the wallet modules require dependencies that are not normally included in browser builds (namely the node builtin modules such as `crypto`, `buffer`, `util` etc). If you are having build issues you can try the following bundler configs to resolve these dependency issues:
+Many of the wallet modules require dependencies that are not normally included in browser builds (namely the node built-in modules such as `crypto`, `buffer`, `util` etc). If you are having build issues you can try the following bundler configs to resolve these dependency issues:
 
 ### Webpack 4
 
@@ -476,7 +476,7 @@ module.exports = {
 
 #### If using create-react-app
 
-[CRACO](https://www.npmjs.com/package/@craco/craco) provides an similar way to override webpack config which is obfuscated in Create React App built applications.
+[CRACO](https://www.npmjs.com/package/@craco/craco) provides a similar way to override webpack config which is obfuscated in Create React App built applications.
 
 The above webpack 5 example can be used in the `craco.config.js` file at the root level in this case.
 
@@ -582,4 +582,4 @@ export default {
     }
   }
 }
-```
\ No newline at end of file
+```
diff --git a/docs/src/routes/docs/[...4]wallets/injected.md b/docs/src/routes/docs/[...4]wallets/injected.md
index 9d02c1a3b..ebea4c92b 100644
--- a/docs/src/routes/docs/[...4]wallets/injected.md
+++ b/docs/src/routes/docs/[...4]wallets/injected.md
@@ -267,11 +267,12 @@ const injected = injectedModule({
 
 ### Injected Wallets Supported Natively
 
-- Metamask - _Desktop & Mobile_ (Mobile relies on Wallet Connect and is detected inside MetaMask app browser)
+- Metamask - _Desktop & Mobile_
 - Binance - _Desktop_
 - Coinbase - _Desktop & Mobile_
+- Phantom - _Desktop & Mobile_
+- Zerion - _Desktop & Mobile_
 - Tally - _Desktop_
-- Exodus - _Desktop & Mobile_
 - Trust - _Mobile_
 - Opera - _Desktop & Mobile_
 - Status - _Mobile_
@@ -303,6 +304,9 @@ const injected = injectedModule({
 - Core - _Desktop_
 - Bitski - _Desktop & Mobile_
 - Enkrypt - _Desktop & Mobile_
+- Zeal - _Desktop_
+- Exodus - _Desktop & Mobile_
+- Frontier - _Desktop & Mobile_
 
 ## Build Environments
 
diff --git a/docs/src/routes/docs/[...4]wallets/keepkey.md b/docs/src/routes/docs/[...4]wallets/keepkey.md
index 1cf9a49a8..20acb8076 100644
--- a/docs/src/routes/docs/[...4]wallets/keepkey.md
+++ b/docs/src/routes/docs/[...4]wallets/keepkey.md
@@ -41,5 +41,38 @@ const connectedWallets = await onboard.connectWallet()
 console.log(connectedWallets)
 ```
 
+Initialization options:
+```typescript
+type keepkeyInitOptions = {
+  containerElement?: string
+  filter?: Platform
+}
+```
+
+The following is a list of the platforms that can be filtered:
+
+```typescript
+type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
+
+type Platform =
+  | 'Windows Phone'
+  | 'Windows'
+  | 'macOS'
+  | 'iOS'
+  | 'Android'
+  | 'Linux'
+  | 'Chrome OS'
+  | 'Android Browser'
+  | 'Chrome'
+  | 'Chromium'
+  | 'Firefox'
+  | 'Microsoft Edge'
+  | 'Opera'
+  | 'Safari'
+  | 'desktop'
+  | 'mobile'
+  | 'tablet'
+```
+
 ## Build Environments
 For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)
\ No newline at end of file
diff --git a/docs/src/routes/docs/[...4]wallets/keystone.md b/docs/src/routes/docs/[...4]wallets/keystone.md
index 1ec5b2fe1..419af689f 100644
--- a/docs/src/routes/docs/[...4]wallets/keystone.md
+++ b/docs/src/routes/docs/[...4]wallets/keystone.md
@@ -26,6 +26,8 @@ npm install @web3-onboard/keystone
 ```typescript
 type KeystoneOptions = {
   customNetwork?: CustomNetwork
+  filter?: Platform[]
+  containerElement?: string
 }
 
 interface CustomNetwork {
diff --git a/docs/src/routes/docs/[...4]wallets/trezor.md b/docs/src/routes/docs/[...4]wallets/trezor.md
index c4b6bc3be..c021a6a53 100644
--- a/docs/src/routes/docs/[...4]wallets/trezor.md
+++ b/docs/src/routes/docs/[...4]wallets/trezor.md
@@ -28,6 +28,8 @@ type TrezorOptions = {
   email: string
   appUrl: string
   customNetwork?: CustomNetwork
+  filter?: Platform[]
+  containerElement?: string
 }
 
 interface CustomNetwork {
@@ -61,6 +63,8 @@ interface BootstrapNode {
   location: string
   comment: string
 }
+
+type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
 ```
 
 ### Usage
diff --git a/docs/yarn.lock b/docs/yarn.lock
index f0e6b1c53..235bb6efb 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1824,114 +1824,10 @@
     rxjs "^6.6.3"
     typescript "^4.6.2"
 
-"@ledgerhq/cryptoassets@^6.37.0":
-  version "6.37.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/cryptoassets/-/cryptoassets-6.37.0.tgz#302833777bcd210809ca7820afb82cff8da5c296"
-  integrity sha512-xwrDKTS9koQBNNzc7CqgV6zfGHvNFWJjlIL0Kc4O4DVWYR2vUdztUHcvwHD1KPjxNYhVnsgIopmtq47fHt3nMg==
-  dependencies:
-    invariant "2"
-
-"@ledgerhq/devices@^5.51.1":
-  version "5.51.1"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-5.51.1.tgz#d741a4a5d8f17c2f9d282fd27147e6fe1999edb7"
-  integrity sha512-4w+P0VkbjzEXC7kv8T1GJ/9AVaP9I6uasMZ/JcdwZBS3qwvKo5A5z9uGhP5c7TvItzcmPb44b5Mw2kT+WjUuAA==
-  dependencies:
-    "@ledgerhq/errors" "^5.50.0"
-    "@ledgerhq/logs" "^5.50.0"
-    rxjs "6"
-    semver "^7.3.5"
-
-"@ledgerhq/devices@^7.0.4":
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-7.0.4.tgz#c348ca7d9225155c8fdd364206e14ecf409601c1"
-  integrity sha512-smN5/38w/a/TRBjFuqZTs3aSiADpRx6EF0yyFYBbwj/itkw/xfAnGeYzgrUdccEk26yZypcIzjjyCk+wr6gKhw==
-  dependencies:
-    "@ledgerhq/errors" "^6.12.0"
-    "@ledgerhq/logs" "^6.10.1"
-    rxjs "6"
-    semver "^7.3.5"
-
-"@ledgerhq/errors@^5.34.0", "@ledgerhq/errors@^5.50.0":
-  version "5.50.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/errors/-/errors-5.50.0.tgz#e3a6834cb8c19346efca214c1af84ed28e69dad9"
-  integrity sha512-gu6aJ/BHuRlpU7kgVpy2vcYk6atjB4iauP2ymF7Gk0ez0Y/6VSMVSJvubeEQN+IV60+OBK0JgeIZG7OiHaw8ow==
-
-"@ledgerhq/errors@^6.12.0":
-  version "6.12.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/errors/-/errors-6.12.0.tgz#96de365902bbafa2e6c2a5544bb8047b3a3fde84"
-  integrity sha512-gDUpXDz3Os4bK9tzqvwZtjXMCB8LQwNft1f3x6WrwIGuM4Wo5D6ccJDybw4rP9TOJ4qPbRcXFH4avzQGFvwWNA==
-
-"@ledgerhq/hw-app-eth@^6.19.0":
-  version "6.30.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-eth/-/hw-app-eth-6.30.0.tgz#a8e5878b0eac725f0f4fa5e9222ab6e71b536063"
-  integrity sha512-Mr0apxn/oUXD4DZ2gw3fWJQ1rHDzLCzvoGV7Y1/CLoLy85A3w5nROTrFY0+SZNAIB/tqzWZJ9SQpBg5yXVzmmA==
-  dependencies:
-    "@ethersproject/abi" "^5.5.0"
-    "@ethersproject/rlp" "^5.5.0"
-    "@ledgerhq/cryptoassets" "^6.37.0"
-    "@ledgerhq/errors" "^6.12.0"
-    "@ledgerhq/hw-transport" "^6.27.7"
-    "@ledgerhq/hw-transport-mocker" "^6.27.7"
-    "@ledgerhq/logs" "^6.10.1"
-    axios "^0.26.1"
-    bignumber.js "^9.1.0"
-    crypto-js "^4.1.1"
-
-"@ledgerhq/hw-transport-mocker@^6.27.7":
-  version "6.27.7"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-mocker/-/hw-transport-mocker-6.27.7.tgz#7f3e14f3db8b576c912f016aae24a479b2ffc887"
-  integrity sha512-naghEqtwbdpcBsfT4AvtGNI9ahIns2K55zO65dn08qUSj6LlfVzdN9vSbSiNHDcMoRmXttRFJdRQXeEDBMOd0w==
-  dependencies:
-    "@ledgerhq/hw-transport" "^6.27.7"
-    "@ledgerhq/logs" "^6.10.1"
-
-"@ledgerhq/hw-transport-u2f@^5.36.0-deprecated":
-  version "5.36.0-deprecated"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-u2f/-/hw-transport-u2f-5.36.0-deprecated.tgz#66e3ed399a117a1c0110871a055dd54f5fe707fd"
-  integrity sha512-T/+mGHIiUK/ZQATad6DMDmobCMZ1mVST952009jKzhaE1Et2Uy2secU+QhRkx3BfEAkvwa0zSRSYCL9d20Iqjg==
-  dependencies:
-    "@ledgerhq/errors" "^5.34.0"
-    "@ledgerhq/hw-transport" "^5.34.0"
-    "@ledgerhq/logs" "^5.30.0"
-    u2f-api "0.2.7"
-
-"@ledgerhq/hw-transport-webusb@^6.19.0":
-  version "6.27.7"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-webusb/-/hw-transport-webusb-6.27.7.tgz#392d8a87d26ddffb4f2c499b8753d38f09bed62f"
-  integrity sha512-Bjp2PWZAdj9Mp7yxJexcsLvpA2QmsPt1NlBYdN8vTgVajDg08TKcc0n8tD61fTaVJE0zNd4jccK1lN5rcaF17g==
-  dependencies:
-    "@ledgerhq/devices" "^7.0.4"
-    "@ledgerhq/errors" "^6.12.0"
-    "@ledgerhq/hw-transport" "^6.27.7"
-    "@ledgerhq/logs" "^6.10.1"
-
-"@ledgerhq/hw-transport@^5.34.0":
-  version "5.51.1"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-5.51.1.tgz#8dd14a8e58cbee4df0c29eaeef983a79f5f22578"
-  integrity sha512-6wDYdbWrw9VwHIcoDnqWBaDFyviyjZWv6H9vz9Vyhe4Qd7TIFmbTl/eWs6hZvtZBza9K8y7zD8ChHwRI4s9tSw==
-  dependencies:
-    "@ledgerhq/devices" "^5.51.1"
-    "@ledgerhq/errors" "^5.50.0"
-    events "^3.3.0"
-
-"@ledgerhq/hw-transport@^6.27.7":
-  version "6.27.7"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-6.27.7.tgz#ee46c456e012e2a78edbc69d12cc8d12d0a2c082"
-  integrity sha512-VLgqUaQo0PkvSUWJgltD89Q4uj9VGvgwR9i8OBYem+4j0NyDXee7tRxIfGp7SaavzNrnrUh5lXtXQfjfjkMZRg==
-  dependencies:
-    "@ledgerhq/devices" "^7.0.4"
-    "@ledgerhq/errors" "^6.12.0"
-    events "^3.3.0"
-
-"@ledgerhq/logs@^5.30.0", "@ledgerhq/logs@^5.50.0":
-  version "5.50.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-5.50.0.tgz#29c6419e8379d496ab6d0426eadf3c4d100cd186"
-  integrity sha512-swKHYCOZUGyVt4ge0u8a7AwNcA//h4nx5wIi0sruGye1IJ5Cva0GyK9L2/WdX+kWVTKp92ZiEo1df31lrWGPgA==
-
-"@ledgerhq/logs@^6.10.1":
-  version "6.10.1"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-6.10.1.tgz#5bd16082261d7364eabb511c788f00937dac588d"
-  integrity sha512-z+ILK8Q3y+nfUl43ctCPuR4Y2bIxk/ooCQFwZxhtci1EhAtMDzMAx2W25qx8G1PPL9UUOdnUax19+F0OjXoj4w==
+"@ledgerhq/connect-kit-loader@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/connect-kit-loader/-/connect-kit-loader-1.0.2.tgz#8554e16943f86cc2a5f6348a14dfe6e5bd0c572a"
+  integrity sha512-TQ21IjcZOw/scqypaVFY3jHVqI7X7Hta3qN/us6FvTol3AY06UmrhhXGww0E9xHmAbdX241ddwXEiMBSQZFr9g==
 
 "@magic-sdk/commons@^4.1.1":
   version "4.1.1"
@@ -1972,17 +1868,6 @@
   resolved "https://registry.yarnpkg.com/@metamask/detect-provider/-/detect-provider-2.0.0.tgz#4bc2795e5e6f7d8b84b2e845058d2f222c99917d"
   integrity sha512-sFpN+TX13E9fdBDh9lvQeZdJn4qYoRb/6QF2oZZK/Pn559IhCFacPMU1rMuqyXoFQF3JSJfii2l98B87QDPeCQ==
 
-"@metamask/eth-sig-util@^4.0.0":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@metamask/eth-sig-util/-/eth-sig-util-4.0.1.tgz#3ad61f6ea9ad73ba5b19db780d40d9aae5157088"
-  integrity sha512-tghyZKLHZjcdlDqCA3gNZmLeR0XvOE9U1qoQO9ohyAZT6Pya+H9vkBPcsyXytmYLNgVoin7CKCmweo/R43V+tQ==
-  dependencies:
-    ethereumjs-abi "^0.6.8"
-    ethereumjs-util "^6.2.1"
-    ethjs-util "^0.1.6"
-    tweetnacl "^1.0.3"
-    tweetnacl-util "^0.15.1"
-
 "@metamask/eth-sig-util@^5.0.2":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@metamask/eth-sig-util/-/eth-sig-util-5.0.2.tgz#c518279a6e17a88135a13d53a0b970f145ff8bce"
@@ -3084,11 +2969,12 @@
     ethers "5.5.4"
     joi "^17.6.1"
 
-"@web3-onboard/core@^2.12.0":
-  version "2.12.0"
-  resolved "https://registry.npmjs.org/@web3-onboard/core/-/core-2.12.0.tgz#6f2c775064ff9cd1fe6619c62f1b6c1fa71db679"
-  integrity sha512-c4ZPOXqrT8NCT7Sc/EbwGU4UIpULpgWoDpFaQi5gvSLjvcIEUDCrwicEYBxXZ+4UPgONOxcW+PDiSBBVNUqRzg==
+"@web3-onboard/core@^2.13.1":
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.13.1.tgz#c9d953751b239798ba1792c480babbd5b03ba015"
+  integrity sha512-1NL7Eev7Pjy/KxE9LaeoAhaNT+/UVoezXiW/GGFCe7Qx2efb74doCRQjjCf82KInyQAvfr8a/0lOQie4xFZ6ig==
   dependencies:
+    "@unstoppabledomains/resolution" "^8.0"
     "@web3-onboard/common" "^2.2.3"
     bignumber.js "^9.0.0"
     bnc-sdk "^4.6.2"
@@ -3190,21 +3076,16 @@
     "@web3-onboard/common" "^2.2.3"
     "@web3-onboard/hw-common" "^2.0.4"
 
-"@web3-onboard/ledger@^2.3.2":
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/@web3-onboard/ledger/-/ledger-2.3.2.tgz#aaa436393d8ffdc156fd318154df5e61361d54bb"
-  integrity sha512-0KLXmnXNs6iTZEhBdGDgg+L5t8rOTroZjYu8l3Qebd02hNBIeaNxgCXIOQ1Y97qvcQz/8rb6oZ1wMp7unmSA1g==
+"@web3-onboard/ledger@^2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/ledger/-/ledger-2.4.1.tgz#d719a4f3315ead3fce938d7cace7ef6c3f365cc3"
+  integrity sha512-ENA/kmLn2qgqx3SKziMo/10OPxEtEPjBe1e5eyMz7k7XOmb81+Q4rSXoIgTl0uoTu18Yn/5POGCV77/emR40IA==
   dependencies:
-    "@ethereumjs/tx" "^3.4.0"
     "@ethersproject/providers" "^5.5.0"
-    "@ledgerhq/hw-app-eth" "^6.19.0"
-    "@ledgerhq/hw-transport-u2f" "^5.36.0-deprecated"
-    "@ledgerhq/hw-transport-webusb" "^6.19.0"
-    "@metamask/eth-sig-util" "^4.0.0"
+    "@ledgerhq/connect-kit-loader" "^1.0.2"
+    "@walletconnect/client" "^1.7.1"
     "@web3-onboard/common" "^2.2.3"
-    "@web3-onboard/hw-common" "^2.0.4"
-    buffer "^6.0.3"
-    ethereumjs-util "^7.1.3"
+    rxjs "^7.5.2"
 
 "@web3-onboard/magic@^2.1.3":
   version "2.1.3"
@@ -3817,13 +3698,6 @@ axios@^0.21.2:
   dependencies:
     follow-redirects "^1.14.0"
 
-axios@^0.26.1:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.1.tgz#1ede41c51fcf51bbbd6fd43669caaa4f0495aaa9"
-  integrity sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==
-  dependencies:
-    follow-redirects "^1.14.8"
-
 b4a@^1.6.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.1.tgz#9effac93a469a868d024e16fd77162c653544cbd"
@@ -5617,7 +5491,7 @@ ethereum-cryptography@^1.1.2:
     "@scure/bip32" "1.1.0"
     "@scure/bip39" "1.1.0"
 
-ethereumjs-abi@^0.6.8, "ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git":
+"ethereumjs-abi@git+https://github.com/ethereumjs/ethereumjs-abi.git":
   version "0.6.8"
   resolved "git+https://github.com/ethereumjs/ethereumjs-abi.git#ee3994657fa7a427238e6ba92a84d0b529bbcde0"
   dependencies:
@@ -5725,7 +5599,7 @@ ethereumjs-util@^5.0.0, ethereumjs-util@^5.1.1, ethereumjs-util@^5.1.2, ethereum
     rlp "^2.0.0"
     safe-buffer "^5.1.1"
 
-ethereumjs-util@^6.0.0, ethereumjs-util@^6.2.1:
+ethereumjs-util@^6.0.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-6.2.1.tgz#fcb4e4dd5ceacb9d2305426ab1a5cd93e3163b69"
   integrity sha512-W2Ktez4L01Vexijrm5EB6w7dg4n/TgpoYU4avuT5T3Vmnw/eCRtiBrJfQYS/DCSvDIOLn2k57GcHdeBcgVxAqw==
@@ -6075,7 +5949,7 @@ follow-redirects@1.5.10:
   dependencies:
     debug "=3.1.0"
 
-follow-redirects@^1.10.0, follow-redirects@^1.14.0, follow-redirects@^1.14.8:
+follow-redirects@^1.10.0, follow-redirects@^1.14.0:
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
@@ -6472,13 +6346,6 @@ intl-messageformat@^9.3.15:
     "@formatjs/icu-messageformat-parser" "2.1.0"
     tslib "^2.1.0"
 
-invariant@2:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
-  dependencies:
-    loose-envify "^1.0.0"
-
 is-arguments@^1.0.4:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -8242,7 +8109,7 @@ rustbn.js@~0.2.0:
   resolved "https://registry.yarnpkg.com/rustbn.js/-/rustbn.js-0.2.0.tgz#8082cb886e707155fd1cb6f23bd591ab8d55d0ca"
   integrity sha512-4VlvkRUuCJvr2J6Y0ImW7NvTCriMi7ErOAqWk1y69vAdoNIzCF3yPmgeNzx+RQTLEDFq5sHfscn1MwHxP9hNfA==
 
-rxjs@6, rxjs@^6.4.0, rxjs@^6.6.3:
+rxjs@^6.4.0, rxjs@^6.6.3:
   version "6.6.7"
   resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
   integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
@@ -8994,11 +8861,6 @@ typescript@^4.6.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.3.tgz#3aea307c1746b8c384435d8ac36b8a2e580d85db"
   integrity sha512-CIfGzTelbKNEnLpLdGFgdyKhG23CKdKgQPOBc+OUNrkJ2vr+KSzsSV5kq5iWhEQbok+quxgGzrAtGWCyU7tHnA==
 
-u2f-api@0.2.7:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/u2f-api/-/u2f-api-0.2.7.tgz#17bf196b242f6bf72353d9858e6a7566cc192720"
-  integrity sha512-fqLNg8vpvLOD5J/z4B6wpPg4Lvowz1nJ9xdHcCzdUPKcFE/qNCceV2gNZxSJd5vhAZemHr/K/hbzVA0zxB5mkg==
-
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
diff --git a/examples/with-nextjs-13/package.json b/examples/with-nextjs-13/package.json
index 62ebe7b27..4f65f15dc 100644
--- a/examples/with-nextjs-13/package.json
+++ b/examples/with-nextjs-13/package.json
@@ -16,14 +16,14 @@
     "@web3-onboard/dcent": "^2.2.1",
     "@web3-onboard/fortmatic": "^2.0.14",
     "@web3-onboard/gnosis": "^2.1.3",
-    "@web3-onboard/injected-wallets": "^2.2.4",
+    "@web3-onboard/injected-wallets": "^2.6.1",
     "@web3-onboard/keepkey": "^2.3.1",
     "@web3-onboard/keystone": "^2.3.1",
     "@web3-onboard/ledger": "^2.3.1",
     "@web3-onboard/magic": "^2.1.3",
     "@web3-onboard/mew-wallet": "^2.0.0",
     "@web3-onboard/portis": "^2.1.3",
-    "@web3-onboard/react": "^2.3.5",
+    "@web3-onboard/react": "^2.6.0",
     "@web3-onboard/sequence": "^2.0.3",
     "@web3-onboard/tallyho": "^2.0.1",
     "@web3-onboard/torus": "^2.1.3",
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/examples/with-vite-react/package.json b/examples/with-vite-react/package.json
index 05b72bd4d..71a4e5424 100644
--- a/examples/with-vite-react/package.json
+++ b/examples/with-vite-react/package.json
@@ -13,7 +13,7 @@
     "@web3-onboard/dcent": "^2.2.1",
     "@web3-onboard/fortmatic": "^2.0.14",
     "@web3-onboard/gnosis": "^2.1.5",
-    "@web3-onboard/injected-wallets": "^2.2.4",
+    "@web3-onboard/injected-wallets": "^2.6.1-alpha.1",
     "@web3-onboard/keepkey": "^2.3.1",
     "@web3-onboard/keystone": "^2.3.1",
     "@web3-onboard/ledger": "^2.3.1",
diff --git a/examples/with-vuejs-v2/package.json b/examples/with-vuejs-v2/package.json
index 04701b18b..b9655801b 100644
--- a/examples/with-vuejs-v2/package.json
+++ b/examples/with-vuejs-v2/package.json
@@ -7,7 +7,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@web3-onboard/injected-wallets": "^2.2.0",
+    "@web3-onboard/injected-wallets": "^2.6.1-alpha.1",
     "@web3-onboard/vue": "^2.3.1",
     "vue": "^2.6.12",
     "vue-template-compiler": "^2.7.10"
diff --git a/examples/with-vuejs/package.json b/examples/with-vuejs/package.json
index 3c82ad746..3cf80a672 100644
--- a/examples/with-vuejs/package.json
+++ b/examples/with-vuejs/package.json
@@ -8,7 +8,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@web3-onboard/injected-wallets": "^2.0.15",
+    "@web3-onboard/injected-wallets": "^2.6.1-alpha.1",
     "@web3-onboard/vue": "^2.3.1",
     "pinia": "^2.0.16",
     "vue": "^3.2.37",
diff --git a/package.json b/package.json
index b79302ee6..0db6af48f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web3-onboard-monorepo",
-  "version": "2.18.0",
+  "version": "2.19.0",
   "private": true,
   "workspaces": {
     "packages": [
diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts
index 95889241b..91183ad7c 100644
--- a/packages/common/src/types.ts
+++ b/packages/common/src/types.ts
@@ -79,10 +79,17 @@ export interface AppMetadata {
   /* App name */
   name: string
 
-  /* SVG icon string or image url, with height set to 100% */
-  icon: string
-
-  /* SVG logo (icon and text) string or image url, with width set to 100% */
+  /* An SVG icon string or image url, with height set to 100% 
+    Note: `icon` is displayed on both mobile AND desktop. If `logo`
+    below is provided then `icon` displays on mobile and `logo` on
+    desktop.
+  */
+  icon?: string
+
+  /* SVG logo (icon and text) string or image url, with width set to 100% 
+     Note: This will ONLY display on desktop. It is best used with wide
+     format logos. Use `icon` for standard 40x40 icons.
+  */
   logo?: string
 
   /* Description of app*/
diff --git a/packages/core/README.md b/packages/core/README.md
index ceacc81b9..5ca9646a7 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
 }
 ```
 
@@ -76,8 +100,11 @@ type AppMetadata = {
   name: string
   // SVG icon string, with height or width (whichever is larger) set to 100% or a valid image URL
   // note: if using an emoji make sure to send base64 string
+  // Note: `icon` is displayed on both mobile AND desktop. If `logo`
+  // below is provided then `icon` displays on mobile and `logo` on desktop
   icon: string
   // Optional wide format logo (ie icon and text) to be displayed in the sidebar of connect modal. Defaults to icon if not provided
+  // Note: This will ONLY display on desktop. It is best used with wide format logos. Use `icon` for standard 40x40 icons.
   logo?: string
   // description of app
   description?: string
@@ -101,6 +128,33 @@ An object that allows for customization of the Connect Modal and accepts the typ
 ```typescript
 type ConnectModalOptions = {
   showSidebar?: boolean
+  showSidebar?: boolean
+  /**
+   * Disabled close of the connect modal with background click and
+   * hides the close button forcing an action from the connect modal
+   */
+  disableClose?: boolean // defaults to false
+}
+```
+
+**`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
 }
 ```
 
@@ -124,10 +178,10 @@ For an example please see containerElement usage [here](https://github.com/block
 
 ```typescript
 type ContainerElements = {
-  // When attaching the Connect Modal to a container el be aware that the modal was styled to be 
+  // When attaching the Connect Modal to a container el be aware that the modal was styled to be
   // mounted through the app to the html body and will respond to screen width rather than container width
   // This is specifically apparent on mobile so please test thoroughly
-  // Also consider that other DOM elements(specifically Notifications and Account Center) will also 
+  // Also consider that other DOM elements(specifically Notifications and Account Center) will also
   // append to this DOM el if enabled and their own containerEl are not defined
   connectModal?: string
   // when using the accountCenter with a container el the accountCenter position properties are ignored
diff --git a/packages/core/package.json b/packages/core/package.json
index 7273a747f..6c36b53ab 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.13.1",
+  "version": "2.14.0",
   "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/constants.ts b/packages/core/src/constants.ts
index 88791b4be..c71fe8329 100644
--- a/packages/core/src/constants.ts
+++ b/packages/core/src/constants.ts
@@ -25,7 +25,8 @@ export const APP_INITIAL_STATE: AppState = {
   notifications: [],
   locale: '',
   connect: {
-    showSidebar: true
+    showSidebar: true,
+    disableClose: false
   }
 }
 
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/index.ts b/packages/core/src/icons/index.ts
index e44a9ffb7..ded63789b 100644
--- a/packages/core/src/icons/index.ts
+++ b/packages/core/src/icons/index.ts
@@ -1,8 +1,11 @@
+// bn branding
+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 blocknative } from './blocknative.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'
@@ -18,4 +21,3 @@ export { default as caretIcon } from './caret.js'
 export { default as warningIcon } from './warning.js'
 export { default as successIcon } from './success.js'
 export { default as pendingIcon } from './pending.js'
-export { default as poweredByBlocknativeIcon } from './poweredByBlocknative.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 abc5b8330..1b7691747 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -27,10 +27,12 @@ import {
   setLocale,
   setPrimaryWallet,
   setWalletModules,
-  updateConnectModal
+  updateConnectModal,
+  updateTheme
 } from './store/actions.js'
 import type { PatchedEIP1193Provider } from '@web3-onboard/transaction-preview'
 import { getBlocknativeSdk } from './services.js'
+import { defaultBnIcon } from './icons/index.js'
 
 const API = {
   connectWallet,
@@ -47,7 +49,8 @@ const API = {
       preflightNotifications,
       updateBalances,
       updateAccountCenter,
-      setPrimaryWallet
+      setPrimaryWallet,
+      updateTheme
     }
   }
 }
@@ -66,7 +69,8 @@ export type {
   Notification,
   Notify,
   UpdateNotification,
-  PreflightNotificationsOptions
+  PreflightNotificationsOptions,
+  Theme
 } from './types.js'
 
 export type { EIP1193Provider } from '@web3-onboard/common'
@@ -93,7 +97,8 @@ function init(options: InitOptions): OnboardAPI {
     gas,
     connect,
     containerElements,
-    transactionPreview
+    transactionPreview,
+    theme
   } = options
 
   if (containerElements) updateConfiguration({ containerElements })
@@ -204,7 +209,7 @@ function init(options: InitOptions): OnboardAPI {
     transactionPreview
   })
 
-  if (transactionPreview) {
+  if (apiKey && transactionPreview) {
     const getBnSDK = async () => {
       transactionPreview.init({
         containerElement: '#transaction-preview-container',
@@ -220,6 +225,8 @@ function init(options: InitOptions): OnboardAPI {
     getBnSDK()
   }
 
+  theme && updateTheme(theme)
+
   return API
 }
 
@@ -251,7 +258,7 @@ function mountApp() {
 
   target.innerHTML = `
       <style>
-        :host {  
+        :host {
           /* COLORS */
           --white: white;
           --black: black;
@@ -291,10 +298,10 @@ function mountApp() {
           --warning-500: #ffaf00;
           --warning-600: #cc8c00;
           --warning-700: #664600;
-  
+
           /* FONTS */
           --font-family-normal: Sofia Pro;
-  
+
           --font-size-1: 3rem;
           --font-size-2: 2.25rem;
           --font-size-3: 1.5rem;
@@ -302,12 +309,12 @@ function mountApp() {
           --font-size-5: 1rem;
           --font-size-6: .875rem;
           --font-size-7: .75rem;
-  
+
           --font-line-height-1: 24px;
           --font-line-height-2: 20px;
           --font-line-height-3: 16px;
           --font-line-height-4: 12px;
-  
+
           /* SPACING */
           --spacing-1: 3rem;
           --spacing-2: 2rem;
@@ -316,19 +323,19 @@ function mountApp() {
           --spacing-5: 0.5rem;
           --spacing-6: 0.25rem;
           --spacing-7: 0.125rem;
-  
+
           /* BORDER RADIUS */
-          --border-radius-1: 24px;  
-          --border-radius-2: 20px;  
-          --border-radius-3: 16px;  
-          --border-radius-4: 12px;  
-          --border-radius-5: 8px;  
+          --border-radius-1: 24px;
+          --border-radius-2: 20px;
+          --border-radius-3: 16px;
+          --border-radius-4: 12px;
+          --border-radius-5: 8px;
 
           /* SHADOWS */
           --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;
@@ -336,9 +343,10 @@ function mountApp() {
           --modal-right: unset;
           --modal-bottom: unset;
           --modal-left: unset;
-          
+
           /* 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 6d0b0886d..009be20ce 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 }
 }
@@ -157,6 +175,12 @@ export type i18n = typeof en
 
 export type ConnectModalOptions = {
   showSidebar?: boolean
+  /**
+   * Disabled close of the connect modal with background click and
+   * hides the close button forcing an action from the connect modal
+   * Defaults to false
+   */
+  disableClose?: boolean
 }
 
 export type CommonPositions =
@@ -187,18 +211,18 @@ export type AccountCenterOptions = {
 }
 
 export type ContainerElements = {
-  /** When attaching the Connect Modal to a container el be aware that 
-   * the modal was styled to be mounted through the app to the html body 
+  /** When attaching the Connect Modal to a container el be aware that
+   * the modal was styled to be mounted through the app to the html body
    * and will respond to screen width rather than container width
    * This is specifically apparent on mobile so please test thoroughly
-   * Also consider that other DOM elements(specifically Notifications and 
-   * Account Center) will also append to this DOM el if enabled and their 
+   * Also consider that other DOM elements(specifically Notifications and
+   * Account Center) will also append to this DOM el if enabled and their
    * own containerEl are not defined
-  */
+   */
   connectModal?: string
-  /** when using the accountCenter with a container el the accountCenter 
-   * position properties are ignored 
-  */
+  /** when using the accountCenter with a container el the accountCenter
+   * position properties are ignored
+   */
   accountCenter?: string
 }
 
diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts
index 76feb72d8..2ae077ee8 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()
@@ -108,7 +109,7 @@ const agreement = Joi.object({
 const appMetadata = Joi.object({
   name: Joi.string().required(),
   description: Joi.string().required(),
-  icon: Joi.string().required(),
+  icon: Joi.string(),
   logo: Joi.string(),
   gettingStartedGuide: Joi.string(),
   email: Joi.string(),
@@ -170,7 +171,8 @@ const accountCenter = Joi.object({
 })
 
 const connectModalOptions = Joi.object({
-  showSidebar: Joi.boolean()
+  showSidebar: Joi.boolean(),
+  disableClose: Joi.boolean()
 })
 
 const containerElements = Joi.object({
@@ -178,6 +180,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 +213,8 @@ const initOptions = Joi.object({
   transactionPreview: Joi.object({
     patchProvider: Joi.function().required(),
     init: Joi.function().required()
-  })
+  }),
+  theme: theme
 })
 
 const connectOptions = Joi.object({
@@ -379,3 +395,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 5e2f1170f..dcd5e2be4 100644
--- a/packages/core/src/views/connect/Index.svelte
+++ b/packages/core/src/views/connect/Index.svelte
@@ -31,7 +31,7 @@
     takeUntil
   } from 'rxjs'
 
-  import { blocknative } from '../../icons/index.js'
+  import { defaultBnIcon } from '../../icons/index.js'
 
   import {
     getChainId,
@@ -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,12 +450,35 @@
     width: 2.5rem;
     min-width: 2.5rem;
     justify-content: center;
+    align-items: center;
+  }
+
+  .disabled {
+    opacity: 0.2;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  :global(.icon-container svg) {
+    display: block;
+    height: 100%;
+    width: auto;
   }
 
   .w-full {
     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;
@@ -493,7 +500,7 @@
 <svelte:window bind:innerWidth={windowWidth} />
 
 {#if !autoSelect.disableModals}
-  <Modal {close}>
+  <Modal close={!connect.disableClose && close}>
     <div class="container">
       {#if connect.showSidebar}
         <Sidebar step={$modalStep$} />
@@ -510,7 +517,7 @@
                   <img src={icon} alt="logo" />
                 {/if}
               {:else}
-                {@html blocknative}
+                {@html defaultBnIcon}
               {/if}
             </div>
             <div class="flex flex-column justify-center w-full">
@@ -552,11 +559,12 @@
             </div>
           </div>
         {/if}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div on:click={close} class="button-container absolute">
-          <CloseButton />
-        </div>
-
+        {#if !connect.disableClose}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <div on:click={close} class="button-container absolute">
+            <CloseButton />
+          </div>
+        {/if}
         <div class="scroll-container" bind:this={scrollContainer}>
           {#if $modalStep$ === 'selectingWallet' || windowWidth <= MOBILE_WINDOW_WIDTH}
             {#if wallets.length}
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 db196620d..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 { blocknative, 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,16 +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 {
@@ -40,23 +39,19 @@
     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 {
     display: flex;
+    height: 3.5rem;
+    width: auto;
+    min-width: 3.5rem;
+    max-width: 100%;
   }
 
   .subheading {
@@ -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;
@@ -152,12 +142,12 @@
       <div class="icon-container">
         {#if logo || icon}
           {#if isSVG(logo || icon)}
-            {@html logo || icon}
+            {@html logo || icon}​
           {:else}
             <img src={logo || icon} alt="logo" />
           {/if}
         {:else}
-          {@html blocknative}
+          {@html defaultBnIcon}
         {/if}
       </div>
     {/if}
@@ -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/README.md b/packages/dcent/README.md
index 9d996d725..51a84d900 100644
--- a/packages/dcent/README.md
+++ b/packages/dcent/README.md
@@ -48,9 +48,20 @@ const connectedWallets = await onboard.connectWallet()
 console.log(connectedWallets)
 ```
 
+Initialization options:
+```typescript
+type dcentInitOptions = {
+  customNetwork?: CustomNetwork
+  filter?: Platform[]
+  containerElement?: string
+}
+```
+
 The following is a list of the platforms that can be filtered:
 
 ```typescript
+type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
+
 type Platform =
   | 'Windows Phone'
   | 'Windows'
diff --git a/packages/dcent/package.json b/packages/dcent/package.json
index eb1ebba60..9c8e0640e 100644
--- a/packages/dcent/package.json
+++ b/packages/dcent/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/dcent",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "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.4",
+    "@web3-onboard/hw-common": "^2.1.0",
     "@ethereumjs/tx": "^3.4.0",
     "@ethersproject/providers": "^5.5.0",
     "eth-dcent-keyring": "^0.2.2"
diff --git a/packages/dcent/src/index.ts b/packages/dcent/src/index.ts
index a15dc5e8e..d6a35c241 100644
--- a/packages/dcent/src/index.ts
+++ b/packages/dcent/src/index.ts
@@ -59,10 +59,12 @@ const generateAccounts = async (
 
 function dcent({
   customNetwork,
-  filter
+  filter,
+  containerElement
 }: {
   customNetwork?: CustomNetwork
   filter?: Platform[]
+  containerElement?: string
 } = {}): WalletInit {
   const getIcon = async () => (await import('./icon.js')).default
 
@@ -135,7 +137,8 @@ function dcent({
             assets,
             chains,
             scanAccounts,
-            supportsCustomPath: false
+            supportsCustomPath: false,
+            containerElement
           })
           if (accounts.length) {
             eventEmitter.emit('accountsChanged', [accounts[0].address])
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 58eb718ad..187853687 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.1",
+    "@web3-onboard/core": "^2.14.0",
     "@web3-onboard/coinbase": "^2.1.4",
     "@web3-onboard/transaction-preview": "^2.0.0",
-    "@web3-onboard/dcent": "^2.2.2",
+    "@web3-onboard/dcent": "^2.2.3",
     "@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/injected-wallets": "^2.6.0",
-    "@web3-onboard/keepkey": "^2.3.2",
-    "@web3-onboard/keystone": "^2.3.2",
-    "@web3-onboard/ledger": "^2.4.1",
+    "@web3-onboard/gnosis": "^2.1.6",
+    "@web3-onboard/keepkey": "^2.3.3",
+    "@web3-onboard/keystone": "^2.3.3",
+    "@web3-onboard/ledger": "^2.4.2",
+    "@web3-onboard/injected-wallets": "^2.6.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",
     "@web3-onboard/torus": "^2.2.1",
-    "@web3-onboard/trezor": "^2.3.2",
     "@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 5bc289c32..ea2b1953e 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(
@@ -132,7 +129,8 @@
 
   const trezorOptions = {
     email: 'test@test.com',
-    appUrl: 'https://www.blocknative.com'
+    appUrl: 'https://www.blocknative.com',
+    // containerElement: '#sample-container-el'
   }
   const trezor = trezorModule(trezorOptions)
 
@@ -155,7 +153,9 @@
   const sequence = sequenceModule()
   const enkrypt = enkryptModule()
   const mewWallet = mewWalletModule()
-  const transactionPreview = transactionPreviewModule()
+  const transactionPreview = transactionPreviewModule({
+    requireTransactionApproval: true
+  })
 
   const onboard = Onboard({
     wallets: [
@@ -191,12 +191,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',
@@ -235,12 +229,12 @@
       }
     ],
     // connect: {
-    //   showSidebar: false
+    //   disableClose: true
     // },
     appMetadata: {
       name: 'Blocknative',
-      icon: blocknativeIcon,
-      logo: blocknativeLogo,
+      // icon: blocknativeIcon,
+      // logo: blocknativeLogo,
       description: 'Demo app for Onboard V2',
       recommendedInjectedWallets: [
         { name: 'MetaMask', url: 'https://metamask.io' },
@@ -293,7 +287,7 @@
         },
         position: 'topRight'
       }
-    }
+    },
     // containerElements: {
     // // El must be present at time of JS script execution
     // // See ../public/index.html for element example
@@ -301,8 +295,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 +455,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 +497,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 +512,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 +606,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 +713,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..d72881f6a 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",
   "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 c07d2f7d4..63bd58881 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.4",
+  "version": "2.1.0",
   "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 7b2c9a27f..ff34593ad 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;
@@ -79,6 +79,7 @@ const mountAccountSelect = (
         --font-family-normal: Sofia Pro;
         --font-family-light: Sofia Pro Light;
         --font-size-5: 1rem;
+        --font-size-6: .875rem;
         --font-size-7: .75rem;
         --font-line-height-1: 24px;
 
@@ -95,12 +96,27 @@ 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>
   `
+  const containerElementQuery = selectAccountOptions.containerElement || 'body'
+
+  const containerElement = document.querySelector(containerElementQuery)
+
+  if (!containerElement) {
+    throw new Error(
+      `Element with query ${containerElementQuery} does not exist.`
+    )
+  }
 
-  document.body.appendChild(accountSelectDomElement)
+  containerElement.appendChild(accountSelectDomElement)
 
   const app = new AccountSelect({
     target: target,
diff --git a/packages/hw-common/src/elements/AddressTable.svelte b/packages/hw-common/src/elements/AddressTable.svelte
index abe6fd761..711cc08d1 100644
--- a/packages/hw-common/src/elements/AddressTable.svelte
+++ b/packages/hw-common/src/elements/AddressTable.svelte
@@ -21,28 +21,20 @@
   }
 
   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,
   td {
     text-align: left;
-    padding: 0.5rem 0.5rem;
+    padding: 0.4rem 0.5rem;
   }
 
   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-5,
-      var(--onboard-font-size-5, var(--font-size-5))
+      --account-select-font-size-6,
+      var(--onboard-font-size-6, var(--font-size-6))
     );
     line-height: var(
       --account-select-font-line-height-1,
@@ -59,12 +51,12 @@
       --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 {
     min-height: 4.5rem;
-    max-height: 27rem;
+    max-height: 14rem;
     overflow: auto;
   }
 
@@ -90,6 +82,24 @@
   .pointer {
     cursor: pointer;
   }
+
+  @media all and (min-width: 768px) {
+    .address-table {
+      max-height: 27rem;
+    }
+
+    td {
+      font-size: var(
+        --account-select-font-size-5,
+        var(--onboard-font-size-5, var(--font-size-5))
+      );
+    }
+
+    th,
+    td {
+      padding: 0.5rem 0.5rem;
+    }
+  }
 </style>
 
 <div class="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 5cc436ba3..4c1aeb423 100644
--- a/packages/hw-common/src/elements/TableHeader.svelte
+++ b/packages/hw-common/src/elements/TableHeader.svelte
@@ -10,7 +10,7 @@
 <style>
   button {
     align-items: center;
-    padding: 0.75rem 1.5rem;
+    padding: 0.5rem 0.5rem;
     color: var(--account-select-white, var(--onboard-white, var(--white)));
     border-radius: 1.5rem;
     font-family: var(
@@ -20,29 +20,21 @@
     font-style: normal;
     font-weight: bold;
     font-size: var(
-      --account-select-font-size-5,
-      var(--onboard-font-size-5, var(--font-size-5))
+      --account-select-font-size-6,
+      var(--onboard-font-size-6, var(--font-size-6))
     );
     line-height: var(
       --account-select-font-line-height-1,
       var(--onboard-line-height-1, var(--line-height-1))
     );
     border: none;
+
+    width: 8rem;
   }
 
   .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;
@@ -72,7 +64,7 @@
 
   input:disabled {
     background: var(
-      --account-select-gray-100,
+      --account-select-accent-background-color,
       var(--onboard-gray-100, var(--gray-100))
     );
   }
@@ -80,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;
@@ -90,8 +82,8 @@
     align-items: center;
     position: relative;
     cursor: pointer;
-    height: 1.5rem;
-    width: 1.5rem;
+    height: 0.5rem;
+    width: 0.5rem;
   }
 
   input[type='checkbox']:hover {
@@ -126,10 +118,14 @@
   .checkbox-container {
     display: flex;
     align-items: center;
+    position: absolute;
+    top: 238px;
+    left: 14px;
+    font-size: 14px;
   }
 
   .checkbox-input {
-    margin-right: 0.75rem;
+    margin-right: 0.5rem;
   }
 
   .error-msg {
@@ -137,34 +133,76 @@
       --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;
+    position: absolute;
+    top: 260px;
+    left: 18px;
   }
 
   .table-controls {
-    height: 3.5rem;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: center;
     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 {
     cursor: pointer;
   }
+
+  @media all and (min-width: 768px) {
+    .checkbox-container {
+      display: flex;
+      align-items: center;
+      position: unset;
+      top: unset;
+      left: unset;
+      font-size: unset;
+    }
+
+    .checkbox-input {
+      margin-right: 0.75rem;
+    }
+
+    .error-msg {
+      position: unset;
+      top: unset;
+      left: unset;
+    }
+
+    .table-controls {
+      height: 3.5rem;
+      justify-content: space-between;
+    }
+
+    input[type='checkbox'] {
+      height: 1.5rem;
+      width: 1.5rem;
+    }
+
+    button {
+      padding: 0.75rem 1.5rem;
+      font-size: var(
+        --account-select-font-size-5,
+        var(--onboard-font-size-5, var(--font-size-5))
+      );
+      width: unset;
+    }
+  }
+
+  @media all and (max-width: 326px) {
+    .checkbox-container {
+      top: 328px;
+    }
+    .error-msg {
+      top: 350px;
+    }
+  }
 </style>
 
 <div class="table-controls">
diff --git a/packages/hw-common/src/entry-modal.ts b/packages/hw-common/src/entry-modal.ts
index daecd4512..77e1d32da 100644
--- a/packages/hw-common/src/entry-modal.ts
+++ b/packages/hw-common/src/entry-modal.ts
@@ -215,7 +215,8 @@ const passphraseHTML = `
 export const entryModal = (
   modalType: string,
   submit: (value: string) => void,
-  cancel: () => void
+  cancel: () => void,
+  containerElement?: string
 ): void => {
   const modalHtml = modalType === 'pin' ? pinHTML : passphraseHTML
 
@@ -236,13 +237,23 @@ export const entryModal = (
     }
   }
 
+  const containerElementQuery = containerElement || 'body'
+
+  const containerEl = document.querySelector(containerElementQuery)
+
+  if (!containerEl) {
+    throw new Error(
+      `Element with query ${containerElementQuery} does not exist.`
+    )
+  }
+
   // Creates a modal component which gets
   // mounted to the body and is passed the pin html into it's slot
   const div = document.createElement('div')
   div.innerHTML = modalHtml
   div.className = 'keepkey-modal'
   const pinModal = new Modal({
-    target: document.body,
+    target: containerEl,
     props: {
       closeModal: () => {
         // Cancels any action that the keepkey wallet may be doing
diff --git a/packages/hw-common/src/types.ts b/packages/hw-common/src/types.ts
index b9b7ad960..9f9f75127 100644
--- a/packages/hw-common/src/types.ts
+++ b/packages/hw-common/src/types.ts
@@ -43,6 +43,7 @@ export type SelectAccountOptions = {
   chains: Chain[] // the selectable chains/networks to scan for balance
   scanAccounts: ScanAccounts
   supportsCustomPath?: boolean
+  containerElement?: string
 }
 
 export type BasePath = {
diff --git a/packages/hw-common/src/validation.ts b/packages/hw-common/src/validation.ts
index d2da3a50b..2b202941d 100644
--- a/packages/hw-common/src/validation.ts
+++ b/packages/hw-common/src/validation.ts
@@ -28,7 +28,8 @@ const selectAccountOptions = Joi.object({
   assets: assets,
   chains: chains,
   scanAccounts: Joi.function().arity(1).required(),
-  supportsCustomPath: Joi.bool()
+  supportsCustomPath: Joi.bool(),
+  containerElement: Joi.string()
 })
 
 export const validateSelectAccountOptions = (
diff --git a/packages/hw-common/src/views/AccountSelect.svelte b/packages/hw-common/src/views/AccountSelect.svelte
index 81ca6cef7..0efdea2c1 100644
--- a/packages/hw-common/src/views/AccountSelect.svelte
+++ b/packages/hw-common/src/views/AccountSelect.svelte
@@ -21,7 +21,8 @@
     assets,
     chains,
     scanAccounts,
-    supportsCustomPath = true
+    supportsCustomPath = true,
+    containerElement
   } = selectAccountOptions
 
   let accountsListObject: AccountsList | undefined
@@ -123,17 +124,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 +246,7 @@
 
   select:disabled {
     background: var(
-      --account-select-gray-100,
+      --account-select-accent-background-color,
       var(--onboard-gray-100, var(--gray-100))
     );
   }
@@ -269,11 +261,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;
@@ -282,21 +271,32 @@
       var(--account-select-modal-z-index)
     );
     display: flex;
-    width: 100vw;
-    height: 100vh;
     align-items: center;
     justify-content: center;
     backdrop-filter: blur(4px);
-    background-color: rgba(0, 0, 0, 0.2);
+    background: var(--account-select-background-color, rgba(0, 0, 0, 0.2));
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .h-w-100 {
+    width: 100vw;
+    height: 100vh;
   }
 
   .hardware-connect-modal {
-    width: 50rem;
+    width: 100%;
+    flex-flow: column;
+    display: flex;
     max-height: 51.75rem;
-    display: table;
-    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;
@@ -320,14 +320,13 @@
       --onboard-account-select-modal-right,
       var(--account-select-modal-right)
     );
+    max-height: 100vh;
+    overflow: scroll;
   }
 
   .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;
@@ -337,6 +336,7 @@
 
   .modal-controls {
     display: flex;
+    flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     padding: 1rem;
@@ -344,10 +344,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(
@@ -366,14 +362,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))
-    );
-  }
-
-  .base-path-select {
-    min-width: 20rem;
+    color: var(--account-select-gray-700, inherit);
   }
 
   .asset-select {
@@ -396,19 +385,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 {
@@ -421,28 +405,51 @@
   .table-section {
     max-height: 31.8rem;
     padding: 1rem;
+    margin-top: 2rem;
   }
 
   .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 {
+      width: 50rem;
+      display: table;
+      flex-flow: unset;
+    }
+    .modal-controls {
+      flex-wrap: nowrap;
+    }
+
+    .base-path-select {
+      min-width: 20rem;
+    }
+
+    .table-section {
+      margin-top: unset;
+    }
+    
+    .account-select-modal-position {
+      max-height: unset;
+      overflow: unset;
+    }
   }
 </style>
 
-<div class="container">
+<div
+  class="container"
+  class:h-w-100={!containerElement}
+  class:fixed={!containerElement}
+>
   <div
-    class="hardware-connect-modal account-select-modal-position"
+    class="hardware-connect-modal"
+    class:account-select-modal-position={!containerElement}
     transition:fade
   >
     <header class="connect-wallet-header">
@@ -462,7 +469,7 @@
             on:change={handleCustomPath}
           />
           <span
-            class="input-select"
+            class="hidden-input-select"
             on:click={toggleDerivationPathToDropdown}
           />
         {:else if !customDerivationPath}
diff --git a/packages/injected/README.md b/packages/injected/README.md
index 7e01fe286..e4a0d9017 100644
--- a/packages/injected/README.md
+++ b/packages/injected/README.md
@@ -33,6 +33,48 @@ const connectedWallets = await onboard.connectWallet()
 
 console.log(connectedWallets)
 ```
+### Injected Wallets Supported Natively
+
+- Metamask - _Desktop & Mobile_
+- Binance - _Desktop_
+- Coinbase - _Desktop & Mobile_
+- Phantom - _Desktop & Mobile_
+- Zerion - _Desktop & Mobile_
+- Tally - _Desktop_
+- Trust - _Mobile_
+- Opera - _Desktop & Mobile_
+- Status - _Mobile_
+- Alphawallet - _Mobile_
+- Atoken - _Mobile_
+- Bitpie - _Mobile_
+- Blockwallet - _Desktop_
+- Brave - _Desktop & Mobile_
+- D'Cent - _Mobile_
+- Frame - _Desktop_
+- Huobiwallet - _Mobile_
+- Hyperpay - _Mobile_
+- IMtoken - _Mobile_
+- Liquality - _Desktop_
+- Meetone - _Mobile_
+- Mykey - _Mobile_
+- Ownbit - _Mobile_
+- Tokenpocket - _Desktop & Mobile_
+- TP - _Mobile_
+- xDefi - _Desktop & Mobile_
+- 1inch - _Mobile_
+- Tokenary - _Mobile_
+- GameStop - _Desktop_
+- Rabby - _Desktop_
+- MathWallet - _Desktop & Mobile_
+- Gamestop - _Desktop_
+- Bitkeep - _Desktop & Mobile_
+- Sequence - _Desktop & Mobile_
+- Core - _Desktop_
+- Bitski - _Desktop & Mobile_
+- Enkrypt - _Desktop & Mobile_
+- Zeal - _Desktop_
+- Exodus - _Desktop & Mobile_
+- Frontier - _Desktop & Mobile_
 
 ## Filtering Wallets
 
diff --git a/packages/injected/package.json b/packages/injected/package.json
index 6d8fd7550..f1b583574 100644
--- a/packages/injected/package.json
+++ b/packages/injected/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/injected-wallets",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "Injected wallet module for connecting browser extension and mobile wallets 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/injected/src/constants.ts b/packages/injected/src/constants.ts
index 7cdb119ab..84941f881 100644
--- a/packages/injected/src/constants.ts
+++ b/packages/injected/src/constants.ts
@@ -18,5 +18,6 @@ export const WALLET_NAMES: { [key: string]: string } = {
   core: 'Core',
   enkrypt: 'Enkrypt',
   frontier: 'Frontier',
-  zerion: 'Zerion'
+  zerion: 'Zerion',
+  rainbow: 'Rainbow'
 }
diff --git a/packages/injected/src/icons/rainbow.ts b/packages/injected/src/icons/rainbow.ts
new file mode 100644
index 000000000..1610bfcd1
--- /dev/null
+++ b/packages/injected/src/icons/rainbow.ts
@@ -0,0 +1,66 @@
+export default `
+  <svg width="100%" height="100%" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1_19)">
+      <mask id="mask0_1_19" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">
+        <circle cx="60" cy="60" r="60" fill="#D9D9D9"/>
+      </mask>
+      <g mask="url(#mask0_1_19)">
+        <rect width="120" height="120" fill="url(#paint0_linear_1_19)"/>
+      </g>
+      <path d="M26.6667 41.6667H31.6667C57.44 41.6667 78.3333 62.56 78.3333 88.3333V93.3333H88.3333C91.0948 93.3333 93.3333 91.0947 93.3333 88.3333C93.3333 54.2758 65.7242 26.6667 31.6667 26.6667C28.9052 26.6667 26.6667 28.9052 26.6667 31.6667V41.6667Z" fill="url(#paint1_radial_1_19)"/>
+      <path d="M80 88.3333H93.3333C93.3333 91.0948 91.0947 93.3333 88.3333 93.3333H80V88.3333Z" fill="url(#paint2_linear_1_19)"/>
+      <path d="M31.6667 26.6667L31.6667 40H26.6667L26.6667 31.6667C26.6667 28.9052 28.9052 26.6667 31.6667 26.6667Z" fill="url(#paint3_linear_1_19)"/>
+      <path d="M26.6666 40H31.6666C58.3604 40 80 61.6396 80 88.3333V93.3333H65V88.3333C65 69.9238 50.0761 55 31.6666 55H26.6666V40Z" fill="url(#paint4_radial_1_19)"/>
+      <path d="M66.6666 88.3333H80V93.3333H66.6666V88.3333Z" fill="url(#paint5_linear_1_19)"/>
+      <path d="M26.6666 53.3333L26.6666 40L31.6666 40L31.6666 53.3333H26.6666Z" fill="url(#paint6_linear_1_19)"/>
+      <path d="M26.6666 61.6667C26.6666 64.4281 28.9052 66.6667 31.6666 66.6667C43.6328 66.6667 53.3333 76.3672 53.3333 88.3333C53.3333 91.0948 55.5719 93.3333 58.3333 93.3333H66.6666V88.3333C66.6666 69.0034 50.9966 53.3333 31.6666 53.3333H26.6666V61.6667Z" fill="url(#paint7_radial_1_19)"/>
+      <path d="M53.3333 88.3333H66.6666V93.3333H58.3333C55.5719 93.3333 53.3333 91.0948 53.3333 88.3333Z" fill="url(#paint8_radial_1_19)"/>
+      <path d="M31.6666 66.6667C28.9052 66.6667 26.6666 64.4281 26.6666 61.6667L26.6666 53.3333L31.6666 53.3333L31.6666 66.6667Z" fill="url(#paint9_radial_1_19)"/>
+    </g>
+    <defs>
+      <linearGradient id="paint0_linear_1_19" x1="60" y1="0" x2="60" y2="120" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#174299"/>
+        <stop offset="1" stop-color="#001E59"/>
+      </linearGradient>
+      <radialGradient id="paint1_radial_1_19" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(31.6667 88.3333) rotate(-90) scale(61.6667)">
+        <stop offset="0.770277" stop-color="#FF4000"/>
+        <stop offset="1" stop-color="#8754C9"/>
+      </radialGradient>
+      <linearGradient id="paint2_linear_1_19" x1="79.1666" y1="90.8333" x2="93.3333" y2="90.8333" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#FF4000"/>
+        <stop offset="1" stop-color="#8754C9"/>
+      </linearGradient>
+      <linearGradient id="paint3_linear_1_19" x1="29.1667" y1="26.6667" x2="29.1667" y2="40.8333" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#8754C9"/>
+        <stop offset="1" stop-color="#FF4000"/>
+      </linearGradient>
+      <radialGradient id="paint4_radial_1_19" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(31.6666 88.3333) rotate(-90) scale(48.3333)">
+        <stop offset="0.723929" stop-color="#FFF700"/>
+        <stop offset="1" stop-color="#FF9901"/>
+      </radialGradient>
+      <linearGradient id="paint5_linear_1_19" x1="66.6666" y1="90.8333" x2="80" y2="90.8333" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#FFF700"/>
+        <stop offset="1" stop-color="#FF9901"/>
+      </linearGradient>
+      <linearGradient id="paint6_linear_1_19" x1="29.1666" y1="53.3333" x2="29.1666" y2="40" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#FFF700"/>
+        <stop offset="1" stop-color="#FF9901"/>
+      </linearGradient>
+      <radialGradient id="paint7_radial_1_19" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(31.6666 88.3333) rotate(-90) scale(35)">
+        <stop offset="0.59513" stop-color="#00AAFF"/>
+        <stop offset="1" stop-color="#01DA40"/>
+      </radialGradient>
+      <radialGradient id="paint8_radial_1_19" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(52.5 90.8333) scale(14.1667 37.7778)">
+        <stop stop-color="#00AAFF"/>
+        <stop offset="1" stop-color="#01DA40"/>
+      </radialGradient>
+      <radialGradient id="paint9_radial_1_19" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(29.1666 67.5) rotate(-90) scale(14.1667 268.642)">
+        <stop stop-color="#00AAFF"/>
+        <stop offset="1" stop-color="#01DA40"/>
+      </radialGradient>
+      <clipPath id="clip0_1_19">
+        <rect width="120" height="120" fill="white"/>
+      </clipPath>
+    </defs>
+  </svg>
+`
diff --git a/packages/injected/src/icons/zerion.ts b/packages/injected/src/icons/zerion.ts
index d568720fd..8d6689170 100644
--- a/packages/injected/src/icons/zerion.ts
+++ b/packages/injected/src/icons/zerion.ts
@@ -2,4 +2,4 @@ export default `<svg width="100%" height="100%" viewBox="0 0 512 512" fill="none
 <path d="M0 140.8C0 91.5154 0 66.8731 9.59143 48.0488C18.0283 31.4906 31.4906 18.0283 48.0488 9.59143C66.8731 0 91.5154 0 140.8 0H371.2C420.485 0 445.127 0 463.951 9.59143C480.509 18.0283 493.972 31.4906 502.409 48.0488C512 66.8731 512 91.5154 512 140.8V371.2C512 420.485 512 445.127 502.409 463.951C493.972 480.509 480.509 493.972 463.951 502.409C445.127 512 420.485 512 371.2 512H140.8C91.5154 512 66.8731 512 48.0488 502.409C31.4906 493.972 18.0283 480.509 9.59143 463.951C0 445.127 0 420.485 0 371.2V140.8Z" fill="#2962EF"/>
 <path d="M111.048 128C102.274 128 98.8931 138.85 106.256 143.382L290.443 254.441C295.034 257.267 301.157 256.15 304.319 251.909L385.301 145.594C390.807 138.208 385.244 128 375.713 128H111.048Z" fill="white"/>
 <path d="M400.538 384C409.311 384 412.78 373.092 405.419 368.561L221.178 257.516C216.587 254.69 210.612 255.948 207.452 260.188L126.312 366.482C120.808 373.866 126.545 384 136.074 384H400.538Z" fill="white"/>
-</svg>`
\ No newline at end of file
+</svg>`
diff --git a/packages/injected/src/types.ts b/packages/injected/src/types.ts
index cd5d12726..8458f7d29 100644
--- a/packages/injected/src/types.ts
+++ b/packages/injected/src/types.ts
@@ -53,7 +53,8 @@ export enum ProviderIdentityFlag {
   Enkrypt = 'isEnkrypt',
   Zeal = 'isZeal',
   Phantom = 'isPhantom',
-  Zerion = 'isZerion'
+  Zerion = 'isZerion',
+  Rainbow = 'isRainbow'
 }
 
 export enum ProviderLabel {
@@ -97,7 +98,8 @@ export enum ProviderLabel {
   Enkrypt = 'Enkrypt',
   Zeal = 'Zeal',
   Phantom = 'Phantom',
-  Zerion = 'Zerion'
+  Zerion = 'Zerion',
+  Rainbow = 'Rainbow'
 }
 
 export interface MeetOneProvider extends ExternalProvider {
diff --git a/packages/injected/src/wallets.ts b/packages/injected/src/wallets.ts
index f898050d4..c0891e22d 100644
--- a/packages/injected/src/wallets.ts
+++ b/packages/injected/src/wallets.ts
@@ -660,6 +660,16 @@ const phantom: InjectedWalletModule = {
   platforms: ['all']
 }
 
+const rainbow: InjectedWalletModule = {
+  label: ProviderLabel.Rainbow,
+  injectedNamespace: InjectedNameSpace.Ethereum,
+  checkProviderIdentity: ({ provider }) =>
+    !!provider && !!provider[ProviderIdentityFlag.Rainbow],
+  getIcon: async () => (await import('./icons/rainbow.js')).default,
+  getInterface: getInjectedInterface(ProviderIdentityFlag.Rainbow),
+  platforms: ['all']
+}
+
 const wallets = [
   zeal,
   exodus,
@@ -699,7 +709,8 @@ const wallets = [
   bitski,
   enkrypt,
   phantom,
-  zerion
+  zerion,
+  rainbow
 ]
 
 export default wallets
diff --git a/packages/keepkey/README.md b/packages/keepkey/README.md
index c1685ac8c..1d4b1d8bc 100644
--- a/packages/keepkey/README.md
+++ b/packages/keepkey/README.md
@@ -48,9 +48,19 @@ const connectedWallets = await onboard.connectWallet()
 console.log(connectedWallets)
 ```
 
+Initialization options:
+```typescript
+type keepkeyInitOptions = {
+  containerElement?: string
+  filter?: Platform
+}
+```
+
 The following is a list of the platforms that can be filtered:
 
 ```typescript
+type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
+
 type Platform =
   | 'Windows Phone'
   | 'Windows'
diff --git a/packages/keepkey/package.json b/packages/keepkey/package.json
index 00ab2ade0..a261cd33c 100644
--- a/packages/keepkey/package.json
+++ b/packages/keepkey/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/keepkey",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "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.4",
+    "@web3-onboard/hw-common": "^2.1.0",
     "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/keepkey/src/index.ts b/packages/keepkey/src/index.ts
index f14495bf9..b7d0a306a 100644
--- a/packages/keepkey/src/index.ts
+++ b/packages/keepkey/src/index.ts
@@ -36,7 +36,10 @@ const errorMessages = {
 
 type ErrorCode = 'busy' | 'pairing'
 
-function keepkey({ filter }: { filter?: Platform[] } = {}): WalletInit {
+function keepkey({
+  filter,
+  containerElement
+}: { filter?: Platform[]; containerElement?: string } = {}): WalletInit {
   const getIcon = async () => (await import('./icon.js')).default
 
   return ({ device }) => {
@@ -254,7 +257,8 @@ function keepkey({ filter }: { filter?: Platform[] } = {}): WalletInit {
             basePaths: DEFAULT_BASE_PATHS,
             assets,
             chains,
-            scanAccounts
+            scanAccounts,
+            containerElement
           })
           if (!accounts) throw new Error('No accounts were found')
           if (accounts.length) {
diff --git a/packages/keystone/README.md b/packages/keystone/README.md
index cdd20a94b..0cd87eb0f 100644
--- a/packages/keystone/README.md
+++ b/packages/keystone/README.md
@@ -11,6 +11,8 @@
 ```typescript
 type KeystoneOptions = {
   customNetwork?: CustomNetwork
+  filter?: Platform[]
+  containerElement?: string
 }
 
 interface CustomNetwork {
diff --git a/packages/keystone/package.json b/packages/keystone/package.json
index d194fc26c..2ed61e523 100644
--- a/packages/keystone/package.json
+++ b/packages/keystone/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/keystone",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "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.4"
+    "@web3-onboard/hw-common": "^2.1.0"
   }
 }
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..5cfe94427 100644
--- a/packages/keystone/src/index.ts
+++ b/packages/keystone/src/index.ts
@@ -65,10 +65,12 @@ const generateAccounts = async (
 
 function keystone({
   customNetwork,
-  filter
+  filter,
+  containerElement
 }: {
   customNetwork?: CustomNetwork
   filter?: Platform[]
+  containerElement?: string
 } = {}): WalletInit {
   const getIcon = async () => (await import('./icon.js')).default
 
@@ -95,6 +97,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
@@ -142,7 +145,8 @@ function keystone({
             assets,
             chains,
             scanAccounts,
-            supportsCustomPath: false
+            supportsCustomPath: false,
+            containerElement
           })
 
           if (accounts.length) {
diff --git a/packages/ledger/package.json b/packages/ledger/package.json
index 590db948c..728bb43c5 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",
   "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 2fedcdcc9..c52ff2ef0 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.5.5",
+  "version": "2.6.0",
   "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.1",
+    "@web3-onboard/core": "^2.14.0",
     "@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/sequence/src/index.ts b/packages/sequence/src/index.ts
index fe9143d79..8debd9bbb 100644
--- a/packages/sequence/src/index.ts
+++ b/packages/sequence/src/index.ts
@@ -1,7 +1,7 @@
 import type { WalletInit } from '@web3-onboard/common'
 
 interface SequenceOptions {
-  appName?: string,
+  appName?: string
   network?: number | string
 }
 
@@ -10,53 +10,54 @@ function sequence(options?: SequenceOptions): WalletInit {
 
   return () => {
     // @ts-ignore
-    return window?.ethereum && window.ethereum?.isSequence ?
-      []
-    :
-     {
-      label: 'Sequence',
-      getIcon: async () => (await import('./icon.js')).default,
-      getInterface: async () => {
-        const { sequence } = await import('0xsequence')
-        const { createEIP1193Provider } = await import('@web3-onboard/common')
-
-        const instance = await sequence.initWallet(network);
-
-        if (!instance.isConnected()) {
-          const connectDetails = await instance.connect({
-            app: appName,
-            authorize: true
-          });
-
-          if (!connectDetails.connected) {
-            throw new Error('Failed to connect to the wallet')
-          }
-        }
+    return window?.ethereum && window.ethereum?.isSequence
+      ? []
+      : {
+          label: 'Sequence',
+          getIcon: async () => (await import('./icon.js')).default,
+          getInterface: async () => {
+            const { sequence } = await import('0xsequence')
+            const { createEIP1193Provider } = await import(
+              '@web3-onboard/common'
+            )
+
+            const instance = await sequence.initWallet(network)
 
-        // The check for connection is necessary in case the user closes the popup or cancels
-        if (instance.isConnected()) {
-          const sequenceProvider = instance.getProvider();
-          const provider = createEIP1193Provider(sequenceProvider, {
-            eth_requestAccounts: async () => {
-              const address = await instance.getAddress()
-              return [address]
-            },
-            eth_chainId: async () => {
-              const chainId = await instance.getChainId()
-              
-              return `0x${chainId.toString(16)}`
+            if (!instance.isConnected()) {
+              const connectDetails = await instance.connect({
+                app: appName,
+                authorize: true
+              })
+
+              if (!connectDetails.connected) {
+                throw new Error('Failed to connect to the wallet')
+              }
             }
-          })
 
-          return {
-            provider,
-            instance
+            // The check for connection is necessary in case the user closes the popup or cancels
+            if (instance.isConnected()) {
+              const sequenceProvider = instance.getProvider()
+              const provider = createEIP1193Provider(sequenceProvider, {
+                eth_requestAccounts: async () => {
+                  const address = await instance.getAddress()
+                  return [address]
+                },
+                eth_chainId: async () => {
+                  const chainId = await instance.getChainId()
+
+                  return `0x${chainId.toString(16)}`
+                }
+              })
+
+              return {
+                provider,
+                instance
+              }
+            }
+
+            throw new Error('Failed to connect wallet')
           }
         }
-
-        throw new Error('Failed to connect wallet')
-      }
-    }
   }
 }
 
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/README.md b/packages/trezor/README.md
index fef2c4388..65465a091 100644
--- a/packages/trezor/README.md
+++ b/packages/trezor/README.md
@@ -14,6 +14,7 @@ type TrezorOptions = {
   appUrl: string
   customNetwork?: CustomNetwork
   filter?: Platform[]
+  containerElement?: string
 }
 
 interface CustomNetwork {
@@ -47,6 +48,8 @@ interface BootstrapNode {
   location: string
   comment: string
 }
+
+type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
 ```
 
 ### Usage
diff --git a/packages/trezor/package.json b/packages/trezor/package.json
index f409f8de1..dcc094df1 100644
--- a/packages/trezor/package.json
+++ b/packages/trezor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/trezor",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "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.4",
+    "@web3-onboard/hw-common": "^2.1.0",
     "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/trezor/src/index.ts b/packages/trezor/src/index.ts
index 4f25d9125..95381ec69 100644
--- a/packages/trezor/src/index.ts
+++ b/packages/trezor/src/index.ts
@@ -24,6 +24,7 @@ interface TrezorOptions {
   appUrl: string
   customNetwork?: CustomNetwork
   filter?: Platform[]
+  containerElement?: string
 }
 
 const TREZOR_DEFAULT_PATH = "m/44'/60'/0'/0"
@@ -117,7 +118,8 @@ function trezor(options: TrezorOptions): WalletInit {
   const getIcon = async () => (await import('./icon.js')).default
 
   return ({ device }) => {
-    const { email, appUrl, customNetwork, filter } = options || {}
+    const { email, appUrl, customNetwork, filter, containerElement } =
+      options || {}
 
     if (!email || !appUrl) {
       throw new Error(
@@ -219,7 +221,8 @@ function trezor(options: TrezorOptions): WalletInit {
             basePaths: DEFAULT_BASE_PATHS,
             assets,
             chains,
-            scanAccounts
+            scanAccounts,
+            containerElement
           })
 
           if (
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 5fd36305d..4ebf31c5d 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.4.5",
+  "version": "2.5.0",
   "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.1",
+    "@web3-onboard/core": "^2.14.0",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {