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 9ed759fb..376d0e79 100644
--- a/packages/adena-extension/src/components/atoms/blur-screen/index.tsx
+++ b/packages/adena-extension/src/components/atoms/blur-screen/index.tsx
@@ -22,7 +22,7 @@ export const BlurScreen = ({ hasText, text }: BlurScreenProps): JSX.Element => {
 };
 
 const Wrapper = styled.div<{ hasText?: boolean }>`
-  ${mixins.flex('column', 'center', 'center')};
+  ${mixins.flex()};
   ${mixins.positionCenter()};
   gap: ${({ hasText }): false | '21px' | undefined => hasText && '21px'};
   background: url(${blurBg}) no-repeat 100% 100% / 100% 100%;
diff --git a/packages/adena-extension/src/components/atoms/button/index.tsx b/packages/adena-extension/src/components/atoms/button/index.tsx
index 0b1caa22..e96bb2ce 100644
--- a/packages/adena-extension/src/components/atoms/button/index.tsx
+++ b/packages/adena-extension/src/components/atoms/button/index.tsx
@@ -100,7 +100,7 @@ export const Button = (props: ButtonProps): JSX.Element => {
 };
 
 const ButtonWrapper = styled.button<ButtonProps>`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   width: ${({ width, fullWidth }): string => {
     if (width) return typeof width === 'number' ? `${width}px` : width;
     if (fullWidth) return '100%';
diff --git a/packages/adena-extension/src/components/atoms/common-full-content-layout/index.ts b/packages/adena-extension/src/components/atoms/common-full-content-layout/index.ts
index 229bd65d..c0f419d6 100644
--- a/packages/adena-extension/src/components/atoms/common-full-content-layout/index.ts
+++ b/packages/adena-extension/src/components/atoms/common-full-content-layout/index.ts
@@ -1,9 +1,9 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const CommonFullContentLayout = styled.section`
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   position: relative;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: calc(100vh - 48px);
 `;
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 d8713e2b..b8855ff0 100644
--- a/packages/adena-extension/src/components/atoms/copy-button/index.tsx
+++ b/packages/adena-extension/src/components/atoms/copy-button/index.tsx
@@ -6,7 +6,7 @@ import { Text, Button } from '@components/atoms';
 import mixins from '@styles/mixins';
 
 const CopyButton = styled(Button)<{ isClicked: boolean }>`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   height: 25px;
   border-radius: 12.5px;
   padding: 0px 12px;
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 f205334f..be345857 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 mixins from '@styles/mixins';
 import { getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
@@ -6,8 +7,7 @@ interface CopyButtonWrapperProps {
 }
 
 export const CopyButtonWrapper = styled.div<CopyButtonWrapperProps>`
-  display: inline-flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 16px;
   height: 16px;
   cursor: pointer;
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 ca5c78fe..961e705c 100644
--- a/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx
+++ b/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx
@@ -12,7 +12,7 @@ interface CopyTooltipProps {
 }
 
 const ToolTipInner = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   ${fonts.body2Reg};
   position: absolute;
   width: max-content;
@@ -35,7 +35,7 @@ const ToolTipInner = styled.div`
 `;
 
 const ToolTipWrap = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   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 bee71d9b..83019ba2 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,21 +1,19 @@
 import styled from 'styled-components';
 
 import { fonts, getTheme } from '@styles/theme';
+import mixins from '@styles/mixins';
 
 export const CustomNetworkInputWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: 100%;
 
   .input-wrapper {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     width: 100%;
 
     .input-box {
-      display: flex;
-      flex-direction: row;
+      ${mixins.flex({ direction: 'row', justify: 'normal' })};
       width: 100%;
       min-height: 48px;
       padding: 12px 16px;
@@ -23,7 +21,6 @@ export const CustomNetworkInputWrapper = styled.div`
       background-color: ${getTheme('neutral', '_9')};
       border: 1px solid ${getTheme('neutral', '_7')};
       border-radius: 30px;
-      align-items: center;
       margin-top: 12px;
 
       :first-child {
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 d9c3bab9..83444802 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
@@ -69,7 +69,7 @@ const ButtonWrapper = styled.button<ButtonStyleProps>`
     margin-top: ${({ gap }): string | undefined => (typeof gap === 'number' ? gap + 'px' : gap)};
   }
   ${defaultIconStyle};
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   height: 54px;
   padding: 0px 24px 0px 20px;
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 ced4ce97..6545831d 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,3 +1,4 @@
+import mixins from '@styles/mixins';
 import { FontsType, fonts } from '@styles/theme';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
@@ -8,8 +9,7 @@ interface HighlightNumberWrapperProps {
 }
 
 export const HighlightNumberWrapper = styled.div<HighlightNumberWrapperProps>`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', align: 'normal', justify: 'normal' })};
   width: fit-content;
   height: auto;
   vertical-align: top;
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 b649107f..a07cdc24 100644
--- a/packages/adena-extension/src/components/atoms/list-box/index.tsx
+++ b/packages/adena-extension/src/components/atoms/list-box/index.tsx
@@ -71,7 +71,7 @@ export const ListBox = ({
 };
 
 const Wrapper = styled.div<ListBoxStyleProps>`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   ${({ 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 55008633..aaf230a9 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 }): false | CSSProp => !!children && mixins.flex('row', 'center', 'center')};
+  ${({ children }): false | CSSProp => !!children && mixins.flex({ direction: 'row' })};
   width: ${({ width }): string => (width ? width : '100%')};
   height: ${({ height }): string | undefined => height && height};
   background-color: ${({ theme, bgColor }): string => (bgColor ? bgColor : theme.neutral._5)};
diff --git a/packages/adena-extension/src/components/atoms/loadings/spinner.tsx b/packages/adena-extension/src/components/atoms/loadings/spinner.tsx
index 372be460..62ebca88 100644
--- a/packages/adena-extension/src/components/atoms/loadings/spinner.tsx
+++ b/packages/adena-extension/src/components/atoms/loadings/spinner.tsx
@@ -14,7 +14,7 @@ const spinAnimation = keyframes`
 `;
 
 const SpinRing = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   position: relative;
   width: 70px;
   height: 70px;
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 fe32dcca..7a0f37ae 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,15 +1,13 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const SearchInputWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })};
   width: 100%;
   height: 100%;
   max-height: 48px;
   padding: 12px 16px;
-  align-items: center;
-  justify-content: flex-start;
   border-radius: 30px;
   border: 1px solid ${getTheme('neutral', '_7')};
 
diff --git a/packages/adena-extension/src/components/atoms/spinner/spinner.styles.ts b/packages/adena-extension/src/components/atoms/spinner/spinner.styles.ts
index 382ca3c8..23a82cc2 100644
--- a/packages/adena-extension/src/components/atoms/spinner/spinner.styles.ts
+++ b/packages/adena-extension/src/components/atoms/spinner/spinner.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const SpinnerWrapper = styled.div<{ size: string | number }>`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: ${({ size }): string => (typeof size === 'number' ? `${size}px` : size)};
   height: ${({ size }): string => (typeof size === 'number' ? `${size}px` : size)};
 
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 02a511f8..76ec01ad 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
@@ -18,7 +18,7 @@ interface StaticTooltipProps extends TooltipProps {
 }
 
 const Tooltip = styled.div<TooltipProps>`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex()};
   width: 171px;
   height: auto;
   visibility: hidden;
@@ -29,8 +29,6 @@ const Tooltip = styled.div<TooltipProps>`
   right: 0px;
   top: ${({ posTop }): string => (posTop ? posTop : '20px')};
   transform: scale(0.6);
-  display: flex;
-  flex-direction: column;
 
   & > * {
     width: 100%;
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 cffc484e..fe303893 100644
--- a/packages/adena-extension/src/components/atoms/status-dot/index.tsx
+++ b/packages/adena-extension/src/components/atoms/status-dot/index.tsx
@@ -25,7 +25,7 @@ const Dot = styled.div<{ status: boolean }>`
 `;
 
 const Tooltip = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   width: max-content;
   height: 25px;
   visibility: hidden;
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 440c0f71..30d63277 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,13 +1,11 @@
+import mixins from '@styles/mixins';
 import { fonts } from '@styles/theme';
 import styled from 'styled-components';
 
 export const SubHeaderWrapper = styled.div`
+  ${mixins.flex({ direction: 'row' })};
   position: relative;
-  display: flex;
-  flex-direction: row;
   width: 100%;
