diff --git a/package-lock.json b/package-lock.json
index d76261d1..af2356e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28272,6 +28272,7 @@
         "@chakra-ui/icons": "2.0.17",
         "@chakra-ui/react": "2.4.9",
         "@chakra-ui/theme-tools": "2.0.17",
+        "@chakra-ui/utils": "2.0.15",
         "@ckb-lumos/base": "0.20.0-alpha.2",
         "@ckb-lumos/bi": "0.20.0-alpha.2",
         "@ckb-lumos/codec": "0.20.0-alpha.2",
diff --git a/packages/extension-chrome/package.json b/packages/extension-chrome/package.json
index 060aaf28..1edc1123 100644
--- a/packages/extension-chrome/package.json
+++ b/packages/extension-chrome/package.json
@@ -34,6 +34,7 @@
     "@chakra-ui/icons": "2.0.17",
     "@chakra-ui/react": "2.4.9",
     "@chakra-ui/theme-tools": "2.0.17",
+    "@chakra-ui/utils": "2.0.15",
     "@ckb-lumos/base": "0.20.0-alpha.2",
     "@ckb-lumos/bi": "0.20.0-alpha.2",
     "@ckb-lumos/codec": "0.20.0-alpha.2",
diff --git a/packages/extension-chrome/src/pages/Components/CircleMarker.tsx b/packages/extension-chrome/src/pages/Components/CircleMarker.tsx
new file mode 100644
index 00000000..f5efa31a
--- /dev/null
+++ b/packages/extension-chrome/src/pages/Components/CircleMarker.tsx
@@ -0,0 +1,6 @@
+import { Box, BoxProps } from '@chakra-ui/react';
+import React, { FC } from 'react';
+
+export const CircleMarker: FC<BoxProps> = (props) => (
+  <Box as="span" w="20px" h="20px" borderRadius="50%" background="purple.500" {...props} />
+);
diff --git a/packages/extension-chrome/src/pages/Components/DialogFrame.tsx b/packages/extension-chrome/src/pages/Components/DialogFrame.tsx
index be08e97b..044508a1 100644
--- a/packages/extension-chrome/src/pages/Components/DialogFrame.tsx
+++ b/packages/extension-chrome/src/pages/Components/DialogFrame.tsx
@@ -28,13 +28,13 @@ export const DialogFrame: FC<DialogFrameProps> = ({ meta }) => {
   };
 
   return (
-    <Flex w="100vw" justifyContent="center" backgroundColor="purple.700">
+    <Flex w="100vw" justifyContent="center" backgroundColor="primary.darker">
       <Flex
         alignItems="center"
         direction="column"
         position="relative"
         maxW="500px"
-        pt={title ? '28px' : '44px'}
+        pt="32px"
         h="100vh"
         px="24px"
         pb="72px"
diff --git a/packages/extension-chrome/src/pages/Components/ProgressIndicator.tsx b/packages/extension-chrome/src/pages/Components/ProgressIndicator.tsx
new file mode 100644
index 00000000..f54053fa
--- /dev/null
+++ b/packages/extension-chrome/src/pages/Components/ProgressIndicator.tsx
@@ -0,0 +1,32 @@
+import { Box, BoxProps, HStack } from '@chakra-ui/react';
+import range from 'lodash.range';
+import React, { FC } from 'react';
+
+export type ProgressIndicatorProps = { total: number; current: number } & BoxProps;
+
+export const ProgressIndicator: FC<ProgressIndicatorProps> = ({ total, current, ...rest }) => {
+  const getIndicatorColor = (index: number) => {
+    if (index < current) {
+      return 'primary.lighter';
+    } else if (index > current) {
+      return 'gray.300';
+    }
+    return 'primary';
+  };
+  return (
+    <HStack spacing="12px" paddingY="4px" mb="48px">
+      {range(0, total).map((index) => (
+        <Box
+          transitionProperty="background"
+          transitionDuration="common"
+          key={index}
+          w="66px"
+          h="5px"
+          borderRadius="5px"
+          backgroundColor={getIndicatorColor(index)}
+          {...rest}
+        />
+      ))}
+    </HStack>
+  );
+};
diff --git a/packages/extension-chrome/src/pages/Components/ProgressSteps.tsx b/packages/extension-chrome/src/pages/Components/ProgressSteps.tsx
new file mode 100644
index 00000000..5ecc03c3
--- /dev/null
+++ b/packages/extension-chrome/src/pages/Components/ProgressSteps.tsx
@@ -0,0 +1,61 @@
+import { CheckCircleIcon } from '@chakra-ui/icons';
+import { Box, BoxProps, Grid, Icon, Text } from '@chakra-ui/react';
+import Steps from 'rc-steps';
+import { StepsProps } from 'rc-steps/lib/Steps';
+import React, { FC } from 'react';
+import StepProcessingIcon from './icons/StepProcessing.svg';
+import StepWaitingIcon from './icons/StepWaiting.svg';
+
+export type ProgressStepsProps = Pick<StepsProps, 'items' | 'current'> & BoxProps;
+const renderSingleStep: StepsProps['itemRender'] = ({ title, description, status }) => {
+  const icon = {
+    wait: <Icon as={StepWaitingIcon} w="24px" h="24px" />,
+    process: <Icon as={StepProcessingIcon} w="24px" h="24px" />,
+    finish: <CheckCircleIcon w="20px" h="20px" color="white" />,
+    error: <></>,
+  }[status ?? 'wait'];
+  return (
+    <Grid
+      sx={{
+        '&:last-child .rc-steps-item-tail': {
+          height: 0,
+          width: 0,
+          border: 'none',
+        },
+      }}
+      transitionDuration="common"
+      transitionProperty="opacity"
+      opacity={status === 'wait' ? 0.7 : 1}
+      color="white"
+      templateRows="auto"
+      templateColumns="24px auto"
+    >
+      <Box alignSelf="center" justifySelf="center">
+        {icon}
+      </Box>
+      <Text as={Box} ml="4px" alignSelf="center" fontWeight="semibold" fontSize="md">
+        {title}
+      </Text>
+      <Box
+        className="rc-steps-item-tail"
+        w="0"
+        alignSelf="center"
+        justifySelf="center"
+        h="43px"
+        border="1px solid white"
+        borderRadius="2px"
+        my="1px"
+        transitionDuration="common"
+        transitionProperty="opacity"
+        opacity={status === 'finish' ? 1 : 0.7}
+      />
+      <Text as={Box} lineHeight="4" ml="8px" fontSize="sm">
+        {description}
+      </Text>
+    </Grid>
+  );
+};
+
+export const ProgressSteps: FC<ProgressStepsProps> = (props) => {
+  return <Box as={Steps} direction="vertical" itemRender={renderSingleStep} {...props} />;
+};
diff --git a/packages/extension-chrome/src/pages/Components/SearchBar.tsx b/packages/extension-chrome/src/pages/Components/SearchBar.tsx
new file mode 100644
index 00000000..b1a5cce9
--- /dev/null
+++ b/packages/extension-chrome/src/pages/Components/SearchBar.tsx
@@ -0,0 +1,35 @@
+import { SearchIcon } from '@chakra-ui/icons';
+import { Center, Input, InputGroup, InputGroupProps, InputLeftElement, InputProps } from '@chakra-ui/react';
+import React, { FC } from 'react';
+
+type InputPickedFields = 'onChange' | 'onBlur' | 'onFocus' | 'value' | 'defaultValue';
+
+type SearchBarProps = Omit<InputGroupProps, InputPickedFields> & Pick<InputProps, InputPickedFields>;
+
+export const SearchBar: FC<SearchBarProps> = ({ onChange, onBlur, onFocus, value, defaultValue, ...rest }) => (
+  <InputGroup w="100%" {...rest}>
+    <InputLeftElement h="100%" px="8px" w="60px">
+      <Center w="40px" h="40px" bg="white.300" borderRadius="8px">
+        <SearchIcon w="24px" h="24px" />
+      </Center>
+    </InputLeftElement>
+    <Input
+      h="60px"
+      fontSize="16px"
+      type="search"
+      background="transparent"
+      border="1px solid"
+      borderColor="white.300"
+      color="white"
+      pl="60px"
+      lineHeight="24px"
+      _hover={{ borderColor: 'white.700' }}
+      _focusVisible={{ borderColor: 'accent', borderWidth: '2px !important' }}
+      onChange={onChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      value={value}
+      defaultValue={defaultValue}
+    />
+  </InputGroup>
+);
diff --git a/packages/extension-chrome/src/pages/Components/WhiteAlphaBox.tsx b/packages/extension-chrome/src/pages/Components/WhiteAlphaBox.tsx
index 770fae12..52bedc9f 100644
--- a/packages/extension-chrome/src/pages/Components/WhiteAlphaBox.tsx
+++ b/packages/extension-chrome/src/pages/Components/WhiteAlphaBox.tsx
@@ -5,7 +5,7 @@ import { Flex, FlexProps } from '@chakra-ui/react';
 export const WhiteAlphaBox: FC<FlexProps> = ({ children, sx, ...props }) => {
   return (
     <Flex
-      backgroundColor="whiteAlpha.200"
+      backgroundColor="white.200"
       w="452px"
       borderRadius="8px"
       sx={{
diff --git a/packages/extension-chrome/src/pages/Notification/containers/SignData/SignData.tsx b/packages/extension-chrome/src/pages/Notification/containers/SignData/SignData.tsx
index 77d8db05..9b2fa33c 100644
--- a/packages/extension-chrome/src/pages/Notification/containers/SignData/SignData.tsx
+++ b/packages/extension-chrome/src/pages/Notification/containers/SignData/SignData.tsx
@@ -112,7 +112,7 @@ export const SignData: FC = () => {
               maxW="100%"
               overflow="hidden"
               whiteSpace="nowrap"
-              color="yellow.200"
+              color="accent"
               as={RouteLink}
               to="/sign-transaction/view-data"
               cursor="pointer"
diff --git a/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx b/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx
index 59cb581e..c9af4567 100644
--- a/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx
+++ b/packages/extension-chrome/src/pages/Notification/containers/SignTransaction.tsx
@@ -47,7 +47,7 @@ const CellCapacity: FC<{ capacity: string }> = ({ capacity }) => {
   return (
     <>
       {decimalPart ? (
-        <Tooltip hasArrow label={`${amount} CKB`}>
+        <Tooltip hasArrow placement="top" label={`${amount} CKB`}>
           <Box>
             ≈{integerPart}
             {' CKB'}
@@ -124,7 +124,7 @@ const TransactionIOList: FC<TransactionIOListProps> = ({ type, networkName, tx,
                   <Box w="60px" p="16px">
                     #{index + 1}
                   </Box>
-                  <Tooltip hasArrow label={addr}>
+                  <Tooltip hasArrow placement="top" label={addr}>
                     <Box p="16px">
                       {addr.slice(0, 5)}...{addr.slice(-4)}
                     </Box>
@@ -199,6 +199,7 @@ export const SignTransaction: FC = () => {
           mx="-4px"
           px="4px"
           overflow="auto"
+          maxH="420px"
         >
           <TransactionIOList networkName={networkName} type="inputs" tx={transactionQuery.data.tx} />
           <TransactionIOList networkName={networkName} type="outputs" tx={transactionQuery.data.tx} mt="12px" />
diff --git a/packages/extension-chrome/src/pages/Notification/index.tsx b/packages/extension-chrome/src/pages/Notification/index.tsx
index 261ab4eb..3683f25d 100644
--- a/packages/extension-chrome/src/pages/Notification/index.tsx
+++ b/packages/extension-chrome/src/pages/Notification/index.tsx
@@ -62,7 +62,6 @@ const router = createHashRouter(routes);
 
 const App = () => {
   return (
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     <ChakraProvider theme={solidBackgroundTheme}>
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
diff --git a/packages/extension-chrome/src/pages/Popup/containers/Home.tsx b/packages/extension-chrome/src/pages/Popup/containers/Home.tsx
index 7db3c864..a93551b0 100644
--- a/packages/extension-chrome/src/pages/Popup/containers/Home.tsx
+++ b/packages/extension-chrome/src/pages/Popup/containers/Home.tsx
@@ -67,10 +67,15 @@ export const Home: FC = () => {
     <Flex flexDir="column" h="100%">
       <ConnectStatusCard name={config?.nickname!} connected={connectedStatus} />
 
-      <WhiteAlphaBox direction="column" mt="20px">
+      <WhiteAlphaBox direction="column" mt="20px" overflow="hidden">
         {entries.map(({ title, icon, onClick, testId }) => (
           <Flex
             key={testId}
+            _hover={{
+              background: 'white.200',
+            }}
+            transitionProperty="common"
+            transitionDuration="normal"
             data-test-id={testId}
             as="button"
             alignItems="center"
@@ -79,7 +84,7 @@ export const Home: FC = () => {
             onClick={onClick}
             type="button"
           >
-            <Center mr="20px" w="48px" backgroundColor="whiteAlpha.300" h="48px" borderRadius="50%">
+            <Center mr="20px" w="48px" backgroundColor="white.300" h="48px" borderRadius="50%">
               {icon}
             </Center>
             <Box fontSize="md" fontWeight="semibold">
diff --git a/packages/extension-chrome/src/pages/Popup/containers/Network/EditNetwork.tsx b/packages/extension-chrome/src/pages/Popup/containers/Network/EditNetwork.tsx
index 79eadab4..750fe47a 100644
--- a/packages/extension-chrome/src/pages/Popup/containers/Network/EditNetwork.tsx
+++ b/packages/extension-chrome/src/pages/Popup/containers/Network/EditNetwork.tsx
@@ -95,7 +95,7 @@ export const EditNetwork: FC<EditNetworkProps> = ({ mode }) => {
 
   return (
     <Flex direction="column" h="100%" as="form" onSubmit={onSubmit}>
-      <VStack as={WhiteAlphaBox} spacing="16px" p="35px 20px" direction="column">
+      <VStack as={WhiteAlphaBox} spacing="16px" p="16px 20px" direction="column">
         <FormControl>
           <FormLabel>Name</FormLabel>
           <Input {...register('name', { required: true })} name="name" />
diff --git a/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx b/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx
index 13e7786d..d969d685 100644
--- a/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx
+++ b/packages/extension-chrome/src/pages/Popup/containers/Network/NetworkConfig.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Flex, Spacer, Button, Radio, RadioGroup, Skeleton, Icon, useToast, VStack } from '@chakra-ui/react';
+import { Flex, Spacer, Button, Radio, RadioGroup, Skeleton, Icon, useToast } from '@chakra-ui/react';
 import { AddIcon, DeleteIcon } from '@chakra-ui/icons';
 import EditIcon from '../../../Components/icons/Edit.svg';
 import { useNavigate } from 'react-router-dom';
@@ -58,57 +58,63 @@ export const NetworkConfig: FC = () => {
 
   return (
     <Skeleton h="100%" as={Flex} flexDirection="column" alignItems="center" isLoaded={!!networks}>
-      <WhiteAlphaBox overflowY="auto" maxH="500px" p="20px">
-        <RadioGroup
-          value={currentNetwork}
-          data-test-id="networkRadio"
-          onChange={onToggle}
-          display="flex"
-          w="100%"
-          flexDirection="column"
-        >
-          <VStack spacing="16px" flexDir="column">
-            {networks?.map((network, index) => (
-              <Flex
-                sx={{
-                  '&:hover .operations': {
-                    opacity: 1,
-                  },
-                  '& .operations': {
-                    opacity: 0,
-                    '& svg': {
-                      cursor: 'pointer',
-                    },
-                  },
-                }}
-                key={network.id}
-                w="100%"
-                alignItems="center"
-                justifyContent="space-between"
-              >
-                <Radio data-test-id={`networkRadio[${index}]`} value={network.id}>
-                  {network.displayName}
-                </Radio>
-                <Spacer />
-                {!PERSIST_IDS.has(network.id) && (
-                  <Flex className="operations">
-                    <Icon as={EditIcon} onClick={gotoEdit(network.id)} w="20px" h="20px" mr="20px" />
-                    <DeleteIcon
-                      onClick={async () => {
-                        await removeNetworkMutation.mutateAsync(network.id);
-                        await configQuery.invalidate();
-                      }}
-                      w="20px"
-                      h="20px"
-                      color="white"
-                    />
-                  </Flex>
-                )}
+      <RadioGroup
+        as={WhiteAlphaBox}
+        maxH="562px"
+        overflow="auto"
+        value={currentNetwork}
+        data-test-id="networkRadio"
+        onChange={onToggle}
+        flexDirection="column"
+        py="8px"
+        display="grid"
+        gridAutoRows="40px"
+        gridTemplateRows="repeat(2, 40px)"
+      >
+        {networks?.map((network, index) => (
+          <Flex
+            sx={{
+              '&:hover .operations': {
+                opacity: 1,
+              },
+              '& .operations': {
+                opacity: 0,
+                '& svg': {
+                  cursor: 'pointer',
+                },
+              },
+            }}
+            _hover={{
+              backgroundColor: 'white.200',
+            }}
+            transitionProperty="common"
+            transitionDuration="normal"
+            key={network.id}
+            w="100%"
+            alignItems="center"
+            justifyContent="space-between"
+            px="20px"
+          >
+            <Radio flex="1" h="100%" data-test-id={`networkRadio[${index}]`} value={network.id}>
+              {network.displayName}
+            </Radio>
+            {!PERSIST_IDS.has(network.id) && (
+              <Flex className="operations">
+                <Icon as={EditIcon} onClick={gotoEdit(network.id)} w="20px" h="20px" mr="20px" />
+                <DeleteIcon
+                  onClick={async () => {
+                    await removeNetworkMutation.mutateAsync(network.id);
+                    await configQuery.invalidate();
+                  }}
+                  w="20px"
+                  h="20px"
+                  color="white"
+                />
               </Flex>
-            ))}
-          </VStack>
-        </RadioGroup>
-      </WhiteAlphaBox>
+            )}
+          </Flex>
+        ))}
+      </RadioGroup>
       <Spacer />
       <Button
         data-test-id="addNetwork"
diff --git a/packages/extension-chrome/src/pages/Popup/containers/WhitelistSites.tsx b/packages/extension-chrome/src/pages/Popup/containers/WhitelistSites.tsx
index f42d5955..be3dafec 100644
--- a/packages/extension-chrome/src/pages/Popup/containers/WhitelistSites.tsx
+++ b/packages/extension-chrome/src/pages/Popup/containers/WhitelistSites.tsx
@@ -1,24 +1,13 @@
 import React, { FC, useMemo, useState } from 'react';
-import {
-  Flex,
-  VStack,
-  Center,
-  Box,
-  Text,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  Highlight,
-  Skeleton,
-  useToast,
-} from '@chakra-ui/react';
-import { DeleteIcon, SearchIcon } from '@chakra-ui/icons';
+import { Flex, Center, Box, Text, Highlight, Skeleton, useToast, Grid } from '@chakra-ui/react';
+import { DeleteIcon } from '@chakra-ui/icons';
 import { useMutation } from '@tanstack/react-query';
 
 import { WhiteAlphaBox } from '../../Components/WhiteAlphaBox';
 import { useConfigQuery } from '../../hooks/useConfigQuery';
 import { useService } from '../../hooks/useService';
 import { SiteFavicon } from '../../Components/SiteFavicon';
+import { SearchBar } from '../../Components/SearchBar';
 
 export const WhitelistSites: FC = () => {
   const configQuery = useConfigQuery();
@@ -50,69 +39,57 @@ export const WhitelistSites: FC = () => {
 
   return (
     <Skeleton isLoaded={!!filteredSites}>
-      <Text as={Box} fontSize="md" mb="20px" w="100%">
+      <Text as={Box} fontSize="md" mb="24px" w="100%">
         {configQuery.data?.nickname} is connected to these sites. They can view your account address
       </Text>
-      <InputGroup alignItems="center" h="60px" mb="20px">
-        <InputLeftElement
-          borderRadius="8px"
-          top="10px"
-          left="6px"
-          w="40px"
-          h="40px"
-          backgroundColor="purple.500"
-          as={Center}
-        >
-          <SearchIcon w="24px" h="24px" />
-        </InputLeftElement>
-        <Input
-          data-test-id="siteSearch"
-          size="lg"
-          w="452px"
-          background="transparent"
-          color="white"
-          onChange={(e) => setSearchQuery(e.target.value)}
-          value={searchQuery}
-          h="60px"
-          pl="48px"
-        />
-      </InputGroup>
+      <SearchBar mb="24px" onChange={(e) => setSearchQuery(e.target.value)} value={searchQuery} />
       {!filteredSites?.length ? (
-        <Center as={WhiteAlphaBox} data-test-id="siteList" h="288px">
+        <Center as={WhiteAlphaBox} data-test-id="siteList" h="268px">
           <Box color="whiteAlpha.700" height="20px" fontSize="sm">
             No whitelist sites found.
           </Box>
         </Center>
       ) : (
-        <VStack
+        <Grid
           data-test-id="siteList"
           overflowY="auto"
-          padding="30px 20px"
           as={WhiteAlphaBox}
-          spacing="12px"
-          h="288px"
+          h="268px"
           flexDirection="column"
+          templateRows="repeat(3, 64px)"
+          autoRows="64px"
+          py="8px"
         >
           {filteredSites?.map((site, index) => (
-            <Flex data-test-id={`site[${index}]`} alignItems="center" h="48px" w="100%" key={site.host}>
-              <Center w="48px" borderRadius="50%" padding="4px" h="48px" backgroundColor="whiteAlpha.300">
-                <SiteFavicon data-test-id={`site[${index}].favicon`} size={32} host={site.host} />
+            <Flex
+              _hover={{ background: 'white.200' }}
+              data-test-id={`site[${index}]`}
+              alignItems="center"
+              h="100%"
+              w="100%"
+              p="8px 20px"
+              key={site.host}
+            >
+              <Center w="100%">
+                <Center w="48px" borderRadius="50%" padding="4px" h="48px" backgroundColor="white.200">
+                  <SiteFavicon data-test-id={`site[${index}].favicon`} size={32} host={site.host} />
+                </Center>
+                <Flex ml="20px" data-test-id={`site[${index}].url`} flex={1} fontSize="lg" alignItems="center">
+                  <Highlight query={searchQuery} styles={{ bg: 'white' }}>
+                    {site.host}
+                  </Highlight>
+                </Flex>
+                <DeleteIcon
+                  data-test-id={`site[${index}].remove`}
+                  cursor="pointer"
+                  w="20px"
+                  h="20px"
+                  onClick={removeSite(site.host)}
+                />
               </Center>
-              <Flex ml="20px" data-test-id={`site[${index}].url`} flex={1} fontSize="lg" alignItems="center">
-                <Highlight query={searchQuery} styles={{ bg: 'white' }}>
-                  {site.host}
-                </Highlight>
-              </Flex>
-              <DeleteIcon
-                data-test-id={`site[${index}].remove`}
-                cursor="pointer"
-                w="20px"
-                h="20px"
-                onClick={removeSite(site.host)}
-              />
             </Flex>
           ))}
-        </VStack>
+        </Grid>
       )}
     </Skeleton>
   );
diff --git a/packages/extension-chrome/src/pages/Popup/index.tsx b/packages/extension-chrome/src/pages/Popup/index.tsx
index 73f6df3d..aa4d217d 100644
--- a/packages/extension-chrome/src/pages/Popup/index.tsx
+++ b/packages/extension-chrome/src/pages/Popup/index.tsx
@@ -82,7 +82,6 @@ const App: FC = () => {
 
   return (
     <React.StrictMode>
-      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
       <ChakraProvider theme={solidBackgroundTheme}>
         <QueryClientProvider client={queryClient}>
           <RouterProvider router={hashRouter} />
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx
index 3c31f371..25a09d38 100644
--- a/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx
+++ b/packages/extension-chrome/src/pages/WalletManager/containers/BeforeStart.tsx
@@ -1,8 +1,7 @@
 import React, { FC } from 'react';
-import { Card, Box, ListItem, Heading, Text, UnorderedList, ListIcon, Button } from '@chakra-ui/react';
+import { Card, ListItem, Heading, Text, UnorderedList, ListIcon, Button, Center, Box } from '@chakra-ui/react';
 import { useNavigate } from 'react-router-dom';
-
-const Marker: FC = (props) => <Box as="span" w="20px" h="20px" borderRadius="50%" background="purple.500" {...props} />;
+import { CircleMarker } from '../../Components/CircleMarker';
 
 const texts = [
   'We do not send any clicks, page views or events to a central server',
@@ -13,37 +12,37 @@ const texts = [
 export const BeforeStart: FC = () => {
   const navigate = useNavigate();
   return (
-    <>
+    <Box flexDir="column" w="568px">
       <Heading mb="48px" fontSize="4xl" fontWeight="semibold">
         Before We Start
       </Heading>
-      <Text fontSize="16px" w="568px">
-        We want you to know that we prioritize your privacy:
-      </Text>
-      <Card borderRadius="8px" my="12px" w="568px" p="20px">
-        <UnorderedList spacing="12px">
+      <Text fontSize="16px">We want you to know that we prioritize your privacy:</Text>
+      <Card borderRadius="8px" my="12px" p="20px">
+        <UnorderedList spacing="12px" ml="0">
           {texts.map((t) => (
             <ListItem display="flex" fontSize="md" key={t}>
-              <ListIcon as={Marker} mt="4px" />
+              <ListIcon as={CircleMarker} mt="4px" />
               {t}
             </ListItem>
           ))}
         </UnorderedList>
       </Card>
-      <Text w="568px" fontSize="16px" mb="72px">
+      <Text fontSize="16px" mb="72px">
         We are not in the information collection business (even anonymous data).
       </Text>
 
-      <Button
-        onClick={() => {
-          navigate('/create/account');
-        }}
-        data-test-id="getStarted"
-        size="lg"
-        w="148px"
-      >
-        Get Started
-      </Button>
-    </>
+      <Center>
+        <Button
+          onClick={() => {
+            navigate('/create/account');
+          }}
+          data-test-id="getStarted"
+          size="lg"
+          w="148px"
+        >
+          Get Started
+        </Button>
+      </Center>
+    </Box>
   );
 };
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx
index b2ff3527..61403839 100644
--- a/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx
+++ b/packages/extension-chrome/src/pages/WalletManager/containers/ConfirmMnemonic.tsx
@@ -1,4 +1,4 @@
-import { Badge, Box, Button, Heading, SimpleGrid, Textarea } from '@chakra-ui/react';
+import { Box, Button, Center, Heading, SimpleGrid, Textarea } from '@chakra-ui/react';
 import React, { FC, ReactElement, useEffect, useMemo } from 'react';
 import { useList } from 'react-use';
 import shuffle from 'lodash.shuffle';
@@ -6,6 +6,7 @@ import zip from 'lodash.zip';
 import { useWalletCreationStore } from '../store';
 import range from 'lodash.range';
 import { useOutletContext } from './CreateProcessFrame';
+import { CircleMarker } from '../../Components/CircleMarker';
 
 export const ConfirmMnemonic: FC = () => {
   const { initWallet, seed } = useWalletCreationStore();
@@ -40,8 +41,15 @@ export const ConfirmMnemonic: FC = () => {
         isAllCorrect = false;
       }
       wordElements.push(
-        <Box as="span" key={index} data-test-id={`selectedSeed[${index}]`} color={isCorrect ? 'black' : 'red'}>
-          {chosenWord}{' '}
+        <Box
+          as="span"
+          display="inline-block"
+          pl={index !== 0 ? '12px' : 0}
+          key={index}
+          data-test-id={`selectedSeed[${index}]`}
+          color={isCorrect ? 'black' : 'red'}
+        >
+          {chosenWord}
         </Box>,
       );
     });
@@ -57,42 +65,46 @@ export const ConfirmMnemonic: FC = () => {
   }, [isAllCorrect, setNextAvailable]);
 
   return (
-    <>
+    <Box w="480px" flexDir="column">
       <Heading mb="48px" lineHeight="111%" fontWeight="semibold">
         Confirm your Seed
       </Heading>
-      <Box fontSize="md" w="480px" mb="8px">
+      <Box fontSize="md" mb="8px">
         Please select words in correct order to form your seed.
       </Box>
 
-      <Textarea data-test-id="selectedSeed" as="div" w="480px" h="200px">
+      <Textarea data-test-id="selectedSeed" as="div" p="16px" h="200px">
         {wordElements}
       </Textarea>
 
-      <SimpleGrid spacing="12px" marginTop="32px" columns={4} w="480px">
+      <SimpleGrid spacing="12px" marginTop="32px" columns={4}>
         {word4Choose.map((word, index) => {
           const chosenOrder = chosenIndex.findIndex((i) => i === index);
           const hasChosen = chosenOrder !== -1;
+          const isCorrect = seed[chosenOrder] === word;
           return (
             <Box position="relative" key={word} data-test-id={`seed[${index}]`} data-test-selected={hasChosen}>
               {hasChosen && (
-                <Badge
-                  borderRadius="18px"
+                <CircleMarker
                   w="18px"
                   h="18px"
-                  colorScheme="purple"
+                  background={isCorrect ? 'primary' : 'error.darker'}
                   position="absolute"
+                  color="white"
                   top="-4px"
                   right="-4px"
                   zIndex="1"
+                  as={Center}
                 >
                   {chosenOrder + 1}
-                </Badge>
+                </CircleMarker>
               )}
               <Button
+                aria-selected={hasChosen}
                 size="lg"
                 w="108px"
-                variant={hasChosen ? 'primary' : 'outline'}
+                variant={'outline'}
+                colorScheme="primary"
                 onClick={hasChosen ? removeChosenIndex(index) : addChosenIndex(index)}
                 // for preventing the button size change
                 borderWidth="1px"
@@ -103,6 +115,6 @@ export const ConfirmMnemonic: FC = () => {
           );
         })}
       </SimpleGrid>
-    </>
+    </Box>
   );
 };
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx
index 3ae8b993..0a84f090 100644
--- a/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx
+++ b/packages/extension-chrome/src/pages/WalletManager/containers/CreateAccount.tsx
@@ -1,4 +1,4 @@
-import { FormControl, FormLabel, Heading, Input, Box, FormErrorMessage } from '@chakra-ui/react';
+import { FormControl, FormLabel, Heading, Input, Box, FormErrorMessage, Center } from '@chakra-ui/react';
 import { Controller, useForm } from 'react-hook-form';
 import Avatar from '../../Components/icons/Avatar.svg';
 import React, { FC, useEffect } from 'react';
@@ -29,7 +29,7 @@ export const CreateAccount: FC<{ isImportSeed?: boolean }> = ({ isImportSeed })
   }, [formState.isValid, setNextAvailable]);
 
   return (
-    <>
+    <Center flexDir="column">
       <Heading mb="48px" lineHeight="111%" fontWeight="semibold">
         Create Username
       </Heading>
@@ -46,12 +46,12 @@ export const CreateAccount: FC<{ isImportSeed?: boolean }> = ({ isImportSeed })
           render={({ fieldState, field }) => (
             <FormControl isInvalid={fieldState.invalid && fieldState.error?.type !== 'required'}>
               <FormLabel>A Descriptive Name For Your Wallet</FormLabel>
-              <Input data-test-id="username" {...field} />
+              <Input data-test-id="username" placeholder="Username" {...field} />
               <FormErrorMessage>{fieldState.error?.message}</FormErrorMessage>
             </FormControl>
           )}
         />
       </Box>
-    </>
+    </Center>
   );
 };
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx
index 0feb683c..ca3f9801 100644
--- a/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx
+++ b/packages/extension-chrome/src/pages/WalletManager/containers/CreateProcessFrame.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
-import { Box, Button, Center, Flex, FlexProps, Grid, HStack, Icon, Text, useToast } from '@chakra-ui/react';
+import { Button, Center, Flex, HStack, useToast } from '@chakra-ui/react';
 import {
   Outlet,
   useLoaderData,
@@ -7,72 +7,12 @@ import {
   useNavigate,
   useOutletContext as _useOutletContext,
 } from 'react-router-dom';
-import StepProcessingIcon from '../../Components/icons/StepProcessing.svg';
-import StepWaitingIcon from '../../Components/icons/StepWaiting.svg';
 
-import range from 'lodash.range';
 import { Logo } from '../../Components/Logo';
-import { CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
 import { CreateFlowConfig } from '../types';
-import Steps from 'rc-steps';
-import { StepsProps } from 'rc-steps/lib/Steps';
-
-const ProcessIndicator: FC<{ total: number; current: number } & FlexProps> = ({ total, current }) => {
-  return (
-    <HStack spacing="12px" paddingY="4px" mb="48px">
-      {range(0, total).map((index) => (
-        <Box
-          key={index}
-          w="66px"
-          h="5px"
-          borderRadius="5px"
-          backgroundColor={index === current ? 'purple.500' : 'purple.200'}
-        />
-      ))}
-    </HStack>
-  );
-};
-
-const renderSingleStep: StepsProps['itemRender'] = ({ title, description, status }) => {
-  const icon = {
-    wait: <Icon as={StepWaitingIcon} w="24px" h="24px" />,
-    process: <Icon as={StepProcessingIcon} w="24px" h="24px" />,
-    finish: <CheckCircleIcon w="24px" h="24px" color="white" />,
-    error: <></>,
-  }[status ?? 'wait'];
-  return (
-    <Grid
-      sx={{
-        '&:last-child .rc-steps-item-tail': {
-          height: 0,
-          width: 0,
-          border: 'none',
-        },
-      }}
-      color="white"
-      templateRows="auto"
-      templateColumns="24px auto"
-    >
-      {icon}
-      <Text as={Box} ml="4px" alignSelf="center" fontWeight="semibold" fontSize="md">
-        {title}
-      </Text>
-      <Box
-        className="rc-steps-item-tail"
-        w="0"
-        alignSelf="center"
-        justifySelf="center"
-        h="43px"
-        border="1px solid white"
-        borderRadius="2px"
-        my="1px"
-      />
-      <Text as={Box} lineHeight="4" ml="8px" fontSize="sm">
-        {description}
-      </Text>
-    </Grid>
-  );
-};
+import { ProgressIndicator } from '../../Components/ProgressIndicator';
+import { ProgressSteps } from '../../Components/ProgressSteps';
 
 export type OutletContext = {
   whenSubmit: (cb: () => Promise<unknown>) => void;
@@ -98,8 +38,6 @@ export const CreateProcessFrame: FC = () => {
   );
   const currentStep = flowConfig.steps[currentPathIndex];
 
-  const isLastStep = currentPathIndex === flowPaths.length - 1;
-
   const goBack = () => {
     setNextAvailable(false);
     navigate(currentPathIndex === 0 ? flowConfig.entry : flowPaths[currentPathIndex - 1], { replace: true });
@@ -142,18 +80,11 @@ export const CreateProcessFrame: FC = () => {
         alignItems="center"
         pl="80px"
         position="relative"
-        backgroundColor="purple.700"
+        backgroundColor="primary.darker"
         height="100vh"
       >
         <Logo position="absolute" left="80px" top="48px" />
-        <Box minH="520px">
-          <Steps
-            current={currentPathIndex}
-            direction="vertical"
-            itemRender={renderSingleStep}
-            items={flowConfig.steps}
-          />
-        </Box>
+        <ProgressSteps minH="520px" current={currentPathIndex} items={flowConfig.steps} />
       </Flex>
       <Flex flex={1} as="form" onSubmit={onSubmit} direction="column" justifyContent="center" alignItems="center">
         <Center flexDirection="column" flex={1}>
@@ -162,7 +93,7 @@ export const CreateProcessFrame: FC = () => {
           </Flex>
         </Center>
         <HStack spacing="24px" mb="32px">
-          {(!isLastStep || !flowConfig.disableBackOnExit) && (
+          {!currentStep.disableBack && (
             <Button
               data-test-id="back"
               onClick={goBack}
@@ -178,13 +109,13 @@ export const CreateProcessFrame: FC = () => {
             data-test-id="next"
             isLoading={submitting}
             isDisabled={!nextAvailable && !currentStep.displayOnly}
-            rightIcon={<ChevronRightIcon />}
+            rightIcon={!currentStep.disableBack ? <ChevronRightIcon /> : undefined}
           >
-            {isLastStep && flowConfig.exitButtonText ? flowConfig.exitButtonText : 'Next'}
+            {currentStep.nextButtonText || 'Next'}
           </Button>
         </HStack>
 
-        <ProcessIndicator total={flowPaths.length} current={currentPathIndex} />
+        <ProgressIndicator total={flowPaths.length} current={currentPathIndex} />
       </Flex>
     </Flex>
   );
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx
index 7c28c5c3..4bc6a231 100644
--- a/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx
+++ b/packages/extension-chrome/src/pages/WalletManager/containers/NewMnemonic.tsx
@@ -11,9 +11,13 @@ import {
   Flex,
   Text,
   useToast,
+  List,
+  ListItem,
+  ListIcon,
 } from '@chakra-ui/react';
 import React, { useEffect, useState, FC } from 'react';
 import { hd } from '@ckb-lumos/lumos';
+import { CircleMarker } from '../../Components/CircleMarker';
 import FileCopyIcon from '../../Components/icons/FileCopy.svg';
 
 import { useWalletCreationStore } from '../store';
@@ -41,11 +45,11 @@ export const CreateMnemonic: FC = () => {
   }, [mnemonic, clipboard, setWalletStore]);
 
   return (
-    <>
+    <Box w="532px">
       <Heading mb="48px" lineHeight="111%" fontWeight="semibold">
         Generate Wallet Seed
       </Heading>
-      <Alert variant="left-accent" status="warning" mb="12px">
+      <Alert status="warning" mb="12px">
         <AlertIcon />
         <Box>
           <AlertTitle fontSize="md">Warning</AlertTitle>
@@ -74,16 +78,18 @@ export const CreateMnemonic: FC = () => {
         </Box>
       </Flex>
 
-      <Flex>
-        <Box mr="8px" w="20px" h="20px" backgroundColor="purple.500" borderRadius="50%" />
-        <Text w="596px" fontSize="md" mt="-2px">
-          Store this Seed in a password manager like 1Password.
-          <br />
-          <br />
-          Please write this Seed on a piece of paper and store in a secure location. If you want even stronger security,
-          write it down on multiple pieces of paper and store them in at least 2-3 different locations.
-        </Text>
-      </Flex>
-    </>
+      <List>
+        <ListItem display="flex">
+          <ListIcon as={CircleMarker} w="20px" h="20px" />
+          <Box w="100%" fontSize="16px" lineHeight="24px">
+            <Text>Store this Seed in a password manager like 1Password.</Text>
+            <Text mt="16px">
+              Please write this Seed on a piece of paper and store in a secure location. If you want even stronger
+              security, write it down on multiple pieces of paper and store them in at least 2-3 different locations.
+            </Text>
+          </Box>
+        </ListItem>
+      </List>
+    </Box>
   );
 };
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/Password.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/Password.tsx
index bc956037..fd78f7b3 100644
--- a/packages/extension-chrome/src/pages/WalletManager/containers/Password.tsx
+++ b/packages/extension-chrome/src/pages/WalletManager/containers/Password.tsx
@@ -42,7 +42,7 @@ export const SetPassword: FC<SetPasswordProps> = ({ isImportSeed }) => {
   }, [setNextAvailable, formState]);
 
   return (
-    <>
+    <Box>
       <Heading mb="48px" lineHeight="111%" fontWeight="semibold">
         Create password
       </Heading>
@@ -121,6 +121,6 @@ export const SetPassword: FC<SetPasswordProps> = ({ isImportSeed }) => {
             </Checkbox>
           </FormControl> */}
       </VStack>
-    </>
+    </Box>
   );
 };
diff --git a/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx b/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx
index 734fefa5..3ea2a1ff 100644
--- a/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx
+++ b/packages/extension-chrome/src/pages/WalletManager/containers/RecoveryWallet.tsx
@@ -140,16 +140,16 @@ export const RecoveryWallet: FC = () => {
   });
 
   return (
-    <>
+    <Box w="672px">
       <Heading fontWeight="semibold" lineHeight="111%" mb="48px">
         Access Wallet With Your Seed
       </Heading>
-      <Text lineHeight="6" fontSize="md" mb="16px" w="672px">
+      <Text lineHeight="6" fontSize="md" mb="16px">
         Nexus cannot recover your password. We will use your Seed to validate your ownership, restore your wallet and
         set up a new password. First, enter the Seed that you were given when you created your wallet.
       </Text>
 
-      <Text fontSize="md" mb="16px" fontWeight="extrabold" w="672px" as={Box}>
+      <Text w="100%" fontSize="md" mb="16px" fontWeight="extrabold" as={Box}>
         Type your Seed here
       </Text>
       <Alert mb="16px" status="info">
@@ -157,7 +157,7 @@ export const RecoveryWallet: FC = () => {
         <AlertDescription fontSize="md">You can paste your entire Seed into any field</AlertDescription>
       </Alert>
       <Box display="grid">
-        <Grid w="672px" templateColumns="repeat(3, 1fr)" column={3} gap="12px">
+        <Grid gridTemplate="repeat(4, 1fr) / repeat(3, 1fr)" column={3} gap="12px">
           {inputs}
         </Grid>
       </Box>
@@ -173,17 +173,13 @@ export const RecoveryWallet: FC = () => {
             );
 
           return (
-            <>
-              {hasInvalidWord && (
-                <Alert mt="16px" status="error">
-                  <AlertIcon />
-                  <AlertDescription fontSize="md">Please check your Seed</AlertDescription>
-                </Alert>
-              )}
-            </>
+            <Alert visibility={hasInvalidWord ? 'visible' : 'hidden'} mt="16px" status="error">
+              <AlertIcon />
+              <AlertDescription fontSize="md">Please check your seed phrase</AlertDescription>
+            </Alert>
           );
         }}
       />
-    </>
+    </Box>
   );
 };
diff --git a/packages/extension-chrome/src/pages/WalletManager/index.tsx b/packages/extension-chrome/src/pages/WalletManager/index.tsx
index 7a6411f1..3b067c77 100644
--- a/packages/extension-chrome/src/pages/WalletManager/index.tsx
+++ b/packages/extension-chrome/src/pages/WalletManager/index.tsx
@@ -44,12 +44,17 @@ const routeConfig: RouteObject[] = [
           { path: 'account', title: 'Create a Username', description: 'Create a username' },
           { path: 'password', title: 'Create Password', description: 'Choose a secure one' },
           { path: 'seed', title: 'Generate Wallet Seed', description: 'Remember it!', displayOnly: true },
-          { path: 'confirm', title: 'Confirm Seed', description: 'Confirm your seed' },
+          {
+            path: 'confirm',
+            title: 'Confirm Seed',
+            description: 'Confirm your seed',
+            nextButtonText: 'Confirm',
+            disableBack: true,
+          },
         ],
         entry: '/',
         exit: '/success',
         disableBackOnExit: true,
-        exitButtonText: 'Confirm',
       } as CreateFlowConfig;
     },
     children: [
@@ -81,8 +86,13 @@ const routeConfig: RouteObject[] = [
             path: 'seed',
             title: 'Confirm Seed',
             description: 'Confirm your wallet seed',
+            nextButtonText: 'Confirm',
+          },
+          {
+            path: 'password',
+            title: 'Create Password',
+            description: 'Create a secure password',
           },
-          { path: 'password', title: 'Create Password', description: 'Create a secure password' },
           { path: 'account', title: 'Create Username', description: 'Create a username' },
         ],
         entry: '/',
diff --git a/packages/extension-chrome/src/pages/WalletManager/types.ts b/packages/extension-chrome/src/pages/WalletManager/types.ts
index b2589b7e..e0af295f 100644
--- a/packages/extension-chrome/src/pages/WalletManager/types.ts
+++ b/packages/extension-chrome/src/pages/WalletManager/types.ts
@@ -2,6 +2,8 @@ export type StepConfig = {
   path: string;
   title: string;
   description?: string;
+  nextButtonText?: string;
+  disableBack?: boolean;
 
   /**
    * if true, the next page will only trigger the `onNext` callback, and outlet will not call `onNext`
@@ -13,6 +15,4 @@ export type CreateFlowConfig = {
   steps: StepConfig[];
   entry: string;
   exit: string;
-  disableBackOnExit?: boolean;
-  exitButtonText?: string;
 };
diff --git a/packages/extension-chrome/src/pages/theme/Alert.ts b/packages/extension-chrome/src/pages/theme/Alert.ts
new file mode 100644
index 00000000..5d4ee7a6
--- /dev/null
+++ b/packages/extension-chrome/src/pages/theme/Alert.ts
@@ -0,0 +1,32 @@
+import { alertAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers, AlertProps } from '@chakra-ui/react';
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(alertAnatomy.keys);
+
+const baseStyle = definePartsStyle(({ status }) => {
+  const color = {
+    error: 'error',
+    warning: 'warning',
+    info: 'info',
+    success: 'success',
+    loading: 'info',
+  }[status as NonNullable<AlertProps['status']>];
+  return {
+    container: {
+      bg: `${color}.bg`,
+    },
+    icon: {
+      color: `${color}.darker`,
+    },
+    title: {
+      color: 'gray.900',
+    },
+    description: {
+      color: 'gray.900',
+    },
+  };
+});
+
+export const Alert = defineMultiStyleConfig({
+  baseStyle,
+});
diff --git a/packages/extension-chrome/src/pages/theme/Button.ts b/packages/extension-chrome/src/pages/theme/Button.ts
index e460a6db..8a82a016 100644
--- a/packages/extension-chrome/src/pages/theme/Button.ts
+++ b/packages/extension-chrome/src/pages/theme/Button.ts
@@ -39,6 +39,10 @@ const outline = defineStyle(({ colorScheme, theme }) => {
       bg: transparentize(colorScheme, 0.24)(theme),
       _disabled: { bg: 'transparent' },
     },
+    _selected: {
+      bg: transparentize(colorScheme, 0.24)(theme),
+      _disabled: { bg: 'transparent' },
+    },
   };
 });
 
diff --git a/packages/extension-chrome/src/pages/theme/Input.ts b/packages/extension-chrome/src/pages/theme/Input.ts
index 0a4cd795..c42297e7 100644
--- a/packages/extension-chrome/src/pages/theme/Input.ts
+++ b/packages/extension-chrome/src/pages/theme/Input.ts
@@ -1,28 +1,26 @@
 import { inputAnatomy } from '@chakra-ui/anatomy';
 import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
-import { getColor } from '@chakra-ui/theme-tools';
+import { getColor } from './utils';
 
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(inputAnatomy.keys);
 
 const primary = definePartsStyle(({ theme }) => ({
   field: {
     color: 'black',
-    borderWidth: '2px',
+    borderWidth: '1px',
+    borderColor: 'gray.100',
+
+    _hover: {
+      borderColor: 'gray.300',
+    },
+
     _invalid: {
-      borderColor: 'error.darker',
+      borderWidth: '2px',
+      borderColor: `${getColor(theme, 'error.darker')} !important`,
     },
     _focusVisible: {
       borderWidth: '2px',
       borderColor: 'primary',
-      boxShadow: `0 0 0 1px ${getColor(theme, 'primary')}`,
-      _invalid: {
-        borderColor: 'error.darker',
-      },
-    },
-  },
-  element: {
-    _invalid: {
-      color: 'error.darker',
     },
   },
 }));
@@ -30,21 +28,18 @@ const primary = definePartsStyle(({ theme }) => ({
 const accent = definePartsStyle(({ theme }) => ({
   field: {
     color: 'black',
-    borderWidth: '2px',
+    borderWidth: '1px',
+    borderColor: 'white.300',
+    _hover: {
+      borderColor: 'white.700',
+    },
     _invalid: {
-      borderColor: 'error.lighter',
-      _focus: {
-        borderColor: 'error.lighter',
-      },
+      borderWidth: '2px',
+      borderColor: `${getColor(theme, 'error.lighter')} !important`,
     },
     _focusVisible: {
       borderWidth: '2px',
       borderColor: 'accent',
-      boxShadow: `0 0 0 1px ${getColor(theme, 'accent')}`,
-
-      _invalid: {
-        borderColor: 'error.lighter',
-      },
     },
   },
   element: {
@@ -55,5 +50,13 @@ const accent = definePartsStyle(({ theme }) => ({
 }));
 
 export const Input = defineMultiStyleConfig({
+  baseStyle: {
+    field: {
+      _placeholder: {
+        color: 'gray.400',
+      },
+      color: 'gray.900',
+    },
+  },
   variants: { primary, accent },
 });
diff --git a/packages/extension-chrome/src/pages/theme/Radio.ts b/packages/extension-chrome/src/pages/theme/Radio.ts
index 5095a6ff..4ea1b5bb 100644
--- a/packages/extension-chrome/src/pages/theme/Radio.ts
+++ b/packages/extension-chrome/src/pages/theme/Radio.ts
@@ -8,8 +8,9 @@ export const Radio = defineMultiStyleConfig({
     return {
       control: {
         color: colorScheme,
-        transition: 'border var(--chakra-transition-duration-normal)',
-        boxShadow: 'none !important',
+        transitionProperty: 'border',
+        transitionDuration: 'normal',
+
         _checked: {
           borderColor: colorScheme,
           borderWidth,
@@ -29,6 +30,11 @@ export const Radio = defineMultiStyleConfig({
           },
         },
       },
+      container: {
+        _disabled: {
+          opacity: 0.5,
+        },
+      },
     };
   }),
 });
diff --git a/packages/extension-chrome/src/pages/theme/index.ts b/packages/extension-chrome/src/pages/theme/index.ts
index a480c25d..0035956e 100644
--- a/packages/extension-chrome/src/pages/theme/index.ts
+++ b/packages/extension-chrome/src/pages/theme/index.ts
@@ -1,4 +1,5 @@
 import { extendTheme, withDefaultColorScheme, withDefaultVariant } from '@chakra-ui/react';
+import { Alert } from './Alert';
 import { Button } from './Button';
 import { FormLabel } from './FormLabel';
 import { Input } from './Input';
@@ -20,7 +21,7 @@ export const theme = extendTheme(
       'primary.lighter': '#B794F4',
       'primary.darker': '#553C9A',
 
-      'info.darker': '#718096',
+      'info.darker': '#3182CE',
       'info.lighter': '#63B3ED',
       'info.bg': '#BEE3F8',
 
@@ -35,6 +36,28 @@ export const theme = extendTheme(
       'success.darker': '#38A169',
       'success.lighter': '#68D391',
       'success.bg': '#C6F6D5',
+
+      white: 'rgba(255, 255, 255, 1)',
+      'white.900': 'rgba(255, 255, 255, 0.92)',
+      'white.800': 'rgba(255, 255, 255, 0.80)',
+      'white.700': 'rgba(255, 255, 255, 0.64)',
+      'white.600': 'rgba(255, 255, 255, 0.48)',
+      'white.500': 'rgba(255, 255, 255, 0.36)',
+      'white.400': 'rgba(255, 255, 255, 0.24)',
+      'white.300': 'rgba(255, 255, 255, 0.16)',
+      'white.200': 'rgba(255, 255, 255, 0.08)',
+      'white.100': 'rgba(255, 255, 255, 0.06)',
+
+      'gray.900': '#171923',
+      'gray.800': '#1A202C',
+      'gray.700': '#2D3748',
+      'gray.600': '#4A5568',
+      'gray.500': '#718096',
+      'gray.400': '#A0AEC0',
+      'gray.300': '#CBD5E0',
+      'gray.200': '#E2E8F0',
+      'gray.100': '#EDF2F7',
+      'gray.50': '#F7FAFC',
     },
   },
   {
@@ -43,6 +66,7 @@ export const theme = extendTheme(
       Radio: Radio,
       FormLabel: FormLabel,
       Input: Input,
+      Alert: Alert,
     },
   },
   withDefaultColorScheme({
diff --git a/packages/extension-chrome/src/pages/theme/utils.ts b/packages/extension-chrome/src/pages/theme/utils.ts
new file mode 100644
index 00000000..b2ddc5b5
--- /dev/null
+++ b/packages/extension-chrome/src/pages/theme/utils.ts
@@ -0,0 +1,6 @@
+import { Dict } from '@chakra-ui/utils';
+
+export function getColor(theme: Dict, color: string, defaultValue = '#000000'): string {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  return theme.colors[color] || defaultValue;
+}