diff --git a/docs/src/lib/components/ThemeCustomizer.svelte b/docs/src/lib/components/ThemeCustomizer.svelte
new file mode 100644
index 000000000..3c628fc71
--- /dev/null
+++ b/docs/src/lib/components/ThemeCustomizer.svelte
@@ -0,0 +1,498 @@
+<script>
+  import Onboard from '@web3-onboard/core'
+  import injectedModule from '@web3-onboard/injected-wallets'
+
+  import { share } from 'rxjs/operators'
+  import { onMount } from 'svelte'
+
+  const INFURA_ID = 'e0b15c21b7d54cd4814586334af72618'
+  const injected = injectedModule()
+
+  const onboard = Onboard({
+    wallets: [injected],
+    chains: [
+      {
+        id: '0x1',
+        token: 'ETH',
+        label: 'Ethereum Mainnet',
+        rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
+      },
+      {
+        id: '0x3',
+        token: 'tROP',
+        label: 'Ethereum Ropsten Testnet',
+        rpcUrl: `https://ropsten.infura.io/v3/${INFURA_ID}`
+      }
+    ],
+    appMetadata: {
+      name: 'Documentation',
+      icon: '<svg></svg>',
+      description: 'Example showcasing how to connect a wallet.',
+      recommendedInjectedWallets: [
+        { name: 'MetaMask', url: 'https://metamask.io' },
+        { name: 'Coinbase', url: 'https://wallet.coinbase.com/' }
+      ]
+    },
+    accountCenter: {
+      desktop: { enabled: false },
+      mobile: { enabled: false }
+    }
+  })
+
+  // Subscribe to wallet updates
+  const wallets$ = onboard.state.select('wallets').pipe(share())
+
+  let webURL = ''
+  let iframeUsed = false
+  let hideDirections = false
+
+  const isValidUrl = (urlString) => {
+    try {
+      return Boolean(new URL(urlString))
+    } catch (e) {
+      return false
+    }
+  }
+
+  const addURLToIFrame = () => {
+    if (!webURL || !isValidUrl(webURL)) {
+      alert('Invaled URL entered')
+      return
+    }
+    iframeUsed = true
+    document.querySelector('#iframe_underlay').setAttribute('src', webURL)
+    hideDirections = true
+    onboard.connectWallet()
+  }
+
+  const resetPage = () => {
+    iframeUsed = false
+    document.querySelector('#iframe_underlay').setAttribute('src', '')
+    hideDirections = false
+    document.querySelector('#image_drop_area').style.backgroundImage = ''
+    uploaded_image = undefined
+    webURL = ''
+  }
+
+  const handleConnectWalletBtn = () => {
+    !!$wallets$ && $wallets$.length
+      ? onboard.disconnectWallet({label: $wallets$[0].label})
+      : onboard.connectWallet()
+  }
+
+  const defaultStyling = {
+    '--background-color': '#ffffff',
+    '--text-color': '#1a1d26',
+    '--border-color': '#ebebed',
+    '--accent-background': '#ebebed',
+    '--accent-color': '#929bed',
+    '--accent-color-hover': '#eff1fc',
+    '--secondary-text-color': '#707481'
+  }
+
+  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 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 updateThemes = (e, targetStyle) => {
+    document.documentElement.style.setProperty(targetStyle, e.target.value)
+
+    copyableStyles = `:root {\n  ${styleToString(defaultStyling)}${baseStyling}\n}`
+  }
+
+  let checked = false
+
+  const handleBackdrop = () => {
+    if (!checked) {
+      document.documentElement.style.setProperty('--onboard-modal-backdrop', 'rgba(0, 0, 0, 0)')
+    } else {
+      document.documentElement.style.setProperty('--onboard-modal-backdrop', 'rgba(0, 0, 0, 0.6)')
+    }
+  }
+
+  let uploaded_image
+  // 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)
+  }
+
+  const handleImageDrop = () => {
+    const image_drop_area = document.querySelector('#image_drop_area')
+    if (image_drop_area) {
+      image_drop_area.addEventListener('dragover', (event) => {
+        event.stopPropagation()
+        event.preventDefault()
+        event.dataTransfer.dropEffect = 'copy'
+      })
+
+      image_drop_area.addEventListener('drop', (event) => {
+        hideDirections = true
+        onboard.connectWallet()
+        event.stopPropagation()
+        event.preventDefault()
+        let fileList = event.dataTransfer.files
+
+        readImage(fileList[0])
+      })
+    }
+  }
+
+  onMount(async () => {
+    handleImageDrop()
+  })
+</script>
+
+<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) => updateThemes(e, target)}
+            />
+          </div>
+          <span class="text" id="current-theme">{target} : {defaultStyling[target]}</span>
+        </div>
+      {/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 />
+    <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>
+  <div class="image-drop-container">
+    <div id="image_drop_area">
+      <div class="drop-area-controls">
+        <div>
+          Enter your website url or drag and drop a screenshot to preview web3-onboard on your site
+        </div>
+        <!-- <div>Then click color circles above to change the theme.</div> -->
+        <div class="website-input-row">
+          <input
+            type="text"
+            class="iframe-input"
+            placeholder="Enter your Website URL"
+            bind:value={webURL}
+          />
+          <button on:click={addURLToIFrame}>Preview On Your Website</button>
+          <button
+            on:click={resetPage}
+            type="button"
+            disabled={iframeUsed || !!uploaded_image ? false : true}>Reset</button
+          >
+          <button on:click={handleConnectWalletBtn} type="button"
+            >{!!$wallets$ && $wallets$.length ? 'Disconnect Wallet' : 'Connect Wallet'}</button
+          >
+        </div>
+      </div>
+      <iframe
+        id="iframe_underlay"
+        title="iframe area for testing W3O with your app"
+        class={iframeUsed ? 'iframe-visible' : 'iframe-hidden'}
+      />
+      <div style:display={hideDirections ? 'none' : ''}>
+        <div>Drag and drop an image here to preview</div>
+      </div>
+    </div>
+  </div>
+</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%;
+    padding: 1rem;
+  }
+
+  button {
+    color: var(--kd-color-gray-body);
+    background: var(--kd-color-gray-inverse);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    padding: 1rem;
+  }
+  button:hover {
+    background: var(--kd-color-gray-hover-inverse);
+  }
+  button:disabled {
+    background: var(--kd-color-gray-inverse);
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  hr {
+    border-color: var(--kd-color-gray-soft);
+  }
+
+  .control-panel {
+    z-index: 9999;
+    left: auto;
+    right: 0;
+    bottom: 0;
+    position: fixed;
+    overflow: hidden;
+    overflow-y: scroll;
+    max-height: 100vh;
+    width: 360px;
+    margin: 1rem;
+    padding: 1rem;
+    font-size: 14px;
+    color: var(--kd-color-gray-inverse);
+    background-color: var(--kd-color-gray-divider);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    display: flex;
+    flex-flow: column;
+    gap: 1rem;
+  }
+
+  .copy-styles-container {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: stretch;
+    gap: inherit;
+  }
+
+  .copy-styles-textarea {
+    padding: 1rem;
+    color: var(--kd-color-gray-inverse);
+    background: var(--kd-color-gray-hover);
+    border: 1px solid var(--kd-color-gray-soft);
+  }
+
+  .theming-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .theming-inputs-wrapper {
+    display: flex;
+    align-items: center;
+  }
+  .theming-inputs {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    width: 2em;
+    height: 2em;
+    margin: 0.5em;
+  }
+  .iframe-input {
+    flex: 1;
+    padding: 1rem;
+    color: var(--kd-color-gray-inverse);
+    background: var(--kd-color-gray-hover);
+    border: 1px solid var(--kd-color-gray-soft);
+  }
+
+  input[type='color'] {
+    width: inherit;
+    height: inherit;
+    background: none;
+  }
+  input[type='color']::-webkit-color-swatch-wrapper {
+    padding: 0;
+    background: none;
+  }
+  input[type='color']::-webkit-color-swatch {
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+  }
+
+  .image-drop-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    height: 100%;
+    max-width: 100%;
+    padding: 0.5rem;
+
+    border: 1px solid var(--kd-color-gray-soft);
+    border-style: dotted;
+  }
+
+  #image_drop_area {
+    width: 100%;
+    height: 100%;
+    background: center no-repeat;
+    background-size: contain;
+    background-color: rgba(0, 0, 0, 0.25);
+    box-sizing: border-box;
+
+    display: flex;
+    flex-flow: column;
+    gap: 2rem;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+
+  .drop-area-controls {
+    position: absolute;
+    top: 0;
+    padding: 1rem;
+    font-size: 14px;
+    color: var(--kd-color-gray-inverse);
+    background-color: var(--kd-color-gray-divider);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    display: flex;
+    flex-flow: column;
+    gap: 1rem;
+    z-index: 9999;
+  }
+
+  .website-input-row {
+    display: flex;
+    flex-flow: row;
+    gap: 0.5rem;
+  }
+
+  .iframe-visible {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .iframe-hidden {
+    display: none;
+  }
+
+  .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;
+    gap: 1rem;
+  }
+</style>
diff --git a/docs/src/lib/components/index.ts b/docs/src/lib/components/index.ts
index 4bd9babec..6fa4e9b35 100644
--- a/docs/src/lib/components/index.ts
+++ b/docs/src/lib/components/index.ts
@@ -1,2 +1,3 @@
 export * from './examples'
 export { default as NavBar } from './NavBar.svelte'
