diff --git a/packages/kit/package.json b/packages/kit/package.json
index 99a5074a..08031193 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -41,16 +41,17 @@
     "@0xsequence/api": ">= 2.2.4",
     "@0xsequence/auth": ">= 2.2.4",
     "@0xsequence/core": ">= 2.2.4",
+    "@0xsequence/design-system": "^2.0.1",
+    "@0xsequence/ethauth": "^1.0.0",
     "@0xsequence/indexer": ">= 2.2.4",
     "@0xsequence/metadata": ">= 2.2.4",
     "@0xsequence/network": ">= 2.2.4",
     "@0xsequence/provider": ">= 2.2.4",
     "@0xsequence/utils": ">= 2.2.4",
     "@0xsequence/waas": ">= 2.2.4",
-    "@0xsequence/ethauth": "^1.0.0",
-    "@0xsequence/design-system": "^2.0.1",
-    "motion": "^12.3.1",
+    "clsx": "^2.1.1",
     "fuse.js": "^6.6.2",
+    "motion": "^12.3.1",
     "uuid": "^10.0.0"
   },
   "peerDependencies": {
diff --git a/packages/kit/src/components/Connect/Connect.tsx b/packages/kit/src/components/Connect/Connect.tsx
index f8b41bb9..f197af68 100644
--- a/packages/kit/src/components/Connect/Connect.tsx
+++ b/packages/kit/src/components/Connect/Connect.tsx
@@ -24,6 +24,8 @@ import { ConnectedWallets } from './ConnectedWallets'
 import { EmailWaasVerify } from './EmailWaasVerify'
 import { ExtendedWalletList } from './ExtendedWalletList'
 
+import { clsx } from 'clsx'
+
 const MAX_ITEM_PER_ROW = 4
 export const SEQUENCE_UNIVERSAL_CONNECTOR_NAME = 'Sequence'
 
@@ -472,7 +474,12 @@ export const Connect = (props: ConnectWalletContentProps) => {
               )}
               {walletConnectors.length > 0 && (
                 <>
-                  <div className="flex gap-2 flex-row justify-center items-center">
+                  <div
+                    className={clsx(
+                      'flex gap-2 flex-row justify-center items-center',
+                      hasConnectedSequenceUniversal ? 'mt-4' : 'mt-6'
+                    )}
+                  >
                     {walletConnectors.slice(0, walletConnectorsPerRow).map(connector => {
                       return <ConnectButton key={connector.uid} connector={connector} onConnect={onConnect} />
                     })}
diff --git a/packages/kit/src/components/Connect/ConnectedWallets.tsx b/packages/kit/src/components/Connect/ConnectedWallets.tsx
index 5892b682..1a0a9fce 100644
--- a/packages/kit/src/components/Connect/ConnectedWallets.tsx
+++ b/packages/kit/src/components/Connect/ConnectedWallets.tsx
@@ -151,7 +151,7 @@ export const ConnectedWallets = ({
           className="scroll-fade-top absolute top-0 left-0 right-0"
           style={{
             height: '30px',
-            background: 'linear-gradient(to top, rgba(0, 0, 0, 0), var(--seq-colors-background-primary))',
+            background: 'linear-gradient(to top, rgba(0, 0, 0, 0), var(--seq-color-background-primary))',
             pointerEvents: 'none',
             opacity: 0,
             transition: 'opacity 0.2s'
@@ -161,7 +161,7 @@ export const ConnectedWallets = ({
           className="scroll-fade absolute bottom-0 left-0 right-0"
           style={{
             height: '40px',
-            background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--seq-colors-background-primary))',
+            background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--seq-color-background-primary))',
             pointerEvents: 'none',
             opacity: 0,
             transition: 'opacity 0.2s'
diff --git a/packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx b/packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx
index 9773dfe4..f4ba57e6 100644
--- a/packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx
+++ b/packages/kit/src/components/SequenceLogo/PoweredBySequence.tsx
@@ -5,20 +5,17 @@ import { SequenceLogo } from './SequenceLogo'
 export const PoweredBySequence = () => {
   return (
     <div
-      className="powered-by-sequence-footer flex relative gap-2 flex-row items-center justify-center select-none cursor-pointer"
+      className="powered-by-sequence-footer flex relative gap-2 flex-row items-center justify-center select-none cursor-pointer left-[-28px]"
       onClick={() => {
         if (typeof window !== 'undefined') {
           window.open('https://sequence.xyz')
         }
       }}
-      style={{
-        left: '-28px'
-      }}
     >
       <Text variant="xsmall" color="muted" fontWeight="bold">
         Powered by
       </Text>
-      <div className="h-5 w-5 relative" style={{ top: '1px' }}>
+      <div className="h-5 w-5 relative top-[1px]">
         <SequenceLogo />
       </div>
     </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3abb9d64..0168a267 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -351,6 +351,9 @@ importers:
       '@react-oauth/google':
         specifier: '>= 0.11.1'
         version: 0.12.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       fuse.js:
         specifier: ^6.6.2
         version: 6.6.2