diff --git a/src/storybook/design/Actions.mdx b/src/storybook/design/Actions.mdx
index 6b33e82..7b9f5d3 100644
--- a/src/storybook/design/Actions.mdx
+++ b/src/storybook/design/Actions.mdx
@@ -53,12 +53,7 @@ export const ActionsPalette = () => {
         <ActionItem name="disabled"/>
         <ActionItem name="hover"/>
         <ActionItem name="focus"/>
-        <ColorItem
-          title="selected"
-          colors={{
-            "": alpha(palette.action.selected, palette.action.selectedOpacity),
-          }}
-        />
+        <ActionItem name="selected"/>
       </ColorPalette>
     </ThemeContainer>
   )
diff --git a/src/storybook/design/Shadows.mdx b/src/storybook/design/Shadows.mdx
index ccbda6f..754759d 100644
--- a/src/storybook/design/Shadows.mdx
+++ b/src/storybook/design/Shadows.mdx
@@ -28,7 +28,7 @@ export const Shadows = () => {
                     Display
                 </Typography>
             </Grid>
-            {Object.keys(theme.shadows).map((index) => (
+            {Object.keys(theme.shadows.slice(0, 5)).map((index) => (
                 <>
                     <Grid item xs={3}>
                         <Typography variant="subtitle1">
diff --git a/src/theme/design-tokens/index.ts b/src/theme/design-tokens/index.ts
index f3bf734..6208e45 100644
--- a/src/theme/design-tokens/index.ts
+++ b/src/theme/design-tokens/index.ts
@@ -1,4 +1,4 @@
-import { light } from '@src/theme/design-tokens/palette'
+import { sb_base_200 } from '@src/theme/design-tokens/palette'
 
 export * from './palette'
 export * from './typography'
@@ -9,14 +9,14 @@ export const sb_avatar_small = `26px`
 export const sb_avatar_normal = `32px`
 export const sb_avatar_large = `46px`
 //Datepicker variables
-export const light_border = `1px solid ${light}`
+export const light_border = `1px solid ${sb_base_200}`
 //Box-shadow
 export const box_shadow_default = `0 2px 17px 3px rgba(34, 42, 69, 0.07)`
 //Transition
 export const base_transition_duration = '0.1s'
 export const base_transition_easing = 'ease-in-out'
 export const base_transition = `all ${base_transition_duration} ${base_transition_easing}`
-export const base_border_radius = 5
+export const base_border_radius = 8
 
 // Icon Sizes
 export const icon_small_size = '1.6rem'
diff --git a/src/theme/design-tokens/palette.ts b/src/theme/design-tokens/palette.ts
index 0b3386e..98d61c9 100644
--- a/src/theme/design-tokens/palette.ts
+++ b/src/theme/design-tokens/palette.ts
@@ -1,60 +1,122 @@
-// teal
-export const sb_green = '#00b3b0'
-export const sb_green_75 = '#40c6c4'
-export const sb_green_50 = '#7fd9d7'
-export const sb_green_25 = '#d9f4f3'
-
-// Ink
-export const sb_dark_blue = '#1b243f'
-export const sb_dark_blue_75 = '#545b6f'
-export const sb_dark_blue_50 = '#8d919f'
-export const sb_dark_blue_25 = '#c6c8cf'
-
-// green
-export const green = '#2db47d'
-export const green_75 = '#62c79e'
-export const green_50 = '#96d9be'
-export const green_25 = '#caecde'
-export const green_disabled = '#004e4c'
-// yellow
-export const yellow = '#fbce41'
-export const yellow_75 = '#fcdb71'
-export const yellow_50 = '#fde6a0'
-export const yellow_25 = '#fef3cf'
-
-// blue
-export const blue = '#395ece'
-export const blue_75 = '#6b87db'
-export const blue_50 = '#9caee6'
-export const blue_25 = '#cdd7f3'
-
-// orange
-export const orange = '#ffac00'
-export const orange_75 = '#ffc140'
-export const orange_50 = '#ffd57f'
-export const orange_25 = '#ffeabf'
-
-// red
-export const red = '#ff6159'
-export const red_75 = '#ff8983'
-export const red_50 = '#ffb0ac'
-export const red_25 = '#ffd7d5'
-
-// light
-export const light = '#dfe3e8'
-export const light_75 = '#e7eaee'
-export const light_50 = '#eff1f3'
-export const light_25 = '#f7f8f9'
-export const light_gray = '#b1b5be'
-
-export const black = '#101525'
-export const white = '#fff'
-export const black_trasparent = 'rgba($sb-dark-blue, 0.2)'
-
-export const color_primary = sb_green
-export const color_primary_dark = sb_dark_blue
-export const color_secondary = green
-export const color_positive = green
-export const color_negative = red
-export const color_warning = orange
-export const color_white = white
+// primary
+export const sb_primary_50 = '#d5fcfa'
+export const sb_primary_100 = '#b5ece9'
+export const sb_primary_200 = '#9ae6e2'
+export const sb_primary_300 = '#72dfda'
+export const sb_primary_400 = '#37dcd3'
+export const sb_primary_500 = '#04c8c0'
+export const sb_primary_600 = '#00b3b0'
+export const sb_primary_700 = '#05807f'
+export const sb_primary_800 = '#0a6465'
+export const sb_primary_900 = '#0a6465'
+export const sb_primary_950 = '#003033'
+export const sb_primary = sb_primary_700
+
+// secondary
+export const sb_secondary_50 = '#f7f9fc'
+export const sb_secondary_100 = '#dde3ee'
+export const sb_secondary_200 = '#b5c0e2'
+export const sb_secondary_300 = '#9eaacf'
+export const sb_secondary_400 = '#9eaacf'
+export const sb_secondary_500 = '#8794bc'
+export const sb_secondary_600 = '#5f6e9a'
+export const sb_secondary_700 = '#495781'
+export const sb_secondary_800 = '#424d6d'
+export const sb_secondary_900 = '#293455'
+export const sb_secondary_950 = '#1b243f'
+export const sb_secondary = sb_secondary_950
+
+// base
+export const sb_base_50 = '#f6f7f8'
+export const sb_base_100 = '#ebecee'
+export const sb_base_200 = '#dbdde2'
+export const sb_base_300 = '#c3c7cd'
+export const sb_base_400 = '#b1b5be'
+export const sb_base_500 = '#8f93a2'
+export const sb_base_600 = '#717384'
+export const sb_base_700 = '#5f616e'
+export const sb_base_800 = '#4f5059'
+export const sb_base_900 = '#333338'
+export const sb_base_950 = '#242429'
+
+// info
+export const sb_info_50 = '#f1f5fd'
+export const sb_info_100 = '#e0e9f9'
+export const sb_info_200 = '#c8d9f5'
+export const sb_info_300 = '#a2c1ee'
+export const sb_info_400 = '#75a0e5'
+export const sb_info_500 = '#557fdc'
+export const sb_info_600 = '#395ece'
+export const sb_info_700 = '#3751be'
+export const sb_info_800 = '#32449b'
+export const sb_info_900 = '#2d3c7b'
+export const sb_info_950 = '#1b243f'
+export const sb_info = sb_info_800
+
+// success
+export const sb_success_50 = '#eefbf4'
+export const sb_success_100 = '#d7f4e3'
+export const sb_success_200 = '#b2e8cb'
+export const sb_success_300 = '#7fd6ac'
+export const sb_success_400 = '#4bbc8a'
+export const sb_success_500 = '#2db47d'
+export const sb_success_600 = '#1a8159'
+export const sb_success_700 = '#15674a'
+export const sb_success_800 = '#13523b'
+export const sb_success_900 = '#104432'
+export const sb_success_950 = '#08261d'
+export const sb_success = sb_success_500
+
+// warning
+export const sb_warning_50 = '#fff4d5'
+export const sb_warning_100 = '#ffe6aa'
+export const sb_warning_200 = '#fcd867'
+export const sb_warning_300 = '#fbce41'
+export const sb_warning_400 = '#fabd25'
+export const sb_warning_500 = '#f49c0c'
+export const sb_warning_600 = '#d87507'
+export const sb_warning_700 = '#b3520a'
+export const sb_warning_800 = '#913f0f'
+export const sb_warning_900 = '#78340f'
+export const sb_warning_950 = '#451903'
+export const sb_warning = sb_warning_400
+
+// danger
+export const sb_danger_50 = '#fff2f1'
+export const sb_danger_100 = '#ffe2e1'
+export const sb_danger_200 = '#ffcac7'
+export const sb_danger_300 = '#ffa5a0'
+export const sb_danger_400 = '#ff6159'
+export const sb_danger_500 = '#f83c3b'
+export const sb_danger_600 = '#e5271d'
+export const sb_danger_700 = '#c11c14'
+export const sb_danger_800 = '#a01b14'
+export const sb_danger_900 = '#841d18'
+export const sb_danger_950 = '#480a07'
+export const sb_danger = sb_danger_700
+
+// neutral
+export const sb_neutral_black = '#000'
+export const sb_neutral_white = '#fff'
+
+// overlay
+export const sb_overlay_primary_subtle = 'rgba(27, 36, 63, 0.0800)'
+export const sb_overlay_primary = 'rgba(27, 36, 63, 0.1400)'
+export const sb_overlay_primary_bold = 'rgba(27, 36, 63, 0.5000)'
+export const sb_overlay_secondary_subtle = 'rgba(246, 247, 248, 0.0800)'
+export const sb_overlay_secondary = 'rgba(246, 247, 248, 0.1400)'
+export const sb_overlay_secondary_bold = 'rgba(246, 247, 248, 0.5000)'
+export const sb_overlay_darkness = 'rgba(0, 0, 0, 0.1400)'
+
+// highlight
+export const sb_highlight_50 = '#fbf8fc'
+export const sb_highlight_100 = '#f5eef9'
+export const sb_highlight_200 = '#e2d6fe'
+export const sb_highlight_300 = '#cbb5fd'
+export const sb_highlight_400 = '#ad8bfa'
+export const sb_highlight_500 = '#8b5cf6'
+export const sb_highlight_600 = '#713aed'
+export const sb_highlight_700 = '#5e28d9'
+export const sb_highlight_800 = '#4e21b6'
+export const sb_highlight_900 = '#421d95'
+export const sb_highlight_950 = '#2a1065'
diff --git a/src/theme/design-tokens/typography.ts b/src/theme/design-tokens/typography.ts
index e8a0285..4d5d2ac 100644
--- a/src/theme/design-tokens/typography.ts
+++ b/src/theme/design-tokens/typography.ts
@@ -1,7 +1,7 @@
-import { sb_dark_blue } from '@src/theme/design-tokens/palette'
+import { sb_info_950 } from '@src/theme/design-tokens/palette'
 
 export const primary_font_family = "'Roboto', sans-serif"
-export const primary_text_color = sb_dark_blue
+export const primary_text_color = sb_info_950
 export const font_size_default = '1.6rem'
 export const line_height_default = 1
 
diff --git a/src/theme/light-theme.tsx b/src/theme/light-theme.tsx
index 828d3cf..936ba65 100644
--- a/src/theme/light-theme.tsx
+++ b/src/theme/light-theme.tsx
@@ -2,13 +2,6 @@ import {
   activatedOpacity,
   backgroundOpacity,
   base_border_radius,
-  black,
-  blue,
-  color_negative,
-  color_positive,
-  color_primary,
-  color_primary_dark,
-  color_warning,
   disabledOpacity,
   focusOpacity,
   font_12,
@@ -26,14 +19,28 @@ import {
   heading_xl,
   heading_xs,
   hoverOpacity,
-  light,
-  light_25,
-  light_50,
-  sb_dark_blue,
-  sb_dark_blue_25,
-  sb_dark_blue_50,
   selectedOpacity,
-  white,
+  sb_neutral_black,
+  sb_neutral_white,
+  sb_primary,
+  sb_secondary,
+  sb_secondary_50,
+  sb_info,
+  sb_info_950,
+  sb_success,
+  sb_danger,
+  sb_warning,
+  sb_base_50,
+  sb_base_100,
+  sb_base_200,
+  sb_base_300,
+  sb_base_400,
+  sb_base_500,
+  sb_base_600,
+  sb_base_700,
+  sb_base_800,
+  sb_base_900,
+  sb_overlay_secondary,
 } from '@src/theme/design-tokens'
 import { alpha, createTheme, Theme, ThemeOptions } from '@mui/material'
 import { ShapeOptions } from '@mui/system'
@@ -55,15 +62,11 @@ import {
 
 const shadows = [
   'none',
-  ...new Array(24)
-    .fill(0)
-    .map((_, i) => i + 1)
-    .map((i) => [0, i / 12, i, i / 4])
-    .map((v) => v.map(Math.ceil))
-    .map(
-      (v) =>
-        `${v[0]}px ${v[1]}px ${v[2]}px ${v[3]}px ${alpha(sb_dark_blue, 0.07)}`,
-    ),
+  '0px 4px 8px 0px rgba(27, 36, 63, 0.08)',
+  '0px 8px 24px 0px rgba(27, 36, 63, 0.08)',
+  '0px 16px 32px 0px rgba(27, 36, 63, 0.08)',
+  '0px 16px 48px 0px rgba(27, 36, 63, 0.08)',
+  ...Array(20).fill('none'),
 ] as Theme['shadows']
 
 const spacing = (factor?: number) => Math.floor(factor ?? 1) * 4
@@ -71,68 +74,67 @@ const spacing = (factor?: number) => Math.floor(factor ?? 1) * 4
 const palette = {
   mode: 'light',
   primary: {
-    main: color_primary,
-    contrastText: white,
+    main: sb_primary,
+    contrastText: sb_neutral_white,
   },
   secondary: {
-    // main: color_secondary,
-    main: color_primary_dark,
-    contrastText: white,
+    main: sb_secondary,
+    contrastText: sb_neutral_white,
   },
   success: {
-    main: color_positive,
-    contrastText: white,
+    main: sb_success,
+    contrastText: sb_neutral_white,
   },
   info: {
-    main: blue,
-    contrastText: white,
+    main: sb_info,
+    contrastText: sb_neutral_white,
   },
   warning: {
-    main: color_warning,
-    contrastText: white,
+    main: sb_warning,
+    contrastText: sb_neutral_black,
   },
   error: {
-    main: color_negative,
-    contrastText: white,
+    main: sb_danger,
+    contrastText: sb_neutral_white,
   },
   background: {
-    default: white,
-    paper: white,
+    default: sb_neutral_white,
+    paper: sb_neutral_white,
   },
   common: {
-    white: white,
-    black: black,
+    white: sb_neutral_white,
+    black: sb_neutral_black,
   },
   text: {
-    primary: sb_dark_blue,
-    secondary: sb_dark_blue_50,
-    disabled: light_50,
+    primary: sb_info_950,
+    secondary: sb_base_700,
+    disabled: sb_base_500,
   },
-  divider: light,
+  divider: sb_base_200,
   action: {
-    focus: light_50, // background-color
+    focus: sb_base_500, // background-color
     focusOpacity: focusOpacity,
-    active: sb_dark_blue_50,
+    active: sb_base_700,
     activatedOpacity: activatedOpacity,
-    disabled: sb_dark_blue_25,
-    disabledBackground: light_25,
+    disabled: sb_secondary_50,
+    disabledBackground: sb_overlay_secondary,
     disabledOpacity: disabledOpacity,
-    hover: light_25, // background-color
+    hover: sb_secondary_50, // background-color
     hoverOpacity: hoverOpacity,
-    selected: light_50, // color
+    selected: sb_base_500, // color
     selectedOpacity: selectedOpacity,
   },
   grey: {
-    '50': '#f7f8f9',
-    '100': '#ECF0FF',
-    '200': '#E2E6F5',
-    '300': '#D1D5E4',
-    '400': '#ADB1C0',
-    '500': '#8d919f',
-    '600': '#656976',
-    '700': '#525662',
-    '800': '#343743',
-    '900': '#141822',
+    '50': sb_base_50,
+    '100': sb_base_100,
+    '200': sb_base_200,
+    '300': sb_base_300,
+    '400': sb_base_400,
+    '500': sb_base_500,
+    '600': sb_base_600,
+    '700': sb_base_700,
+    '800': sb_base_800,
+    '900': sb_base_900,
   },
 } as const
 
@@ -179,7 +181,7 @@ const typography: ThemeOptions['typography'] = {
     fontWeight: font_weight_regular,
   },
   button: {
-    fontSize: font_16,
+    fontSize: font_14,
     fontWeight: font_weight_medium,
     textTransform: 'inherit',
     lineHeight: 'normal',
@@ -233,7 +235,6 @@ const lightTheme = createTheme({
       styleOverrides: {
         '&:not(pre)>code': {
           fontFamily: `ui-monospace,Menlo,Monaco,"Roboto Mono","Oxygen Mono","Ubuntu Monospace","Source Code Pro","Droid Sans Mono","Courier New",monospace`,
-          color: sb_dark_blue,
           backgroundColor: palette.grey['50'],
           borderRadius: shape.borderRadius,
           padding: '3px 5px',
@@ -380,7 +381,7 @@ const lightTheme = createTheme({
     MuiLink: {
       styleOverrides: {
         root: {
-          color: color_primary,
+          color: sb_primary,
         },
       },
     },
@@ -397,18 +398,21 @@ const lightTheme = createTheme({
       styleOverrides: {
         sizeSmall: {
           fontSize: font_14,
-          padding: `8px 16px`,
+          padding: '0 16px',
+          height: '36px',
         },
         sizeMedium: {
-          fontSize: font_16,
-          padding: `12px 28px`,
+          fontSize: font_14,
+          padding: '0 24px',
+          height: '44px',
         },
         sizeLarge: {
           fontSize: font_16,
-          padding: `20px 43px`,
+          padding: '0 32px',
+          height: '52px',
         },
         containedInherit: {
-          backgroundColor: light_25,
+          backgroundColor: sb_overlay_secondary,
         },
         outlinedInherit: {
           borderColor: palette.divider,
@@ -664,14 +668,16 @@ const lightTheme = createTheme({
       styleOverrides: {
         root: {
           '&.Mui-selected': {
-            backgroundColor: alpha(
-              sb_dark_blue,
-              palette.action.selectedOpacity,
-            ),
+            backgroundColor: 'transparent',
+            color: palette.primary.main,
+            fontWeight: font_weight_bold,
             '&:hover': {
-              backgroundColor: alpha(sb_dark_blue, palette.action.hoverOpacity),
+              backgroundColor: sb_secondary_50,
             },
           },
+          '&:hover': {
+            backgroundColor: sb_secondary_50,
+          },
         },
       },
     },
@@ -679,22 +685,28 @@ const lightTheme = createTheme({
       styleOverrides: {
         root: {
           '&.Mui-selected': {
-            backgroundColor: alpha(
-              sb_dark_blue,
-              palette.action.selectedOpacity,
-            ),
+            backgroundColor: sb_secondary_50,
             '&:hover': {
-              backgroundColor: alpha(sb_dark_blue, palette.action.hoverOpacity),
+              backgroundColor: sb_base_100,
             },
           },
+          '&:hover': {
+            backgroundColor: sb_secondary_50,
+          },
         },
       },
     },
     MuiListItemButton: {
       styleOverrides: {
         root: {
+          '&.Mui-selected': {
+            backgroundColor: sb_secondary_50,
+            '&:hover': {
+              backgroundColor: sb_base_100,
+            },
+          },
           '&:hover': {
-            backgroundColor: alpha(sb_dark_blue, palette.action.hoverOpacity),
+            backgroundColor: sb_secondary_50,
           },
         },
       },
@@ -702,7 +714,7 @@ const lightTheme = createTheme({
     MuiBackdrop: {
       styleOverrides: {
         root: {
-          backgroundColor: alpha(sb_dark_blue, 0.2),
+          backgroundColor: alpha(sb_info_950, 0.2),
         },
         invisible: {
           opacity: 0,