diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/PINCodeInput.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/PINCodeInput.tsx
deleted file mode 100644
index 3589049d..00000000
--- a/packages/kit/src/components/KitProvider/ConnectWalletContent/PINCodeInput.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { Fragment, createRef, useEffect, useMemo } from 'react'
-import { Box } from '@0xsequence/design-system'
-import { digitInput } from '../../styles.css'
-
-interface PINCodeInputProps {
-  digits: number
-  onChange: (code: string[]) => void
-  disabled?: boolean
-  value: string[]
-}
-
-export const PINCodeInput = (props: PINCodeInputProps) => {
-  const { value, digits = 6, onChange, disabled = false } = props
-
-  const inputRefs = useMemo(() => {
-    return range(0, digits).map(() => createRef<HTMLInputElement>())
-  }, [])
-
-  useEffect(() => {
-    inputRefs[0]?.current?.focus()
-  }, [])
-
-  const handleChange = (idx: number, character: string) => {
-    if (!/^\d$/.test(character)) {
-      character = ''
-    }
-
-    const curr = [...value]
-    curr[idx] = character
-
-    if (character !== '') {
-      inputRefs[idx + 1]?.current?.focus()
-    }
-
-    onChange(curr)
-  }
-
-  const handleKeyDown = (idx: number, ev: React.KeyboardEvent<HTMLInputElement>) => {
-    const currentRef = inputRefs[idx].current
-    const prevRef = inputRefs[idx - 1]?.current
-    const nextRef = inputRefs[idx + 1]?.current
-
-    switch (ev.key) {
-      case 'Backspace':
-        ev.preventDefault()
-
-        if (currentRef) {
-          currentRef.value = ''
-          handleChange(idx, '')
-        }
-
-        prevRef?.focus()
-        break
-
-      case 'ArrowLeft':
-        ev.preventDefault()
-        prevRef?.focus()
-        break
-
-      case 'ArrowRight':
-        ev.preventDefault()
-        nextRef?.focus()
-        break
-
-      default:
-        // Fire an onChange event even if the key pressed is the same as the current value
-        if (currentRef?.value === ev.key) {
-          ev.preventDefault()
-          handleChange(idx, ev.key)
-        }
-    }
-  }
-
-  const handlePaste = (_: number, ev: React.ClipboardEvent<HTMLInputElement>) => {
-    const pasted = ev.clipboardData.getData('text/plain')
-    const filtered = pasted.replace(/\D/g, '')
-
-    if (/^\d{6}$/.test(filtered)) {
-      inputRefs[0]?.current?.focus()
-
-      onChange(filtered.split(''))
-
-      setTimeout(() => {
-        inputRefs[inputRefs.length - 1]?.current?.focus()
-      })
-    }
-  }
-
-  return (
-    <Box gap="2">
-      {range(0, digits).map(idx => (
-        <Fragment key={idx}>
-          {idx === digits / 2 && <span />}
-          <Box
-            as="input"
-            className={digitInput}
-            value={value[idx] || ''}
-            ref={inputRefs[idx]}
-            type="text"
-            inputMode="numeric"
-            maxLength={1}
-            disabled={disabled}
-            onFocus={ev => ev.target.select()}
-            onPaste={ev => handlePaste(idx, ev)}
-            onChange={ev => handleChange(idx, ev.target.value)}
-            onKeyDown={ev => {
-              handleKeyDown(idx, ev)
-            }}
-          />
-        </Fragment>
-      ))}
-    </Box>
-  )
-}
-
-const range = (start: number, end: number) => Array.from({ length: end - start }, (_, k) => k + start)
diff --git a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
index d62e929c..04a8885a 100644
--- a/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
+++ b/packages/kit/src/components/KitProvider/ConnectWalletContent/index.tsx
@@ -13,7 +13,8 @@ import {
   Spinner,
   Image,
   IconButton,
-  Tooltip
+  Tooltip,
+  PINCodeInput
 } from '@0xsequence/design-system'
 import { useConnect, useAccount, Connector, useConfig, Storage } from 'wagmi'
 import { LogoProps, sequenceWallet } from '@0xsequence/kit-connectors'
@@ -30,7 +31,6 @@ import { KitConnectProviderProps } from '../index'
 import { ExtendedConnector } from '../../../utils/getKitConnectWallets'
 
 import { useEmailAuth } from '../../../hooks/useWaasEmailAuth'
-import { PINCodeInput } from './PINCodeInput'
 import { getStorageItem } from '../../../utils/storage'
 
 interface ConnectWalletContentProps extends KitConnectProviderProps {
diff --git a/packages/kit/src/components/styles.css.ts b/packages/kit/src/components/styles.css.ts
index eae38080..f5161a5a 100644
--- a/packages/kit/src/components/styles.css.ts
+++ b/packages/kit/src/components/styles.css.ts
@@ -1,5 +1,4 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { textVariants, vars } from '@0xsequence/design-system'
+import { globalStyle } from '@vanilla-extract/css'
 
 globalStyle('#kit-provider *, #kit-provider::before *, #kit-provider *::after', {
   boxSizing: 'border-box'
@@ -8,35 +7,3 @@ globalStyle('#kit-provider *, #kit-provider::before *, #kit-provider *::after',
 globalStyle('#kit-wallet *, #kit-wallet::before *, #kit-wallet *::after', {
   boxSizing: 'border-box'
 })
-
-export const digitInput = style([
-  textVariants({ variant: 'large' }),
-  {
-    height: '48px',
-    width: '40px',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: '10px',
-    border: `${vars.borderWidths.thick} solid ${vars.colors.borderNormal}`,
-    borderRadius: vars.radii.sm,
-    color: vars.colors.text100,
-    background: 'transparent',
-    textAlign: 'center',
-    caretColor: 'transparent',
-
-    boxShadow: 'none',
-
-    ':hover': {
-      borderColor: vars.colors.borderFocus
-    },
-
-    ':focus': {
-      borderColor: vars.colors.borderFocus
-    },
-
-    '::selection': {
-      background: 'transparent'
-    }
-  }
-])