diff --git a/src/ui/FRWAssets/icons/CustomCheckboxIcons.tsx b/src/ui/FRWAssets/icons/CustomCheckboxIcons.tsx
new file mode 100644
index 00000000..98bec5a1
--- /dev/null
+++ b/src/ui/FRWAssets/icons/CustomCheckboxIcons.tsx
@@ -0,0 +1,36 @@
+import { styled } from '@mui/material';
+
+export const BpIcon = styled('span')(() => ({
+  borderRadius: 8,
+  width: '21px !important',
+  height: '21px !important',
+  opacity: 1,
+  visibility: 'visible',
+}));
+
+export const BpUncheked = styled(BpIcon)({
+  borderRadius: 8,
+  width: 21,
+  height: 21,
+  display: 'block',
+  border: '1px solid #41CC5D',
+  opacity: 1,
+});
+
+export const BpCheckedIcon = styled(BpIcon)({
+  backgroundColor: '#41CC5D',
+  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
+  '&:before': {
+    display: 'block',
+    width: 21,
+    height: 21,
+    backgroundImage:
+      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
+      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
+      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
+    content: '""',
+  },
+  'input:hover ~ &': {
+    backgroundColor: '#41CC5D',
+  },
+});
diff --git a/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx b/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx
index 2ec4755c..a38cddbf 100644
--- a/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx
+++ b/src/ui/views/AddWelcome/AddRegister/PickUsername.tsx
@@ -105,7 +105,7 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
     [setLoading, setUsernameValid, setHelperText]
   );
 
-  const checkUsername = useCallback(
+  const runCheckUsername = useCallback(
     (username) => {
       wallet.openapi
         .checkUsername(username.toLowerCase())
@@ -161,7 +161,7 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
         return;
       }
 
-      checkUsername(username);
+      runCheckUsername(username);
     }, 500);
 
     return () => clearTimeout(delayDebounceFn);
diff --git a/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx b/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx
index 5d1a313e..3f765398 100644
--- a/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx
+++ b/src/ui/views/AddWelcome/AddRegister/SetPassword.tsx
@@ -11,9 +11,9 @@ import {
   InputAdornment,
   FormGroup,
   LinearProgress,
+  Checkbox,
+  FormControlLabel,
 } from '@mui/material';
-import Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
 import { makeStyles, styled } from '@mui/styles';
 import { Box } from '@mui/system';
 import HDWallet from 'ethereum-hdwallet';
@@ -28,6 +28,7 @@ import { useWallet, saveIndex, mixpanelBrowserService } from 'ui/utils';
 
 import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark';
 import CancelIcon from '../../../../components/iconfont/IconClose';