-  justify-content: center;
-  align-items: center;
 
   .icon-wrapper {
     position: absolute;
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 e37ead75..49c64da7 100644
--- a/packages/adena-extension/src/components/atoms/tab-container/index.tsx
+++ b/packages/adena-extension/src/components/atoms/tab-container/index.tsx
@@ -21,7 +21,7 @@ export const TabContainer = ({ header, children }: Props): JSX.Element => {
 };
 
 const Container = styled.div`
-  ${mixins.flex('column', 'center', 'center')};
+  ${mixins.flex()};
   width: 100vw;
   height: 100vh;
   margin-top: -48px;
@@ -30,7 +30,7 @@ const Container = styled.div`
 
 const Wrapper = styled.div`
   position: relative;
-  ${mixins.flex('column', 'center', 'center')};
+  ${mixins.flex()};
   width: 360px;
   height: 540px;
   background-color: ${getTheme('neutral', '_8')};
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 7879e35f..dc3adf58 100644
--- a/packages/adena-extension/src/components/atoms/warning-box/index.tsx
+++ b/packages/adena-extension/src/components/atoms/warning-box/index.tsx
@@ -75,7 +75,7 @@ export const WarningBox = ({ type, margin, padding }: WarningBoxProps): JSX.Elem
 };
 
 const Wrapper = styled.div<WarningBoxStyleProps>`
-  ${mixins.flex('column', 'flex-start', 'space-between')};
+  ${mixins.flex({ align: 'flex-start', justify: '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 e98ce15e..b3c9c28d 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,14 +1,12 @@
 import styled from 'styled-components';
 
 import { fonts, getTheme } from '@styles/theme';
+import mixins from '@styles/mixins';
 
 export const ApproveInjectionLoadingWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex()};
   width: 100%;
   height: auto;
-  justify-content: center;
-  align-items: center;
   margin-top: 80px;
 
   .description {
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 74f528de..3973f5bf 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
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import mixins from '@styles/mixins';
 
 export const ApproveLedgerLoadingWrapper = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 b02acf68..813b19ec 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
@@ -5,7 +5,7 @@ import mixins from '@styles/mixins';
 import { getTheme } from '@styles/theme';
 
 export const ApproveLoadingWrapper = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   padding: 35px 20px 0;
   .l-approve {
     margin-top: 51px;
@@ -14,7 +14,7 @@ export const ApproveLoadingWrapper = styled.div`
 `;
 
 export const ApproveLoadingSkeletonBox = styled(SkeletonBoxStyle)`
-  ${mixins.flex('column', 'flex-end', 'space-between')}
+  ${mixins.flex({ align: 'flex-end', justify: 'space-between' })}
   width: 80px;
   height: 80px;
   margin: 35px 0px 24px;
@@ -22,7 +22,7 @@ export const ApproveLoadingSkeletonBox = styled(SkeletonBoxStyle)`
 `;
 
 export const ApproveLoadingRoundedBox = styled.div`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   height: 41px;
   background-color: ${getTheme('neutral', '_9')};
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 4b42b74b..b755eca8 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
@@ -4,13 +4,13 @@ import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 
 export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean }>`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   padding: 0 20px;
   margin-bottom: 96px;
   align-self: center;
 
   .row {
-    ${mixins.flex('row', 'center', 'center')};
+    ${mixins.flex({ direction: 'row' })};
     position: relative;
     padding: 10px 18px;
     justify-content: space-between;
@@ -59,7 +59,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
   }
 
   .domain-wrapper {
-    ${mixins.flex('row', 'center', 'center')};
+    ${mixins.flex({ direction: 'row' })};
     width: 100%;
     min-height: 41px;
     border-radius: 24px;
@@ -104,7 +104,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
   .transaction-data-wrapper {
     width: 100%;
     ${fonts.body1Reg};
-    ${mixins.flex('column', 'center', 'center')};
+    ${mixins.flex()};
 
     .visible-button {
       color: ${getTheme('neutral', 'a')};
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 229b1d3d..392de348 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
@@ -55,7 +55,7 @@ export const BottomFixedButtonGroup = ({
 };
 
 const ButtonWrap = styled.div<{ filled?: boolean }>`
-  ${mixins.flex('row', 'flex-start', 'center')};
+  ${mixins.flex({ direction: 'row', align: 'flex-start' })};
   position: fixed;
   left: 0px;
   width: 100%;
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 19108d97..5b675f16 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
@@ -30,7 +30,7 @@ export const BottomFixedButton = ({
 };
 
 const ButtonWrap = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   position: fixed;
   bottom: 0px;
   left: 0px;
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 2cbf5920..b81b35c9 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
@@ -21,7 +21,7 @@ interface CancelAndConfirmLocation {
 
 const Wrapper = styled.div`
   margin-top: auto;
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: '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 fe88f371..c2123d7e 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
@@ -20,7 +20,7 @@ export const CloseShadowButton = ({ onClick }: Props): JSX.Element => {
 };
 
 const ButtonWrap = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   position: fixed;
   bottom: 0px;
   left: 0px;
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 94176e23..0a3d3028 100644
--- a/packages/adena-extension/src/components/molecules/double-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/double-button/index.tsx
@@ -24,7 +24,7 @@ interface DoubleButtonProps extends WrapperStyleProps {
 }
 
 const Wrapper = styled.div<WrapperStyleProps>`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: '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 359e6a0d..b95c5ec1 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
@@ -6,14 +6,11 @@ import { TitleWithDesc } from '@components/molecules';
 import mixins from '@styles/mixins';
 
 const Container = styled.main`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
+  ${mixins.flex({ justify: 'flex-start' })};
 `;
 
 const Wrapper = styled.div`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: '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 2faf39ae..bc639383 100644
--- a/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
+++ b/packages/adena-extension/src/components/molecules/ghost-button/index.tsx
@@ -12,7 +12,7 @@ interface GhostButtonsProps {
 }
 
 const GhostBtnWrap = styled.div`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   gap: 10px;
 `;
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 c9de151e..01cde384 100644
--- a/packages/adena-extension/src/components/molecules/loading-nft/index.tsx
+++ b/packages/adena-extension/src/components/molecules/loading-nft/index.tsx
@@ -5,14 +5,14 @@ import { Loading, SkeletonBoxStyle } from '@components/atoms';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })};
   position: relative;
   width: 100%;
   gap: 16px;
 `;
 
 const ListBoxWrap = styled.div`
-  ${mixins.flex('row', 'center', 'flex-start')}
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })}
   width: 100%;
   gap: 16px;
   :first-child {
@@ -21,7 +21,7 @@ const ListBoxWrap = styled.div`
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${mixins.flex('column', 'flex-end', 'space-between')}
+  ${mixins.flex({ align: 'flex-end', justify: '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 3443473d..437671fd 100644
--- a/packages/adena-extension/src/components/molecules/seed-box/index.tsx
+++ b/packages/adena-extension/src/components/molecules/seed-box/index.tsx
@@ -31,7 +31,7 @@ const Inner = styled.div`
   gap: 20px;
   padding: 10px 18px;
   .seed-text {
-    ${mixins.flex('row', 'center', 'center')}
+    ${mixins.flex({ direction: 'row' })}
   }
 `;
 
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 3ce10c86..cb4f2cd2 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
@@ -34,14 +34,14 @@ export const SeedViewAndCopy = ({
 };
 
 const Wrapper = styled.div`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   margin: 12px auto auto;
   padding: 0px 45px;
 `;
 
 const ButtonStyle = styled(Button)`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   height: 25px;
   border-radius: 12.5px;
   padding: 0px 12px;
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 7880f772..01eeac32 100644
--- a/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx
+++ b/packages/adena-extension/src/components/molecules/terms-checkbox/index.tsx
@@ -19,14 +19,14 @@ interface TermsCheckboxProps {
 }
 
 const Wrapper = styled.div`
-  ${mixins.flex('row', 'center', 'flex-start')};
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })};
   width: 100%;
   margin: auto 0px 10px;
   ${fonts.body2Reg};
 `;
 
 const Label = styled.label<{ checkboxPos: CheckboxPos }>`
-  ${mixins.flex('row', 'center', 'flex-start')};
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })};
   position: relative;
   padding-left: 32px;
   cursor: pointer;
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 14aace61..5b403632 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
@@ -5,26 +5,26 @@ import { Loading, SkeletonBoxStyle } from '@components/atoms';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })};
   position: relative;
   width: 100%;
   z-index: 1;
 `;
 
 const RoundsBox = styled.div`
-  ${mixins.flex('column', 'flex-end', 'center')};
+  ${mixins.flex({ align: 'flex-end' })};
   margin-left: auto;
 `;
 
 const ListBoxWrap = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')}
+  ${mixins.flex({ justify: 'flex-start' })}
   width: 100%;
   gap: 12px;
   padding-top: 12px;
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${mixins.flex('row', 'center', 'flex-start')}
+  ${mixins.flex({ direction: 'row', justify: '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 69683ea7..e86abc97 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,13 +1,12 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransactionHistoryListItemWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'normal' })};
   width: 100%;
   height: 60px;
   padding: 12px 14px;
-  align-items: center;
   background-color: ${getTheme('neutral', '_7')};
   border-radius: 18px;
   cursor: pointer;
@@ -43,11 +42,8 @@ export const TransactionHistoryListItemWrapper = styled.div`
   }
 
   .title-wrapper {
-    display: flex;
+    ${mixins.flex({ align: 'flex-start' })};
     width: 100%;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
     margin: 0 12px;
 
     .title {
@@ -81,14 +77,11 @@ export const TransactionHistoryListItemWrapper = styled.div`
   }
 
   .value-wrapper {
-    display: flex;
+    ${mixins.flex({ align: 'flex-end' })};
     flex-wrap: wrap;
     width: fit-content;
     max-width: 150px;
     flex-shrink: 0;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-end;
     word-break: break-all;
 
     .value.more {
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 6bc966b6..e1956518 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,9 +1,9 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransactionHistoryListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
 
diff --git a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history/transaction-history.styles.ts b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history/transaction-history.styles.ts
index 592c8581..6293125c 100644
--- a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history/transaction-history.styles.ts
+++ b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history/transaction-history.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const TransactionHistoryWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: 100%;
 
@@ -13,8 +13,7 @@ export const TransactionHistoryWrapper = styled.div`
 `;
 
 export const TransactionHistoryDescriptionWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: 100%;
   padding-top: 140px;
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 1d1d87bf..d5e0c997 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,16 +1,14 @@
 import styled from 'styled-components';
 
 import { fonts, getTheme } from '@styles/theme';
+import mixins from '@styles/mixins';
 
 export const UnderlineTextButtonWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row' })};
   flex-shrink: 0;
   width: 180px;
   height: 24px;
   margin: 24px auto;
-  justify-content: center;
-  align-items: center;
   cursor: pointer;
   transition: 0.2s;
 
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 c6959261..bae45848 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,28 +1,22 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AccountDetailsWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   padding: 24px 20px;
 
   .name-input-wrapper {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex()};
     width: 100%;
-    justify-content: center;
-    align-items: center;
   }
 
   .qrcode-wrapper {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex()};
     width: 100%;
     padding: 12px 0;
-    justify-content: center;
-    align-items: center;
 
     .qrcode-background {
       display: flex;
@@ -32,16 +26,13 @@ export const AccountDetailsWrapper = styled.div`
     }
 
     .qrcode-address-wrapper {
-      display: flex;
-      flex-direction: row;
+      ${mixins.flex({ direction: 'row', justify: 'space-between' })};
       width: 100%;
       height: 42px;
       background-color: ${getTheme('neutral', '_9')};
       margin-top: 12px;
       padding: 12px 18px 12px 16px;
       border-radius: 18px;
-      justify-content: space-between;
-      align-items: center;
 
       .address {
         display: block;
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 4c08a1ee..af5d2df2 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,9 +1,9 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AccountNameInputWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row' })};
   width: 150px;
   height: auto;
   padding: 12.5px 16px;
@@ -11,8 +11,6 @@ export const AccountNameInputWrapper = styled.div`
   border: 1px solid ${getTheme('neutral', '_7')};
   border-radius: 18px;
   transition: 0.2s;
-  justify-content: center;
-  align-items: center;
 
   &.extended {
     width: 100%;
diff --git a/packages/adena-extension/src/components/pages/add-custom-network/add-custom-network.styles.ts b/packages/adena-extension/src/components/pages/add-custom-network/add-custom-network.styles.ts
index 78d8cf30..069e0dbf 100644
--- a/packages/adena-extension/src/components/pages/add-custom-network/add-custom-network.styles.ts
+++ b/packages/adena-extension/src/components/pages/add-custom-network/add-custom-network.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const AddCustomNetworkWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   padding: 24px 20px;
 `;
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 79c3f92f..a9f992c3 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,23 +1,20 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AdditionalTokenInfoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
 `;
 
 export const AdditionalTokenInfoItemWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   height: 48px;
   padding: 13px 16px;
   background-color: ${getTheme('neutral', '_9')};
   border-radius: 30px;
-  align-items: center;
-  justify-content: space-between;
 
   & + & {
     margin-top: 12px;
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 557a6b14..2b295cf3 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,17 +1,16 @@
 import styled from 'styled-components';
 
 import { fonts, getTheme } from '@styles/theme';
+import mixins from '@styles/mixins';
 
 export const AdditionalTokenSearchListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   max-height: 240px;
 
   .scroll-wrapper {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     width: 100%;
     overflow-y: auto;
   }
@@ -28,12 +27,10 @@ export const AdditionalTokenSearchListWrapper = styled.div`
 `;
 
 export const AdditionalTokenSearchListItemWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', align: 'normal', justify: 'space-between' })};
   width: 100%;
   height: auto;
   padding: 14px 15px;
-  justify-content: space-between;
   transition: 0.2s;
   cursor: pointer;
 
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 7ae0f962..3463e87e 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,17 +1,16 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AdditionalTokenSelectBoxWrapper = styled.div`
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   position: relative;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 48px;
 
   .fixed-wrapper {
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     position: relative;
-    display: flex;
-    flex-direction: column;
     width: 100%;
     height: auto;
     min-height: 48px;
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 643e9317..2332f646 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,10 +1,10 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AdditionalTokenWrapper = styled.div`
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   position: relative;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
   min-height: 444px;
@@ -26,12 +26,10 @@ export const AdditionalTokenWrapper = styled.div`
   }
 
   .button-group {
+    ${mixins.flex({ direction: 'row', align: 'normal', justify: 'space-between' })};
     position: absolute;
-    display: flex;
     width: 100%;
     bottom: 0;
-    flex-direction: row;
-    justify-content: space-between;
 
     button {
       display: inline-flex;
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 ee6c4b47..76df2adc 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,16 +1,15 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const ApproveAddingNetworkTableWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   border-radius: 18px;
 
   .table-row {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     padding: 8px 16px;
     background-color: ${getTheme('neutral', '_9')};
     margin-bottom: 2px;
diff --git a/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network/approve-adding-network.styles.ts b/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network/approve-adding-network.styles.ts
index ecf06cbb..7bd201ff 100644
--- a/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network/approve-adding-network.styles.ts
+++ b/packages/adena-extension/src/components/pages/approve-adding-network/approve-adding-network/approve-adding-network.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const ApproveAddingNetworkWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   padding: 24px 20px 120px 20px;
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 07f12160..8cf03bff 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,13 +1,11 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const ApproveChangingNetworkItemWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex()};
   width: 80px;
   height: auto;
-  justify-content: center;
-  align-items: center;
 
   img {
     display: flex;
diff --git a/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network/approve-changing-network.styles.ts b/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network/approve-changing-network.styles.ts
index 553342a6..3d961910 100644
--- a/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network/approve-changing-network.styles.ts
+++ b/packages/adena-extension/src/components/pages/approve-changing-network/approve-changing-network/approve-changing-network.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const ApproveChangingNetworkWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex()};
   width: 100%;
   height: auto;
   justify-content: center;
@@ -10,8 +10,7 @@ export const ApproveChangingNetworkWrapper = styled.div`
   padding: 24px 20px;
 
   .title-container {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     width: 100%;
     height: 152px;
     margin-bottom: 16px;
@@ -36,10 +35,8 @@ export const ApproveChangingNetworkWrapper = styled.div`
   }
 
   .info-wrapper {
-    display: flex;
-    flex-direction: row;
+    ${mixins.flex({ direction: 'row', align: 'flex-start', justify: 'normal' })};
     width: fit-content;
-    align-items: flex-start;
 
     .icon-arrow {
       width: 24px;
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 87690e79..ad3577bd 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
@@ -5,7 +5,7 @@ import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 
 export const WalletConnectWrapper = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   padding: 0 20px;
   align-self: center;
 
@@ -31,7 +31,7 @@ export const WalletConnectWrapper = styled.div`
   }
 
   .domain-wrapper {
-    ${mixins.flex('row', 'center', 'center')};
+    ${mixins.flex({ direction: 'row' })};
     width: 100%;
     min-height: 41px;
     border-radius: 24px;
@@ -48,7 +48,7 @@ export const WalletConnectWrapper = styled.div`
     background-color: ${getTheme('neutral', '_9')};
 
     .info-table-header {
-      ${mixins.flex('column', 'flex-start', 'center')};
+      ${mixins.flex({ align: 'flex-start' })};
       width: 100%;
       padding: 12px;
       color: ${getTheme('neutral', 'a')};
@@ -57,7 +57,7 @@ export const WalletConnectWrapper = styled.div`
     }
 
     .info-table-body {
-      ${mixins.flex('column', 'flex-start', 'center')};
+      ${mixins.flex({ align: 'flex-start' })};
       width: 100%;
       padding: 12px;
       gap: 8px;
@@ -78,32 +78,10 @@ export const WalletConnectWrapper = styled.div`
   }
 
   .description-wrapper {
-    ${mixins.flex('column', 'flex-start', 'center')};
+    ${mixins.flex({ align: 'flex-start' })};
     padding: 4px 0;
     margin-bottom: 43px;
     color: ${getTheme('neutral', 'a')};
     ${fonts.captionReg};
   }
-
-  .button-wrapper {
-    ${mixins.flex('row', 'flex-start', 'center')};
-    width: 100%;
-    margin-bottom: 24px;
-    gap: 10px;
-
-    button {
-      width: 100%;
-      height: 48px;
-      border-radius: 30px;
-      ${fonts.body1Bold};
-    }
-
-    button.cancel {
-      background-color: ${getTheme('neutral', '_5')};
-    }
-
-    button.connect {
-      background-color: ${getTheme('primary', '_6')};
-    }
-  }
 `;
diff --git a/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.tsx b/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.tsx
index 1aeb4b96..fde18322 100644
--- a/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.tsx
+++ b/packages/adena-extension/src/components/pages/approve-establish/wallet-connect/wallet-connect.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 
 import { Text } from '@components/atoms';
-import { ApproveInjectionLoading, ApproveLoading } from '@components/molecules';
+import {
+  ApproveInjectionLoading,
+  ApproveLoading,
+  BottomFixedButtonGroup,
+} from '@components/molecules';
 import DefaultFavicon from '@assets/favicon-default.svg';
 import { WalletConnectWrapper } from './wallet-connect.styles';
 
@@ -70,14 +74,18 @@ const WalletConnect: React.FC<WalletConnectProps> = ({
         <span>Only connect to websites you trust.</span>
       </div>
 
-      <div className='button-wrapper'>
-        <button className='cancel' onClick={onClickCancel}>
-          Cancel
-        </button>
-        <button className='connect' onClick={onClickConnect}>
-          Connect
-        </button>
-      </div>
+      <BottomFixedButtonGroup
+        filled
+        leftButton={{
+          text: 'Cancel',
+          onClick: onClickCancel,
+        }}
+        rightButton={{
+          primary: true,
+          text: 'Connect',
+          onClick: onClickConnect,
+        }}
+      />
     </WalletConnectWrapper>
   );
 };
diff --git a/packages/adena-extension/src/components/pages/change-network/change-network/change-network.styles.ts b/packages/adena-extension/src/components/pages/change-network/change-network/change-network.styles.ts
index ba5075d2..8ff50818 100644
--- a/packages/adena-extension/src/components/pages/change-network/change-network/change-network.styles.ts
+++ b/packages/adena-extension/src/components/pages/change-network/change-network/change-network.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const ChangeNetworkWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
 
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 7d239de8..7e5864d0 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
@@ -5,7 +5,7 @@ import { Loading, SkeletonBoxStyle } from '@components/atoms';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })};
   position: relative;
   width: 100%;
   margin-top: 13px;
@@ -13,7 +13,7 @@ const Wrapper = styled.div`
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${mixins.flex('column', 'flex-start', 'center')}
+  ${mixins.flex({ align: 'flex-start' })}
   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 5bc6e615..2a1bdd66 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,9 +1,9 @@
+import mixins from '@styles/mixins';
 import { getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const NetworkListItemWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   padding: 9px 16px;
@@ -17,17 +17,14 @@ export const NetworkListItemWrapper = styled.div`
   }
 
   .info-wrapper {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     width: 100%;
     font-size: 12px;
     font-weight: 600;
     line-height: 21px;
 
     .name-wrapper {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
+      ${mixins.flex({ direction: 'row', justify: 'normal' })};
 
       .name {
         display: block;
@@ -64,9 +61,7 @@ export const NetworkListItemWrapper = styled.div`
     }
 
     .description-wrapper {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
+      ${mixins.flex({ direction: 'row', justify: 'normal' })};
 
       .description {
         display: block;
diff --git a/packages/adena-extension/src/components/pages/change-network/network-list/network-list.styles.ts b/packages/adena-extension/src/components/pages/change-network/network-list/network-list.styles.ts
index e32d9550..c0453c38 100644
--- a/packages/adena-extension/src/components/pages/change-network/network-list/network-list.styles.ts
+++ b/packages/adena-extension/src/components/pages/change-network/network-list/network-list.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const NetworkListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
 
diff --git a/packages/adena-extension/src/components/pages/edit-network/edit-network/edit-network.styles.ts b/packages/adena-extension/src/components/pages/edit-network/edit-network/edit-network.styles.ts
index 1a77030e..d044e60d 100644
--- a/packages/adena-extension/src/components/pages/edit-network/edit-network/edit-network.styles.ts
+++ b/packages/adena-extension/src/components/pages/edit-network/edit-network/edit-network.styles.ts
@@ -1,22 +1,20 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const EditNetworkWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: 100vh;
 
   & .content-wrapper {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     width: 100%;
     height: 100%;
     padding: 24px 20px 72px 20px;
   }
 
   & .form-wrapper {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     width: 100%;
     height: 100%;
     padding: 12px 0;
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 e2357541..4fc20e8b 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,14 +1,12 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const MainManageTokenButtonWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row' })};
   flex-shrink: 0;
   width: 156px;
   height: 24px;
-  justify-content: center;
-  align-items: center;
   cursor: pointer;
   transition: 0.2s;
 
diff --git a/packages/adena-extension/src/components/pages/manage-token-layout/index.ts b/packages/adena-extension/src/components/pages/manage-token-layout/index.ts
index 8e56f5ec..0680ff38 100644
--- a/packages/adena-extension/src/components/pages/manage-token-layout/index.ts
+++ b/packages/adena-extension/src/components/pages/manage-token-layout/index.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const ManageTokenLayout = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: 490px;
   padding: 24px 20px;
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 05464880..e6bba5d1 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,16 +1,14 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const ManageTokenListItemWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })};
   padding: 10px 14px;
   width: 100%;
   height: auto;
   background: ${getTheme('neutral', '_9')};
   border-radius: 18px;
-  align-items: center;
-  justify-items: flex-start;
   transition: 0.2s;
 
   & + & {
diff --git a/packages/adena-extension/src/components/pages/manage-token/manage-token-list/manage-token-list.styles.ts b/packages/adena-extension/src/components/pages/manage-token/manage-token-list/manage-token-list.styles.ts
index 38dc7c49..1955bb0c 100644
--- a/packages/adena-extension/src/components/pages/manage-token/manage-token-list/manage-token-list.styles.ts
+++ b/packages/adena-extension/src/components/pages/manage-token/manage-token-list/manage-token-list.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const ManageTokenListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
 `;
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 ddeb40b1..2afd2c51 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,14 +1,12 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const ManageTokenSearchInputWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })};
   width: 100%;
   height: 48px;
   padding: 12px 16px;
-  align-items: center;
-  justify-content: flex-start;
   background-color: ${getTheme('neutral', '_9')};
   border-radius: 30px;
   border: 1px solid ${getTheme('neutral', '_7')};
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 21e61a4a..e3f38197 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,9 +1,9 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const ManageTokenSearchWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
 
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 2cf7af7b..49e0e594 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,10 +1,10 @@
 import styled from 'styled-components';
 
 import { getTheme } from '@styles/theme';
+import mixins from '@styles/mixins';
 
 export const ToggleWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   flex-shrink: 0;
   width: 46px;
   height: 26px;
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 5fa5e1dc..4cbcb738 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,14 +1,12 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const SideMenuAccountItemWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   height: auto;
   padding: 12px 20px;
-  justify-content: space-between;
-  align-items: center;
   transition: 0.2s;
   cursor: pointer;
 
@@ -21,9 +19,7 @@ export const SideMenuAccountItemWrapper = styled.div`
   }
 
   .info-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    ${mixins.flex({ align: 'flex-start', justify: 'normal' })};
 
     .address-wrapper {
       display: inline-flex;
@@ -102,8 +98,7 @@ export const SideMenuAccountItemMoreInfoWrapper = styled.div<{
   overflow: hidden;
 
   .info-wrapper {
-    display: flex;
-    flex-direction: row;
+    ${mixins.flex({ direction: 'row', align: 'normal', justify: 'normal' })};
     padding: 7px 0 7px 12px;
     border-bottom: 1px solid ${getTheme('neutral', '_7')};
     cursor: pointer;
diff --git a/packages/adena-extension/src/components/pages/router/side-menu-account-list/side-menu-account-list.styles.ts b/packages/adena-extension/src/components/pages/router/side-menu-account-list/side-menu-account-list.styles.ts
index be1105d1..79a21010 100644
--- a/packages/adena-extension/src/components/pages/router/side-menu-account-list/side-menu-account-list.styles.ts
+++ b/packages/adena-extension/src/components/pages/router/side-menu-account-list/side-menu-account-list.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const SideMenuAccountListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
 `;
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 4ebdc62d..57ea0526 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
@@ -32,7 +32,7 @@ export const SideMenuBackground = styled.div`
 `;
 
 export const SideMenuContent = styled.div<{ open: boolean }>`
-  ${mixins.flex('column', 'center', 'space-between')};
+  ${mixins.flex({ justify: 'space-between' })};
   background-color: ${getTheme('neutral', '_8')};
   position: fixed;
   top: 0px;
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 11dfc57f..31249ec4 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,15 +1,13 @@
 import styled from 'styled-components';
 
 import { fonts, getTheme } from '@styles/theme';
+import mixins from '@styles/mixins';
 
 export const SideMenuLinkWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })};
   width: 100%;
   height: auto;
   padding: 16px 20px;
-  justify-content: flex-start;
-  align-items: center;
   background-color: ${getTheme('neutral', '_9')};
   transition: 0.2s;
   cursor: pointer;
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 a9b61c84..c4948696 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,21 +1,18 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const SideMenuWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: 100vh;
   background-color: ${getTheme('neutral', '_8')};
 
   .header-wrapper {
-    display: flex;
+    ${mixins.flex({ direction: 'row', justify: 'space-between' })};
     height: 50px;
     flex-shrink: 0;
     padding: 0 20px;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
     background-color: ${getTheme('neutral', '_9')};
 
     .logo {
@@ -91,8 +88,7 @@ export const SideMenuWrapper = styled.div`
   }
 
   .bottom-wrapper {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     flex-shrink: 0;
     height: fit-content;
 
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 cbdd627c..93edec07 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,9 +1,9 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AddressBookListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   background-color: ${getTheme('neutral', '_9')};
@@ -17,13 +17,10 @@ export const AddressBookListWrapper = styled.div`
 `;
 
 export const AddressBookListItemWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   min-height: 48px;
   padding: 13px 16px;
-  justify-content: space-between;
-  align-items: center;
   ${fonts.body2Reg};
   transition: 0.2s;
   cursor: pointer;
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 3078ddaf..4cc1c22d 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,15 +1,14 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const AddressInputWrapper = styled.div`
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   position: relative;
-  display: flex;
-  flex-direction: column;
   width: 100%;
 
   .input-wrapper {
-    display: flex;
-    flex-direction: row;
+    ${mixins.flex({ direction: 'row', justify: 'normal' })};
     width: 100%;
     min-height: 48px;
     padding: 12px 16px;
@@ -17,7 +16,6 @@ export const AddressInputWrapper = styled.div`
     background-color: ${getTheme('neutral', '_9')};
     border: 1px solid ${getTheme('neutral', '_7')};
     border-radius: 30px;
-    align-items: center;
 
     .selected-title-wrapper {
       width: 100%;
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 157e047f..160a0d82 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,15 +1,14 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const BalanceInputWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
 
   .input-wrapper {
-    display: flex;
-    flex-direction: row;
+    ${mixins.flex({ direction: 'row', justify: 'normal' })};
     width: 100%;
     min-height: 48px;
     padding: 12px 16px;
@@ -17,7 +16,6 @@ export const BalanceInputWrapper = styled.div`
     background-color: ${getTheme('neutral', '_9')};
     border: 1px solid ${getTheme('neutral', '_7')};
     border-radius: 30px;
-    align-items: center;
 
     .amount-input {
       width: 100%;
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 7469c31a..49632ec5 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,10 +1,10 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransferInputWrapper = styled.div`
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   position: relative;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   min-height: 444px;
   padding-top: 5px;
diff --git a/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.styles.ts b/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.styles.ts
index 2e51d558..ec613669 100644
--- a/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-ledger-loading/transfer-ledger-loading.styles.ts
@@ -1,13 +1,12 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const TransferLedgerLoadingWrapper = styled.div`
+  ${mixins.flex({ align: 'normal', justify: 'flex-start' })};
   position: relative;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
   min-height: 444px;
-  justify-content: flex-start;
 
   @keyframes rotate {
     from {
diff --git a/packages/adena-extension/src/components/pages/transfer-ledger-reject/transfer-ledger-reject.styles.ts b/packages/adena-extension/src/components/pages/transfer-ledger-reject/transfer-ledger-reject.styles.ts
index cfd3d02f..19a58c3b 100644
--- a/packages/adena-extension/src/components/pages/transfer-ledger-reject/transfer-ledger-reject.styles.ts
+++ b/packages/adena-extension/src/components/pages/transfer-ledger-reject/transfer-ledger-reject.styles.ts
@@ -1,13 +1,12 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const TransferLedgerRejectWrapper = styled.div`
+  ${mixins.flex({ align: 'normal', justify: 'flex-start' })};
   position: relative;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
   min-height: 444px;
-  justify-content: flex-start;
 
   .reject-icon {
     width: 100px;
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 6dd21135..2813eeb6 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,16 +1,14 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransferSummaryBalanceWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   height: auto;
   padding: 20px;
   background-color: ${getTheme('neutral', '_9')};
   border-radius: 18px;
-  justify-content: space-between;
-  align-items: center;
 
   .token-image {
     width: 30px;
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 ed3b65db..747ea0f9 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,16 +1,14 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransferSummaryNetworkFeeWrapper = styled.div<{ isError?: boolean }>`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   padding: 14px 16px;
   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.red._5};`}
 
   .key {
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 b39c33ec..d7475a3e 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,16 +1,15 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TransferSummaryWrapper = styled.div`
+  ${mixins.flex({ align: 'normal', justify: 'flex-start' })};
   position: relative;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
   padding-top: 5px;
   min-height: 444px;
   align-items: center;
-  justify-content: flex-start;
 
   .sub-header-wrapper {
     width: 100%;
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 abf6a1b3..11a2e406 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,16 +1,14 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const TokenListItemWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })};
   padding: 13px;
   width: 100%;
   height: auto;
   background: ${getTheme('neutral', '_9')};
   border-radius: 18px;
-  align-items: center;
-  justify-items: flex-start;
   transition: 0.2s;
 
   & + & {
diff --git a/packages/adena-extension/src/components/pages/wallet-main/token-list/token-list.styles.ts b/packages/adena-extension/src/components/pages/wallet-main/token-list/token-list.styles.ts
index 6af878b7..3190561f 100644
--- a/packages/adena-extension/src/components/pages/wallet-main/token-list/token-list.styles.ts
+++ b/packages/adena-extension/src/components/pages/wallet-main/token-list/token-list.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const TokenListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
 `;
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 f119a662..3330e839 100644
--- a/packages/adena-extension/src/pages/certify/about-adena/index.tsx
+++ b/packages/adena-extension/src/pages/certify/about-adena/index.tsx
@@ -83,7 +83,7 @@ export const AboutAdena = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 29c89cb7..c0b5e52d 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
@@ -12,7 +12,7 @@ import mixins from '@styles/mixins';
 import { MultilineTextWithArrowButton } from './multiline-text-with-arrow-button';
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: '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 bd169dce..14f837a3 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
@@ -38,7 +38,7 @@ export const MultilineTextWithArrowButton = ({
 };
 
 const Wrapper = styled.button`
-  ${mixins.flex('column', 'flex-start', 'center')};
+  ${mixins.flex({ align: 'flex-start' })};
   position: relative;
   width: 100%;
   height: 80px;
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 736244c7..aca5dc45 100644
--- a/packages/adena-extension/src/pages/certify/add-address/index.tsx
+++ b/packages/adena-extension/src/pages/certify/add-address/index.tsx
@@ -218,7 +218,7 @@ const AddressInput = styled.textarea<{ error: boolean }>`
 `;
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   padding-top: 24px;
   width: 100%;
   height: 100%;
@@ -229,7 +229,7 @@ const Wrapper = styled.main`
 `;
 
 const TopSection = styled.div`
-  ${mixins.flex('row', 'center', 'center')}
+  ${mixins.flex({ direction: 'row' })}
   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 24106a1b..06357b38 100644
--- a/packages/adena-extension/src/pages/certify/address-book/index.tsx
+++ b/packages/adena-extension/src/pages/certify/address-book/index.tsx
@@ -78,7 +78,7 @@ const AddressBook = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })};
   width: 100%;
   height: 100%;
   padding-top: 24px;
@@ -93,7 +93,7 @@ const Wrapper = styled.main`
 `;
 
 const TopSection = styled.div`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: '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 46ad3b9a..418c8162 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
@@ -12,7 +12,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 e62fe3dc..66f43a75 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
@@ -12,7 +12,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 ef8eb190..7202ed49 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
@@ -11,7 +11,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 1e0ecbf7..fe06bfc1 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
@@ -12,7 +12,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 3f8bdc97..f0a7fa2a 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
@@ -11,7 +11,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 26ad140a..e719bb0a 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
@@ -15,7 +15,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 b898737e..1f07893f 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
@@ -11,7 +11,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 8d4054d4..5ca99f7f 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
@@ -58,7 +58,7 @@ export const ApproveHardwareWalletLedgerPassword = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 44c906c0..a0b37728 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
@@ -22,15 +22,14 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   width: 100%;
   height: 100%;
   padding: 24px 20px;
   margin: 0 auto;
 
   .title {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     width: 100%;
   }
 
@@ -49,8 +48,7 @@ const Wrapper = styled.main`
 `;
 
 const AccountListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 320px;
   height: 166px;
   border-radius: 10px;
@@ -72,8 +70,7 @@ const AccountListContainer = styled.div`
   }
 
   .list-wrapper {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     flex-shrink: 1;
     width: 100%;
     height: 100%;
@@ -90,13 +87,10 @@ const AccountListContainer = styled.div`
   }
 
   .load-more-button {
-    display: flex;
-    flex-direction: row;
+    ${mixins.flex({ direction: 'row' })};
     flex-shrink: 0;
     width: 100%;
     height: 46px;
-    align-items: center;
-    justify-content: center;
     color: ${getTheme('neutral', 'a')};
     border-top: 1px solid ${getTheme('neutral', '_7')};
     border-radius: 0;
@@ -127,13 +121,10 @@ const AccountListContainer = styled.div`
   }
 
   .item {
-    display: flex;
-    flex-direction: row;
+    ${mixins.flex({ direction: 'row', justify: 'space-between' })};
     width: 100%;
     height: 46px;
     padding: 10px 20px;
-    justify-content: space-between;
-    align-items: center;
     border-bottom: 1px solid ${getTheme('neutral', '_7')};
 
     .address {
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 2d1977c3..3e8b7793 100644
--- a/packages/adena-extension/src/pages/certify/change-password/index.tsx
+++ b/packages/adena-extension/src/pages/certify/change-password/index.tsx
@@ -8,7 +8,7 @@ import { useChangePassword } from '@hooks/certify/use-change-password';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: '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 53013def..cb169123 100644
--- a/packages/adena-extension/src/pages/certify/connected-apps/index.tsx
+++ b/packages/adena-extension/src/pages/certify/connected-apps/index.tsx
@@ -93,7 +93,7 @@ export const ConnectedApps = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })};
   width: 100%;
   height: 100%;
   padding-top: 24px;
@@ -123,7 +123,7 @@ const Wrapper = styled.main`
 `;
 
 const DisconnectedBtn = styled.button`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   flex-shrink: 0;
   width: 25px;
   height: 25px;
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 4992db80..525cb7cf 100644
--- a/packages/adena-extension/src/pages/certify/create-password/index.tsx
+++ b/packages/adena-extension/src/pages/certify/create-password/index.tsx
@@ -13,14 +13,14 @@ const text = {
 };
 
 const popupStyle = css`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   max-width: 380px;
   min-height: 514px;
   padding-top: 50px;
 `;
 
 const defaultStyle = css`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 1d9553b1..0d6aa3d9 100644
--- a/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
+++ b/packages/adena-extension/src/pages/certify/enter-seed/index.tsx
@@ -59,7 +59,7 @@ export const EnterSeedPhrase = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 f60ebca7..f7d124b9 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
@@ -17,7 +17,7 @@ const StyledPrivateKeyBox = styled.div`
   background-color: ${getTheme('neutral', '_9')};
   border-radius: 18px;
   padding: 8px;
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
 `;
 
 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 38a9f886..334256c9 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
@@ -9,7 +9,7 @@ import ApproachPrivateKey from './ApproachPrivateKey';
 import CheckPassword from './CheckPassword';
 
 const StyledWrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: '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 b4547189..dbb7f9fd 100644
--- a/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
+++ b/packages/adena-extension/src/pages/certify/forgot-password/index.tsx
@@ -62,7 +62,7 @@ export const ForgotPassword = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   width: 100%;
   height: 100%;
   padding-top: 50px;
@@ -85,7 +85,7 @@ const LearnMore = styled.button`
 `;
 
 const TextStyled = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   width: 100%;
   color: ${getTheme('neutral', 'a')};
   gap: 6px;
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 57861965..b5a1cf1e 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
@@ -35,7 +35,7 @@ export const GenerateSeedPhrase = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 60f45b6b..9dfa6ae2 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
@@ -13,7 +13,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 a0fd93de..0483e5ae 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
@@ -15,7 +15,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 4a5cc649..a98c1a4c 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
@@ -104,7 +104,7 @@ export const ImportPrivateKey = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 10e7f939..094cb697 100644
--- a/packages/adena-extension/src/pages/certify/launch-adena/index.tsx
+++ b/packages/adena-extension/src/pages/certify/launch-adena/index.tsx
@@ -14,14 +14,14 @@ const text = {
 };
 
 const popupStyle = css`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   max-width: 380px;
   min-height: 514px;
   padding-top: 50px;
 `;
 
 const defaultStyle = css`
-  ${mixins.flex('column', 'center', 'space-between')};
+  ${mixins.flex({ justify: '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 29de9d97..bcc8c844 100644
--- a/packages/adena-extension/src/pages/certify/login/index.tsx
+++ b/packages/adena-extension/src/pages/certify/login/index.tsx
@@ -14,7 +14,7 @@ import mixins from '@styles/mixins';
 const text = 'Enter\nYour Password';
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'stretch')}
+  ${mixins.flex({ justify: 'stretch' })}
   width: 100%;
   height: 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 711072b5..7652dbe4 100644
--- a/packages/adena-extension/src/pages/certify/remove-account/index.tsx
+++ b/packages/adena-extension/src/pages/certify/remove-account/index.tsx
@@ -57,7 +57,7 @@ export const RemoveAccount = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 0539c32c..e93df2c6 100644
--- a/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
+++ b/packages/adena-extension/src/pages/certify/reset-wallet/index.tsx
@@ -51,7 +51,7 @@ export const ResetWallet = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 65d52918..9968026b 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
@@ -110,7 +110,7 @@ export const RevealPasswordPhrase = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: '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 c3ae9f88..d297cd4d 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
@@ -40,7 +40,7 @@ export const RevealPrivatePhrase = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: '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 85f0a862..9ddcbd95 100644
--- a/packages/adena-extension/src/pages/certify/security-privacy/index.tsx
+++ b/packages/adena-extension/src/pages/certify/security-privacy/index.tsx
@@ -80,7 +80,7 @@ export const SecurityPrivacy = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: '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 2a2fa158..27953a93 100644
--- a/packages/adena-extension/src/pages/certify/seed-phrase/index.tsx
+++ b/packages/adena-extension/src/pages/certify/seed-phrase/index.tsx
@@ -16,7 +16,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: '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 f4762171..8bdce1f6 100644
--- a/packages/adena-extension/src/pages/certify/settings/index.tsx
+++ b/packages/adena-extension/src/pages/certify/settings/index.tsx
@@ -56,7 +56,7 @@ export const Settings = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   width: 100%;
   height: 100%;
   padding-top: 24px;
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 eba37877..2c3f0a68 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
@@ -12,7 +12,7 @@ const text = {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'stretch')};
+  ${mixins.flex({ justify: 'stretch' })};
   width: 100%;
   height: 100%;
   padding-top: 24px;
@@ -23,7 +23,7 @@ const Wrapper = styled.main`
 `;
 
 const SeedBoxWrap = styled.div`
-  ${mixins.flex('column', 'center', 'stretch')};
+  ${mixins.flex({ justify: '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 8273519c..da525b65 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
@@ -131,7 +131,7 @@ export const YourSeedPhrase = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 3ac08391..82455866 100644
--- a/packages/adena-extension/src/pages/wallet/approve-login/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/approve-login/index.tsx
@@ -19,7 +19,7 @@ import mixins from '@styles/mixins';
 
 const text = 'Enter\nYour Password';
 const Wrapper = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: '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 f924cdbb..4e89fbea 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
@@ -45,7 +45,7 @@ const LoadingApproveTransaction = ({
 };
 
 const Wrapper = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   max-width: 380px;
   min-height: 514px;
   padding: 29px 20px 24px;
@@ -55,7 +55,7 @@ const Wrapper = styled.div`
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${mixins.flex('column', 'flex-end', 'space-between')}
+  ${mixins.flex({ align: 'flex-end', justify: 'space-between' })}
   width: 80px;
   height: 80px;
   margin: 39px 0px 24px;
@@ -63,7 +63,7 @@ const SkeletonBox = styled(SkeletonBoxStyle)`
 `;
 
 const RoundedBox = styled.div`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   height: 41px;
   background-color: ${getTheme('neutral', '_9')};
diff --git a/packages/adena-extension/src/pages/wallet/deposit/index.tsx b/packages/adena-extension/src/pages/wallet/deposit/index.tsx
index 162aed01..2cd21d2f 100644
--- a/packages/adena-extension/src/pages/wallet/deposit/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/deposit/index.tsx
@@ -13,14 +13,14 @@ import { TokenModel } from '@types';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'stretch')};
+  ${mixins.flex({ justify: 'stretch' })};
   width: 100%;
   height: 100%;
   padding-top: 24px;
 `;
 
 const QRCodeBox = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   background-color: ${getTheme('neutral', '_1')};
   padding: 10px;
   border-radius: 8px;
@@ -28,7 +28,7 @@ const QRCodeBox = styled.div`
 `;
 
 const CopyInputBox = styled.div`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   ${inputStyle};
   border: 1px solid ${getTheme('neutral', '_7')};
 
diff --git a/packages/adena-extension/src/pages/wallet/explore/index.tsx b/packages/adena-extension/src/pages/wallet/explore/index.tsx
index feccc783..03ac82bf 100644
--- a/packages/adena-extension/src/pages/wallet/explore/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/explore/index.tsx
@@ -69,12 +69,12 @@ const MoveToLink = styled.img`
 `;
 
 const Contents = styled.div`
-  ${mixins.flex('column', 'flex-start', 'center')};
+  ${mixins.flex({ align: 'flex-start' })};
   margin-left: 12px;
 `;
 
 const BoxContainer = styled.div`
-  ${mixins.flex('row', 'center', 'flex-start')};
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })};
   background-color: ${getTheme('neutral', '_9')};
   width: 100%;
   height: 60px;
@@ -85,7 +85,7 @@ const BoxContainer = styled.div`
 `;
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: '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 55c8fe80..67cf0376 100644
--- a/packages/adena-extension/src/pages/wallet/explore/loading-explore.tsx
+++ b/packages/adena-extension/src/pages/wallet/explore/loading-explore.tsx
@@ -4,26 +4,26 @@ import { Loading, SkeletonBoxStyle } from '@components/atoms';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })};
   position: relative;
   width: 100%;
   z-index: 1;
 `;
 
 const RoundsBox = styled.div`
-  ${mixins.flex('column', 'flex-end', 'center')};
+  ${mixins.flex({ align: 'flex-end' })};
   margin-left: auto;
 `;
 
 const ListBoxWrap = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')}
+  ${mixins.flex({ justify: 'flex-start' })}
   width: 100%;
   gap: 12px;
   padding-top: 12px;
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${mixins.flex('row', 'center', 'flex-start')}
+  ${mixins.flex({ direction: 'row', justify: '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 99b9558b..59539976 100644
--- a/packages/adena-extension/src/pages/wallet/history/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/history/index.tsx
@@ -14,10 +14,10 @@ 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';
+import mixins from '@styles/mixins';
 
 const StyledHistoryLayout = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/wallet/nft/index.tsx b/packages/adena-extension/src/pages/wallet/nft/index.tsx
index 3a5ba98f..f864af49 100644
--- a/packages/adena-extension/src/pages/wallet/nft/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/nft/index.tsx
@@ -7,7 +7,7 @@ import { getTheme } from '@styles/theme';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })};
   width: 100%;
   height: 100%;
   padding-top: 24px;
diff --git a/packages/adena-extension/src/pages/wallet/search/index.tsx b/packages/adena-extension/src/pages/wallet/search/index.tsx
index 63d269ae..34c2883c 100644
--- a/packages/adena-extension/src/pages/wallet/search/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/search/index.tsx
@@ -60,7 +60,7 @@ const DataListWrap = styled.div`
 `;
 
 const ButtonWrap = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   position: fixed;
   bottom: 0px;
   left: 0px;
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 6d7799ef..8860f92e 100644
--- a/packages/adena-extension/src/pages/wallet/token-details/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/token-details/index.tsx
@@ -28,7 +28,7 @@ import LoadingTokenDetails from './loading-token-details';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })};
   width: 100%;
   height: 100%;
   padding-top: 24px;
@@ -56,7 +56,7 @@ const Wrapper = styled.main`
 `;
 
 const HeaderWrap = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   position: relative;
   width: 100%;
   margin-bottom: 20px;
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 a27dd0c7..44af0fae 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
@@ -5,25 +5,25 @@ import { Loading, SkeletonBoxStyle } from '@components/atoms';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.div`
-  ${mixins.flex('column', 'flex-start', 'flex-start')};
+  ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })};
   position: relative;
   width: 100%;
 `;
 
 const RoundsBox = styled.div`
-  ${mixins.flex('column', 'flex-end', 'center')};
+  ${mixins.flex({ align: 'flex-end' })};
   margin-left: auto;
 `;
 
 const ListBoxWrap = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')}
+  ${mixins.flex({ justify: 'flex-start' })}
   width: 100%;
   gap: 12px;
   padding-top: 12px;
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${mixins.flex('row', 'center', 'flex-start')}
+  ${mixins.flex({ direction: 'row', justify: '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 1e8f931c..ea5b1c1d 100644
--- a/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/transaction-detail/index.tsx
@@ -169,7 +169,7 @@ export const TransactionDetail = (): JSX.Element => {
 };
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   width: 100%;
   padding-top: 30px;
   .status-icon {
@@ -192,7 +192,7 @@ const Wrapper = styled.main`
 `;
 
 const TokenBox = styled.div<{ color: string }>`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   height: 70px;
   background-color: ${getTheme('neutral', '_9')};
@@ -214,7 +214,7 @@ const TokenBox = styled.div<{ color: string }>`
 `;
 
 const DataBox = styled.div`
-  ${mixins.flex('column', 'center', 'center')};
+  ${mixins.flex()};
   width: 100%;
   border-radius: 18px;
   background-color: ${getTheme('neutral', '_9')};
@@ -222,7 +222,7 @@ const DataBox = styled.div`
 `;
 
 const DLWrap = styled.dl<DLProps>`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   ${fonts.body1Reg};
   width: 100%;
   height: 40px;
@@ -249,7 +249,7 @@ const DLWrap = styled.dl<DLProps>`
 `;
 
 const StatusInfo = styled.div`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   .link-icon {
     display: flex;
     cursor: pointer;
diff --git a/packages/adena-extension/src/pages/wallet/transfer-input/index.tsx b/packages/adena-extension/src/pages/wallet/transfer-input/index.tsx
index 1be79d40..118325bf 100644
--- a/packages/adena-extension/src/pages/wallet/transfer-input/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/transfer-input/index.tsx
@@ -12,10 +12,10 @@ import { isNativeTokenModel } from '@common/validation/validation-token';
 import useHistoryData from '@hooks/use-history-data';
 
 import { TokenModel } from '@types';
+import mixins from '@styles/mixins';
 
 const TransferInputLayoutWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/wallet/transfer-ledger-loading/index.tsx b/packages/adena-extension/src/pages/wallet/transfer-ledger-loading/index.tsx
index f50e4b3e..f3a699a5 100644
--- a/packages/adena-extension/src/pages/wallet/transfer-ledger-loading/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/transfer-ledger-loading/index.tsx
@@ -7,10 +7,10 @@ import { StdSignDoc, isLedgerAccount } from 'adena-module';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import { useAdenaContext } from '@hooks/use-context';
 import { RoutePath } from '@router/path';
+import mixins from '@styles/mixins';
 
 const TransferLedgerLoadingLayout = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/wallet/transfer-ledger-reject/index.tsx b/packages/adena-extension/src/pages/wallet/transfer-ledger-reject/index.tsx
index 28f6a1bf..47afb6ec 100644
--- a/packages/adena-extension/src/pages/wallet/transfer-ledger-reject/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/transfer-ledger-reject/index.tsx
@@ -4,10 +4,10 @@ import styled from 'styled-components';
 
 import TransferLedgerReject from '@components/pages/transfer-ledger-reject/transfer-ledger-reject';
 import { RoutePath } from '@router/path';
+import mixins from '@styles/mixins';
 
 const TransferLedgerRejectLayout = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   padding: 24px 20px;
diff --git a/packages/adena-extension/src/pages/wallet/transfer-summary/index.tsx b/packages/adena-extension/src/pages/wallet/transfer-summary/index.tsx
index 1f3e1bb5..3a8d1bd8 100644
--- a/packages/adena-extension/src/pages/wallet/transfer-summary/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/transfer-summary/index.tsx
@@ -15,10 +15,10 @@ import { isGRC20TokenModel, isNativeTokenModel } from '@common/validation/valida
 import { useNetwork } from '@hooks/use-network';
 
 import { Amount, TokenModel } from '@types';
+import mixins from '@styles/mixins';
 
 const TransferSummaryLayout = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: auto;
   padding: 24px 20px;
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 95a21334..1f5d1512 100644
--- a/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
+++ b/packages/adena-extension/src/pages/wallet/wallet-create/index.tsx
@@ -126,7 +126,7 @@ const Divider = styled.span`
 `;
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'space-between')};
+  ${mixins.flex({ justify: '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 ec74f983..18543770 100644
--- a/packages/adena-extension/src/router/header/approve-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/approve-menu/index.tsx
@@ -21,7 +21,7 @@ const Wrapper = styled.div`
   height: 100%;
   padding: 0px 20px 0px 12px;
   border-bottom: 1px solid ${getTheme('neutral', '_7')};
-  ${mixins.flex('row', 'center', 'flex-end')};
+  ${mixins.flex({ direction: 'row', justify: 'flex-end' })};
   .t-approve {
     ${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 7708b1cc..45c40e25 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
@@ -11,7 +11,7 @@ interface ArrowTitleMenuProps {
 }
 
 const Wrapper = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   width: 100%;
   height: 100%;
   border-bottom: 1px solid ${getTheme('neutral', '_7')};
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 36af0fa0..4cd44e66 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
@@ -11,7 +11,7 @@ interface CloseTitleMenuProps {
 }
 
 const Wrapper = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   width: 100%;
   height: 100%;
   border-bottom: 1px solid ${getTheme('neutral', '_7')};
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 b6c97a6f..11f4230d 100644
--- a/packages/adena-extension/src/router/header/home-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/home-menu/index.tsx
@@ -16,7 +16,7 @@ const Wrapper = styled.div`
 `;
 
 const Header = styled.div`
-  ${mixins.flex('row', 'center', 'flex-start')}
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })}
   width: 100%;
   height: 100%;
   padding: 0px 20px 0px 12px;
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 5a93a0d6..aa79d59a 100644
--- a/packages/adena-extension/src/router/header/progress-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/progress-menu/index.tsx
@@ -17,7 +17,7 @@ interface ProgressMenuProps {
 }
 
 const Wrapper = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   width: 100%;
   height: 100%;
   border-bottom: 4px solid ${getTheme('neutral', '_7')};
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 1ed099de..7dcee03b 100644
--- a/packages/adena-extension/src/router/header/tab-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/tab-menu/index.tsx
@@ -8,7 +8,7 @@ import mixins from '@styles/mixins';
 import { getTheme } from '@styles/theme';
 
 const Container = styled.div`
-  ${mixins.flex('row', 'center', 'space-between')}
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })}
   position: absolute;
   top: 0;
   display: flex;
