From 9309800ccd78ab390f2c8a8be933fca6e7474a39 Mon Sep 17 00:00:00 2001
From: blue <skqksh@gmail.com>
Date: Thu, 21 Dec 2023 22:06:50 +0900
Subject: [PATCH 1/7] refactor. Separate secure-textarea and improve attributes
 in SeedBox component

---
 .../src/components/atoms/index.ts             |  1 +
 .../atoms/secure-textarea/index.tsx           | 47 +++++++++++++
 .../components/molecules/seed-box/index.tsx   | 67 ++++---------------
 .../certify/approach-private-phrase/index.tsx | 60 ++++++++++-------
 .../src/pages/certify/enter-seed/index.tsx    |  7 +-
 .../pages/certify/import-account/index.tsx    |  7 +-
 .../certify/import-private-key/index.tsx      | 12 +---
 .../certify/reveal-private-phrase/index.tsx   |  2 +-
 .../pages/certify/view-seed-phrase/index.tsx  |  2 +-
 .../pages/certify/your-seed-phrase/index.tsx  |  1 -
 10 files changed, 109 insertions(+), 97 deletions(-)
 create mode 100644 packages/adena-extension/src/components/atoms/secure-textarea/index.tsx

diff --git a/packages/adena-extension/src/components/atoms/index.ts b/packages/adena-extension/src/components/atoms/index.ts
index 056e0f44..e68b2b43 100644
--- a/packages/adena-extension/src/components/atoms/index.ts
+++ b/packages/adena-extension/src/components/atoms/index.ts
@@ -24,3 +24,4 @@ export * from './copy-button';
 export * from './full-button-right-icon';
 export * from './hamburger-menu-button';
 export * from './skeleton-box';
+export * from './secure-textarea';
diff --git a/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx b/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx
new file mode 100644
index 00000000..5f91a024
--- /dev/null
+++ b/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import styled, { FlattenSimpleInterpolation } from 'styled-components';
+
+interface SecureTextareaProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+  error: boolean;
+}
+
+const StyledWrapper = styled.div<{ error: boolean }>`
+  position: relative;
+  width: 100%;
+  height: 140px;
+  border: 1px solid
+    ${({ error, theme }): string => (error ? theme.color.red[2] : theme.color.neutral[6])};
+  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  border-radius: 18px;
+  overflow-y: auto;
+  padding: 14px 16px 8px;
+  margin-top: 20px;
+`;
+
+const StyledTextarea = styled.textarea`
+  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+  width: 100%;
+  word-wrap: break-word;
+  background-color: inherit;
+  border: none;
+  outline: none;
+  color: white;
+  resize: none;
+  -webkit-text-security: disc;
+`;
+
+export const SecureTextarea = ({
+  value,
+  onChange,
+  onKeyDown,
+  error = false,
+}: SecureTextareaProps): JSX.Element => {
+  return (
+    <StyledWrapper error={error}>
+      <StyledTextarea rows={5} value={value} onChange={onChange} onKeyDown={onKeyDown} autoFocus />
+    </StyledWrapper>
+  );
+};
diff --git a/packages/adena-extension/src/components/molecules/seed-box/index.tsx b/packages/adena-extension/src/components/molecules/seed-box/index.tsx
index ab543d54..3fb7454b 100644
--- a/packages/adena-extension/src/components/molecules/seed-box/index.tsx
+++ b/packages/adena-extension/src/components/molecules/seed-box/index.tsx
@@ -1,38 +1,23 @@
 import React from 'react';
-import styled, { CSSProp, FlattenSimpleInterpolation, css } from 'styled-components';
+import styled, { CSSProp } from 'styled-components';
 import { Text, BlurScreen } from '../../atoms';
 
 interface SeedScrollBoxProps {
-  value?: string;
-  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
-  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
-  error?: boolean;
-  scroll: boolean;
-  seeds?: string[] | string;
+  seeds: string[];
   hasBlurScreen?: boolean;
   hasBlurText?: boolean;
   blurScreenText?: string;
   className?: string;
 }
 
-const Wrapper = styled.div<{ error: boolean; scroll: boolean }>`
+const Wrapper = styled.div`
   position: relative;
   width: 100%;
   height: 140px;
-  border: 1px solid
-    ${({ error, theme }): string => (error ? theme.color.red[2] : theme.color.neutral[6])};
+  border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
   background-color: ${({ theme }): string => theme.color.neutral[8]};
   border-radius: 18px;
-  ${({ scroll }): CSSProp =>
-    scroll
-      ? css`
-          overflow-y: auto;
-          padding: 14px 16px 8px;
-          margin-top: 20px;
-        `
-      : css`
-          padding: 8px;
-        `}
+  padding: 8px;
 `;
 
 const Inner = styled.div`
@@ -48,48 +33,22 @@ const Inner = styled.div`
   }
 `;
 
-const Textarea = styled.textarea`
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
-  width: 100%;
-  word-wrap: break-word;
-  background-color: inherit;
-  border: none;
-  outline: none;
-  color: white;
-  resize: none;
-`;
-
 export const SeedBox = ({
   seeds,
-  value,
-  onChange,
-  onKeyDown,
-  error = false,
-  scroll,
   hasBlurScreen = false,
   hasBlurText = false,
   blurScreenText = '',
   className = '',
 }: SeedScrollBoxProps): JSX.Element => {
   return (
-    <Wrapper error={error} scroll={scroll} className={className}>
-      {scroll && (
-        <Textarea rows={5} value={value} onChange={onChange} onKeyDown={onKeyDown} autoFocus />
-      )}
-      {Array.isArray(seeds) && (
-        <Inner>
-          {seeds?.map((seed: string) => (
-            <Text className='seed-text' key={seed} type='captionReg'>
-              {seed}
-            </Text>
-          ))}
-        </Inner>
-      )}
-      {typeof seeds === 'string' && (
-        <Text className='seed-text' type='captionReg'>
-          {seeds}
-        </Text>
-      )}
+    <Wrapper className={className}>
+      <Inner>
+        {seeds.map((seed: string) => (
+          <Text className='seed-text' key={seed} type='captionReg'>
+            {seed}
+          </Text>
+        ))}
+      </Inner>
       {hasBlurScreen && <BlurScreen hasText={hasBlurText} text={blurScreenText} />}
     </Wrapper>
   );
diff --git a/packages/adena-extension/src/pages/certify/approach-private-phrase/index.tsx b/packages/adena-extension/src/pages/certify/approach-private-phrase/index.tsx
index 445bc5ae..df6b93b8 100644
--- a/packages/adena-extension/src/pages/certify/approach-private-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/approach-private-phrase/index.tsx
@@ -2,11 +2,42 @@ import React, { useEffect, useState } from 'react';
 import styled, { CSSProp } from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Text, WarningBox, Button, ButtonHierarchy } from '@components/atoms';
-import { SeedBox, SeedViewAndCopy } from '@components/molecules';
+import { Text, WarningBox, Button, ButtonHierarchy, BlurScreen } from '@components/atoms';
+import { SeedViewAndCopy } from '@components/molecules';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useWalletContext } from '@hooks/use-context';
 
+const Wrapper = styled.main`
+  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  width: 100%;
+  height: 100%;
+  padding-top: 24px;
+  overflow-y: auto;
+  .private-key-style {
+    ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+    .seed-text {
+      word-break: break-all;
+      text-align: center;
+    }
+  }
+`;
+
+const StyledPrivateKeyBox = styled.div`
+  position: relative;
+  width: 100%;
+  height: 140px;
+  border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  border-radius: 18px;
+  padding: 8px;
+  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+`;
+
+const StyledText = styled(Text)`
+  word-break: break-all;
+  text-align: center;
+`;
+
 export const ApproachPrivatePhrase = (): JSX.Element => {
   const navigate = useNavigate();
   const { state } = useLocation();
@@ -41,12 +72,10 @@ export const ApproachPrivatePhrase = (): JSX.Element => {
     <Wrapper>
       <Text type='header4'>Export Private Key</Text>
       <WarningBox type='approachPrivate' margin='12px 0px 20px' />
-      <SeedBox
-        seeds={privateKey}
-        scroll={false}
-        hasBlurScreen={showBlurScreen}
-        className='private-key-style'
-      />
+      <StyledPrivateKeyBox>
+        <StyledText type='captionReg'>{privateKey}</StyledText>
+        {showBlurScreen && <BlurScreen />}
+      </StyledPrivateKeyBox>
       <SeedViewAndCopy
         showBlurScreen={showBlurScreen}
         setShowBlurScreen={setShowBlurScreen}
@@ -59,18 +88,3 @@ export const ApproachPrivatePhrase = (): JSX.Element => {
     </Wrapper>
   );
 };
-
-const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
-  width: 100%;
-  height: 100%;
-  padding-top: 24px;
-  overflow-y: auto;
-  .private-key-style {
-    ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
-    .seed-text {
-      word-break: break-all;
-      text-align: center;
-    }
-  }
-`;
diff --git a/packages/adena-extension/src/pages/certify/enter-seed/index.tsx b/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
index 353522a7..ba81fa27 100644
--- a/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
+++ b/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import styled, { CSSProp } from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
-import { Text, ErrorText, Button, ButtonHierarchy } from '@components/atoms';
-import { SeedBox, TitleWithDesc, TermsCheckbox } from '@components/molecules';
+import { Text, ErrorText, Button, ButtonHierarchy, SecureTextarea } from '@components/atoms';
+import { TitleWithDesc, TermsCheckbox } from '@components/molecules';
 
 import { useEnterSeed } from '@hooks/certify/use-enter-seed';
 
@@ -29,12 +29,11 @@ export const EnterSeedPhrase = (): JSX.Element => {
         title={state?.from === 'forgot-password' ? forgotContent.title : walletContent.title}
         desc={state?.from === 'forgot-password' ? forgotContent.desc : walletContent.desc}
       />
-      <SeedBox
+      <SecureTextarea
         value={seedState.value}
         onChange={seedState.onChange}
         onKeyDown={seedState.onKeyDown}
         error={seedState.error}
-        scroll={true}
       />
       {seedState.error && <ErrorText text={seedState.errorMessage} />}
       <TermsWrap>
diff --git a/packages/adena-extension/src/pages/certify/import-account/index.tsx b/packages/adena-extension/src/pages/certify/import-account/index.tsx
index 4d5dc58e..8334c06b 100644
--- a/packages/adena-extension/src/pages/certify/import-account/index.tsx
+++ b/packages/adena-extension/src/pages/certify/import-account/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import styled, { CSSProp } from 'styled-components';
 
-import { Text, ErrorText } from '@components/atoms';
-import { SeedBox, CancelAndConfirmButton } from '@components/molecules';
+import { Text, ErrorText, SecureTextarea } from '@components/atoms';
+import { CancelAndConfirmButton } from '@components/molecules';
 import theme from '@styles/theme';
 import { useImportAccount } from '@hooks/certify/use-import-account';
 
@@ -26,12 +26,11 @@ export const ImportAccount = (): JSX.Element => {
       <Text type='body1Reg' color={theme.color.neutral[2]}>
         {text.desc}
       </Text>
-      <SeedBox
+      <SecureTextarea
         value={privateKeyState.value}
         onChange={privateKeyState.onChange}
         onKeyDown={privateKeyState.onKeyDown}
         error={privateKeyState.error}
-        scroll={true}
       />
       {privateKeyState.error && <ErrorText text={privateKeyState.errorMessage} />}
       <CancelAndConfirmButton
diff --git a/packages/adena-extension/src/pages/certify/import-private-key/index.tsx b/packages/adena-extension/src/pages/certify/import-private-key/index.tsx
index 7f037ae3..2903b1a0 100644
--- a/packages/adena-extension/src/pages/certify/import-private-key/index.tsx
+++ b/packages/adena-extension/src/pages/certify/import-private-key/index.tsx
@@ -3,8 +3,8 @@ import styled, { CSSProp } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import { SingleAccount, PrivateKeyKeyring } from 'adena-module';
 
-import { Text, ErrorText, Button, ButtonHierarchy } from '@components/atoms';
-import { SeedBox, TitleWithDesc, TermsCheckbox } from '@components/molecules';
+import { Text, ErrorText, Button, ButtonHierarchy, SecureTextarea } from '@components/atoms';
+import { TitleWithDesc, TermsCheckbox } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import { useImportAccount } from '@hooks/use-import-account';
 import { useWalletContext } from '@hooks/use-context';
@@ -84,13 +84,7 @@ export const ImportPrivateKey = (): JSX.Element => {
   return (
     <Wrapper onKeyDown={onKeyDown}>
       <TitleWithDesc title={content.title} desc={content.desc} />
-      <SeedBox
-        value={value}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        error={error}
-        scroll={true}
-      />
+      <SecureTextarea value={value} onChange={onChange} onKeyDown={onKeyDown} error={error} />
       {error && <ErrorText text={errorMessage} />}
       <TermsWrap>
         <TermsCheckbox
diff --git a/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx b/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx
index 1306ed95..3ee2230c 100644
--- a/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx
@@ -24,7 +24,7 @@ export const RevealPrivatePhrase = (): JSX.Element => {
     <Wrapper>
       <Text type='header4'>Reveal Seed Phrase</Text>
       <WarningBox type='revealPrivate' margin='12px 0px 20px' />
-      <SeedBox seeds={seeds} scroll={false} hasBlurScreen={showBlurScreen} />
+      <SeedBox seeds={seeds} hasBlurScreen={showBlurScreen} />
       <SeedViewAndCopy
         showBlurScreen={showBlurScreen}
         setShowBlurScreen={setShowBlurScreen}
diff --git a/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx b/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx
index 10455191..85d910b9 100644
--- a/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx
@@ -42,7 +42,7 @@ export const ViewSeedPhrase = (): JSX.Element => {
     <Wrapper>
       <TitleWithDesc title={text.title} desc={text.desc} />
       <SeedBoxWrap>
-        <SeedBox seeds={mnemonic.split(' ')} scroll={false} />
+        <SeedBox seeds={mnemonic.split(' ')} />
         <Copy copyStr={mnemonic} />
       </SeedBoxWrap>
       <Button fullWidth hierarchy={ButtonHierarchy.Primary} onClick={doneButtonClick}>
diff --git a/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx b/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx
index 5f69a2b8..dbaf96f7 100644
--- a/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx
@@ -94,7 +94,6 @@ export const YourSeedPhrase = (): JSX.Element => {
       <TitleWithDesc title={text.title} desc={text.desc} isWarningDesc />
       <SeedBox
         seeds={seeds.split(' ')}
-        scroll={false}
         hasBlurScreen={showBlurScreen}
         hasBlurText={!viewSeedAgree}
         blurScreenText={text.blurScreenText}

From 63acdb4a140ad63f41675a953b21020d86cc03ce Mon Sep 17 00:00:00 2001
From: blue <skqksh@gmail.com>
Date: Thu, 21 Dec 2023 22:39:25 +0900
Subject: [PATCH 2/7] refactor. export private key screen

---
 .../ApproachPrivateKey.tsx}                   | 38 ++++----------
 .../CheckPassword.tsx}                        | 51 ++++++++-----------
 .../certify/export-private-key/index.tsx      | 38 ++++++++++++++
 .../pages/certify/security-privacy/index.tsx  |  2 +-
 .../pages/wallet/account-details/index.tsx    |  2 +-
 .../src/router/custom-router.tsx              |  6 +--
 packages/adena-extension/src/router/path.ts   |  3 +-
 7 files changed, 74 insertions(+), 66 deletions(-)
 rename packages/adena-extension/src/pages/certify/{approach-private-phrase/index.tsx => export-private-key/ApproachPrivateKey.tsx} (65%)
 rename packages/adena-extension/src/pages/certify/{approach-password-phrase/index.tsx => export-private-key/CheckPassword.tsx} (74%)
 create mode 100644 packages/adena-extension/src/pages/certify/export-private-key/index.tsx

diff --git a/packages/adena-extension/src/pages/certify/approach-private-phrase/index.tsx b/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
similarity index 65%
rename from packages/adena-extension/src/pages/certify/approach-private-phrase/index.tsx
rename to packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
index df6b93b8..6b0e641c 100644
--- a/packages/adena-extension/src/pages/certify/approach-private-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
@@ -1,27 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import styled, { CSSProp } from 'styled-components';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
-import { Text, WarningBox, Button, ButtonHierarchy, BlurScreen } from '@components/atoms';
+import { Text, Button, ButtonHierarchy, BlurScreen } from '@components/atoms';
 import { SeedViewAndCopy } from '@components/molecules';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useWalletContext } from '@hooks/use-context';
 
-const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
-  width: 100%;
-  height: 100%;
-  padding-top: 24px;
-  overflow-y: auto;
-  .private-key-style {
-    ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
-    .seed-text {
-      word-break: break-all;
-      text-align: center;
-    }
-  }
-`;
-
 const StyledPrivateKeyBox = styled.div`
   position: relative;
   width: 100%;
@@ -38,8 +23,7 @@ const StyledText = styled(Text)`
   text-align: center;
 `;
 
-export const ApproachPrivatePhrase = (): JSX.Element => {
-  const navigate = useNavigate();
+const ApproachPrivateKey = ({ backButtonClick }: { backButtonClick: () => void }): JSX.Element => {
   const { state } = useLocation();
   const { wallet } = useWalletContext();
   const { currentAccount } = useCurrentAccount();
@@ -60,18 +44,12 @@ export const ApproachPrivatePhrase = (): JSX.Element => {
     } else {
       clone.currentAccountId = currentAccount.id;
     }
-    const privateKey = clone.privateKeyStr;
-    setPrivateKey('0x' + privateKey);
-  };
 
-  const doneButtonClick = (): void => {
-    navigate(-2);
+    setPrivateKey(`0x${clone.privateKeyStr}`);
   };
 
   return (
-    <Wrapper>
-      <Text type='header4'>Export Private Key</Text>
-      <WarningBox type='approachPrivate' margin='12px 0px 20px' />
+    <>
       <StyledPrivateKeyBox>
         <StyledText type='captionReg'>{privateKey}</StyledText>
         {showBlurScreen && <BlurScreen />}
@@ -82,9 +60,11 @@ export const ApproachPrivatePhrase = (): JSX.Element => {
         copyStr={privateKey}
         toggleText='Private Key'
       />
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} onClick={doneButtonClick}>
+      <Button fullWidth hierarchy={ButtonHierarchy.Primary} onClick={backButtonClick}>
         <Text type='body1Bold'>Done</Text>
       </Button>
-    </Wrapper>
+    </>
   );
 };
+
+export default ApproachPrivateKey;
diff --git a/packages/adena-extension/src/pages/certify/approach-password-phrase/index.tsx b/packages/adena-extension/src/pages/certify/export-private-key/CheckPassword.tsx
similarity index 74%
rename from packages/adena-extension/src/pages/certify/approach-password-phrase/index.tsx
rename to packages/adena-extension/src/pages/certify/export-private-key/CheckPassword.tsx
index 5e821631..0258fddc 100644
--- a/packages/adena-extension/src/pages/certify/approach-password-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/export-private-key/CheckPassword.tsx
@@ -1,21 +1,29 @@
 import React, { useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
-import { Text, WarningBox, DefaultInput, ErrorText } from '@components/atoms';
+import { DefaultInput, ErrorText } from '@components/atoms';
 import { TermsCheckbox, CancelAndConfirmButton } from '@components/molecules';
-import { RoutePath } from '@router/path';
 import { useAdenaContext } from '@hooks/use-context';
 import { validateInvalidPassword } from '@common/validation';
 import { BaseError } from '@common/errors';
 
+const StyledTermsWrap = styled.div`
+  margin-top: auto;
+  .terms-A {
+    margin-bottom: 13px;
+  }
+`;
+
 const TermsAText = 'Anyone with my private key will have full control over my funds.';
 const TermsBText = 'I will never share my private key with anyone.';
 
-export const ApproachPasswordPhrase = (): JSX.Element => {
-  const { state } = useLocation();
-  const navigate = useNavigate();
-  const backButtonClick = (): void => navigate(-1);
+const CheckPassword = ({
+  setIsValidPwd,
+  backButtonClick,
+}: {
+  setIsValidPwd: (isValidPwd: boolean) => void;
+  backButtonClick: () => void;
+}): JSX.Element => {
   const { walletService } = useAdenaContext();
   const [pwd, setPwd] = useState('');
   const [error, setError] = useState(false);
@@ -47,7 +55,7 @@ export const ApproachPasswordPhrase = (): JSX.Element => {
     try {
       const storedPassword = await walletService.loadWalletPassword();
       validateInvalidPassword(pwd, storedPassword);
-      navigate(RoutePath.ApproachPrivatePhrase, { state });
+      setIsValidPwd(true);
     } catch (e) {
       if (e instanceof BaseError) {
         setError(true);
@@ -57,9 +65,7 @@ export const ApproachPasswordPhrase = (): JSX.Element => {
   };
 
   return (
-    <Wrapper>
-      <Text type='header4'>Export Private Key</Text>
-      <WarningBox type='approachPassword' margin='12px 0px 20px' />
+    <>
       <DefaultInput
         type='password'
         placeholder='Password'
@@ -69,7 +75,7 @@ export const ApproachPasswordPhrase = (): JSX.Element => {
         error={error}
       />
       {Boolean(errorMessage) && <ErrorText text={errorMessage} />}
-      <TermsWrap>
+      <StyledTermsWrap>
         <TermsCheckbox
           checked={termsA}
           onChange={termsAChange}
@@ -95,22 +101,9 @@ export const ApproachPasswordPhrase = (): JSX.Element => {
             props: { disabled: !disabled },
           }}
         />
-      </TermsWrap>
-    </Wrapper>
+      </StyledTermsWrap>
+    </>
   );
 };
 
-const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
-  width: 100%;
-  height: 100%;
-  padding-top: 24px;
-  overflow-y: auto;
-`;
-
-const TermsWrap = styled.div`
-  margin-top: auto;
-  .terms-A {
-    margin-bottom: 13px;
-  }
-`;
+export default CheckPassword;
diff --git a/packages/adena-extension/src/pages/certify/export-private-key/index.tsx b/packages/adena-extension/src/pages/certify/export-private-key/index.tsx
new file mode 100644
index 00000000..95a1c7e4
--- /dev/null
+++ b/packages/adena-extension/src/pages/certify/export-private-key/index.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import styled, { CSSProp } from 'styled-components';
+import { useNavigate } from 'react-router-dom';
+
+import { Text, WarningBox } from '@components/atoms';
+
+import ApproachPrivateKey from './ApproachPrivateKey';
+import CheckPassword from './CheckPassword';
+
+const StyledWrapper = styled.main`
+  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  width: 100%;
+  height: 100%;
+  padding-top: 24px;
+  overflow-y: auto;
+`;
+
+export const ExportPrivateKey = (): JSX.Element => {
+  const navigate = useNavigate();
+  const backButtonClick = (): void => navigate(-1);
+
+  const [isValidPwd, setIsValidPwd] = useState(false);
+
+  return (
+    <StyledWrapper>
+      <Text type='header4'>Export Private Key</Text>
+      <WarningBox
+        type={isValidPwd ? 'approachPrivate' : 'approachPassword'}
+        margin='12px 0px 20px'
+      />
+      {isValidPwd ? (
+        <ApproachPrivateKey backButtonClick={backButtonClick} />
+      ) : (
+        <CheckPassword setIsValidPwd={setIsValidPwd} backButtonClick={backButtonClick} />
+      )}
+    </StyledWrapper>
+  );
+};
diff --git a/packages/adena-extension/src/pages/certify/security-privacy/index.tsx b/packages/adena-extension/src/pages/certify/security-privacy/index.tsx
index 235bdf1a..680ea80a 100644
--- a/packages/adena-extension/src/pages/certify/security-privacy/index.tsx
+++ b/packages/adena-extension/src/pages/certify/security-privacy/index.tsx
@@ -27,7 +27,7 @@ const getMenuMakerInfo = (
   },
   {
     title: 'Export Private Key',
-    navigatePath: RoutePath.ApproachPasswordPhrase,
+    navigatePath: RoutePath.ExportPrivateKey,
     mode: 'DEFAULT',
     disabled: !account || isLedgerAccount(account),
   },
diff --git a/packages/adena-extension/src/pages/wallet/account-details/index.tsx b/packages/adena-extension/src/pages/wallet/account-details/index.tsx
index cd21333b..88fa2a7e 100644
--- a/packages/adena-extension/src/pages/wallet/account-details/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/account-details/index.tsx
@@ -62,7 +62,7 @@ const AccountDetailsContainer: React.FC = () => {
     if (account) {
       await changeCurrentAccount(account);
     }
-    navigate(RoutePath.ApproachPasswordPhrase, { state: { accountId } });
+    navigate(RoutePath.ExportPrivateKey, { state: { accountId } });
   }, [account]);
 
   const changeName = useCallback(
diff --git a/packages/adena-extension/src/router/custom-router.tsx b/packages/adena-extension/src/router/custom-router.tsx
index 81274fdb..0261148c 100644
--- a/packages/adena-extension/src/router/custom-router.tsx
+++ b/packages/adena-extension/src/router/custom-router.tsx
@@ -34,8 +34,7 @@ import { SecurityPrivacy } from '@pages/certify/security-privacy';
 import { AboutAdena } from '@pages/certify/about-adena';
 import { RevealPasswordPhrase } from '@pages/certify/reveal-password-phrase';
 import { RevealPrivatePhrase } from '@pages/certify/reveal-private-phrase';
-import { ApproachPasswordPhrase } from '@pages/certify/approach-password-phrase';
-import { ApproachPrivatePhrase } from '@pages/certify/approach-private-phrase';
+import { ExportPrivateKey } from '@pages/certify/export-private-key';
 import { RemoveAccount } from '@pages/certify/remove-account';
 import { ResetWallet } from '@pages/certify/reset-wallet';
 import ChangeNetwork from '@pages/certify/change-network';
@@ -203,8 +202,7 @@ export const CustomRouter = (): JSX.Element => {
           <Route path={RoutePath.AboutAdena} element={<AboutAdena />} />
           <Route path={RoutePath.RevealPasswordPhrase} element={<RevealPasswordPhrase />} />
           <Route path={RoutePath.RevealPrivatePhrase} element={<RevealPrivatePhrase />} />
-          <Route path={RoutePath.ApproachPasswordPhrase} element={<ApproachPasswordPhrase />} />
-          <Route path={RoutePath.ApproachPrivatePhrase} element={<ApproachPrivatePhrase />} />
+          <Route path={RoutePath.ExportPrivateKey} element={<ExportPrivateKey />} />
           <Route path={RoutePath.RemoveAccount} element={<RemoveAccount />} />
           <Route path={RoutePath.ResetWallet} element={<ResetWallet />} />
           <Route path={RoutePath.GoogleConnect} element={<GoogleConnect />} />
diff --git a/packages/adena-extension/src/router/path.ts b/packages/adena-extension/src/router/path.ts
index b6ceb6f2..2d12210a 100644
--- a/packages/adena-extension/src/router/path.ts
+++ b/packages/adena-extension/src/router/path.ts
@@ -64,8 +64,7 @@ export enum RoutePath {
   RevealPasswordPhrase = '/settings/security-privacy/reveal-password-phrase',
   RevealPrivatePhrase = '/settings/security-privacy/reveal-private-phrase',
   AboutAdena = '/settings/about-adena',
-  ApproachPasswordPhrase = '/settings/security-privacy/export-private-key/approach-password-phrase',
-  ApproachPrivatePhrase = '/settings/security-privacy/export-private-key/approach-private-phrase',
+  ExportPrivateKey = '/settings/security-privacy/export-private-key',
   RemoveAccount = '/settings/security-privacy/remove-account',
   ResetWallet = '/settings/security-privacy/reset-wallet',
   ApproveHardwareWalletConnect = '/approve/settings/hardware-wallet',

From 119d2b0eb3e5e5e090331f91b5244c18d246e9da Mon Sep 17 00:00:00 2001
From: blue <skqksh@gmail.com>
Date: Thu, 21 Dec 2023 22:43:36 +0900
Subject: [PATCH 3/7] refactor. remove unused code

---
 .../pages/certify/export-account/index.tsx    | 70 ----------------
 .../pages/certify/import-account/index.tsx    | 59 -------------
 .../pages/certify/view-private-key/index.tsx  | 84 -------------------
 .../src/router/custom-router.tsx              |  6 --
 packages/adena-extension/src/router/path.ts   |  1 -
 5 files changed, 220 deletions(-)
 delete mode 100644 packages/adena-extension/src/pages/certify/export-account/index.tsx
 delete mode 100644 packages/adena-extension/src/pages/certify/import-account/index.tsx
 delete mode 100644 packages/adena-extension/src/pages/certify/view-private-key/index.tsx

diff --git a/packages/adena-extension/src/pages/certify/export-account/index.tsx b/packages/adena-extension/src/pages/certify/export-account/index.tsx
deleted file mode 100644
index be43f41f..00000000
--- a/packages/adena-extension/src/pages/certify/export-account/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React, { useRef, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
-import { useNavigate } from 'react-router-dom';
-
-import { RoutePath } from '@router/path';
-import { DefaultInput, ErrorText } from '@components/atoms';
-import { TitleWithDesc, CancelAndConfirmButton } from '@components/molecules';
-
-const text = {
-  title: 'Export Private Key',
-  desc: 'Do not share your private key!\nAnyone with your private key will have\nfull control of your wallet.',
-};
-
-const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
-  width: 100%;
-  height: 100%;
-  padding-top: 24px;
-`;
-
-export const ExportAccount = (): JSX.Element => {
-  const navigate = useNavigate();
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState({
-    error: false,
-    message: 'Invalid password',
-  });
-
-  const cancelButtonClick = (): void => navigate(-1);
-
-  const nextButtonClick = async (): Promise<void> => {
-    try {
-      navigate(RoutePath.ViewPrivateKey, { replace: true });
-    } catch (error) {
-      setError({ error: true, message: 'Invalid password' });
-    }
-  };
-
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => setPassword(e.target.value);
-
-  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
-    if (e.key === 'Enter' && password) nextButtonClick();
-  };
-
-  return (
-    <Wrapper>
-      <TitleWithDesc title={text.title} desc={text.desc} />
-      <DefaultInput
-        type='password'
-        value={password}
-        onChange={onChange}
-        onKeyDown={onKeyDown}
-        error={error.error}
-        placeholder='Password'
-        margin='24px 0px 0px'
-        ref={inputRef}
-      />
-      {error.error && <ErrorText text={error.message} />}
-      <CancelAndConfirmButton
-        cancelButtonProps={{ onClick: cancelButtonClick }}
-        confirmButtonProps={{
-          onClick: nextButtonClick,
-          text: 'Next',
-          props: { disabled: password === '' },
-        }}
-      />
-    </Wrapper>
-  );
-};
diff --git a/packages/adena-extension/src/pages/certify/import-account/index.tsx b/packages/adena-extension/src/pages/certify/import-account/index.tsx
deleted file mode 100644
index 8334c06b..00000000
--- a/packages/adena-extension/src/pages/certify/import-account/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import styled, { CSSProp } from 'styled-components';
-
-import { Text, ErrorText, SecureTextarea } from '@components/atoms';
-import { CancelAndConfirmButton } from '@components/molecules';
-import theme from '@styles/theme';
-import { useImportAccount } from '@hooks/certify/use-import-account';
-
-const text = {
-  title: 'Import Account',
-  subTitle: 'Private Key',
-  desc: 'Import an existing account\nwith a private key.',
-};
-
-export const ImportAccount = (): JSX.Element => {
-  const { privateKeyState, buttonState } = useImportAccount();
-
-  return (
-    <Wrapper>
-      <Text className='main-title' type='header4'>
-        {text.title}
-      </Text>
-      <Text type='body1Bold' className='sub-title'>
-        {text.subTitle}
-      </Text>
-      <Text type='body1Reg' color={theme.color.neutral[2]}>
-        {text.desc}
-      </Text>
-      <SecureTextarea
-        value={privateKeyState.value}
-        onChange={privateKeyState.onChange}
-        onKeyDown={privateKeyState.onKeyDown}
-        error={privateKeyState.error}
-      />
-      {privateKeyState.error && <ErrorText text={privateKeyState.errorMessage} />}
-      <CancelAndConfirmButton
-        cancelButtonProps={{ onClick: buttonState.cancel }}
-        confirmButtonProps={{
-          onClick: buttonState.import,
-          text: 'Import',
-          props: { disabled: buttonState.disabled },
-        }}
-      />
-    </Wrapper>
-  );
-};
-
-const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
-  width: 100%;
-  height: 100%;
-  padding-top: 54px;
-  .main-title {
-    margin-bottom: 17px;
-  }
-  .sub-title {
-    margin-bottom: 8px;
-  }
-`;
diff --git a/packages/adena-extension/src/pages/certify/view-private-key/index.tsx b/packages/adena-extension/src/pages/certify/view-private-key/index.tsx
deleted file mode 100644
index 55df882d..00000000
--- a/packages/adena-extension/src/pages/certify/view-private-key/index.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import styled, { CSSProp, FlattenSimpleInterpolation } from 'styled-components';
-
-import { Text, Button, ButtonHierarchy, Copy } from '@components/atoms';
-import { TitleWithDesc } from '@components/molecules';
-import { useCurrentAccount } from '@hooks/use-current-account';
-import { useAdenaContext } from '@hooks/use-context';
-
-const text = {
-  title: 'Export Private Key',
-  desc: 'Do not share your private key!\nAnyone with your private key will have\nfull control of your wallet.',
-  key: 'a12093890asjfnlkf02394klajsdfklasnflkauv09askdlfjkdsfanlk34u09usafdfdasdfsdfa1211321213',
-};
-
-const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
-  width: 100%;
-  height: 100%;
-  padding-top: 24px;
-  .error {
-    width: 100%;
-    padding-left: 16px;
-  }
-`;
-
-const CopyKeyBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'stretch')};
-  width: 100%;
-  margin-top: 24px;
-  margin-bottom: auto;
-`;
-
-const KeyBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'stretch', 'center')};
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
-  border: 1px solid ${({ theme }): string => theme.color.neutral[3]};
-  border-radius: 18px;
-  width: 100%;
-  height: 140px;
-  padding: 14px 16px;
-  margin-bottom: 12px;
-  word-wrap: break-word;
-  & > p {
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
-    text-align: center;
-    color: ${({ theme }): string => theme.color.neutral[2]};
-  }
-`;
-
-export const ViewPrivateKey = (): JSX.Element => {
-  const { currentAccount } = useCurrentAccount();
-  const { walletService } = useAdenaContext();
-  const navigate = useNavigate();
-  const doneButtonClick = (): void => navigate(-1);
-  const [privateKey, setPrivateKey] = useState('');
-
-  useEffect(() => {
-    initPrivateKey();
-  }, [currentAccount]);
-
-  const initPrivateKey = async (): Promise<void> => {
-    const wallet = await walletService.loadWallet();
-    const privateKey = wallet.privateKeyStr;
-    if (privateKey) {
-      setPrivateKey(privateKey);
-    }
-  };
-
-  return (
-    <Wrapper>
-      <TitleWithDesc title={text.title} desc={text.desc} />
-      <CopyKeyBox>
-        <KeyBox>
-          <p>{privateKey && privateKey}</p>
-        </KeyBox>
-        <Copy copyStr={privateKey} />
-      </CopyKeyBox>
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} onClick={doneButtonClick}>
-        <Text type='body1Bold'>Done</Text>
-      </Button>
-    </Wrapper>
-  );
-};
diff --git a/packages/adena-extension/src/router/custom-router.tsx b/packages/adena-extension/src/router/custom-router.tsx
index 0261148c..af62875d 100644
--- a/packages/adena-extension/src/router/custom-router.tsx
+++ b/packages/adena-extension/src/router/custom-router.tsx
@@ -13,13 +13,10 @@ import { ForgotPassword } from '@pages/certify/forgot-password';
 import { EnterSeedPhrase } from '@pages/certify/enter-seed';
 import { Settings } from '@pages/certify/settings';
 import { ChangePassword } from '@pages/certify/change-password';
-import { ExportAccount } from '@pages/certify/export-account';
-import { ViewPrivateKey } from '@pages/certify/view-private-key';
 import { SeedPhrase } from '@pages/certify/seed-phrase';
 import { ViewSeedPhrase } from '@pages/certify/view-seed-phrase';
 import { ConnectedApps } from '@pages/certify/connected-apps';
 import AddAccountPage from '@pages/certify/add-account-page';
-import { ImportAccount } from '@pages/certify/import-account';
 import AddressBook from '@pages/certify/address-book';
 import AddAddress from '@pages/certify/add-address';
 import {
@@ -114,8 +111,6 @@ export const CustomRouter = (): JSX.Element => {
           <Route path={RoutePath.ManageTokenAdded} element={<ManageTokenAdded />} />
           <Route path={RoutePath.Setting} element={<Settings />} />
           <Route path={RoutePath.SettingChangePassword} element={<ChangePassword />} />
-          <Route path={RoutePath.SettingExportAccount} element={<ExportAccount />} />
-          <Route path={RoutePath.ViewPrivateKey} element={<ViewPrivateKey />} />
           <Route path={RoutePath.SettingSeedPhrase} element={<SeedPhrase />} />
           <Route path={RoutePath.ViewSeedPhrase} element={<ViewSeedPhrase />} />
           <Route path={RoutePath.WalletSearch} element={<WalletSearch />} />
@@ -147,7 +142,6 @@ export const CustomRouter = (): JSX.Element => {
           <Route path={RoutePath.ChangeNetwork} element={<ChangeNetwork />} />
           <Route path={RoutePath.AddAccount} element={<AddAccountPage />} />
           <Route path={RoutePath.AccountDetails} element={<AccountDetailsPage />} />
-          <Route path={RoutePath.ImportAccount} element={<ImportAccount />} />
           <Route path={RoutePath.AddressBook} element={<AddressBook />} />
           <Route path={RoutePath.AddAddress} element={<AddAddress />} />
           <Route
diff --git a/packages/adena-extension/src/router/path.ts b/packages/adena-extension/src/router/path.ts
index 2d12210a..7bd75693 100644
--- a/packages/adena-extension/src/router/path.ts
+++ b/packages/adena-extension/src/router/path.ts
@@ -50,7 +50,6 @@ export enum RoutePath {
   // settings
   Setting = '/settings',
   SettingChangePassword = '/settings/change-password',
-  SettingExportAccount = '/settings/export-account',
   SettingSeedPhrase = '/settings/seed-phrase',
   ViewPrivateKey = '/settings/view-private-key',
   ViewSeedPhrase = '/settings/view-seed-phrase',

From d03c09c1fec8e49a958a806bcd527d8f8a7c6f2a Mon Sep 17 00:00:00 2001
From: blue <skqksh@gmail.com>
Date: Thu, 21 Dec 2023 23:56:24 +0900
Subject: [PATCH 4/7] refactor. simplify css

---
 .../components/atoms/blur-screen/index.tsx    |  8 ++-
 .../src/components/atoms/button/index.tsx     | 51 ++++++-------
 .../components/atoms/copy-button/index.tsx    |  7 +-
 .../copy-icon-button.styles.ts                |  3 +-
 .../components/atoms/copy-tooltip/index.tsx   | 12 ++--
 .../custom-network-input.styles.ts            | 16 +++--
 .../components/atoms/default-input/index.tsx  | 12 ++--
 .../atoms/full-button-right-icon/index.tsx    | 11 +--
 .../src/components/atoms/list-box/index.tsx   | 17 +++--
 .../src/components/atoms/loadings/round.tsx   |  2 +-
 .../src/components/atoms/loadings/spinner.tsx | 11 +--
 .../atoms/search-input/search-input.styles.ts |  7 +-
 .../atoms/secure-textarea/index.tsx           |  8 ++-
 .../components/atoms/skeleton-box/index.tsx   |  3 +-
 .../atoms/static-multi-tooltip/index.tsx      |  9 ++-
 .../src/components/atoms/status-dot/index.tsx |  9 ++-
 .../atoms/sub-header/sub-header.styles.ts     |  5 +-
 .../components/atoms/tab-container/index.tsx  | 13 ++--
 .../components/atoms/warning-box/index.tsx    |  6 +-
 .../approve-injection-loading.styles.ts       | 12 ++--
 .../approve-ledger-loading.styles.ts          |  6 +-
 .../approve-loading/approve-loading.styles.ts | 12 ++--
 .../approve-transaction.styles.ts             | 45 ++++++------
 .../bottom-fixed-button-group/index.tsx       | 20 +++---
 .../molecules/bottom-fixed-button/index.tsx   |  8 ++-
 .../cancel-and-confirm-button/index.tsx       |  5 +-
 .../molecules/close-shadow-button/index.tsx   |  8 ++-
 .../molecules/double-button/index.tsx         |  5 +-
 .../error-container/error-network.tsx         |  5 +-
 .../molecules/ghost-button/index.tsx          | 10 +--
 .../molecules/loading-nft/index.tsx           | 10 +--
 .../components/molecules/seed-box/index.tsx   | 10 +--
 .../molecules/seed-view-and-copy/index.tsx    |  9 +--
 .../molecules/terms-checkbox/index.tsx        | 13 ++--
 .../loading-history/index.tsx                 | 12 ++--
 .../transaction-history-list-item.styles.ts   | 23 +++---
 .../transaction-history-list.styles.ts        |  7 +-
 .../underline-text-button.styles.ts           |  8 ++-
 .../account-details/account-details.styles.ts |  7 +-
 .../account-name-input.styles.ts              | 11 +--
 .../additional-token-info.styles.ts           | 13 ++--
 .../additional-token-search-list.styles.ts    | 18 ++---
 .../additional-token-select-box.styles.ts     | 17 ++---
 .../additional-token.styles.ts                | 17 ++---
 .../approve-adding-network-table.styles.ts    | 13 ++--
 .../approve-changing-network-item.styles.ts   |  9 +--
 .../wallet-connect/wallet-connect.styles.ts   | 44 ++++++------
 .../loading-change-network/index.tsx          |  7 +-
 .../network-list-item.styles.ts               | 13 ++--
 .../main-manage-token-button.styles.ts        |  7 +-
 .../manage-token-list-item.styles.ts          |  6 +-
 .../manage-token-search-input.styles.ts       | 13 ++--
 .../manage-token/manage-token.styles.ts       |  9 +--
 .../manage-token/toggle/toggle.styles.ts      |  8 ++-
 .../side-menu-account-item.styles.ts          | 29 ++++----
 .../side-menu-layout.styles.ts                |  9 ++-
 .../side-menu-link/side-menu-link.styles.ts   | 10 +--
 .../router/side-menu/side-menu.styles.ts      | 23 +++---
 .../address-book-list.styles.ts               | 11 +--
 .../address-input/address-input.styles.ts     | 29 ++++----
 .../balance-input/balance-input.styles.ts     | 21 +++---
 .../transfer-input/transfer-input.styles.ts   | 17 ++---
 .../transfer-summary-address.styles.ts        |  7 +-
 .../transfer-summary-balance.styles.ts        |  7 +-
 .../transfer-summary-network-fee.styles.ts    | 10 +--
 .../transfer-summary.styles.ts                | 17 ++---
 .../token-list-item/token-list-item.styles.ts |  9 +--
 .../src/pages/certify/about-adena/index.tsx   |  5 +-
 .../pages/certify/add-account-page/index.tsx  |  5 +-
 .../multiline-text-with-arrow-button.tsx      |  7 +-
 .../src/pages/certify/add-address/index.tsx   |  9 +--
 .../src/pages/certify/address-book/index.tsx  |  7 +-
 .../connect/connect-fail.tsx                  |  5 +-
 .../connect/connect-init.tsx                  |  5 +-
 .../connect/connect-request-wallet-load.tsx   |  5 +-
 .../connect/connect-request-wallet.tsx        |  5 +-
 .../connect/connect-request.tsx               |  5 +-
 .../finish/finish.tsx                         |  5 +-
 .../ledger-all-set/ledger-all-set.tsx         |  5 +-
 .../ledger-password/ledger-password.tsx       |  5 +-
 .../select-account/select-account.tsx         |  5 +-
 .../pages/certify/change-password/index.tsx   |  5 +-
 .../pages/certify/connected-apps/index.tsx    | 13 ++--
 .../pages/certify/create-password/index.tsx   |  5 +-
 .../src/pages/certify/enter-seed/index.tsx    |  5 +-
 .../export-private-key/ApproachPrivateKey.tsx | 10 +--
 .../certify/export-private-key/index.tsx      |  5 +-
 .../pages/certify/forgot-password/index.tsx   | 17 ++---
 .../certify/generate-seed-phrase/index.tsx    |  5 +-
 .../connect/google-connect-failed.tsx         |  5 +-
 .../google-login/connect/google-connect.tsx   |  8 ++-
 .../certify/import-private-key/index.tsx      |  5 +-
 .../src/pages/certify/launch-adena/index.tsx  |  5 +-
 .../src/pages/certify/login/index.tsx         |  9 +--
 .../pages/certify/remove-account/index.tsx    |  5 +-
 .../src/pages/certify/reset-wallet/index.tsx  |  3 +-
 .../certify/reveal-password-phrase/index.tsx  |  5 +-
 .../certify/reveal-private-phrase/index.tsx   |  5 +-
 .../pages/certify/security-privacy/index.tsx  |  5 +-
 .../src/pages/certify/seed-phrase/index.tsx   |  5 +-
 .../src/pages/certify/settings/index.tsx      |  8 ++-
 .../pages/certify/view-seed-phrase/index.tsx  |  7 +-
 .../pages/certify/your-seed-phrase/index.tsx  |  5 +-
 .../src/pages/wallet/approve-login/index.tsx  |  5 +-
 .../loading-approve-transaction.tsx           | 13 ++--
 .../src/pages/wallet/deposit/index.tsx        | 15 ++--
 .../src/pages/wallet/explore/index.tsx        | 11 +--
 .../pages/wallet/explore/loading-explore.tsx  | 11 +--
 .../src/pages/wallet/history/index.tsx        |  5 +-
 .../src/pages/wallet/nft/index.tsx            |  7 +-
 .../src/pages/wallet/search/index.tsx         | 12 ++--
 .../src/pages/wallet/token-details/index.tsx  |  9 +--
 .../token-details/loading-token-details.tsx   | 12 ++--
 .../pages/wallet/transaction-detail/index.tsx | 30 ++++----
 .../src/pages/wallet/wallet-create/index.tsx  |  7 +-
 .../src/router/header/approve-menu/index.tsx  |  9 +--
 .../router/header/arrow-title-menu/index.tsx  |  8 ++-
 .../router/header/close-title-menu/index.tsx  | 13 ++--
 .../src/router/header/home-menu/index.tsx     |  9 +--
 .../src/router/header/index.tsx               | 11 +--
 .../src/router/header/progress-menu/index.tsx | 12 ++--
 .../src/router/header/tab-menu/index.tsx      | 11 +--
 .../src/router/header/top-menu/index.tsx      |  9 +--
 .../src/router/loading-main.tsx               | 14 ++--
 .../src/router/navigation/index.tsx           | 12 ++--
 packages/adena-extension/src/styles/mixins.ts | 71 +++++++++----------
 126 files changed, 782 insertions(+), 606 deletions(-)

diff --git a/packages/adena-extension/src/components/atoms/blur-screen/index.tsx b/packages/adena-extension/src/components/atoms/blur-screen/index.tsx
index 4ac6faa4..9ed759fb 100644
--- a/packages/adena-extension/src/components/atoms/blur-screen/index.tsx
+++ b/packages/adena-extension/src/components/atoms/blur-screen/index.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
 import { Text, Icon } from '@components/atoms';
 import blurBg from '@assets/blur-bg.svg';
+import mixins from '@styles/mixins';
 
 interface BlurScreenProps {
   hasText?: boolean;
@@ -20,8 +22,8 @@ export const BlurScreen = ({ hasText, text }: BlurScreenProps): JSX.Element => {
 };
 
 const Wrapper = styled.div<{ hasText?: boolean }>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'center')};
-  ${({ theme }): CSSProp => theme.mixins.positionCenter()};
+  ${mixins.flex('column', 'center', 'center')};
+  ${mixins.positionCenter()};
   gap: ${({ hasText }): false | '21px' | undefined => hasText && '21px'};
   background: url(${blurBg}) no-repeat 100% 100% / 100% 100%;
   width: calc(100% - 12px);
diff --git a/packages/adena-extension/src/components/atoms/button/index.tsx b/packages/adena-extension/src/components/atoms/button/index.tsx
index af990952..70027e8a 100644
--- a/packages/adena-extension/src/components/atoms/button/index.tsx
+++ b/packages/adena-extension/src/components/atoms/button/index.tsx
@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import React, { CSSProperties } from 'react';
 import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
 type XOR<T, U> = T | U extends Record<string, unknown>
@@ -18,56 +19,56 @@ export enum ButtonHierarchy {
 
 export const modeVariants = {
   normal: css`
-    background: ${({ theme }): string => theme.color.neutral[6]};
+    background: ${theme.color.neutral[6]};
     &:hover {
-      background: ${({ theme }): string => theme.color.neutral[11]};
+      background: ${theme.color.neutral[11]};
     }
     /* &:disabled {
-      background: ${({ theme }): string => theme.color.primary[6]};
-      color: ${({ theme }): string => theme.color.neutral[4]};
+      background: ${theme.color.primary[6]};
+      color: ${theme.color.neutral[4]};
     } */
   `,
   primary: css`
-    background: ${({ theme }): string => theme.color.primary[3]};
+    background: ${theme.color.primary[3]};
     &:hover {
-      background: ${({ theme }): string => theme.color.primary[4]};
+      background: ${theme.color.primary[4]};
     }
     &:disabled {
-      background: ${({ theme }): string => theme.color.primary[6]};
-      color: ${({ theme }): string => theme.color.neutral[4]};
+      background: ${theme.color.primary[6]};
+      color: ${theme.color.neutral[4]};
     }
   `,
   ghost: css`
-    background: ${({ theme }): string => theme.color.neutral[8]};
-    border: 1px solid ${({ theme }): string => theme.color.neutral[2]};
+    background: ${theme.color.neutral[8]};
+    border: 1px solid ${theme.color.neutral[2]};
     &:hover {
-      background: ${({ theme }): string => theme.color.neutral[5]};
-      border: 1px solid ${({ theme }): string => theme.color.neutral[2]};
+      background: ${theme.color.neutral[5]};
+      border: 1px solid ${theme.color.neutral[2]};
     }
     &:disabled {
-      background: ${({ theme }): string => theme.color.neutral[6]};
-      border: 1px solid ${({ theme }): string => theme.color.neutral[3]};
-      color: ${({ theme }): string => theme.color.neutral[4]};
+      background: ${theme.color.neutral[6]};
+      border: 1px solid ${theme.color.neutral[3]};
+      color: ${theme.color.neutral[4]};
     }
   `,
   dark: css`
-    background: ${({ theme }): string => theme.color.neutral[4]};
+    background: ${theme.color.neutral[4]};
     &:hover {
-      background: ${({ theme }): string => theme.color.neutral[5]};
+      background: ${theme.color.neutral[5]};
     }
     &:disabled {
-      background: ${({ theme }): string => theme.color.neutral[5]};
-      color: ${({ theme }): string => theme.color.neutral[4]};
+      background: ${theme.color.neutral[5]};
+      color: ${theme.color.neutral[4]};
     }
   `,
   danger: css`
-    background: ${({ theme }): string => theme.color.red[2]};
+    background: ${theme.color.red[2]};
     &:hover {
-      background: ${({ theme }): string => theme.color.red[8]};
+      background: ${theme.color.red[8]};
     }
     /* &:disabled {
-      background: ${({ theme }): string => theme.color.neutral[5]};
-      color: ${({ theme }): string => theme.color.neutral[4]};
+      background: ${theme.color.neutral[5]};
+      color: ${theme.color.neutral[4]};
     } */
   `,
 };
@@ -106,7 +107,7 @@ export const Button = (props: ButtonProps): JSX.Element => {
 };
 
 const ButtonWrapper = styled.button<ButtonProps>`
-  ${mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   width: ${({ width, fullWidth }): string => {
     if (width) return typeof width === 'number' ? `${width}px` : width;
     if (fullWidth) return '100%';
@@ -130,7 +131,7 @@ const ButtonWrapper = styled.button<ButtonProps>`
   }};
   border-radius: ${({ radius }): string => (radius ? radius : '30px')};
   transition: all 0.4s ease;
-  color: ${({ theme }): string => theme.color.neutral[0]};
+  color: ${theme.color.neutral[0]};
   background-color: ${({ bgColor }): string | undefined => bgColor};
 `;
 
diff --git a/packages/adena-extension/src/components/atoms/copy-button/index.tsx b/packages/adena-extension/src/components/atoms/copy-button/index.tsx
index dd86ab13..2839cd52 100644
--- a/packages/adena-extension/src/components/atoms/copy-button/index.tsx
+++ b/packages/adena-extension/src/components/atoms/copy-button/index.tsx
@@ -1,17 +1,18 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import theme from '@styles/theme';
 import { Text, Button } from '@components/atoms';
+import mixins from '@styles/mixins';
 
 const CopyButton = styled(Button)<{ isClicked: boolean }>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   height: 25px;
   border-radius: 12.5px;
   padding: 0px 12px;
   transition: background-color 0.4s ease;
   &:hover {
-    background-color: ${({ theme }): string => theme.color.neutral[11]};
+    background-color: ${theme.color.neutral[11]};
   }
 `;
 
diff --git a/packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts b/packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts
index 89cfb4dd..0404d535 100644
--- a/packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts
+++ b/packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts
@@ -1,3 +1,4 @@
+import theme from '@styles/theme';
 import styled from 'styled-components';
 
 interface CopyButtonWrapperProps {
@@ -21,7 +22,7 @@ export const CopyButtonWrapper = styled.div<CopyButtonWrapperProps>`
 
   :hover svg {
     path {
-      stroke: ${({ theme }): string => theme.color.neutral[0]};
+      stroke: ${theme.color.neutral[0]};
     }
   }
 `;
diff --git a/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx b/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx
index 8cc05d96..8a3d2d34 100644
--- a/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx
+++ b/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx
@@ -1,6 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled, { CSSProp, FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
 import { Text } from '@components/atoms';
+import mixins from '@styles/mixins';
+import theme, { fonts } from '@styles/theme';
 
 interface CopyTooltipProps {
   children: React.ReactNode;
@@ -10,15 +12,15 @@ interface CopyTooltipProps {
 }
 
 const ToolTipInner = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+  ${mixins.flex('row', 'center', 'center')};
+  ${fonts.body2Reg};
   position: absolute;
   width: max-content;
   height: 25px;
   visibility: hidden;
   z-index: 1;
   padding: 0px 17px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   border-radius: 13px;
   transform: scale(0.6);
   cursor: default;
@@ -33,7 +35,7 @@ const ToolTipInner = styled.div`
 `;
 
 const ToolTipWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   position: relative;
   cursor: pointer;
   &:hover .tooltip,
diff --git a/packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts b/packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts
index a9867e86..5ffced8e 100644
--- a/packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts
+++ b/packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts
@@ -1,4 +1,6 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
+
+import theme, { fonts } from '@styles/theme';
 
 export const CustomNetworkInputWrapper = styled.div`
   display: flex;
@@ -17,9 +19,9 @@ export const CustomNetworkInputWrapper = styled.div`
       width: 100%;
       min-height: 48px;
       padding: 12px 16px;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
-      background-color: ${({ theme }): string => theme.color.neutral[8]};
-      border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+      ${fonts.body2Reg};
+      background-color: ${theme.color.neutral[8]};
+      border: 1px solid ${theme.color.neutral[6]};
       border-radius: 30px;
       align-items: center;
       margin-top: 12px;
@@ -37,7 +39,7 @@ export const CustomNetworkInputWrapper = styled.div`
         line-height: 25px;
 
         ::placeholder {
-          color: ${({ theme }): string => theme.color.neutral[9]};
+          color: ${theme.color.neutral[9]};
         }
       }
     }
@@ -46,8 +48,8 @@ export const CustomNetworkInputWrapper = styled.div`
   .error-message {
     position: relative;
     padding: 0 16px;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.captionReg};
+    ${fonts.captionReg};
     height: 14px;
-    color: ${({ theme }): string => theme.color.red[2]};
+    color: ${theme.color.red[2]};
   }
 `;
diff --git a/packages/adena-extension/src/components/atoms/default-input/index.tsx b/packages/adena-extension/src/components/atoms/default-input/index.tsx
index 919efba1..040d698a 100644
--- a/packages/adena-extension/src/components/atoms/default-input/index.tsx
+++ b/packages/adena-extension/src/components/atoms/default-input/index.tsx
@@ -1,4 +1,6 @@
-import styled, { FlattenSimpleInterpolation, css } from 'styled-components';
+import styled, { css } from 'styled-components';
+
+import theme, { fonts } from '@styles/theme';
 
 interface InputProps {
   error?: boolean;
@@ -6,15 +8,15 @@ interface InputProps {
 }
 
 export const inputStyle = css`
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+  ${fonts.body2Reg};
   width: 100%;
   height: 48px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
-  color: ${({ theme }): string => theme.color.neutral[0]};
+  background-color: ${theme.color.neutral[8]};
+  color: ${theme.color.neutral[0]};
   border-radius: 30px;
   padding: 14px 16px;
   ::placeholder {
-    color: ${({ theme }): string => theme.color.neutral[9]};
+    color: ${theme.color.neutral[9]};
   }
 `;
 
diff --git a/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx b/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx
index d0b5cb1a..49bb44f2 100644
--- a/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx
+++ b/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import styled, { CSSProp, css } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { Text, Icon } from '@components/atoms';
-import { FontsType } from '@styles/theme';
+import theme, { FontsType } from '@styles/theme';
+import mixins from '@styles/mixins';
 
 export type ButtonMode = 'DEFAULT' | 'DANGER' | 'HOVER';
 export type IconMode = 'ARROW' | 'WEBLINK';
@@ -72,17 +73,17 @@ const ButtonWrapper = styled.button<ButtonStyleProps>`
     margin-top: ${({ gap }): string | undefined => (typeof gap === 'number' ? gap + 'px' : gap)};
   }
   ${defaultIconStyle};
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   height: 54px;
   padding: 0px 24px 0px 20px;
   border-radius: 18px;
   transition: all 0.3s ease;
-  background-color: ${({ theme }): string => theme.color.neutral[6]};
+  background-color: ${theme.color.neutral[6]};
   color: ${({ theme, mode }): string =>
     mode === 'DANGER' ? theme.color.red[2] : theme.color.neutral[0]};
   &:hover {
-    background-color: ${({ theme }): string => theme.color.neutral[11]};
+    background-color: ${theme.color.neutral[11]};
     ${hoverIconStyle};
   }
 `;
diff --git a/packages/adena-extension/src/components/atoms/list-box/index.tsx b/packages/adena-extension/src/components/atoms/list-box/index.tsx
index 0cd00f56..73377c64 100644
--- a/packages/adena-extension/src/components/atoms/list-box/index.tsx
+++ b/packages/adena-extension/src/components/atoms/list-box/index.tsx
@@ -1,5 +1,8 @@
 import React, { ReactElement } from 'react';
-import styled, { css, CSSProp, CSSProperties } from 'styled-components';
+import styled, { css, CSSProperties } from 'styled-components';
+
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 export enum ListHierarchy {
   Default = 'default',
@@ -24,19 +27,19 @@ interface ListBoxProps extends ListBoxStyleProps {
 
 const modeVariants = {
   default: css`
-    background: ${({ theme }): string => theme.color.neutral[6]};
+    background: ${theme.color.neutral[6]};
     &:hover {
-      background: ${({ theme }): string => theme.color.neutral[11]};
+      background: ${theme.color.neutral[11]};
     }
   `,
   normal: css`
-    background: ${({ theme }): string => theme.color.neutral[8]};
+    background: ${theme.color.neutral[8]};
     &:hover {
-      background: ${({ theme }): string => theme.color.neutral[6]};
+      background: ${theme.color.neutral[6]};
     }
   `,
   static: css`
-    background: ${({ theme }): string => theme.color.neutral[6]};
+    background: ${theme.color.neutral[6]};
   `,
 };
 
@@ -68,7 +71,7 @@ export const ListBox = ({
 };
 
 const Wrapper = styled.div<ListBoxStyleProps>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   ${({ mode }): any => {
     if (mode === ListHierarchy.Default) return modeVariants.default;
     if (mode === ListHierarchy.Normal) return modeVariants.normal;
diff --git a/packages/adena-extension/src/components/atoms/loadings/round.tsx b/packages/adena-extension/src/components/atoms/loadings/round.tsx
index 3f89479e..9993cb6b 100644
--- a/packages/adena-extension/src/components/atoms/loadings/round.tsx
+++ b/packages/adena-extension/src/components/atoms/loadings/round.tsx
@@ -12,7 +12,7 @@ interface RoundProps {
 
 const RoundStyle = styled.div<RoundProps>`
   ${({ children, theme }): false | CSSProp =>
-    !!children && theme.mixins.flexbox('row', 'center', 'center')};
+    !!children && theme.mixins.flex('row', 'center', 'center')};
   width: ${({ width }): string => (width ? width : '100%')};
   height: ${({ height }): string | undefined => height && height};
   background-color: ${({ theme, bgColor }): string => (bgColor ? bgColor : theme.color.neutral[4])};
diff --git a/packages/adena-extension/src/components/atoms/loadings/spinner.tsx b/packages/adena-extension/src/components/atoms/loadings/spinner.tsx
index 55bfa84a..f2202321 100644
--- a/packages/adena-extension/src/components/atoms/loadings/spinner.tsx
+++ b/packages/adena-extension/src/components/atoms/loadings/spinner.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import styled, { CSSProp, keyframes } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 const spinAnimation = keyframes`
   0% {
@@ -11,7 +14,7 @@ const spinAnimation = keyframes`
 `;
 
 const SpinRing = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   position: relative;
   width: 70px;
   height: 70px;
@@ -20,7 +23,7 @@ const SpinRing = styled.div`
   animation: ${spinAnimation} 0.9s linear infinite;
   :before {
     content: '';
-    background-color: ${({ theme }): string => theme.color.neutral[7]};
+    background-color: ${theme.color.neutral[7]};
     width: 36px;
     height: 36px;
     border-radius: 50%;
@@ -34,7 +37,7 @@ const SpinBall = styled.span`
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background-color: ${({ theme }): string => theme.color.primary[3]};
+  background-color: ${theme.color.primary[3]};
 `;
 
 export const Spinner = (): JSX.Element => (
diff --git a/packages/adena-extension/src/components/atoms/search-input/search-input.styles.ts b/packages/adena-extension/src/components/atoms/search-input/search-input.styles.ts
index bb2fbc76..fbe40597 100644
--- a/packages/adena-extension/src/components/atoms/search-input/search-input.styles.ts
+++ b/packages/adena-extension/src/components/atoms/search-input/search-input.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const SearchInputWrapper = styled.div`
   display: flex;
@@ -10,7 +11,7 @@ export const SearchInputWrapper = styled.div`
   align-items: center;
   justify-content: flex-start;
   border-radius: 30px;
-  border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  border: 1px solid ${theme.color.neutral[6]};
 
   .search-icon-wrapper {
     display: inline-flex;
@@ -34,7 +35,7 @@ export const SearchInputWrapper = styled.div`
 
     .search-input {
       width: 100%;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+      ${fonts.body2Reg};
     }
   }
 
diff --git a/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx b/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx
index 5f91a024..ad87dfea 100644
--- a/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx
+++ b/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
+
+import theme, { fonts } from '@styles/theme';
 
 interface SecureTextareaProps {
   value: string;
@@ -14,7 +16,7 @@ const StyledWrapper = styled.div<{ error: boolean }>`
   height: 140px;
   border: 1px solid
     ${({ error, theme }): string => (error ? theme.color.red[2] : theme.color.neutral[6])};
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   border-radius: 18px;
   overflow-y: auto;
   padding: 14px 16px 8px;
@@ -22,7 +24,7 @@ const StyledWrapper = styled.div<{ error: boolean }>`
 `;
 
 const StyledTextarea = styled.textarea`
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+  ${fonts.body2Reg};
   width: 100%;
   word-wrap: break-word;
   background-color: inherit;
diff --git a/packages/adena-extension/src/components/atoms/skeleton-box/index.tsx b/packages/adena-extension/src/components/atoms/skeleton-box/index.tsx
index 4ffc5276..07b71325 100644
--- a/packages/adena-extension/src/components/atoms/skeleton-box/index.tsx
+++ b/packages/adena-extension/src/components/atoms/skeleton-box/index.tsx
@@ -1,3 +1,4 @@
+import theme from '@styles/theme';
 import styled, { keyframes } from 'styled-components';
 
 const pulseKeyframe = keyframes`
@@ -15,7 +16,7 @@ const pulseKeyframe = keyframes`
 export const SkeletonBoxStyle = styled.div`
   & {
     position: relative;
-    background-color: ${({ theme }): string => theme.color.neutral[6]};
+    background-color: ${theme.color.neutral[6]};
     border-radius: 18px;
     padding: 0px 17px 0px 14px;
     overflow: hidden;
diff --git a/packages/adena-extension/src/components/atoms/static-multi-tooltip/index.tsx b/packages/adena-extension/src/components/atoms/static-multi-tooltip/index.tsx
index 72085a73..28c1242e 100644
--- a/packages/adena-extension/src/components/atoms/static-multi-tooltip/index.tsx
+++ b/packages/adena-extension/src/components/atoms/static-multi-tooltip/index.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
 import { Text } from '@components/atoms';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 interface TooltipProps {
   bgColor?: string;
@@ -15,7 +18,7 @@ interface StaticTooltipProps extends TooltipProps {
 }
 
 const Tooltip = styled.div<TooltipProps>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   width: 171px;
   height: auto;
   visibility: hidden;
@@ -33,7 +36,7 @@ const Tooltip = styled.div<TooltipProps>`
     width: 100%;
     height: 26px;
     padding: 2px 25px;
-    border-bottom: 1px solid ${({ theme }): string => theme.color.neutral[9]};
+    border-bottom: 1px solid ${theme.color.neutral[9]};
 
     &:last-child {
       border-bottom: none;
diff --git a/packages/adena-extension/src/components/atoms/status-dot/index.tsx b/packages/adena-extension/src/components/atoms/status-dot/index.tsx
index a35f3c6c..2d4ff294 100644
--- a/packages/adena-extension/src/components/atoms/status-dot/index.tsx
+++ b/packages/adena-extension/src/components/atoms/status-dot/index.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
 import { Text } from '@components/atoms';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 interface StatusDotProps {
   status: boolean;
@@ -23,13 +26,13 @@ const Dot = styled.div<{ status: boolean }>`
 `;
 
 const Tooltip = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   width: max-content;
   height: 25px;
   visibility: hidden;
   z-index: 1;
   padding: 0px 17px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   border-radius: 13px;
   position: absolute;
   right: 0px;
diff --git a/packages/adena-extension/src/components/atoms/sub-header/sub-header.styles.ts b/packages/adena-extension/src/components/atoms/sub-header/sub-header.styles.ts
index cd0d4641..440c0f71 100644
--- a/packages/adena-extension/src/components/atoms/sub-header/sub-header.styles.ts
+++ b/packages/adena-extension/src/components/atoms/sub-header/sub-header.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const SubHeaderWrapper = styled.div`
   position: relative;
@@ -32,6 +33,6 @@ export const SubHeaderWrapper = styled.div`
   }
 
   .title-wrapper {
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.header4}
+    ${fonts.header4}
   }
 `;
diff --git a/packages/adena-extension/src/components/atoms/tab-container/index.tsx b/packages/adena-extension/src/components/atoms/tab-container/index.tsx
index 00816d1f..26d2e8de 100644
--- a/packages/adena-extension/src/components/atoms/tab-container/index.tsx
+++ b/packages/adena-extension/src/components/atoms/tab-container/index.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 interface Props {
   header: React.ReactNode;
@@ -18,18 +21,18 @@ export const TabContainer = ({ header, children }: Props): JSX.Element => {
 };
 
 const Container = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'center')};
+  ${mixins.flex('column', 'center', 'center')};
   width: 100vw;
   height: 100vh;
   margin-top: -48px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
 `;
 
 const Wrapper = styled.div`
   position: relative;
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'center')};
+  ${mixins.flex('column', 'center', 'center')};
   width: 360px;
   height: 540px;
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  background-color: ${theme.color.neutral[7]};
   z-index: 2;
 `;
diff --git a/packages/adena-extension/src/components/atoms/warning-box/index.tsx b/packages/adena-extension/src/components/atoms/warning-box/index.tsx
index 2afac809..75c7da33 100644
--- a/packages/adena-extension/src/components/atoms/warning-box/index.tsx
+++ b/packages/adena-extension/src/components/atoms/warning-box/index.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
-import styled, { CSSProp, CSSProperties } from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
+
 import { Text } from '@components/atoms';
 import theme from '@styles/theme';
+import mixins from '@styles/mixins';
 
 type WarningKeyType =
   | 'revealPassword'
@@ -73,7 +75,7 @@ export const WarningBox = ({ type, margin, padding }: WarningBoxProps): JSX.Elem
 };
 
 const Wrapper = styled.div<WarningBoxStyleProps>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'space-between')};
+  ${mixins.flex('column', 'flex-start', 'space-between')};
   width: 100%;
   padding: ${(props): CSSProperties['padding'] => props.padding ?? '14px 16px'};
   gap: 11px;
diff --git a/packages/adena-extension/src/components/molecules/approve-injection-loading/approve-injection-loading.styles.ts b/packages/adena-extension/src/components/molecules/approve-injection-loading/approve-injection-loading.styles.ts
index 3cd278f0..5debcabd 100644
--- a/packages/adena-extension/src/components/molecules/approve-injection-loading/approve-injection-loading.styles.ts
+++ b/packages/adena-extension/src/components/molecules/approve-injection-loading/approve-injection-loading.styles.ts
@@ -1,4 +1,6 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
+
+import theme, { fonts } from '@styles/theme';
 
 export const ApproveInjectionLoadingWrapper = styled.div`
   display: flex;
@@ -11,13 +13,13 @@ export const ApproveInjectionLoadingWrapper = styled.div`
 
   .description {
     margin-top: 23px;
-    color: ${({ theme }): string => theme.color.neutral[0]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.header4}
+    color: ${theme.color.neutral[0]};
+    ${fonts.header4}
   }
 
   .sub-description {
     margin-top: 12px;
-    color: ${({ theme }): string => theme.color.neutral[9]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Reg}
+    color: ${theme.color.neutral[9]};
+    ${fonts.body1Reg}
   }
 `;
diff --git a/packages/adena-extension/src/components/molecules/approve-ledger-loading/approve-ledger-loading.styles.ts b/packages/adena-extension/src/components/molecules/approve-ledger-loading/approve-ledger-loading.styles.ts
index d58c4516..74f528de 100644
--- a/packages/adena-extension/src/components/molecules/approve-ledger-loading/approve-ledger-loading.styles.ts
+++ b/packages/adena-extension/src/components/molecules/approve-ledger-loading/approve-ledger-loading.styles.ts
@@ -1,7 +1,9 @@
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
+import mixins from '@styles/mixins';
 
 export const ApproveLedgerLoadingWrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   height: calc(100vh - 48px);
   padding: 50px 20px 24px;
   align-self: center;
diff --git a/packages/adena-extension/src/components/molecules/approve-loading/approve-loading.styles.ts b/packages/adena-extension/src/components/molecules/approve-loading/approve-loading.styles.ts
index 13ffd9a0..bd2a9470 100644
--- a/packages/adena-extension/src/components/molecules/approve-loading/approve-loading.styles.ts
+++ b/packages/adena-extension/src/components/molecules/approve-loading/approve-loading.styles.ts
@@ -1,9 +1,11 @@
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { SkeletonBoxStyle } from '@components/atoms';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 export const ApproveLoadingWrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   padding: 35px 20px 0;
   .l-approve {
     margin-top: 51px;
@@ -12,7 +14,7 @@ export const ApproveLoadingWrapper = styled.div`
 `;
 
 export const ApproveLoadingSkeletonBox = styled(SkeletonBoxStyle)`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-end', 'space-between')}
+  ${mixins.flex('column', 'flex-end', 'space-between')}
   width: 80px;
   height: 80px;
   margin: 35px 0px 24px;
@@ -20,10 +22,10 @@ export const ApproveLoadingSkeletonBox = styled(SkeletonBoxStyle)`
 `;
 
 export const ApproveLoadingRoundedBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   height: 41px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   padding: 0px 18px;
 `;
 
diff --git a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
index 3b28a7e4..5180e25d 100644
--- a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
+++ b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
@@ -1,18 +1,21 @@
-import styled, { CSSProp, FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
+
+import mixins from '@styles/mixins';
+import theme, { fonts } from '@styles/theme';
 
 export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean }>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   padding: 0 20px;
   margin-bottom: 96px;
   align-self: center;
 
   .row {
-    ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+    ${mixins.flex('row', 'center', 'center')};
     position: relative;
     padding: 10px 18px;
     justify-content: space-between;
-    border-bottom: 2px solid ${({ theme }): string => theme.color.neutral[7]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Reg};
+    border-bottom: 2px solid ${theme.color.neutral[7]};
+    ${fonts.body1Reg};
 
     &:last-child {
       border-bottom: none;
@@ -22,7 +25,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
       display: inline-flex;
       width: fit-content;
       flex-shrink: 0;
-      color: ${({ theme }): string => theme.color.neutral[9]};
+      color: ${theme.color.neutral[9]};
     }
 
     .value {
@@ -56,14 +59,14 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
   }
 
   .domain-wrapper {
-    ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+    ${mixins.flex('row', 'center', 'center')};
     width: 100%;
     min-height: 41px;
     border-radius: 24px;
     padding: 10px 18px;
     margin-bottom: 8px;
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+    background-color: ${theme.color.neutral[8]};
+    ${fonts.body2Reg};
   }
 
   .info-table {
@@ -71,7 +74,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     height: auto;
     border-radius: 18px;
     margin-bottom: 8px;
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
+    background-color: ${theme.color.neutral[8]};
   }
 
   .fee-amount-wrapper {
@@ -80,9 +83,9 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     border-radius: 30px;
     padding: 10px 18px;
     margin-bottom: 8px;
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
-    border: 1px solid ${({ theme }): string => theme.color.neutral[7]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+    background-color: ${theme.color.neutral[8]};
+    border: 1px solid ${theme.color.neutral[7]};
+    ${fonts.body2Reg};
     ${({ isErrorNetworkFee, theme }): string | false =>
       isErrorNetworkFee && `border-color: ${theme.color.red[2]};`}
   }
@@ -91,20 +94,20 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     position: relative;
     width: 100%;
     padding: 0 16px;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.captionReg};
+    ${fonts.captionReg};
     height: 14px;
     margin-top: -5px;
     margin-bottom: 10px;
-    color: ${({ theme }): string => theme.color.red[2]};
+    color: ${theme.color.red[2]};
   }
 
   .transaction-data-wrapper {
     width: 100%;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Reg};
-    ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'center')};
+    ${fonts.body1Reg};
+    ${mixins.flex('column', 'center', 'center')};
 
     .visible-button {
-      color: ${({ theme }): string => theme.color.neutral[9]};
+      color: ${theme.color.neutral[9]};
       height: fit-content;
       margin-bottom: 5px;
 
@@ -116,15 +119,15 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
       width: 100%;
       height: 120px;
       border-radius: 24px;
-      background-color: ${({ theme }): string => theme.color.neutral[8]};
-      border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+      background-color: ${theme.color.neutral[8]};
+      border: 1px solid ${theme.color.neutral[6]};
       padding: 12px 16px;
     }
     .raw-info-textarea {
       width: 100%;
       height: 100%;
       overflow: auto;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+      ${fonts.body2Reg};
       resize: none;
     }
     .raw-info-textarea::-webkit-scrollbar {
diff --git a/packages/adena-extension/src/components/molecules/bottom-fixed-button-group/index.tsx b/packages/adena-extension/src/components/molecules/bottom-fixed-button-group/index.tsx
index 506bf914..2fc05f2f 100644
--- a/packages/adena-extension/src/components/molecules/bottom-fixed-button-group/index.tsx
+++ b/packages/adena-extension/src/components/molecules/bottom-fixed-button-group/index.tsx
@@ -1,6 +1,8 @@
 import React, { ReactElement, useCallback, useMemo } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { Text, Button } from '@components/atoms';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 interface ButtonProps {
   primary?: boolean;
@@ -53,7 +55,7 @@ export const BottomFixedButtonGroup = ({
 };
 
 const ButtonWrap = styled.div<{ filled?: boolean }>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'flex-start', 'center')};
+  ${mixins.flex('row', 'flex-start', 'center')};
   position: fixed;
   left: 0px;
   width: 100%;
@@ -69,32 +71,32 @@ const ButtonWrap = styled.div<{ filled?: boolean }>`
 
   & > button {
     margin-right: 10px;
-    background-color: ${({ theme }): string => theme.color.neutral[4]};
+    background-color: ${theme.color.neutral[4]};
 
     &:last-child {
       margin-right: 0;
     }
 
     &:hover:not(.disabled) {
-      background-color: ${({ theme }): string => theme.color.neutral[5]};
+      background-color: ${theme.color.neutral[5]};
     }
 
     &.primary {
-      background-color: ${({ theme }): string => theme.color.primary[3]};
+      background-color: ${theme.color.primary[3]};
 
       &:hover:not(.disabled) {
-        background-color: ${({ theme }): string => theme.color.primary[4]};
+        background-color: ${theme.color.primary[4]};
       }
     }
   }
 
   & > button.disabled {
     cursor: default;
-    color: ${({ theme }): string => theme.color.neutral[4]};
-    background-color: ${({ theme }): string => theme.color.neutral[6]};
+    color: ${theme.color.neutral[4]};
+    background-color: ${theme.color.neutral[6]};
 
     &.primary {
-      background-color: ${({ theme }): string => theme.color.primary[6]};
+      background-color: ${theme.color.primary[6]};
     }
   }
 `;
diff --git a/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx b/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx
index 468529c0..6f58de28 100644
--- a/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx
@@ -1,7 +1,9 @@
 import React, { useCallback } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Button, Text, ButtonHierarchy } from '@components/atoms';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 interface BottomFixedButtonProps {
   hierarchy?: ButtonHierarchy;
@@ -28,7 +30,7 @@ export const BottomFixedButton = ({
 };
 
 const ButtonWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   position: fixed;
   bottom: 0px;
   left: 0px;
@@ -36,6 +38,6 @@ const ButtonWrap = styled.div`
   height: 96px;
   padding: 0px 20px;
   box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  background-color: ${theme.color.neutral[7]};
   z-index: 1;
 `;
diff --git a/packages/adena-extension/src/components/molecules/cancel-and-confirm-button/index.tsx b/packages/adena-extension/src/components/molecules/cancel-and-confirm-button/index.tsx
index 686a2540..689ed7ac 100644
--- a/packages/adena-extension/src/components/molecules/cancel-and-confirm-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/cancel-and-confirm-button/index.tsx
@@ -1,7 +1,8 @@
 import React, { ReactElement } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import mixins from '@styles/mixins';
 
 interface DefaultButtonProps {
   onClick: () => void;
@@ -20,7 +21,7 @@ interface CancelAndConfirmLocation {
 
 const Wrapper = styled.div`
   margin-top: auto;
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   gap: 10px;
 `;
diff --git a/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx b/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx
index 83fa9ebf..8a2683a0 100644
--- a/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 interface Props {
   onClick: () => void;
@@ -18,7 +20,7 @@ export const CloseShadowButton = ({ onClick }: Props): JSX.Element => {
 };
 
 const ButtonWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   position: fixed;
   bottom: 0px;
   left: 0px;
@@ -26,6 +28,6 @@ const ButtonWrap = styled.div`
   height: 96px;
   padding: 0px 20px;
   box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  background-color: ${theme.color.neutral[7]};
   z-index: 1;
 `;
diff --git a/packages/adena-extension/src/components/molecules/double-button/index.tsx b/packages/adena-extension/src/components/molecules/double-button/index.tsx
index ec8f045f..2394067d 100644
--- a/packages/adena-extension/src/components/molecules/double-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/double-button/index.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { FontsType } from '@styles/theme';
 import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import mixins from '@styles/mixins';
 
 interface ButtonProps {
   onClick: () => void;
@@ -23,7 +24,7 @@ interface DoubleButtonProps extends WrapperStyleProps {
 }
 
 const Wrapper = styled.div<WrapperStyleProps>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   gap: 10px;
   ${({ margin }): string | undefined => margin && `margin: ${margin}`};
diff --git a/packages/adena-extension/src/components/molecules/error-container/error-network.tsx b/packages/adena-extension/src/components/molecules/error-container/error-network.tsx
index bd52f325..359e6a0d 100644
--- a/packages/adena-extension/src/components/molecules/error-container/error-network.tsx
+++ b/packages/adena-extension/src/components/molecules/error-container/error-network.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import IconConnectFail from '@assets/connect-fail-permission.svg';
 import { TitleWithDesc } from '@components/molecules';
+import mixins from '@styles/mixins';
 
 const Container = styled.main`
   display: flex;
@@ -12,7 +13,7 @@ const Container = styled.main`
 `;
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   position: relative;
   width: 100%;
   gap: 16px;
diff --git a/packages/adena-extension/src/components/molecules/ghost-button/index.tsx b/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
index a7854ca4..2248c5c1 100644
--- a/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Button, ButtonHierarchy } from '@components/atoms';
+import mixins from '@styles/mixins';
+import theme, { fonts } from '@styles/theme';
 
 interface GhostButtonsProps {
   left: string;
@@ -10,16 +12,16 @@ interface GhostButtonsProps {
 }
 
 const GhostBtnWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   gap: 10px;
 `;
 
 const GhostBtn = styled(Button)`
-  ${({ theme }): CSSProp => theme.fonts.body1Bold};
+  ${fonts.body1Bold};
   transition: all 0.4s ease;
   :disabled {
-    color: ${({ theme }): string => theme.color.neutral[3]};
+    color: ${theme.color.neutral[3]};
     border: none;
   }
 `;
diff --git a/packages/adena-extension/src/components/molecules/loading-nft/index.tsx b/packages/adena-extension/src/components/molecules/loading-nft/index.tsx
index d3989528..c9de151e 100644
--- a/packages/adena-extension/src/components/molecules/loading-nft/index.tsx
+++ b/packages/adena-extension/src/components/molecules/loading-nft/index.tsx
@@ -1,16 +1,18 @@
 import React, { ReactElement } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
 import { Loading, SkeletonBoxStyle } from '@components/atoms';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   position: relative;
   width: 100%;
   gap: 16px;
 `;
 
 const ListBoxWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'flex-start')}
+  ${mixins.flex('row', 'center', 'flex-start')}
   width: 100%;
   gap: 16px;
   :first-child {
@@ -19,7 +21,7 @@ const ListBoxWrap = styled.div`
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-end', 'space-between')}
+  ${mixins.flex('column', 'flex-end', 'space-between')}
   width: 100%;
   flex: 1;
   height: 152px;
diff --git a/packages/adena-extension/src/components/molecules/seed-box/index.tsx b/packages/adena-extension/src/components/molecules/seed-box/index.tsx
index 3fb7454b..ee29cb2f 100644
--- a/packages/adena-extension/src/components/molecules/seed-box/index.tsx
+++ b/packages/adena-extension/src/components/molecules/seed-box/index.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { Text, BlurScreen } from '../../atoms';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 interface SeedScrollBoxProps {
   seeds: string[];
@@ -14,8 +16,8 @@ const Wrapper = styled.div`
   position: relative;
   width: 100%;
   height: 140px;
-  border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  border: 1px solid ${theme.color.neutral[6]};
+  background-color: ${theme.color.neutral[8]};
   border-radius: 18px;
   padding: 8px;
 `;
@@ -29,7 +31,7 @@ const Inner = styled.div`
   gap: 20px;
   padding: 10px 18px;
   .seed-text {
-    ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')}
+    ${mixins.flex('row', 'center', 'center')}
   }
 `;
 
diff --git a/packages/adena-extension/src/components/molecules/seed-view-and-copy/index.tsx b/packages/adena-extension/src/components/molecules/seed-view-and-copy/index.tsx
index e720ff33..3f6f906c 100644
--- a/packages/adena-extension/src/components/molecules/seed-view-and-copy/index.tsx
+++ b/packages/adena-extension/src/components/molecules/seed-view-and-copy/index.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, Button, Copy } from '@components/atoms';
 import theme from '@styles/theme';
+import mixins from '@styles/mixins';
 
 interface SeedViewAndCopyProps {
   showBlurScreen: boolean;
@@ -32,19 +33,19 @@ export const SeedViewAndCopy = ({
 };
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   margin: 12px auto auto;
   padding: 0px 45px;
 `;
 
 const ButtonStyle = styled(Button)`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   height: 25px;
   border-radius: 12.5px;
   padding: 0px 12px;
   transition: background-color 0.4s ease;
   &:hover {
-    background-color: ${({ theme }): string => theme.color.neutral[11]};
+    background-color: ${theme.color.neutral[11]};
   }
 `;
diff --git a/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx b/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx
index 3ccbcc90..5fed18f2 100644
--- a/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx
+++ b/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
-import styled, { CSSProp, FlattenSimpleInterpolation } from 'styled-components';
+import styled, { CSSProp } from 'styled-components';
+
 import checkOff from '@assets/check-off.svg';
 import checkOn from '@assets/check-on.svg';
+import mixins from '@styles/mixins';
+import theme, { fonts } from '@styles/theme';
 
 type CheckboxPos = 'CENTER' | 'TOP' | ' BOTTOM';
 interface TermsCheckboxProps {
@@ -16,14 +19,14 @@ interface TermsCheckboxProps {
 }
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'flex-start')};
+  ${mixins.flex('row', 'center', 'flex-start')};
   width: 100%;
   margin: auto 0px 10px;
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+  ${fonts.body2Reg};
 `;
 
 const Label = styled.label<{ checkboxPos: CheckboxPos }>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'flex-start')};
+  ${mixins.flex('row', 'center', 'flex-start')};
   position: relative;
   padding-left: 32px;
   cursor: pointer;
@@ -45,7 +48,7 @@ const Label = styled.label<{ checkboxPos: CheckboxPos }>`
   &,
   * {
     font: inherit;
-    color: ${({ theme }): string => theme.color.neutral[9]};
+    color: ${theme.color.neutral[9]};
   }
 `;
 
diff --git a/packages/adena-extension/src/components/molecules/transaction-history/loading-history/index.tsx b/packages/adena-extension/src/components/molecules/transaction-history/loading-history/index.tsx
index 8cf96245..14aace61 100644
--- a/packages/adena-extension/src/components/molecules/transaction-history/loading-history/index.tsx
+++ b/packages/adena-extension/src/components/molecules/transaction-history/loading-history/index.tsx
@@ -1,28 +1,30 @@
 import React, { ReactElement } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
 import { Loading, SkeletonBoxStyle } from '@components/atoms';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   position: relative;
   width: 100%;
   z-index: 1;
 `;
 
 const RoundsBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-end', 'center')};
+  ${mixins.flex('column', 'flex-end', 'center')};
   margin-left: auto;
 `;
 
 const ListBoxWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')}
+  ${mixins.flex('column', 'center', 'flex-start')}
   width: 100%;
   gap: 12px;
   padding-top: 12px;
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'flex-start')}
+  ${mixins.flex('row', 'center', 'flex-start')}
   width: 100%;
   height: 60px;
 `;
diff --git a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.styles.ts b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.styles.ts
index 946f77a7..9a78808a 100644
--- a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.styles.ts
+++ b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const TransactionHistoryListItemWrapper = styled.div`
   display: flex;
@@ -7,13 +8,13 @@ export const TransactionHistoryListItemWrapper = styled.div`
   height: 60px;
   padding: 12px 14px;
   align-items: center;
-  background-color: ${({ theme }): string => theme.color.neutral[6]};
+  background-color: ${theme.color.neutral[6]};
   border-radius: 18px;
   cursor: pointer;
   transition: 0.2s;
 
   :hover {
-    background-color: ${({ theme }): string => theme.color.neutral[11]};
+    background-color: ${theme.color.neutral[11]};
   }
 
   & + & {
@@ -52,11 +53,11 @@ export const TransactionHistoryListItemWrapper = styled.div`
     .title {
       display: inline-flex;
       align-items: center;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body3Bold};
+      ${fonts.body3Bold};
       line-height: 18px;
 
       &.extend {
-        ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Bold};
+        ${fonts.body2Bold};
       }
 
       .info {
@@ -67,14 +68,14 @@ export const TransactionHistoryListItemWrapper = styled.div`
       }
 
       .extra-info {
-        ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body4Bold};
+        ${fonts.body4Bold};
         margin-left: 5px;
       }
     }
 
     .description {
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body3Reg};
-      color: ${({ theme }): string => theme.color.neutral[9]};
+      ${fonts.body3Reg};
+      color: ${theme.color.neutral[9]};
       line-height: 18px;
     }
   }
@@ -91,15 +92,15 @@ export const TransactionHistoryListItemWrapper = styled.div`
     word-break: break-all;
 
     .value.more {
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+      ${fonts.body2Reg};
     }
 
     &.active div * {
-      color: ${({ theme }): string => theme.color.green[2]};
+      color: ${theme.color.green[2]};
     }
 
     &.blur div * {
-      color: ${({ theme }): string => theme.color.neutral[9]};
+      color: ${theme.color.neutral[9]};
     }
   }
 `;
diff --git a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list/transaction-history-list.styles.ts b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list/transaction-history-list.styles.ts
index 2c3e21e8..2ae4bab8 100644
--- a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list/transaction-history-list.styles.ts
+++ b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list/transaction-history-list.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const TransactionHistoryListWrapper = styled.div`
   display: flex;
@@ -7,8 +8,8 @@ export const TransactionHistoryListWrapper = styled.div`
   height: auto;
 
   & > .title {
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Reg};
-    color: ${({ theme }): string => theme.color.neutral[9]};
+    ${fonts.body1Reg};
+    color: ${theme.color.neutral[9]};
   }
 
   & > .list-wrapper {
diff --git a/packages/adena-extension/src/components/molecules/underline-text-button/underline-text-button.styles.ts b/packages/adena-extension/src/components/molecules/underline-text-button/underline-text-button.styles.ts
index f1396e7d..caa15744 100644
--- a/packages/adena-extension/src/components/molecules/underline-text-button/underline-text-button.styles.ts
+++ b/packages/adena-extension/src/components/molecules/underline-text-button/underline-text-button.styles.ts
@@ -1,4 +1,6 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
+
+import theme, { fonts } from '@styles/theme';
 
 export const UnderlineTextButtonWrapper = styled.div`
   display: flex;
@@ -17,8 +19,8 @@ export const UnderlineTextButtonWrapper = styled.div`
   }
 
   .title {
-    color: ${({ theme }): string => theme.color.neutral[9]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Reg};
+    color: ${theme.color.neutral[9]};
+    ${fonts.body1Reg};
     white-space: pre;
     text-decoration: underline;
   }
diff --git a/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts b/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts
index be0f90a5..1528e2c1 100644
--- a/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts
+++ b/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const AccountDetailsWrapper = styled.div`
   display: flex;
@@ -35,7 +36,7 @@ export const AccountDetailsWrapper = styled.div`
       flex-direction: row;
       width: 100%;
       height: 42px;
-      background-color: ${({ theme }): string => theme.color.neutral[8]};
+      background-color: ${theme.color.neutral[8]};
       margin-top: 12px;
       padding: 12px 18px 12px 16px;
       border-radius: 18px;
@@ -46,7 +47,7 @@ export const AccountDetailsWrapper = styled.div`
         display: block;
         width: 100%;
         margin-right: 8px;
-        ${({ theme }): FlattenSimpleInterpolation => theme.fonts.light1Reg}
+        ${fonts.light1Reg}
         overflow: hidden;
         text-overflow: ellipsis;
       }
diff --git a/packages/adena-extension/src/components/pages/account-details/account-name-input/account-name-input.styles.ts b/packages/adena-extension/src/components/pages/account-details/account-name-input/account-name-input.styles.ts
index 28fb6ddc..01758a66 100644
--- a/packages/adena-extension/src/components/pages/account-details/account-name-input/account-name-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/account-details/account-name-input/account-name-input.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const AccountNameInputWrapper = styled.div`
   display: flex;
@@ -6,8 +7,8 @@ export const AccountNameInputWrapper = styled.div`
   width: 150px;
   height: auto;
   padding: 12.5px 16px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
-  border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  background-color: ${theme.color.neutral[8]};
+  border: 1px solid ${theme.color.neutral[6]};
   border-radius: 18px;
   transition: 0.2s;
   justify-content: center;
@@ -22,7 +23,7 @@ export const AccountNameInputWrapper = styled.div`
     flex-shrink: 1;
     width: 100%;
     overflow: hidden;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg}
+    ${fonts.body2Reg}
 
     &:not(:focus) {
       text-overflow: ellipsis;
@@ -47,7 +48,7 @@ export const AccountNameInputWrapper = styled.div`
 
     &:hover {
       svg * {
-        fill: ${({ theme }): string => theme.color.neutral[0]};
+        fill: ${theme.color.neutral[0]};
       }
     }
   }
diff --git a/packages/adena-extension/src/components/pages/additional-token/additional-token-info/additional-token-info.styles.ts b/packages/adena-extension/src/components/pages/additional-token/additional-token-info/additional-token-info.styles.ts
index 88354b41..3830f421 100644
--- a/packages/adena-extension/src/components/pages/additional-token/additional-token-info/additional-token-info.styles.ts
+++ b/packages/adena-extension/src/components/pages/additional-token/additional-token-info/additional-token-info.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const AdditionalTokenInfoWrapper = styled.div`
   display: flex;
@@ -13,7 +14,7 @@ export const AdditionalTokenInfoItemWrapper = styled.div`
   width: 100%;
   height: 48px;
   padding: 13px 16px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   border-radius: 30px;
   align-items: center;
   justify-content: space-between;
@@ -25,15 +26,15 @@ export const AdditionalTokenInfoItemWrapper = styled.div`
   .title {
     display: inline-flex;
     flex-shrink: 0;
-    color: ${({ theme }): string => theme.color.neutral[9]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+    color: ${theme.color.neutral[9]};
+    ${fonts.body2Reg};
   }
 
   .value {
     display: inline-block;
     max-width: 155px;
-    color: ${({ theme }): string => theme.color.neutral[0]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+    color: ${theme.color.neutral[0]};
+    ${fonts.body2Reg};
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/packages/adena-extension/src/components/pages/additional-token/additional-token-search-list/additional-token-search-list.styles.ts b/packages/adena-extension/src/components/pages/additional-token/additional-token-search-list/additional-token-search-list.styles.ts
index 7a265855..f8ff80f9 100644
--- a/packages/adena-extension/src/components/pages/additional-token/additional-token-search-list/additional-token-search-list.styles.ts
+++ b/packages/adena-extension/src/components/pages/additional-token/additional-token-search-list/additional-token-search-list.styles.ts
@@ -1,4 +1,6 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
+
+import theme, { fonts } from '@styles/theme';
 
 export const AdditionalTokenSearchListWrapper = styled.div`
   display: flex;
@@ -18,8 +20,8 @@ export const AdditionalTokenSearchListWrapper = styled.div`
     display: flex;
     width: 100%;
     margin: 40px auto 180px auto;
-    color: ${({ theme }): string => theme.color.neutral[9]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Reg};
+    color: ${theme.color.neutral[9]};
+    ${fonts.body1Reg};
     justify-content: center;
     align-items: center;
   }
@@ -36,15 +38,15 @@ export const AdditionalTokenSearchListItemWrapper = styled.div`
   cursor: pointer;
 
   &:hover {
-    background-color: ${({ theme }): string => theme.color.neutral[6]};
+    background-color: ${theme.color.neutral[6]};
   }
 
   .title {
     display: inline-block;
     flex-shrink: 0;
     max-width: calc(100% - 140px);
-    color: ${({ theme }): string => theme.color.neutral[0]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+    color: ${theme.color.neutral[0]};
+    ${fonts.body2Reg};
 
     .name {
       overflow: hidden;
@@ -58,8 +60,8 @@ export const AdditionalTokenSearchListItemWrapper = styled.div`
     display: inline-block;
     flex-shrink: 0;
     max-width: 140px;
-    color: ${({ theme }): string => theme.color.neutral[9]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg}
+    color: ${theme.color.neutral[9]};
+    ${fonts.body2Reg}
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/packages/adena-extension/src/components/pages/additional-token/additional-token-select-box/additional-token-select-box.styles.ts b/packages/adena-extension/src/components/pages/additional-token/additional-token-select-box/additional-token-select-box.styles.ts
index c79f9286..5dce48ae 100644
--- a/packages/adena-extension/src/components/pages/additional-token/additional-token-select-box/additional-token-select-box.styles.ts
+++ b/packages/adena-extension/src/components/pages/additional-token/additional-token-select-box/additional-token-select-box.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const AdditionalTokenSelectBoxWrapper = styled.div`
   position: relative;
@@ -15,8 +16,8 @@ export const AdditionalTokenSelectBoxWrapper = styled.div`
     height: auto;
     min-height: 48px;
     border-radius: 30px;
-    border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
+    border: 1px solid ${theme.color.neutral[6]};
+    background-color: ${theme.color.neutral[8]};
     overflow: hidden;
     z-index: 2;
 
@@ -38,8 +39,8 @@ export const AdditionalTokenSelectBoxWrapper = styled.div`
     .title {
       width: 100%;
       padding: 0 4px;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
-      color: ${({ theme }): string => theme.color.neutral[9]};
+      ${fonts.body2Reg};
+      color: ${theme.color.neutral[9]};
     }
 
     .icon-wrapper {
@@ -50,7 +51,7 @@ export const AdditionalTokenSelectBoxWrapper = styled.div`
 
     &.selected {
       .title {
-        color: ${({ theme }): string => theme.color.neutral[0]};
+        color: ${theme.color.neutral[0]};
       }
     }
   }
@@ -59,10 +60,10 @@ export const AdditionalTokenSelectBoxWrapper = styled.div`
     .search-input-wrapper {
       height: 48px;
       padding: 4px 5px;
-      border-top: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+      border-top: 1px solid ${theme.color.neutral[6]};
 
       & > * {
-        background-color: ${({ theme }): string => theme.color.neutral[6]};
+        background-color: ${theme.color.neutral[6]};
       }
     }
   }
diff --git a/packages/adena-extension/src/components/pages/additional-token/additional-token/additional-token.styles.ts b/packages/adena-extension/src/components/pages/additional-token/additional-token/additional-token.styles.ts
index d29d3ff5..2df3ece4 100644
--- a/packages/adena-extension/src/components/pages/additional-token/additional-token/additional-token.styles.ts
+++ b/packages/adena-extension/src/components/pages/additional-token/additional-token/additional-token.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const AdditionalTokenWrapper = styled.div`
   position: relative;
@@ -39,7 +40,7 @@ export const AdditionalTokenWrapper = styled.div`
       border-radius: 30px;
       align-items: center;
       justify-content: center;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Bold}
+      ${fonts.body1Bold}
       transition: 0.2s;
 
       &:last-child {
@@ -47,23 +48,23 @@ export const AdditionalTokenWrapper = styled.div`
       }
 
       &.cancel-button {
-        background-color: ${({ theme }): string => theme.color.neutral[4]};
+        background-color: ${theme.color.neutral[4]};
 
         :hover {
-          background-color: ${({ theme }): string => theme.color.neutral[5]};
+          background-color: ${theme.color.neutral[5]};
         }
       }
 
       &.add-button {
-        background-color: ${({ theme }): string => theme.color.primary[3]};
+        background-color: ${theme.color.primary[3]};
 
         &:hover {
-          background-color: ${({ theme }): string => theme.color.primary[4]};
+          background-color: ${theme.color.primary[4]};
         }
 
         &.disabled {
-          color: ${({ theme }): string => theme.color.neutral[4]};
-          background-color: ${({ theme }): string => theme.color.primary[6]};
+          color: ${theme.color.neutral[4]};
+          background-color: ${theme.color.primary[6]};
           cursor: default;
         }
       }
diff --git a/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network-table/approve-adding-network-table.styles.ts b/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network-table/approve-adding-network-table.styles.ts
index 1620c1cf..ddbf0a59 100644
--- a/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network-table/approve-adding-network-table.styles.ts
+++ b/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network-table/approve-adding-network-table.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const ApproveAddingNetworkTableWrapper = styled.div`
   display: flex;
@@ -11,7 +12,7 @@ export const ApproveAddingNetworkTableWrapper = styled.div`
     display: flex;
     flex-direction: column;
     padding: 8px 16px;
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
+    background-color: ${theme.color.neutral[8]};
     margin-bottom: 2px;
 
     &:first-child {
@@ -26,14 +27,14 @@ export const ApproveAddingNetworkTableWrapper = styled.div`
     }
 
     .title {
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Reg};
-      color: ${({ theme }): string => theme.color.neutral[9]};
+      ${fonts.body1Reg};
+      color: ${theme.color.neutral[9]};
       margin-bottom: 4px;
     }
 
     .value {
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Reg};
-      color: ${({ theme }): string => theme.color.neutral[0]};
+      ${fonts.body1Reg};
+      color: ${theme.color.neutral[0]};
       word-break: break-all;
     }
   }
diff --git a/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network-item/approve-changing-network-item.styles.ts b/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network-item/approve-changing-network-item.styles.ts
index 44bdb9b2..0a135245 100644
--- a/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network-item/approve-changing-network-item.styles.ts
+++ b/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network-item/approve-changing-network-item.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const ApproveChangingNetworkItemWrapper = styled.div`
   display: flex;
@@ -19,7 +20,7 @@ export const ApproveChangingNetworkItemWrapper = styled.div`
     display: flex;
     width: 100px;
     padding: 5px 8px;
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
+    background-color: ${theme.color.neutral[8]};
     border-radius: 8px;
     text-align: center;
     justify-content: center;
@@ -27,8 +28,8 @@ export const ApproveChangingNetworkItemWrapper = styled.div`
     .chain-name {
       display: -webkit-box;
       width: 100%;
-      color: ${({ theme }): string => theme.color.neutral[0]};
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+      color: ${theme.color.neutral[0]};
+      ${fonts.body2Reg};
       font-weight: 500;
       text-align: center;
       justify-content: center;
diff --git a/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts b/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts
index 7b73a2b1..0c44a41b 100644
--- a/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts
+++ b/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts
@@ -1,9 +1,11 @@
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
 import check from '@assets/check-circle.svg';
-import { FlattenSimpleInterpolation } from 'styled-components';
+import mixins from '@styles/mixins';
+import theme, { fonts } from '@styles/theme';
 
 export const WalletConnectWrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   padding: 0 20px;
   align-self: center;
 
@@ -29,37 +31,37 @@ export const WalletConnectWrapper = styled.div`
   }
 
   .domain-wrapper {
-    ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+    ${mixins.flex('row', 'center', 'center')};
     width: 100%;
     min-height: 41px;
     border-radius: 24px;
     padding: 10px 18px;
     margin-bottom: 12px;
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+    background-color: ${theme.color.neutral[8]};
+    ${fonts.body2Reg};
   }
 
   .info-table {
     width: 100%;
     height: auto;
     border-radius: 18px;
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
+    background-color: ${theme.color.neutral[8]};
 
     .info-table-header {
-      ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'center')};
+      ${mixins.flex('column', 'flex-start', 'center')};
       width: 100%;
       padding: 12px;
-      color: ${({ theme }): string => theme.color.neutral[9]};
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Bold};
-      border-bottom: 2px solid ${({ theme }): string => theme.color.neutral[7]};
+      color: ${theme.color.neutral[9]};
+      ${fonts.body2Bold};
+      border-bottom: 2px solid ${theme.color.neutral[7]};
     }
 
     .info-table-body {
-      ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'center')};
+      ${mixins.flex('column', 'flex-start', 'center')};
       width: 100%;
       padding: 12px;
       gap: 8px;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+      ${fonts.body2Reg};
 
       .row {
         position: relative;
@@ -69,22 +71,22 @@ export const WalletConnectWrapper = styled.div`
           width: 16px;
           height: 16px;
           background-image: url(${check});
-          ${({ theme }): CSSProp => theme.mixins.posTopCenterLeft()}
+          ${mixins.posTopCenterLeft()}
         }
       }
     }
   }
 
   .description-wrapper {
-    ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'center')};
+    ${mixins.flex('column', 'flex-start', 'center')};
     padding: 4px 0;
     margin-bottom: 43px;
-    color: ${({ theme }): string => theme.color.neutral[9]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.captionReg};
+    color: ${theme.color.neutral[9]};
+    ${fonts.captionReg};
   }
 
   .button-wrapper {
-    ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'flex-start', 'center')};
+    ${mixins.flex('row', 'flex-start', 'center')};
     width: 100%;
     margin-bottom: 24px;
     gap: 10px;
@@ -93,15 +95,15 @@ export const WalletConnectWrapper = styled.div`
       width: 100%;
       height: 48px;
       border-radius: 30px;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Bold};
+      ${fonts.body1Bold};
     }
 
     button.cancel {
-      background-color: ${({ theme }): string => theme.color.neutral[4]};
+      background-color: ${theme.color.neutral[4]};
     }
 
     button.connect {
-      background-color: ${({ theme }): string => theme.color.primary[3]};
+      background-color: ${theme.color.primary[3]};
     }
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/change-network/loading-change-network/index.tsx b/packages/adena-extension/src/components/pages/change-network/loading-change-network/index.tsx
index f39069c7..7d239de8 100644
--- a/packages/adena-extension/src/components/pages/change-network/loading-change-network/index.tsx
+++ b/packages/adena-extension/src/components/pages/change-network/loading-change-network/index.tsx
@@ -1,10 +1,11 @@
 import React, { ReactElement } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Loading, SkeletonBoxStyle } from '@components/atoms';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   position: relative;
   width: 100%;
   margin-top: 13px;
@@ -12,7 +13,7 @@ const Wrapper = styled.div`
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'center')}
+  ${mixins.flex('column', 'flex-start', 'center')}
   width: 100%;
   height: 60px;
 `;
diff --git a/packages/adena-extension/src/components/pages/change-network/network-list-item/network-list-item.styles.ts b/packages/adena-extension/src/components/pages/change-network/network-list-item/network-list-item.styles.ts
index 6ced2fcb..92a6cace 100644
--- a/packages/adena-extension/src/components/pages/change-network/network-list-item/network-list-item.styles.ts
+++ b/packages/adena-extension/src/components/pages/change-network/network-list-item/network-list-item.styles.ts
@@ -1,3 +1,4 @@
+import theme from '@styles/theme';
 import styled from 'styled-components';
 
 export const NetworkListItemWrapper = styled.div`
@@ -6,13 +7,13 @@ export const NetworkListItemWrapper = styled.div`
   width: 100%;
   height: auto;
   padding: 9px 16px;
-  background-color: ${({ theme }): string => theme.color.neutral[6]};
+  background-color: ${theme.color.neutral[6]};
   border-radius: 18px;
   transition: 0.2s;
   cursor: pointer;
 
   &:hover {
-    background-color: ${({ theme }): string => theme.color.neutral[11]};
+    background-color: ${theme.color.neutral[11]};
   }
 
   .info-wrapper {
@@ -31,7 +32,7 @@ export const NetworkListItemWrapper = styled.div`
       .name {
         display: block;
         max-width: 236px;
-        color: ${({ theme }): string => theme.color.neutral[0]};
+        color: ${theme.color.neutral[0]};
 
         overflow: hidden;
         text-overflow: ellipsis;
@@ -50,12 +51,12 @@ export const NetworkListItemWrapper = styled.div`
         & .icon-edit {
           path {
             transition: 0.2s;
-            fill: ${({ theme }): string => theme.color.neutral[9]};
+            fill: ${theme.color.neutral[9]};
           }
 
           &:hover {
             path {
-              fill: ${({ theme }): string => theme.color.neutral[0]};
+              fill: ${theme.color.neutral[0]};
             }
           }
         }
@@ -70,7 +71,7 @@ export const NetworkListItemWrapper = styled.div`
       .description {
         display: block;
         max-width: 244px;
-        color: ${({ theme }): string => theme.color.neutral[9]};
+        color: ${theme.color.neutral[9]};
         font-weight: 400;
         white-space: nowrap;
         overflow: hidden;
diff --git a/packages/adena-extension/src/components/pages/main/main-manage-token-button/main-manage-token-button.styles.ts b/packages/adena-extension/src/components/pages/main/main-manage-token-button/main-manage-token-button.styles.ts
index 4fd252c0..a53241df 100644
--- a/packages/adena-extension/src/components/pages/main/main-manage-token-button/main-manage-token-button.styles.ts
+++ b/packages/adena-extension/src/components/pages/main/main-manage-token-button/main-manage-token-button.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const MainManageTokenButtonWrapper = styled.div`
   display: flex;
@@ -22,7 +23,7 @@ export const MainManageTokenButtonWrapper = styled.div`
   }
 
   .title {
-    color: ${({ theme }): string => theme.color.neutral[9]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Reg};
+    color: ${theme.color.neutral[9]};
+    ${fonts.body1Reg};
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item/manage-token-list-item.styles.ts b/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item/manage-token-list-item.styles.ts
index 778c68ac..fec01452 100644
--- a/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item/manage-token-list-item.styles.ts
+++ b/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item/manage-token-list-item.styles.ts
@@ -1,5 +1,5 @@
+import theme, { fonts } from '@styles/theme';
 import styled from 'styled-components';
-import { FlattenSimpleInterpolation } from 'styled-components';
 
 export const ManageTokenListItemWrapper = styled.div`
   display: flex;
@@ -7,7 +7,7 @@ export const ManageTokenListItemWrapper = styled.div`
   padding: 10px 14px;
   width: 100%;
   height: auto;
-  background: ${({ theme }): string => theme.color.neutral[8]};
+  background: ${theme.color.neutral[8]};
   border-radius: 18px;
   align-items: center;
   justify-items: flex-start;
@@ -40,7 +40,7 @@ export const ManageTokenListItemWrapper = styled.div`
     justify-content: space-between;
 
     .name {
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Bold};
+      ${fonts.body2Bold};
       line-height: 15px;
     }
   }
diff --git a/packages/adena-extension/src/components/pages/manage-token/manage-token-search-input/manage-token-search-input.styles.ts b/packages/adena-extension/src/components/pages/manage-token/manage-token-search-input/manage-token-search-input.styles.ts
index 7ee7f110..5ca2ce58 100644
--- a/packages/adena-extension/src/components/pages/manage-token/manage-token-search-input/manage-token-search-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/manage-token/manage-token-search-input/manage-token-search-input.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const ManageTokenSearchInputWrapper = styled.div`
   display: flex;
@@ -8,9 +9,9 @@ export const ManageTokenSearchInputWrapper = styled.div`
   padding: 12px 16px;
   align-items: center;
   justify-content: flex-start;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   border-radius: 30px;
-  border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  border: 1px solid ${theme.color.neutral[6]};
 
   .search-icon-wrapper {
     display: inline-flex;
@@ -34,7 +35,7 @@ export const ManageTokenSearchInputWrapper = styled.div`
 
     .search-input {
       width: 100%;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+      ${fonts.body2Reg};
     }
   }
 
@@ -49,13 +50,13 @@ export const ManageTokenSearchInputWrapper = styled.div`
     .added {
       width: 100%;
       height: 100%;
-      fill: ${({ theme }): string => theme.color.neutral[6]};
+      fill: ${theme.color.neutral[6]};
       transition: 0.2s;
     }
 
     :hover {
       .added {
-        fill: ${({ theme }): string => theme.color.neutral[11]};
+        fill: ${theme.color.neutral[11]};
       }
     }
   }
diff --git a/packages/adena-extension/src/components/pages/manage-token/manage-token/manage-token.styles.ts b/packages/adena-extension/src/components/pages/manage-token/manage-token/manage-token.styles.ts
index a3bef5be..bf3af47a 100644
--- a/packages/adena-extension/src/components/pages/manage-token/manage-token/manage-token.styles.ts
+++ b/packages/adena-extension/src/components/pages/manage-token/manage-token/manage-token.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const ManageTokenSearchWrapper = styled.div`
   display: flex;
@@ -27,13 +28,13 @@ export const ManageTokenSearchWrapper = styled.div`
     .close {
       width: 100%;
       height: 100%;
-      background-color: ${({ theme }): string => theme.color.neutral[4]};
+      background-color: ${theme.color.neutral[4]};
       border-radius: 30px;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Bold};
+      ${fonts.body1Bold};
       transition: 0.2s;
 
       :hover {
-        background-color: ${({ theme }): string => theme.color.neutral[5]};
+        background-color: ${theme.color.neutral[5]};
       }
     }
   }
diff --git a/packages/adena-extension/src/components/pages/manage-token/toggle/toggle.styles.ts b/packages/adena-extension/src/components/pages/manage-token/toggle/toggle.styles.ts
index 54c62676..1c869981 100644
--- a/packages/adena-extension/src/components/pages/manage-token/toggle/toggle.styles.ts
+++ b/packages/adena-extension/src/components/pages/manage-token/toggle/toggle.styles.ts
@@ -1,5 +1,7 @@
 import styled from 'styled-components';
 
+import theme from '@styles/theme';
+
 export const ToggleWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -8,7 +10,7 @@ export const ToggleWrapper = styled.div`
   height: 26px;
   padding: 3px;
   border-radius: 100px;
-  background-color: ${({ theme }): string => theme.color.neutral[4]};
+  background-color: ${theme.color.neutral[4]};
   transition: 0.2s;
   cursor: pointer;
 
@@ -16,13 +18,13 @@ export const ToggleWrapper = styled.div`
     display: block;
     width: 20px;
     height: 20px;
-    background-color: ${({ theme }): string => theme.color.neutral[0]};
+    background-color: ${theme.color.neutral[0]};
     border-radius: 20px;
     transition: 0.2s;
   }
 
   &.activated {
-    background-color: ${({ theme }): string => theme.color.primary[4]};
+    background-color: ${theme.color.primary[4]};
 
     .circle {
       margin-left: 20px;
diff --git a/packages/adena-extension/src/components/pages/router/side-menu-account-item/side-menu-account-item.styles.ts b/packages/adena-extension/src/components/pages/router/side-menu-account-item/side-menu-account-item.styles.ts
index 75e7d087..3435ece8 100644
--- a/packages/adena-extension/src/components/pages/router/side-menu-account-item/side-menu-account-item.styles.ts
+++ b/packages/adena-extension/src/components/pages/router/side-menu-account-item/side-menu-account-item.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const SideMenuAccountItemWrapper = styled.div`
   display: flex;
@@ -12,11 +13,11 @@ export const SideMenuAccountItemWrapper = styled.div`
   cursor: pointer;
 
   &.selected {
-    background-color: ${({ theme }): string => theme.color.neutral[6]};
+    background-color: ${theme.color.neutral[6]};
   }
 
   &:hover {
-    background-color: ${({ theme }): string => theme.color.neutral[6]};
+    background-color: ${theme.color.neutral[6]};
   }
 
   .info-wrapper {
@@ -29,7 +30,7 @@ export const SideMenuAccountItemWrapper = styled.div`
       flex-direction: row;
 
       .name {
-        ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Bold}
+        ${fonts.body2Bold}
         line-height: 18px;
       }
 
@@ -45,7 +46,7 @@ export const SideMenuAccountItemWrapper = styled.div`
         background: #191920;
         justify-content: center;
         align-items: center;
-        ${({ theme }): FlattenSimpleInterpolation => theme.fonts.captionReg}
+        ${fonts.captionReg}
       }
     }
 
@@ -54,8 +55,8 @@ export const SideMenuAccountItemWrapper = styled.div`
       width: 100%;
       height: auto;
       .balance {
-        color: ${({ theme }): string => theme.color.neutral[9]};
-        ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body3Reg}
+        color: ${theme.color.neutral[9]};
+        ${fonts.body3Reg}
         line-height: 18px;
       }
     }
@@ -74,12 +75,12 @@ export const SideMenuAccountItemWrapper = styled.div`
     }
     & > svg ellipse {
       transition: 0.2s;
-      fill: ${({ theme }): string => theme.color.neutral[2]};
+      fill: ${theme.color.neutral[2]};
     }
 
     &:hover {
       & > svg ellipse {
-        fill: ${({ theme }): string => theme.color.neutral[0]};
+        fill: ${theme.color.neutral[0]};
       }
     }
   }
@@ -93,8 +94,8 @@ export const SideMenuAccountItemMoreInfoWrapper = styled.div<{
   left: ${({ positionX }): string => `${positionX - 130}px`};
   top: ${({ positionY }): string => `${positionY - 40}px`};
   width: 146px;
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
-  border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  background-color: ${theme.color.neutral[7]};
+  border: 1px solid ${theme.color.neutral[6]};
   border-radius: 12.5px;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
   z-index: 99;
@@ -104,12 +105,12 @@ export const SideMenuAccountItemMoreInfoWrapper = styled.div<{
     display: flex;
     flex-direction: row;
     padding: 7px 0 7px 12px;
-    border-bottom: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+    border-bottom: 1px solid ${theme.color.neutral[6]};
     cursor: pointer;
 
     &:hover {
       transition: 0.2s;
-      background-color: ${({ theme }): string => theme.color.neutral[6]};
+      background-color: ${theme.color.neutral[6]};
     }
 
     &:last-child {
@@ -124,7 +125,7 @@ export const SideMenuAccountItemMoreInfoWrapper = styled.div<{
     .title {
       width: 100%;
       margin-left: 8px;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body3Reg}
+      ${fonts.body3Reg}
       line-height: 12px;
     }
   }
diff --git a/packages/adena-extension/src/components/pages/router/side-menu-layout/side-menu-layout.styles.ts b/packages/adena-extension/src/components/pages/router/side-menu-layout/side-menu-layout.styles.ts
index 76b1b7f8..4c3531c0 100644
--- a/packages/adena-extension/src/components/pages/router/side-menu-layout/side-menu-layout.styles.ts
+++ b/packages/adena-extension/src/components/pages/router/side-menu-layout/side-menu-layout.styles.ts
@@ -1,4 +1,7 @@
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 export const SideMenuOverlay = styled.div<{ open: boolean }>`
   position: fixed;
@@ -29,8 +32,8 @@ export const SideMenuBackground = styled.div`
 `;
 
 export const SideMenuContent = styled.div<{ open: boolean }>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'space-between')};
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  ${mixins.flex('column', 'center', 'space-between')};
+  background-color: ${theme.color.neutral[7]};
   position: fixed;
   top: 0px;
   left: ${({ open }): '0px' | '-100%' => (open ? '0px' : '-100%')};
diff --git a/packages/adena-extension/src/components/pages/router/side-menu-link/side-menu-link.styles.ts b/packages/adena-extension/src/components/pages/router/side-menu-link/side-menu-link.styles.ts
index 932f8202..06a4242a 100644
--- a/packages/adena-extension/src/components/pages/router/side-menu-link/side-menu-link.styles.ts
+++ b/packages/adena-extension/src/components/pages/router/side-menu-link/side-menu-link.styles.ts
@@ -1,4 +1,6 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
+
+import theme, { fonts } from '@styles/theme';
 
 export const SideMenuLinkWrapper = styled.div`
   display: flex;
@@ -8,12 +10,12 @@ export const SideMenuLinkWrapper = styled.div`
   padding: 16px 20px;
   justify-content: flex-start;
   align-items: center;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   transition: 0.2s;
   cursor: pointer;
 
   &:hover {
-    background-color: ${({ theme }): string => theme.color.neutral[6]};
+    background-color: ${theme.color.neutral[6]};
   }
 
   .icon {
@@ -24,6 +26,6 @@ export const SideMenuLinkWrapper = styled.div`
   .title {
     width: 100%;
     margin-left: 12px;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg}
+    ${fonts.body2Reg}
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/router/side-menu/side-menu.styles.ts b/packages/adena-extension/src/components/pages/router/side-menu/side-menu.styles.ts
index 77b0aa7d..f05289f2 100644
--- a/packages/adena-extension/src/components/pages/router/side-menu/side-menu.styles.ts
+++ b/packages/adena-extension/src/components/pages/router/side-menu/side-menu.styles.ts
@@ -1,11 +1,12 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const SideMenuWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100vh;
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  background-color: ${theme.color.neutral[7]};
 
   .header-wrapper {
     display: flex;
@@ -15,7 +16,7 @@ export const SideMenuWrapper = styled.div`
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
+    background-color: ${theme.color.neutral[8]};
 
     .logo {
       width: 82px;
@@ -33,14 +34,14 @@ export const SideMenuWrapper = styled.div`
 
         line {
           transition: 0.2s;
-          stroke: ${({ theme }): string => theme.color.neutral[9]};
+          stroke: ${theme.color.neutral[9]};
         }
       }
 
       &:hover {
         svg {
           line {
-            stroke: ${({ theme }): string => theme.color.neutral[0]};
+            stroke: ${theme.color.neutral[0]};
           }
         }
       }
@@ -59,31 +60,31 @@ export const SideMenuWrapper = styled.div`
     display: flex;
     height: 100%;
     padding: 16px 20px;
-    border-top: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+    border-top: 1px solid ${theme.color.neutral[6]};
 
     .add-account-button {
       display: inline-flex;
       width: fit-content;
       height: fit-content;
-      color: ${({ theme }): string => theme.color.neutral[0]};
+      color: ${theme.color.neutral[0]};
       transition: 0.2s;
       align-items: center;
       cursor: pointer;
 
       svg * {
         transition: 0.2s;
-        stroke: ${({ theme }): string => theme.color.neutral[0]};
+        stroke: ${theme.color.neutral[0]};
       }
 
       .text {
         margin-left: 8px;
-        ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Bold}
+        ${fonts.body2Bold}
       }
 
       &:hover {
-        color: ${({ theme }): string => theme.color.neutral[9]};
+        color: ${theme.color.neutral[9]};
         svg * {
-          stroke: ${({ theme }): string => theme.color.neutral[9]};
+          stroke: ${theme.color.neutral[9]};
         }
       }
     }
diff --git a/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.styles.ts
index 4a840b7e..af81610d 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.styles.ts
@@ -1,11 +1,12 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const AddressBookListWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
 
   .no-address-wrapper {
     display: flex;
@@ -23,12 +24,12 @@ export const AddressBookListItemWrapper = styled.div`
   padding: 13px 16px;
   justify-content: space-between;
   align-items: center;
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+  ${fonts.body2Reg};
   transition: 0.2s;
   cursor: pointer;
 
   :hover {
-    background-color: ${({ theme }): string => theme.color.neutral[6]};
+    background-color: ${theme.color.neutral[6]};
   }
 
   .name {
@@ -36,6 +37,6 @@ export const AddressBookListItemWrapper = styled.div`
   }
 
   .address {
-    color: ${({ theme }): string => theme.color.neutral[9]};
+    color: ${theme.color.neutral[9]};
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.styles.ts
index 2b008059..d958b481 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const AddressInputWrapper = styled.div`
   position: relative;
@@ -12,9 +13,9 @@ export const AddressInputWrapper = styled.div`
     width: 100%;
     min-height: 48px;
     padding: 12px 16px;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
-    border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+    ${fonts.body2Reg};
+    background-color: ${theme.color.neutral[8]};
+    border: 1px solid ${theme.color.neutral[6]};
     border-radius: 30px;
     align-items: center;
 
@@ -25,7 +26,7 @@ export const AddressInputWrapper = styled.div`
       }
       .description {
         margin-left: 5px;
-        color: ${({ theme }): string => theme.color.neutral[9]};
+        color: ${theme.color.neutral[9]};
       }
     }
 
@@ -38,7 +39,7 @@ export const AddressInputWrapper = styled.div`
       line-height: 25px;
 
       ::placeholder {
-        color: ${({ theme }): string => theme.color.neutral[9]};
+        color: ${theme.color.neutral[9]};
       }
     }
   }
@@ -50,14 +51,14 @@ export const AddressInputWrapper = styled.div`
     height: 25px;
     padding: 3px 14px;
     margin-left: 5px;
-    background-color: ${({ theme }): string => theme.color.neutral[6]};
+    background-color: ${theme.color.neutral[6]};
     border-radius: 15px;
     align-items: center;
     transition: 0.2s;
     cursor: pointer;
 
     :hover {
-      background-color: ${({ theme }): string => theme.color.neutral[11]};
+      background-color: ${theme.color.neutral[11]};
     }
 
     .address-book {
@@ -78,7 +79,7 @@ export const AddressInputWrapper = styled.div`
     height: auto;
     max-height: 142px;
     left: 0;
-    border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+    border: 1px solid ${theme.color.neutral[6]};
     border-bottom-right-radius: 25px;
     border-bottom-left-radius: 25px;
     z-index: 4;
@@ -95,19 +96,19 @@ export const AddressInputWrapper = styled.div`
 
   &.error {
     .input-wrapper {
-      border-color: ${({ theme }): string => theme.color.red[2]};
+      border-color: ${theme.color.red[2]};
     }
 
     .list-wrapper {
-      border-color: ${({ theme }): string => theme.color.red[2]};
-      border-top-color: ${({ theme }): string => theme.color.neutral[6]};
+      border-color: ${theme.color.red[2]};
+      border-top-color: ${theme.color.neutral[6]};
     }
   }
 
   .error-message {
     position: relative;
     padding: 0 16px;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.captionReg};
-    color: ${({ theme }): string => theme.color.red[2]};
+    ${fonts.captionReg};
+    color: ${theme.color.red[2]};
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/balance-input/balance-input.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/balance-input/balance-input.styles.ts
index f92f1fb0..20761a67 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/balance-input/balance-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/balance-input/balance-input.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const BalanceInputWrapper = styled.div`
   display: flex;
@@ -12,9 +13,9 @@ export const BalanceInputWrapper = styled.div`
     width: 100%;
     min-height: 48px;
     padding: 12px 16px;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
-    background-color: ${({ theme }): string => theme.color.neutral[8]};
-    border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+    ${fonts.body2Reg};
+    background-color: ${theme.color.neutral[8]};
+    border: 1px solid ${theme.color.neutral[6]};
     border-radius: 30px;
     align-items: center;
 
@@ -32,13 +33,13 @@ export const BalanceInputWrapper = styled.div`
       width: 64px;
       height: 24px;
       border-radius: 12px;
-      background-color: ${({ theme }): string => theme.color.neutral[6]};
+      background-color: ${theme.color.neutral[6]};
       align-items: center;
       justify-content: center;
       transition: 0.2s;
 
       :hover {
-        background-color: ${({ theme }): string => theme.color.neutral[11]};
+        background-color: ${theme.color.neutral[11]};
       }
     }
   }
@@ -46,17 +47,17 @@ export const BalanceInputWrapper = styled.div`
   .description {
     position: relative;
     padding: 0 16px;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.captionReg};
-    color: ${({ theme }): string => theme.color.neutral[9]};
+    ${fonts.captionReg};
+    color: ${theme.color.neutral[9]};
   }
 
   &.error {
     .input-wrapper {
-      border-color: ${({ theme }): string => theme.color.red[2]};
+      border-color: ${theme.color.red[2]};
     }
 
     .description {
-      color: ${({ theme }): string => theme.color.red[2]};
+      color: ${theme.color.red[2]};
     }
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts
index 56a3d663..3f871da4 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const TransferInputWrapper = styled.div`
   position: relative;
@@ -40,12 +41,12 @@ export const TransferInputWrapper = styled.div`
       width: 100%;
       height: 48px;
       border-radius: 30px;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Bold};
-      background-color: ${({ theme }): string => theme.color.neutral[4]};
+      ${fonts.body1Bold};
+      background-color: ${theme.color.neutral[4]};
       transition: 0.2s;
 
       :hover {
-        background-color: ${({ theme }): string => theme.color.neutral[5]};
+        background-color: ${theme.color.neutral[5]};
       }
 
       &:last-child {
@@ -53,15 +54,15 @@ export const TransferInputWrapper = styled.div`
       }
 
       &.next {
-        background-color: ${({ theme }): string => theme.color.primary[3]};
+        background-color: ${theme.color.primary[3]};
 
         :hover {
-          background-color: ${({ theme }): string => theme.color.primary[4]};
+          background-color: ${theme.color.primary[4]};
         }
 
         &.disabled {
-          color: ${({ theme }): string => theme.color.neutral[4]};
-          background-color: ${({ theme }): string => theme.color.primary[6]};
+          color: ${theme.color.neutral[4]};
+          background-color: ${theme.color.primary[6]};
           cursor: default;
         }
       }
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
index e7ca3a0e..9f64d24b 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const TransferSummaryAddressWrapper = styled.div`
   display: flex;
@@ -6,8 +7,8 @@ export const TransferSummaryAddressWrapper = styled.div`
   width: 100%;
   height: auto;
   padding: 20px;
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  ${fonts.body2Reg};
+  background-color: ${theme.color.neutral[8]};
   border-radius: 18px;
   justify-content: space-between;
   align-items: center;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.styles.ts b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.styles.ts
index c9784ce7..593929c9 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const TransferSummaryBalanceWrapper = styled.div`
   display: flex;
@@ -6,7 +7,7 @@ export const TransferSummaryBalanceWrapper = styled.div`
   width: 100%;
   height: auto;
   padding: 20px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   border-radius: 18px;
   justify-content: space-between;
   align-items: center;
@@ -18,6 +19,6 @@ export const TransferSummaryBalanceWrapper = styled.div`
 
   .balance {
     display: contents;
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.header5};
+    ${fonts.header5};
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-network-fee/transfer-summary-network-fee.styles.ts b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-network-fee/transfer-summary-network-fee.styles.ts
index 33fd0002..bdf0a930 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-network-fee/transfer-summary-network-fee.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-network-fee/transfer-summary-network-fee.styles.ts
@@ -1,13 +1,13 @@
+import theme, { fonts } from '@styles/theme';
 import styled from 'styled-components';
-import { FlattenSimpleInterpolation } from 'styled-components';
 
 export const TransferSummaryNetworkFeeWrapper = styled.div<{ isError?: boolean }>`
   display: flex;
   flex-direction: row;
   width: 100%;
   padding: 14px 16px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
-  border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  background-color: ${theme.color.neutral[8]};
+  border: 1px solid ${theme.color.neutral[6]};
   border-radius: 30px;
   justify-content: space-between;
   align-items: center;
@@ -15,7 +15,7 @@ export const TransferSummaryNetworkFeeWrapper = styled.div<{ isError?: boolean }
     isError && `border-color: ${theme.color.red[2]};`}
 
   .key {
-    color: ${({ theme }): string => theme.color.neutral[9]};
-    ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
+    color: ${theme.color.neutral[9]};
+    ${fonts.body2Reg};
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.styles.ts b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.styles.ts
index 65a41721..f99b3500 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const TransferSummaryWrapper = styled.div`
   position: relative;
@@ -35,8 +36,8 @@ export const TransferSummaryWrapper = styled.div`
       position: relative;
       width: 100%;
       padding: 0 16px;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.captionReg};
-      color: ${({ theme }): string => theme.color.red[2]};
+      ${fonts.captionReg};
+      color: ${theme.color.red[2]};
     }
   }
 
@@ -51,12 +52,12 @@ export const TransferSummaryWrapper = styled.div`
       width: 100%;
       height: 48px;
       border-radius: 30px;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Bold};
-      background-color: ${({ theme }): string => theme.color.neutral[4]};
+      ${fonts.body1Bold};
+      background-color: ${theme.color.neutral[4]};
       transition: 0.2s;
 
       :hover {
-        background-color: ${({ theme }): string => theme.color.neutral[5]};
+        background-color: ${theme.color.neutral[5]};
       }
 
       &:last-child {
@@ -64,10 +65,10 @@ export const TransferSummaryWrapper = styled.div`
       }
 
       &.send {
-        background-color: ${({ theme }): string => theme.color.primary[3]};
+        background-color: ${theme.color.primary[3]};
 
         :hover {
-          background-color: ${({ theme }): string => theme.color.primary[4]};
+          background-color: ${theme.color.primary[4]};
         }
       }
     }
diff --git a/packages/adena-extension/src/components/pages/wallet-main/token-list-item/token-list-item.styles.ts b/packages/adena-extension/src/components/pages/wallet-main/token-list-item/token-list-item.styles.ts
index 9e27f844..e93bd328 100644
--- a/packages/adena-extension/src/components/pages/wallet-main/token-list-item/token-list-item.styles.ts
+++ b/packages/adena-extension/src/components/pages/wallet-main/token-list-item/token-list-item.styles.ts
@@ -1,4 +1,5 @@
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import theme, { fonts } from '@styles/theme';
+import styled from 'styled-components';
 
 export const TokenListItemWrapper = styled.div`
   display: flex;
@@ -6,7 +7,7 @@ export const TokenListItemWrapper = styled.div`
   padding: 13px;
   width: 100%;
   height: auto;
-  background: ${({ theme }): string => theme.color.neutral[8]};
+  background: ${theme.color.neutral[8]};
   border-radius: 18px;
   align-items: center;
   justify-items: flex-start;
@@ -17,7 +18,7 @@ export const TokenListItemWrapper = styled.div`
   }
 
   &:hover {
-    background: ${({ theme }): string => theme.color.neutral[6]};
+    background: ${theme.color.neutral[6]};
     cursor: pointer;
   }
 
@@ -44,7 +45,7 @@ export const TokenListItemWrapper = styled.div`
 
     .name {
       display: contents;
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Bold};
+      ${fonts.body2Bold};
       line-height: 17px;
     }
   }
diff --git a/packages/adena-extension/src/pages/certify/about-adena/index.tsx b/packages/adena-extension/src/pages/certify/about-adena/index.tsx
index 42e7e50e..838bd6eb 100644
--- a/packages/adena-extension/src/pages/certify/about-adena/index.tsx
+++ b/packages/adena-extension/src/pages/certify/about-adena/index.tsx
@@ -1,11 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import logo from '@assets/logo-default-v2.svg';
 import { Text, FullButtonRightIcon, ButtonMode } from '@components/atoms';
 import { BottomFixedButton } from '@components/molecules';
 import theme from '@styles/theme';
+import mixins from '@styles/mixins';
 
 const menuMakerInfo = [
   {
@@ -82,7 +83,7 @@ export const AboutAdena = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 36px;
diff --git a/packages/adena-extension/src/pages/certify/add-account-page/index.tsx b/packages/adena-extension/src/pages/certify/add-account-page/index.tsx
index 1d85440a..29c89cb7 100644
--- a/packages/adena-extension/src/pages/certify/add-account-page/index.tsx
+++ b/packages/adena-extension/src/pages/certify/add-account-page/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { RoutePath } from '@router/path';
@@ -7,11 +7,12 @@ import { Text } from '@components/atoms';
 import { BottomFixedButton } from '@components/molecules';
 import { useAddAccount } from '@hooks/use-add-account';
 import { useWalletContext } from '@hooks/use-context';
+import mixins from '@styles/mixins';
 
 import { MultilineTextWithArrowButton } from './multiline-text-with-arrow-button';
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
diff --git a/packages/adena-extension/src/pages/certify/add-account-page/multiline-text-with-arrow-button.tsx b/packages/adena-extension/src/pages/certify/add-account-page/multiline-text-with-arrow-button.tsx
index 09344d25..7eb80be4 100644
--- a/packages/adena-extension/src/pages/certify/add-account-page/multiline-text-with-arrow-button.tsx
+++ b/packages/adena-extension/src/pages/certify/add-account-page/multiline-text-with-arrow-button.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, Icon } from '@components/atoms';
 import theme from '@styles/theme';
+import mixins from '@styles/mixins';
 
 interface MultiButtonProps {
   title: string;
@@ -36,7 +37,7 @@ export const MultilineTextWithArrowButton = ({
 };
 
 const Wrapper = styled.button`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'center')};
+  ${mixins.flex('column', 'flex-start', 'center')};
   position: relative;
   width: 100%;
   height: 80px;
@@ -46,7 +47,7 @@ const Wrapper = styled.button`
   cursor: pointer;
 
   .arrow-icon {
-    ${({ theme }): CSSProp => theme.mixins.posTopCenterRight('24px')};
+    ${mixins.posTopCenterRight('24px')};
   }
 
   ${({ disabled, theme }): string | false =>
diff --git a/packages/adena-extension/src/pages/certify/add-address/index.tsx b/packages/adena-extension/src/pages/certify/add-address/index.tsx
index b4798327..fc88731b 100644
--- a/packages/adena-extension/src/pages/certify/add-address/index.tsx
+++ b/packages/adena-extension/src/pages/certify/add-address/index.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, DefaultInput, inputStyle, ErrorText, LeftArrowBtn } from '@components/atoms';
 import { CancelAndConfirmButton } from '@components/molecules';
@@ -17,6 +17,7 @@ import { BookListProps } from '../address-book';
 import { AddressBookValidationError } from '@common/errors/validation/address-book-validation-error';
 import { useAdenaContext, useWalletContext } from '@hooks/use-context';
 import { useCurrentAccount } from '@hooks/use-current-account';
+import mixins from '@styles/mixins';
 
 const specialPatternCheck = /\W|\s/g;
 const ACCOUNT_NAME_LENGTH_LIMIT = 23;
@@ -201,7 +202,7 @@ const RemoveAddressBtn = styled.button<{ error: boolean }>`
   text-decoration-line: underline;
   text-underline-offset: 2px;
   text-decoration-thickness: 1px;
-  text-decoration-color: ${({ theme }): string => theme.color.neutral[9]};
+  text-decoration-color: ${theme.color.neutral[9]};
   position: absolute;
   bottom: 91px;
 `;
@@ -217,7 +218,7 @@ const AddressInput = styled.textarea<{ error: boolean }>`
 `;
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   padding-top: 24px;
   width: 100%;
   height: 100%;
@@ -228,7 +229,7 @@ const Wrapper = styled.main`
 `;
 
 const TopSection = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')}
+  ${mixins.flex('row', 'center', 'center')}
   position: relative;
   width: 100%;
   & > button {
diff --git a/packages/adena-extension/src/pages/certify/address-book/index.tsx b/packages/adena-extension/src/pages/certify/address-book/index.tsx
index 44a936b1..736a7a00 100644
--- a/packages/adena-extension/src/pages/certify/address-book/index.tsx
+++ b/packages/adena-extension/src/pages/certify/address-book/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, ListBox } from '@components/atoms';
 import theme from '@styles/theme';
@@ -10,6 +10,7 @@ import { RoutePath } from '@router/path';
 import { formatAddress, formatNickname } from '@common/utils/client-utils';
 import { useAdenaContext } from '@hooks/use-context';
 import { useCurrentAccount } from '@hooks/use-current-account';
+import mixins from '@styles/mixins';
 
 type navigateStatus = 'add' | 'edit';
 
@@ -77,7 +78,7 @@ const AddressBook = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
@@ -92,7 +93,7 @@ const Wrapper = styled.main`
 `;
 
 const TopSection = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   margin-bottom: 12px;
 `;
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-fail.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-fail.tsx
index 3137285e..5a6cd5b4 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-fail.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-fail.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import IconConnectFailPermission from '@assets/connect-fail-permission.svg';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Connection Failed',
@@ -11,7 +12,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-init.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-init.tsx
index 99a6d2b7..efd33df9 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-init.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-init.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import IconConnectHardwareWallet from '@assets/connect-hardware-wallet.svg';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Connect a\nLedger Device',
@@ -11,7 +12,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet-load.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet-load.tsx
index d5114038..f69f1b4c 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet-load.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet-load.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Loading Accounts',
@@ -10,7 +11,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet.tsx
index f7223dfb..739d9a68 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import IconConnectRequestHardwareWallet from '@assets/connect-request-hardware-wallet.svg';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Open Cosmos App\nin Your Ledger',
@@ -11,7 +12,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request.tsx
index aba9bac3..8d5e553e 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Requesting Permission',
@@ -10,7 +11,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/finish/finish.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/finish/finish.tsx
index 6187ee6b..c69a4cfb 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/finish/finish.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/finish/finish.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 import { LedgerAccount, LedgerConnector, LedgerKeyring, deserializeAccount } from 'adena-module';
 
@@ -7,6 +7,7 @@ import { Text, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import IconSuccessSymbol from '@assets/success-symbol.svg';
 import { useAdenaContext, useWalletContext } from '@hooks/use-context';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Account Added',
@@ -14,7 +15,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-all-set/ledger-all-set.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-all-set/ledger-all-set.tsx
index ed604da6..f07dce8a 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-all-set/ledger-all-set.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-all-set/ledger-all-set.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'You’re All Set!',
@@ -10,7 +11,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   max-width: 380px;
   padding-top: 50px;
 `;
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-password/ledger-password.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-password/ledger-password.tsx
index 47fa7437..2cb98f94 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-password/ledger-password.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-password/ledger-password.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, DefaultInput, ErrorText, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc, TermsCheckbox } from '@components/molecules';
 
 import { useLedgerPassword } from './use-ledger-password';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Create\na Password',
@@ -63,7 +64,7 @@ export const ApproveHardwareWalletLedgerPassword = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   max-width: 380px;
   padding-top: 50px;
 `;
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx
index 0baa0050..d13d663a 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { LedgerConnector, LedgerAccount } from 'adena-module';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -15,13 +15,14 @@ import IconArrowDown from '@assets/arrowS-down-gray.svg';
 import { useWalletContext } from '@hooks/use-context';
 import { LedgerKeyring, deserializeAccount, serializeAccount } from 'adena-module';
 import { useNetwork } from '@hooks/use-network';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Select Accounts',
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/certify/change-password/index.tsx b/packages/adena-extension/src/pages/certify/change-password/index.tsx
index 6829d219..2d1977c3 100644
--- a/packages/adena-extension/src/pages/certify/change-password/index.tsx
+++ b/packages/adena-extension/src/pages/certify/change-password/index.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, DefaultInput, ErrorText } from '@components/atoms';
 import { CancelAndConfirmButton } from '@components/molecules';
 
 import { useChangePassword } from '@hooks/certify/use-change-password';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
diff --git a/packages/adena-extension/src/pages/certify/connected-apps/index.tsx b/packages/adena-extension/src/pages/certify/connected-apps/index.tsx
index a16f88ff..d42c26b4 100644
--- a/packages/adena-extension/src/pages/certify/connected-apps/index.tsx
+++ b/packages/adena-extension/src/pages/certify/connected-apps/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 
@@ -11,6 +11,7 @@ import DefaultImage from '@assets/favicon-default-small.svg';
 import disconnected from '@assets/disconnected.svg';
 import { useAdenaContext } from '@hooks/use-context';
 import { useCurrentAccount } from '@hooks/use-current-account';
+import mixins from '@styles/mixins';
 
 export const ConnectedApps = (): JSX.Element => {
   const { establishService } = useAdenaContext();
@@ -91,12 +92,12 @@ export const ConnectedApps = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
   padding-bottom: 120px;
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  background-color: ${theme.color.neutral[7]};
 
   .logo {
     width: 20px;
@@ -121,15 +122,15 @@ const Wrapper = styled.main`
 `;
 
 const DisconnectedBtn = styled.button`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   flex-shrink: 0;
   width: 25px;
   height: 25px;
   border-radius: 35px;
-  background-color: ${({ theme }): string => theme.color.red[2]};
+  background-color: ${theme.color.red[2]};
   transition: all ease 0.4s;
   margin-left: auto;
   :hover {
-    background-color: ${({ theme }): string => theme.color.red[5]};
+    background-color: ${theme.color.red[5]};
   }
 `;
diff --git a/packages/adena-extension/src/pages/certify/create-password/index.tsx b/packages/adena-extension/src/pages/certify/create-password/index.tsx
index 7745745a..c74ee2db 100644
--- a/packages/adena-extension/src/pages/certify/create-password/index.tsx
+++ b/packages/adena-extension/src/pages/certify/create-password/index.tsx
@@ -5,6 +5,7 @@ import { useLocation } from 'react-router-dom';
 import { Text, DefaultInput, ErrorText, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc, TermsCheckbox } from '@components/molecules';
 import { useCreatePassword } from '@hooks/certify/use-create-password';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Create\na Password',
@@ -12,14 +13,14 @@ const text = {
 };
 
 const popupStyle = css`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   max-width: 380px;
   min-height: 514px;
   padding-top: 50px;
 `;
 
 const defaultStyle = css`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 50px;
diff --git a/packages/adena-extension/src/pages/certify/enter-seed/index.tsx b/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
index ba81fa27..43ade8cc 100644
--- a/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
+++ b/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
 import { Text, ErrorText, Button, ButtonHierarchy, SecureTextarea } from '@components/atoms';
 import { TitleWithDesc, TermsCheckbox } from '@components/molecules';
 
 import { useEnterSeed } from '@hooks/certify/use-enter-seed';
+import mixins from '@styles/mixins';
 
 const walletContent = {
   title: 'Import with Seed Phrase',
@@ -59,7 +60,7 @@ export const EnterSeedPhrase = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 50px;
diff --git a/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx b/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
index 6b0e641c..90dea575 100644
--- a/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
+++ b/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
@@ -1,21 +1,23 @@
 import React, { useEffect, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
 import { Text, Button, ButtonHierarchy, BlurScreen } from '@components/atoms';
 import { SeedViewAndCopy } from '@components/molecules';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useWalletContext } from '@hooks/use-context';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 const StyledPrivateKeyBox = styled.div`
   position: relative;
   width: 100%;
   height: 140px;
-  border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  border: 1px solid ${theme.color.neutral[6]};
+  background-color: ${theme.color.neutral[8]};
   border-radius: 18px;
   padding: 8px;
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
 `;
 
 const StyledText = styled(Text)`
diff --git a/packages/adena-extension/src/pages/certify/export-private-key/index.tsx b/packages/adena-extension/src/pages/certify/export-private-key/index.tsx
index 95a1c7e4..38a9f886 100644
--- a/packages/adena-extension/src/pages/certify/export-private-key/index.tsx
+++ b/packages/adena-extension/src/pages/certify/export-private-key/index.tsx
@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Text, WarningBox } from '@components/atoms';
+import mixins from '@styles/mixins';
 
 import ApproachPrivateKey from './ApproachPrivateKey';
 import CheckPassword from './CheckPassword';
 
 const StyledWrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
diff --git a/packages/adena-extension/src/pages/certify/forgot-password/index.tsx b/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
index 055f9615..8626f1c9 100644
--- a/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
+++ b/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import lockLogo from '@assets/icon-lock.svg';
@@ -7,6 +7,7 @@ import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
 import theme from '@styles/theme';
 
 import { RoutePath } from '@router/path';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Forgot Password?',
@@ -60,7 +61,7 @@ export const ForgotPassword = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 50px;
@@ -72,20 +73,20 @@ const Wrapper = styled.main`
 const LearnMore = styled.button`
   font-size: 16px;
   font-weight: 700;
-  color: ${({ theme }): string => theme.color.primary[3]};
+  color: ${theme.color.primary[3]};
   margin-top: 24px;
   &:hover {
     text-decoration-line: underline;
     text-underline-offset: 2px;
     text-decoration-thickness: 1px;
-    text-decoration-color: ${({ theme }): string => theme.color.primary[3]};
+    text-decoration-color: ${theme.color.primary[3]};
   }
 `;
 
 const TextStyled = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   width: 100%;
-  color: ${({ theme }): string => theme.color.neutral[9]};
+  color: ${theme.color.neutral[9]};
   gap: 6px;
   font-size: 14px;
   font-weight: 500;
@@ -98,9 +99,9 @@ const TextStyled = styled.div`
     transition: all 0.3s ease;
   }
   &:hover {
-    color: ${({ theme }): string => theme.color.primary[3]};
+    color: ${theme.color.primary[3]};
     svg * {
-      stroke: ${({ theme }): string => theme.color.primary[3]};
+      stroke: ${theme.color.primary[3]};
     }
   }
 `;
diff --git a/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx b/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx
index df9debb6..bfd68c4a 100644
--- a/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import addSymbol from '@assets/add-symbol.svg';
 import { Text, Button, ButtonHierarchy } from '@components/atoms';
 import theme from '@styles/theme';
 import { RoutePath } from '@router/path';
+import mixins from '@styles/mixins';
 
 const content =
   'To add new accounts, you need to generate a seed phrase as you created your existing accounts with Google or Ledger, which didn’t require seed phrase generation.';
@@ -34,7 +35,7 @@ export const GenerateSeedPhrase = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 56px;
diff --git a/packages/adena-extension/src/pages/certify/google-login/connect/google-connect-failed.tsx b/packages/adena-extension/src/pages/certify/google-login/connect/google-connect-failed.tsx
index 05da03cd..725a4359 100644
--- a/packages/adena-extension/src/pages/certify/google-login/connect/google-connect-failed.tsx
+++ b/packages/adena-extension/src/pages/certify/google-login/connect/google-connect-failed.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import { RoutePath } from '@router/path';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Login Failed',
@@ -12,7 +13,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   max-width: 380px;
   min-height: 514px;
   padding-top: 50px;
diff --git a/packages/adena-extension/src/pages/certify/google-login/connect/google-connect.tsx b/packages/adena-extension/src/pages/certify/google-login/connect/google-connect.tsx
index 219869fc..b3d007fb 100644
--- a/packages/adena-extension/src/pages/certify/google-login/connect/google-connect.tsx
+++ b/packages/adena-extension/src/pages/certify/google-login/connect/google-connect.tsx
@@ -1,11 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
+import { GoogleTorusSigner, TorusSigner } from 'adena-torus-signin/src';
+
 import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import { RoutePath } from '@router/path';
-import { GoogleTorusSigner, TorusSigner } from 'adena-torus-signin/src';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Waiting for Google Login',
@@ -13,7 +15,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   max-width: 380px;
   min-height: 514px;
   padding-top: 50px;
diff --git a/packages/adena-extension/src/pages/certify/import-private-key/index.tsx b/packages/adena-extension/src/pages/certify/import-private-key/index.tsx
index 2903b1a0..5c43419f 100644
--- a/packages/adena-extension/src/pages/certify/import-private-key/index.tsx
+++ b/packages/adena-extension/src/pages/certify/import-private-key/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import { SingleAccount, PrivateKeyKeyring } from 'adena-module';
 
@@ -8,6 +8,7 @@ import { TitleWithDesc, TermsCheckbox } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import { useImportAccount } from '@hooks/use-import-account';
 import { useWalletContext } from '@hooks/use-context';
+import mixins from '@styles/mixins';
 
 const content = {
   title: 'Import Private Key',
@@ -108,7 +109,7 @@ export const ImportPrivateKey = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 50px;
diff --git a/packages/adena-extension/src/pages/certify/launch-adena/index.tsx b/packages/adena-extension/src/pages/certify/launch-adena/index.tsx
index 8624308c..eb01489f 100644
--- a/packages/adena-extension/src/pages/certify/launch-adena/index.tsx
+++ b/packages/adena-extension/src/pages/certify/launch-adena/index.tsx
@@ -6,6 +6,7 @@ import { Text, Button, ButtonHierarchy } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import { useWalletContext } from '@hooks/use-context';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'You’re All Set!',
@@ -13,14 +14,14 @@ const text = {
 };
 
 const popupStyle = css`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   max-width: 380px;
   min-height: 514px;
   padding-top: 50px;
 `;
 
 const defaultStyle = css`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'space-between')};
+  ${mixins.flex('column', 'center', 'space-between')};
   width: 100%;
   height: 100%;
   padding-top: 50px;
diff --git a/packages/adena-extension/src/pages/certify/login/index.tsx b/packages/adena-extension/src/pages/certify/login/index.tsx
index ab6809e5..7ca1bfab 100644
--- a/packages/adena-extension/src/pages/certify/login/index.tsx
+++ b/packages/adena-extension/src/pages/certify/login/index.tsx
@@ -1,25 +1,26 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import styled, { CSSProp, FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Text, DefaultInput, Button, ButtonHierarchy } from '@components/atoms';
-import theme from '@styles/theme';
+import theme, { fonts } from '@styles/theme';
 import { RoutePath } from '@router/path';
 import { validateWrongPasswordLength } from '@common/validation';
 import { useAdenaContext } from '@hooks/use-context';
 import { useLoadAccounts } from '@hooks/use-load-accounts';
 import { usePreventHistoryBack } from '@hooks/use-prevent-history-back';
+import mixins from '@styles/mixins';
 
 const text = 'Enter\nYour Password';
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'stretch')}
+  ${mixins.flex('column', 'center', 'stretch')}
   width: 100%;
   height: 100%;
 `;
 
 export const Title = styled.p`
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.header4};
+  ${fonts.header4};
   margin: 54px 0px 56px;
   white-space: pre-wrap;
   width: 100%;
diff --git a/packages/adena-extension/src/pages/certify/remove-account/index.tsx b/packages/adena-extension/src/pages/certify/remove-account/index.tsx
index 8cc46858..4ef05fbc 100644
--- a/packages/adena-extension/src/pages/certify/remove-account/index.tsx
+++ b/packages/adena-extension/src/pages/certify/remove-account/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 
@@ -11,6 +11,7 @@ import { useRemoveAccount } from '@hooks/use-remove-account';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { RoutePath } from '@router/path';
 import { WalletState } from '@states';
+import mixins from '@styles/mixins';
 
 const content =
   'Only proceed if you wish to remove this account from your wallet. You can always recover it with your seed phrase or your private key.';
@@ -56,7 +57,7 @@ export const RemoveAccount = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 56px;
diff --git a/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx b/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
index 81355340..218761c6 100644
--- a/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
+++ b/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
@@ -8,6 +8,7 @@ import { CancelAndConfirmButton } from '@components/molecules';
 import theme from '@styles/theme';
 import { RoutePath } from '@router/path';
 import { useClear } from '@hooks/use-clear';
+import mixins from '@styles/mixins';
 
 const content =
   'Only proceed if you wish to remove all existing accounts and replace them with new ones. Make sure to back up your seed phrase and keys first.';
@@ -50,7 +51,7 @@ export const ResetWallet = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 56px;
diff --git a/packages/adena-extension/src/pages/certify/reveal-password-phrase/index.tsx b/packages/adena-extension/src/pages/certify/reveal-password-phrase/index.tsx
index 0174e783..65d52918 100644
--- a/packages/adena-extension/src/pages/certify/reveal-password-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/reveal-password-phrase/index.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Text, WarningBox, DefaultInput, ErrorText } from '@components/atoms';
 import { TermsCheckbox, CancelAndConfirmButton } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import { useAdenaContext } from '@hooks/use-context';
+import mixins from '@styles/mixins';
 
 const TermsAText = 'Anyone with the phrase will have full control over my funds.';
 const TermsBText = 'I will never share my seed phrase with anyone.';
@@ -109,7 +110,7 @@ export const RevealPasswordPhrase = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
diff --git a/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx b/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx
index 3ee2230c..658294a2 100644
--- a/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx
@@ -1,10 +1,11 @@
 import React, { useMemo, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Text, WarningBox, Button, ButtonHierarchy } from '@components/atoms';
 import { SeedBox, SeedViewAndCopy } from '@components/molecules';
 import { useWalletContext } from '@hooks/use-context';
+import mixins from '@styles/mixins';
 
 export const RevealPrivatePhrase = (): JSX.Element => {
   const navigate = useNavigate();
@@ -39,7 +40,7 @@ export const RevealPrivatePhrase = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
diff --git a/packages/adena-extension/src/pages/certify/security-privacy/index.tsx b/packages/adena-extension/src/pages/certify/security-privacy/index.tsx
index 680ea80a..85f0a862 100644
--- a/packages/adena-extension/src/pages/certify/security-privacy/index.tsx
+++ b/packages/adena-extension/src/pages/certify/security-privacy/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import { Account, isLedgerAccount, isSeedAccount } from 'adena-module';
 
@@ -8,6 +8,7 @@ import { BottomFixedButton } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useRemoveAccount } from '@hooks/use-remove-account';
+import mixins from '@styles/mixins';
 
 const getMenuMakerInfo = (
   account: Account | null,
@@ -79,7 +80,7 @@ export const SecurityPrivacy = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
diff --git a/packages/adena-extension/src/pages/certify/seed-phrase/index.tsx b/packages/adena-extension/src/pages/certify/seed-phrase/index.tsx
index 812a2117..2a2fa158 100644
--- a/packages/adena-extension/src/pages/certify/seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/seed-phrase/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { ErrorText, DefaultInput } from '@components/atoms';
@@ -8,6 +8,7 @@ import { RoutePath } from '@router/path';
 import { WalletError } from '@common/errors';
 import { useAdenaContext } from '@hooks/use-context';
 import { validateInvalidPassword } from '@common/validation';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Reveal Seed Phrase',
@@ -15,7 +16,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
diff --git a/packages/adena-extension/src/pages/certify/settings/index.tsx b/packages/adena-extension/src/pages/certify/settings/index.tsx
index b40ad80e..f4762171 100644
--- a/packages/adena-extension/src/pages/certify/settings/index.tsx
+++ b/packages/adena-extension/src/pages/certify/settings/index.tsx
@@ -1,10 +1,12 @@
 import React, { useCallback } from 'react';
-import styled, { CSSProp, FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { FullButtonRightIcon } from '@components/atoms';
 import { BottomFixedButton } from '@components/molecules';
 import { RoutePath } from '@router/path';
+import mixins from '@styles/mixins';
+import { fonts } from '@styles/theme';
 
 const menuMakerInfo = [
   {
@@ -54,7 +56,7 @@ export const Settings = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
@@ -66,7 +68,7 @@ const Wrapper = styled.main`
     margin-bottom: 12px;
 
     .title {
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.header4};
+      ${fonts.header4};
     }
   }
 `;
diff --git a/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx b/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx
index 85d910b9..552dddff 100644
--- a/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Text, Button, ButtonHierarchy, Copy } from '@components/atoms';
 import { SeedBox, TitleWithDesc } from '@components/molecules';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Reveal Seed Phrase',
@@ -11,7 +12,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'stretch')};
+  ${mixins.flex('column', 'center', 'stretch')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
@@ -22,7 +23,7 @@ const Wrapper = styled.main`
 `;
 
 const SeedBoxWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'stretch')};
+  ${mixins.flex('column', 'center', 'stretch')};
   width: 100%;
   margin-bottom: auto;
   margin-top: 24px;
diff --git a/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx b/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx
index dbaf96f7..fc3ce8d4 100644
--- a/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { AdenaWallet, HDWalletKeyring, SeedAccount } from 'adena-module';
 
@@ -8,6 +8,7 @@ import { SeedBox, TitleWithDesc, TermsCheckbox, SeedViewAndCopy } from '@compone
 import { RoutePath } from '@router/path';
 import { useWalletContext } from '@hooks/use-context';
 import { useCurrentAccount } from '@hooks/use-current-account';
+import mixins from '@styles/mixins';
 
 const text = {
   title: 'Seed Phrase',
@@ -131,7 +132,7 @@ export const YourSeedPhrase = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 50px;
diff --git a/packages/adena-extension/src/pages/wallet/approve-login/index.tsx b/packages/adena-extension/src/pages/wallet/approve-login/index.tsx
index f0e5984d..bbf4fe65 100644
--- a/packages/adena-extension/src/pages/wallet/approve-login/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/approve-login/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 
@@ -15,10 +15,11 @@ import { useAdenaContext, useWalletContext } from '@hooks/use-context';
 import { WalletState } from '@states';
 import { useLoadAccounts } from '@hooks/use-load-accounts';
 import LoadingApproveTransaction from './loading-approve-transaction';
+import mixins from '@styles/mixins';
 
 const text = 'Enter\nYour Password';
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   max-width: 380px;
   min-height: 514px;
   padding: 29px 20px 24px;
diff --git a/packages/adena-extension/src/pages/wallet/approve-login/loading-approve-transaction.tsx b/packages/adena-extension/src/pages/wallet/approve-login/loading-approve-transaction.tsx
index 72c1f778..b693cbd1 100644
--- a/packages/adena-extension/src/pages/wallet/approve-login/loading-approve-transaction.tsx
+++ b/packages/adena-extension/src/pages/wallet/approve-login/loading-approve-transaction.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
 import { Loading, SkeletonBoxStyle } from '@components/atoms';
 import { GhostButtons } from '@components/molecules';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 interface ApproveProps {
   leftButtonText?: string;
@@ -42,7 +45,7 @@ const LoadingApproveTransaction = ({
 };
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   max-width: 380px;
   min-height: 514px;
   padding: 29px 20px 24px;
@@ -52,7 +55,7 @@ const Wrapper = styled.div`
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-end', 'space-between')}
+  ${mixins.flex('column', 'flex-end', 'space-between')}
   width: 80px;
   height: 80px;
   margin: 39px 0px 24px;
@@ -60,10 +63,10 @@ const SkeletonBox = styled(SkeletonBoxStyle)`
 `;
 
 const RoundedBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   height: 41px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   padding: 0px 18px;
 `;
 
diff --git a/packages/adena-extension/src/pages/wallet/deposit/index.tsx b/packages/adena-extension/src/pages/wallet/deposit/index.tsx
index 3df309c7..2aeb306b 100644
--- a/packages/adena-extension/src/pages/wallet/deposit/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/deposit/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Text, inputStyle, Button, ButtonHierarchy, Copy } from '@components/atoms';
@@ -10,29 +10,30 @@ import { useCurrentAccount } from '@hooks/use-current-account';
 import { formatAddress, formatNickname } from '@common/utils/client-utils';
 import { useAccountName } from '@hooks/use-account-name';
 import { TokenModel } from '@types';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'stretch')};
+  ${mixins.flex('column', 'center', 'stretch')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
 `;
 
 const QRCodeBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
-  background-color: ${({ theme }): string => theme.color.neutral[0]};
+  ${mixins.flex('row', 'center', 'center')};
+  background-color: ${theme.color.neutral[0]};
   padding: 10px;
   border-radius: 8px;
   margin: 40px 0px;
 `;
 
 const CopyInputBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   ${inputStyle};
-  border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  border: 1px solid ${theme.color.neutral[6]};
 
   & .nickname {
-    color: ${({ theme }): string => theme.color.neutral[2]};
+    color: ${theme.color.neutral[2]};
   }
 
   margin-bottom: 8px;
diff --git a/packages/adena-extension/src/pages/wallet/explore/index.tsx b/packages/adena-extension/src/pages/wallet/explore/index.tsx
index f3445466..fc754b68 100644
--- a/packages/adena-extension/src/pages/wallet/explore/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/explore/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useRecoilState } from 'recoil';
 
 import { Text } from '@components/atoms';
@@ -8,6 +8,7 @@ import theme from '@styles/theme';
 import { ExploreState } from '@states';
 import { useAdenaContext } from '@hooks/use-context';
 import LoadingExplore from './loading-explore';
+import mixins from '@styles/mixins';
 
 export const Explore = (): JSX.Element => {
   const { tokenService } = useAdenaContext();
@@ -67,13 +68,13 @@ const MoveToLink = styled.img`
 `;
 
 const Contents = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'center')};
+  ${mixins.flex('column', 'flex-start', 'center')};
   margin-left: 12px;
 `;
 
 const BoxContainer = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'flex-start')};
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  ${mixins.flex('row', 'center', 'flex-start')};
+  background-color: ${theme.color.neutral[8]};
   width: 100%;
   height: 60px;
   padding: 10px 17px;
@@ -83,7 +84,7 @@ const BoxContainer = styled.div`
 `;
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
diff --git a/packages/adena-extension/src/pages/wallet/explore/loading-explore.tsx b/packages/adena-extension/src/pages/wallet/explore/loading-explore.tsx
index 9eb44809..55c8fe80 100644
--- a/packages/adena-extension/src/pages/wallet/explore/loading-explore.tsx
+++ b/packages/adena-extension/src/pages/wallet/explore/loading-explore.tsx
@@ -1,28 +1,29 @@
 import React, { ReactElement } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { Loading, SkeletonBoxStyle } from '@components/atoms';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   position: relative;
   width: 100%;
   z-index: 1;
 `;
 
 const RoundsBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-end', 'center')};
+  ${mixins.flex('column', 'flex-end', 'center')};
   margin-left: auto;
 `;
 
 const ListBoxWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')}
+  ${mixins.flex('column', 'center', 'flex-start')}
   width: 100%;
   gap: 12px;
   padding-top: 12px;
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'flex-start')}
+  ${mixins.flex('row', 'center', 'flex-start')}
   width: 100%;
   height: 60px;
 `;
diff --git a/packages/adena-extension/src/pages/wallet/history/index.tsx b/packages/adena-extension/src/pages/wallet/history/index.tsx
index b3aeeb6e..3af24d19 100644
--- a/packages/adena-extension/src/pages/wallet/history/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/history/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
 import BigNumber from 'bignumber.js';
 import { useNavigate } from 'react-router-dom';
 import { useInfiniteQuery } from '@tanstack/react-query';
@@ -13,6 +13,7 @@ import { TransactionHistoryMapper } from '@repositories/transaction/mapper/trans
 import UnknownTokenIcon from '@assets/common-unknown-token.svg';
 import useScrollHistory from '@hooks/use-scroll-history';
 import { HISTORY_FETCH_INTERVAL_TIME } from '@common/constants/interval.constant';
+import { fonts } from '@styles/theme';
 
 const HistoryLayout = styled.div`
   display: flex;
@@ -26,7 +27,7 @@ const HistoryLayout = styled.div`
     margin-bottom: 12px;
 
     .title {
-      ${({ theme }): FlattenSimpleInterpolation => theme.fonts.header4};
+      ${fonts.header4};
     }
   }
 `;
diff --git a/packages/adena-extension/src/pages/wallet/nft/index.tsx b/packages/adena-extension/src/pages/wallet/nft/index.tsx
index 5c2a4e28..d48998d8 100644
--- a/packages/adena-extension/src/pages/wallet/nft/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/nft/index.tsx
@@ -1,16 +1,17 @@
 import React, { useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text } from '@components/atoms';
 import { LoadingNft } from '@components/molecules';
 import theme from '@styles/theme';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  background-color: ${theme.color.neutral[7]};
   .desc {
     position: absolute;
     top: 210px;
diff --git a/packages/adena-extension/src/pages/wallet/search/index.tsx b/packages/adena-extension/src/pages/wallet/search/index.tsx
index e68daccd..dcee0ad4 100644
--- a/packages/adena-extension/src/pages/wallet/search/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/search/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import BigNumber from 'bignumber.js';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -15,6 +15,8 @@ import UnknownTokenIcon from '@assets/common-unknown-token.svg';
 import useHistoryData from '@hooks/use-history-data';
 
 import { TokenBalanceType } from '@types';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 const Wrapper = styled.main`
   width: 100%;
@@ -33,7 +35,7 @@ const SearchClickBtn = styled.button`
   width: 24px;
   height: 24px;
   background: url(${search}) no-repeat center center;
-  ${({ theme }): CSSProp => theme.mixins.posTopCenterLeft('11px')};
+  ${mixins.posTopCenterLeft('11px')};
   cursor: default;
 `;
 
@@ -45,7 +47,7 @@ const InputResetBtn = styled.button`
   width: 24px;
   height: 24px;
   background: url(${cancel}) no-repeat center center;
-  ${({ theme }): CSSProp => theme.mixins.posTopCenterRight('11px')}
+  ${mixins.posTopCenterRight('11px')}
 `;
 
 const DataListWrap = styled.div`
@@ -58,7 +60,7 @@ const DataListWrap = styled.div`
 `;
 
 const ButtonWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   position: fixed;
   bottom: 0px;
   left: 0px;
@@ -66,7 +68,7 @@ const ButtonWrap = styled.div`
   height: 96px;
   padding: 0px 20px;
   box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  background-color: ${theme.color.neutral[7]};
   z-index: 1;
 `;
 
diff --git a/packages/adena-extension/src/pages/wallet/token-details/index.tsx b/packages/adena-extension/src/pages/wallet/token-details/index.tsx
index ce785340..7cc489ed 100644
--- a/packages/adena-extension/src/pages/wallet/token-details/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/token-details/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import BigNumber from 'bignumber.js';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -25,9 +25,10 @@ import { HISTORY_FETCH_INTERVAL_TIME } from '@common/constants/interval.constant
 import { TokenBalanceType } from '@types';
 
 import LoadingTokenDetails from './loading-token-details';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   width: 100%;
   height: 100%;
   padding-top: 24px;
@@ -55,7 +56,7 @@ const Wrapper = styled.main`
 `;
 
 const HeaderWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   position: relative;
   width: 100%;
   margin-bottom: 20px;
@@ -73,7 +74,7 @@ const EtcIcon = styled.div`
   border-radius: 50%;
   cursor: pointer;
   &.show-tooltip {
-    background-color: ${({ theme }): string => theme.color.neutral[6]};
+    background-color: ${theme.color.neutral[6]};
     & > .static-tooltip {
       visibility: visible;
       transition: all 0.1s ease-in-out;
diff --git a/packages/adena-extension/src/pages/wallet/token-details/loading-token-details.tsx b/packages/adena-extension/src/pages/wallet/token-details/loading-token-details.tsx
index aa7bf435..a27dd0c7 100644
--- a/packages/adena-extension/src/pages/wallet/token-details/loading-token-details.tsx
+++ b/packages/adena-extension/src/pages/wallet/token-details/loading-token-details.tsx
@@ -1,27 +1,29 @@
 import React, { ReactElement } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
+
 import { Loading, SkeletonBoxStyle } from '@components/atoms';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-start', 'flex-start')};
+  ${mixins.flex('column', 'flex-start', 'flex-start')};
   position: relative;
   width: 100%;
 `;
 
 const RoundsBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-end', 'center')};
+  ${mixins.flex('column', 'flex-end', 'center')};
   margin-left: auto;
 `;
 
 const ListBoxWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')}
+  ${mixins.flex('column', 'center', 'flex-start')}
   width: 100%;
   gap: 12px;
   padding-top: 12px;
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'flex-start')}
+  ${mixins.flex('row', 'center', 'flex-start')}
   width: 100%;
   height: 60px;
 `;
diff --git a/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx b/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
index 62e324e6..e51f2010 100644
--- a/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled, { CSSProp, FlattenSimpleInterpolation } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Text, CopyIconButton, Button, ButtonHierarchy } from '@components/atoms';
@@ -11,6 +11,8 @@ import ContractIcon from '@assets/contract.svg';
 import AddPackageIcon from '@assets/addpkg.svg';
 import { useNetwork } from '@hooks/use-network';
 import { TransactionInfo } from '@types';
+import theme, { fonts } from '@styles/theme';
+import mixins from '@styles/mixins';
 
 interface DLProps {
   color?: string;
@@ -167,7 +169,7 @@ export const TransactionDetail = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')};
+  ${mixins.flex('column', 'center', 'flex-start')};
   width: 100%;
   padding-top: 30px;
   .status-icon {
@@ -184,16 +186,16 @@ const Wrapper = styled.main`
     width: 100%;
     padding: 24px 20px;
     bottom: 0;
-    background: ${({ theme }): string => theme.color.neutral[7]};
+    background: ${theme.color.neutral[7]};
     box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.4);
   }
 `;
 
 const TokenBox = styled.div<{ color: string }>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   height: 70px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   border: 1px solid ${({ color }): string => color};
   border-radius: 18px;
   padding: 0px 15px;
@@ -212,28 +214,28 @@ const TokenBox = styled.div<{ color: string }>`
 `;
 
 const DataBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'center')};
+  ${mixins.flex('column', 'center', 'center')};
   width: 100%;
   border-radius: 18px;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   margin-bottom: 96px;
 `;
 
 const DLWrap = styled.dl<DLProps>`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
-  ${({ theme }): FlattenSimpleInterpolation => theme.fonts.body1Reg};
+  ${mixins.flex('row', 'center', 'space-between')};
+  ${fonts.body1Reg};
   width: 100%;
   height: 40px;
   padding: 0px 18px;
   :not(:last-child) {
-    border-bottom: 2px solid ${({ theme }): string => theme.color.neutral[7]};
+    border-bottom: 2px solid ${theme.color.neutral[7]};
   }
   dd,
   dt {
     font: inherit;
   }
   dt {
-    color: ${({ theme }): string => theme.color.neutral[9]};
+    color: ${theme.color.neutral[9]};
   }
   dd {
     display: flex;
@@ -247,7 +249,7 @@ const DLWrap = styled.dl<DLProps>`
 `;
 
 const StatusInfo = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   .link-icon {
     display: flex;
     cursor: pointer;
@@ -255,7 +257,7 @@ const StatusInfo = styled.div`
 
     svg {
       path {
-        fill: ${({ theme }): string => theme.color.neutral[9]};
+        fill: ${theme.color.neutral[9]};
         transition: 0.2s;
       }
     }
@@ -263,7 +265,7 @@ const StatusInfo = styled.div`
     :hover {
       svg {
         path {
-          fill: ${({ theme }): string => theme.color.neutral[0]};
+          fill: ${theme.color.neutral[0]};
         }
       }
     }
diff --git a/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx b/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
index 24dffbca..d46fe791 100644
--- a/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import logo from '@assets/logo-default.svg';
@@ -11,6 +11,7 @@ import { useLoadAccounts } from '@hooks/use-load-accounts';
 import { existsPopups } from '@inject/message/methods';
 
 import GoogleSignInButton from './google-signin-button';
+import mixins from '@styles/mixins';
 
 export const WalletCreate = (): JSX.Element => {
   const navigate = useNavigate();
@@ -117,12 +118,12 @@ const PoweredByWeb3AuthWihDivider = (): JSX.Element => (
 const Divider = styled.span`
   width: calc(100% - 48px);
   height: 1px;
-  background-color: ${({ theme }): string => theme.color.neutral[4]};
+  background-color: ${theme.color.neutral[4]};
   margin: 20px 0px;
 `;
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'space-between')};
+  ${mixins.flex('column', 'center', 'space-between')};
   width: 100%;
   height: 100%;
   & > header {
diff --git a/packages/adena-extension/src/router/header/approve-menu/index.tsx b/packages/adena-extension/src/router/header/approve-menu/index.tsx
index cf9d65d3..08a63f26 100644
--- a/packages/adena-extension/src/router/header/approve-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/approve-menu/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import theme from '@styles/theme';
 import { Text, CopyTooltip, StatusDot } from '@components/atoms';
@@ -14,15 +14,16 @@ import { useCurrentAccount } from '@hooks/use-current-account';
 import { useAdenaContext } from '@hooks/use-context';
 import { useAccountName } from '@hooks/use-account-name';
 import { useNetwork } from '@hooks/use-network';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;
   padding: 0px 20px 0px 12px;
-  border-bottom: 1px solid ${({ theme }): string => theme.color.neutral[6]};
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'flex-end')};
+  border-bottom: 1px solid ${theme.color.neutral[6]};
+  ${mixins.flex('row', 'center', 'flex-end')};
   .t-approve {
-    ${({ theme }): CSSProp => theme.mixins.positionCenter()}
+    ${mixins.positionCenter()}
   }
 `;
 
diff --git a/packages/adena-extension/src/router/header/arrow-title-menu/index.tsx b/packages/adena-extension/src/router/header/arrow-title-menu/index.tsx
index 6299de94..4b6bf5c5 100644
--- a/packages/adena-extension/src/router/header/arrow-title-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/arrow-title-menu/index.tsx
@@ -1,18 +1,20 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Text, LeftArrowBtn } from '@components/atoms';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 interface ArrowTitleMenuProps {
   title?: string;
 }
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   width: 100%;
   height: 100%;
-  border-bottom: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  border-bottom: 1px solid ${theme.color.neutral[6]};
   position: relative;
   padding: 0px 18px 0px 12px;
 `;
diff --git a/packages/adena-extension/src/router/header/close-title-menu/index.tsx b/packages/adena-extension/src/router/header/close-title-menu/index.tsx
index 68a660e5..63120da3 100644
--- a/packages/adena-extension/src/router/header/close-title-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/close-title-menu/index.tsx
@@ -1,17 +1,20 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
+
 import { Text, Icon } from '@components/atoms';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 interface CloseTitleMenuProps {
   title?: string;
 }
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   width: 100%;
   height: 100%;
-  border-bottom: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  border-bottom: 1px solid ${theme.color.neutral[6]};
   position: relative;
   padding: 0px 18px 0px 12px;
 `;
@@ -24,14 +27,14 @@ const Button = styled.button`
 
   .icon-close {
     * {
-      stroke: ${({ theme }): string => theme.color.neutral[9]};
+      stroke: ${theme.color.neutral[9]};
       transition: 0.2s;
     }
   }
 
   &:hover {
     * {
-      stroke: ${({ theme }): string => theme.color.neutral[0]};
+      stroke: ${theme.color.neutral[0]};
     }
   }
 `;
diff --git a/packages/adena-extension/src/router/header/home-menu/index.tsx b/packages/adena-extension/src/router/header/home-menu/index.tsx
index 98ed5497..34cf6aa9 100644
--- a/packages/adena-extension/src/router/header/home-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/home-menu/index.tsx
@@ -1,27 +1,28 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { CSSProp } from 'styled-components';
 
 import logo from '@assets/logo-withIcon.svg';
 import { HamburgerMenuBtn } from '@components/atoms';
 
 import { RoutePath } from '@router/path';
 import { SideMenuLayout } from '@components/pages/router/side-menu-layout';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;
-  border-bottom: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  border-bottom: 1px solid ${theme.color.neutral[6]};
 `;
 
 const Header = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'flex-start')}
+  ${mixins.flex('row', 'center', 'flex-start')}
   width: 100%;
   height: 100%;
   padding: 0px 20px 0px 12px;
   position: relative;
   & > img {
-    ${({ theme }): CSSProp => theme.mixins.positionCenter('absolute')}
+    ${mixins.positionCenter()}
   }
 `;
 
diff --git a/packages/adena-extension/src/router/header/index.tsx b/packages/adena-extension/src/router/header/index.tsx
index 1ff33037..b2aedb72 100644
--- a/packages/adena-extension/src/router/header/index.tsx
+++ b/packages/adena-extension/src/router/header/index.tsx
@@ -1,22 +1,25 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useLocation, useMatch } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
+
 import { RoutePath } from '@router/path';
+import { CommonState, WalletState } from '@states';
+import { useNetwork } from '@hooks/use-network';
+import theme from '@styles/theme';
+
 import { HomeMenu } from './home-menu';
 import { TopMenu } from './top-menu';
 import { ProgressMenu } from './progress-menu';
 import ApproveMenu from './approve-menu';
-import { useRecoilState } from 'recoil';
-import { CommonState, WalletState } from '@states';
 import { ArrowTitleMenu } from './arrow-title-menu';
 import { TabMenu } from './tab-menu';
-import { useNetwork } from '@hooks/use-network';
 import { CloseTitleMenu } from './close-title-menu';
 
 const Wrapper = styled.header`
   width: 100%;
   height: 48px;
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  background-color: ${theme.color.neutral[7]};
   position: sticky;
   top: 0px;
   z-index: 2;
diff --git a/packages/adena-extension/src/router/header/progress-menu/index.tsx b/packages/adena-extension/src/router/header/progress-menu/index.tsx
index c70edaae..bc4877f8 100644
--- a/packages/adena-extension/src/router/header/progress-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/progress-menu/index.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { LeftArrowBtn } from '@components/atoms';
 import logo from '@assets/logo-withIcon.svg';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 type ProgressLevel = 'first' | 'second' | 'third';
 
@@ -15,10 +17,10 @@ interface ProgressMenuProps {
 }
 
 const Wrapper = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
+  ${mixins.flex('row', 'center', 'center')};
   width: 100%;
   height: 100%;
-  border-bottom: 4px solid ${({ theme }): string => theme.color.neutral[6]};
+  border-bottom: 4px solid ${theme.color.neutral[6]};
   position: relative;
   padding: 0px 18px 0px 12px;
 `;
@@ -29,8 +31,8 @@ const Button = styled(LeftArrowBtn)`
 `;
 
 const Hr = styled.hr<ProgressMenuProps>`
-  border-color: ${({ theme }): string => theme.color.primary[3]};
-  background-color: ${({ theme }): string => theme.color.primary[3]};
+  border-color: ${theme.color.primary[3]};
+  background-color: ${theme.color.primary[3]};
   width: ${({ progressLevel }): '30%' | '60%' | '100%' =>
     progressLevel === 'first' ? '30%' : progressLevel === 'second' ? '60%' : '100%'};
   height: 4px;
diff --git a/packages/adena-extension/src/router/header/tab-menu/index.tsx b/packages/adena-extension/src/router/header/tab-menu/index.tsx
index 66b455c8..70cad644 100644
--- a/packages/adena-extension/src/router/header/tab-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/tab-menu/index.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
+import styled from 'styled-components';
+
 import { Text } from '@components/atoms';
-import styled, { CSSProp } from 'styled-components';
 import IconLogo from '../../../install/assets/logo-typeB.svg';
 import IconHelp from '@assets/help-fill.svg';
+import mixins from '@styles/mixins';
+import theme from '@styles/theme';
 
 const Container = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')}
+  ${mixins.flex('row', 'center', 'space-between')}
   position: absolute;
   top: 0;
   display: flex;
@@ -14,13 +17,13 @@ const Container = styled.div`
   padding: 0;
   width: 100%;
   height: fit-content;
-  background-color: ${({ theme }): string => theme.color.neutral[8]};
+  background-color: ${theme.color.neutral[8]};
   padding: 40px 40px 0px;
   .help-text {
     font-size: 19px;
   }
   .help-btn {
-    ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')}
+    ${mixins.flex('row', 'center', 'center')}
     font-size: 19px;
     font-weight: 600;
     line-height: 24px;
diff --git a/packages/adena-extension/src/router/header/top-menu/index.tsx b/packages/adena-extension/src/router/header/top-menu/index.tsx
index 856b44fd..cb213e1e 100644
--- a/packages/adena-extension/src/router/header/top-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/top-menu/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 
 import { Text, CopyTooltip, StatusDot, HamburgerMenuBtn } from '@components/atoms';
 
@@ -11,21 +11,22 @@ import { useAdenaContext } from '@hooks/use-context';
 import { useAccountName } from '@hooks/use-account-name';
 import { useNetwork } from '@hooks/use-network';
 import { SideMenuLayout } from '@components/pages/router/side-menu-layout';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;
   padding: 0px 20px 0px 12px;
-  border-bottom: 1px solid ${({ theme }): string => theme.color.neutral[6]};
+  border-bottom: 1px solid ${theme.color.neutral[6]};
 `;
 
 const Header = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
+  ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   height: 100%;
   position: relative;
   & > img {
-    ${({ theme }): CSSProp => theme.mixins.positionCenter('absolute')}
+    ${mixins.positionCenter()}
   }
 `;
 
diff --git a/packages/adena-extension/src/router/loading-main.tsx b/packages/adena-extension/src/router/loading-main.tsx
index ac847a95..149b1fac 100644
--- a/packages/adena-extension/src/router/loading-main.tsx
+++ b/packages/adena-extension/src/router/loading-main.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, useMemo } from 'react';
 import { useRecoilState } from 'recoil';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useMatch } from 'react-router-dom';
 
 import { Loading, SkeletonBoxStyle } from '@components/atoms';
@@ -9,32 +9,34 @@ import { useTokenBalance } from '@hooks/use-token-balance';
 import { CommonState, WalletState } from '@states';
 import { useNetwork } from '@hooks/use-network';
 import { GhostButtons } from '@components/molecules';
+import theme from '@styles/theme';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'stretch')};
+  ${mixins.flex('column', 'center', 'stretch')};
   position: absolute;
   width: 100%;
   height: 100%;
   padding: 78px 24px;
   top: 0px;
   z-index: 99;
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  background-color: ${theme.color.neutral[7]};
 `;
 
 const RoundsBox = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'flex-end', 'center')};
+  ${mixins.flex('column', 'flex-end', 'center')};
   margin-left: auto;
 `;
 
 const ListBoxWrap = styled.div`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'flex-start')}
+  ${mixins.flex('column', 'center', 'flex-start')}
   width: 100%;
   gap: 12px;
   margin-top: 31px;
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'flex-start')}
+  ${mixins.flex('row', 'center', 'flex-start')}
   width: 100%;
   height: 60px;
 `;
diff --git a/packages/adena-extension/src/router/navigation/index.tsx b/packages/adena-extension/src/router/navigation/index.tsx
index 91f9430f..0097e4aa 100644
--- a/packages/adena-extension/src/router/navigation/index.tsx
+++ b/packages/adena-extension/src/router/navigation/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useMatch, useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 
@@ -7,12 +7,14 @@ import { RoutePath } from '@router/path';
 import { Icon, IconName } from '@components/atoms';
 import { CommonState, WalletState } from '@states';
 import { useNetwork } from '@hooks/use-network';
+import theme from '@styles/theme';
+import mixins from '@styles/mixins';
 
 const Wrapper = styled.nav`
   width: 100%;
   height: 60px;
-  ${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
-  background-color: ${({ theme }): string => theme.color.neutral[7]};
+  ${mixins.flex('row', 'center', 'space-between')};
+  background-color: ${theme.color.neutral[7]};
   filter: drop-shadow(0px -4px 4px rgba(0, 0, 0, 0.25));
   padding: 0px 40px;
   gap: 40px;
@@ -26,10 +28,10 @@ const Wrapper = styled.nav`
     &:hover,
     &.active {
       .icon-default {
-        fill: ${({ theme }): string => theme.color.neutral[0]};
+        fill: ${theme.color.neutral[0]};
       }
       .icon-primary {
-        fill: ${({ theme }): string => theme.color.primary[3]};
+        fill: ${theme.color.primary[3]};
       }
     }
   }
diff --git a/packages/adena-extension/src/styles/mixins.ts b/packages/adena-extension/src/styles/mixins.ts
index 4900dbf8..ec93aa80 100644
--- a/packages/adena-extension/src/styles/mixins.ts
+++ b/packages/adena-extension/src/styles/mixins.ts
@@ -1,49 +1,48 @@
+import { CSSProperties } from 'react';
 import { css, CSSProp } from 'styled-components';
 
-type MixinsKeyType = 'flexbox' | 'positionCenter' | 'posTopCenterRight' | 'posTopCenterLeft' | 'posTopLeft';
-
 export type MixinsType = {
-  [key in MixinsKeyType]: (...p: any[]) => CSSProp;
+  flex: (
+    direction?: CSSProperties['flexDirection'],
+    align?: CSSProperties['alignItems'],
+    justify?: CSSProperties['justifyContent'],
+  ) => CSSProp;
+  positionCenter: () => CSSProp;
+  posTopCenterRight: (right?: string) => CSSProp;
+  posTopCenterLeft: (left?: string) => CSSProp;
+  posTopLeft: (top?: string) => CSSProp;
 };
 
 const mixins: MixinsType = {
-  flexbox: (direction = 'row', align = 'center', justify = 'center', display = true) => css`
-    display: ${display ? 'flex' : 'inline-flex'};
+  flex: (direction = 'row', align = 'center', justify = 'center') => css`
+    display: flex;
     flex-direction: ${direction};
     align-items: ${align};
     justify-content: ${justify};
   `,
-  positionCenter: () => {
-    return css`
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    `;
-  },
-  posTopCenterRight: (right = '0px') => {
-    return css`
-      position: absolute;
-      top: 50%;
-      right: ${right};
-      transform: translateY(-50%);
-    `;
-  },
-  posTopCenterLeft: (left = '0px') => {
-    return css`
-      position: absolute;
-      top: 50%;
-      left: ${left};
-      transform: translateY(-50%);
-    `;
-  },
-  posTopLeft: (top = '0px') => {
-    return css`
-      position: absolute;
-      top: ${top};
-      left: 0px;
-    `;
-  },
+  positionCenter: () => css`
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  `,
+  posTopCenterRight: (right = '0px') => css`
+    position: absolute;
+    top: 50%;
+    right: ${right};
+    transform: translateY(-50%);
+  `,
+  posTopCenterLeft: (left = '0px') => css`
+    position: absolute;
+    top: 50%;
+    left: ${left};
+    transform: translateY(-50%);
+  `,
+  posTopLeft: (top = '0px') => css`
+    position: absolute;
+    top: ${top};
+    left: 0px;
+  `,
 } as const;
 
 export default mixins;

From 2ef6bc08fdbc1ff2de5a6925c256124c311e78a4 Mon Sep 17 00:00:00 2001
From: blue <skqksh@gmail.com>
Date: Fri, 22 Dec 2023 00:27:10 +0900
Subject: [PATCH 5/7] refactor. change enum to type for button hierarchy
 attribute

---
 .../src/components/atoms/button/index.tsx     | 23 +++++++------------
 .../approve-ledger-loading/index.tsx          |  4 ++--
 .../molecules/bottom-fixed-button/index.tsx   |  6 ++---
 .../cancel-and-confirm-button/index.tsx       |  8 +++----
 .../molecules/close-shadow-button/index.tsx   |  4 ++--
 .../molecules/double-button/index.tsx         | 14 +++++------
 .../molecules/ghost-button/index.tsx          |  6 ++---
 .../transfer-ledger-loading.tsx               |  4 ++--
 .../transfer-ledger-reject.tsx                |  4 ++--
 .../connect/connect-fail.tsx                  |  4 ++--
 .../connect/connect-init.tsx                  |  4 ++--
 .../connect/connect-request-wallet-load.tsx   |  4 ++--
 .../connect/connect-request-wallet.tsx        |  9 ++------
 .../connect/connect-request.tsx               |  4 ++--
 .../finish/finish.tsx                         |  9 ++------
 .../ledger-all-set/ledger-all-set.tsx         |  9 ++------
 .../ledger-password/ledger-password.tsx       | 10 ++------
 .../select-account/select-account.tsx         |  3 +--
 .../pages/certify/create-password/index.tsx   | 10 ++------
 .../src/pages/certify/enter-seed/index.tsx    |  3 +--
 .../export-private-key/ApproachPrivateKey.tsx |  4 ++--
 .../pages/certify/forgot-password/index.tsx   |  4 ++--
 .../certify/generate-seed-phrase/index.tsx    |  4 ++--
 .../connect/google-connect-failed.tsx         |  9 ++------
 .../google-login/connect/google-connect.tsx   |  9 ++------
 .../certify/import-private-key/index.tsx      |  9 ++------
 .../src/pages/certify/launch-adena/index.tsx  |  9 ++------
 .../src/pages/certify/login/index.tsx         |  9 ++------
 .../pages/certify/remove-account/index.tsx    |  4 ++--
 .../src/pages/certify/reset-wallet/index.tsx  |  6 ++---
 .../certify/reveal-private-phrase/index.tsx   |  4 ++--
 .../pages/certify/view-seed-phrase/index.tsx  |  4 ++--
 .../pages/certify/your-seed-phrase/index.tsx  |  3 +--
 .../src/pages/wallet/approve-login/index.tsx  |  9 ++------
 .../src/pages/wallet/deposit/index.tsx        |  9 ++------
 .../src/pages/wallet/search/index.tsx         |  8 ++-----
 .../pages/wallet/transaction-detail/index.tsx |  4 ++--
 .../wallet-create/google-signin-button.tsx    |  4 ++--
 .../src/pages/wallet/wallet-create/index.tsx  |  8 +++----
 39 files changed, 93 insertions(+), 169 deletions(-)

diff --git a/packages/adena-extension/src/components/atoms/button/index.tsx b/packages/adena-extension/src/components/atoms/button/index.tsx
index 70027e8a..4845b08a 100644
--- a/packages/adena-extension/src/components/atoms/button/index.tsx
+++ b/packages/adena-extension/src/components/atoms/button/index.tsx
@@ -8,14 +8,7 @@ type XOR<T, U> = T | U extends Record<string, unknown>
   ? (Without<T, U> & U) | (Without<U, T> & T)
   : T | U;
 
-export enum ButtonHierarchy {
-  Normal = 'normal',
-  Primary = 'Primary',
-  Ghost = 'Ghost',
-  Dark = 'Dark',
-  Danger = 'Danger',
-  Custom = 'Custom',
-}
+type ButtonHierarchy = 'normal' | 'primary' | 'ghost' | 'dark' | 'danger' | 'custom';
 
 export const modeVariants = {
   normal: css`
@@ -73,7 +66,7 @@ export const modeVariants = {
   `,
 };
 
-type ButtonProps = XOR<
+export type ButtonProps = XOR<
   {
     fullWidth?: boolean;
     height?: CSSProperties['height'];
@@ -119,12 +112,12 @@ const ButtonWrapper = styled.button<ButtonProps>`
   }};
   margin: ${(props): any => props.margin};
   ${({ hierarchy, bgColor }): any => {
-    if (hierarchy === ButtonHierarchy.Primary) return modeVariants.primary;
-    if (hierarchy === ButtonHierarchy.Normal) return modeVariants.normal;
-    if (hierarchy === ButtonHierarchy.Ghost) return modeVariants.ghost;
-    if (hierarchy === ButtonHierarchy.Dark) return modeVariants.dark;
-    if (hierarchy === ButtonHierarchy.Danger) return modeVariants.danger;
-    if (hierarchy === ButtonHierarchy.Custom)
+    if (hierarchy === 'primary') return modeVariants.primary;
+    if (hierarchy === 'normal') return modeVariants.normal;
+    if (hierarchy === 'ghost') return modeVariants.ghost;
+    if (hierarchy === 'dark') return modeVariants.dark;
+    if (hierarchy === 'danger') return modeVariants.danger;
+    if (hierarchy === 'custom')
       return css`
         background-color: ${bgColor};
       `;
diff --git a/packages/adena-extension/src/components/molecules/approve-ledger-loading/index.tsx b/packages/adena-extension/src/components/molecules/approve-ledger-loading/index.tsx
index e21b0c3b..a997e2a9 100644
--- a/packages/adena-extension/src/components/molecules/approve-ledger-loading/index.tsx
+++ b/packages/adena-extension/src/components/molecules/approve-ledger-loading/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Icon, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import { ApproveLedgerLoadingWrapper } from './approve-ledger-loading.styles';
 
@@ -18,7 +18,7 @@ export const ApproveLedgerLoading: React.FC<ApproveLedgerLoadingProps> = ({ onCl
       />
       <Button
         fullWidth
-        hierarchy={ButtonHierarchy.Dark}
+        hierarchy='dark'
         className={'cancel-button'}
         margin='auto 0px 0px'
         onClick={onClickCancel}
diff --git a/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx b/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx
index 6f58de28..31d021c0 100644
--- a/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx
@@ -1,18 +1,18 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { Button, Text, ButtonHierarchy } from '@components/atoms';
+import { Button, ButtonProps, Text } from '@components/atoms';
 import mixins from '@styles/mixins';
 import theme from '@styles/theme';
 
 interface BottomFixedButtonProps {
-  hierarchy?: ButtonHierarchy;
+  hierarchy?: ButtonProps['hierarchy'];
   onClick: () => unknown;
   text?: string;
 }
 
 export const BottomFixedButton = ({
-  hierarchy = ButtonHierarchy.Dark,
+  hierarchy = 'dark',
   onClick,
   text = 'Close',
 }: BottomFixedButtonProps): JSX.Element => {
diff --git a/packages/adena-extension/src/components/molecules/cancel-and-confirm-button/index.tsx b/packages/adena-extension/src/components/molecules/cancel-and-confirm-button/index.tsx
index 689ed7ac..2cbf5920 100644
--- a/packages/adena-extension/src/components/molecules/cancel-and-confirm-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/cancel-and-confirm-button/index.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import styled from 'styled-components';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button, ButtonProps } from '@components/atoms';
 import mixins from '@styles/mixins';
 
 interface DefaultButtonProps {
@@ -11,7 +11,7 @@ interface DefaultButtonProps {
 
 interface ConfirmButtonProps extends DefaultButtonProps {
   text: string;
-  hierarchy?: ButtonHierarchy;
+  hierarchy?: ButtonProps['hierarchy'];
 }
 
 interface CancelAndConfirmLocation {
@@ -34,7 +34,7 @@ export const CancelAndConfirmButton = ({
     <Wrapper>
       <Button
         fullWidth
-        hierarchy={ButtonHierarchy.Dark}
+        hierarchy='dark'
         onClick={cancelButtonProps.onClick}
         {...cancelButtonProps.props}
       >
@@ -42,7 +42,7 @@ export const CancelAndConfirmButton = ({
       </Button>
       <Button
         fullWidth
-        hierarchy={confirmButtonProps.hierarchy ?? ButtonHierarchy.Primary}
+        hierarchy={confirmButtonProps.hierarchy ?? 'primary'}
         onClick={confirmButtonProps.onClick}
         {...confirmButtonProps.props}
       >
diff --git a/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx b/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx
index 8a2683a0..b3c2ab54 100644
--- a/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import mixins from '@styles/mixins';
 import theme from '@styles/theme';
 
@@ -12,7 +12,7 @@ interface Props {
 export const CloseShadowButton = ({ onClick }: Props): JSX.Element => {
   return (
     <ButtonWrap>
-      <Button fullWidth hierarchy={ButtonHierarchy.Dark} onClick={onClick}>
+      <Button fullWidth hierarchy='dark' onClick={onClick}>
         <Text type='body1Bold'>Close</Text>
       </Button>
     </ButtonWrap>
diff --git a/packages/adena-extension/src/components/molecules/double-button/index.tsx b/packages/adena-extension/src/components/molecules/double-button/index.tsx
index 2394067d..94176e23 100644
--- a/packages/adena-extension/src/components/molecules/double-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/double-button/index.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { FontsType } from '@styles/theme';
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button, ButtonProps } from '@components/atoms';
 import mixins from '@styles/mixins';
 
-interface ButtonProps {
+interface EachButtonProps {
   onClick: () => void;
   text: string;
   props?: React.ComponentPropsWithoutRef<'button'>;
-  hierarchy?: ButtonHierarchy;
+  hierarchy?: ButtonProps['hierarchy'];
   bgColor?: string;
   fontType?: FontsType;
 }
@@ -19,8 +19,8 @@ interface WrapperStyleProps {
 }
 
 interface DoubleButtonProps extends WrapperStyleProps {
-  leftProps: ButtonProps;
-  rightProps: ButtonProps;
+  leftProps: EachButtonProps;
+  rightProps: EachButtonProps;
 }
 
 const Wrapper = styled.div<WrapperStyleProps>`
@@ -35,7 +35,7 @@ export const DoubleButton = ({ margin, leftProps, rightProps }: DoubleButtonProp
     <Wrapper margin={margin}>
       <Button
         fullWidth
-        hierarchy={leftProps.hierarchy ?? ButtonHierarchy.Dark}
+        hierarchy={leftProps.hierarchy ?? 'dark'}
         onClick={leftProps.onClick}
         bgColor={leftProps.bgColor}
         {...leftProps.props}
@@ -44,7 +44,7 @@ export const DoubleButton = ({ margin, leftProps, rightProps }: DoubleButtonProp
       </Button>
       <Button
         fullWidth
-        hierarchy={rightProps.hierarchy ?? ButtonHierarchy.Primary}
+        hierarchy={rightProps.hierarchy ?? 'primary'}
         onClick={rightProps.onClick}
         bgColor={rightProps.bgColor}
         {...rightProps.props}
diff --git a/packages/adena-extension/src/components/molecules/ghost-button/index.tsx b/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
index 2248c5c1..ec782d05 100644
--- a/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Button, ButtonHierarchy } from '@components/atoms';
+import { Button } from '@components/atoms';
 import mixins from '@styles/mixins';
 import theme, { fonts } from '@styles/theme';
 
@@ -29,10 +29,10 @@ const GhostBtn = styled(Button)`
 export const GhostButtons = ({ left, right, className }: GhostButtonsProps): JSX.Element => {
   return (
     <GhostBtnWrap className={className}>
-      <GhostBtn fullWidth height='48px' hierarchy={ButtonHierarchy.Ghost} disabled>
+      <GhostBtn fullWidth height='48px' hierarchy='ghost' disabled>
         {left}
       </GhostBtn>
-      <GhostBtn fullWidth height='48px' hierarchy={ButtonHierarchy.Ghost} disabled>
+      <GhostBtn fullWidth height='48px' hierarchy='ghost' disabled>
         {right}
       </GhostBtn>
     </GhostBtnWrap>
diff --git a/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.tsx b/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.tsx
index 48eae899..6483bc04 100644
--- a/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Icon, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import { TransferLedgerLoadingWrapper } from './transfer-ledger-loading.styles';
 
@@ -20,7 +20,7 @@ const TransferLedgerLoading: React.FC<TransferLedgerLoadingProps> = ({ onClickCa
       <TitleWithDesc title={text.title} desc={text.desc} />
       <Button
         fullWidth
-        hierarchy={ButtonHierarchy.Dark}
+        hierarchy='dark'
         className={'cancel-button'}
         margin='0px auto'
         onClick={onClickCancel}
diff --git a/packages/adena-extension/src/components/pages/transfer-ledger-reject/transfer-ledger-reject.tsx b/packages/adena-extension/src/components/pages/transfer-ledger-reject/transfer-ledger-reject.tsx
index 1c5b013a..20cd5f33 100644
--- a/packages/adena-extension/src/components/pages/transfer-ledger-reject/transfer-ledger-reject.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-ledger-reject/transfer-ledger-reject.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import IconConnectFailPermission from '@assets/connect-fail-permission.svg';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import { TransferLedgerRejectWrapper } from './transfer-ledger-reject.styles';
 
@@ -22,7 +22,7 @@ const TransferLedgerReject: React.FC<TransferLedgerRejectProps> = ({ onClickClos
       <TitleWithDesc title={text.title} desc={text.desc} />
       <Button
         fullWidth
-        hierarchy={ButtonHierarchy.Dark}
+        hierarchy='dark'
         className={'close-button'}
         margin='0px auto'
         onClick={onClickClose}
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-fail.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-fail.tsx
index 5a6cd5b4..46ad3b9a 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-fail.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-fail.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import IconConnectFailPermission from '@assets/connect-fail-permission.svg';
 import mixins from '@styles/mixins';
@@ -38,7 +38,7 @@ export const ConnectFail = ({ retry }: Props): JSX.Element => {
     <Wrapper>
       <img className='icon' src={IconConnectFailPermission} alt='logo-image' />
       <TitleWithDesc title={text.title} desc={text.desc} />
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} margin='auto 0px 0px' onClick={retry}>
+      <Button fullWidth margin='auto 0px 0px' onClick={retry}>
         <Text type='body1Bold'>Retry</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-init.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-init.tsx
index efd33df9..e62fe3dc 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-init.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-init.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import IconConnectHardwareWallet from '@assets/connect-hardware-wallet.svg';
 import mixins from '@styles/mixins';
@@ -34,7 +34,7 @@ export const ConnectInit = ({ init }: { init: () => Promise<void> }): JSX.Elemen
     <Wrapper>
       <img className='icon' src={IconConnectHardwareWallet} alt='logo-image' />
       <TitleWithDesc title={text.title} desc={text.desc} />
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} margin='auto 0px 0px' onClick={init}>
+      <Button fullWidth margin='auto 0px 0px' onClick={init}>
         <Text type='body1Bold'>Connect</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet-load.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet-load.tsx
index f69f1b4c..ef8eb190 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet-load.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet-load.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Icon, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import mixins from '@styles/mixins';
 
@@ -31,7 +31,7 @@ export const ConnectRequestWalletLoad = (): JSX.Element => {
     <Wrapper>
       <Icon name='iconConnectLoading' className='icon' />
       <TitleWithDesc title={text.title} desc={text.desc} />
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} margin='auto 0px 0px' disabled>
+      <Button fullWidth margin='auto 0px 0px' disabled>
         <Text type='body1Bold'>Next</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet.tsx
index 739d9a68..1e0ecbf7 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request-wallet.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import IconConnectRequestHardwareWallet from '@assets/connect-request-hardware-wallet.svg';
 import mixins from '@styles/mixins';
@@ -38,12 +38,7 @@ export const ConnectRequestWallet: React.FC<Props> = ({ onClickClose }) => {
     <Wrapper>
       <img className='icon' src={IconConnectRequestHardwareWallet} alt='logo-image' />
       <TitleWithDesc title={text.title} desc={text.desc} />
-      <Button
-        fullWidth
-        hierarchy={ButtonHierarchy.Dark}
-        margin='auto 0px 0px'
-        onClick={onClickClose}
-      >
+      <Button fullWidth hierarchy='dark' margin='auto 0px 0px' onClick={onClickClose}>
         <Text type='body1Bold'>Close</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request.tsx
index 8d5e553e..3f8bdc97 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/connect/connect-request.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Icon, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import mixins from '@styles/mixins';
 
@@ -27,7 +27,7 @@ export const ConnectRequest = (): JSX.Element => {
     <Wrapper>
       <Icon name='iconConnectLoading' />
       <TitleWithDesc title={text.title} desc={text.desc} />
-      <Button disabled fullWidth hierarchy={ButtonHierarchy.Primary} margin='auto 0px 0px'>
+      <Button disabled fullWidth margin='auto 0px 0px'>
         <Text type='body1Bold'>Connect</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/finish/finish.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/finish/finish.tsx
index c69a4cfb..26ad140a 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/finish/finish.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/finish/finish.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 import { LedgerAccount, LedgerConnector, LedgerKeyring, deserializeAccount } from 'adena-module';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import IconSuccessSymbol from '@assets/success-symbol.svg';
 import { useAdenaContext, useWalletContext } from '@hooks/use-context';
@@ -73,12 +73,7 @@ export const ApproveConnectHardwareWalletFinish = (): JSX.Element => {
     <Wrapper>
       <img className='icon' src={IconSuccessSymbol} alt='logo-image' />
       <TitleWithDesc title={text.title} desc={text.desc} />
-      <Button
-        fullWidth
-        hierarchy={ButtonHierarchy.Primary}
-        margin='auto 0px 0px'
-        onClick={onClickDoneButton}
-      >
+      <Button fullWidth margin='auto 0px 0px' onClick={onClickDoneButton}>
         <Text type='body1Bold'>Done</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-all-set/ledger-all-set.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-all-set/ledger-all-set.tsx
index f07dce8a..b898737e 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-all-set/ledger-all-set.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-all-set/ledger-all-set.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import mixins from '@styles/mixins';
 
@@ -24,12 +24,7 @@ export const ApproveHardwareWalletLedgerAllSet = (): JSX.Element => {
   return (
     <Wrapper>
       <TitleWithDesc title={text.title} desc={text.desc} />
-      <Button
-        fullWidth
-        hierarchy={ButtonHierarchy.Primary}
-        onClick={handleNextButtonClick}
-        margin='auto 0px 0px'
-      >
+      <Button fullWidth onClick={handleNextButtonClick} margin='auto 0px 0px'>
         <Text type='body1Bold'>Start</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-password/ledger-password.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-password/ledger-password.tsx
index 2cb98f94..8d4054d4 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-password/ledger-password.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/ledger-password/ledger-password.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Text, DefaultInput, ErrorText, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, DefaultInput, ErrorText, Button } from '@components/atoms';
 import { TitleWithDesc, TermsCheckbox } from '@components/molecules';
 
 import { useLedgerPassword } from './use-ledger-password';
@@ -50,13 +50,7 @@ export const ApproveHardwareWalletLedgerPassword = (): JSX.Element => {
           Terms of Use.
         </button>
       </TermsCheckbox>
-      <Button
-        fullWidth
-        hierarchy={ButtonHierarchy.Primary}
-        disabled={buttonState.disabled}
-        onClick={buttonState.onClick}
-        tabIndex={5}
-      >
+      <Button fullWidth disabled={buttonState.disabled} onClick={buttonState.onClick} tabIndex={5}>
         <Text type='body1Bold'>Save</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx
index d13d663a..819d3396 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { LedgerConnector, LedgerAccount } from 'adena-module';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import { Account } from 'adena-module';
 import IconAddSymbol from '@assets/add-symbol.svg';
@@ -349,7 +349,6 @@ export const ApproveConnectHardwareWalletSelectAccount = (): JSX.Element => {
 
       <Button
         fullWidth
-        hierarchy={ButtonHierarchy.Primary}
         margin='auto 0px 0px'
         disabled={loadPath || selectAccountAddresses.length === 0}
         onClick={onClickNextButton}
diff --git a/packages/adena-extension/src/pages/certify/create-password/index.tsx b/packages/adena-extension/src/pages/certify/create-password/index.tsx
index c74ee2db..4992db80 100644
--- a/packages/adena-extension/src/pages/certify/create-password/index.tsx
+++ b/packages/adena-extension/src/pages/certify/create-password/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled, { CSSProp, css } from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
-import { Text, DefaultInput, ErrorText, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, DefaultInput, ErrorText, Button } from '@components/atoms';
 import { TitleWithDesc, TermsCheckbox } from '@components/molecules';
 import { useCreatePassword } from '@hooks/certify/use-create-password';
 import mixins from '@styles/mixins';
@@ -76,13 +76,7 @@ export const CreatePassword = (): JSX.Element => {
           Terms of Use.
         </button>
       </TermsCheckbox>
-      <Button
-        fullWidth
-        hierarchy={ButtonHierarchy.Primary}
-        disabled={buttonState.disabled}
-        onClick={buttonState.onClick}
-        tabIndex={5}
-      >
+      <Button fullWidth disabled={buttonState.disabled} onClick={buttonState.onClick} tabIndex={5}>
         <Text type='body1Bold'>Save</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/enter-seed/index.tsx b/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
index 43ade8cc..1d9553b1 100644
--- a/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
+++ b/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
-import { Text, ErrorText, Button, ButtonHierarchy, SecureTextarea } from '@components/atoms';
+import { Text, ErrorText, Button, SecureTextarea } from '@components/atoms';
 import { TitleWithDesc, TermsCheckbox } from '@components/molecules';
 
 import { useEnterSeed } from '@hooks/certify/use-enter-seed';
@@ -47,7 +47,6 @@ export const EnterSeedPhrase = (): JSX.Element => {
         />
         <Button
           fullWidth
-          hierarchy={ButtonHierarchy.Primary}
           margin='auto 0px 0px'
           disabled={!buttonState.disabled}
           onClick={buttonState.onClick}
diff --git a/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx b/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
index 90dea575..960de583 100644
--- a/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
+++ b/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 
-import { Text, Button, ButtonHierarchy, BlurScreen } from '@components/atoms';
+import { Text, Button, BlurScreen } from '@components/atoms';
 import { SeedViewAndCopy } from '@components/molecules';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useWalletContext } from '@hooks/use-context';
@@ -62,7 +62,7 @@ const ApproachPrivateKey = ({ backButtonClick }: { backButtonClick: () => void }
         copyStr={privateKey}
         toggleText='Private Key'
       />
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} onClick={backButtonClick}>
+      <Button fullWidth onClick={backButtonClick}>
         <Text type='body1Bold'>Done</Text>
       </Button>
     </>
diff --git a/packages/adena-extension/src/pages/certify/forgot-password/index.tsx b/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
index 8626f1c9..b244b12b 100644
--- a/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
+++ b/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import lockLogo from '@assets/icon-lock.svg';
-import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Icon, Button } from '@components/atoms';
 import theme from '@styles/theme';
 
 import { RoutePath } from '@router/path';
@@ -53,7 +53,7 @@ export const ForgotPassword = (): JSX.Element => {
         I don’t have my seed phrase
         <Icon name='iconArrowV2' />
       </TextStyled>
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} onClick={onClickForgotButton}>
+      <Button fullWidth onClick={onClickForgotButton}>
         <Text type='body1Bold'>Next</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx b/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx
index bfd68c4a..0b30eb58 100644
--- a/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import addSymbol from '@assets/add-symbol.svg';
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import theme from '@styles/theme';
 import { RoutePath } from '@router/path';
 import mixins from '@styles/mixins';
@@ -27,7 +27,7 @@ export const GenerateSeedPhrase = (): JSX.Element => {
       <Text type='body1Reg' color={theme.color.neutral[9]} textAlign='center'>
         {content}
       </Text>
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} onClick={onclick} margin='auto 0px 0px'>
+      <Button fullWidth onClick={onclick} margin='auto 0px 0px'>
         <Text type='body1Bold'>Next</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/google-login/connect/google-connect-failed.tsx b/packages/adena-extension/src/pages/certify/google-login/connect/google-connect-failed.tsx
index 725a4359..60f45b6b 100644
--- a/packages/adena-extension/src/pages/certify/google-login/connect/google-connect-failed.tsx
+++ b/packages/adena-extension/src/pages/certify/google-login/connect/google-connect-failed.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
-import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Icon, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import mixins from '@styles/mixins';
@@ -38,12 +38,7 @@ export const GoogleConnectFailed = (): JSX.Element => {
     <Wrapper>
       <Icon name='iconConnectFailed' />
       <TitleWithDesc title={text.title} desc={text.desc} className='google-login-failed' />
-      <Button
-        fullWidth
-        hierarchy={ButtonHierarchy.Primary}
-        onClick={onClickRetry}
-        margin='auto 0px 0px'
-      >
+      <Button fullWidth onClick={onClickRetry} margin='auto 0px 0px'>
         <Text type='body1Bold'>Retry</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/google-login/connect/google-connect.tsx b/packages/adena-extension/src/pages/certify/google-login/connect/google-connect.tsx
index b3d007fb..a0fd93de 100644
--- a/packages/adena-extension/src/pages/certify/google-login/connect/google-connect.tsx
+++ b/packages/adena-extension/src/pages/certify/google-login/connect/google-connect.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { GoogleTorusSigner, TorusSigner } from 'adena-torus-signin/src';
 
-import { Text, Icon, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Icon, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import mixins from '@styles/mixins';
@@ -88,12 +88,7 @@ export const GoogleConnect = (): JSX.Element => {
     <Wrapper>
       <Icon name='iconConnectLoading' />
       <TitleWithDesc title={text.title} desc={text.desc} className='google-login-connect' />
-      <Button
-        fullWidth
-        hierarchy={ButtonHierarchy.Dark}
-        margin='auto 0px 0px'
-        onClick={(): void => window.close()}
-      >
+      <Button fullWidth hierarchy='dark' margin='auto 0px 0px' onClick={(): void => window.close()}>
         <Text type='body1Bold'>Cancel</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/import-private-key/index.tsx b/packages/adena-extension/src/pages/certify/import-private-key/index.tsx
index 5c43419f..4a5cc649 100644
--- a/packages/adena-extension/src/pages/certify/import-private-key/index.tsx
+++ b/packages/adena-extension/src/pages/certify/import-private-key/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import { SingleAccount, PrivateKeyKeyring } from 'adena-module';
 
-import { Text, ErrorText, Button, ButtonHierarchy, SecureTextarea } from '@components/atoms';
+import { Text, ErrorText, Button, SecureTextarea } from '@components/atoms';
 import { TitleWithDesc, TermsCheckbox } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import { useImportAccount } from '@hooks/use-import-account';
@@ -95,12 +95,7 @@ export const ImportPrivateKey = (): JSX.Element => {
           text={content.terms}
           checkboxPos='TOP'
         />
-        <Button
-          fullWidth
-          hierarchy={ButtonHierarchy.Primary}
-          disabled={!isImportButton}
-          onClick={nextButtonClick}
-        >
+        <Button fullWidth disabled={!isImportButton} onClick={nextButtonClick}>
           <Text type='body1Bold'>Import</Text>
         </Button>
       </TermsWrap>
diff --git a/packages/adena-extension/src/pages/certify/launch-adena/index.tsx b/packages/adena-extension/src/pages/certify/launch-adena/index.tsx
index eb01489f..10e7f939 100644
--- a/packages/adena-extension/src/pages/certify/launch-adena/index.tsx
+++ b/packages/adena-extension/src/pages/certify/launch-adena/index.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import styled, { CSSProp, css } from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import { TitleWithDesc } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import { useWalletContext } from '@hooks/use-context';
@@ -59,12 +59,7 @@ export const LaunchAdena = (): JSX.Element => {
   return (
     <Wrapper isPopup={location?.state?.type !== 'SEED'}>
       <TitleWithDesc title={text.title} desc={text.desc} />
-      <Button
-        fullWidth
-        hierarchy={ButtonHierarchy.Primary}
-        onClick={handleNextButtonClick}
-        margin='auto 0px 0px'
-      >
+      <Button fullWidth onClick={handleNextButtonClick} margin='auto 0px 0px'>
         <Text type='body1Bold'>Start</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/login/index.tsx b/packages/adena-extension/src/pages/certify/login/index.tsx
index 7ca1bfab..14745ca3 100644
--- a/packages/adena-extension/src/pages/certify/login/index.tsx
+++ b/packages/adena-extension/src/pages/certify/login/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Text, DefaultInput, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, DefaultInput, Button } from '@components/atoms';
 import theme, { fonts } from '@styles/theme';
 import { RoutePath } from '@router/path';
 import { validateWrongPasswordLength } from '@common/validation';
@@ -120,12 +120,7 @@ export const Login = (): JSX.Element => {
           Forgot Password?
         </Text>
       </ForgetPwd>
-      <Button
-        fullWidth
-        hierarchy={ButtonHierarchy.Primary}
-        onClick={onClickUnLockButton}
-        margin='auto 0px 0px'
-      >
+      <Button fullWidth onClick={onClickUnLockButton} margin='auto 0px 0px'>
         <Text type='body1Bold'>Unlock</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/remove-account/index.tsx b/packages/adena-extension/src/pages/certify/remove-account/index.tsx
index 4ef05fbc..b8c57c1f 100644
--- a/packages/adena-extension/src/pages/certify/remove-account/index.tsx
+++ b/packages/adena-extension/src/pages/certify/remove-account/index.tsx
@@ -4,7 +4,7 @@ import { useRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 
 import removeIcon from '@assets/icon-remove-blur.svg';
-import { Text, ButtonHierarchy } from '@components/atoms';
+import { Text } from '@components/atoms';
 import { CancelAndConfirmButton } from '@components/molecules';
 import theme from '@styles/theme';
 import { useRemoveAccount } from '@hooks/use-remove-account';
@@ -49,7 +49,7 @@ export const RemoveAccount = (): JSX.Element => {
         confirmButtonProps={{
           onClick: removeButtonClick,
           text: 'Remove',
-          hierarchy: ButtonHierarchy.Danger,
+          hierarchy: 'danger',
         }}
       />
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx b/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
index 218761c6..bde0a22a 100644
--- a/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
+++ b/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import styled, { CSSProp } from 'styled-components';
+import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import removeIcon from '@assets/icon-remove-blur.svg';
-import { Text, ButtonHierarchy } from '@components/atoms';
+import { Text } from '@components/atoms';
 import { CancelAndConfirmButton } from '@components/molecules';
 import theme from '@styles/theme';
 import { RoutePath } from '@router/path';
@@ -43,7 +43,7 @@ export const ResetWallet = (): JSX.Element => {
         confirmButtonProps={{
           onClick: resetButtonClick,
           text: 'Reset',
-          hierarchy: ButtonHierarchy.Danger,
+          hierarchy: 'danger',
         }}
       />
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx b/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx
index 658294a2..c3ae9f88 100644
--- a/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/reveal-private-phrase/index.tsx
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
-import { Text, WarningBox, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, WarningBox, Button } from '@components/atoms';
 import { SeedBox, SeedViewAndCopy } from '@components/molecules';
 import { useWalletContext } from '@hooks/use-context';
 import mixins from '@styles/mixins';
@@ -32,7 +32,7 @@ export const RevealPrivatePhrase = (): JSX.Element => {
         copyStr={seeds.join(' ')}
         toggleText='Seed Phrase'
       />
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} onClick={doneButtonClick}>
+      <Button fullWidth onClick={doneButtonClick}>
         <Text type='body1Bold'>Done</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx b/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx
index 552dddff..eba37877 100644
--- a/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/view-seed-phrase/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Text, Button, ButtonHierarchy, Copy } from '@components/atoms';
+import { Text, Button, Copy } from '@components/atoms';
 import { SeedBox, TitleWithDesc } from '@components/molecules';
 import mixins from '@styles/mixins';
 
@@ -46,7 +46,7 @@ export const ViewSeedPhrase = (): JSX.Element => {
         <SeedBox seeds={mnemonic.split(' ')} />
         <Copy copyStr={mnemonic} />
       </SeedBoxWrap>
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} onClick={doneButtonClick}>
+      <Button fullWidth onClick={doneButtonClick}>
         <Text type='body1Bold'>Done</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx b/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx
index fc3ce8d4..8273519c 100644
--- a/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/your-seed-phrase/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { AdenaWallet, HDWalletKeyring, SeedAccount } from 'adena-module';
 
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import { SeedBox, TitleWithDesc, TermsCheckbox, SeedViewAndCopy } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import { useWalletContext } from '@hooks/use-context';
@@ -119,7 +119,6 @@ export const YourSeedPhrase = (): JSX.Element => {
         />
         <Button
           fullWidth
-          hierarchy={ButtonHierarchy.Primary}
           disabled={!terms}
           onClick={viewSeedAgree ? handleNextButtonClick : viewSeedAgreeButton}
           tabIndex={2}
diff --git a/packages/adena-extension/src/pages/wallet/approve-login/index.tsx b/packages/adena-extension/src/pages/wallet/approve-login/index.tsx
index bbf4fe65..3ac08391 100644
--- a/packages/adena-extension/src/pages/wallet/approve-login/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/approve-login/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 
-import { Text, DefaultInput, ErrorText, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, DefaultInput, ErrorText, Button } from '@components/atoms';
 import { Title } from '@pages/certify/login';
 import { RoutePath } from '@router/path';
 import { InjectionMessageInstance } from '@inject/message';
@@ -146,12 +146,7 @@ export const ApproveLogin = (): JSX.Element => {
             ref={inputRef}
           />
           {error && <ErrorText text={error.message} />}
-          <Button
-            fullWidth
-            hierarchy={ButtonHierarchy.Primary}
-            onClick={approveButtonClick}
-            margin='auto 0px 0px'
-          >
+          <Button fullWidth onClick={approveButtonClick} margin='auto 0px 0px'>
             <Text type='body1Bold'>Unlock</Text>
           </Button>
         </Wrapper>
diff --git a/packages/adena-extension/src/pages/wallet/deposit/index.tsx b/packages/adena-extension/src/pages/wallet/deposit/index.tsx
index 2aeb306b..44b1a3ba 100644
--- a/packages/adena-extension/src/pages/wallet/deposit/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/deposit/index.tsx
@@ -3,7 +3,7 @@ import { QRCodeSVG } from 'qrcode.react';
 import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Text, inputStyle, Button, ButtonHierarchy, Copy } from '@components/atoms';
+import { Text, inputStyle, Button, Copy } from '@components/atoms';
 import theme from '@styles/theme';
 import { RoutePath } from '@router/path';
 import { useCurrentAccount } from '@hooks/use-current-account';
@@ -94,12 +94,7 @@ export const Deposit = (): JSX.Element => {
       <Text type='captionReg' color={theme.color.neutral[9]}>
         Only use this address to receive tokens on Gnoland.
       </Text>
-      <Button
-        fullWidth
-        hierarchy={ButtonHierarchy.Dark}
-        margin='auto 0px 0px'
-        onClick={closeButtonClick}
-      >
+      <Button fullWidth hierarchy='dark' margin='auto 0px 0px' onClick={closeButtonClick}>
         <Text type='body1Bold'>Close</Text>
       </Button>
     </Wrapper>
diff --git a/packages/adena-extension/src/pages/wallet/search/index.tsx b/packages/adena-extension/src/pages/wallet/search/index.tsx
index dcee0ad4..291c19ef 100644
--- a/packages/adena-extension/src/pages/wallet/search/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/search/index.tsx
@@ -5,7 +5,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import search from '@assets/search.svg';
 import cancel from '@assets/cancel-dark.svg';
-import { Text, DefaultInput, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, DefaultInput, Button } from '@components/atoms';
 import { TokenBalance } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import { searchTextFilter } from '@common/utils/client-utils';
@@ -170,11 +170,7 @@ export const WalletSearch = (): JSX.Element => {
           ))}
       </DataListWrap>
       <ButtonWrap>
-        <Button
-          fullWidth
-          hierarchy={ButtonHierarchy.Dark}
-          onClick={(): void => navigate(RoutePath.Wallet)}
-        >
+        <Button fullWidth hierarchy='dark' onClick={(): void => navigate(RoutePath.Wallet)}>
           <Text type='body1Bold'>Close</Text>
         </Button>
       </ButtonWrap>
diff --git a/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx b/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
index e51f2010..0c78a038 100644
--- a/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { Text, CopyIconButton, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, CopyIconButton, Button } from '@components/atoms';
 import { TokenBalance } from '@components/molecules';
 import { formatHash, getDateTimeText, getStatusStyle } from '@common/utils/client-utils';
 import IconShare from '@assets/icon-share';
@@ -156,7 +156,7 @@ export const TransactionDetail = (): JSX.Element => {
           className='close-button'
           margin='auto 0px 0px'
           fullWidth
-          hierarchy={ButtonHierarchy.Dark}
+          hierarchy='dark'
           onClick={closeButtonClick}
         >
           <Text type='body1Bold'>Close</Text>
diff --git a/packages/adena-extension/src/pages/wallet/wallet-create/google-signin-button.tsx b/packages/adena-extension/src/pages/wallet/wallet-create/google-signin-button.tsx
index 98717c94..85fe4ff3 100644
--- a/packages/adena-extension/src/pages/wallet/wallet-create/google-signin-button.tsx
+++ b/packages/adena-extension/src/pages/wallet/wallet-create/google-signin-button.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CSSProperties } from 'styled-components';
 
 import googleLogo from '@assets/google-logo.svg';
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 
 interface GoogleSignInButtonProps {
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => unknown;
@@ -11,7 +11,7 @@ interface GoogleSignInButtonProps {
 
 const GoogleSignInButton = ({ onClick, margin }: GoogleSignInButtonProps): JSX.Element => {
   return (
-    <Button fullWidth hierarchy={ButtonHierarchy.Normal} onClick={onClick} margin={margin}>
+    <Button fullWidth hierarchy='normal' onClick={onClick} margin={margin}>
       <img src={googleLogo} alt='google logo' />
       <Text type='body1Bold' margin='0px 0px 0px 8px'>
         Sign in With Google
diff --git a/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx b/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
index d46fe791..1d614f0f 100644
--- a/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import logo from '@assets/logo-default.svg';
-import { Text, Button, ButtonHierarchy } from '@components/atoms';
+import { Text, Button } from '@components/atoms';
 import { DoubleButton } from '@components/molecules';
 import { RoutePath } from '@router/path';
 import theme from '@styles/theme';
@@ -84,7 +84,7 @@ export const WalletCreate = (): JSX.Element => {
       <Logo src={logo} alt='logo' />
       <GoogleSignInButton onClick={googleLoginHandler} margin='auto auto 3px' />
       <PoweredByWeb3AuthWihDivider />
-      <Button fullWidth hierarchy={ButtonHierarchy.Primary} onClick={onCreateButtonClick}>
+      <Button fullWidth onClick={onCreateButtonClick}>
         <Text type='body1Bold'>Create New Wallet</Text>
       </Button>
       <DoubleButton
@@ -92,13 +92,13 @@ export const WalletCreate = (): JSX.Element => {
         leftProps={{
           onClick: importWalletHandler,
           text: 'Import Wallet',
-          hierarchy: ButtonHierarchy.Normal,
+          hierarchy: 'normal',
           fontType: 'body2Bold',
         }}
         rightProps={{
           onClick: ConnectLedgerHandler,
           text: 'Connect Ledger',
-          hierarchy: ButtonHierarchy.Normal,
+          hierarchy: 'normal',
           fontType: 'body2Bold',
         }}
       />

From 1890f5365386d78b01267f6297919f453234b423 Mon Sep 17 00:00:00 2001
From: blue <skqksh@gmail.com>
Date: Sun, 24 Dec 2023 14:22:50 +0900
Subject: [PATCH 6/7] refactor. use theme from provider. seperate font and
 mixins from theme

---
 .../src/common/utils/client-utils.ts          |  6 +-
 .../src/components/atoms/button/index.tsx     | 50 +++++------
 .../components/atoms/copy-button/index.tsx    |  9 +-
 .../copy-icon-button.styles.ts                |  7 +-
 .../components/atoms/copy-tooltip/index.tsx   |  4 +-
 .../custom-network-input.styles.ts            | 10 +--
 .../components/atoms/default-input/index.tsx  | 11 ++-
 .../src/components/atoms/error-text/index.tsx |  7 +-
 .../atoms/full-button-right-icon/index.tsx    | 21 ++---
 .../highlight-number.styles.ts                |  4 +-
 .../src/components/atoms/list-box/index.tsx   | 12 +--
 .../src/components/atoms/loadings/circle.tsx  |  2 +-
 .../src/components/atoms/loadings/round.tsx   |  6 +-
 .../src/components/atoms/loadings/spinner.tsx |  6 +-
 .../atoms/search-input/search-input.styles.ts |  4 +-
 .../atoms/secure-textarea/index.tsx           |  7 +-
 .../components/atoms/skeleton-box/index.tsx   |  4 +-
 .../atoms/static-multi-tooltip/index.tsx      |  6 +-
 .../src/components/atoms/status-dot/index.tsx |  7 +-
 .../components/atoms/tab-container/index.tsx  |  6 +-
 .../src/components/atoms/text/index.tsx       |  4 +-
 .../components/atoms/warning-box/index.tsx    |  6 +-
 .../approve-injection-loading.styles.ts       |  6 +-
 .../approve-loading/approve-loading.styles.ts |  4 +-
 .../approve-transaction.styles.ts             | 24 +++---
 .../bottom-fixed-button-group/index.tsx       | 19 ++---
 .../molecules/bottom-fixed-button/index.tsx   |  4 +-
 .../molecules/close-shadow-button/index.tsx   |  4 +-
 .../molecules/ghost-button/index.tsx          |  4 +-
 .../components/molecules/seed-box/index.tsx   |  6 +-
 .../molecules/seed-view-and-copy/index.tsx    |  9 +-
 .../molecules/terms-checkbox/index.tsx        |  8 +-
 .../molecules/title-with-desc/index.tsx       |  6 +-
 .../token-balance/token-balance.styles.ts     |  4 +-
 .../transaction-history-list-item.styles.ts   | 12 +--
 .../transaction-history-list.styles.ts        |  4 +-
 .../transaction-history/index.tsx             |  6 +-
 .../underline-text-button.styles.ts           |  4 +-
 .../account-details/account-details.styles.ts |  4 +-
 .../account-name-input.styles.ts              |  8 +-
 .../additional-token-info.styles.ts           |  8 +-
 .../additional-token-search-list.styles.ts    | 10 +--
 .../additional-token-select-box.styles.ts     | 14 ++--
 .../additional-token.styles.ts                | 14 ++--
 .../approve-adding-network-table.styles.ts    |  8 +-
 .../approve-changing-network-item.styles.ts   |  6 +-
 .../approve-changing-network.tsx              |  6 +-
 .../wallet-connect/wallet-connect.styles.ts   | 16 ++--
 .../network-list-item.styles.ts               | 14 ++--
 .../main-manage-token-button.styles.ts        |  4 +-
 .../manage-token-list-item-balance.tsx        |  6 +-
 .../manage-token-list-item.styles.ts          |  4 +-
 .../manage-token-search-input.styles.ts       | 10 +--
 .../manage-token/manage-token.styles.ts       |  6 +-
 .../manage-token/toggle/toggle.styles.ts      |  8 +-
 .../side-menu-account-item.styles.ts          | 20 ++---
 .../side-menu-layout.styles.ts                |  4 +-
 .../side-menu-link/side-menu-link.styles.ts   |  6 +-
 .../router/side-menu/side-menu.styles.ts      | 20 ++---
 .../address-book-list.styles.ts               |  8 +-
 .../address-book-list/address-book-list.tsx   |  6 +-
 .../address-input/address-input.styles.ts     | 24 +++---
 .../balance-input/balance-input.styles.ts     | 16 ++--
 .../transfer-input/transfer-input.styles.ts   | 14 ++--
 .../transfer-summary-address.styles.ts        |  4 +-
 .../transfer-summary-balance.styles.ts        |  4 +-
 .../transfer-summary-network-fee.styles.ts    | 11 ++-
 .../transfer-summary.styles.ts                | 12 +--
 .../token-list-item/token-list-item.styles.ts |  6 +-
 .../src/pages/certify/about-adena/index.tsx   |  6 +-
 .../multiline-text-with-arrow-button.tsx      | 13 +--
 .../src/pages/certify/add-address/index.tsx   | 12 +--
 .../src/pages/certify/address-book/index.tsx  |  8 +-
 .../select-account/select-account.tsx         | 26 +++---
 .../pages/certify/connected-apps/index.tsx    | 13 +--
 .../export-private-key/ApproachPrivateKey.tsx |  6 +-
 .../pages/certify/forgot-password/index.tsx   | 17 ++--
 .../certify/generate-seed-phrase/index.tsx    |  6 +-
 .../src/pages/certify/login/index.tsx         |  8 +-
 .../pages/certify/remove-account/index.tsx    |  6 +-
 .../src/pages/certify/reset-wallet/index.tsx  |  6 +-
 .../loading-approve-transaction.tsx           |  4 +-
 .../src/pages/wallet/deposit/index.tsx        | 15 ++--
 .../src/pages/wallet/explore/index.tsx        |  9 +-
 .../src/pages/wallet/nft/index.tsx            |  9 +-
 .../src/pages/wallet/search/index.tsx         |  4 +-
 .../src/pages/wallet/token-details/index.tsx  | 17 ++--
 .../pages/wallet/transaction-detail/index.tsx | 18 ++--
 .../src/pages/wallet/wallet-create/index.tsx  | 25 +++---
 .../src/router/header/approve-menu/index.tsx  |  9 +-
 .../router/header/arrow-title-menu/index.tsx  |  4 +-
 .../router/header/close-title-menu/index.tsx  |  8 +-
 .../src/router/header/home-menu/index.tsx     |  4 +-
 .../src/router/header/index.tsx               |  4 +-
 .../src/router/header/progress-menu/index.tsx |  8 +-
 .../src/router/header/tab-menu/index.tsx      |  4 +-
 .../src/router/header/top-menu/index.tsx      |  9 +-
 .../src/router/loading-main.tsx               |  4 +-
 .../src/router/navigation/index.tsx           |  8 +-
 .../src/styles/global-style.ts                | 16 ++--
 packages/adena-extension/src/styles/theme.ts  | 83 +++++++++----------
 101 files changed, 510 insertions(+), 503 deletions(-)

diff --git a/packages/adena-extension/src/common/utils/client-utils.ts b/packages/adena-extension/src/common/utils/client-utils.ts
index c8ddabbf..bb9c62d0 100644
--- a/packages/adena-extension/src/common/utils/client-utils.ts
+++ b/packages/adena-extension/src/common/utils/client-utils.ts
@@ -181,17 +181,17 @@ export function getStatusStyle(status: string): { color: string; statusIcon: any
   switch (status) {
     case 'SUCCESS':
       return {
-        color: theme.color.green[2],
+        color: theme.green._5,
         statusIcon: success,
       };
     case 'FAIL':
       return {
-        color: theme.color.red[2],
+        color: theme.red._5,
         statusIcon: failed,
       };
     default:
       return {
-        color: theme.color.red[2],
+        color: theme.red._5,
         statusIcon: failed,
       };
   }
diff --git a/packages/adena-extension/src/components/atoms/button/index.tsx b/packages/adena-extension/src/components/atoms/button/index.tsx
index 4845b08a..0b1caa22 100644
--- a/packages/adena-extension/src/components/atoms/button/index.tsx
+++ b/packages/adena-extension/src/components/atoms/button/index.tsx
@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 import React, { CSSProperties } from 'react';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
 type XOR<T, U> = T | U extends Record<string, unknown>
@@ -12,56 +12,56 @@ type ButtonHierarchy = 'normal' | 'primary' | 'ghost' | 'dark' | 'danger' | 'cus
 
 export const modeVariants = {
   normal: css`
-    background: ${theme.color.neutral[6]};
+    background: ${getTheme('neutral', '_7')};
     &:hover {
-      background: ${theme.color.neutral[11]};
+      background: ${getTheme('neutral', 'b')};
     }
     /* &:disabled {
-      background: ${theme.color.primary[6]};
-      color: ${theme.color.neutral[4]};
+      background: ${getTheme('primary', '_9')};
+      color: ${getTheme('neutral', '_5')};
     } */
   `,
   primary: css`
-    background: ${theme.color.primary[3]};
+    background: ${getTheme('primary', '_6')};
     &:hover {
-      background: ${theme.color.primary[4]};
+      background: ${getTheme('primary', '_7')};
     }
     &:disabled {
-      background: ${theme.color.primary[6]};
-      color: ${theme.color.neutral[4]};
+      background: ${getTheme('primary', '_9')};
+      color: ${getTheme('neutral', '_5')};
     }
   `,
   ghost: css`
-    background: ${theme.color.neutral[8]};
-    border: 1px solid ${theme.color.neutral[2]};
+    background: ${getTheme('neutral', '_9')};
+    border: 1px solid ${getTheme('neutral', '_3')};
     &:hover {
-      background: ${theme.color.neutral[5]};
-      border: 1px solid ${theme.color.neutral[2]};
+      background: ${getTheme('neutral', '_6')};
+      border: 1px solid ${getTheme('neutral', '_3')};
     }
     &:disabled {
-      background: ${theme.color.neutral[6]};
-      border: 1px solid ${theme.color.neutral[3]};
-      color: ${theme.color.neutral[4]};
+      background: ${getTheme('neutral', '_7')};
+      border: 1px solid ${getTheme('neutral', '_4')};
+      color: ${getTheme('neutral', '_5')};
     }
   `,
   dark: css`
-    background: ${theme.color.neutral[4]};
+    background: ${getTheme('neutral', '_5')};
     &:hover {
-      background: ${theme.color.neutral[5]};
+      background: ${getTheme('neutral', '_6')};
     }
     &:disabled {
-      background: ${theme.color.neutral[5]};
-      color: ${theme.color.neutral[4]};
+      background: ${getTheme('neutral', '_6')};
+      color: ${getTheme('neutral', '_5')};
     }
   `,
   danger: css`
-    background: ${theme.color.red[2]};
+    background: ${getTheme('red', '_5')};
     &:hover {
-      background: ${theme.color.red[8]};
+      background: #bb150b;
     }
     /* &:disabled {
-      background: ${theme.color.neutral[5]};
-      color: ${theme.color.neutral[4]};
+      background: ${getTheme('neutral', '_6')};
+      color: ${getTheme('neutral', '_5')};
     } */
   `,
 };
@@ -124,7 +124,7 @@ const ButtonWrapper = styled.button<ButtonProps>`
   }};
   border-radius: ${({ radius }): string => (radius ? radius : '30px')};
   transition: all 0.4s ease;
-  color: ${theme.color.neutral[0]};
+  color: ${getTheme('neutral', '_1')};
   background-color: ${({ bgColor }): string | undefined => bgColor};
 `;
 
diff --git a/packages/adena-extension/src/components/atoms/copy-button/index.tsx b/packages/adena-extension/src/components/atoms/copy-button/index.tsx
index 2839cd52..d8713e2b 100644
--- a/packages/adena-extension/src/components/atoms/copy-button/index.tsx
+++ b/packages/adena-extension/src/components/atoms/copy-button/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import { Text, Button } from '@components/atoms';
 import mixins from '@styles/mixins';
 
@@ -12,7 +12,7 @@ const CopyButton = styled(Button)<{ isClicked: boolean }>`
   padding: 0px 12px;
   transition: background-color 0.4s ease;
   &:hover {
-    background-color: ${theme.color.neutral[11]};
+    background-color: ${getTheme('neutral', 'b')};
   }
 `;
 
@@ -25,6 +25,7 @@ export const Copy = ({
 }): JSX.Element => {
   const [isClicked, setIsClicked] = useState<boolean>(false);
 
+  const theme = useTheme();
   const handleButtonClick = useCallback(() => {
     setIsClicked((prev: boolean) => !prev);
     navigator.clipboard.writeText(copyStr);
@@ -43,7 +44,7 @@ export const Copy = ({
       onClick={handleButtonClick}
       disabled={isClicked}
       tabIndex={tabIndex && tabIndex}
-      bgColor={theme.color.neutral[6]}
+      bgColor={theme.neutral._7}
     >
       <Text type='body2Reg'>{isClicked ? 'Copied!' : 'Copy'}</Text>
     </CopyButton>
diff --git a/packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts b/packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts
index 0404d535..f205334f 100644
--- a/packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts
+++ b/packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts
@@ -1,4 +1,4 @@
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 interface CopyButtonWrapperProps {
@@ -15,14 +15,13 @@ export const CopyButtonWrapper = styled.div<CopyButtonWrapperProps>`
   svg {
     path {
       transition: 0.2s;
-      stroke: ${({ theme, checked }): string =>
-        checked ? theme.color.neutral[0] : theme.color.neutral[9]};
+      stroke: ${({ theme, checked }): string => (checked ? theme.neutral._1 : theme.neutral.a)};
     }
   }
 
   :hover svg {
     path {
-      stroke: ${theme.color.neutral[0]};
+      stroke: ${getTheme('neutral', '_1')};
     }
   }
 `;
diff --git a/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx b/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx
index 8a3d2d34..ca5c78fe 100644
--- a/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx
+++ b/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Text } from '@components/atoms';
 import mixins from '@styles/mixins';
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 interface CopyTooltipProps {
   children: React.ReactNode;
@@ -20,7 +20,7 @@ const ToolTipInner = styled.div`
   visibility: hidden;
   z-index: 1;
   padding: 0px 17px;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   border-radius: 13px;
   transform: scale(0.6);
   cursor: default;
diff --git a/packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts b/packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts
index 5ffced8e..bee71d9b 100644
--- a/packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts
+++ b/packages/adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 export const CustomNetworkInputWrapper = styled.div`
   display: flex;
@@ -20,8 +20,8 @@ export const CustomNetworkInputWrapper = styled.div`
       min-height: 48px;
       padding: 12px 16px;
       ${fonts.body2Reg};
-      background-color: ${theme.color.neutral[8]};
-      border: 1px solid ${theme.color.neutral[6]};
+      background-color: ${getTheme('neutral', '_9')};
+      border: 1px solid ${getTheme('neutral', '_7')};
       border-radius: 30px;
       align-items: center;
       margin-top: 12px;
@@ -39,7 +39,7 @@ export const CustomNetworkInputWrapper = styled.div`
         line-height: 25px;
 
         ::placeholder {
-          color: ${theme.color.neutral[9]};
+          color: ${getTheme('neutral', 'a')};
         }
       }
     }
@@ -50,6 +50,6 @@ export const CustomNetworkInputWrapper = styled.div`
     padding: 0 16px;
     ${fonts.captionReg};
     height: 14px;
-    color: ${theme.color.red[2]};
+    color: ${getTheme('red', '_5')};
   }
 `;
diff --git a/packages/adena-extension/src/components/atoms/default-input/index.tsx b/packages/adena-extension/src/components/atoms/default-input/index.tsx
index 040d698a..020b8c9b 100644
--- a/packages/adena-extension/src/components/atoms/default-input/index.tsx
+++ b/packages/adena-extension/src/components/atoms/default-input/index.tsx
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 interface InputProps {
   error?: boolean;
@@ -11,18 +11,17 @@ export const inputStyle = css`
   ${fonts.body2Reg};
   width: 100%;
   height: 48px;
-  background-color: ${theme.color.neutral[8]};
-  color: ${theme.color.neutral[0]};
+  background-color: ${getTheme('neutral', '_9')};
+  color: ${getTheme('neutral', '_1')};
   border-radius: 30px;
   padding: 14px 16px;
   ::placeholder {
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
   }
 `;
 
 export const DefaultInput = styled.input<InputProps>`
   ${inputStyle};
-  border: 1px solid
-    ${({ error, theme }): string => (error ? theme.color.red[2] : theme.color.neutral[6])};
+  border: 1px solid ${({ error, theme }): string => (error ? theme.red._5 : theme.neutral._7)};
   margin: ${({ margin }): string | undefined => margin && margin};
 `;
diff --git a/packages/adena-extension/src/components/atoms/error-text/index.tsx b/packages/adena-extension/src/components/atoms/error-text/index.tsx
index 1bfb6e01..57adcd2c 100644
--- a/packages/adena-extension/src/components/atoms/error-text/index.tsx
+++ b/packages/adena-extension/src/components/atoms/error-text/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import theme from '@styles/theme';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
+
 import { Text } from '../text';
 
 const ErrorMsg = styled(Text)`
@@ -9,8 +9,9 @@ const ErrorMsg = styled(Text)`
 `;
 
 export const ErrorText = ({ text }: { text: string }): JSX.Element => {
+  const theme = useTheme();
   return (
-    <ErrorMsg type='captionReg' color={theme.color.red[2]}>
+    <ErrorMsg type='captionReg' color={theme.red._5}>
       {text}
     </ErrorMsg>
   );
diff --git a/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx b/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx
index 49bb44f2..d9c3bab9 100644
--- a/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx
+++ b/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 
 import { Text, Icon } from '@components/atoms';
-import theme, { FontsType } from '@styles/theme';
+import { FontsType, getTheme } from '@styles/theme';
 import mixins from '@styles/mixins';
 
 export type ButtonMode = 'DEFAULT' | 'DANGER' | 'HOVER';
@@ -47,24 +47,20 @@ export const FullButtonRightIcon = ({
 const defaultIconStyle = css<ButtonStyleProps>`
   .icon-arrow-v2 * {
     transition: 0.2s;
-    stroke: ${({ theme, mode }): string =>
-      mode === 'DANGER' ? theme.color.red[7] : theme.color.neutral[9]};
+    stroke: ${({ theme, mode }): string => (mode === 'DANGER' ? theme.red.b : theme.neutral.a)};
   }
   .icon-weblink * {
     transition: 0.2s;
-    fill: ${({ theme, mode }): string =>
-      mode === 'DANGER' ? theme.color.red[7] : theme.color.neutral[9]};
+    fill: ${({ theme, mode }): string => (mode === 'DANGER' ? theme.red.b : theme.neutral.a)};
   }
 `;
 
 const hoverIconStyle = css<ButtonStyleProps>`
   .icon-arrow-v2 * {
-    stroke: ${({ theme, mode }): string =>
-      mode === 'DANGER' ? theme.color.red[2] : theme.color.neutral[0]};
+    stroke: ${({ theme, mode }): string => (mode === 'DANGER' ? theme.red._5 : theme.neutral._1)};
   }
   .icon-weblink * {
-    fill: ${({ theme, mode }): string =>
-      mode === 'DANGER' ? theme.color.red[2] : theme.color.neutral[0]};
+    fill: ${({ theme, mode }): string => (mode === 'DANGER' ? theme.red._5 : theme.neutral._1)};
   }
 `;
 
@@ -79,11 +75,10 @@ const ButtonWrapper = styled.button<ButtonStyleProps>`
   padding: 0px 24px 0px 20px;
   border-radius: 18px;
   transition: all 0.3s ease;
-  background-color: ${theme.color.neutral[6]};
-  color: ${({ theme, mode }): string =>
-    mode === 'DANGER' ? theme.color.red[2] : theme.color.neutral[0]};
+  background-color: ${getTheme('neutral', '_7')};
+  color: ${({ theme, mode }): string => (mode === 'DANGER' ? theme.red._5 : theme.neutral._1)};
   &:hover {
-    background-color: ${theme.color.neutral[11]};
+    background-color: ${getTheme('neutral', 'b')};
     ${hoverIconStyle};
   }
 `;
diff --git a/packages/adena-extension/src/components/atoms/highlight-number/highlight-number.styles.ts b/packages/adena-extension/src/components/atoms/highlight-number/highlight-number.styles.ts
index 3dc390ec..ced4ce97 100644
--- a/packages/adena-extension/src/components/atoms/highlight-number/highlight-number.styles.ts
+++ b/packages/adena-extension/src/components/atoms/highlight-number/highlight-number.styles.ts
@@ -1,4 +1,4 @@
-import theme, { FontsType } from '@styles/theme';
+import { FontsType, fonts } from '@styles/theme';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 interface HighlightNumberWrapperProps {
@@ -16,7 +16,7 @@ export const HighlightNumberWrapper = styled.div<HighlightNumberWrapperProps>`
 
   .value {
     display: contents;
-    ${({ fontStyleKey }): FlattenSimpleInterpolation => theme.fonts[fontStyleKey]};
+    ${({ fontStyleKey }): FlattenSimpleInterpolation => fonts[fontStyleKey]};
     color: ${({ fontColor }): string => fontColor};
     text-align: bottom;
 
diff --git a/packages/adena-extension/src/components/atoms/list-box/index.tsx b/packages/adena-extension/src/components/atoms/list-box/index.tsx
index 73377c64..b649107f 100644
--- a/packages/adena-extension/src/components/atoms/list-box/index.tsx
+++ b/packages/adena-extension/src/components/atoms/list-box/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
 import styled, { css, CSSProperties } from 'styled-components';
 
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 export enum ListHierarchy {
   Default = 'default',
@@ -27,19 +27,19 @@ interface ListBoxProps extends ListBoxStyleProps {
 
 const modeVariants = {
   default: css`
-    background: ${theme.color.neutral[6]};
+    background: ${getTheme('neutral', '_7')};
     &:hover {
-      background: ${theme.color.neutral[11]};
+      background: ${getTheme('neutral', 'b')};
     }
   `,
   normal: css`
-    background: ${theme.color.neutral[8]};
+    background: ${getTheme('neutral', '_9')};
     &:hover {
-      background: ${theme.color.neutral[6]};
+      background: ${getTheme('neutral', '_7')};
     }
   `,
   static: css`
-    background: ${theme.color.neutral[6]};
+    background: ${getTheme('neutral', '_7')};
   `,
 };
 
diff --git a/packages/adena-extension/src/components/atoms/loadings/circle.tsx b/packages/adena-extension/src/components/atoms/loadings/circle.tsx
index 4a7f705d..7ee71830 100644
--- a/packages/adena-extension/src/components/atoms/loadings/circle.tsx
+++ b/packages/adena-extension/src/components/atoms/loadings/circle.tsx
@@ -11,7 +11,7 @@ interface CircleProps {
 const CircleStyle = styled.div<CircleProps>`
   width: ${({ width }): string | undefined => width && width};
   height: ${({ height }): string | undefined => height && height};
-  background-color: ${({ theme, bgColor }): string => (bgColor ? bgColor : theme.color.neutral[4])};
+  background-color: ${({ theme, bgColor }): string => (bgColor ? bgColor : theme.neutral._5)};
   margin: ${({ margin }): string | undefined => margin && margin};
   border-radius: 50%;
 `;
diff --git a/packages/adena-extension/src/components/atoms/loadings/round.tsx b/packages/adena-extension/src/components/atoms/loadings/round.tsx
index 9993cb6b..55008633 100644
--- a/packages/adena-extension/src/components/atoms/loadings/round.tsx
+++ b/packages/adena-extension/src/components/atoms/loadings/round.tsx
@@ -1,3 +1,4 @@
+import mixins from '@styles/mixins';
 import React from 'react';
 import styled, { CSSProp } from 'styled-components';
 
@@ -11,11 +12,10 @@ interface RoundProps {
 }
 
 const RoundStyle = styled.div<RoundProps>`
-  ${({ children, theme }): false | CSSProp =>
-    !!children && theme.mixins.flex('row', 'center', 'center')};
+  ${({ children }): false | CSSProp => !!children && mixins.flex('row', 'center', 'center')};
   width: ${({ width }): string => (width ? width : '100%')};
   height: ${({ height }): string | undefined => height && height};
-  background-color: ${({ theme, bgColor }): string => (bgColor ? bgColor : theme.color.neutral[4])};
+  background-color: ${({ theme, bgColor }): string => (bgColor ? bgColor : theme.neutral._5)};
   margin: ${({ margin }): string | undefined => margin && margin};
   border-radius: ${({ radius }): string | undefined => radius && radius};
 `;
diff --git a/packages/adena-extension/src/components/atoms/loadings/spinner.tsx b/packages/adena-extension/src/components/atoms/loadings/spinner.tsx
index f2202321..372be460 100644
--- a/packages/adena-extension/src/components/atoms/loadings/spinner.tsx
+++ b/packages/adena-extension/src/components/atoms/loadings/spinner.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled, { keyframes } from 'styled-components';
 
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 const spinAnimation = keyframes`
   0% {
@@ -23,7 +23,7 @@ const SpinRing = styled.div`
   animation: ${spinAnimation} 0.9s linear infinite;
   :before {
     content: '';
-    background-color: ${theme.color.neutral[7]};
+    background-color: ${getTheme('neutral', '_8')};
     width: 36px;
     height: 36px;
     border-radius: 50%;
@@ -37,7 +37,7 @@ const SpinBall = styled.span`
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background-color: ${theme.color.primary[3]};
+  background-color: ${getTheme('primary', '_6')};
 `;
 
 export const Spinner = (): JSX.Element => (
diff --git a/packages/adena-extension/src/components/atoms/search-input/search-input.styles.ts b/packages/adena-extension/src/components/atoms/search-input/search-input.styles.ts
index fbe40597..fe32dcca 100644
--- a/packages/adena-extension/src/components/atoms/search-input/search-input.styles.ts
+++ b/packages/adena-extension/src/components/atoms/search-input/search-input.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const SearchInputWrapper = styled.div`
@@ -11,7 +11,7 @@ export const SearchInputWrapper = styled.div`
   align-items: center;
   justify-content: flex-start;
   border-radius: 30px;
-  border: 1px solid ${theme.color.neutral[6]};
+  border: 1px solid ${getTheme('neutral', '_7')};
 
   .search-icon-wrapper {
     display: inline-flex;
diff --git a/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx b/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx
index ad87dfea..c175cd95 100644
--- a/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx
+++ b/packages/adena-extension/src/components/atoms/secure-textarea/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 interface SecureTextareaProps {
   value: string;
@@ -14,9 +14,8 @@ const StyledWrapper = styled.div<{ error: boolean }>`
   position: relative;
   width: 100%;
   height: 140px;
-  border: 1px solid
-    ${({ error, theme }): string => (error ? theme.color.red[2] : theme.color.neutral[6])};
-  background-color: ${theme.color.neutral[8]};
+  border: 1px solid ${({ error, theme }): string => (error ? theme.red._5 : theme.neutral._7)};
+  background-color: ${getTheme('neutral', '_9')};
   border-radius: 18px;
   overflow-y: auto;
   padding: 14px 16px 8px;
diff --git a/packages/adena-extension/src/components/atoms/skeleton-box/index.tsx b/packages/adena-extension/src/components/atoms/skeleton-box/index.tsx
index 07b71325..a5ff8dc0 100644
--- a/packages/adena-extension/src/components/atoms/skeleton-box/index.tsx
+++ b/packages/adena-extension/src/components/atoms/skeleton-box/index.tsx
@@ -1,4 +1,4 @@
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import styled, { keyframes } from 'styled-components';
 
 const pulseKeyframe = keyframes`
@@ -16,7 +16,7 @@ const pulseKeyframe = keyframes`
 export const SkeletonBoxStyle = styled.div`
   & {
     position: relative;
-    background-color: ${theme.color.neutral[6]};
+    background-color: ${getTheme('neutral', '_7')};
     border-radius: 18px;
     padding: 0px 17px 0px 14px;
     overflow: hidden;
diff --git a/packages/adena-extension/src/components/atoms/static-multi-tooltip/index.tsx b/packages/adena-extension/src/components/atoms/static-multi-tooltip/index.tsx
index 28c1242e..02a511f8 100644
--- a/packages/adena-extension/src/components/atoms/static-multi-tooltip/index.tsx
+++ b/packages/adena-extension/src/components/atoms/static-multi-tooltip/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Text } from '@components/atoms';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 interface TooltipProps {
   bgColor?: string;
@@ -23,7 +23,7 @@ const Tooltip = styled.div<TooltipProps>`
   height: auto;
   visibility: hidden;
   z-index: 1;
-  background-color: ${({ theme, bgColor }): string => (bgColor ? bgColor : theme.color.neutral[8])};
+  background-color: ${({ theme, bgColor }): string => (bgColor ? bgColor : theme.neutral._9)};
   border-radius: 13px;
   position: absolute;
   right: 0px;
@@ -36,7 +36,7 @@ const Tooltip = styled.div<TooltipProps>`
     width: 100%;
     height: 26px;
     padding: 2px 25px;
-    border-bottom: 1px solid ${theme.color.neutral[9]};
+    border-bottom: 1px solid ${getTheme('neutral', 'a')};
 
     &:last-child {
       border-bottom: none;
diff --git a/packages/adena-extension/src/components/atoms/status-dot/index.tsx b/packages/adena-extension/src/components/atoms/status-dot/index.tsx
index 2d4ff294..cffc484e 100644
--- a/packages/adena-extension/src/components/atoms/status-dot/index.tsx
+++ b/packages/adena-extension/src/components/atoms/status-dot/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Text } from '@components/atoms';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 interface StatusDotProps {
   status: boolean;
@@ -15,8 +15,7 @@ const Dot = styled.div<{ status: boolean }>`
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background-color: ${({ status, theme }): string =>
-    status ? theme.color.green[2] : theme.color.red[2]};
+  background-color: ${({ status, theme }): string => (status ? theme.green._5 : theme.red._5)};
   cursor: pointer;
   &:hover > .static-tooltip {
     visibility: visible;
@@ -32,7 +31,7 @@ const Tooltip = styled.div`
   visibility: hidden;
   z-index: 1;
   padding: 0px 17px;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   border-radius: 13px;
   position: absolute;
   right: 0px;
diff --git a/packages/adena-extension/src/components/atoms/tab-container/index.tsx b/packages/adena-extension/src/components/atoms/tab-container/index.tsx
index 26d2e8de..e37ead75 100644
--- a/packages/adena-extension/src/components/atoms/tab-container/index.tsx
+++ b/packages/adena-extension/src/components/atoms/tab-container/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 interface Props {
   header: React.ReactNode;
@@ -25,7 +25,7 @@ const Container = styled.div`
   width: 100vw;
   height: 100vh;
   margin-top: -48px;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
 `;
 
 const Wrapper = styled.div`
@@ -33,6 +33,6 @@ const Wrapper = styled.div`
   ${mixins.flex('column', 'center', 'center')};
   width: 360px;
   height: 540px;
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
   z-index: 2;
 `;
diff --git a/packages/adena-extension/src/components/atoms/text/index.tsx b/packages/adena-extension/src/components/atoms/text/index.tsx
index cdfe068e..61d83f07 100644
--- a/packages/adena-extension/src/components/atoms/text/index.tsx
+++ b/packages/adena-extension/src/components/atoms/text/index.tsx
@@ -1,6 +1,6 @@
 import styled, { CSSProp, css } from 'styled-components';
 import React, { CSSProperties, PropsWithChildren } from 'react';
-import { FontsType } from '@styles/theme';
+import { FontsType, fonts } from '@styles/theme';
 
 interface TextProps extends React.ComponentPropsWithoutRef<'div'> {
   className?: string;
@@ -39,7 +39,7 @@ export const Text = ({
 const Wrapper = styled.div<TextProps>`
   ${(props): CSSProp => {
     return css`
-      ${props.theme.fonts[props.type]};
+      ${fonts[props.type]};
       text-align: ${props.textAlign};
       display: ${props.display};
       color: ${props.color};
diff --git a/packages/adena-extension/src/components/atoms/warning-box/index.tsx b/packages/adena-extension/src/components/atoms/warning-box/index.tsx
index 75c7da33..7879e35f 100644
--- a/packages/adena-extension/src/components/atoms/warning-box/index.tsx
+++ b/packages/adena-extension/src/components/atoms/warning-box/index.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import styled, { CSSProperties } from 'styled-components';
+import styled, { CSSProperties, useTheme } from 'styled-components';
 
 import { Text } from '@components/atoms';
-import theme from '@styles/theme';
 import mixins from '@styles/mixins';
 
 type WarningKeyType =
@@ -58,10 +57,11 @@ const warningType: { [key in WarningKeyType]: TextProperty } = {
 };
 
 export const WarningBox = ({ type, margin, padding }: WarningBoxProps): JSX.Element => {
+  const theme = useTheme();
   return (
     <Wrapper margin={margin} padding={padding}>
       {warningType[type].title && (
-        <Text type='header7' color={theme.color.red[6]}>
+        <Text type='header7' color={theme.red.a}>
           {warningType[type].title}
         </Text>
       )}
diff --git a/packages/adena-extension/src/components/molecules/approve-injection-loading/approve-injection-loading.styles.ts b/packages/adena-extension/src/components/molecules/approve-injection-loading/approve-injection-loading.styles.ts
index 5debcabd..e98ce15e 100644
--- a/packages/adena-extension/src/components/molecules/approve-injection-loading/approve-injection-loading.styles.ts
+++ b/packages/adena-extension/src/components/molecules/approve-injection-loading/approve-injection-loading.styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 export const ApproveInjectionLoadingWrapper = styled.div`
   display: flex;
@@ -13,13 +13,13 @@ export const ApproveInjectionLoadingWrapper = styled.div`
 
   .description {
     margin-top: 23px;
-    color: ${theme.color.neutral[0]};
+    color: ${getTheme('neutral', '_1')};
     ${fonts.header4}
   }
 
   .sub-description {
     margin-top: 12px;
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
     ${fonts.body1Reg}
   }
 `;
diff --git a/packages/adena-extension/src/components/molecules/approve-loading/approve-loading.styles.ts b/packages/adena-extension/src/components/molecules/approve-loading/approve-loading.styles.ts
index bd2a9470..b02acf68 100644
--- a/packages/adena-extension/src/components/molecules/approve-loading/approve-loading.styles.ts
+++ b/packages/adena-extension/src/components/molecules/approve-loading/approve-loading.styles.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { SkeletonBoxStyle } from '@components/atoms';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 export const ApproveLoadingWrapper = styled.div`
   ${mixins.flex('column', 'center', 'flex-start')};
@@ -25,7 +25,7 @@ export const ApproveLoadingRoundedBox = styled.div`
   ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   height: 41px;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   padding: 0px 18px;
 `;
 
diff --git a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
index 5180e25d..4b42b74b 100644
--- a/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
+++ b/packages/adena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import mixins from '@styles/mixins';
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean }>`
   ${mixins.flex('column', 'center', 'flex-start')};
@@ -14,7 +14,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     position: relative;
     padding: 10px 18px;
     justify-content: space-between;
-    border-bottom: 2px solid ${theme.color.neutral[7]};
+    border-bottom: 2px solid ${getTheme('neutral', '_8')};
     ${fonts.body1Reg};
 
     &:last-child {
@@ -25,7 +25,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
       display: inline-flex;
       width: fit-content;
       flex-shrink: 0;
-      color: ${theme.color.neutral[9]};
+      color: ${getTheme('neutral', 'a')};
     }
 
     .value {
@@ -65,7 +65,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     border-radius: 24px;
     padding: 10px 18px;
     margin-bottom: 8px;
-    background-color: ${theme.color.neutral[8]};
+    background-color: ${getTheme('neutral', '_9')};
     ${fonts.body2Reg};
   }
 
@@ -74,7 +74,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     height: auto;
     border-radius: 18px;
     margin-bottom: 8px;
-    background-color: ${theme.color.neutral[8]};
+    background-color: ${getTheme('neutral', '_9')};
   }
 
   .fee-amount-wrapper {
@@ -83,11 +83,11 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     border-radius: 30px;
     padding: 10px 18px;
     margin-bottom: 8px;
-    background-color: ${theme.color.neutral[8]};
-    border: 1px solid ${theme.color.neutral[7]};
+    background-color: ${getTheme('neutral', '_9')};
+    border: 1px solid ${getTheme('neutral', '_8')};
     ${fonts.body2Reg};
     ${({ isErrorNetworkFee, theme }): string | false =>
-      isErrorNetworkFee && `border-color: ${theme.color.red[2]};`}
+      isErrorNetworkFee && `border-color: ${theme.red._5};`}
   }
 
   .error-message {
@@ -98,7 +98,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     height: 14px;
     margin-top: -5px;
     margin-bottom: 10px;
-    color: ${theme.color.red[2]};
+    color: ${getTheme('red', '_5')};
   }
 
   .transaction-data-wrapper {
@@ -107,7 +107,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
     ${mixins.flex('column', 'center', 'center')};
 
     .visible-button {
-      color: ${theme.color.neutral[9]};
+      color: ${getTheme('neutral', 'a')};
       height: fit-content;
       margin-bottom: 5px;
 
@@ -119,8 +119,8 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
       width: 100%;
       height: 120px;
       border-radius: 24px;
-      background-color: ${theme.color.neutral[8]};
-      border: 1px solid ${theme.color.neutral[6]};
+      background-color: ${getTheme('neutral', '_9')};
+      border: 1px solid ${getTheme('neutral', '_7')};
       padding: 12px 16px;
     }
     .raw-info-textarea {
diff --git a/packages/adena-extension/src/components/molecules/bottom-fixed-button-group/index.tsx b/packages/adena-extension/src/components/molecules/bottom-fixed-button-group/index.tsx
index 2fc05f2f..229b1d3d 100644
--- a/packages/adena-extension/src/components/molecules/bottom-fixed-button-group/index.tsx
+++ b/packages/adena-extension/src/components/molecules/bottom-fixed-button-group/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { Text, Button } from '@components/atoms';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 interface ButtonProps {
   primary?: boolean;
@@ -65,38 +65,37 @@ const ButtonWrap = styled.div<{ filled?: boolean }>`
   ${({ filled }): false | 'box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);' | undefined =>
     filled && 'box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);'}
   ${({ filled }): false | 'align-items: center;' | undefined => filled && 'align-items: center;'}
-  background-color: ${({ filled, theme }): string =>
-    filled ? theme.color.neutral[7] : 'transparent'};
+  background-color: ${({ filled, theme }): string => (filled ? theme.neutral._8 : 'transparent')};
   z-index: 1;
 
   & > button {
     margin-right: 10px;
-    background-color: ${theme.color.neutral[4]};
+    background-color: ${getTheme('neutral', '_5')};
 
     &:last-child {
       margin-right: 0;
     }
 
     &:hover:not(.disabled) {
-      background-color: ${theme.color.neutral[5]};
+      background-color: ${getTheme('neutral', '_6')};
     }
 
     &.primary {
-      background-color: ${theme.color.primary[3]};
+      background-color: ${getTheme('primary', '_6')};
 
       &:hover:not(.disabled) {
-        background-color: ${theme.color.primary[4]};
+        background-color: ${getTheme('primary', '_7')};
       }
     }
   }
 
   & > button.disabled {
     cursor: default;
-    color: ${theme.color.neutral[4]};
-    background-color: ${theme.color.neutral[6]};
+    color: ${getTheme('neutral', '_5')};
+    background-color: ${getTheme('neutral', '_7')};
 
     &.primary {
-      background-color: ${theme.color.primary[6]};
+      background-color: ${getTheme('primary', '_9')};
     }
   }
 `;
diff --git a/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx b/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx
index 31d021c0..19108d97 100644
--- a/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Button, ButtonProps, Text } from '@components/atoms';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 interface BottomFixedButtonProps {
   hierarchy?: ButtonProps['hierarchy'];
@@ -38,6 +38,6 @@ const ButtonWrap = styled.div`
   height: 96px;
   padding: 0px 20px;
   box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
   z-index: 1;
 `;
diff --git a/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx b/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx
index b3c2ab54..fe88f371 100644
--- a/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Text, Button } from '@components/atoms';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 interface Props {
   onClick: () => void;
@@ -28,6 +28,6 @@ const ButtonWrap = styled.div`
   height: 96px;
   padding: 0px 20px;
   box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
   z-index: 1;
 `;
diff --git a/packages/adena-extension/src/components/molecules/ghost-button/index.tsx b/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
index ec782d05..2faf39ae 100644
--- a/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { Button } from '@components/atoms';
 import mixins from '@styles/mixins';
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 interface GhostButtonsProps {
   left: string;
@@ -21,7 +21,7 @@ const GhostBtn = styled(Button)`
   ${fonts.body1Bold};
   transition: all 0.4s ease;
   :disabled {
-    color: ${theme.color.neutral[3]};
+    color: ${getTheme('neutral', '_4')};
     border: none;
   }
 `;
diff --git a/packages/adena-extension/src/components/molecules/seed-box/index.tsx b/packages/adena-extension/src/components/molecules/seed-box/index.tsx
index ee29cb2f..3443473d 100644
--- a/packages/adena-extension/src/components/molecules/seed-box/index.tsx
+++ b/packages/adena-extension/src/components/molecules/seed-box/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Text, BlurScreen } from '../../atoms';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 interface SeedScrollBoxProps {
   seeds: string[];
@@ -16,8 +16,8 @@ const Wrapper = styled.div`
   position: relative;
   width: 100%;
   height: 140px;
-  border: 1px solid ${theme.color.neutral[6]};
-  background-color: ${theme.color.neutral[8]};
+  border: 1px solid ${getTheme('neutral', '_7')};
+  background-color: ${getTheme('neutral', '_9')};
   border-radius: 18px;
   padding: 8px;
 `;
diff --git a/packages/adena-extension/src/components/molecules/seed-view-and-copy/index.tsx b/packages/adena-extension/src/components/molecules/seed-view-and-copy/index.tsx
index 3f6f906c..3ce10c86 100644
--- a/packages/adena-extension/src/components/molecules/seed-view-and-copy/index.tsx
+++ b/packages/adena-extension/src/components/molecules/seed-view-and-copy/index.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import { Text, Button, Copy } from '@components/atoms';
-import theme from '@styles/theme';
 import mixins from '@styles/mixins';
+import { getTheme } from '@styles/theme';
 
 interface SeedViewAndCopyProps {
   showBlurScreen: boolean;
@@ -18,13 +18,14 @@ export const SeedViewAndCopy = ({
   copyStr,
   toggleText,
 }: SeedViewAndCopyProps): JSX.Element => {
+  const theme = useTheme();
   const blurScreenHandler = useCallback(() => {
     setShowBlurScreen((prev: boolean) => !prev);
   }, [showBlurScreen]);
 
   return (
     <Wrapper>
-      <ButtonStyle bgColor={theme.color.neutral[6]} onClick={blurScreenHandler}>
+      <ButtonStyle bgColor={theme.neutral._7} onClick={blurScreenHandler}>
         <Text type='body2Reg'>{showBlurScreen ? `View ${toggleText}` : `Hide ${toggleText}`}</Text>
       </ButtonStyle>
       <Copy copyStr={copyStr} />
@@ -46,6 +47,6 @@ const ButtonStyle = styled(Button)`
   padding: 0px 12px;
   transition: background-color 0.4s ease;
   &:hover {
-    background-color: ${theme.color.neutral[11]};
+    background-color: ${getTheme('neutral', 'b')};
   }
 `;
diff --git a/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx b/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx
index 5fed18f2..7880f772 100644
--- a/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx
+++ b/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx
@@ -4,7 +4,7 @@ import styled, { CSSProp } from 'styled-components';
 import checkOff from '@assets/check-off.svg';
 import checkOn from '@assets/check-on.svg';
 import mixins from '@styles/mixins';
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 type CheckboxPos = 'CENTER' | 'TOP' | ' BOTTOM';
 interface TermsCheckboxProps {
@@ -31,8 +31,8 @@ const Label = styled.label<{ checkboxPos: CheckboxPos }>`
   padding-left: 32px;
   cursor: pointer;
   &:before {
-    ${({ theme, checkboxPos }): CSSProp =>
-      checkboxPos === 'TOP' ? theme.mixins.posTopLeft('2px') : theme.mixins.posTopCenterLeft()};
+    ${({ checkboxPos }): CSSProp =>
+      checkboxPos === 'TOP' ? mixins.posTopLeft('2px') : mixins.posTopCenterLeft()};
     content: '';
     display: inline-block;
     width: 20px;
@@ -48,7 +48,7 @@ const Label = styled.label<{ checkboxPos: CheckboxPos }>`
   &,
   * {
     font: inherit;
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
   }
 `;
 
diff --git a/packages/adena-extension/src/components/molecules/title-with-desc/index.tsx b/packages/adena-extension/src/components/molecules/title-with-desc/index.tsx
index ceaf2e0d..1fabd21f 100644
--- a/packages/adena-extension/src/components/molecules/title-with-desc/index.tsx
+++ b/packages/adena-extension/src/components/molecules/title-with-desc/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
-import theme from '@styles/theme';
 import { Text } from '../../atoms';
 
 interface TitleWithDescProps {
@@ -24,10 +23,11 @@ export const TitleWithDesc = ({
   isWarningDesc = false,
   className = '',
 }: TitleWithDescProps): JSX.Element => {
+  const theme = useTheme();
   return (
     <Wrapper className={className}>
       <Text type='header4'>{title}</Text>
-      <Text type='body1Reg' color={isWarningDesc ? theme.color.red[6] : theme.color.neutral[9]}>
+      <Text type='body1Reg' color={isWarningDesc ? theme.red.a : theme.neutral.a}>
         {desc}
       </Text>
     </Wrapper>
diff --git a/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts b/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts
index f1982136..4c96a0fe 100644
--- a/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts
+++ b/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts
@@ -1,4 +1,4 @@
-import theme, { FontsType } from '@styles/theme';
+import { FontsType, fonts } from '@styles/theme';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 interface TokenBalanceWrapperProps {
@@ -23,7 +23,7 @@ export const TokenBalanceWrapper = styled.div<TokenBalanceWrapperProps>`
     .denom {
       display: contents;
       color: ${({ fontColor }): string => fontColor};
-      ${({ fontStyleKey }): FlattenSimpleInterpolation => theme.fonts[fontStyleKey]};
+      ${({ fontStyleKey }): FlattenSimpleInterpolation => fonts[fontStyleKey]};
       text-align: bottom;
     }
   }
diff --git a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.styles.ts b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.styles.ts
index 9a78808a..69683ea7 100644
--- a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.styles.ts
+++ b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransactionHistoryListItemWrapper = styled.div`
@@ -8,13 +8,13 @@ export const TransactionHistoryListItemWrapper = styled.div`
   height: 60px;
   padding: 12px 14px;
   align-items: center;
-  background-color: ${theme.color.neutral[6]};
+  background-color: ${getTheme('neutral', '_7')};
   border-radius: 18px;
   cursor: pointer;
   transition: 0.2s;
 
   :hover {
-    background-color: ${theme.color.neutral[11]};
+    background-color: ${getTheme('neutral', 'b')};
   }
 
   & + & {
@@ -75,7 +75,7 @@ export const TransactionHistoryListItemWrapper = styled.div`
 
     .description {
       ${fonts.body3Reg};
-      color: ${theme.color.neutral[9]};
+      color: ${getTheme('neutral', 'a')};
       line-height: 18px;
     }
   }
@@ -96,11 +96,11 @@ export const TransactionHistoryListItemWrapper = styled.div`
     }
 
     &.active div * {
-      color: ${theme.color.green[2]};
+      color: ${getTheme('green', '_5')};
     }
 
     &.blur div * {
-      color: ${theme.color.neutral[9]};
+      color: ${getTheme('neutral', 'a')};
     }
   }
 `;
diff --git a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list/transaction-history-list.styles.ts b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list/transaction-history-list.styles.ts
index 2ae4bab8..6bc966b6 100644
--- a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list/transaction-history-list.styles.ts
+++ b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list/transaction-history-list.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransactionHistoryListWrapper = styled.div`
@@ -9,7 +9,7 @@ export const TransactionHistoryListWrapper = styled.div`
 
   & > .title {
     ${fonts.body1Reg};
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
   }
 
   & > .list-wrapper {
diff --git a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history/index.tsx b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history/index.tsx
index e7b93d2f..3e7c8a35 100644
--- a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history/index.tsx
+++ b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history/index.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
+
 import {
   TransactionHistoryDescriptionWrapper,
   TransactionHistoryWrapper,
 } from './transaction-history.styles';
 import TransactionHistoryList from '@components/molecules/transaction-history/transaction-history-list/transaction-history-list';
 import { Text } from '@components/atoms';
-import theme from '@styles/theme';
 import LoadingHistory from '../loading-history';
 import { TransactionInfo } from '@types';
 
@@ -23,13 +24,14 @@ export const TransactionHistory: React.FC<TransactionHistoryProps> = ({
   transactionInfoLists,
   onClickItem,
 }) => {
+  const theme = useTheme();
   if (transactionInfoLists.length === 0) {
     if (status === 'loading') {
       return <LoadingHistory />;
     }
     return (
       <TransactionHistoryDescriptionWrapper>
-        <Text className='desc' type='body1Reg' color={theme.color.neutral[9]} textAlign='center'>
+        <Text className='desc' type='body1Reg' color={theme.neutral.a} textAlign='center'>
           No transaction to display
         </Text>
       </TransactionHistoryDescriptionWrapper>
diff --git a/packages/adena-extension/src/components/molecules/underline-text-button/underline-text-button.styles.ts b/packages/adena-extension/src/components/molecules/underline-text-button/underline-text-button.styles.ts
index caa15744..1d1d87bf 100644
--- a/packages/adena-extension/src/components/molecules/underline-text-button/underline-text-button.styles.ts
+++ b/packages/adena-extension/src/components/molecules/underline-text-button/underline-text-button.styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 export const UnderlineTextButtonWrapper = styled.div`
   display: flex;
@@ -19,7 +19,7 @@ export const UnderlineTextButtonWrapper = styled.div`
   }
 
   .title {
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
     ${fonts.body1Reg};
     white-space: pre;
     text-decoration: underline;
diff --git a/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts b/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts
index 1528e2c1..c6959261 100644
--- a/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts
+++ b/packages/adena-extension/src/components/pages/account-details/account-details/account-details.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AccountDetailsWrapper = styled.div`
@@ -36,7 +36,7 @@ export const AccountDetailsWrapper = styled.div`
       flex-direction: row;
       width: 100%;
       height: 42px;
-      background-color: ${theme.color.neutral[8]};
+      background-color: ${getTheme('neutral', '_9')};
       margin-top: 12px;
       padding: 12px 18px 12px 16px;
       border-radius: 18px;
diff --git a/packages/adena-extension/src/components/pages/account-details/account-name-input/account-name-input.styles.ts b/packages/adena-extension/src/components/pages/account-details/account-name-input/account-name-input.styles.ts
index 01758a66..4c08a1ee 100644
--- a/packages/adena-extension/src/components/pages/account-details/account-name-input/account-name-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/account-details/account-name-input/account-name-input.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AccountNameInputWrapper = styled.div`
@@ -7,8 +7,8 @@ export const AccountNameInputWrapper = styled.div`
   width: 150px;
   height: auto;
   padding: 12.5px 16px;
-  background-color: ${theme.color.neutral[8]};
-  border: 1px solid ${theme.color.neutral[6]};
+  background-color: ${getTheme('neutral', '_9')};
+  border: 1px solid ${getTheme('neutral', '_7')};
   border-radius: 18px;
   transition: 0.2s;
   justify-content: center;
@@ -48,7 +48,7 @@ export const AccountNameInputWrapper = styled.div`
 
     &:hover {
       svg * {
-        fill: ${theme.color.neutral[0]};
+        fill: ${getTheme('neutral', '_1')};
       }
     }
   }
diff --git a/packages/adena-extension/src/components/pages/additional-token/additional-token-info/additional-token-info.styles.ts b/packages/adena-extension/src/components/pages/additional-token/additional-token-info/additional-token-info.styles.ts
index 3830f421..79c3f92f 100644
--- a/packages/adena-extension/src/components/pages/additional-token/additional-token-info/additional-token-info.styles.ts
+++ b/packages/adena-extension/src/components/pages/additional-token/additional-token-info/additional-token-info.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AdditionalTokenInfoWrapper = styled.div`
@@ -14,7 +14,7 @@ export const AdditionalTokenInfoItemWrapper = styled.div`
   width: 100%;
   height: 48px;
   padding: 13px 16px;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   border-radius: 30px;
   align-items: center;
   justify-content: space-between;
@@ -26,14 +26,14 @@ export const AdditionalTokenInfoItemWrapper = styled.div`
   .title {
     display: inline-flex;
     flex-shrink: 0;
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
     ${fonts.body2Reg};
   }
 
   .value {
     display: inline-block;
     max-width: 155px;
-    color: ${theme.color.neutral[0]};
+    color: ${getTheme('neutral', '_1')};
     ${fonts.body2Reg};
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/packages/adena-extension/src/components/pages/additional-token/additional-token-search-list/additional-token-search-list.styles.ts b/packages/adena-extension/src/components/pages/additional-token/additional-token-search-list/additional-token-search-list.styles.ts
index f8ff80f9..557a6b14 100644
--- a/packages/adena-extension/src/components/pages/additional-token/additional-token-search-list/additional-token-search-list.styles.ts
+++ b/packages/adena-extension/src/components/pages/additional-token/additional-token-search-list/additional-token-search-list.styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 export const AdditionalTokenSearchListWrapper = styled.div`
   display: flex;
@@ -20,7 +20,7 @@ export const AdditionalTokenSearchListWrapper = styled.div`
     display: flex;
     width: 100%;
     margin: 40px auto 180px auto;
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
     ${fonts.body1Reg};
     justify-content: center;
     align-items: center;
@@ -38,14 +38,14 @@ export const AdditionalTokenSearchListItemWrapper = styled.div`
   cursor: pointer;
 
   &:hover {
-    background-color: ${theme.color.neutral[6]};
+    background-color: ${getTheme('neutral', '_7')};
   }
 
   .title {
     display: inline-block;
     flex-shrink: 0;
     max-width: calc(100% - 140px);
-    color: ${theme.color.neutral[0]};
+    color: ${getTheme('neutral', '_1')};
     ${fonts.body2Reg};
 
     .name {
@@ -60,7 +60,7 @@ export const AdditionalTokenSearchListItemWrapper = styled.div`
     display: inline-block;
     flex-shrink: 0;
     max-width: 140px;
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
     ${fonts.body2Reg}
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/packages/adena-extension/src/components/pages/additional-token/additional-token-select-box/additional-token-select-box.styles.ts b/packages/adena-extension/src/components/pages/additional-token/additional-token-select-box/additional-token-select-box.styles.ts
index 5dce48ae..7ae0f962 100644
--- a/packages/adena-extension/src/components/pages/additional-token/additional-token-select-box/additional-token-select-box.styles.ts
+++ b/packages/adena-extension/src/components/pages/additional-token/additional-token-select-box/additional-token-select-box.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AdditionalTokenSelectBoxWrapper = styled.div`
@@ -16,8 +16,8 @@ export const AdditionalTokenSelectBoxWrapper = styled.div`
     height: auto;
     min-height: 48px;
     border-radius: 30px;
-    border: 1px solid ${theme.color.neutral[6]};
-    background-color: ${theme.color.neutral[8]};
+    border: 1px solid ${getTheme('neutral', '_7')};
+    background-color: ${getTheme('neutral', '_9')};
     overflow: hidden;
     z-index: 2;
 
@@ -40,7 +40,7 @@ export const AdditionalTokenSelectBoxWrapper = styled.div`
       width: 100%;
       padding: 0 4px;
       ${fonts.body2Reg};
-      color: ${theme.color.neutral[9]};
+      color: ${getTheme('neutral', 'a')};
     }
 
     .icon-wrapper {
@@ -51,7 +51,7 @@ export const AdditionalTokenSelectBoxWrapper = styled.div`
 
     &.selected {
       .title {
-        color: ${theme.color.neutral[0]};
+        color: ${getTheme('neutral', '_1')};
       }
     }
   }
@@ -60,10 +60,10 @@ export const AdditionalTokenSelectBoxWrapper = styled.div`
     .search-input-wrapper {
       height: 48px;
       padding: 4px 5px;
-      border-top: 1px solid ${theme.color.neutral[6]};
+      border-top: 1px solid ${getTheme('neutral', '_7')};
 
       & > * {
-        background-color: ${theme.color.neutral[6]};
+        background-color: ${getTheme('neutral', '_7')};
       }
     }
   }
diff --git a/packages/adena-extension/src/components/pages/additional-token/additional-token/additional-token.styles.ts b/packages/adena-extension/src/components/pages/additional-token/additional-token/additional-token.styles.ts
index 2df3ece4..643e9317 100644
--- a/packages/adena-extension/src/components/pages/additional-token/additional-token/additional-token.styles.ts
+++ b/packages/adena-extension/src/components/pages/additional-token/additional-token/additional-token.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AdditionalTokenWrapper = styled.div`
@@ -48,23 +48,23 @@ export const AdditionalTokenWrapper = styled.div`
       }
 
       &.cancel-button {
-        background-color: ${theme.color.neutral[4]};
+        background-color: ${getTheme('neutral', '_5')};
 
         :hover {
-          background-color: ${theme.color.neutral[5]};
+          background-color: ${getTheme('neutral', '_6')};
         }
       }
 
       &.add-button {
-        background-color: ${theme.color.primary[3]};
+        background-color: ${getTheme('primary', '_6')};
 
         &:hover {
-          background-color: ${theme.color.primary[4]};
+          background-color: ${getTheme('primary', '_7')};
         }
 
         &.disabled {
-          color: ${theme.color.neutral[4]};
-          background-color: ${theme.color.primary[6]};
+          color: ${getTheme('neutral', '_5')};
+          background-color: ${getTheme('primary', '_9')};
           cursor: default;
         }
       }
diff --git a/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network-table/approve-adding-network-table.styles.ts b/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network-table/approve-adding-network-table.styles.ts
index ddbf0a59..ee6c4b47 100644
--- a/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network-table/approve-adding-network-table.styles.ts
+++ b/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network-table/approve-adding-network-table.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const ApproveAddingNetworkTableWrapper = styled.div`
@@ -12,7 +12,7 @@ export const ApproveAddingNetworkTableWrapper = styled.div`
     display: flex;
     flex-direction: column;
     padding: 8px 16px;
-    background-color: ${theme.color.neutral[8]};
+    background-color: ${getTheme('neutral', '_9')};
     margin-bottom: 2px;
 
     &:first-child {
@@ -28,13 +28,13 @@ export const ApproveAddingNetworkTableWrapper = styled.div`
 
     .title {
       ${fonts.body1Reg};
-      color: ${theme.color.neutral[9]};
+      color: ${getTheme('neutral', 'a')};
       margin-bottom: 4px;
     }
 
     .value {
       ${fonts.body1Reg};
-      color: ${theme.color.neutral[0]};
+      color: ${getTheme('neutral', '_1')};
       word-break: break-all;
     }
   }
diff --git a/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network-item/approve-changing-network-item.styles.ts b/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network-item/approve-changing-network-item.styles.ts
index 0a135245..07f12160 100644
--- a/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network-item/approve-changing-network-item.styles.ts
+++ b/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network-item/approve-changing-network-item.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const ApproveChangingNetworkItemWrapper = styled.div`
@@ -20,7 +20,7 @@ export const ApproveChangingNetworkItemWrapper = styled.div`
     display: flex;
     width: 100px;
     padding: 5px 8px;
-    background-color: ${theme.color.neutral[8]};
+    background-color: ${getTheme('neutral', '_9')};
     border-radius: 8px;
     text-align: center;
     justify-content: center;
@@ -28,7 +28,7 @@ export const ApproveChangingNetworkItemWrapper = styled.div`
     .chain-name {
       display: -webkit-box;
       width: 100%;
-      color: ${theme.color.neutral[0]};
+      color: ${getTheme('neutral', '_1')};
       ${fonts.body2Reg};
       font-weight: 500;
       text-align: center;
diff --git a/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network/approve-changing-network.tsx b/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network/approve-changing-network.tsx
index fa746503..c6d54345 100644
--- a/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network/approve-changing-network.tsx
+++ b/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network/approve-changing-network.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
+import { useTheme } from 'styled-components';
 
 import { Text, SubHeader } from '@components/atoms';
 import { ApproveInjectionLoading, BottomFixedButtonGroup } from '@components/molecules';
-import theme from '@styles/theme';
 import IconArrowRight from '@assets/arrowL-right-bold.svg';
 import { ApproveChangingNetworkWrapper } from './approve-changing-network.styles';
 import ApproveChangingNetworkItem from '../approve-changing-network-item/approve-changing-network-item';
@@ -37,6 +37,8 @@ const ApproveChangingNetwork: React.FC<ApproveChangingNetworkProps> = ({
 }) => {
   const title = useMemo(() => `Switch to ${toChain.name}`, [toChain.name]);
 
+  const theme = useTheme();
+
   const onClickCancel = useCallback(() => {
     cancel();
   }, [cancel]);
@@ -58,7 +60,7 @@ const ApproveChangingNetwork: React.FC<ApproveChangingNetworkProps> = ({
         <SubHeader title={title} />
 
         <div className='description-wrapper'>
-          <Text type='body1Reg' color={theme.color.neutral[9]} textAlign='center'>
+          <Text type='body1Reg' color={theme.neutral.a} textAlign='center'>
             {
               'This will switch the current network on\nAdena to the one that matches the\nconnected dapp.'
             }
diff --git a/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts b/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts
index 0c44a41b..87690e79 100644
--- a/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts
+++ b/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.styles.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import check from '@assets/check-circle.svg';
 import mixins from '@styles/mixins';
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 export const WalletConnectWrapper = styled.div`
   ${mixins.flex('column', 'center', 'flex-start')};
@@ -37,7 +37,7 @@ export const WalletConnectWrapper = styled.div`
     border-radius: 24px;
     padding: 10px 18px;
     margin-bottom: 12px;
-    background-color: ${theme.color.neutral[8]};
+    background-color: ${getTheme('neutral', '_9')};
     ${fonts.body2Reg};
   }
 
@@ -45,15 +45,15 @@ export const WalletConnectWrapper = styled.div`
     width: 100%;
     height: auto;
     border-radius: 18px;
-    background-color: ${theme.color.neutral[8]};
+    background-color: ${getTheme('neutral', '_9')};
 
     .info-table-header {
       ${mixins.flex('column', 'flex-start', 'center')};
       width: 100%;
       padding: 12px;
-      color: ${theme.color.neutral[9]};
+      color: ${getTheme('neutral', 'a')};
       ${fonts.body2Bold};
-      border-bottom: 2px solid ${theme.color.neutral[7]};
+      border-bottom: 2px solid ${getTheme('neutral', '_8')};
     }
 
     .info-table-body {
@@ -81,7 +81,7 @@ export const WalletConnectWrapper = styled.div`
     ${mixins.flex('column', 'flex-start', 'center')};
     padding: 4px 0;
     margin-bottom: 43px;
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
     ${fonts.captionReg};
   }
 
@@ -99,11 +99,11 @@ export const WalletConnectWrapper = styled.div`
     }
 
     button.cancel {
-      background-color: ${theme.color.neutral[4]};
+      background-color: ${getTheme('neutral', '_5')};
     }
 
     button.connect {
-      background-color: ${theme.color.primary[3]};
+      background-color: ${getTheme('primary', '_6')};
     }
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/change-network/network-list-item/network-list-item.styles.ts b/packages/adena-extension/src/components/pages/change-network/network-list-item/network-list-item.styles.ts
index 92a6cace..5bc6e615 100644
--- a/packages/adena-extension/src/components/pages/change-network/network-list-item/network-list-item.styles.ts
+++ b/packages/adena-extension/src/components/pages/change-network/network-list-item/network-list-item.styles.ts
@@ -1,4 +1,4 @@
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const NetworkListItemWrapper = styled.div`
@@ -7,13 +7,13 @@ export const NetworkListItemWrapper = styled.div`
   width: 100%;
   height: auto;
   padding: 9px 16px;
-  background-color: ${theme.color.neutral[6]};
+  background-color: ${getTheme('neutral', '_7')};
   border-radius: 18px;
   transition: 0.2s;
   cursor: pointer;
 
   &:hover {
-    background-color: ${theme.color.neutral[11]};
+    background-color: ${getTheme('neutral', 'b')};
   }
 
   .info-wrapper {
@@ -32,7 +32,7 @@ export const NetworkListItemWrapper = styled.div`
       .name {
         display: block;
         max-width: 236px;
-        color: ${theme.color.neutral[0]};
+        color: ${getTheme('neutral', '_1')};
 
         overflow: hidden;
         text-overflow: ellipsis;
@@ -51,12 +51,12 @@ export const NetworkListItemWrapper = styled.div`
         & .icon-edit {
           path {
             transition: 0.2s;
-            fill: ${theme.color.neutral[9]};
+            fill: ${getTheme('neutral', 'a')};
           }
 
           &:hover {
             path {
-              fill: ${theme.color.neutral[0]};
+              fill: ${getTheme('neutral', '_1')};
             }
           }
         }
@@ -71,7 +71,7 @@ export const NetworkListItemWrapper = styled.div`
       .description {
         display: block;
         max-width: 244px;
-        color: ${theme.color.neutral[9]};
+        color: ${getTheme('neutral', 'a')};
         font-weight: 400;
         white-space: nowrap;
         overflow: hidden;
diff --git a/packages/adena-extension/src/components/pages/main/main-manage-token-button/main-manage-token-button.styles.ts b/packages/adena-extension/src/components/pages/main/main-manage-token-button/main-manage-token-button.styles.ts
index a53241df..e2357541 100644
--- a/packages/adena-extension/src/components/pages/main/main-manage-token-button/main-manage-token-button.styles.ts
+++ b/packages/adena-extension/src/components/pages/main/main-manage-token-button/main-manage-token-button.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const MainManageTokenButtonWrapper = styled.div`
@@ -23,7 +23,7 @@ export const MainManageTokenButtonWrapper = styled.div`
   }
 
   .title {
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
     ${fonts.body1Reg};
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item-balance/manage-token-list-item-balance.tsx b/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item-balance/manage-token-list-item-balance.tsx
index fb2eab9f..841e8049 100644
--- a/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item-balance/manage-token-list-item-balance.tsx
+++ b/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item-balance/manage-token-list-item-balance.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
 
 import { TokenBalance } from '@components/molecules';
-import theme from '@styles/theme';
 
 export interface ManageTokenListItemBalanceProps {
   amount: {
@@ -13,12 +13,14 @@ export interface ManageTokenListItemBalanceProps {
 const ManageTokenListItemBalance: React.FC<ManageTokenListItemBalanceProps> = ({ amount }) => {
   const { value, denom } = amount;
 
+  const theme = useTheme();
+
   return (
     <TokenBalance
       value={value}
       denom={denom}
       orientation='HORIZONTAL'
-      fontColor={theme.color.neutral[9]}
+      fontColor={theme.neutral.a}
       fontStyleKey='body4Reg'
       minimumFontSize='10px'
     />
diff --git a/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item/manage-token-list-item.styles.ts b/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item/manage-token-list-item.styles.ts
index fec01452..05464880 100644
--- a/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item/manage-token-list-item.styles.ts
+++ b/packages/adena-extension/src/components/pages/manage-token/manage-token-list-item/manage-token-list-item.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const ManageTokenListItemWrapper = styled.div`
@@ -7,7 +7,7 @@ export const ManageTokenListItemWrapper = styled.div`
   padding: 10px 14px;
   width: 100%;
   height: auto;
-  background: ${theme.color.neutral[8]};
+  background: ${getTheme('neutral', '_9')};
   border-radius: 18px;
   align-items: center;
   justify-items: flex-start;
diff --git a/packages/adena-extension/src/components/pages/manage-token/manage-token-search-input/manage-token-search-input.styles.ts b/packages/adena-extension/src/components/pages/manage-token/manage-token-search-input/manage-token-search-input.styles.ts
index 5ca2ce58..ddeb40b1 100644
--- a/packages/adena-extension/src/components/pages/manage-token/manage-token-search-input/manage-token-search-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/manage-token/manage-token-search-input/manage-token-search-input.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const ManageTokenSearchInputWrapper = styled.div`
@@ -9,9 +9,9 @@ export const ManageTokenSearchInputWrapper = styled.div`
   padding: 12px 16px;
   align-items: center;
   justify-content: flex-start;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   border-radius: 30px;
-  border: 1px solid ${theme.color.neutral[6]};
+  border: 1px solid ${getTheme('neutral', '_7')};
 
   .search-icon-wrapper {
     display: inline-flex;
@@ -50,13 +50,13 @@ export const ManageTokenSearchInputWrapper = styled.div`
     .added {
       width: 100%;
       height: 100%;
-      fill: ${theme.color.neutral[6]};
+      fill: ${getTheme('neutral', '_7')};
       transition: 0.2s;
     }
 
     :hover {
       .added {
-        fill: ${theme.color.neutral[11]};
+        fill: ${getTheme('neutral', 'b')};
       }
     }
   }
diff --git a/packages/adena-extension/src/components/pages/manage-token/manage-token/manage-token.styles.ts b/packages/adena-extension/src/components/pages/manage-token/manage-token/manage-token.styles.ts
index bf3af47a..21e61a4a 100644
--- a/packages/adena-extension/src/components/pages/manage-token/manage-token/manage-token.styles.ts
+++ b/packages/adena-extension/src/components/pages/manage-token/manage-token/manage-token.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const ManageTokenSearchWrapper = styled.div`
@@ -28,13 +28,13 @@ export const ManageTokenSearchWrapper = styled.div`
     .close {
       width: 100%;
       height: 100%;
-      background-color: ${theme.color.neutral[4]};
+      background-color: ${getTheme('neutral', '_5')};
       border-radius: 30px;
       ${fonts.body1Bold};
       transition: 0.2s;
 
       :hover {
-        background-color: ${theme.color.neutral[5]};
+        background-color: ${getTheme('neutral', '_6')};
       }
     }
   }
diff --git a/packages/adena-extension/src/components/pages/manage-token/toggle/toggle.styles.ts b/packages/adena-extension/src/components/pages/manage-token/toggle/toggle.styles.ts
index 1c869981..2cf7af7b 100644
--- a/packages/adena-extension/src/components/pages/manage-token/toggle/toggle.styles.ts
+++ b/packages/adena-extension/src/components/pages/manage-token/toggle/toggle.styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 export const ToggleWrapper = styled.div`
   display: flex;
@@ -10,7 +10,7 @@ export const ToggleWrapper = styled.div`
   height: 26px;
   padding: 3px;
   border-radius: 100px;
-  background-color: ${theme.color.neutral[4]};
+  background-color: ${getTheme('neutral', '_5')};
   transition: 0.2s;
   cursor: pointer;
 
@@ -18,13 +18,13 @@ export const ToggleWrapper = styled.div`
     display: block;
     width: 20px;
     height: 20px;
-    background-color: ${theme.color.neutral[0]};
+    background-color: ${getTheme('neutral', '_1')};
     border-radius: 20px;
     transition: 0.2s;
   }
 
   &.activated {
-    background-color: ${theme.color.primary[4]};
+    background-color: ${getTheme('primary', '_7')};
 
     .circle {
       margin-left: 20px;
diff --git a/packages/adena-extension/src/components/pages/router/side-menu-account-item/side-menu-account-item.styles.ts b/packages/adena-extension/src/components/pages/router/side-menu-account-item/side-menu-account-item.styles.ts
index 3435ece8..5fa5e1dc 100644
--- a/packages/adena-extension/src/components/pages/router/side-menu-account-item/side-menu-account-item.styles.ts
+++ b/packages/adena-extension/src/components/pages/router/side-menu-account-item/side-menu-account-item.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const SideMenuAccountItemWrapper = styled.div`
@@ -13,11 +13,11 @@ export const SideMenuAccountItemWrapper = styled.div`
   cursor: pointer;
 
   &.selected {
-    background-color: ${theme.color.neutral[6]};
+    background-color: ${getTheme('neutral', '_7')};
   }
 
   &:hover {
-    background-color: ${theme.color.neutral[6]};
+    background-color: ${getTheme('neutral', '_7')};
   }
 
   .info-wrapper {
@@ -55,7 +55,7 @@ export const SideMenuAccountItemWrapper = styled.div`
       width: 100%;
       height: auto;
       .balance {
-        color: ${theme.color.neutral[9]};
+        color: ${getTheme('neutral', 'a')};
         ${fonts.body3Reg}
         line-height: 18px;
       }
@@ -75,12 +75,12 @@ export const SideMenuAccountItemWrapper = styled.div`
     }
     & > svg ellipse {
       transition: 0.2s;
-      fill: ${theme.color.neutral[2]};
+      fill: ${getTheme('neutral', '_3')};
     }
 
     &:hover {
       & > svg ellipse {
-        fill: ${theme.color.neutral[0]};
+        fill: ${getTheme('neutral', '_1')};
       }
     }
   }
@@ -94,8 +94,8 @@ export const SideMenuAccountItemMoreInfoWrapper = styled.div<{
   left: ${({ positionX }): string => `${positionX - 130}px`};
   top: ${({ positionY }): string => `${positionY - 40}px`};
   width: 146px;
-  background-color: ${theme.color.neutral[7]};
-  border: 1px solid ${theme.color.neutral[6]};
+  background-color: ${getTheme('neutral', '_8')};
+  border: 1px solid ${getTheme('neutral', '_7')};
   border-radius: 12.5px;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
   z-index: 99;
@@ -105,12 +105,12 @@ export const SideMenuAccountItemMoreInfoWrapper = styled.div<{
     display: flex;
     flex-direction: row;
     padding: 7px 0 7px 12px;
-    border-bottom: 1px solid ${theme.color.neutral[6]};
+    border-bottom: 1px solid ${getTheme('neutral', '_7')};
     cursor: pointer;
 
     &:hover {
       transition: 0.2s;
-      background-color: ${theme.color.neutral[6]};
+      background-color: ${getTheme('neutral', '_7')};
     }
 
     &:last-child {
diff --git a/packages/adena-extension/src/components/pages/router/side-menu-layout/side-menu-layout.styles.ts b/packages/adena-extension/src/components/pages/router/side-menu-layout/side-menu-layout.styles.ts
index 4c3531c0..4ebdc62d 100644
--- a/packages/adena-extension/src/components/pages/router/side-menu-layout/side-menu-layout.styles.ts
+++ b/packages/adena-extension/src/components/pages/router/side-menu-layout/side-menu-layout.styles.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 export const SideMenuOverlay = styled.div<{ open: boolean }>`
   position: fixed;
@@ -33,7 +33,7 @@ export const SideMenuBackground = styled.div`
 
 export const SideMenuContent = styled.div<{ open: boolean }>`
   ${mixins.flex('column', 'center', 'space-between')};
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
   position: fixed;
   top: 0px;
   left: ${({ open }): '0px' | '-100%' => (open ? '0px' : '-100%')};
diff --git a/packages/adena-extension/src/components/pages/router/side-menu-link/side-menu-link.styles.ts b/packages/adena-extension/src/components/pages/router/side-menu-link/side-menu-link.styles.ts
index 06a4242a..11dfc57f 100644
--- a/packages/adena-extension/src/components/pages/router/side-menu-link/side-menu-link.styles.ts
+++ b/packages/adena-extension/src/components/pages/router/side-menu-link/side-menu-link.styles.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 
 export const SideMenuLinkWrapper = styled.div`
   display: flex;
@@ -10,12 +10,12 @@ export const SideMenuLinkWrapper = styled.div`
   padding: 16px 20px;
   justify-content: flex-start;
   align-items: center;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   transition: 0.2s;
   cursor: pointer;
 
   &:hover {
-    background-color: ${theme.color.neutral[6]};
+    background-color: ${getTheme('neutral', '_7')};
   }
 
   .icon {
diff --git a/packages/adena-extension/src/components/pages/router/side-menu/side-menu.styles.ts b/packages/adena-extension/src/components/pages/router/side-menu/side-menu.styles.ts
index f05289f2..a9b61c84 100644
--- a/packages/adena-extension/src/components/pages/router/side-menu/side-menu.styles.ts
+++ b/packages/adena-extension/src/components/pages/router/side-menu/side-menu.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const SideMenuWrapper = styled.div`
@@ -6,7 +6,7 @@ export const SideMenuWrapper = styled.div`
   flex-direction: column;
   width: 100%;
   height: 100vh;
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
 
   .header-wrapper {
     display: flex;
@@ -16,7 +16,7 @@ export const SideMenuWrapper = styled.div`
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background-color: ${theme.color.neutral[8]};
+    background-color: ${getTheme('neutral', '_9')};
 
     .logo {
       width: 82px;
@@ -34,14 +34,14 @@ export const SideMenuWrapper = styled.div`
 
         line {
           transition: 0.2s;
-          stroke: ${theme.color.neutral[9]};
+          stroke: ${getTheme('neutral', 'a')};
         }
       }
 
       &:hover {
         svg {
           line {
-            stroke: ${theme.color.neutral[0]};
+            stroke: ${getTheme('neutral', '_1')};
           }
         }
       }
@@ -60,20 +60,20 @@ export const SideMenuWrapper = styled.div`
     display: flex;
     height: 100%;
     padding: 16px 20px;
-    border-top: 1px solid ${theme.color.neutral[6]};
+    border-top: 1px solid ${getTheme('neutral', '_7')};
 
     .add-account-button {
       display: inline-flex;
       width: fit-content;
       height: fit-content;
-      color: ${theme.color.neutral[0]};
+      color: ${getTheme('neutral', '_1')};
       transition: 0.2s;
       align-items: center;
       cursor: pointer;
 
       svg * {
         transition: 0.2s;
-        stroke: ${theme.color.neutral[0]};
+        stroke: ${getTheme('neutral', '_1')};
       }
 
       .text {
@@ -82,9 +82,9 @@ export const SideMenuWrapper = styled.div`
       }
 
       &:hover {
-        color: ${theme.color.neutral[9]};
+        color: ${getTheme('neutral', 'a')};
         svg * {
-          stroke: ${theme.color.neutral[9]};
+          stroke: ${getTheme('neutral', 'a')};
         }
       }
     }
diff --git a/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.styles.ts
index af81610d..cbdd627c 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AddressBookListWrapper = styled.div`
@@ -6,7 +6,7 @@ export const AddressBookListWrapper = styled.div`
   flex-direction: column;
   width: 100%;
   height: auto;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
 
   .no-address-wrapper {
     display: flex;
@@ -29,7 +29,7 @@ export const AddressBookListItemWrapper = styled.div`
   cursor: pointer;
 
   :hover {
-    background-color: ${theme.color.neutral[6]};
+    background-color: ${getTheme('neutral', '_7')};
   }
 
   .name {
@@ -37,6 +37,6 @@ export const AddressBookListItemWrapper = styled.div`
   }
 
   .address {
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.tsx b/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.tsx
index 222d7d17..152d8059 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.tsx
+++ b/packages/adena-extension/src/components/pages/transfer-input/address-book-list/address-book-list.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
+
 import { AddressBookListWrapper, AddressBookListItemWrapper } from './address-book-list.styles';
 import { Text } from '@components/atoms';
-import theme from '@styles/theme';
 
 export interface AddressBookListProps {
   addressBookInfos: {
@@ -34,11 +35,12 @@ const AddressBookListItem: React.FC<AddressBookListItemProps> = ({
 };
 
 const AddressBookList: React.FC<AddressBookListProps> = ({ addressBookInfos, onClickItem }) => {
+  const theme = useTheme();
   return (
     <AddressBookListWrapper>
       {addressBookInfos.length === 0 && (
         <div className='no-address-wrapper'>
-          <Text className='no-address' type='body2Reg' color={theme.color.neutral[9]}>
+          <Text className='no-address' type='body2Reg' color={theme.neutral.a}>
             No address registered
           </Text>
         </div>
diff --git a/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.styles.ts
index d958b481..3078ddaf 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/address-input/address-input.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AddressInputWrapper = styled.div`
@@ -14,8 +14,8 @@ export const AddressInputWrapper = styled.div`
     min-height: 48px;
     padding: 12px 16px;
     ${fonts.body2Reg};
-    background-color: ${theme.color.neutral[8]};
-    border: 1px solid ${theme.color.neutral[6]};
+    background-color: ${getTheme('neutral', '_9')};
+    border: 1px solid ${getTheme('neutral', '_7')};
     border-radius: 30px;
     align-items: center;
 
@@ -26,7 +26,7 @@ export const AddressInputWrapper = styled.div`
       }
       .description {
         margin-left: 5px;
-        color: ${theme.color.neutral[9]};
+        color: ${getTheme('neutral', 'a')};
       }
     }
 
@@ -39,7 +39,7 @@ export const AddressInputWrapper = styled.div`
       line-height: 25px;
 
       ::placeholder {
-        color: ${theme.color.neutral[9]};
+        color: ${getTheme('neutral', 'a')};
       }
     }
   }
@@ -51,14 +51,14 @@ export const AddressInputWrapper = styled.div`
     height: 25px;
     padding: 3px 14px;
     margin-left: 5px;
-    background-color: ${theme.color.neutral[6]};
+    background-color: ${getTheme('neutral', '_7')};
     border-radius: 15px;
     align-items: center;
     transition: 0.2s;
     cursor: pointer;
 
     :hover {
-      background-color: ${theme.color.neutral[11]};
+      background-color: ${getTheme('neutral', 'b')};
     }
 
     .address-book {
@@ -79,7 +79,7 @@ export const AddressInputWrapper = styled.div`
     height: auto;
     max-height: 142px;
     left: 0;
-    border: 1px solid ${theme.color.neutral[6]};
+    border: 1px solid ${getTheme('neutral', '_7')};
     border-bottom-right-radius: 25px;
     border-bottom-left-radius: 25px;
     z-index: 4;
@@ -96,12 +96,12 @@ export const AddressInputWrapper = styled.div`
 
   &.error {
     .input-wrapper {
-      border-color: ${theme.color.red[2]};
+      border-color: ${getTheme('red', '_5')};
     }
 
     .list-wrapper {
-      border-color: ${theme.color.red[2]};
-      border-top-color: ${theme.color.neutral[6]};
+      border-color: ${getTheme('red', '_5')};
+      border-top-color: ${getTheme('neutral', '_7')};
     }
   }
 
@@ -109,6 +109,6 @@ export const AddressInputWrapper = styled.div`
     position: relative;
     padding: 0 16px;
     ${fonts.captionReg};
-    color: ${theme.color.red[2]};
+    color: ${getTheme('red', '_5')};
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/balance-input/balance-input.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/balance-input/balance-input.styles.ts
index 20761a67..157e047f 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/balance-input/balance-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/balance-input/balance-input.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const BalanceInputWrapper = styled.div`
@@ -14,8 +14,8 @@ export const BalanceInputWrapper = styled.div`
     min-height: 48px;
     padding: 12px 16px;
     ${fonts.body2Reg};
-    background-color: ${theme.color.neutral[8]};
-    border: 1px solid ${theme.color.neutral[6]};
+    background-color: ${getTheme('neutral', '_9')};
+    border: 1px solid ${getTheme('neutral', '_7')};
     border-radius: 30px;
     align-items: center;
 
@@ -33,13 +33,13 @@ export const BalanceInputWrapper = styled.div`
       width: 64px;
       height: 24px;
       border-radius: 12px;
-      background-color: ${theme.color.neutral[6]};
+      background-color: ${getTheme('neutral', '_7')};
       align-items: center;
       justify-content: center;
       transition: 0.2s;
 
       :hover {
-        background-color: ${theme.color.neutral[11]};
+        background-color: ${getTheme('neutral', 'b')};
       }
     }
   }
@@ -48,16 +48,16 @@ export const BalanceInputWrapper = styled.div`
     position: relative;
     padding: 0 16px;
     ${fonts.captionReg};
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
   }
 
   &.error {
     .input-wrapper {
-      border-color: ${theme.color.red[2]};
+      border-color: ${getTheme('red', '_5')};
     }
 
     .description {
-      color: ${theme.color.red[2]};
+      color: ${getTheme('red', '_5')};
     }
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts
index 3f871da4..7469c31a 100644
--- a/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-input/transfer-input/transfer-input.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransferInputWrapper = styled.div`
@@ -42,11 +42,11 @@ export const TransferInputWrapper = styled.div`
       height: 48px;
       border-radius: 30px;
       ${fonts.body1Bold};
-      background-color: ${theme.color.neutral[4]};
+      background-color: ${getTheme('neutral', '_5')};
       transition: 0.2s;
 
       :hover {
-        background-color: ${theme.color.neutral[5]};
+        background-color: ${getTheme('neutral', '_6')};
       }
 
       &:last-child {
@@ -54,15 +54,15 @@ export const TransferInputWrapper = styled.div`
       }
 
       &.next {
-        background-color: ${theme.color.primary[3]};
+        background-color: ${getTheme('primary', '_6')};
 
         :hover {
-          background-color: ${theme.color.primary[4]};
+          background-color: ${getTheme('primary', '_7')};
         }
 
         &.disabled {
-          color: ${theme.color.neutral[4]};
-          background-color: ${theme.color.primary[6]};
+          color: ${getTheme('neutral', '_5')};
+          background-color: ${getTheme('primary', '_9')};
           cursor: default;
         }
       }
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
index 9f64d24b..50e961f8 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-address/transfer-summary-address.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransferSummaryAddressWrapper = styled.div`
@@ -8,7 +8,7 @@ export const TransferSummaryAddressWrapper = styled.div`
   height: auto;
   padding: 20px;
   ${fonts.body2Reg};
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   border-radius: 18px;
   justify-content: space-between;
   align-items: center;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.styles.ts b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.styles.ts
index 593929c9..6dd21135 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-balance/transfer-summary-balance.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransferSummaryBalanceWrapper = styled.div`
@@ -7,7 +7,7 @@ export const TransferSummaryBalanceWrapper = styled.div`
   width: 100%;
   height: auto;
   padding: 20px;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   border-radius: 18px;
   justify-content: space-between;
   align-items: center;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-network-fee/transfer-summary-network-fee.styles.ts b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-network-fee/transfer-summary-network-fee.styles.ts
index bdf0a930..ed3b65db 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-network-fee/transfer-summary-network-fee.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary-network-fee/transfer-summary-network-fee.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransferSummaryNetworkFeeWrapper = styled.div<{ isError?: boolean }>`
@@ -6,16 +6,15 @@ export const TransferSummaryNetworkFeeWrapper = styled.div<{ isError?: boolean }
   flex-direction: row;
   width: 100%;
   padding: 14px 16px;
-  background-color: ${theme.color.neutral[8]};
-  border: 1px solid ${theme.color.neutral[6]};
+  background-color: ${getTheme('neutral', '_9')};
+  border: 1px solid ${getTheme('neutral', '_7')};
   border-radius: 30px;
   justify-content: space-between;
   align-items: center;
-  ${({ isError, theme }): string | false | undefined =>
-    isError && `border-color: ${theme.color.red[2]};`}
+  ${({ isError, theme }): string | false | undefined => isError && `border-color: ${theme.red._5};`}
 
   .key {
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
     ${fonts.body2Reg};
   }
 `;
diff --git a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.styles.ts b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.styles.ts
index f99b3500..b39c33ec 100644
--- a/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-summary/transfer-summary/transfer-summary.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransferSummaryWrapper = styled.div`
@@ -37,7 +37,7 @@ export const TransferSummaryWrapper = styled.div`
       width: 100%;
       padding: 0 16px;
       ${fonts.captionReg};
-      color: ${theme.color.red[2]};
+      color: ${getTheme('red', '_5')};
     }
   }
 
@@ -53,11 +53,11 @@ export const TransferSummaryWrapper = styled.div`
       height: 48px;
       border-radius: 30px;
       ${fonts.body1Bold};
-      background-color: ${theme.color.neutral[4]};
+      background-color: ${getTheme('neutral', '_5')};
       transition: 0.2s;
 
       :hover {
-        background-color: ${theme.color.neutral[5]};
+        background-color: ${getTheme('neutral', '_6')};
       }
 
       &:last-child {
@@ -65,10 +65,10 @@ export const TransferSummaryWrapper = styled.div`
       }
 
       &.send {
-        background-color: ${theme.color.primary[3]};
+        background-color: ${getTheme('primary', '_6')};
 
         :hover {
-          background-color: ${theme.color.primary[4]};
+          background-color: ${getTheme('primary', '_7')};
         }
       }
     }
diff --git a/packages/adena-extension/src/components/pages/wallet-main/token-list-item/token-list-item.styles.ts b/packages/adena-extension/src/components/pages/wallet-main/token-list-item/token-list-item.styles.ts
index e93bd328..abf6a1b3 100644
--- a/packages/adena-extension/src/components/pages/wallet-main/token-list-item/token-list-item.styles.ts
+++ b/packages/adena-extension/src/components/pages/wallet-main/token-list-item/token-list-item.styles.ts
@@ -1,4 +1,4 @@
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TokenListItemWrapper = styled.div`
@@ -7,7 +7,7 @@ export const TokenListItemWrapper = styled.div`
   padding: 13px;
   width: 100%;
   height: auto;
-  background: ${theme.color.neutral[8]};
+  background: ${getTheme('neutral', '_9')};
   border-radius: 18px;
   align-items: center;
   justify-items: flex-start;
@@ -18,7 +18,7 @@ export const TokenListItemWrapper = styled.div`
   }
 
   &:hover {
-    background: ${theme.color.neutral[6]};
+    background: ${getTheme('neutral', '_7')};
     cursor: pointer;
   }
 
diff --git a/packages/adena-extension/src/pages/certify/about-adena/index.tsx b/packages/adena-extension/src/pages/certify/about-adena/index.tsx
index 838bd6eb..f119a662 100644
--- a/packages/adena-extension/src/pages/certify/about-adena/index.tsx
+++ b/packages/adena-extension/src/pages/certify/about-adena/index.tsx
@@ -1,11 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import logo from '@assets/logo-default-v2.svg';
 import { Text, FullButtonRightIcon, ButtonMode } from '@components/atoms';
 import { BottomFixedButton } from '@components/molecules';
-import theme from '@styles/theme';
 import mixins from '@styles/mixins';
 
 const menuMakerInfo = [
@@ -42,6 +41,7 @@ const menuMakerInfo = [
 ];
 
 export const AboutAdena = (): JSX.Element => {
+  const theme = useTheme();
   const [version, setVersion] = useState('');
   const navigate = useNavigate();
 
@@ -65,7 +65,7 @@ export const AboutAdena = (): JSX.Element => {
   return (
     <Wrapper>
       <Logo src={logo} alt='logo' />
-      <Text type='light13' color={theme.color.neutral[9]} margin='0px 0px 22px'>
+      <Text type='light13' color={theme.neutral.a} margin='0px 0px 22px'>
         {`Version ${version}`}
       </Text>
       {menuMakerInfo.map((v, i) => (
diff --git a/packages/adena-extension/src/pages/certify/add-account-page/multiline-text-with-arrow-button.tsx b/packages/adena-extension/src/pages/certify/add-account-page/multiline-text-with-arrow-button.tsx
index 7eb80be4..bd169dce 100644
--- a/packages/adena-extension/src/pages/certify/add-account-page/multiline-text-with-arrow-button.tsx
+++ b/packages/adena-extension/src/pages/certify/add-account-page/multiline-text-with-arrow-button.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import { Text, Icon } from '@components/atoms';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import mixins from '@styles/mixins';
 
 interface MultiButtonProps {
@@ -18,6 +18,7 @@ export const MultilineTextWithArrowButton = ({
   disabled = false,
   onClick,
 }: MultiButtonProps): JSX.Element => {
+  const theme = useTheme();
   const onClickWrapper = (): void => {
     if (disabled) {
       return;
@@ -28,7 +29,7 @@ export const MultilineTextWithArrowButton = ({
   return (
     <Wrapper disabled={disabled} onClick={onClickWrapper}>
       <Text type='body1Bold'>{title}</Text>
-      <Text type='body2Reg' color={theme.color.neutral[9]}>
+      <Text type='body2Reg' color={theme.neutral.a}>
         {subTitle}
       </Text>
       <Icon name='iconArrowV2' className='arrow-icon' />
@@ -43,7 +44,7 @@ const Wrapper = styled.button`
   height: 80px;
   border-radius: 18px;
   padding: 15px 20px;
-  background-color: ${theme.color.neutral[6]};
+  background-color: ${getTheme('neutral', '_7')};
   cursor: pointer;
 
   .arrow-icon {
@@ -55,9 +56,9 @@ const Wrapper = styled.button`
     `
       transition: all 0.3s ease;
       &:hover {
-        background-color: ${theme.color.neutral[11]};
+        background-color: ${theme.neutral.b};
         .arrow-icon * {
-          stroke: ${theme.color.neutral[0]};
+          stroke: ${theme.neutral._1};
         }
       }
     `}
diff --git a/packages/adena-extension/src/pages/certify/add-address/index.tsx b/packages/adena-extension/src/pages/certify/add-address/index.tsx
index fc88731b..736244c7 100644
--- a/packages/adena-extension/src/pages/certify/add-address/index.tsx
+++ b/packages/adena-extension/src/pages/certify/add-address/index.tsx
@@ -1,12 +1,12 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import { Text, DefaultInput, inputStyle, ErrorText, LeftArrowBtn } from '@components/atoms';
 import { CancelAndConfirmButton } from '@components/molecules';
 import add from '@assets/add-symbol.svg';
 import edit from '@assets/edit-symbol.svg';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import {
   validateAlreadyAddress,
   validateAlreadyAddressByAccounts,
@@ -23,6 +23,7 @@ const specialPatternCheck = /\W|\s/g;
 const ACCOUNT_NAME_LENGTH_LIMIT = 23;
 
 const AddAddress = (): JSX.Element => {
+  const theme = useTheme();
   const { wallet } = useWalletContext();
   const { addressBookService } = useAdenaContext();
   const { currentAccount } = useCurrentAccount();
@@ -181,7 +182,7 @@ const AddAddress = (): JSX.Element => {
       <ErrorText text={errorMsg} />
       {!isAdd && (
         <RemoveAddressBtn error={Boolean(errorMsg)} onClick={removeHandler}>
-          <Text type='body1Reg' color={theme.color.neutral[9]}>
+          <Text type='body1Reg' color={theme.neutral.a}>
             Remove Address
           </Text>
         </RemoveAddressBtn>
@@ -202,7 +203,7 @@ const RemoveAddressBtn = styled.button<{ error: boolean }>`
   text-decoration-line: underline;
   text-underline-offset: 2px;
   text-decoration-thickness: 1px;
-  text-decoration-color: ${theme.color.neutral[9]};
+  text-decoration-color: ${getTheme('neutral', 'a')};
   position: absolute;
   bottom: 91px;
 `;
@@ -212,8 +213,7 @@ const AddressInput = styled.textarea<{ error: boolean }>`
   height: 70px;
   overflow: hidden;
   resize: none;
-  border: 1px solid
-    ${({ error, theme }): string => (error ? theme.color.red[2] : theme.color.neutral[6])};
+  border: 1px solid ${({ error, theme }): string => (error ? theme.red._5 : theme.neutral._7)};
   margin-top: 12px;
 `;
 
diff --git a/packages/adena-extension/src/pages/certify/address-book/index.tsx b/packages/adena-extension/src/pages/certify/address-book/index.tsx
index 736a7a00..24106a1b 100644
--- a/packages/adena-extension/src/pages/certify/address-book/index.tsx
+++ b/packages/adena-extension/src/pages/certify/address-book/index.tsx
@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import { Text, ListBox } from '@components/atoms';
-import theme from '@styles/theme';
 import { CloseShadowButton } from '@components/molecules';
 import plus from '@assets/plus.svg';
 import { RoutePath } from '@router/path';
@@ -22,6 +21,7 @@ export interface BookListProps {
 }
 
 const AddressBook = (): JSX.Element => {
+  const theme = useTheme();
   const { addressBookService } = useAdenaContext();
   const navigate = useNavigate();
   const [addressList, setAddressList] = useState<any>([]);
@@ -55,7 +55,7 @@ const AddressBook = (): JSX.Element => {
               left={<Text type='body2Bold'>{formatNickname(v.name, 15)}</Text>}
               center={null}
               right={
-                <Text type='body2Reg' color={theme.color.neutral[9]} margin='0px 0px 0px auto'>
+                <Text type='body2Reg' color={theme.neutral.a} margin='0px 0px 0px auto'>
                   {formatAddress(v.address)}
                 </Text>
               }
@@ -67,7 +67,7 @@ const AddressBook = (): JSX.Element => {
             />
           ))
         ) : (
-          <Text className='desc' type='body1Reg' color={theme.color.neutral[9]}>
+          <Text className='desc' type='body1Reg' color={theme.neutral.a}>
             No addresses to display
           </Text>
         )}
diff --git a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx
index 819d3396..44c906c0 100644
--- a/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx
+++ b/packages/adena-extension/src/pages/certify/approve-connect-hardware-wallet/select-account/select-account.tsx
@@ -8,7 +8,7 @@ import { TitleWithDesc } from '@components/molecules';
 import { Account } from 'adena-module';
 import IconAddSymbol from '@assets/add-symbol.svg';
 import IconCheck from '@assets/check.svg';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import { formatAddress } from '@common/utils/client-utils';
 import { RoutePath } from '@router/path';
 import IconArrowDown from '@assets/arrowS-down-gray.svg';
@@ -54,8 +54,8 @@ const AccountListContainer = styled.div`
   width: 320px;
   height: 166px;
   border-radius: 10px;
-  border: 1px solid ${theme.color.neutral[6]};
-  background-color: ${theme.color.neutral[8]};
+  border: 1px solid ${getTheme('neutral', '_7')};
+  background-color: ${getTheme('neutral', '_9')};
   overflow: hidden;
 
   @keyframes rotate {
@@ -83,7 +83,7 @@ const AccountListContainer = styled.div`
       display: flex;
       width: 100%;
       padding: 20px;
-      color: ${theme.color.neutral[9]};
+      color: ${getTheme('neutral', 'a')};
       justify-content: center;
       align-items: center;
     }
@@ -97,8 +97,8 @@ const AccountListContainer = styled.div`
     height: 46px;
     align-items: center;
     justify-content: center;
-    color: ${theme.color.neutral[9]};
-    border-top: 1px solid ${theme.color.neutral[6]};
+    color: ${getTheme('neutral', 'a')};
+    border-top: 1px solid ${getTheme('neutral', '_7')};
     border-radius: 0;
 
     & .icon-loading {
@@ -111,7 +111,7 @@ const AccountListContainer = styled.div`
         animation: rotate 1.5s infinite;
       }
       circle {
-        stroke: ${theme.color.neutral[9]};
+        stroke: ${getTheme('neutral', 'a')};
         stroke-dasharray: 10;
         stroke-dashoffset: 7;
       }
@@ -122,7 +122,7 @@ const AccountListContainer = styled.div`
     }
 
     &:hover {
-      background-color: ${theme.color.neutral[6]};
+      background-color: ${getTheme('neutral', '_7')};
     }
   }
 
@@ -134,21 +134,21 @@ const AccountListContainer = styled.div`
     padding: 10px 20px;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid ${theme.color.neutral[6]};
+    border-bottom: 1px solid ${getTheme('neutral', '_7')};
 
     .address {
       margin-right: 10px;
     }
 
     .path {
-      color: ${theme.color.neutral[9]};
+      color: ${getTheme('neutral', 'a')};
     }
 
     .check {
       display: inline-flex;
       width: 20px;
       height: 20px;
-      border: 1px solid ${theme.color.neutral[4]};
+      border: 1px solid ${getTheme('neutral', '_5')};
       border-radius: 4px;
       cursor: pointer;
 
@@ -161,8 +161,8 @@ const AccountListContainer = styled.div`
 
       &.active,
       &.disabled {
-        background-color: ${theme.color.primary[4]};
-        border: 1px solid ${theme.color.primary[4]};
+        background-color: ${getTheme('primary', '_7')};
+        border: 1px solid ${getTheme('primary', '_7')};
         img {
           display: block;
         }
diff --git a/packages/adena-extension/src/pages/certify/connected-apps/index.tsx b/packages/adena-extension/src/pages/certify/connected-apps/index.tsx
index d42c26b4..53013def 100644
--- a/packages/adena-extension/src/pages/certify/connected-apps/index.tsx
+++ b/packages/adena-extension/src/pages/certify/connected-apps/index.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 
 import { Text, ListBox, ListHierarchy } from '@components/atoms';
 import { LoadingNft, CloseShadowButton } from '@components/molecules';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import { WalletState } from '@states';
 import DefaultImage from '@assets/favicon-default-small.svg';
 import disconnected from '@assets/disconnected.svg';
@@ -14,6 +14,7 @@ import { useCurrentAccount } from '@hooks/use-current-account';
 import mixins from '@styles/mixins';
 
 export const ConnectedApps = (): JSX.Element => {
+  const theme = useTheme();
   const { establishService } = useAdenaContext();
   const { currentAccount } = useCurrentAccount();
   const navigate = useNavigate();
@@ -78,7 +79,7 @@ export const ConnectedApps = (): JSX.Element => {
           {datas.length > 0 ? (
             datas.map(renderAppItem)
           ) : (
-            <Text className='desc' type='body1Reg' color={theme.color.neutral[9]}>
+            <Text className='desc' type='body1Reg' color={theme.neutral.a}>
               No connections
             </Text>
           )}
@@ -97,7 +98,7 @@ const Wrapper = styled.main`
   height: 100%;
   padding-top: 24px;
   padding-bottom: 120px;
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
 
   .logo {
     width: 20px;
@@ -127,10 +128,10 @@ const DisconnectedBtn = styled.button`
   width: 25px;
   height: 25px;
   border-radius: 35px;
-  background-color: ${theme.color.red[2]};
+  background-color: ${getTheme('red', '_5')};
   transition: all ease 0.4s;
   margin-left: auto;
   :hover {
-    background-color: ${theme.color.red[5]};
+    background-color: #bb160b;
   }
 `;
diff --git a/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx b/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
index 960de583..f60ebca7 100644
--- a/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
+++ b/packages/adena-extension/src/pages/certify/export-private-key/ApproachPrivateKey.tsx
@@ -7,14 +7,14 @@ import { SeedViewAndCopy } from '@components/molecules';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useWalletContext } from '@hooks/use-context';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 const StyledPrivateKeyBox = styled.div`
   position: relative;
   width: 100%;
   height: 140px;
-  border: 1px solid ${theme.color.neutral[6]};
-  background-color: ${theme.color.neutral[8]};
+  border: 1px solid ${getTheme('neutral', '_7')};
+  background-color: ${getTheme('neutral', '_9')};
   border-radius: 18px;
   padding: 8px;
   ${mixins.flex('row', 'center', 'center')};
diff --git a/packages/adena-extension/src/pages/certify/forgot-password/index.tsx b/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
index b244b12b..b4547189 100644
--- a/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
+++ b/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import lockLogo from '@assets/icon-lock.svg';
 import { Text, Icon, Button } from '@components/atoms';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 import { RoutePath } from '@router/path';
 import mixins from '@styles/mixins';
@@ -15,6 +15,7 @@ const text = {
 };
 
 export const ForgotPassword = (): JSX.Element => {
+  const theme = useTheme();
   const navigate = useNavigate();
 
   const onClickLearnMore = (): void => {
@@ -45,7 +46,7 @@ export const ForgotPassword = (): JSX.Element => {
       <Text type='header4' margin='23px 0px 12px'>
         {text.title}
       </Text>
-      <Text type='body1Reg' color={theme.color.neutral[9]} textAlign='center'>
+      <Text type='body1Reg' color={theme.neutral.a} textAlign='center'>
         {text.desc}
       </Text>
       <LearnMore onClick={onClickLearnMore}>Learn more</LearnMore>
@@ -73,20 +74,20 @@ const Wrapper = styled.main`
 const LearnMore = styled.button`
   font-size: 16px;
   font-weight: 700;
-  color: ${theme.color.primary[3]};
+  color: ${getTheme('primary', '_6')};
   margin-top: 24px;
   &:hover {
     text-decoration-line: underline;
     text-underline-offset: 2px;
     text-decoration-thickness: 1px;
-    text-decoration-color: ${theme.color.primary[3]};
+    text-decoration-color: ${getTheme('primary', '_6')};
   }
 `;
 
 const TextStyled = styled.div`
   ${mixins.flex('row', 'center', 'center')};
   width: 100%;
-  color: ${theme.color.neutral[9]};
+  color: ${getTheme('neutral', 'a')};
   gap: 6px;
   font-size: 14px;
   font-weight: 500;
@@ -99,9 +100,9 @@ const TextStyled = styled.div`
     transition: all 0.3s ease;
   }
   &:hover {
-    color: ${theme.color.primary[3]};
+    color: ${getTheme('primary', '_6')};
     svg * {
-      stroke: ${theme.color.primary[3]};
+      stroke: ${getTheme('primary', '_6')};
     }
   }
 `;
diff --git a/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx b/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx
index 0b30eb58..57861965 100644
--- a/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/generate-seed-phrase/index.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import addSymbol from '@assets/add-symbol.svg';
 import { Text, Button } from '@components/atoms';
-import theme from '@styles/theme';
 import { RoutePath } from '@router/path';
 import mixins from '@styles/mixins';
 
@@ -12,6 +11,7 @@ const content =
   'To add new accounts, you need to generate a seed phrase as you created your existing accounts with Google or Ledger, which didn’t require seed phrase generation.';
 
 export const GenerateSeedPhrase = (): JSX.Element => {
+  const theme = useTheme();
   const navigate = useNavigate();
 
   const onclick = (): void => {
@@ -24,7 +24,7 @@ export const GenerateSeedPhrase = (): JSX.Element => {
       <Text type='header4' margin='23px 0px 12px'>
         Generate Seed Phrase
       </Text>
-      <Text type='body1Reg' color={theme.color.neutral[9]} textAlign='center'>
+      <Text type='body1Reg' color={theme.neutral.a} textAlign='center'>
         {content}
       </Text>
       <Button fullWidth onClick={onclick} margin='auto 0px 0px'>
diff --git a/packages/adena-extension/src/pages/certify/login/index.tsx b/packages/adena-extension/src/pages/certify/login/index.tsx
index 14745ca3..29de9d97 100644
--- a/packages/adena-extension/src/pages/certify/login/index.tsx
+++ b/packages/adena-extension/src/pages/certify/login/index.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Text, DefaultInput, Button } from '@components/atoms';
-import theme, { fonts } from '@styles/theme';
+import { fonts } from '@styles/theme';
 import { RoutePath } from '@router/path';
 import { validateWrongPasswordLength } from '@common/validation';
 import { useAdenaContext } from '@hooks/use-context';
@@ -33,6 +33,8 @@ export const ForgetPwd = styled.button`
 
 export const Login = (): JSX.Element => {
   usePreventHistoryBack();
+
+  const theme = useTheme();
   const navigate = useNavigate();
   const { walletService } = useAdenaContext();
   const location = useLocation();
@@ -116,7 +118,7 @@ export const Login = (): JSX.Element => {
         ref={inputRef}
       />
       <ForgetPwd onClick={onClickForgotButton}>
-        <Text type='body2Reg' color={theme.color.neutral[9]}>
+        <Text type='body2Reg' color={theme.neutral.a}>
           Forgot Password?
         </Text>
       </ForgetPwd>
diff --git a/packages/adena-extension/src/pages/certify/remove-account/index.tsx b/packages/adena-extension/src/pages/certify/remove-account/index.tsx
index b8c57c1f..711072b5 100644
--- a/packages/adena-extension/src/pages/certify/remove-account/index.tsx
+++ b/packages/adena-extension/src/pages/certify/remove-account/index.tsx
@@ -1,12 +1,11 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 
 import removeIcon from '@assets/icon-remove-blur.svg';
 import { Text } from '@components/atoms';
 import { CancelAndConfirmButton } from '@components/molecules';
-import theme from '@styles/theme';
 import { useRemoveAccount } from '@hooks/use-remove-account';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { RoutePath } from '@router/path';
@@ -17,6 +16,7 @@ const content =
   'Only proceed if you wish to remove this account from your wallet. You can always recover it with your seed phrase or your private key.';
 
 export const RemoveAccount = (): JSX.Element => {
+  const theme = useTheme();
   const navigate = useNavigate();
   const { currentAccount } = useCurrentAccount();
   const { removeAccount } = useRemoveAccount();
@@ -41,7 +41,7 @@ export const RemoveAccount = (): JSX.Element => {
       <Text type='header4' margin='23px 0px 12px'>
         Remove Account
       </Text>
-      <Text type='body1Reg' color={theme.color.neutral[9]} textAlign='center'>
+      <Text type='body1Reg' color={theme.neutral.a} textAlign='center'>
         {content}
       </Text>
       <CancelAndConfirmButton
diff --git a/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx b/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
index bde0a22a..0539c32c 100644
--- a/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
+++ b/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import removeIcon from '@assets/icon-remove-blur.svg';
 import { Text } from '@components/atoms';
 import { CancelAndConfirmButton } from '@components/molecules';
-import theme from '@styles/theme';
 import { RoutePath } from '@router/path';
 import { useClear } from '@hooks/use-clear';
 import mixins from '@styles/mixins';
@@ -17,6 +16,7 @@ const forgotPasswordContent =
   'This will remove all accounts from this wallet. As your seed phrase and keys are only stored on this device, Adena cannot recover them once reset.';
 
 export const ResetWallet = (): JSX.Element => {
+  const theme = useTheme();
   const navigate = useNavigate();
   const { state } = useLocation();
   const { clear } = useClear();
@@ -35,7 +35,7 @@ export const ResetWallet = (): JSX.Element => {
       <Text type='header4' margin='23px 0px 12px'>
         Reset Wallet
       </Text>
-      <Text type='body1Reg' color={theme.color.neutral[9]} textAlign='center'>
+      <Text type='body1Reg' color={theme.neutral.a} textAlign='center'>
         {state?.from === 'forgot-password' ? forgotPasswordContent : content}
       </Text>
       <CancelAndConfirmButton
diff --git a/packages/adena-extension/src/pages/wallet/approve-login/loading-approve-transaction.tsx b/packages/adena-extension/src/pages/wallet/approve-login/loading-approve-transaction.tsx
index b693cbd1..f924cdbb 100644
--- a/packages/adena-extension/src/pages/wallet/approve-login/loading-approve-transaction.tsx
+++ b/packages/adena-extension/src/pages/wallet/approve-login/loading-approve-transaction.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { Loading, SkeletonBoxStyle } from '@components/atoms';
 import { GhostButtons } from '@components/molecules';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 interface ApproveProps {
   leftButtonText?: string;
@@ -66,7 +66,7 @@ const RoundedBox = styled.div`
   ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   height: 41px;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   padding: 0px 18px;
 `;
 
diff --git a/packages/adena-extension/src/pages/wallet/deposit/index.tsx b/packages/adena-extension/src/pages/wallet/deposit/index.tsx
index 44b1a3ba..162aed01 100644
--- a/packages/adena-extension/src/pages/wallet/deposit/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/deposit/index.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { Text, inputStyle, Button, Copy } from '@components/atoms';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import { RoutePath } from '@router/path';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { formatAddress, formatNickname } from '@common/utils/client-utils';
@@ -21,7 +21,7 @@ const Wrapper = styled.main`
 
 const QRCodeBox = styled.div`
   ${mixins.flex('row', 'center', 'center')};
-  background-color: ${theme.color.neutral[0]};
+  background-color: ${getTheme('neutral', '_1')};
   padding: 10px;
   border-radius: 8px;
   margin: 40px 0px;
@@ -30,10 +30,10 @@ const QRCodeBox = styled.div`
 const CopyInputBox = styled.div`
   ${mixins.flex('row', 'center', 'space-between')};
   ${inputStyle};
-  border: 1px solid ${theme.color.neutral[6]};
+  border: 1px solid ${getTheme('neutral', '_7')};
 
   & .nickname {
-    color: ${theme.color.neutral[2]};
+    color: ${getTheme('neutral', '_3')};
   }
 
   margin-bottom: 8px;
@@ -45,6 +45,7 @@ interface DepositState {
 }
 
 export const Deposit = (): JSX.Element => {
+  const theme = useTheme();
   const navigate = useNavigate();
   const location = useLocation();
   const [displayAddr, setDisplayAddr] = useState('');
@@ -83,7 +84,7 @@ export const Deposit = (): JSX.Element => {
         {currentAccount && (
           <Text type='body2Reg' display='inline-flex'>
             {formatNickname(accountNames[currentAccount.id], 12)}
-            <Text type='body2Reg' color={theme.color.neutral[9]}>
+            <Text type='body2Reg' color={theme.neutral.a}>
               {` (${displayAddr})`}
             </Text>
           </Text>
@@ -91,7 +92,7 @@ export const Deposit = (): JSX.Element => {
 
         <Copy copyStr={currentAddress || ''} />
       </CopyInputBox>
-      <Text type='captionReg' color={theme.color.neutral[9]}>
+      <Text type='captionReg' color={theme.neutral.a}>
         Only use this address to receive tokens on Gnoland.
       </Text>
       <Button fullWidth hierarchy='dark' margin='auto 0px 0px' onClick={closeButtonClick}>
diff --git a/packages/adena-extension/src/pages/wallet/explore/index.tsx b/packages/adena-extension/src/pages/wallet/explore/index.tsx
index fc754b68..feccc783 100644
--- a/packages/adena-extension/src/pages/wallet/explore/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/explore/index.tsx
@@ -1,16 +1,17 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useRecoilState } from 'recoil';
 
 import { Text } from '@components/atoms';
 import link from '@assets/share.svg';
-import theme from '@styles/theme';
 import { ExploreState } from '@states';
 import { useAdenaContext } from '@hooks/use-context';
 import LoadingExplore from './loading-explore';
 import mixins from '@styles/mixins';
+import { getTheme } from '@styles/theme';
 
 export const Explore = (): JSX.Element => {
+  const theme = useTheme();
   const { tokenService } = useAdenaContext();
   const [exploreSites, setExploreSites] = useRecoilState(ExploreState.sites);
   const [loading, setLoading] = useState(true);
@@ -46,7 +47,7 @@ export const Explore = (): JSX.Element => {
             <img src={exploreSite.logo} alt='logo-image' />
             <Contents>
               <Text type='body2Bold'>{exploreSite.name}</Text>
-              <Text type='captionReg' color={theme.color.neutral[9]}>
+              <Text type='captionReg' color={theme.neutral.a}>
                 {exploreSite.description}
               </Text>
             </Contents>
@@ -74,7 +75,7 @@ const Contents = styled.div`
 
 const BoxContainer = styled.div`
   ${mixins.flex('row', 'center', 'flex-start')};
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   width: 100%;
   height: 60px;
   padding: 10px 17px;
diff --git a/packages/adena-extension/src/pages/wallet/nft/index.tsx b/packages/adena-extension/src/pages/wallet/nft/index.tsx
index d48998d8..3a5ba98f 100644
--- a/packages/adena-extension/src/pages/wallet/nft/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/nft/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import { Text } from '@components/atoms';
 import { LoadingNft } from '@components/molecules';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
@@ -11,7 +11,7 @@ const Wrapper = styled.main`
   width: 100%;
   height: 100%;
   padding-top: 24px;
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
   .desc {
     position: absolute;
     top: 210px;
@@ -22,6 +22,7 @@ const Wrapper = styled.main`
 `;
 
 export const Nft = (): JSX.Element => {
+  const theme = useTheme();
   const [state] = useState('FINISH');
   const [datas] = useState([]);
 
@@ -32,7 +33,7 @@ export const Nft = (): JSX.Element => {
         datas.length > 0 ? (
           datas.map(() => <></>)
         ) : (
-          <Text className='desc' type='body1Reg' color={theme.color.neutral[9]}>
+          <Text className='desc' type='body1Reg' color={theme.neutral.a}>
             No NFTs to display
           </Text>
         )
diff --git a/packages/adena-extension/src/pages/wallet/search/index.tsx b/packages/adena-extension/src/pages/wallet/search/index.tsx
index 291c19ef..63d269ae 100644
--- a/packages/adena-extension/src/pages/wallet/search/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/search/index.tsx
@@ -16,7 +16,7 @@ import useHistoryData from '@hooks/use-history-data';
 
 import { TokenBalanceType } from '@types';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 const Wrapper = styled.main`
   width: 100%;
@@ -68,7 +68,7 @@ const ButtonWrap = styled.div`
   height: 96px;
   padding: 0px 20px;
   box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.4);
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
   z-index: 1;
 `;
 
diff --git a/packages/adena-extension/src/pages/wallet/token-details/index.tsx b/packages/adena-extension/src/pages/wallet/token-details/index.tsx
index 7cc489ed..6d7799ef 100644
--- a/packages/adena-extension/src/pages/wallet/token-details/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/token-details/index.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import BigNumber from 'bignumber.js';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useLocation, useNavigate } from 'react-router-dom';
 
@@ -8,7 +8,7 @@ import { Text, StaticMultiTooltip, LeftArrowBtn } from '@components/atoms';
 import { TransactionHistory, DoubleButton } from '@components/molecules';
 import etc from '@assets/etc.svg';
 import { RoutePath } from '@router/path';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useTokenBalance } from '@hooks/use-token-balance';
 import { TransactionHistoryMapper } from '@repositories/transaction/mapper/transaction-history-mapper';
@@ -74,7 +74,7 @@ const EtcIcon = styled.div`
   border-radius: 50%;
   cursor: pointer;
   &.show-tooltip {
-    background-color: ${theme.color.neutral[6]};
+    background-color: ${getTheme('neutral', '_7')};
     & > .static-tooltip {
       visibility: visible;
       transition: all 0.1s ease-in-out;
@@ -107,6 +107,7 @@ type TokenHistoriesType = {
 };
 
 export const TokenDetails = (): JSX.Element => {
+  const theme = useTheme();
   const navigate = useNavigate();
   const { state } = useLocation();
   const [etcClicked, setEtcClicked] = useState(false);
@@ -287,18 +288,14 @@ export const TokenDetails = (): JSX.Element => {
         <Text type='header4'>{tokenBalance.name}</Text>
         <EtcIcon className={etcClicked ? 'show-tooltip' : ''} onClick={etcButtonClick}>
           <img src={etc} alt='View on Gnoscan' />
-          <StaticMultiTooltip
-            bgColor={theme.color.neutral[6]}
-            posTop='28px'
-            items={getTooltipItems()}
-          />
+          <StaticMultiTooltip bgColor={theme.neutral._7} posTop='28px' items={getTooltipItems()} />
         </EtcIcon>
       </HeaderWrap>
 
       <div className='balance-wrapper'>
         <HighlightNumber
           value={BigNumber(balance).toFormat()}
-          fontColor={theme.color.neutral[0]}
+          fontColor={theme.neutral._1}
           fontStyleKey={'header2'}
           minimumFontSize={'24px'}
         />
@@ -321,7 +318,7 @@ export const TokenDetails = (): JSX.Element => {
           onClickItem={onClickItem}
         />
       ) : (
-        <Text className='desc' type='body1Reg' color={theme.color.neutral[9]}>
+        <Text className='desc' type='body1Reg' color={theme.neutral.a}>
           No transaction to display
         </Text>
       )}
diff --git a/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx b/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
index 0c78a038..1e8f931c 100644
--- a/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
@@ -11,7 +11,7 @@ import ContractIcon from '@assets/contract.svg';
 import AddPackageIcon from '@assets/addpkg.svg';
 import { useNetwork } from '@hooks/use-network';
 import { TransactionInfo } from '@types';
-import theme, { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import mixins from '@styles/mixins';
 
 interface DLProps {
@@ -186,7 +186,7 @@ const Wrapper = styled.main`
     width: 100%;
     padding: 24px 20px;
     bottom: 0;
-    background: ${theme.color.neutral[7]};
+    background: ${getTheme('neutral', '_8')};
     box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.4);
   }
 `;
@@ -195,7 +195,7 @@ const TokenBox = styled.div<{ color: string }>`
   ${mixins.flex('row', 'center', 'space-between')};
   width: 100%;
   height: 70px;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   border: 1px solid ${({ color }): string => color};
   border-radius: 18px;
   padding: 0px 15px;
@@ -217,7 +217,7 @@ const DataBox = styled.div`
   ${mixins.flex('column', 'center', 'center')};
   width: 100%;
   border-radius: 18px;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   margin-bottom: 96px;
 `;
 
@@ -228,18 +228,18 @@ const DLWrap = styled.dl<DLProps>`
   height: 40px;
   padding: 0px 18px;
   :not(:last-child) {
-    border-bottom: 2px solid ${theme.color.neutral[7]};
+    border-bottom: 2px solid ${getTheme('neutral', '_8')};
   }
   dd,
   dt {
     font: inherit;
   }
   dt {
-    color: ${theme.color.neutral[9]};
+    color: ${getTheme('neutral', 'a')};
   }
   dd {
     display: flex;
-    color: ${(props): string => (props.color ? props.color : props.theme.color.neutral[0])};
+    color: ${({ theme, color }): string => (color ? color : theme.neutral._1)};
     align-items: center;
   }
 
@@ -257,7 +257,7 @@ const StatusInfo = styled.div`
 
     svg {
       path {
-        fill: ${theme.color.neutral[9]};
+        fill: ${getTheme('neutral', 'a')};
         transition: 0.2s;
       }
     }
@@ -265,7 +265,7 @@ const StatusInfo = styled.div`
     :hover {
       svg {
         path {
-          fill: ${theme.color.neutral[0]};
+          fill: ${getTheme('neutral', '_1')};
         }
       }
     }
diff --git a/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx b/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
index 1d614f0f..95a21334 100644
--- a/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
@@ -1,12 +1,12 @@
 import React, { useEffect } from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import logo from '@assets/logo-default.svg';
 import { Text, Button } from '@components/atoms';
 import { DoubleButton } from '@components/molecules';
 import { RoutePath } from '@router/path';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import { useLoadAccounts } from '@hooks/use-load-accounts';
 import { existsPopups } from '@inject/message/methods';
 
@@ -106,19 +106,22 @@ export const WalletCreate = (): JSX.Element => {
   );
 };
 
-const PoweredByWeb3AuthWihDivider = (): JSX.Element => (
-  <>
-    <Text type='light11' color={theme.color.neutral[9]}>
-      Powered by Web3Auth
-    </Text>
-    <Divider />
-  </>
-);
+const PoweredByWeb3AuthWihDivider = (): JSX.Element => {
+  const theme = useTheme();
+  return (
+    <>
+      <Text type='light11' color={theme.neutral.a}>
+        Powered by Web3Auth
+      </Text>
+      <Divider />
+    </>
+  );
+};
 
 const Divider = styled.span`
   width: calc(100% - 48px);
   height: 1px;
-  background-color: ${theme.color.neutral[4]};
+  background-color: ${getTheme('neutral', '_5')};
   margin: 20px 0px;
 `;
 
diff --git a/packages/adena-extension/src/router/header/approve-menu/index.tsx b/packages/adena-extension/src/router/header/approve-menu/index.tsx
index 08a63f26..ec74f983 100644
--- a/packages/adena-extension/src/router/header/approve-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/approve-menu/index.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import { Text, CopyTooltip, StatusDot } from '@components/atoms';
 import {
   formatAddress,
@@ -20,7 +20,7 @@ const Wrapper = styled.div`
   width: 100%;
   height: 100%;
   padding: 0px 20px 0px 12px;
-  border-bottom: 1px solid ${theme.color.neutral[6]};
+  border-bottom: 1px solid ${getTheme('neutral', '_7')};
   ${mixins.flex('row', 'center', 'flex-end')};
   .t-approve {
     ${mixins.positionCenter()}
@@ -28,6 +28,7 @@ const Wrapper = styled.div`
 `;
 
 const ApproveMenu = (): JSX.Element => {
+  const theme = useTheme();
   const { establishService } = useAdenaContext();
   const { currentAccount, currentAddress } = useCurrentAccount();
   const [address, setAddress] = useState('');
@@ -91,7 +92,7 @@ const ApproveMenu = (): JSX.Element => {
           <CopyTooltip copyText={address} className='t-approve'>
             <Text type='body1Bold' display='inline-flex' style={{ whiteSpace: 'pre' }}>
               {formatNickname(accountName, 12)}
-              <Text type='body1Reg' color={theme.color.neutral[9]} style={{ whiteSpace: 'pre' }}>
+              <Text type='body1Reg' color={theme.neutral.a} style={{ whiteSpace: 'pre' }}>
                 {` (${formatAddress(address)})`}
               </Text>
             </Text>
diff --git a/packages/adena-extension/src/router/header/arrow-title-menu/index.tsx b/packages/adena-extension/src/router/header/arrow-title-menu/index.tsx
index 4b6bf5c5..7708b1cc 100644
--- a/packages/adena-extension/src/router/header/arrow-title-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/arrow-title-menu/index.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { Text, LeftArrowBtn } from '@components/atoms';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 interface ArrowTitleMenuProps {
   title?: string;
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
   ${mixins.flex('row', 'center', 'center')};
   width: 100%;
   height: 100%;
-  border-bottom: 1px solid ${theme.color.neutral[6]};
+  border-bottom: 1px solid ${getTheme('neutral', '_7')};
   position: relative;
   padding: 0px 18px 0px 12px;
 `;
diff --git a/packages/adena-extension/src/router/header/close-title-menu/index.tsx b/packages/adena-extension/src/router/header/close-title-menu/index.tsx
index 63120da3..36af0fa0 100644
--- a/packages/adena-extension/src/router/header/close-title-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/close-title-menu/index.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { Text, Icon } from '@components/atoms';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 interface CloseTitleMenuProps {
   title?: string;
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
   ${mixins.flex('row', 'center', 'center')};
   width: 100%;
   height: 100%;
-  border-bottom: 1px solid ${theme.color.neutral[6]};
+  border-bottom: 1px solid ${getTheme('neutral', '_7')};
   position: relative;
   padding: 0px 18px 0px 12px;
 `;
@@ -27,14 +27,14 @@ const Button = styled.button`
 
   .icon-close {
     * {
-      stroke: ${theme.color.neutral[9]};
+      stroke: ${getTheme('neutral', 'a')};
       transition: 0.2s;
     }
   }
 
   &:hover {
     * {
-      stroke: ${theme.color.neutral[0]};
+      stroke: ${getTheme('neutral', '_1')};
     }
   }
 `;
diff --git a/packages/adena-extension/src/router/header/home-menu/index.tsx b/packages/adena-extension/src/router/header/home-menu/index.tsx
index 34cf6aa9..b6c97a6f 100644
--- a/packages/adena-extension/src/router/header/home-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/home-menu/index.tsx
@@ -7,12 +7,12 @@ import { HamburgerMenuBtn } from '@components/atoms';
 import { RoutePath } from '@router/path';
 import { SideMenuLayout } from '@components/pages/router/side-menu-layout';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;
-  border-bottom: 1px solid ${theme.color.neutral[6]};
+  border-bottom: 1px solid ${getTheme('neutral', '_7')};
 `;
 
 const Header = styled.div`
diff --git a/packages/adena-extension/src/router/header/index.tsx b/packages/adena-extension/src/router/header/index.tsx
index b2aedb72..41e9d642 100644
--- a/packages/adena-extension/src/router/header/index.tsx
+++ b/packages/adena-extension/src/router/header/index.tsx
@@ -6,7 +6,7 @@ import { useRecoilState } from 'recoil';
 import { RoutePath } from '@router/path';
 import { CommonState, WalletState } from '@states';
 import { useNetwork } from '@hooks/use-network';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 import { HomeMenu } from './home-menu';
 import { TopMenu } from './top-menu';
@@ -19,7 +19,7 @@ import { CloseTitleMenu } from './close-title-menu';
 const Wrapper = styled.header`
   width: 100%;
   height: 48px;
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
   position: sticky;
   top: 0px;
   z-index: 2;
diff --git a/packages/adena-extension/src/router/header/progress-menu/index.tsx b/packages/adena-extension/src/router/header/progress-menu/index.tsx
index bc4877f8..5a93a0d6 100644
--- a/packages/adena-extension/src/router/header/progress-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/progress-menu/index.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom';
 import { LeftArrowBtn } from '@components/atoms';
 import logo from '@assets/logo-withIcon.svg';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 type ProgressLevel = 'first' | 'second' | 'third';
 
@@ -20,7 +20,7 @@ const Wrapper = styled.div`
   ${mixins.flex('row', 'center', 'center')};
   width: 100%;
   height: 100%;
-  border-bottom: 4px solid ${theme.color.neutral[6]};
+  border-bottom: 4px solid ${getTheme('neutral', '_7')};
   position: relative;
   padding: 0px 18px 0px 12px;
 `;
@@ -31,8 +31,8 @@ const Button = styled(LeftArrowBtn)`
 `;
 
 const Hr = styled.hr<ProgressMenuProps>`
-  border-color: ${theme.color.primary[3]};
-  background-color: ${theme.color.primary[3]};
+  border-color: ${getTheme('primary', '_6')};
+  background-color: ${getTheme('primary', '_6')};
   width: ${({ progressLevel }): '30%' | '60%' | '100%' =>
     progressLevel === 'first' ? '30%' : progressLevel === 'second' ? '60%' : '100%'};
   height: 4px;
diff --git a/packages/adena-extension/src/router/header/tab-menu/index.tsx b/packages/adena-extension/src/router/header/tab-menu/index.tsx
index 70cad644..1ed099de 100644
--- a/packages/adena-extension/src/router/header/tab-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/tab-menu/index.tsx
@@ -5,7 +5,7 @@ import { Text } from '@components/atoms';
 import IconLogo from '../../../install/assets/logo-typeB.svg';
 import IconHelp from '@assets/help-fill.svg';
 import mixins from '@styles/mixins';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 
 const Container = styled.div`
   ${mixins.flex('row', 'center', 'space-between')}
@@ -17,7 +17,7 @@ const Container = styled.div`
   padding: 0;
   width: 100%;
   height: fit-content;
-  background-color: ${theme.color.neutral[8]};
+  background-color: ${getTheme('neutral', '_9')};
   padding: 40px 40px 0px;
   .help-text {
     font-size: 19px;
diff --git a/packages/adena-extension/src/router/header/top-menu/index.tsx b/packages/adena-extension/src/router/header/top-menu/index.tsx
index cb213e1e..7160cf7a 100644
--- a/packages/adena-extension/src/router/header/top-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/top-menu/index.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 
 import { Text, CopyTooltip, StatusDot, HamburgerMenuBtn } from '@components/atoms';
 
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { formatAddress, formatNickname, getSiteName } from '@common/utils/client-utils';
 import { useAdenaContext } from '@hooks/use-context';
@@ -17,7 +17,7 @@ const Wrapper = styled.div`
   width: 100%;
   height: 100%;
   padding: 0px 20px 0px 12px;
-  border-bottom: 1px solid ${theme.color.neutral[6]};
+  border-bottom: 1px solid ${getTheme('neutral', '_7')};
 `;
 
 const Header = styled.div`
@@ -31,6 +31,7 @@ const Header = styled.div`
 `;
 
 export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => {
+  const theme = useTheme();
   const { establishService } = useAdenaContext();
   const [open, setOpen] = useState(false);
   const [hostname, setHostname] = useState('');
@@ -115,7 +116,7 @@ export const TopMenu = ({ disabled }: { disabled?: boolean }): JSX.Element => {
         <CopyTooltip copyText={currentAddress || ''}>
           <Text type='body1Bold' display='inline-flex'>
             {formatNickname(currentAccountName, 12)}
-            <Text type='body1Reg' color={theme.color.neutral[9]}>
+            <Text type='body1Reg' color={theme.neutral.a}>
               {` (${formatAddress(currentAddress || '')})`}
             </Text>
           </Text>
diff --git a/packages/adena-extension/src/router/loading-main.tsx b/packages/adena-extension/src/router/loading-main.tsx
index 149b1fac..bed134e0 100644
--- a/packages/adena-extension/src/router/loading-main.tsx
+++ b/packages/adena-extension/src/router/loading-main.tsx
@@ -9,7 +9,7 @@ import { useTokenBalance } from '@hooks/use-token-balance';
 import { CommonState, WalletState } from '@states';
 import { useNetwork } from '@hooks/use-network';
 import { GhostButtons } from '@components/molecules';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
@@ -20,7 +20,7 @@ const Wrapper = styled.main`
   padding: 78px 24px;
   top: 0px;
   z-index: 99;
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
 `;
 
 const RoundsBox = styled.div`
diff --git a/packages/adena-extension/src/router/navigation/index.tsx b/packages/adena-extension/src/router/navigation/index.tsx
index 0097e4aa..922f9737 100644
--- a/packages/adena-extension/src/router/navigation/index.tsx
+++ b/packages/adena-extension/src/router/navigation/index.tsx
@@ -7,14 +7,14 @@ import { RoutePath } from '@router/path';
 import { Icon, IconName } from '@components/atoms';
 import { CommonState, WalletState } from '@states';
 import { useNetwork } from '@hooks/use-network';
-import theme from '@styles/theme';
+import { getTheme } from '@styles/theme';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.nav`
   width: 100%;
   height: 60px;
   ${mixins.flex('row', 'center', 'space-between')};
-  background-color: ${theme.color.neutral[7]};
+  background-color: ${getTheme('neutral', '_8')};
   filter: drop-shadow(0px -4px 4px rgba(0, 0, 0, 0.25));
   padding: 0px 40px;
   gap: 40px;
@@ -28,10 +28,10 @@ const Wrapper = styled.nav`
     &:hover,
     &.active {
       .icon-default {
-        fill: ${theme.color.neutral[0]};
+        fill: ${getTheme('neutral', '_1')};
       }
       .icon-primary {
-        fill: ${theme.color.primary[3]};
+        fill: ${getTheme('primary', '_6')};
       }
     }
   }
diff --git a/packages/adena-extension/src/styles/global-style.ts b/packages/adena-extension/src/styles/global-style.ts
index ce99da83..ed71fa9a 100644
--- a/packages/adena-extension/src/styles/global-style.ts
+++ b/packages/adena-extension/src/styles/global-style.ts
@@ -1,5 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
-import theme from './theme';
+import { fonts } from './theme';
 
 export const GlobalStyle = createGlobalStyle`
   html, body {
@@ -92,31 +92,31 @@ export const GlobalStyle = createGlobalStyle`
   };
 
   h1 {
-    ${theme.fonts.header1}
+    ${fonts.header1}
   }
 
   h2 {
-    ${theme.fonts.header2}
+    ${fonts.header2}
   }
 
   h3 {
-    ${theme.fonts.header3}
+    ${fonts.header3}
   }
 
   h4 {
-    ${theme.fonts.header4}
+    ${fonts.header4}
   }
 
   h5 {
-    ${theme.fonts.header5}
+    ${fonts.header5}
   }
 
   h6 {
-    ${theme.fonts.header6}
+    ${fonts.header6}
   }
 
   h7 {
-    ${theme.fonts.header7}
+    ${fonts.header7}
   }
 
 `;
diff --git a/packages/adena-extension/src/styles/theme.ts b/packages/adena-extension/src/styles/theme.ts
index 55edfa07..0d96299e 100644
--- a/packages/adena-extension/src/styles/theme.ts
+++ b/packages/adena-extension/src/styles/theme.ts
@@ -1,49 +1,45 @@
-import { css, FlattenSimpleInterpolation } from 'styled-components';
-import mixins from './mixins';
+import { css, DefaultTheme, FlattenSimpleInterpolation } from 'styled-components';
 
 export enum Neutral {
-  '#FFFFFF', // 0
-  '#E7E8F3', // 1
-  '#A3A3B5', // 2
-  '#646486', // 3
-  '#52526B', // 4
-  '#39394E', // 5
-  '#32323D', // 6
-  '#212128', // 7
-  '#191920', // 8
-  '#777777', // 9
-  '#636368', // 10
-  '#454554', //11
+  _1 = '#FFFFFF',
+  _2 = '#E7E8F3',
+  _3 = '#A3A3B5',
+  _4 = '#646486',
+  _5 = '#52526B',
+  _6 = '#39394E',
+  _7 = '#32323D',
+  _8 = '#212128',
+  _9 = '#191920',
+  a = '#777777',
+  b = '#454554',
 }
 
 export enum Primary {
-  '#B0CCFF', // 0
-  '#78A7FF', // 1
-  '#377DFF', // 2
-  '#0059FF', // 3
-  '#0043C1', // 4
-  '#003290', // 5
-  '#001D52', // 6
+  _3 = '#B0CCFF',
+  _4 = '#78A7FF',
+  _5 = '#377DFF',
+  _6 = '#0059FF',
+  _7 = '#0043C1',
+  _8 = '#003290',
+  _9 = '#001D52',
 }
 
 export enum Red {
-  '#FFA59F', // 0
-  '#FF7B73', // 1
-  '#EF2D21', // 2
-  '#D6160A', // 3
-  '#BB0B00', // 4
-  '#BB160B', // 5
-  '#E7323B', // 6
-  '#B62E29', // 7
-  '#BB150B', // 8
+  _3 = '#FFA59F',
+  _4 = '#FF7B73',
+  _5 = '#EF2D21',
+  _6 = '#D6160A',
+  _7 = '#BB0B00',
+  a = '#E7323B',
+  b = '#B62E29',
 }
 
 export enum Green {
-  '#7DEECC', // 0
-  '#5ADAB3', // 1
-  '#0DBE89', // 2
-  '#09A375', // 3
-  '#057E5A', // 4
+  _3 = '#7DEECC',
+  _4 = '#5ADAB3',
+  _5 = '#0DBE89',
+  _6 = '#09A375',
+  _7 = '#057E5A',
 }
 
 export const fonts: FontsKeyType = {
@@ -182,16 +178,17 @@ type FontsKeyType = { [key in FontsType]: FlattenSimpleInterpolation };
 type ThemeType = typeof theme;
 
 const theme = {
-  color: {
-    neutral: Neutral,
-    primary: Primary,
-    red: Red,
-    green: Green,
-  },
-  mixins,
-  fonts,
+  neutral: Neutral,
+  primary: Primary,
+  red: Red,
+  green: Green,
 };
 
+export const getTheme =
+  <T1 extends keyof DefaultTheme, T2 extends keyof DefaultTheme[T1]>(val1: T1, val2: T2) =>
+  ({ theme }: { theme: DefaultTheme }): DefaultTheme[T1][T2] =>
+    theme[val1][val2];
+
 export default theme;
 
 declare module 'styled-components' {

From 0fde8afd9df600b74b7abffa3aa2140c5ec9ee9a Mon Sep 17 00:00:00 2001
From: blue <skqksh@gmail.com>
Date: Tue, 26 Dec 2023 21:48:54 +0900
Subject: [PATCH 7/7] fix. tx history list item font size

---
 .../src/pages/wallet/history/index.tsx        | 37 +++++++++----------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/adena-extension/src/pages/wallet/history/index.tsx b/packages/adena-extension/src/pages/wallet/history/index.tsx
index 3af24d19..99b9558b 100644
--- a/packages/adena-extension/src/pages/wallet/history/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/history/index.tsx
@@ -15,22 +15,23 @@ import useScrollHistory from '@hooks/use-scroll-history';
 import { HISTORY_FETCH_INTERVAL_TIME } from '@common/constants/interval.constant';
 import { fonts } from '@styles/theme';
 
-const HistoryLayout = styled.div`
+const StyledHistoryLayout = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
   height: auto;
   padding: 24px 20px;
   margin-bottom: 60px;
+`;
 
-  .title-wrapper {
-    margin-bottom: 12px;
+const StyledTitleWrapper = styled.div`
+  margin-bottom: 12px;
+`;
 
-    .title {
-      ${fonts.header4};
-    }
-  }
+const StyledTitle = styled.span`
+  ${fonts.header4};
 `;
+
 const HistoryContainer: React.FC = () => {
   const navigate = useNavigate();
   const { currentAddress } = useCurrentAccount();
@@ -163,18 +164,16 @@ const HistoryContainer: React.FC = () => {
   );
 
   return (
-    <HistoryLayout>
-      <div className='title-wrapper'>
-        <span className='title'>History</span>
-      </div>
-      <div className='transaction-history-wrapper'>
-        <TransactionHistory
-          status={status}
-          transactionInfoLists={TransactionHistoryMapper.queryToDisplay(data?.pages ?? [])}
-          onClickItem={onClickItem}
-        />
-      </div>
-    </HistoryLayout>
+    <StyledHistoryLayout>
+      <StyledTitleWrapper>
+        <StyledTitle>History</StyledTitle>
+      </StyledTitleWrapper>
+      <TransactionHistory
+        status={status}
+        transactionInfoLists={TransactionHistoryMapper.queryToDisplay(data?.pages ?? [])}
+        onClickItem={onClickItem}
+      />
+    </StyledHistoryLayout>
   );
 };