+import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons';
 
 const useStyles = makeStyles(() => ({
   customInputLabel: {
@@ -63,40 +64,6 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const BpIcon = styled('span')(() => ({
-  borderRadius: 8,
-  width: '21px !important',
-  height: '21px !important',
-  opacity: 1,
-  visibility: 'visible',
-}));
-
-const BpUncheked = styled(BpIcon)({
-  borderRadius: 8,
-  width: 21,
-  height: 21,
-  display: 'block',
-  border: '1px solid #41CC5D',
-  opacity: 1,
-});
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#41CC5D',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
-    display: 'block',
-    width: 21,
-    height: 21,
-    backgroundImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-    content: '""',
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#41CC5D',
-  },
-});
-
 const PasswordIndicator = (props) => {
   const score = zxcvbn(props.value).score;
   const precentage = ((score + 1) / 5) * 100;
diff --git a/src/ui/views/AddWelcome/AddressImport/PickUsername.tsx b/src/ui/views/AddWelcome/AddressImport/PickUsername.tsx
index ec5cb3b7..fbb28246 100644
--- a/src/ui/views/AddWelcome/AddressImport/PickUsername.tsx
+++ b/src/ui/views/AddWelcome/AddressImport/PickUsername.tsx
@@ -108,28 +108,8 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
     [setLoading, setUsernameValid, setHelperText]
   );
 
-  useEffect(() => {
-    setUsernameValid(false);
-    setHelperText(usernameLoading);
-    setLoading(true);
-    const delayDebounceFn = setTimeout(() => {
-      if (username.length < 3) {
-        setErrorMessage(chrome.i18n.getMessage('Too__short'));
-        return;
-      }
-
-      if (username.length > 15) {
-        setErrorMessage(chrome.i18n.getMessage('Too__long'));
-        return;
-      }
-      const regex = /^[A-Za-z0-9]{3,15}$/;
-
-      if (!regex.test(username)) {
-        setErrorMessage(
-          chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers')
-        );
-        return;
-      }
+  const runCheckUsername = useCallback(
+    (username) => {
       wallet.openapi
         .checkUsername(username.toLowerCase())
         .then((response) => {
@@ -151,14 +131,44 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
             }
           }
         })
-        .catch((error) => {
-          console.error(error);
+        .catch(() => {
           setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error'));
         });
+    },
+    [setErrorMessage, setUsernameValid, setHelperText, usernameCorrect, wallet.openapi]
+  );
+
+  useEffect(() => {
+    setUsernameValid(false);
+    setHelperText(usernameLoading);
+    setLoading(true);
+    const delayDebounceFn = setTimeout(() => {
+      if (username.length < 3) {
+        setErrorMessage(chrome.i18n.getMessage('Too__short'));
+        setLoading(false);
+        return;
+      }
+
+      if (username.length > 15) {
+        setErrorMessage(chrome.i18n.getMessage('Too__long'));
+        setLoading(false);
+        return;
+      }
+
+      const regex = /^[A-Za-z0-9]{3,15}$/;
+      if (!regex.test(username)) {
+        setErrorMessage(
+          chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers')
+        );
+        setLoading(false);
+        return;
+      }
+
+      runCheckUsername(username);
     }, 500);
 
     return () => clearTimeout(delayDebounceFn);
-  }, [username, setErrorMessage, usernameCorrect, wallet.openapi, usernameLoading]);
+  }, [username]);
 
   const msgBgColor = useCallback(() => {
     if (isLoading) {
diff --git a/src/ui/views/AddWelcome/AddressImport/SetPassword.tsx b/src/ui/views/AddWelcome/AddressImport/SetPassword.tsx
index 5b486b81..18e3f49e 100644
--- a/src/ui/views/AddWelcome/AddressImport/SetPassword.tsx
+++ b/src/ui/views/AddWelcome/AddressImport/SetPassword.tsx
@@ -28,6 +28,7 @@ import { useWallet, saveIndex } from 'ui/utils';
 
 import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark';
 import CancelIcon from '../../../../components/iconfont/IconClose';
+import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons';
 
 const useStyles = makeStyles(() => ({
   customInputLabel: {
@@ -63,32 +64,6 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const BpIcon = styled('span')(() => ({
-  borderRadius: 8,
-  width: 24,
-  height: 24,
-  border: '1px solid #41CC5D',
-  backgroundColor: 'transparent',
-}));
-
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#41CC5D',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
-    display: 'block',
-    width: 21,
-    height: 21,
-    backgroundImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-    content: '""',
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#41CC5D',
-  },
-});
-
 const PasswordIndicator = (props) => {
   const score = zxcvbn(props.value).score;
   const precentage = ((score + 1) / 5) * 100;
@@ -206,68 +181,64 @@ const SetPassword = ({ handleClick, mnemonic, pk, username, tempPassword, accoun
 
   const handleImport = async () => {
     setLoading(true);
-    if (accounts.length > 1) {
-      setLoading(true);
-    } else {
-      const accountKeyStruct = {
-        public_key: accounts[0].pubK,
-        sign_algo: getSignAlgo(accounts[0].signAlgo),
-        hash_algo: getHashAlgo(accounts[0].hashAlgo),
-        weight: 1000,
-      };
-      const result = await wallet.openapi.getLocation();
-      const installationId = await wallet.openapi.getInstallationId();
-      const userlocation = result.data;
-      const device_info = {
-        city: userlocation.city,
-        continent: userlocation.country,
-        continentCode: userlocation.countryCode,
-        country: userlocation.country,
-        countryCode: userlocation.countryCode,
-        currency: userlocation.countryCode,
-        device_id: installationId,
-        district: '',
-        ip: userlocation.query,
-        isp: userlocation.as,
-        lat: userlocation.lat,
-        lon: userlocation.lon,
-        name: 'FRW Chrome Extension',
-        org: userlocation.org,
-        regionName: userlocation.regionName,
-        type: '2',
-        user_agent: 'Chrome',
-        zip: userlocation.zip,
-      };
-      const address = accounts[0].address.replace(/^0x/, '');
-      wallet.openapi
-        .importKey(accountKeyStruct, device_info, username, {}, address)
-        .then((response) => {
-          return wallet.boot(password);
-        })
-        .then(async (response) => {
-          storage.remove('premnemonic');
+    const accountKeyStruct = {
+      public_key: accounts[0].pubK,
+      sign_algo: getSignAlgo(accounts[0].signAlgo),
+      hash_algo: getHashAlgo(accounts[0].hashAlgo),
+      weight: 1000,
+    };
+    const result = await wallet.openapi.getLocation();
+    const installationId = await wallet.openapi.getInstallationId();
+    const userlocation = result.data;
+    const device_info = {
+      city: userlocation.city,
+      continent: userlocation.country,
+      continentCode: userlocation.countryCode,
+      country: userlocation.country,
+      countryCode: userlocation.countryCode,
+      currency: userlocation.countryCode,
+      device_id: installationId,
+      district: '',
+      ip: userlocation.query,
+      isp: userlocation.as,
+      lat: userlocation.lat,
+      lon: userlocation.lon,
+      name: 'FRW Chrome Extension',
+      org: userlocation.org,
+      regionName: userlocation.regionName,
+      type: '2',
+      user_agent: 'Chrome',
+      zip: userlocation.zip,
+    };
+    const address = accounts[0].address.replace(/^0x/, '');
+    wallet.openapi
+      .importKey(accountKeyStruct, device_info, username, {}, address)
+      .then((response) => {
+        return wallet.boot(password);
+      })
+      .then(async (response) => {
+        storage.remove('premnemonic');
 
-          await saveIndex(username);
-          if (pk) {
-            return wallet.importPrivateKey(pk);
-          } else {
-            return wallet.createKeyringWithMnemonics(mnemonic);
-          }
-        })
-        .then((address) => {
-          setLoading(false);
-          if (pk) {
-            goEnd();
-          } else {
-            handleClick();
-          }
-        })
-        .catch((error) => {
-          console.log('error', error);
-          setShowError(true);
-          setLoading(false);
-        });
-    }
+        await saveIndex(username);
+        if (pk) {
+          return wallet.importPrivateKey(pk);
+        } else {
+          return wallet.createKeyringWithMnemonics(mnemonic);
+        }
+      })
+      .then((address) => {
+        setLoading(false);
+        if (pk) {
+          goEnd();
+        } else {
+          handleClick();
+        }
+      })
+      .catch((error) => {
+        console.log('error', error);
+        setShowError(true);
+        setLoading(false);
+      });
   };
 
   useEffect(() => {
@@ -336,7 +307,7 @@ const SetPassword = ({ handleClick, mnemonic, pk, username, tempPassword, accoun
         <FormControlLabel
           control={
             <Checkbox
-              icon={<BpIcon />}
+              icon={<BpUncheked />}
               checkedIcon={<BpCheckedIcon />}
               onChange={(event) => setCheck(event.target.checked)}
             />
diff --git a/src/ui/views/AddressImport/GoogleImport/RecoverPassword.tsx b/src/ui/views/AddressImport/GoogleImport/RecoverPassword.tsx
index 89b8508d..2adce01b 100644
--- a/src/ui/views/AddressImport/GoogleImport/RecoverPassword.tsx
+++ b/src/ui/views/AddressImport/GoogleImport/RecoverPassword.tsx
@@ -24,6 +24,7 @@ import { useWallet, saveIndex } from 'ui/utils';
 
 import CheckCircleIcon from '../../../../components/iconfont/IconCheckmark';
 import CancelIcon from '../../../../components/iconfont/IconClose';
+import { BpUncheked, BpCheckedIcon } from '../../../FRWAssets/icons/CustomCheckboxIcons';
 
 // const helperTextStyles = makeStyles(() => ({
 //   root: {
@@ -66,32 +67,6 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const BpIcon = styled('span')(() => ({
-  borderRadius: 8,
-  width: 24,
-  height: 24,
-  border: '1px solid #41CC5D',
-  backgroundColor: 'transparent',
-}));
-
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#41CC5D',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
-    display: 'block',
-    width: 21,
-    height: 21,
-    backgroundImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-    content: '""',
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#41CC5D',
-  },
-});
-
 const PasswordIndicator = (props) => {
   const score = zxcvbn(props.value).score;
   const precentage = ((score + 1) / 5) * 100;
@@ -339,7 +314,7 @@ const SetPassword = ({ handleClick, mnemonic, username, lastPassword }) => {
             control={
               <Checkbox
                 checked={isCheck}
-                icon={<BpIcon />}
+                icon={<BpUncheked />}
                 checkedIcon={<BpCheckedIcon />}
                 onChange={(event) => setCheck(event.target.checked)}
               />
diff --git a/src/ui/views/AddressImport/PickUsername.tsx b/src/ui/views/AddressImport/PickUsername.tsx
index d5429db9..04e2178c 100644
--- a/src/ui/views/AddressImport/PickUsername.tsx
+++ b/src/ui/views/AddressImport/PickUsername.tsx
@@ -60,7 +60,7 @@ const UsernameError = ({ errorMsg }: { errorMsg: string }) => (
   </Box>
 );
 
-const UsernameCorrect = () => (
+const usernameCorrect = () => (
   <Box
     sx={{
       display: 'flex',
@@ -74,7 +74,7 @@ const UsernameCorrect = () => (
     </Typography>
   </Box>
 );
-const UsernameLoading = () => (
+const usernameLoading = () => (
   <Typography variant="body1" color="text.secondary" sx={{ display: 'flex', alignItems: 'center' }}>
     <CircularProgress color="primary" size={22} style={{ fontSize: '22px', margin: '8px' }} />
     {chrome.i18n.getMessage('Checking')}
@@ -99,28 +99,8 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
     [setLoading, setUsernameValid, setHelperText]
   );
 
-  useEffect(() => {
-    setUsernameValid(false);
-    setHelperText(<UsernameLoading />);
-    setLoading(true);
-    const delayDebounceFn = setTimeout(() => {
-      if (username.length < 3) {
-        setErrorMessage(chrome.i18n.getMessage('Too__short'));
-        return;
-      }
-
-      if (username.length > 15) {
-        setErrorMessage(chrome.i18n.getMessage('Too__long'));
-        return;
-      }
-      const regex = /^[A-Za-z0-9]{3,15}$/;
-
-      if (!regex.test(username)) {
-        setErrorMessage(
-          chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers')
-        );
-        return;
-      }
+  const runCheckUsername = useCallback(
+    (username) => {
       wallet.openapi
         .checkUsername(username.toLowerCase())
         .then((response) => {
@@ -131,7 +111,7 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
           }
           if (response.data.unique) {
             setUsernameValid(true);
-            setHelperText(<UsernameCorrect />);
+            setHelperText(usernameCorrect);
           } else {
             if (response.message === 'Username is reserved') {
               setErrorMessage(
@@ -142,14 +122,44 @@ const PickUsername = ({ handleClick, savedUsername, getUsername }) => {
             }
           }
         })
-        .catch((error) => {
-          console.error(error);
+        .catch(() => {
           setErrorMessage(chrome.i18n.getMessage('Oops__unexpected__error'));
         });
+    },
+    [setErrorMessage, setUsernameValid, setHelperText, wallet.openapi]
+  );
+
+  useEffect(() => {
+    setUsernameValid(false);
+    setHelperText(usernameLoading);
+    setLoading(true);
+    const delayDebounceFn = setTimeout(() => {
+      if (username.length < 3) {
+        setErrorMessage(chrome.i18n.getMessage('Too__short'));
+        setLoading(false);
+        return;
+      }
+
+      if (username.length > 15) {
+        setErrorMessage(chrome.i18n.getMessage('Too__long'));
+        setLoading(false);
+        return;
+      }
+
+      const regex = /^[A-Za-z0-9]{3,15}$/;
+      if (!regex.test(username)) {
+        setErrorMessage(
+          chrome.i18n.getMessage('Your__username__can__only__contain__letters__and__numbers')
+        );
+        setLoading(false);
+        return;
+      }
+
+      runCheckUsername(username);
     }, 500);
 
     return () => clearTimeout(delayDebounceFn);
-  }, [setErrorMessage, username, wallet.openapi]);
+  }, [username]);
 
   const msgBgColor = () => {
     if (isLoading) {
diff --git a/src/ui/views/AddressImport/RecoverPassword.tsx b/src/ui/views/AddressImport/RecoverPassword.tsx
index e9d4a0d5..fea14940 100644
--- a/src/ui/views/AddressImport/RecoverPassword.tsx
+++ b/src/ui/views/AddressImport/RecoverPassword.tsx
@@ -65,32 +65,6 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const BpIcon = styled('span')(() => ({
-  borderRadius: 8,
-  width: 24,
-  height: 24,
-  border: '1px solid #41CC5D',
-  backgroundColor: 'transparent',
-}));
-
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#41CC5D',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
-    display: 'block',
-    width: 21,
-    height: 21,
-    backgroundImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-    content: '""',
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#41CC5D',
-  },
-});
-
 const PasswordIndicator = (props) => {
   const score = zxcvbn(props.value).score;
   const precentage = ((score + 1) / 5) * 100;
diff --git a/src/ui/views/AddressImport/SetPassword.tsx b/src/ui/views/AddressImport/SetPassword.tsx
index ae326a5e..21442b3e 100644
--- a/src/ui/views/AddressImport/SetPassword.tsx
+++ b/src/ui/views/AddressImport/SetPassword.tsx
@@ -28,6 +28,7 @@ import { useWallet, saveIndex } from 'ui/utils';
 
 import CheckCircleIcon from '../../../components/iconfont/IconCheckmark';
 import CancelIcon from '../../../components/iconfont/IconClose';
+import { BpUncheked, BpCheckedIcon } from '../../FRWAssets/icons/CustomCheckboxIcons';
 
 const useStyles = makeStyles(() => ({
   customInputLabel: {
@@ -63,32 +64,6 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const BpIcon = styled('span')(() => ({
-  borderRadius: 8,
-  width: 24,
-  height: 24,
-  border: '1px solid #41CC5D',
-  backgroundColor: 'transparent',
-}));
-
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#41CC5D',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
-    display: 'block',
-    width: 21,
-    height: 21,
-    backgroundImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-    content: '""',
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#41CC5D',
-  },
-});
-
 const PasswordIndicator = (props) => {
   const score = zxcvbn(props.value).score;
   const precentage = ((score + 1) / 5) * 100;
@@ -355,7 +330,7 @@ const SetPassword = ({ handleClick, mnemonic, pk, username, setExPassword, accou
         <FormControlLabel
           control={
             <Checkbox
-              icon={<BpIcon />}
+              icon={<BpUncheked />}
               checkedIcon={<BpCheckedIcon />}
               onChange={(event) => setCheck(event.target.checked)}
             />
diff --git a/src/ui/views/RecoverRegister/SetPassword.tsx b/src/ui/views/RecoverRegister/SetPassword.tsx
index 30d6e950..14d1c945 100644
--- a/src/ui/views/RecoverRegister/SetPassword.tsx
+++ b/src/ui/views/RecoverRegister/SetPassword.tsx
@@ -28,6 +28,7 @@ import { useWallet, saveIndex, mixpanelBrowserService } from 'ui/utils';
 
 import CheckCircleIcon from '../../../components/iconfont/IconCheckmark';
 import CancelIcon from '../../../components/iconfont/IconClose';
+import { BpUncheked, BpCheckedIcon } from '../../FRWAssets/icons/CustomCheckboxIcons';
 
 const useStyles = makeStyles(() => ({
   customInputLabel: {
@@ -63,32 +64,6 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const BpIcon = styled('span')(() => ({
-  borderRadius: 8,
-  width: 24,
-  height: 24,
-  border: '1px solid #41CC5D',
-  backgroundColor: 'transparent',
-}));
-
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#41CC5D',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
-    display: 'block',
-    width: 21,
-    height: 21,
-    backgroundImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-    content: '""',
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#41CC5D',
-  },
-});
-
 const PasswordIndicator = (props) => {
   const score = zxcvbn(props.value).score;
   const precentage = ((score + 1) / 5) * 100;
@@ -344,7 +319,7 @@ const SetPassword = ({ handleClick, mnemonic, username }) => {
         <FormControlLabel
           control={
             <Checkbox
-              icon={<BpIcon />}
+              icon={<BpUncheked />}
               checkedIcon={<BpCheckedIcon />}
               onChange={(event) => setCheck(event.target.checked)}
             />
diff --git a/src/ui/views/Register/SetPassword.tsx b/src/ui/views/Register/SetPassword.tsx
index 1f0da904..af1b5184 100644
--- a/src/ui/views/Register/SetPassword.tsx
+++ b/src/ui/views/Register/SetPassword.tsx
@@ -28,6 +28,7 @@ import { useWallet, saveIndex, mixpanelBrowserService } from 'ui/utils';
 
 import CheckCircleIcon from '../../../components/iconfont/IconCheckmark';
 import CancelIcon from '../../../components/iconfont/IconClose';
+import { BpUncheked, BpCheckedIcon } from '../../FRWAssets/icons/CustomCheckboxIcons';
 
 const useStyles = makeStyles(() => ({
   customInputLabel: {
@@ -63,32 +64,6 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const BpIcon = styled('span')(() => ({
-  borderRadius: 8,
-  width: 24,
-  height: 24,
-  border: '1px solid #41CC5D',
-  backgroundColor: 'transparent',
-}));
-
-const BpCheckedIcon = styled(BpIcon)({
-  backgroundColor: '#41CC5D',
-  backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
-    display: 'block',
-    width: 21,
-    height: 21,
-    backgroundImage:
-      "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
-      " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
-      "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
-    content: '""',
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#41CC5D',
-  },
-});
-
 const PasswordIndicator = (props) => {
   const score = zxcvbn(props.value).score;
   const precentage = ((score + 1) / 5) * 100;
@@ -345,7 +320,7 @@ const SetPassword = ({ handleClick, mnemonic, username, setExPassword }) => {
         <FormControlLabel
           control={
             <Checkbox
-              icon={<BpIcon />}
+              icon={<BpUncheked />}
               checkedIcon={<BpCheckedIcon />}
               onChange={(event) => setCheck(event.target.checked)}
             />