@@ -23,7 +23,7 @@ const Container = styled.div`
     font-size: 19px;
   }
   .help-btn {
-    ${mixins.flex('row', 'center', 'center')}
+    ${mixins.flex({ direction: 'row' })}
     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 7160cf7a..35fcf930 100644
--- a/packages/adena-extension/src/router/header/top-menu/index.tsx
+++ b/packages/adena-extension/src/router/header/top-menu/index.tsx
@@ -21,7 +21,7 @@ const Wrapper = styled.div`
 `;
 
 const Header = styled.div`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   height: 100%;
   position: relative;
diff --git a/packages/adena-extension/src/router/loading-main.tsx b/packages/adena-extension/src/router/loading-main.tsx
index bed134e0..755a888a 100644
--- a/packages/adena-extension/src/router/loading-main.tsx
+++ b/packages/adena-extension/src/router/loading-main.tsx
@@ -13,7 +13,7 @@ import { getTheme } from '@styles/theme';
 import mixins from '@styles/mixins';
 
 const Wrapper = styled.main`
-  ${mixins.flex('column', 'center', 'stretch')};
+  ${mixins.flex({ justify: 'stretch' })};
   position: absolute;
   width: 100%;
   height: 100%;
@@ -24,19 +24,19 @@ const Wrapper = styled.main`
 `;
 
 const RoundsBox = styled.div`