+export { default as ThemeCustomizer } from './ThemeCustomizer.svelte'
diff --git a/docs/src/routes/__layout-kit-docs.svelte b/docs/src/routes/__layout-kit-docs.svelte
index 0df338da2..1a31f5672 100644
--- a/docs/src/routes/__layout-kit-docs.svelte
+++ b/docs/src/routes/__layout-kit-docs.svelte
@@ -6,7 +6,8 @@
       '/': '/',
       '/docs': '/docs',
       '/faq': '/faq',
-      '/examples': '/examples'
+      '/examples': '/examples',
+      '/theming': '/theming'
     }
   })
 </script>
diff --git a/docs/src/routes/docs/[...4]packages/core.md b/docs/src/routes/docs/[...4]packages/core.md
index b7c0f7991..a317df5e2 100644
--- a/docs/src/routes/docs/[...4]packages/core.md
+++ b/docs/src/routes/docs/[...4]packages/core.md
@@ -964,6 +964,11 @@ The Onboard styles can customized via [CSS variables](https://developer.mozilla.
   --notify-onboard-main-padding
 }
 ```
+### Theming
+
+Interested in seeing what your site would look like with web3-onboard styled o fit your application?
+
+[Try out our theming tool](https://onboard.blocknative.com/theming) that not only allows you to drop a screenshot or enter your sites web address to see how web3-onboard looks on your site but also style web3-onboard and match your sites look and feel. You can then copy the theme configuration, add it to your site's main css file and you will have onboard themed specifically for your application.
 
 ## Build Environments
 
diff --git a/docs/src/routes/theming/__layout@homepage.svelte b/docs/src/routes/theming/__layout@homepage.svelte
new file mode 100644
index 000000000..de0058d5e
--- /dev/null
+++ b/docs/src/routes/theming/__layout@homepage.svelte
@@ -0,0 +1,3 @@
+<!-- This layout inherits from `routes/__layout-kit-docs.svelte` -->
+<!-- Learn more: https://kit.svelte.dev/docs/layouts#named-layouts-inheritance-chains -->
+<slot />
diff --git a/docs/src/routes/theming/index.md b/docs/src/routes/theming/index.md
new file mode 100644
index 000000000..86689637f
--- /dev/null
+++ b/docs/src/routes/theming/index.md
@@ -0,0 +1,4 @@
+<script>
+    import { ThemeCustomizer } from '$lib/components'
+</script>
+<ThemeCustomizer />
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 109165e31..eb14c09ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2516,6 +2516,34 @@
   dependencies:
     "@walletconnect/window-getters" "^1.0.0"
 
+"@web3-onboard/common@^2.2.2":
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/common/-/common-2.2.2.tgz#abef8ca861835ab00e5b4641462de2c3db73fc89"
+  integrity sha512-04Y2Fryiu48nW27dgAtYmPugdhYbeIZq4HM1wsqRftQjgyEWnsam3YyeKRWBABa5iTsE2a/Fo4LofuBG5RMVYw==
+  dependencies:
+    bignumber.js "^9.1.0"
+    ethers "5.5.4"
+    joi "^17.4.2"
+
+"@web3-onboard/core@^2.6.0-alpha.1":
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.8.3.tgz#e41c3e11b5a38d7b5e2ee15d4dc2cf49307d38c5"
+  integrity sha512-3CKc33dKqC9jurbf0+7mfvddBJgvCU4n9ADu68XlmCws3xP8Gq1nji4Y/AEUqcfhfdPWno6vIgc/j1cYseCIhw==
+  dependencies:
+    "@web3-onboard/common" "^2.2.2"
+    bignumber.js "^9.0.0"
+    bnc-sdk "^4.4.1"
+    bowser "^2.11.0"
+    ethers "5.5.3"
+    eventemitter3 "^4.0.7"
+    joi "17.6.0"
+    lodash.merge "^4.6.2"
+    lodash.partition "^4.6.0"
+    nanoid "^4.0.0"
+    rxjs "^7.5.2"
+    svelte "^3.49.0"
+    svelte-i18n "^3.3.13"
+
 "@web3auth/base-plugin@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@web3auth/base-plugin/-/base-plugin-1.0.1.tgz#1e2a87acf745299fdff6f92e6c46ee9bc38aa670"
@@ -3277,6 +3305,11 @@ bignumber.js@^9.0.0, bignumber.js@^9.0.1, bignumber.js@^9.0.2:
   resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.0.2.tgz#71c6c6bed38de64e24a65ebe16cfcf23ae693673"
   integrity sha512-GAcQvbpsM0pUb0zw1EI0KhQEZ+lRwR5fYaAp3vPOYuP7aDvGy6cVN6XHLauvF8SOga2y0dcLcjt3iQDTSEliyw==
 
+bignumber.js@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.0.tgz#8d340146107fe3a6cb8d40699643c302e8773b62"
+  integrity sha512-4LwHK4nfDOraBCtst+wOWIHbu1vhvAPJK8g8nROd4iuc3PSEjWif/qwbkh8jwCJz6yDBvtU4KPynETgrfh7y3A==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
@@ -9609,6 +9642,11 @@ svelte@^3.31.2, svelte@^3.42.5, svelte@^3.46.4:
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.46.4.tgz#0c46bc4a3e20a2617a1b7dc43a722f9d6c084a38"
   integrity sha512-qKJzw6DpA33CIa+C/rGp4AUdSfii0DOTCzj/2YpSKKayw5WGSS624Et9L1nU1k2OVRS9vaENQXp2CVZNU+xvIg==
 
+svelte@^3.49.0:
+  version "3.50.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.50.1.tgz#b35fbc5e79ddd71e8bb27c3149ee6ff903841239"
+  integrity sha512-bS4odcsdj5D5jEg6riZuMg5NKelzPtmsCbD9RG+8umU03TeNkdWnP6pqbCm0s8UQNBkqk29w/Bdubn3C+HWSwA==
+
 swarm-js@^0.1.40:
   version "0.1.40"
   resolved "https://registry.yarnpkg.com/swarm-js/-/swarm-js-0.1.40.tgz#b1bc7b6dcc76061f6c772203e004c11997e06b99"