diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index cebbc16..bc0cc61 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -8,6 +8,7 @@ addDecorator(withThemes);
 enum Themes {
   Blue = 'Blue (Polymath)',
   Pink = 'Pink (Polymesh)',
+  Metafinance = 'Metafinance',
 }
 
 const Decorator = ({ themeName, children }) => {
@@ -19,6 +20,9 @@ const Decorator = ({ themeName, children }) => {
     case Themes.Pink:
       currentTheme = polyTheme.pink;
       break;
+      case Themes.Metafinance:
+      currentTheme = polyTheme.metafinance;
+      break;
   }
   return <PolyThemeProvider theme={currentTheme}>{children}</PolyThemeProvider>;
 };
@@ -36,6 +40,10 @@ export const parameters = {
         name: Themes.Pink,
         color: polyTheme.pink.COLOR.brandMain,
       },
+      {
+        name: Themes.Metafinance,
+        color: polyTheme.metafinance.COLOR.brandMain,
+      },
     ],
   },
 };
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index c690686..b398e25 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -25,9 +25,15 @@ const Template: Story<ComponentProps<typeof Checkbox>> = (props: any) => (
 );
 
 export const Basic = Template.bind({});
+export const Disabled = Template.bind({});
 
 Basic.args = {
   name: 'chkbox1',
   label: 'Checkbox label',
   variant: 'basic',
 };