-  ${mixins.flex('column', 'flex-end', 'center')};
+  ${mixins.flex({ align: 'flex-end' })};
   margin-left: auto;
 `;
 
 const ListBoxWrap = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')}
+  ${mixins.flex({ justify: 'flex-start' })}
   width: 100%;
   gap: 12px;
   margin-top: 31px;
 `;
 
 const SkeletonBox = styled(SkeletonBoxStyle)`
-  ${mixins.flex('row', 'center', 'flex-start')}
+  ${mixins.flex({ direction: 'row', justify: '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 922f9737..56312f9e 100644
--- a/packages/adena-extension/src/router/navigation/index.tsx
+++ b/packages/adena-extension/src/router/navigation/index.tsx
@@ -13,7 +13,7 @@ import mixins from '@styles/mixins';
 const Wrapper = styled.nav`
   width: 100%;
   height: 60px;
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   background-color: ${getTheme('neutral', '_8')};
   filter: drop-shadow(0px -4px 4px rgba(0, 0, 0, 0.25));
   padding: 0px 40px;
diff --git a/packages/adena-extension/src/styles/global-style.ts b/packages/adena-extension/src/styles/global-style.ts
index ed71fa9a..eaa39a2c 100644
--- a/packages/adena-extension/src/styles/global-style.ts
+++ b/packages/adena-extension/src/styles/global-style.ts
@@ -1,5 +1,6 @@
 import { createGlobalStyle } from 'styled-components';
 import { fonts } from './theme';
