diff --git a/README.md b/README.md
index 5e9114ac4..d8e3ae732 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,7 @@ interface CreateConfigOptions {
   disableAnalytics?: boolean
   defaultTheme?: Theme
   position?: ModalPosition
+  customCSS?: string // Injected into shadow dom
   signIn?: {
     logoUrl?: string
     projectName?: string
diff --git a/examples/react/src/config.ts b/examples/react/src/config.ts
index fe53c3a8f..9ac9c0407 100644
--- a/examples/react/src/config.ts
+++ b/examples/react/src/config.ts
@@ -29,6 +29,12 @@ export const connectConfig: ConnectConfig = {
     projectName: 'Sequence Web SDK Demo',
     useMock: isDebugMode
   },
+  // Custom css injected into shadow dom
+  // customCSS: `
+  //   span {
+  //     color: red !important;
+  //   }
+  // `,
   displayedAssets: [
     // Native token
     {
diff --git a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx
index ccfffe08b..529d9a9a4 100644
--- a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx
+++ b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { getModalPositionCss, ShadowRoot, useTheme } from '@0xsequence/connect'
+import { getModalPositionCss, ShadowRoot, useConnectConfigContext, useTheme } from '@0xsequence/connect'
 import { Modal } from '@0xsequence/design-system'
 import { AnimatePresence } from 'motion/react'
 import React, { useState, useEffect } from 'react'
@@ -61,6 +61,7 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
   const [transactionStatusSettings, setTransactionStatusSettings] = useState<TransactionStatusSettings>()
   const [swapModalSettings, setSwapModalSettings] = useState<SwapModalSettings>()
   const [history, setHistory] = useState<History>([])
+  const { customCSS } = useConnectConfigContext()
 
   const getDefaultLocation = (): Navigation => {
     // skip the order summary for credit card checkout if no items provided
@@ -253,7 +254,7 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
                   }}
                 >
                   <NavigationContextProvider value={{ history, setHistory, defaultLocation: getDefaultLocation() }}>
-                    <ShadowRoot theme={theme}>
+                    <ShadowRoot theme={theme} customCSS={customCSS}>
                       <AnimatePresence>
                         {openCheckoutModal && (
                           <Modal
diff --git a/packages/connect/README.md b/packages/connect/README.md
index 9697a53f1..f5a33b186 100644
--- a/packages/connect/README.md
+++ b/packages/connect/README.md
@@ -41,6 +41,7 @@ interface CreateConfigOptions {
   disableAnalytics?: boolean
   defaultTheme?: Theme
   position?: ModalPosition
+  customCSS?: string // Injected into shadow dom
   signIn?: {
     logoUrl?: string
     projectName?: string
diff --git a/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx b/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx
index 170bbff87..d7d4cacd5 100644
--- a/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx
+++ b/packages/connect/src/components/SequenceConnectProvider/SequenceConnectProvider.tsx
@@ -48,7 +48,8 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) =>
     disableAnalytics = false,
     hideExternalConnectOptions = false,
     hideConnectedWallets = false,
-    hideSocialConnectOptions = false
+    hideSocialConnectOptions = false,
+    customCSS
   } = config
 
   const defaultAppName = signIn.projectName || 'app'
@@ -182,7 +183,7 @@ export const SequenceConnectProvider = (props: SequenceConnectProviderProps) =>
                 }}
               >
                 <AnalyticsContextProvider value={{ setAnalytics, analytics }}>
-                  <ShadowRoot theme={theme}>
+                  <ShadowRoot theme={theme} customCSS={customCSS}>
                     <AnimatePresence>
                       {openConnectModal && (
                         <Modal
diff --git a/packages/connect/src/components/ShadowRoot/ShadowRoot.tsx b/packages/connect/src/components/ShadowRoot/ShadowRoot.tsx
index fb59a73b2..d6f2c819d 100644
--- a/packages/connect/src/components/ShadowRoot/ShadowRoot.tsx
+++ b/packages/connect/src/components/ShadowRoot/ShadowRoot.tsx
@@ -8,10 +8,10 @@ import { styles } from '../../styles'
 
 // Create a stylesheet which is shared by all ShadowRoot components
 let sheet: CSSStyleSheet
-const getCSSStyleSheet = () => {
+const getCSSStyleSheet = (customCSS?: string) => {
   if (!sheet) {
     sheet = new CSSStyleSheet()
-    sheet.replaceSync(styles)
+    sheet.replaceSync(styles + (customCSS ? `\n\n${customCSS}` : ''))
   }
 
   return sheet
@@ -20,10 +20,11 @@ const getCSSStyleSheet = () => {
 interface ShadowRootProps {
   theme?: Theme
   children: ReactNode
+  customCSS?: string
 }
 
 export const ShadowRoot = (props: ShadowRootProps) => {
-  const { theme, children } = props
+  const { theme, children, customCSS } = props
   const hostRef = useRef<HTMLDivElement>(null)
   const [container, setContainer] = useState<HTMLDivElement | null>(null)
   const [windowDocument, setWindowDocument] = useState<Document | null>(null)
@@ -38,7 +39,7 @@ export const ShadowRoot = (props: ShadowRootProps) => {
       const shadowRoot = hostRef.current.attachShadow({ mode: 'open' })
 
       // Attach the stylesheet
-      shadowRoot.adoptedStyleSheets = [getCSSStyleSheet()]
+      shadowRoot.adoptedStyleSheets = [getCSSStyleSheet(customCSS)]
 
       // Create a container
       const container = document.createElement('div')
diff --git a/packages/connect/src/styles.ts b/packages/connect/src/styles.ts
index 4ca896c10..c865ba84d 100644
--- a/packages/connect/src/styles.ts
+++ b/packages/connect/src/styles.ts
@@ -304,9 +304,6 @@ export const styles = String.raw`
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
-  .mt-0 {
-    margin-top: calc(var(--spacing) * 0);
-  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -382,9 +379,6 @@ export const styles = String.raw`
   .inline-flex {
     display: inline-flex;
   }
-  .table {
-    display: table;
-  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -475,9 +469,6 @@ export const styles = String.raw`
   .min-h-full {
     min-height: 100%;
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -571,21 +562,12 @@ export const styles = String.raw`
   .min-w-full {
     min-width: 100%;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .flex-grow {
-    flex-grow: 1;
-  }
   .grow {
     flex-grow: 1;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
   .origin-top {
     transform-origin: top;
   }
@@ -957,9 +939,6 @@ export const styles = String.raw`
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
-  .pt-1 {
-    padding-top: calc(var(--spacing) * 1);
-  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -1249,9 +1228,6 @@ export const styles = String.raw`
   .ring-border-normal {
     --tw-ring-color: var(--seq-color-border-normal);
   }
-  .ring-white {
-    --tw-ring-color: var(--color-white);
-  }
   .ring-white\/10 {
     --tw-ring-color: color-mix(in srgb, #fff 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1290,10 +1266,6 @@ export const styles = String.raw`
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
diff --git a/packages/connect/src/types.ts b/packages/connect/src/types.ts
index 3692bd84d..ee9f0aa2b 100644
--- a/packages/connect/src/types.ts
+++ b/packages/connect/src/types.ts
@@ -82,6 +82,7 @@ export interface ConnectConfig {
   hideExternalConnectOptions?: boolean
   hideSocialConnectOptions?: boolean
   hideConnectedWallets?: boolean
+  customCSS?: string
 }
 
 export type StorageItem = {
diff --git a/packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx b/packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx
index 60d6ae0ca..dd00a6ad0 100644
--- a/packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx
+++ b/packages/wallet-widget/src/components/SequenceWalletProvider/SequenceWalletProvider.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { SequenceCheckoutProvider, useAddFundsModal } from '@0xsequence/checkout'
-import { getModalPositionCss, useTheme, ShadowRoot, useOpenConnectModal } from '@0xsequence/connect'
+import { getModalPositionCss, useTheme, ShadowRoot, useOpenConnectModal, useConnectConfigContext } from '@0xsequence/connect'
 import { Modal, Scroll, ToastProvider } from '@0xsequence/design-system'
 import { AnimatePresence } from 'motion/react'
 import React, { useState, useContext, useEffect } from 'react'
@@ -39,6 +39,7 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
   const { isAddFundsModalOpen } = useAddFundsModal()
   const { isConnectModalOpen } = useOpenConnectModal()
   const { address } = useAccount()
+  const { customCSS } = useConnectConfigContext()
 
   useEffect(() => {
     if (!address) {
@@ -94,7 +95,7 @@ export const WalletContent = ({ children }: SequenceWalletProviderProps) => {
         <FiatWalletsMapProvider>
           <ToastProvider>
             <SwapProvider>
-              <ShadowRoot theme={theme}>
+              <ShadowRoot theme={theme} customCSS={customCSS}>
                 <AnimatePresence>
                   {openWalletModal && !isAddFundsModalOpen && !isConnectModalOpen && (
                     <Modal