+Disabled.args = {
+  name: 'chkbox2',
+  label: 'Checkbox label',
+  variant: 'basic',
+};
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index e46aacc..688ed86 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -13,6 +13,7 @@ export type CheckboxProps = {
   onChange?: ChangeEventHandler<HTMLInputElement>;
   defaultChecked?: boolean;
   checked?: boolean;
+  disabled?: boolean;
   name?: string;
   label?: React.ComponentType | JSX.Element | string;
   indeterminate?: boolean;
@@ -20,7 +21,7 @@ export type CheckboxProps = {
 
 const Input = styled.input(visuallyHidden);
 
-const CheckStateIcon = styled(Icon)<any>(() => ({
+const CheckStateIcon = styled(Icon)<any>(({ theme, variant, disabled }) => ({
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -31,12 +32,18 @@ const CheckStateIcon = styled(Icon)<any>(() => ({
   pointerEvents: 'none',
   margin: 'auto',
   transition: `150ms`,
+  'svg > *': {
+    ...theme.ICON[variant]['svg > *'],
+    ...(theme.ICON[variant].fill
+      ? { fill: disabled ? `${theme.COLOR.gray4}` : `${theme.COLOR.brandMain}` }
+      : {}),
+  },
 }));
 
-const MinusBoxIcon = styled(Icon)<any>(() => ({
+const MinusBoxIcon = styled(Icon)<any>(({ theme, variant, disabled }) => ({
   position: 'absolute',
-  top: '71%',
-  left: '71%',
+  top: '73%',
+  left: '73%',
   transform: 'translate(-50%, -50%)',
   display: 'block',
   visibility: 'hidden',
@@ -44,58 +51,74 @@ const MinusBoxIcon = styled(Icon)<any>(() => ({
   pointerEvents: 'none',
   margin: 'auto',
   transition: `150ms`,
-}));
-
-const CheckboxInput = styled.div(({ theme }) => ({
-  position: 'relative',
-  cursor: 'pointer',
-  transition: `200ms`,
-  boxSizing: 'border-box',
-  border: `2px solid ${theme.COLOR.gray3}`,
-  borderRadius: theme.RADIUS.s,
-  minWidth: '1.125rem',
-  minHeight: '1.125rem',
-  backgroundColor: '#fff',
-  userSelect: 'none',
-
-  [`${Input}:focus + &`]: {
-    borderColor: theme.COLOR.brandMain,
-  },
-
-  [`${Input}:checked:focus + &`]: {
-    borderColor: theme.COLOR.gray5,
-  },
-
-  [`${Input}:checked + &`]: {
-    backgroundColor: theme.COLOR.gray5,
-    borderColor: theme.COLOR.brandMain,
-  },
-
-  [`${Input}:disabled + &`]: {
-    borderColor: theme.COLOR.gray4,
+  'svg > *': {
+    ...theme.ICON[variant]['svg > *'],
+    ...(theme.ICON[variant].fill
+      ? { fill: disabled ? `${theme.COLOR.gray4}` : `${theme.COLOR.brandMain}` }
+      : {}),
   },
+}));
 
-  [`${Input}:checked + & .checkIcon`]: {
-    visibility: 'visible',
-    opacity: 1,
-  },
+const CheckboxInput = styled.div<{ disabled: boolean }>(
+  ({ theme, disabled }) => ({
+    position: 'relative',
+    cursor: 'pointer',
+    transition: `200ms`,
+    boxSizing: 'border-box',
+    border: '2px solid',
+    borderColor: disabled ? theme.COLOR.gray4 : theme.COLOR.gray3,
+    borderRadius: theme.RADIUS.s,
+    minWidth: '1.125rem',
+    minHeight: '1.125rem',
+    backgroundColor: '#fff',
+    userSelect: 'none',
+    [`${Input}:focus + &`]: {
+      border: '2px solid',
+      borderColor: theme.COLOR.utilityFocus,
+      position: 'relative',
+      padding: disabled ? '0px' : '12px',
+      zIndex: '1',
+    },
 
-  '&.indeterminate': {
-    borderColor: theme.COLOR.brandMain,
+    [`${Input}:checked:focus + &`]: {
+      position: 'relative',
+      border: '2px solid',
+      borderColor: theme.COLOR.utilityFocus,
+      padding: disabled ? '0px' : '12px',
+      '&:after': {
+        border: '0px solid',
+      },
+    },
+    [`${Input}:checked + &`]: {
+      borderColor: theme.COLOR.brandMain,
+    },
 
-    '.minusIcon': {
+    [`${Input}:checked + & .checkIcon`]: {
       visibility: 'visible',
       opacity: 1,
-      background: theme.COLOR.light,
     },
+    [`${Input}:focus + & .minusIcon`]: {
+      visibility: 'visible',
+      top: '60%',
+      left: '60%',
+    },
+
+    '&.indeterminate': {
+      borderColor: theme.COLOR.brandMain,
 
-    '.checkIcon': {
-      visibility: 'hidden',
-      opacity: 0,
-      background: theme.COLOR.light,
+      '.minusIcon': {
+        visibility: 'visible',
+        opacity: 1,
+      },
+
+      '.checkIcon': {
+        visibility: 'hidden',
+        opacity: 0,
+        background: theme.COLOR.light,
+      },
     },
-  },
-}));
+  }),
+);
 
 const LabelComponent = styled.label<{ variant: string; margin?: string }>(
   ({ theme, variant, margin }) => ({
@@ -124,12 +147,12 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       label,
       indeterminate,
       name,
+      disabled,
       ...props
     } = checkboxProps;
 
     const checkedProps =
       typeof checked !== 'undefined' ? { checked } : { defaultChecked };
-
     return (
       <LabelComponent variant={variant} margin={margin}>
         <Flex variant="raw" align="center">
@@ -142,18 +165,21 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
             type="checkbox"
           />
           <CheckboxInput
+            disabled={disabled as boolean}
             {...(indeterminate ? { className: 'indeterminate' } : {})}
           >
             <MinusBoxIcon
               variant="basic"
               size="1.5em"
               icon={polyIcons.MinusBox}
+              disabled={disabled}
               className="minusIcon"
             />
             <CheckStateIcon
               variant="basic"
               size="1.5em"
               icon={polyIcons.CheckboxMarked}
+              disabled={disabled}
               className="checkIcon"
             />
           </CheckboxInput>
diff --git a/src/theme/definitions/metafinance.ts b/src/theme/definitions/metafinance.ts
new file mode 100644
index 0000000..ebcc5ce
--- /dev/null
+++ b/src/theme/definitions/metafinance.ts
@@ -0,0 +1,761 @@
+import { createGlobalStyle } from 'styled-components';
+
+import * as polyIcons from '../icons';
+import { CSSPropertiesExtended, Gap, Shadow, Radius } from '../types';
+import { BoxVariant } from '../../components/Box';
+import { ButtonVariant } from '../../components/Button';
+import { IconVariant } from '../../components/Icon';
+import { TextAs } from '../../components/Text';
+import { BadgeVariant } from '../../components/Badge';
+import { InfoBoxVariant } from '../../components/InfoBox';
+import { DrawerVariant } from '../../components/Drawer';
+
+// Basics
+
+export const BREAKPOINT = {
+  xs: 320,
+  sm: 768,
+  md: 900,
+  lg: 1280,
+  xl: 1920,
+};
+
+export const MEDIA_QUERY = {
+  xs: `@media (max-width: ${BREAKPOINT.xs}px)`,
+  sm: `@media (min-width: ${BREAKPOINT.sm}px)`,
+  md: `@media (min-width: ${BREAKPOINT.md}px)`,
+  lg: `@media (min-width: ${BREAKPOINT.lg}px)`,
+  xl: `@media (min-width: ${BREAKPOINT.xl}px)`,
+};
+
+export const GAP: Record<Gap, string> = {
+  xs: '8px',
+  s: '16px',
+  m: '24px',
+  l: '32px',
+  xl: '40px',
+  xxl: '48px',
+  xxxl: '96px',
+};
+
+export const COLOR = {
+  light: '#FFFFFF',
+  gray1: '#152935',
+  gray2: '#5B6F7E',
+  gray3: '#8C9BA5',
+  gray4: '#D6DDE8',
+  gray5: '#EBF0F7',
+  gray6: '#F8F9FC',
+  gray7: '#F0F0F0',
+  brandBg: '#1A56AF',
+  brandMain: '#1A56AF',
+  brandLighter: '#E1EEFD',
+  brandLight: '#BBD7FB',
+  brandLightest: '#E1EEFD',
+  brandDark: '#124185',
+  brandDarkest: '#002D61',
+  brandDark2: '#002D61',
+  success: '#004A29',
+  success2: '#009F58',
+  success3: '#DFFFF1',
+  warning: '#604D00',
+  warning2: '#EBBC00',
+  warning3: '#FFF9E0',
+  danger: '#A61C2A',
+  danger2: '#DB2C3E',
+  danger3: '#FBE5E7',
+  teal800: '#285E61',
+  teal100: '#E6FFFA',
+  cyan800: '#046C7C',
+  cyan100: '#E6F9FE',
+  indigo800: '#434190',
+  indigo100: '#EBF4FF',
+  orange800: '#B03C02',
+  orange100: '#FFEAE1',
+  purple800: '#553C9A',
+  purple100: '#FAF5FF',
+  plum800: '#4D0198',
+  plum100: '#F2E6FF',
+  pink800: '#97266D',
+  pink100: '#FFEBF1',
+  lime800: '#447803',
+  lime100: '#F1FEE1',
+  utilityFocus: '#5B9EF8',
+  transparent: 'transparent',
+  overlay: 'background: rgba(21, 41, 53, 0.3);',
+  gradient: `linear-gradient(
+    180.63deg,
+    #DCEFFE 0.03%,
+    rgba(220, 239, 254, 0) 79.96%
+  )`,
+};
+
+export const SHADOW: Record<Shadow, string> = {
+  xs: '0px 1px 3px rgba(21, 41, 53, 0.12), 0px 1px 2px rgba(21, 41, 53, 0.24)',
+  s: '0px 2px 4px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(21, 41, 53, 0.12)',
+  m: '0px 10px 20px rgba(21, 41, 53, 0.15), 0px 3px 6px rgba(21, 41, 53, 0.1)',
+  l: '0px 15px 25px rgba(21, 41, 53, 0.15), 0px 5px 10px rgba(21, 41, 53, 0.05)',
+  xl: '0px 20px 40px rgba(21, 41, 53, 0.1)',
+};
+
+export const RADIUS: Record<Radius, string> = {
+  s: '2px',
+  m: '4px',
+  l: '8px',
+  xl: '16px',
+};
+
+export const TYPOGRAPHY: any = {
+  font: "'Inter', sans-serif",
+  h1: {
+    margin: `0 0 ${GAP.l} 0`,
+    lineHeight: '80px',
+    fontWeight: 300,
+    fontSize: '60px',
+    color: COLOR.gray1,
+    letterSpacing: '-1px',
+  },
+  h2: {
+    margin: `0 0 ${GAP.m} 0`,
+    lineHeight: '66px',
+    fontWeight: 400,
+    fontSize: '48px',
+    color: COLOR.gray1,
+    letterSpacing: '-0.5px',
+  },
+  h3: {
+    margin: `0 0 ${GAP.m} 0`,
+    lineHeight: '47px',
+    fontWeight: 500,
+    fontSize: '34px',
+    color: COLOR.gray1,
+    letterSpacing: '-0.25px',
+  },
+  h4: {
+    margin: `0 0 ${GAP.m} 0`,
+    lineHeight: '34px',
+    fontWeight: 500,
+    fontSize: '24px',
+    color: COLOR.gray1,
+  },
+  h5: {
+    margin: `0 0 ${GAP.s} 0`,
+    lineHeight: '29px',
+    fontWeight: 500,
+    fontSize: '20px',
+    color: COLOR.gray1,
+    letterSpacing: '0.15px',
+  },
+  h6: {
+    margin: `0 0 ${GAP.s} 0`,
+    lineHeight: '27px',
+    fontWeight: 400,
+    fontSize: '18px',
+    color: COLOR.gray1,
+  },
+  b1m: {
+    fontWeight: 500,
+    fontSize: '16px',
+    lineHeight: '27px',
+    color: COLOR.gray1,
+  },
+  b1: {
+    fontWeight: 400,
+    fontSize: '16px',
+    lineHeight: '27px',
+    color: COLOR.gray1,
+  },
+  b2m: {
+    fontWeight: 500,
+    fontSize: '14px',
+    lineHeight: '24px',
+    color: COLOR.gray1,
+  },
+  b2: {
+    fontWeight: 400,
+    fontSize: '14px',
+    lineHeight: '24px',
+    color: COLOR.gray1,
+  },
+  b3m: {
+    fontWeight: 500,
+    fontSize: '12px',
+    lineHeight: '19px',
+    color: COLOR.gray1,
+  },
+  b3: {
+    fontWeight: 400,
+    fontSize: '12px',
+    lineHeight: '19px',
+    color: COLOR.gray1,
+  },
+  c1: {
+    fontWeight: 500,
+    fontSize: '14px',
+    lineHeight: '20px',
+    color: COLOR.gray1,
+    letterSpacing: '0.5px',
+  },
+  c2: {
+    fontWeight: 500,
+    fontSize: '12px',
+    lineHeight: '15px',
+    color: COLOR.gray1,
+    letterSpacing: '0.4px',
+  },
+  btn: {
+    fontWeight: 500,
+    fontSize: '14px',
+    lineHeight: '16px',
+    color: COLOR.gray1,
+    letterSpacing: '0.75px',
+  },
+  tn: {
+    fontWeight: 400,
+    fontSize: '14px',
+    lineHeight: '17px',
+    color: COLOR.gray1,
+    letterSpacing: '0.75px',
+  },
+  code: {
+    fontFamily: 'monospace',
+    fontWeight: 400,
+    fontSize: '12px',
+    lineHeight: '19px',
+    color: COLOR.gray1,
+  },
+};
+
+export const ICONS = { ...polyIcons };
+
+// Components
+
+export const ICON: Record<IconVariant, CSSPropertiesExtended> = {
+  basic: {
+    fill: COLOR.brandMain,
+  },
+  circle: {
+    fill: COLOR.brandMain,
+    backgroundColor: COLOR.brandMain,
+    borderRadius: '50%',
+  },
+};
+
+export const BUTTON: Record<ButtonVariant, CSSPropertiesExtended> = {
+  primary: {
+    ...TYPOGRAPHY.btn,
+    display: 'flex',
+    fontFamily: "'Poppins', sans-serif",
+    lineHeight: '24px',
+    color: COLOR.light,
+    background: COLOR.brandMain,
+    border: 0,
+    borderRadius: RADIUS.l,
+    padding: '12px 16px',
+    transition: 'all 0.3s',
+    cursor: 'pointer',
+    '&:hover': {
+      background: COLOR.brandDark,
+    },
+    '&:active': {
+      background: COLOR.brandDarkest,
+    },
+    '&:disabled': {
+      color: COLOR.gray3,
+      background: COLOR.gray5,
+      cursor: 'no-drop',
+    },
+  },
+  secondary: {
+    ...TYPOGRAPHY.btn,
+    display: 'flex',
+    fontFamily: "'Poppins', sans-serif",
+    lineHeight: '24px',
+    color: COLOR.brandMain,
+    background: COLOR.light,
+    border: `1px solid ${COLOR.brandMain}`,
+    borderRadius: RADIUS.l,
+    transition: 'all 0.3s',
+    cursor: 'pointer',
+    '&:hover': {
+      color: COLOR.brandMain,
+      background: COLOR.brandLight,
+    },
+    '&:active': {
+      color: COLOR.brandMain,
+      background: COLOR.brandLightest,
+    },
+    '&:disabled': {
+      border: `2px solid #F0F0F0`,
+      color: COLOR.gray5,
+      background: COLOR.light,
+      cursor: 'no-drop',
+    },
+  },
+  tertiary: {
+    ...TYPOGRAPHY.btn,
+    display: 'flex',
+    fontFamily: "'Poppins', sans-serif",
+    lineHeight: '24px',
+    color: COLOR.gray1,
+    background: 'transparent',
+    border: 0,
+    borderRadius: RADIUS.l,
+    transition: 'all 0.3s',
+    cursor: 'pointer',
+    '&:hover': {
+      background: COLOR.brandLightest,
+    },
+    '&:active': {
+      background: COLOR.brandLight,
+    },
+    '&:disabled': {
+      color: COLOR.gray3,
+      cursor: 'no-drop',
+    },
+  },
+  inline: {
+    display: 'inline',
+    margin: 0,
+    padding: 0,
+    border: 0,
+    borderRadius: 0,
+    lineHeight: 'inherit',
+    fontFamily: "'Poppins', sans-serif",
+    fontWeight: 'inherit',
+    fontSize: 'inherit',
+    letterSpacing: 'inherit',
+    color: 'inherit',
+    background: 'transparent',
+    cursor: 'pointer',
+  },
+  special: {
+    ...TYPOGRAPHY.btn,
+    fontFamily: "'Poppins', sans-serif",
+    fontSize: '14px',
+    color: COLOR.gray1,
+    background: COLOR.light,
+    border: `1px solid ${COLOR.gray1}`,
+    borderRadius: RADIUS.l,
+    padding: '12px 16px',
+    transition: 'all 0.3s',
+    cursor: 'pointer',
+    '&:hover:enabled': {
+      background: COLOR.gray5,
+    },
+    '&:active': {
+      background: COLOR.gray4,
+    },
+    '&:disabled': {
+      color: COLOR.gray3,
+      cursor: 'no-drop',
+    },
+  },
+};
+
+export const BOX: Record<BoxVariant, CSSPropertiesExtended> = {
+  raw: {},
+  basic: {
+    padding: GAP.m,
+    backgroundColor: COLOR.light,
+  },
+  border: {
+    padding: GAP.m,
+    backgroundColor: COLOR.light,
+    border: `1px solid ${COLOR.gray3}`,
+    borderRadius: RADIUS.m,
+  },
+  shadow: {
+    padding: GAP.m,
+    backgroundColor: COLOR.light,
+    borderRadius: RADIUS.m,
+    boxShadow: SHADOW.s,
+  },
+};
+
+export const TEXT: Record<TextAs, CSSPropertiesExtended> = {
+  p: {
+    margin: `0 0 ${GAP.s} 0`,
+    lineHeight: '27px',
+    fontWeight: 'inherit',
+    fontSize: 'inherit',
+    color: COLOR.gray2,
+  },
+  span: {
+    lineHeight: 'inherit',
+    fontWeight: 'inherit',
+    fontSize: 'inherit',
+    color: 'inherit',
+  },
+  label: {
+    lineHeight: 'inherit',
+    fontWeight: 'inherit',
+    fontSize: 'inherit',
+    color: 'inherit',
+  },
+};
+
+export const BADGE: Record<BadgeVariant, CSSPropertiesExtended> = {
+  basic: {
+    ...TYPOGRAPHY.b3m,
+    color: COLOR.brandMain,
+    backgroundColor: COLOR.brandLightest,
+    borderRadius: '100px',
+  },
+  success: {
+    ...TYPOGRAPHY.b3m,
+    color: COLOR.success,
+    backgroundColor: COLOR.success2,
+    borderRadius: '100px',
+  },
+  warning: {
+    ...TYPOGRAPHY.b3m,
+    color: COLOR.danger2,
+    backgroundColor: COLOR.danger3,
+    borderRadius: '100px',
+  },
+  danger: {
+    ...TYPOGRAPHY.b3m,
+    color: COLOR.danger2,
+    backgroundColor: COLOR.danger3,
+    borderRadius: '100px',
+  },
+};
+
+export const INPUT: CSSPropertiesExtended = {
+  ...TYPOGRAPHY.b2,
+  padding: `${GAP.xs} ${GAP.s}`,
+  border: `1px solid ${COLOR.gray3}`,
+  borderRadius: RADIUS.s,
+  transition: 'all 0.3s',
+  backgroundColor: COLOR.light,
+  '&:hover': {
+    borderColor: COLOR.gray2,
+  },
+  '&:focus': {
+    borderColor: COLOR.brandMain,
+  },
+  '&:disabled': {
+    borderColor: COLOR.gray5,
+    backgroundColor: COLOR.light,
+    color: COLOR.gray3,
+    cursor: 'not-allowed',
+  },
+  '&:readOnly': {
+    borderColor: 'transparent',
+    backgroundColor: COLOR.gray5,
+    color: COLOR.gray2,
+    '&:hover': {
+      borderColor: 'transparent',
+    },
+    '&:focus': {
+      borderColor: 'transparent',
+    },
+  },
+  '::placeholder': {
+    color: COLOR.gray3,
+  },
+};
+
+export const DATEPICKER: CSSPropertiesExtended = {
+  padding: GAP.s,
+  backgroundColor: COLOR.light,
+  border: `1px solid ${COLOR.gray4}`,
+  borderRadius: RADIUS.l,
+  boxShadow: SHADOW.m,
+  lineHeight: 'normal',
+  '.DayPicker': {
+    '&-wrapper': {
+      margin: 0,
+      padding: 0,
+    },
+    '&-NavButton': {
+      margin: 0,
+      padding: 0,
+      backgroundImage: 'none',
+      borderStyle: 'solid',
+      borderWidth: '2px 2px 0 0',
+      height: '7px',
+      width: '7px',
+      color: COLOR.gray2,
+      top: '20px',
+      right: '10px',
+      transform: 'rotate(45deg)',
+      '&--prev': {
+        right: '50px',
+        transform: 'rotate(-135deg)',
+      },
+    },
+    '&-Month': {
+      margin: 0,
+    },
+    '&-Caption': {
+      ...TYPOGRAPHY.b3,
+      color: COLOR.gray2,
+      paddingTop: '15px',
+      marginBottom: '20px',
+    },
+    '&-Day': {
+      margin: 0,
+      padding: 0,
+      borderRadius: 0,
+      width: '20px',
+      ...TYPOGRAPHY.b3,
+      color: COLOR.gray1,
+      lineHeight: '30px',
+      '&--selected': {
+        backgroundColor: `${COLOR.brandMain} !important`,
+      },
+      '&--disabled': {
+        color: COLOR.gray4,
+      },
+      '&--outside': {
+        color: COLOR.gray2,
+      },
+    },
+  },
+};
+
+export const PAGE: CSSPropertiesExtended = {
+  padding: '0 124px',
+  maxWidth: '1600px',
+  minHeight: '70vh',
+};
+
+export const SELECT: any = {
+  container: (styles: any) => ({
+    ...styles,
+    minWidth: '112px',
+  }),
+  control: (styles: any, state: any) => ({
+    ...styles,
+    backgroundColor: state.selectProps.readonly ? COLOR.gray5 : COLOR.light,
+    borderRadius: RADIUS.m,
+    ...(state.selectProps.isDisabled
+      ? {
+          borderColor: COLOR.gray5,
+        }
+      : state.selectProps.readonly
+      ? {
+          borderColor: 'transparent',
+        }
+      : {
+          borderColor: COLOR.gray3,
+        }),
+    '&:hover': {
+      borderColor: state.selectProps.readonly ? 'transparent' : COLOR.gray2,
+    },
+    ...(state.isFocused
+      ? {
+          borderColor: COLOR.brandMain,
+          '&:hover': {
+            borderColor: COLOR.brandMain,
+          },
+        }
+      : {}),
+    cursor: state.selectProps.readonly ? 'not-allowed' : 'pointer',
+  }),
+  option: (styles: any, state: any) => ({
+    ...styles,
+    padding: '8px 9px',
+    ...TYPOGRAPHY.b2,
+    color: COLOR.gray1,
+    ...(state.isSelected
+      ? {
+          color: COLOR.gray1,
+          backgroundColor: COLOR.gray5,
+        }
+      : {}),
+    '&:hover': {
+      color: COLOR.gray1,
+      backgroundColor: COLOR.gray6,
+    },
+    cursor: 'pointer',
+  }),
+  valueContainer: (styles: any) => ({
+    ...styles,
+    ...TYPOGRAPHY.b2,
+  }),
+  placeholder: (styles: any) => ({
+    ...styles,
+    ...TYPOGRAPHY.b2,
+    color: COLOR.gray3,
+  }),
+  menu: (styles: any) => ({
+    ...styles,
+    backgroundColor: COLOR.light,
+    boxShadow: SHADOW.s,
+  }),
+  menuList: (styles: any) => ({
+    ...styles,
+    padding: '0px',
+  }),
+  menuPortal: (styles: any) => ({
+    ...styles,
+    zIndex: 1000,
+  }),
+};
+
+const tooltipArrowSize = 8;
+export const TOOLTIP = createGlobalStyle`
+  .tippy-box {
+    padding: 4px ${GAP.s};
+    color: ${COLOR.light};
+    background-color: ${COLOR.gray1};
+    box-shadow: ${SHADOW.xs};
+    border-radius: ${RADIUS.s};
+    z-index: 1;
+  }
+  .tippy-box[data-placement^="top"] > .tippy-arrow {
+      bottom: 0;
+  }
+  .tippy-box[data-placement^="top"] > .tippy-arrow::before {
+      bottom: -7px;
+      left: 0;
+      border-width: ${tooltipArrowSize}px ${tooltipArrowSize}px 0;
+      border-top-color: initial;
+      transform-origin: center top;
+  }
+  .tippy-box[data-placement^="bottom"] > .tippy-arrow {
+      top: 0;
+  }
+  .tippy-box[data-placement^="bottom"] > .tippy-arrow::before {
+      top: -7px;
+      left: 0;
+      border-width: 0 ${tooltipArrowSize}px ${tooltipArrowSize}px;
+      border-bottom-color: initial;
+      transform-origin: center bottom;
+  }
+  .tippy-box[data-placement^="left"] > .tippy-arrow {
+      right: 0;
+  }
+  .tippy-box[data-placement^="left"] > .tippy-arrow::before {
+      border-width: ${tooltipArrowSize}px 0 ${tooltipArrowSize}px ${tooltipArrowSize}px;
+      border-left-color: initial;
+      right: -7px;
+      transform-origin: center left;
+  }
+  .tippy-box[data-placement^="right"] > .tippy-arrow {
+      left: 0;
+  }
+  .tippy-box[data-placement^="right"] > .tippy-arrow::before {
+      left: -7px;
+      border-width: ${tooltipArrowSize}px ${tooltipArrowSize}px ${tooltipArrowSize}px 0;
+      border-right-color: initial;
+      transform-origin: center right;
+  }
+  .tippy-box[data-inertia][data-state="visible"] {
+      transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+  }
+  .tippy-arrow {
+      width: ${tooltipArrowSize * 2}px;
+      height: ${tooltipArrowSize * 2}px;
+      color: ${COLOR.gray1};
+  }
+  .tippy-arrow::before {
+      content: "";
+      position: absolute;
+      border-color: transparent;
+      border-style: solid;
+  }
+`;
+
+export const INFOBOX: Record<InfoBoxVariant, CSSPropertiesExtended> = {
+  basic: {
+    minWidth: '240px',
+    display: 'inline-block',
+    padding: GAP.s,
+    border: `2px solid #F0F0F0`,
+    sizing: 'border-box',
+    borderRadius: RADIUS.l,
+    fontSize: '14px',
+    fontWeight: 400,
+    a: { color: COLOR.brandMain },
+  },
+  compact: {
+    minWidth: '240px',
+    display: 'inline-block',
+    padding: `0 ${GAP.xs}`,
+    borderLeft: `2px solid ${COLOR.brandMain}`,
+    fontSize: '14px',
+    fontWeight: 400,
+    a: { color: COLOR.brandMain },
+  },
+};
+
+export const DRAWER: Record<DrawerVariant, CSSPropertiesExtended> = {
+  basic: {
+    margin: 0,
+    padding: GAP.l,
+    width: 500,
+    backgroundColor: COLOR.light,
+    boxShadow: SHADOW.xl,
+    transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1)',
+  },
+  raw: {
+    margin: 0,
+    padding: GAP.l,
+    width: 500,
+    transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1)',
+  },
+};
+
+export const CHECKBOX: CSSPropertiesExtended = {
+  basic: {
+    color: COLOR.gray1,
+    fontSize: '16px',
+
+    // the icon color manipulation
+    svg: {
+      path: {
+        fill: `${COLOR.brandMain} !important`,
+      },
+    },
+  },
+  labelMargin: {
+    margin: '-2px 0 0 10px',
+  },
+};
+
+export const COLLAPSABLE: Record<BoxVariant & any, CSSPropertiesExtended> = {
+  iconVariants: {
+    default: {
+      iconColor: {
+        open: 'brandMain',
+        closed: 'gray.3',
+      },
+      bgColor: {
+        open: 'brandLightest',
+        closed: 'gray.4',
+      },
+    },
+    transparent: {
+      iconColor: {
+        open: 'brandMain',
+        closed: 'gray.3',
+      },
+      bgColor: {
+        open: 'transparent',
+        closed: 'transparent',
+      },
+    },
+  },
+  iconColor: {
+    isOpen: 'brandMain',
+    notOpen: 'gray.3',
+  },
+  iconBgColor: {
+    isOpen: 'brandLightest',
+    notOpen: 'gray.4',
+  },
+  basic: {
+    color: COLOR.gray1,
+    fontSize: '16px',
+    // the icon color manipulation
+    // svg: {
+    //   path: {
+    //     fill: 'red !important',
+    //   },
+    // },
+  },
+};
diff --git a/src/theme/icons/svg/checkbox-marked-gray-box.svg b/src/theme/icons/svg/checkbox-marked-gray-box.svg
new file mode 100644
index 0000000..7834216
--- /dev/null
+++ b/src/theme/icons/svg/checkbox-marked-gray-box.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 14.5L2 9.5L3.41 8.08L7 11.67L14.59 4.08L16 5.5L7 14.5ZM16 0.5H2C0.89 0.5 0 1.39 0 2.5V16.5C0 17.0304 0.210714 17.5391 0.585786 17.9142C0.960859 18.2893 1.46957 18.5 2 18.5H16C16.5304 18.5 17.0391 18.2893 17.4142 17.9142C17.7893 17.5391 18 17.0304 18 16.5V2.5C18 1.39 17.1 0.5 16 0.5Z" fill="#D6DDE8"/>
+</svg>