+import mixins from './mixins';
 
 export const GlobalStyle = createGlobalStyle`
   html, body {
@@ -18,10 +19,10 @@ export const GlobalStyle = createGlobalStyle`
   };
 
   #popup {
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     width: 100%;
     position: relative;
-    display: flex;
-    flex-direction: column;
+    
   };
 
   main {
diff --git a/packages/adena-extension/src/styles/mixins.ts b/packages/adena-extension/src/styles/mixins.ts
index ec93aa80..3904972f 100644
--- a/packages/adena-extension/src/styles/mixins.ts
+++ b/packages/adena-extension/src/styles/mixins.ts
@@ -2,11 +2,16 @@ import { CSSProperties } from 'react';
 import { css, CSSProp } from 'styled-components';
 
 export type MixinsType = {
-  flex: (
-    direction?: CSSProperties['flexDirection'],
-    align?: CSSProperties['alignItems'],
-    justify?: CSSProperties['justifyContent'],
-  ) => CSSProp;
+  /**
+   * @param direction flex-direction, default: column
+   * @param align align-items, default: center
+   * @param justify justify-content, default: center
+   */
+  flex: (props?: {
+    direction?: CSSProperties['flexDirection'];
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+  }) => CSSProp;
   positionCenter: () => CSSProp;
   posTopCenterRight: (right?: string) => CSSProp;
   posTopCenterLeft: (left?: string) => CSSProp;
@@ -14,11 +19,11 @@ export type MixinsType = {
 };
 
 const mixins: MixinsType = {
-  flex: (direction = 'row', align = 'center', justify = 'center') => css`
+  flex: (props) => css`
     display: flex;
-    flex-direction: ${direction};
-    align-items: ${align};
-    justify-content: ${justify};
+    flex-direction: ${props?.direction || 'column'};
+    align-items: ${props?.align || 'center'};
+    justify-content: ${props?.justify || 'center'};
   `,
   positionCenter: () => css`
     position: absolute;