diff --git a/components/AboutCard.tsx b/components/AboutCard.tsx
index 54f52b8b..478487ff 100644
--- a/components/AboutCard.tsx
+++ b/components/AboutCard.tsx
@@ -13,22 +13,18 @@ export default function AboutCard({
   description,
 }: AboutCardProps) {
   return (
-    <Flex gap={6} maxW="22rem" alignItems="center">
+    <Flex gap={4} maxW="22rem" alignItems="center">
       <Image
         as={NextImage}
         src={image as any}
-        alt="Coinbase Wallet"
-        boxSize="3.5rem"
+        alt={title}
+        boxSize="3rem"
         borderRadius="xl"
       />
 
       <Flex direction="column" textAlign="left" gap={1}>
-        <Text fontSize="sm" as="b">
-          {title}
-        </Text>
-        <Text fontSize="sm" color="gray.500">
-          {description}
-        </Text>
+        <Text textStyle="body2Bold">{title}</Text>
+        <Text textStyle="body2">{description}</Text>
       </Flex>
     </Flex>
   )
diff --git a/components/GetWalletCard.tsx b/components/GetWalletCard.tsx
index 71c46f63..b673ce8f 100644
--- a/components/GetWalletCard.tsx
+++ b/components/GetWalletCard.tsx
@@ -54,9 +54,8 @@ export default function GetWalletCard({ wallet, onGetWallet }: Props) {
         </Stack>
 
         <HybridButton
-          variant="outline"
+          variant="secondary"
           size="sm"
-          colorScheme="blue"
           ml="auto"
           alignSelf="center"
           borderRadius="full"
diff --git a/components/Icons/BackIcon.tsx b/components/Icons/BackIcon.tsx
new file mode 100644
index 00000000..6bdf78dc
--- /dev/null
+++ b/components/Icons/BackIcon.tsx
@@ -0,0 +1,7 @@
+import { createIcon } from '@chakra-ui/react'
+
+export default createIcon({
+  displayName: 'BackIcon',
+  viewBox: '0 0 11 18',
+  d: 'M0.99707 9.1543C0.99707 9.58496 1.15527 9.94531 1.51562 10.2969L8.16016 16.8096C8.43262 17.0732 8.74902 17.2051 9.13574 17.2051C9.90918 17.2051 10.5508 16.5811 10.5508 15.8076C10.5508 15.4121 10.3838 15.0605 10.0938 14.7705L4.30176 9.14551L10.0938 3.5293C10.3838 3.24805 10.5508 2.8877 10.5508 2.50098C10.5508 1.73633 9.90918 1.10352 9.13574 1.10352C8.74902 1.10352 8.43262 1.23535 8.16016 1.49902L1.51562 8.01172C1.15527 8.35449 1.00586 8.71484 0.99707 9.1543Z',
+})
diff --git a/components/Icons/CloseIcon.tsx b/components/Icons/CloseIcon.tsx
new file mode 100644
index 00000000..d3abf4b4
--- /dev/null
+++ b/components/Icons/CloseIcon.tsx
@@ -0,0 +1,7 @@
+import { createIcon } from '@chakra-ui/react'
+
+export default createIcon({
+  displayName: 'CloseIcon',
+  d: 'M1.70711 0.292893C1.31658 -0.097631 0.683417 -0.097631 0.292893 0.292893C-0.097631 0.683417 -0.097631 1.31658 0.292893 1.70711L3.58579 5L0.292893 8.29289C-0.097631 8.68342 -0.097631 9.31658 0.292893 9.70711C0.683417 10.0976 1.31658 10.0976 1.70711 9.70711L5 6.41421L8.29289 9.70711C8.68342 10.0976 9.31658 10.0976 9.70711 9.70711C10.0976 9.31658 10.0976 8.68342 9.70711 8.29289L6.41421 5L9.70711 1.70711C10.0976 1.31658 10.0976 0.683417 9.70711 0.292893C9.31658 -0.097631 8.68342 -0.097631 8.29289 0.292893L5 3.58579L1.70711 0.292893Z',
+  viewBox: '0 0 10 10',
+})
diff --git a/components/ServiceList.tsx b/components/ServiceList.tsx
index 7b1ab78e..d96b4490 100644
--- a/components/ServiceList.tsx
+++ b/components/ServiceList.tsx
@@ -19,7 +19,7 @@ export default function ServiceList({
   const { isLastUsed } = useWalletHistory()
 
   // Get the last used service, installed services, and recommended services
-  const { lastUsedWallet, installedWallets, recommendedWallets } = useMemo(
+  const categorizedWallets = useMemo(
     () =>
       wallets?.reduce(
         (acc, wallet) => {
@@ -38,11 +38,16 @@ export default function ServiceList({
           lastUsedWallet: null as Wallet | null,
           installedWallets: [] as Wallet[],
           recommendedWallets: [] as Wallet[],
-        }
+        },
       ),
-    [wallets, isLastUsed]
+    [wallets, isLastUsed],
   )
 
+  if (!categorizedWallets) return null
+
+  const { lastUsedWallet, installedWallets, recommendedWallets } =
+    categorizedWallets
+
   return (
     <Stack spacing={4}>
       {lastUsedWallet && (
diff --git a/components/ViewHeader.tsx b/components/ViewHeader.tsx
index 0fc0d8f4..13a262c9 100644
--- a/components/ViewHeader.tsx
+++ b/components/ViewHeader.tsx
@@ -1,7 +1,15 @@
-import { CloseIcon } from '@chakra-ui/icons'
-import { Flex, IconButton, Text } from '@chakra-ui/react'
+import {
+  Flex,
+  Heading,
+  Icon,
+  IconButton,
+  Text,
+  useStyles,
+} from '@chakra-ui/react'
 import { ComponentProps } from 'react'
 import { IoChevronBack } from 'react-icons/io5'
+import CloseIcon from './Icons/CloseIcon'
+import BackIcon from './Icons/BackIcon'
 
 type HeaderProps = {
   title?: string
@@ -19,51 +27,42 @@ export default function ViewHeader({
   onBack,
 }: HeaderProps) {
   return (
-    <Flex
-      alignItems="center"
-      justifyContent="space-between"
-      px={6}
-      pt={4}
-      pb={6}
-    >
+    <Flex alignItems="center" justifyContent="space-between" px={5} py={4}>
       {!titleOnly && (
         <Flex flexGrow={1} flexBasis={0} justifyContent="flex-start">
           {onBack && (
             <IconButton
               onClick={onBack}
-              icon={<IoChevronBack />}
+              icon={<BackIcon h="1.125rem" pr="0.15rem" />}
               aria-label="Close Modal"
               borderRadius="full"
               variant="ghost"
-              size="sm"
-              color="blue.500"
-              fontWeight="bold"
-              fontSize="1.5rem"
+              isRound={true}
+              boxSize="1.75rem"
+              minW="0"
             ></IconButton>
           )}
         </Flex>
       )}
 
-      <Text
-        fontSize="xl"
-        fontWeight="bold"
-        textAlign={'center'}
-        {...titleProps}
-      >
-        {title}
-      </Text>
+      <Flex direction="column" justifyContent="center" h="1.75rem">
+        <Heading textAlign={'center'} {...titleProps}>
+          {title}
+        </Heading>
+      </Flex>
 
       {!titleOnly && (
         <Flex flexGrow={1} flexBasis={0} justifyContent="flex-end">
           {onClose && (
             <IconButton
               onClick={onClose}
-              icon={<CloseIcon />}
+              variant="secondary"
+              icon={<CloseIcon h="0.625rem" />}
               aria-label="Close Modal"
-              borderRadius="full"
-              bg="gray.100"
-              color="black"
-              size="sm"
+              isRound={true}
+              boxSize="1.75rem"
+              minW="0"
+              color="rgba(0, 0, 0, 0.6)"
             ></IconButton>
           )}
         </Flex>
diff --git a/components/WalletTypeCard.tsx b/components/WalletTypeCard.tsx
index 85093c0b..247206b8 100644
--- a/components/WalletTypeCard.tsx
+++ b/components/WalletTypeCard.tsx
@@ -52,7 +52,7 @@ export default function WalletTypeCard({
     >
       <SimpleGrid
         columns={2}
-        w="sm"
+        w="xs"
         gap={4}
         templateColumns={'auto 1fr'}
         templateRows={'auto 1fr'}
@@ -62,23 +62,22 @@ export default function WalletTypeCard({
           as={isDataURL(icon) ? 'img' : NextImage}
           src={icon}
           alt={title}
-          boxSize="5rem"
+          boxSize="4.5rem"
           borderRadius="xl"
           my="auto"
         />
         <Stack pt={1}>
-          <Heading size="sm">{title}</Heading>
-          <Text color="gray.500">{description}</Text>
+          <Text textStyle="body1Bold">{title}</Text>
+          <Text textStyle="body2">{description}</Text>
         </Stack>
 
+        {/* Placeholder for grid */}
         <Box></Box>
 
         <HybridButton
+          variant="primary"
           size="sm"
-          colorScheme="blue"
           borderRadius="full"
-          fontWeight="bold"
-          fontSize="sm"
           mr="auto"
           {...buttonProps}
         >
diff --git a/components/views/AboutWallets.tsx b/components/views/AboutWallets.tsx
index deafa5d4..1465d639 100644
--- a/components/views/AboutWallets.tsx
+++ b/components/views/AboutWallets.tsx
@@ -18,11 +18,9 @@ export default function AboutWallets({ onGetWallet }: AboutWalletsProps) {
       overflow="auto"
       flexGrow={1}
       pb={8}
-      px={6}
+      px={5}
     >
-      <Heading textAlign="center" size="md" display={['none', null, 'block']}>
-        What is a Wallet?
-      </Heading>
+      <Heading display={['none', null, 'block']}>What is a Wallet?</Heading>
 
       <Stack spacing={8} my="auto">
         <AboutCard
@@ -39,7 +37,7 @@ export default function AboutWallets({ onGetWallet }: AboutWalletsProps) {
 
       <Stack spacing={4}>
         <Button
-          colorScheme="blue"
+          variant="primary"
           borderRadius="full"
           size="sm"
           onClick={onGetWallet}
@@ -47,10 +45,10 @@ export default function AboutWallets({ onGetWallet }: AboutWalletsProps) {
           Get a Wallet
         </Button>
         <HybridButton
-          href={LEARN_MORE_URL}
-          variant="link"
-          colorScheme="blue"
+          variant="ghost"
           size="sm"
+          href={LEARN_MORE_URL}
+          colorScheme="primary"
         >
           Learn More
         </HybridButton>
diff --git a/components/views/ConnectWallet.tsx b/components/views/ConnectWallet.tsx
index b1496804..cb7a8f6e 100644
--- a/components/views/ConnectWallet.tsx
+++ b/components/views/ConnectWallet.tsx
@@ -28,7 +28,7 @@ export default function ConnectWallet({
         fcl.WalletUtils.redirect(service)
       }
     },
-    [walletConnectUri, onConnectQRCode]
+    [walletConnectUri, onConnectQRCode],
   )
 
   const getServiceInfo = (service: Service) => {
@@ -65,7 +65,7 @@ export default function ConnectWallet({
   }
 
   return (
-    <Stack flexGrow={1} alignItems="center" spacing={4} px={6} pb={6}>
+    <Stack flexGrow={1} alignItems="center" spacing={4} px={5} pb={5}>
       {wallet.services.map((service, i) => {
         const { title, description, buttonText, icon } = getServiceInfo(service)
         return (
diff --git a/components/views/ExploreWallets.tsx b/components/views/ExploreWallets.tsx
index ac6a462f..df1686e5 100644
--- a/components/views/ExploreWallets.tsx
+++ b/components/views/ExploreWallets.tsx
@@ -1,6 +1,7 @@
-import { Container, Stack, Text } from '@chakra-ui/react'
+import { Stack, Text } from '@chakra-ui/react'
 import GetWalletList from '../GetWalletList'
 import { Wallet } from '../../data/wallets'
+import { useIsCollapsed } from '../../hooks/useIsCollapsed'
 
 interface ExploreWalletsProps {
   onGetWallet: (wallet: Wallet) => void
@@ -9,18 +10,27 @@ interface ExploreWalletsProps {
 export default function ExploreWallets({ onGetWallet }: ExploreWalletsProps) {
   return (
     <Stack spacing={0} flexGrow={1} overflow="hidden">
-      <Stack spacing={8} px={8} pb={6} flexGrow={1} overflow="scroll">
+      <Stack px={5} pb={5} flexGrow={1} overflow="scroll">
         <GetWalletList onGetWallet={onGetWallet} />
       </Stack>
-      <Container textAlign="center" p={8} maxW="xs">
-        <Text fontSize="md" fontWeight="bold" mb={1}>
-          Not what you're looking for?
+      <Stack
+        px={5}
+        py={6}
+        maxW="xs"
+        spacing={2}
+        justifyContent="center"
+        mx="auto"
+        textAlign="center"
+      >
+        <Text textStyle="body1Bold">Not what you're looking for?</Text>
+        <Text display={['inline', null, 'none']} textStyle="body2">
+          Return to the main screen to select a different wallet provider
         </Text>
-        <Text fontSize="sm" color="gray.500">
+        <Text display={['none', null, 'inline']} textStyle="body2">
           Select a wallet on the left to get started with a different wallet
           provider.
         </Text>
-      </Container>
+      </Stack>
     </Stack>
   )
 }
diff --git a/components/views/GetWallet.tsx b/components/views/GetWallet.tsx
index f1e39fff..264bf013 100644
--- a/components/views/GetWallet.tsx
+++ b/components/views/GetWallet.tsx
@@ -15,7 +15,7 @@ export default function GetWallet({ wallet, onGetQRCode }: GetWalletProps) {
     wallet.installLink?.[browserInfo.id] || wallet.installLink?.browser
 
   return (
-    <Stack flexGrow={1} alignItems="center" spacing={4} px={6} pb={6}>
+    <Stack flexGrow={1} alignItems="center" spacing={4} px={5} pb={5}>
       {browserInstallLink && (
         <WalletTypeCard
           icon={browserInfo.icon}
diff --git a/components/views/ScanInstall.tsx b/components/views/ScanInstall.tsx
index 4ccf3f0c..aeed0c36 100644
--- a/components/views/ScanInstall.tsx
+++ b/components/views/ScanInstall.tsx
@@ -26,7 +26,7 @@ export default function ScanInstall({ onContinue, wallet }: ScanInstallProps) {
       </Box>
 
       <Button
-        colorScheme="blue"
+        variant="primary"
         size="sm"
         mt="auto"
         mb={4}
diff --git a/components/views/WalletSelection.tsx b/components/views/WalletSelection.tsx
index cdf60bb5..e91cc8e0 100644
--- a/components/views/WalletSelection.tsx
+++ b/components/views/WalletSelection.tsx
@@ -1,4 +1,12 @@
-import { Button, Divider, HStack, Stack, Text } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  Divider,
+  Flex,
+  HStack,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
 import ServiceList from '../ServiceList'
 import { useWallets } from '../../hooks/useWallets'
 import { isGreaterThanOrEqualToVersion } from '../../helpers/version'
@@ -22,14 +30,14 @@ export default function WalletSelection({
   const { appVersion } = useConfig()
   const isFeaturesSupported = isGreaterThanOrEqualToVersion(
     appVersion,
-    SUPPORTED_VERSIONS.SUGGESTED_FEATURES
+    SUPPORTED_VERSIONS.SUGGESTED_FEATURES,
   )
 
   const isCollapsed = useIsCollapsed()
 
   return (
     <Stack spacing={0} flexGrow={1} overflow="hidden">
-      <Stack overflow="scroll" px={8} pb={6} flexGrow={1}>
+      <Stack overflow="scroll" px={5} pb={5} flexGrow={1}>
         {/* TODO: replace this in future PR with Filter Bar */}
         {/*isFeaturesSupported && <Features />*/}
         <ServiceList
@@ -42,19 +50,11 @@ export default function WalletSelection({
       {isCollapsed && (
         <>
           <Divider color="gray.300" />
-          <HStack
-            justifyContent="space-between"
-            alignItems="center"
-            padding={8}
-          >
-            <Text fontSize="sm" color="gray.500">
-              Don't have a wallet?
-            </Text>
+          <HStack justifyContent="space-between" alignItems="center" p={5}>
+            <Text fontSize="sm">Don't have a wallet?</Text>
 
             <Button onClick={onSwitchToLearnMore} variant="link" padding={0}>
-              <Text fontSize="sm" color="blue.500">
-                Learn More
-              </Text>
+              Learn More
             </Button>
           </HStack>
         </>
diff --git a/config/chakra/components/button.ts b/config/chakra/components/button.ts
new file mode 100644
index 00000000..bae22b3f
--- /dev/null
+++ b/config/chakra/components/button.ts
@@ -0,0 +1,56 @@
+import {
+  defineStyle,
+  defineStyleConfig,
+  StyleFunctionProps,
+} from '@chakra-ui/react'
+import { theme as defaultTheme } from '@chakra-ui/react'
+import { mode } from '@chakra-ui/theme-tools'
+import { typography } from '../typography'
+
+const baseStyle = defineStyle({
+  borderRadius: 'full',
+  ...typography['body2Bold'],
+})
+
+const primaryVariant = defineStyle((props: StyleFunctionProps) => ({
+  ...defaultTheme.components.Button.variants.solid(props),
+}))
+
+const secondaryVariant = defineStyle((props: StyleFunctionProps) => {
+  const { colorScheme: c } = props
+
+  return {
+    bg: mode(`gray.100`, `gray.700`)(props),
+    color: mode(`${c}.500`, `${c}.200`)(props),
+    _hover: {
+      bg: mode(`gray.200`, `gray.600`)(props),
+    },
+    _active: {
+      bg: mode(`gray.300`, `gray.500`)(props),
+    },
+  }
+})
+
+const sizes = {
+  sm: defineStyle({
+    px: 'md',
+    py: 'sm',
+  }),
+}
+
+export const buttonConfig = defineStyleConfig({
+  baseStyle: baseStyle,
+  variants: {
+    ...defaultTheme.components.Button.variants,
+    primary: primaryVariant,
+    secondary: secondaryVariant,
+  },
+  defaultProps: {
+    colorScheme: 'primary',
+    variant: 'primary',
+    size: 'sm',
+  },
+  sizes: {
+    ...sizes,
+  },
+})
diff --git a/config/chakra/components/heading.ts b/config/chakra/components/heading.ts
new file mode 100644
index 00000000..1844d9dc
--- /dev/null
+++ b/config/chakra/components/heading.ts
@@ -0,0 +1,16 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react'
+import { typography } from '../typography'
+
+const headingStyle = defineStyle({
+  ...typography.heading,
+})
+
+export const headingConfig = defineStyleConfig({
+  variants: {
+    heading: headingStyle,
+  },
+  defaultProps: {
+    variant: 'heading',
+  },
+  baseStyle: {},
+})
diff --git a/config/chakra/components/text.ts b/config/chakra/components/text.ts
new file mode 100644
index 00000000..b6577b08
--- /dev/null
+++ b/config/chakra/components/text.ts
@@ -0,0 +1,7 @@
+import { defineStyleConfig } from '@chakra-ui/react'
+
+export const textConfig = defineStyleConfig({
+  baseStyle: {
+    textStyle: 'body1',
+  },
+})
diff --git a/config/chakra/theme.ts b/config/chakra/theme.ts
new file mode 100644
index 00000000..326c082e
--- /dev/null
+++ b/config/chakra/theme.ts
@@ -0,0 +1,47 @@
+import { extendTheme, ThemeOverride } from '@chakra-ui/react'
+import { toRem } from './util/sizes'
+import { headingConfig } from './components/heading'
+import { textConfig } from './components/text'
+import { buttonConfig } from './components/button'
+import { typography } from './typography'
+
+export const theme = extendTheme({
+  styles: {
+    global: {
+      body: {
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+  fonts: {
+    body: 'SFRounded,ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+    heading:
+      'SFRounded,ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
+  },
+  textStyles: typography,
+  components: {
+    Heading: headingConfig,
+    Text: textConfig,
+    Button: buttonConfig,
+  },
+  colors: {
+    primary: {
+      '50': '#94B8FF',
+      '100': '#7FA9FF',
+      '200': '#699BFF',
+      '300': '#548DFF',
+      '400': '#3E7EFF',
+      '500': '#2970FF',
+      '600': '#2565E6',
+      '700': '#215ACC',
+      '800': '#1D4EB3',
+      '900': '#194399',
+    },
+  },
+  space: {
+    xs: toRem(5),
+    sm: toRem(8),
+    md: toRem(12),
+    lg: toRem(16),
+  },
+} satisfies ThemeOverride)
diff --git a/config/chakra/typography.ts b/config/chakra/typography.ts
new file mode 100644
index 00000000..0a89fc4a
--- /dev/null
+++ b/config/chakra/typography.ts
@@ -0,0 +1,34 @@
+import { SystemStyleObjectRecord } from '@chakra-ui/react'
+import { toRem } from './util/sizes'
+
+// This is a pretty common/longstanding issue in Chakra UI where "textStyles" cannot be used for theming.
+// https://github.com/chakra-ui/chakra-ui/issues/8264
+// https://github.com/chakra-ui/chakra-ui/issues/3884
+// (& many other issues exist)
+// To use these in our theme we must manually apply them to components.
+// `Text` component is unaffected by this issue, but other components like `Heading` and `Button` are.
+export const typography = {
+  body1: {
+    fontSize: toRem(16),
+    lineHeight: toRem(20),
+  },
+  body1Bold: {
+    fontSize: toRem(16),
+    lineHeight: toRem(20),
+    fontWeight: '700',
+  },
+  body2: {
+    fontSize: toRem(14),
+    lineHeight: toRem(18),
+  },
+  body2Bold: {
+    fontSize: toRem(14),
+    lineHeight: toRem(18),
+    fontWeight: '700',
+  },
+  heading: {
+    fontSize: toRem(18),
+    lineHeight: toRem(24),
+    fontWeight: '700',
+  },
+} satisfies SystemStyleObjectRecord
diff --git a/config/chakra/util/sizes.ts b/config/chakra/util/sizes.ts
new file mode 100644
index 00000000..3acedbe3
--- /dev/null
+++ b/config/chakra/util/sizes.ts
@@ -0,0 +1 @@
+export const toRem = (px: number) => `${px / 16}rem`
diff --git a/package-lock.json b/package-lock.json
index cf5935ae..9000f30d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "fcl-discovery",
       "version": "1.0.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@chakra-ui/icons": "^2.0.17",
         "@chakra-ui/react": "^2.4.9",
@@ -28,6 +29,7 @@
         "swr": "^1.3.0"
       },
       "devDependencies": {
+        "@chakra-ui/cli": "^2.4.1",
         "@emotion/jest": "^11.10.5",
         "@testing-library/jest-dom": "^6.4.6",
         "@testing-library/react": "^16.0.0",
@@ -37,8 +39,8 @@
         "babel-plugin-styled-components": "^2.0.7",
         "jest": "^28.1.0",
         "jest-environment-jsdom": "^28.1.0",
-        "prettier": "^2.6.2",
-        "typescript": "^4.8.2",
+        "prettier": "^3.3.3",
+        "typescript": "^5.5.4",
         "url-loader": "^4.1.1"
       },
       "engines": {
@@ -712,6 +714,48 @@
         "react": ">=18"
       }
     },
+    "node_modules/@chakra-ui/cli": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/cli/-/cli-2.4.1.tgz",
+      "integrity": "sha512-GZZuHUA1cXJWpmYNiVTLPihvY4VhIssRl+AXgw/0IbeodTMop3jWlIioPKLAQeXu5CwvRA6iESyGjnu1V8Zykg==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^3.5.3",
+        "cli-check-node": "^1.3.4",
+        "cli-handle-unhandled": "^1.1.1",
+        "cli-welcome": "^2.2.2",
+        "commander": "^9.3.0",
+        "esbuild": "^0.17.18",
+        "prettier": "^2.8.8"
+      },
+      "bin": {
+        "chakra-cli": "bin/index.js"
+      }
+    },
+    "node_modules/@chakra-ui/cli/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
+    "node_modules/@chakra-ui/cli/node_modules/prettier": {
+      "version": "2.8.8",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/@chakra-ui/clickable": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@chakra-ui/clickable/-/clickable-2.1.0.tgz",
@@ -1940,6 +1984,358 @@
         "node": ">=16"
       }
     },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
+      "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz",
+      "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz",
+      "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz",
+      "integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz",
+      "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz",
+      "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz",
+      "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz",
+      "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz",
+      "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz",
+      "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz",
+      "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz",
+      "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz",
+      "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz",
+      "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz",
+      "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz",
+      "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz",
+      "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz",
+      "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz",
+      "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz",
+      "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz",
+      "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz",
+      "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -5686,6 +6082,148 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz",
       "integrity": "sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q=="
     },
+    "node_modules/clear-any-console": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/clear-any-console/-/clear-any-console-1.16.2.tgz",
+      "integrity": "sha512-OL/7wZpNy9x0GBSzz3poWja84Nr7iaH8aYNsJ5Uet2BVLj6Lm1zvWpZN/yH46Vv3ae7YfHmLLMmfHj911fshJg==",
+      "dev": true
+    },
+    "node_modules/cli-check-node": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/cli-check-node/-/cli-check-node-1.3.4.tgz",
+      "integrity": "sha512-iLGgQXm82iP8eH3R67qbOWs5qqUOLmNnMy5Lzl/RybcMh3y+H2zWU5POzuQ6oDUOdz4XWuxcFhP75szqd6frLg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^3.0.0",
+        "log-symbols": "^3.0.0"
+      }
+    },
+    "node_modules/cli-check-node/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-handle-error": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/cli-handle-error/-/cli-handle-error-4.4.0.tgz",
+      "integrity": "sha512-RyBCnKlc7xVr79cKb9RfBq+4fjwQeX8HKeNzIPnI/W+DWWIUUKh2ur576DpwJ3kZt2UGHlIAOF7N9txy+mgZsA==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^3.0.0",
+        "log-symbols": "^3.0.0"
+      }
+    },
+    "node_modules/cli-handle-error/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cli-handle-unhandled": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cli-handle-unhandled/-/cli-handle-unhandled-1.1.1.tgz",
+      "integrity": "sha512-Em91mJvU7VdgT2MxQpyY633vW1tDzRjPDbii6ZjEBHHLLh0xDoVkFt/wjvi9nSvJcz9rJmvtJSK8KL/hvF0Stg==",
+      "dev": true,
+      "dependencies": {
+        "cli-handle-error": "^4.1.0"
+      }
+    },
+    "node_modules/cli-welcome": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/cli-welcome/-/cli-welcome-2.2.3.tgz",
+      "integrity": "sha512-hxaOpahLk5PAYJj4tOcv8vaNMaBQHeMzeLQTAHq2EoGGTKVYV/MPCSlg5EEsKZ7y8WDGS2ScQtnITw02ZNukMQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "clear-any-console": "^1.16.0"
+      }
+    },
+    "node_modules/cli-welcome/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cli-welcome/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cli-welcome/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/cli-welcome/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/cli-welcome/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/cli-welcome/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/cli-welcome/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -6460,6 +6998,43 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/esbuild": {
+      "version": "0.17.19",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
+      "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.17.19",
+        "@esbuild/android-arm64": "0.17.19",
+        "@esbuild/android-x64": "0.17.19",
+        "@esbuild/darwin-arm64": "0.17.19",
+        "@esbuild/darwin-x64": "0.17.19",
+        "@esbuild/freebsd-arm64": "0.17.19",
+        "@esbuild/freebsd-x64": "0.17.19",
+        "@esbuild/linux-arm": "0.17.19",
+        "@esbuild/linux-arm64": "0.17.19",
+        "@esbuild/linux-ia32": "0.17.19",
+        "@esbuild/linux-loong64": "0.17.19",
+        "@esbuild/linux-mips64el": "0.17.19",
+        "@esbuild/linux-ppc64": "0.17.19",
+        "@esbuild/linux-riscv64": "0.17.19",
+        "@esbuild/linux-s390x": "0.17.19",
+        "@esbuild/linux-x64": "0.17.19",
+        "@esbuild/netbsd-x64": "0.17.19",
+        "@esbuild/openbsd-x64": "0.17.19",
+        "@esbuild/sunos-x64": "0.17.19",
+        "@esbuild/win32-arm64": "0.17.19",
+        "@esbuild/win32-ia32": "0.17.19",
+        "@esbuild/win32-x64": "0.17.19"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
@@ -9482,6 +10057,89 @@
       "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
       "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ=="
     },
+    "node_modules/log-symbols": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
+      "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/log-symbols/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-symbols/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-symbols/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/log-symbols/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/log-symbols/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/log-symbols/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/log-symbols/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -10357,15 +11015,15 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
-      "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "bin": {
-        "prettier": "bin-prettier.js"
+        "prettier": "bin/prettier.cjs"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=14"
       },
       "funding": {
         "url": "https://github.com/prettier/prettier?sponsor=1"
@@ -12017,15 +12675,15 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
+      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/unbox-primitive": {
diff --git a/package.json b/package.json
index 5ceb48d1..587d9418 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,10 @@
     "test:watch": "jest --watch",
     "lint": "npm run lint:prettier",
     "lint:prettier": "prettier --check .",
-    "lintfix": "prettier --write --list-different ."
+    "lintfix": "prettier --write --list-different .",
+    "theme": "chakra-cli tokens ./config/chakra/theme.ts",
+    "theme:watch": "chakra-cli tokens ./config/chakra/theme.ts --watch",
+    "postinstall": "npm run theme"
   },
   "dependencies": {
     "@chakra-ui/icons": "^2.0.17",
@@ -37,6 +40,7 @@
     "swr": "^1.3.0"
   },
   "devDependencies": {
+    "@chakra-ui/cli": "^2.4.1",
     "@emotion/jest": "^11.10.5",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
@@ -46,8 +50,8 @@
     "babel-plugin-styled-components": "^2.0.7",
     "jest": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
-    "prettier": "^2.6.2",
-    "typescript": "^4.8.2",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.4",
     "url-loader": "^4.1.1"
   }
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 375491f9..36dd68ce 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,43 +1,8 @@
 import { handleCancel } from '../helpers/window'
 import { ChakraProvider } from '@chakra-ui/react'
-import {
-  extendTheme,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-} from '@chakra-ui/react'
+import { Modal, ModalOverlay, ModalContent } from '@chakra-ui/react'
 import { useCallback, useState } from 'react'
-
-const theme = extendTheme({
-  styles: {
-    global: {
-      body: {
-        backgroundColor: 'transparent',
-      },
-      font: {
-        heading:
-          '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;',
-        body: '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;',
-      },
-    },
-  },
-  components: {
-    Button: {
-      baseStyle: {
-        _focus: {
-          boxShadow: 'none',
-        },
-      },
-    },
-    IconButton: {
-      baseStyle: {
-        _focus: {
-          boxShadow: 'none',
-        },
-      },
-    },
-  },
-})
+import { theme } from '../config/chakra/theme'
 
 function MyApp({ Component, pageProps }) {
   const [isOpen, setIsOpen] = useState(true)
@@ -52,7 +17,7 @@ function MyApp({ Component, pageProps }) {
       <Modal isOpen={isOpen} onClose={handleOnClose} isCentered>
         <ModalOverlay bg="blackAlpha.300" backdropFilter="blur(10px)" />
         <ModalContent
-          borderRadius="3xl"
+          borderRadius="1rem"
           flexDirection="column"
           w="auto"
           h="auto"