diff --git a/apps/main/src/llamalend/features/bands-chart/hooks/useBandsChartPalette.ts b/apps/main/src/llamalend/features/bands-chart/hooks/useBandsChartPalette.ts
index d7638c0756..ebb51d2ded 100644
--- a/apps/main/src/llamalend/features/bands-chart/hooks/useBandsChartPalette.ts
+++ b/apps/main/src/llamalend/features/bands-chart/hooks/useBandsChartPalette.ts
@@ -24,7 +24,9 @@ export const useBandsChartPalette = (): BandsChartPalette => {
       borderColor: theme.design.Layer[1].Outline,
       userRangeHighlightColor: theme.design.Chart.LiquidationZone.Current,
       userRangeTopLabelBackgroundColor: theme.design.Chart.Candles.Negative,
+      userRangeTopLabelTextColor: theme.design.Text.TextColors.FilledFeedback.Alert.Primary,
       userRangeBottomLabelBackgroundColor: theme.design.Chart.Lines.Line2,
+      userRangeBottomLabelTextColor: theme.design.Text.TextColors.FilledFeedback.Warning.Primary,
       oraclePriceLineColor: theme.design.Color.Primary[500],
       liquidationBandOutlineColor: theme.design.Color.Tertiary[600],
       zoomTrackBackgroundColor: theme.design.Color.Primary[200],
diff --git a/apps/main/src/llamalend/features/bands-chart/markLines.ts b/apps/main/src/llamalend/features/bands-chart/markLines.ts
index e64095e469..3496d57091 100644
--- a/apps/main/src/llamalend/features/bands-chart/markLines.ts
+++ b/apps/main/src/llamalend/features/bands-chart/markLines.ts
@@ -74,8 +74,8 @@ export const createLabelStyle = (lineStyle: { color: string }, palette: BandsCha
         : palette.userRangeBottomLabelBackgroundColor,
   color:
     lineStyle.color === palette.oraclePriceLineColor || lineStyle.color === palette.userRangeTopLabelBackgroundColor
-      ? palette.textColorInverted
-      : palette.textColor,
+      ? palette.userRangeTopLabelTextColor
+      : palette.userRangeBottomLabelTextColor,
 })
 
 /**
diff --git a/apps/main/src/llamalend/features/bands-chart/types.ts b/apps/main/src/llamalend/features/bands-chart/types.ts
index 8adea3adba..a2e5eb6520 100644
--- a/apps/main/src/llamalend/features/bands-chart/types.ts
+++ b/apps/main/src/llamalend/features/bands-chart/types.ts
@@ -32,7 +32,9 @@ export type BandsChartPalette = {
   borderColor: string
   userRangeHighlightColor: string
   userRangeTopLabelBackgroundColor: string
+  userRangeTopLabelTextColor: string
   userRangeBottomLabelBackgroundColor: string
+  userRangeBottomLabelTextColor: string
   oraclePriceLineColor: string
   liquidationBandOutlineColor: string
   zoomTrackBackgroundColor: string
diff --git a/packages/curve-ui-kit/src/shared/ui/Tooltip.tsx b/packages/curve-ui-kit/src/shared/ui/Tooltip.tsx
index ae3cc3a6f1..4009eaab6c 100644
--- a/packages/curve-ui-kit/src/shared/ui/Tooltip.tsx
+++ b/packages/curve-ui-kit/src/shared/ui/Tooltip.tsx
@@ -20,7 +20,7 @@ export const TooltipContent = ({ title, children }: { title: ReactNode; children
   // cancel any theme inversion as it's often applied on hover
   <InvertTheme inverted={false}>
     <Box
-      sx={{ padding: Spacing.md, backgroundColor: (t) => t.design.Layer[3].Fill, width: '100%' }}
+      sx={{ padding: Spacing.md, backgroundColor: (t) => t.design.Layer[1].Fill, width: '100%' }}
       onClick={(e) => e.stopPropagation()} // prevent changing pages when clicking on the tooltip
     >
       <Typography variant="bodyMBold" color="textPrimary" component="div">
diff --git a/packages/curve-ui-kit/src/themes/basic-theme/basic-theme.ts b/packages/curve-ui-kit/src/themes/basic-theme/basic-theme.ts
index 8f4678c7be..fa210d0bc2 100644
--- a/packages/curve-ui-kit/src/themes/basic-theme/basic-theme.ts
+++ b/packages/curve-ui-kit/src/themes/basic-theme/basic-theme.ts
@@ -17,7 +17,18 @@ export const basicMuiTheme = createMuiTheme({
     },
     unit: 'px',
   },
-  spacing: Object.values(Spacing),
+  spacing: [
+    Spacing[0],
+    Spacing[100],
+    Spacing[200],
+    Spacing[300],
+    Spacing[350],
+    Spacing[400],
+    Spacing[500],
+    Spacing[600],
+    Spacing[700],
+    Spacing[800],
+  ],
   direction: 'ltr',
   zIndex: {
     tableStickyColumn: 100, // the sticky column in the table
diff --git a/packages/curve-ui-kit/src/themes/components/index.ts b/packages/curve-ui-kit/src/themes/components/index.ts
index d29e83cda6..5fc7ddf911 100644
--- a/packages/curve-ui-kit/src/themes/components/index.ts
+++ b/packages/curve-ui-kit/src/themes/components/index.ts
@@ -144,7 +144,7 @@ export const createComponents = (
     },
     styleOverrides: {
       paper: {
-        backgroundColor: design.Layer[3].Fill,
+        backgroundColor: design.Layer[2].Fill,
         '& .MuiMenu-list': {
           maxHeight: SizesAndSpaces.MaxHeight.popover,
         },
diff --git a/packages/curve-ui-kit/src/themes/components/mui-input-base.ts b/packages/curve-ui-kit/src/themes/components/mui-input-base.ts
index 9070864b31..15a7b78068 100644
--- a/packages/curve-ui-kit/src/themes/components/mui-input-base.ts
+++ b/packages/curve-ui-kit/src/themes/components/mui-input-base.ts
@@ -14,7 +14,7 @@ export const defineMuiInputBase = (
 ): Components['MuiInputBase'] => ({
   styleOverrides: {
     root: {
-      backgroundColor: Base.Default.Fill,
+      backgroundColor: Base.Default.Fill.Default,
       // color the whole input base when accepting autofill suggestions in Chromium browsers
       ':has(input:autofill)': {
         backgroundColor: 'light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4))',
diff --git a/packages/curve-ui-kit/src/themes/components/tabs/mui-tabs.ts b/packages/curve-ui-kit/src/themes/components/tabs/mui-tabs.ts
index ad7f74f5d4..1f60817814 100644
--- a/packages/curve-ui-kit/src/themes/components/tabs/mui-tabs.ts
+++ b/packages/curve-ui-kit/src/themes/components/tabs/mui-tabs.ts
@@ -82,7 +82,7 @@ const tabStyle = ({ Label, Fill, Outline }: TabStyle, inset?: string) => ({
   color: Label,
   backgroundColor: Fill,
   '::after': {
-    backgroundColor: Outline ?? 'transparant',
+    backgroundColor: Outline ?? 'transparent',
     inset,
   },
 })
diff --git a/packages/curve-ui-kit/src/themes/design/0_primitives.ts b/packages/curve-ui-kit/src/themes/design/0_primitives.ts
index 7573c85fbd..1db05295b8 100644
--- a/packages/curve-ui-kit/src/themes/design/0_primitives.ts
+++ b/packages/curve-ui-kit/src/themes/design/0_primitives.ts
@@ -54,20 +54,6 @@ export const Blues = {
   '950': '#171e55',
 } as const
 
-export const Yellows = {
-  '50': '#fff9e6',
-  '100': '#fff9f0',
-  '200': '#fff1db',
-  '300': '#ffe6bd',
-  '400': '#ffd88b',
-  '500': '#ffc300',
-  '600': '#e0ab00',
-  '700': '#c19300',
-  '800': '#a37c0c',
-  '900': '#84671d',
-  '950': '#665223',
-} as const
-
 export const Oranges = {
   '50': '#f0ddd1',
   '100': '#f3cfb9',
@@ -82,6 +68,20 @@ export const Oranges = {
   '950': '#4e2708',
 } as const
 
+export const Yellows = {
+  '50': '#fffbf5',
+  '100': '#fff9f0',
+  '200': '#fff1db',
+  '300': '#ffe6bd',
+  '400': '#ffd88b',
+  '500': '#ffc300',
+  '600': '#e0ab00',
+  '700': '#c19300',
+  '800': '#a37c0c',
+  '900': '#84671d',
+  '950': '#665223',
+} as const
+
 export const Violets = {
   '50': '#efedfc',
   '100': '#dbd9f7',
@@ -96,13 +96,17 @@ export const Violets = {
   '950': '#2f2862',
 } as const
 
+export const Transparent = '#ffffff00' as const
+
 export const Spacing = {
-  '50': '0',
+  '0': '0rem',
+  '75': '0.062rem', // ~1px
   '100': '0.125rem', // 2px
   '200': '0.25rem', // 4px
   '300': '0.5rem', // 8px
   '350': '0.875rem', // 14px
   '400': '1rem', // 16px
+  '450': '1.25rem', // 20px
   '500': '1.5rem', // 24px
   '600': '2rem', // 32px
   '700': '3rem', // 48px
@@ -110,6 +114,8 @@ export const Spacing = {
 } as const
 
 export const Sizing = {
+  '10': '0.062rem', // ~1px
+  '25': '0.125rem', // 2px
   '50': '0.25rem', // 4px
   '100': '0.5rem', // 8px
   '125': '0.75rem', // 12px
diff --git a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts
index 4580ade32f..dcb673a5e0 100644
--- a/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts
+++ b/packages/curve-ui-kit/src/themes/design/1_sizes_spaces.ts
@@ -1,181 +1,56 @@
 import { Sizing, Spacing } from './0_primitives'
 
 const MappedSpacing = {
-  xxs: {
-    mobile: Spacing[100],
-    tablet: Spacing[100],
-    desktop: Spacing[100],
-  },
-  xs: {
-    mobile: Spacing[100],
-    tablet: Spacing[200],
-    desktop: Spacing[200],
-  },
-  sm: {
-    mobile: Spacing[200],
-    tablet: Spacing[300],
-    desktop: Spacing[300],
-  },
-  md: {
-    mobile: Spacing[300],
-    tablet: Spacing[400],
-    desktop: Spacing[400],
-  },
-  lg: {
-    mobile: Spacing[400],
-    tablet: Spacing[500],
-    desktop: Spacing[500],
-  },
-  xl: {
-    mobile: Spacing[500],
-    tablet: Spacing[600],
-    desktop: Spacing[600],
-  },
-  xxl: {
-    mobile: Spacing[600],
-    tablet: Spacing[700],
-    desktop: Spacing[700],
-  },
+  '3xs': { mobile: Spacing[75], tablet: Spacing[75], desktop: Spacing[75] },
+  xxs: { mobile: Spacing[100], tablet: Spacing[100], desktop: Spacing[100] },
+  xs: { mobile: Spacing[100], tablet: Spacing[200], desktop: Spacing[200] },
+  sm: { mobile: Spacing[200], tablet: Spacing[300], desktop: Spacing[300] },
+  md: { mobile: Spacing[300], tablet: Spacing[400], desktop: Spacing[400] },
+  lg: { mobile: Spacing[400], tablet: Spacing[500], desktop: Spacing[500] },
+  xl: { mobile: Spacing[500], tablet: Spacing[600], desktop: Spacing[600] },
+  xxl: { mobile: Spacing[600], tablet: Spacing[700], desktop: Spacing[700] },
+  '3xl': { mobile: Spacing[700], tablet: Spacing[800], desktop: Spacing[800] },
 } as const
 
 const MappedSizing = {
-  xxs: {
-    mobile: Sizing[50],
-    tablet: Sizing[100],
-    desktop: Sizing[100],
-  },
-  xs: {
-    mobile: Sizing[150],
-    tablet: Sizing[200],
-    desktop: Sizing[200],
-  },
-  sm: {
-    mobile: Sizing[200],
-    tablet: Sizing[300],
-    desktop: Sizing[300],
-  },
-  md: {
-    mobile: Sizing[300],
-    tablet: Sizing[400],
-    desktop: Sizing[400],
-  },
-  lg: {
-    mobile: Sizing[400],
-    tablet: Sizing[500],
-    desktop: Sizing[500],
-  },
-  xl: {
-    mobile: Sizing[500],
-    tablet: Sizing[600],
-    desktop: Sizing[600],
-  },
-  xxl: {
-    mobile: Sizing[600],
-    tablet: Sizing[700],
-    desktop: Sizing[700],
-  },
-  '3xl': {
-    mobile: Sizing[700],
-    tablet: Sizing[800],
-    desktop: Sizing[800],
-  },
+  xxs: { mobile: Sizing[50], tablet: Sizing[100], desktop: Sizing[100] },
+  xs: { mobile: Sizing[150], tablet: Sizing[200], desktop: Sizing[200] },
+  sm: { mobile: Sizing[200], tablet: Sizing[300], desktop: Sizing[300] },
+  md: { mobile: Sizing[300], tablet: Sizing[400], desktop: Sizing[400] },
+  lg: { mobile: Sizing[400], tablet: Sizing[500], desktop: Sizing[500] },
+  xl: { mobile: Sizing[500], tablet: Sizing[600], desktop: Sizing[600] },
+  xxl: { mobile: Sizing[600], tablet: Sizing[700], desktop: Sizing[700] },
+  '3xl': { mobile: Sizing[700], tablet: Sizing[800], desktop: Sizing[800] },
 } as const
 
 const MappedIconSize = {
-  xxs: {
-    mobile: Sizing[100],
-    tablet: Sizing[125],
-    desktop: Sizing[125],
-  },
-  xs: {
-    mobile: Sizing[125],
-    tablet: Sizing[150],
-    desktop: Sizing[150],
-  },
-  sm: {
-    mobile: Sizing[150],
-    tablet: Sizing[200],
-    desktop: Sizing[200],
-  },
-  md: {
-    mobile: Sizing[250],
-    tablet: Sizing[250],
-    desktop: Sizing[250],
-  },
-  lg: {
-    mobile: Sizing[300],
-    tablet: Sizing[350],
-    desktop: Sizing[350],
-  },
-  xl: {
-    mobile: Sizing[400],
-    tablet: Sizing[500],
-    desktop: Sizing[500],
-  },
-  xxl: {
-    mobile: Sizing[500],
-    tablet: Sizing[600],
-    desktop: Sizing[600],
-  },
-  '3xl': {
-    mobile: Sizing[600],
-    tablet: Sizing[700],
-    desktop: Sizing[700],
-  },
-  '4xl': {
-    mobile: Sizing[700],
-    tablet: Sizing[800],
-    desktop: Sizing[800],
-  },
+  xxs: { mobile: Sizing[100], tablet: Sizing[125], desktop: Sizing[125] },
+  xs: { mobile: Sizing[125], tablet: Sizing[150], desktop: Sizing[150] },
+  sm: { mobile: Sizing[150], tablet: Sizing[200], desktop: Sizing[200] },
+  md: { mobile: Sizing[250], tablet: Sizing[250], desktop: Sizing[250] },
+  lg: { mobile: Sizing[300], tablet: Sizing[350], desktop: Sizing[350] },
+  xl: { mobile: Sizing[400], tablet: Sizing[500], desktop: Sizing[500] },
+  xxl: { mobile: Sizing[500], tablet: Sizing[600], desktop: Sizing[600] },
+  '3xl': { mobile: Sizing[600], tablet: Sizing[700], desktop: Sizing[700] },
+  '4xl': { mobile: Sizing[700], tablet: Sizing[800], desktop: Sizing[800] },
 } as const
 
 const MappedGrid = {
-  Column_Spacing: {
-    mobile: Spacing[300],
-    tablet: Spacing[400],
-    desktop: Spacing[500],
-  },
-  Row_Spacing: {
-    mobile: Spacing[300],
-    tablet: Spacing[400],
-    desktop: Spacing[500],
-  },
+  Column_Spacing: { mobile: Spacing[300], tablet: Spacing[400], desktop: Spacing[500] },
+  Row_Spacing: { mobile: Spacing[300], tablet: Spacing[400], desktop: Spacing[500] },
 } as const
 
 const MappedFontSize = {
-  xs: {
-    mobile: Sizing[125],
-    tablet: Sizing[125],
-    desktop: Sizing[125],
-  },
-  sm: {
-    mobile: Sizing[150],
-    tablet: Sizing[150],
-    desktop: Sizing[150],
-  },
-  md: {
-    mobile: Sizing[200],
-    tablet: Sizing[200],
-    desktop: Sizing[200],
-  },
-  lg: {
-    mobile: Sizing[250],
-    tablet: Sizing[300],
-    desktop: Sizing[300],
-  },
-  xl: {
-    mobile: Sizing[350],
-    tablet: Sizing[400],
-    desktop: Sizing[400],
-  },
-  xxl: {
-    mobile: Sizing[500],
-    tablet: Sizing[600],
-    desktop: Sizing[700],
-  },
+  xs: { mobile: Sizing[125], tablet: Sizing[125], desktop: Sizing[125] },
+  sm: { mobile: Sizing[150], tablet: Sizing[150], desktop: Sizing[150] },
+  md: { mobile: Sizing[200], tablet: Sizing[200], desktop: Sizing[200] },
+  lg: { mobile: Sizing[250], tablet: Sizing[300], desktop: Sizing[300] },
+  xl: { mobile: Sizing[350], tablet: Sizing[400], desktop: Sizing[400] },
+  xxl: { mobile: Sizing[500], tablet: Sizing[600], desktop: Sizing[700] },
 } as const
 
 const MappedButtonSize = {
+  xxs: Sizing[150], // 14px
   xs: Sizing[300], // 24px
   sm: Sizing[500], // 40px
   md: Sizing[600], // 48px
@@ -183,29 +58,12 @@ const MappedButtonSize = {
 }
 
 const SliderHeight = {
-  small: {
-    mobile: Sizing[200],
-    tablet: Sizing[200],
-    desktop: Sizing[200],
-  },
-  medium: {
-    mobile: Sizing[300],
-    tablet: Sizing[300],
-    desktop: Sizing[300],
-  },
+  small: { mobile: Sizing[200], tablet: Sizing[200], desktop: Sizing[200] },
+  medium: { mobile: Sizing[300], tablet: Sizing[300], desktop: Sizing[300] },
 } as const
-
 const SliderThumbWidth = {
-  small: {
-    mobile: Sizing[150],
-    tablet: Sizing[150],
-    desktop: Sizing[150],
-  },
-  medium: {
-    mobile: Sizing[200],
-    tablet: Sizing[200],
-    desktop: Sizing[200],
-  },
+  small: { mobile: Sizing[150], tablet: Sizing[150], desktop: Sizing[150] },
+  medium: { mobile: Sizing[200], tablet: Sizing[200], desktop: Sizing[200] },
 } as const
 
 const MappedFontWeight = {
@@ -252,32 +110,18 @@ const MappedLineHeight = {
 } as const
 
 const MappedModalWidth = {
-  xs: '100vw', // 100%
-  sm: '100vw', // 100%
+  xs: '19rem', // 304px
+  sm: '24rem', // 384px
   md: '28rem', // 448px
   lg: '32rem', // 512px
   xl: '36rem', // 576px
 }
 
 const MappedModalHeight = {
-  sm: {
-    maxHeight: '100vh',
-    height: '100vh',
-    minHeight: '100vh',
-  },
-  md: {
-    maxHeight: '100vh',
-    height: '80vh',
-    minHeight: '80vh',
-  },
-}
-
-const MappedColumnWidth = {
-  sm: 125,
-  md: 200,
-  lg: 350,
+  sm: { maxHeight: '100vh', height: '100vh', minHeight: '100vh' },
+  md: { maxHeight: '100vh', height: '80vh', minHeight: '80vh' },
 }
-
+const MappedColumnWidth = { sm: 125, md: 200, lg: 350 }
 export const SizesAndSpaces = {
   Spacing: MappedSpacing,
   Sizing: MappedSizing,
@@ -288,14 +132,8 @@ export const SizesAndSpaces = {
   FontWeight: MappedFontWeight,
   LineHeight: MappedLineHeight,
   OutlineWidth: '0.125rem', // 2px
-  Slider: {
-    Height: SliderHeight,
-    ThumbWidth: SliderThumbWidth,
-  },
-  Width: {
-    modal: MappedModalWidth,
-    column: MappedColumnWidth,
-  },
+  Slider: { Height: SliderHeight, ThumbWidth: SliderThumbWidth },
+  Width: { modal: MappedModalWidth, column: MappedColumnWidth },
   MinWidth: {
     tableHeader: '50rem', // 800px
     select: '5rem', // 80px
@@ -315,9 +153,9 @@ export const SizesAndSpaces = {
     section: '59.5rem', // 952px
     tooltip: '27.5rem', // 440px
     sliderInput: {
-      sm: '5rem', // 80px,
-      md: '6.25rem', // 100px,
-      bands: '6.8rem',
+      sm: '5rem', // 80px
+      md: '6.25rem', // 100px
+      bands: '6.8rem', // 108.8px
     },
   },
   Height: {
diff --git a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts
index bc661dd265..004819792c 100644
--- a/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts
+++ b/packages/curve-ui-kit/src/themes/design/1_surfaces_text.ts
@@ -1,4 +1,4 @@
-import { Blues, Grays, Greens, Reds, Violets } from './0_primitives'
+import { Blues, Grays, Greens, Reds, Violets, Yellows, Oranges } from './0_primitives'
 
 function createLightSurfaces() {
   const Text = {
@@ -9,22 +9,21 @@ function createLightSurfaces() {
     Highlight: Blues[500],
     Feedback: {
       Success: Greens[600],
-      Warning: Reds[400],
-      Danger: Reds[400],
+      Warning: Oranges[500],
       Error: Reds[500],
       Inverted: Grays[50],
     },
     FilledFeedback: {
       Info: {
-        Primary: Grays[50],
-        Secondary: Grays[300],
+        Primary: Blues[500],
+        Secondary: Grays[700],
       },
       Highlight: {
         Primary: Grays[50],
-        Secondary: Grays[200],
+        Secondary: Grays[300],
       },
       Warning: {
-        Primary: Grays[50],
+        Primary: Grays[950],
         Secondary: Grays[700],
       },
       Alert: {
@@ -37,7 +36,6 @@ function createLightSurfaces() {
       },
     },
   } as const
-
   const Layer = {
     '1': {
       Fill: Grays[50],
@@ -51,29 +49,39 @@ function createLightSurfaces() {
       Fill: Grays[50],
       Outline: Grays[300],
     },
-    Highlight: Blues[500],
-    TypeAction: {
-      Selected: Blues[100],
-      Hover: Grays[150],
-    },
     Feedback: {
       Info: Blues[500],
       Success: Greens[600],
-      Warning: Reds[300],
-      Danger: Reds[400],
+      Warning: Yellows[500],
       Error: Reds[500],
     },
+    Highlight: Blues[500],
+    TypeAction: {
+      Selected: Blues[100],
+      Hover: Grays[150],
+    },
   } as const
-
   return {
     Text,
     Layer,
     Tables: {
-      Header: { Fill: Grays[200] },
+      Row: {
+        Default: Grays[50],
+        Selected: Grays[150],
+        Hover: Blues[100],
+      },
+      Header: {
+        Fill: Grays[200],
+        Label: {
+          Default: Grays[700],
+          Hover: Blues[500],
+          Active: Grays[950],
+        },
+      },
     },
     Badges: {
       Label: {
-        Default: Text.Primary,
+        Default: Grays[950],
         Active: Grays[10],
         Alert: Grays[10],
         Highlight: Blues[500],
@@ -82,18 +90,18 @@ function createLightSurfaces() {
       },
       Border: {
         Default: Grays[400],
-        Active: Greens[400],
+        Active: Blues[500],
         Alert: Reds[500],
         Highlight: Blues[500],
-        Warning: Reds[300],
+        Warning: Oranges[500],
         Accent: Blues[500],
       },
       Fill: {
-        Default: Layer[1].Fill,
+        Default: Grays[50],
         Active: Greens[400],
         Alert: Reds[500],
-        Highlight: Layer[1].Fill,
-        Warning: Reds[300],
+        Highlight: Grays[50],
+        Warning: Yellows[500],
         Accent: Blues[500],
       },
     },
@@ -107,13 +115,6 @@ function createDarkSurfaces() {
     Tertiary: Grays[400],
     Disabled: Grays[500],
     Highlight: Blues[400],
-    Feedback: {
-      Success: Greens[400],
-      Warning: Reds[300],
-      Danger: Reds[400],
-      Error: Reds[500],
-      Inverted: Grays[950],
-    },
     FilledFeedback: {
       Info: {
         Primary: Blues[300],
@@ -124,20 +125,25 @@ function createDarkSurfaces() {
         Secondary: Grays[700],
       },
       Warning: {
-        Primary: Grays[50],
-        Secondary: Grays[150],
+        Primary: Grays[975],
+        Secondary: Grays[700],
       },
       Alert: {
         Primary: Grays[50],
-        Secondary: Grays[150],
+        Secondary: Grays[300],
       },
       Success: {
         Primary: Grays[950],
         Secondary: Grays[700],
       },
     },
+    Feedback: {
+      Success: Greens[400],
+      Warning: Yellows[500],
+      Error: Reds[500],
+      Inverted: Grays[950],
+    },
   } as const
-
   const Layer = {
     '1': {
       Fill: Grays[950],
@@ -151,29 +157,39 @@ function createDarkSurfaces() {
       Fill: Grays[800],
       Outline: Grays[700],
     },
-    Highlight: Blues[500],
-    TypeAction: {
-      Selected: Blues[900],
-      Hover: Grays[800],
-    },
     Feedback: {
       Info: Blues[50],
       Success: Greens[300],
-      Warning: Reds[400],
-      Danger: Reds[400],
+      Warning: Oranges[500],
       Error: Reds[500],
     },
+    Highlight: Blues[50],
+    TypeAction: {
+      Selected: Blues[900],
+      Hover: Grays[750],
+    },
   } as const
-
   return {
     Text,
     Layer,
     Tables: {
-      Header: { Fill: Grays[800] },
+      Row: {
+        Default: Grays[950],
+        Selected: Blues[900],
+        Hover: Grays[750],
+      },
+      Header: {
+        Fill: Grays[800],
+        Label: {
+          Default: Grays[300],
+          Hover: Blues[400],
+          Active: Grays[50],
+        },
+      },
     },
     Badges: {
       Label: {
-        Default: Text.Primary,
+        Default: Grays[10],
         Active: Grays[10],
         Alert: Grays[10],
         Highlight: Blues[400],
@@ -182,18 +198,18 @@ function createDarkSurfaces() {
       },
       Border: {
         Default: Grays[600],
-        Active: Greens[500],
+        Active: Blues[400],
         Alert: Reds[500],
         Highlight: Blues[400],
-        Warning: Reds[300],
+        Warning: Oranges[500],
         Accent: Blues[400],
       },
       Fill: {
-        Default: Layer[1].Fill,
+        Default: Grays[950],
         Active: Greens[500],
         Alert: Reds[500],
-        Highlight: Layer[1].Fill,
-        Warning: Reds[300],
+        Highlight: Grays[950],
+        Warning: Yellows[500],
         Accent: Blues[400],
       },
     },
@@ -202,15 +218,9 @@ function createDarkSurfaces() {
 
 function createChadSurfaces() {
   const Text = {
-    Primary: Grays[950],
-    Secondary: Grays[750],
-    Tertiary: Grays[700],
-    Disabled: Grays[500],
-    Highlight: Violets[600],
     Feedback: {
+      Warning: Oranges[500],
       Success: Greens[600],
-      Warning: Reds[400],
-      Danger: Reds[400],
       Error: Reds[500],
       Inverted: Grays[50],
     },
@@ -220,7 +230,7 @@ function createChadSurfaces() {
         Secondary: Grays[700],
       },
       Highlight: {
-        Primary: Blues[50],
+        Primary: Grays[50],
         Secondary: Grays[300],
       },
       Warning: {
@@ -236,6 +246,11 @@ function createChadSurfaces() {
         Secondary: Grays[300],
       },
     },
+    Primary: Grays[950],
+    Secondary: Grays[750],
+    Tertiary: Grays[700],
+    Disabled: Grays[500],
+    Highlight: Violets[600],
   } as const
   const Layer = {
     '1': {
@@ -250,29 +265,39 @@ function createChadSurfaces() {
       Fill: Grays[400],
       Outline: Grays[600],
     },
-    Highlight: Violets[700],
-    TypeAction: {
-      Selected: Violets[50],
-      Hover: Violets[200],
-    },
     Feedback: {
       Info: Violets[700],
       Success: Greens[600],
-      Warning: Reds[300],
-      Danger: Reds[400],
+      Warning: Yellows[500],
       Error: Reds[500],
     },
+    TypeAction: {
+      Selected: Violets[50],
+      Hover: Violets[200],
+    },
+    Highlight: Violets[800],
   } as const
-
   return {
     Text,
     Layer,
     Tables: {
-      Header: { Fill: Layer[3].Fill },
+      Row: {
+        Default: Grays[150],
+        Selected: Violets[50],
+        Hover: Violets[200],
+      },
+      Header: {
+        Fill: Grays[400],
+        Label: {
+          Default: Grays[750],
+          Hover: Violets[600],
+          Active: Grays[950],
+        },
+      },
     },
     Badges: {
       Label: {
-        Default: Text.Primary,
+        Default: Grays[950],
         Active: Grays[10],
         Alert: Grays[10],
         Highlight: Violets[800],
@@ -280,19 +305,19 @@ function createChadSurfaces() {
         Accent: Grays[10],
       },
       Border: {
-        Default: Grays[975],
-        Active: Greens[500],
+        Default: Grays[400],
+        Active: Violets[500],
         Alert: Reds[500],
         Highlight: Violets[800],
-        Warning: Reds[300],
+        Warning: Oranges[500],
         Accent: Violets[800],
       },
       Fill: {
-        Default: Layer[1].Fill,
+        Default: Grays[150],
         Active: Greens[500],
         Alert: Reds[500],
-        Highlight: Layer[1].Fill,
-        Warning: Reds[300],
+        Highlight: Grays[150],
+        Warning: Yellows[500],
         Accent: Violets[800],
       },
     },
@@ -300,42 +325,17 @@ function createChadSurfaces() {
 }
 
 function createLightInvertedSurfaces() {
-  const Layer = {
-    '1': {
-      Fill: Grays[950],
-      Outline: Grays[600],
-    },
-    '2': {
-      Fill: Grays[900],
-      Outline: Grays[750],
-    },
-    '3': {
-      Fill: Grays[750],
-      Outline: Grays[600],
-    },
-    Highlight: Blues[500],
-    TypeAction: {
-      Selected: Grays[850],
-      Hover: Grays[900],
-    },
-    Feedback: {
-      Info: Blues[800],
-      Success: Greens[300],
-      Warning: Reds[400],
-      Error: Reds[500],
-    },
-  } as const
   const Text = {
     Primary: Grays[50],
     Secondary: Grays[300],
     Tertiary: Grays[400],
     Disabled: Grays[500],
-    Highlight: Blues[500],
+    Highlight: Blues[300],
     Feedback: {
       Success: Greens[300],
-      Warning: Reds[300],
+      Warning: Oranges[500],
       Error: Reds[500],
-      Inverted: Grays[950],
+      Inverted: Grays[50],
     },
     FilledFeedback: {
       Info: {
@@ -343,16 +343,16 @@ function createLightInvertedSurfaces() {
         Secondary: Grays[300],
       },
       Highlight: {
-        Primary: Blues[500],
+        Primary: Grays[950],
         Secondary: Grays[700],
       },
       Warning: {
-        Primary: Grays[50],
-        Secondary: Grays[150],
+        Primary: Grays[25],
+        Secondary: Grays[300],
       },
       Alert: {
-        Primary: Grays[50],
-        Secondary: Grays[150],
+        Primary: Grays[950],
+        Secondary: Grays[700],
       },
       Success: {
         Primary: Grays[950],
@@ -360,15 +360,52 @@ function createLightInvertedSurfaces() {
       },
     },
   } as const
+  const Layer = {
+    '1': {
+      Fill: Grays[950],
+      Outline: Grays[600],
+    },
+    '2': {
+      Fill: Grays[900],
+      Outline: Grays[750],
+    },
+    '3': {
+      Fill: Grays[750],
+      Outline: Grays[600],
+    },
+    Feedback: {
+      Info: Blues[800],
+      Success: Greens[300],
+      Warning: Oranges[500],
+      Error: Reds[500],
+    },
+    Highlight: Blues[500],
+    TypeAction: {
+      Selected: Grays[750],
+      Hover: Grays[850],
+    },
+  } as const
   return {
     Text,
     Layer,
     Tables: {
-      Header: { Fill: Grays[800] },
+      Row: {
+        Default: Grays[950],
+        Selected: Grays[850],
+        Hover: Grays[750],
+      },
+      Header: {
+        Fill: Grays[800],
+        Label: {
+          Default: Grays[50],
+          Hover: Blues[300],
+          Active: Grays[300],
+        },
+      },
     },
     Badges: {
       Label: {
-        Default: Text.Primary,
+        Default: Grays[50],
         Active: Grays[10],
         Alert: Grays[10],
         Highlight: Blues[400],
@@ -377,18 +414,18 @@ function createLightInvertedSurfaces() {
       },
       Border: {
         Default: Grays[600],
-        Active: Greens[400],
+        Active: Blues[400],
         Alert: Reds[500],
         Highlight: Blues[400],
-        Warning: Reds[300],
+        Warning: Oranges[500],
         Accent: Blues[400],
       },
       Fill: {
-        Default: Layer[1].Fill,
+        Default: Grays[950],
         Active: Greens[400],
         Alert: Reds[500],
         Highlight: Grays[10],
-        Warning: Reds[300],
+        Warning: Yellows[500],
         Accent: Blues[400],
       },
     },
@@ -398,38 +435,38 @@ function createLightInvertedSurfaces() {
 function createDarkInvertedSurfaces() {
   const Text = {
     Primary: Grays[950],
-    Secondary: Grays[700],
-    Tertiary: Grays[600],
-    Disabled: Grays[400],
+    Secondary: Grays[750],
+    Tertiary: Grays[700],
+    Disabled: Grays[500],
     Highlight: Blues[500],
-    Feedback: {
-      Success: Greens[600],
-      Warning: Reds[400],
-      Error: Reds[500],
-      Inverted: Grays[50],
-    },
     FilledFeedback: {
       Info: {
-        Primary: Grays[50],
-        Secondary: Grays[300],
+        Primary: Grays[950],
+        Secondary: Grays[700],
       },
       Highlight: {
-        Primary: Grays[50],
-        Secondary: Grays[200],
+        Primary: Blues[300],
+        Secondary: Grays[300],
       },
       Warning: {
-        Primary: Grays[950],
-        Secondary: Grays[700],
+        Primary: Grays[10],
+        Secondary: Grays[200],
       },
       Alert: {
-        Primary: Grays[50],
-        Secondary: Grays[300],
+        Primary: Grays[950],
+        Secondary: Grays[700],
       },
       Success: {
-        Primary: Grays[50],
-        Secondary: Grays[300],
+        Primary: Grays[950],
+        Secondary: Grays[700],
       },
     },
+    Feedback: {
+      Success: Greens[600],
+      Warning: Oranges[500],
+      Error: Reds[500],
+      Inverted: Grays[950],
+    },
   } as const
   const Layer = {
     '1': {
@@ -444,23 +481,35 @@ function createDarkInvertedSurfaces() {
       Fill: Grays[50],
       Outline: Grays[300],
     },
-    Highlight: Blues[500],
-    TypeAction: {
-      Selected: Blues[100],
-      Hover: Blues[50],
-    },
     Feedback: {
       Info: Blues[500],
       Success: Greens[600],
-      Warning: Reds[300],
+      Warning: Yellows[500],
       Error: Reds[500],
     },
+    Highlight: Blues[50],
+    TypeAction: {
+      Selected: Blues[50],
+      Hover: Blues[100],
+    },
   } as const
   return {
     Text,
     Layer,
     Tables: {
-      Header: { Fill: Grays[200] },
+      Row: {
+        Default: Grays[75],
+        Selected: Blues[50],
+        Hover: Blues[100],
+      },
+      Header: {
+        Fill: Grays[200],
+        Label: {
+          Default: Grays[750],
+          Hover: Blues[500],
+          Active: Grays[950],
+        },
+      },
     },
     Badges: {
       Label: {
@@ -472,19 +521,19 @@ function createDarkInvertedSurfaces() {
         Accent: Grays[10],
       },
       Border: {
-        Default: Grays[975],
-        Active: Greens[400],
+        Default: Grays[400],
+        Active: Blues[500],
         Alert: Reds[500],
         Highlight: Blues[500],
-        Warning: Reds[300],
+        Warning: Oranges[500],
         Accent: Blues[500],
       },
       Fill: {
-        Default: Layer[1].Fill,
+        Default: Grays[75],
         Active: Greens[500],
         Alert: Reds[500],
-        Highlight: Layer[1].Fill,
-        Warning: Reds[300],
+        Highlight: Grays[75],
+        Warning: Yellows[500],
         Accent: Blues[500],
       },
     },
@@ -493,39 +542,39 @@ function createDarkInvertedSurfaces() {
 
 function createChadInvertedSurfaces() {
   const Text = {
-    Primary: Grays[50],
-    Secondary: Grays[300],
-    Tertiary: Grays[400],
-    Disabled: Grays[500],
-    Highlight: Violets[400],
     Feedback: {
+      Warning: Yellows[500],
       Success: Greens[500],
-      Warning: Reds[300],
       Error: Reds[500],
-      Inverted: Grays[950],
+      Inverted: Grays[50],
     },
     FilledFeedback: {
       Info: {
-        Primary: Blues[300],
-        Secondary: Grays[300],
+        Primary: Grays[950],
+        Secondary: Grays[700],
       },
       Highlight: {
-        Primary: Blues[500],
+        Primary: Grays[950],
         Secondary: Grays[700],
       },
       Warning: {
-        Primary: Grays[50],
-        Secondary: Grays[150],
+        Primary: Grays[950],
+        Secondary: Grays[700],
       },
       Alert: {
-        Primary: Grays[50],
-        Secondary: Grays[150],
+        Primary: Grays[950],
+        Secondary: Grays[700],
       },
       Success: {
         Primary: Grays[950],
         Secondary: Grays[700],
       },
     },
+    Primary: Grays[50],
+    Secondary: Grays[300],
+    Tertiary: Grays[400],
+    Disabled: Grays[500],
+    Highlight: Violets[400],
   } as const
   const Layer = {
     '1': {
@@ -540,27 +589,39 @@ function createChadInvertedSurfaces() {
       Fill: Violets[700],
       Outline: Violets[500],
     },
-    Highlight: Violets[400],
-    TypeAction: {
-      Selected: Violets[800],
-      Hover: Violets[900],
-    },
     Feedback: {
       Info: Grays[850],
       Success: Greens[300],
-      Warning: Reds[400],
+      Warning: Oranges[500],
       Error: Reds[500],
     },
+    TypeAction: {
+      Selected: Violets[900],
+      Hover: Violets[800],
+    },
+    Highlight: Violets[950],
   } as const
   return {
-    Text: Text,
-    Layer: Layer,
+    Text,
+    Layer,
     Tables: {
-      Header: { Fill: Violets[800] },
+      Row: {
+        Default: Violets[950],
+        Selected: Violets[900],
+        Hover: Violets[800],
+      },
+      Header: {
+        Fill: Violets[700],
+        Label: {
+          Default: Grays[300],
+          Hover: Violets[400],
+          Active: Grays[50],
+        },
+      },
     },
     Badges: {
       Label: {
-        Default: Text.Primary,
+        Default: Grays[50],
         Active: Grays[10],
         Alert: Grays[10],
         Highlight: Violets[200],
@@ -569,18 +630,18 @@ function createChadInvertedSurfaces() {
       },
       Border: {
         Default: Grays[600],
-        Active: Greens[500],
+        Active: Violets[400],
         Alert: Reds[500],
         Highlight: Violets[200],
-        Warning: Reds[300],
+        Warning: Oranges[500],
         Accent: Violets[400],
       },
       Fill: {
-        Default: Layer[1].Fill,
+        Default: Violets[950],
         Active: Greens[500],
         Alert: Reds[500],
-        Highlight: Layer[1].Fill,
-        Warning: Reds[300],
+        Highlight: Violets[950],
+        Warning: Yellows[500],
         Accent: Violets[400],
       },
     },
@@ -588,11 +649,7 @@ function createChadInvertedSurfaces() {
 }
 
 export const SurfacesAndText = {
-  plain: {
-    Light: createLightSurfaces(),
-    Dark: createDarkSurfaces(),
-    Chad: createChadSurfaces(),
-  },
+  plain: { Light: createLightSurfaces(), Dark: createDarkSurfaces(), Chad: createChadSurfaces() },
   inverted: {
     Light: createLightInvertedSurfaces(),
     Dark: createDarkInvertedSurfaces(),
diff --git a/packages/curve-ui-kit/src/themes/design/2_theme.ts b/packages/curve-ui-kit/src/themes/design/2_theme.ts
index f0e93f7821..43e9f757df 100644
--- a/packages/curve-ui-kit/src/themes/design/2_theme.ts
+++ b/packages/curve-ui-kit/src/themes/design/2_theme.ts
@@ -1,5 +1,5 @@
 import { alpha } from '@mui/material'
-import { Blues, Grays, Greens, Reds, Yellows, TransitionFunction, Violets, Oranges } from './0_primitives'
+import { Blues, Grays, Greens, Reds, Yellows, Oranges, Violets, Transparent, TransitionFunction } from './0_primitives'
 import { SurfacesAndText } from './1_surfaces_text'
 
 const { plain, inverted } = SurfacesAndText
@@ -8,22 +8,9 @@ const Transition = `all ${TransitionFunction}`
 const InsetOverline = '0 0 auto' as const // Top border only
 const InsetUnderline = 'auto 0 0' as const // Bottom border only
 
-/** 
- Same background colors accross all themes
-*/
 const SliderBackground = {
-  Safe: {
-    25: Reds[400],
-    50: Reds[300],
-    75: Reds[200],
-    100: Greens[500],
-  },
-  Danger: {
-    25: Reds[200],
-    50: Reds[300],
-    75: Reds[400],
-    100: Reds[500],
-  },
+  Safe: { 25: Reds[400], 50: Reds[300], 75: Reds[200], 100: Greens[500] },
+  Danger: { 25: Reds[200], 50: Reds[300], 75: Reds[400], 100: Reds[500] },
   Disabled: {
     25: alpha(Grays[300], 0.5),
     50: alpha(Grays[300], 0.5),
@@ -37,22 +24,44 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
     Neutral: Grays,
     Primary: Blues,
     Secondary: Greens,
-    Tertiary: Reds,
+    Tertiary: {
+      '200': Reds[200],
+      '300': Yellows[500],
+      '400': Oranges[500],
+      '600': Reds[500],
+    },
   } as const
 
   const Layer = {
-    '1': Light.Layer[1],
-    '2': Light.Layer[2],
-    '3': Light.Layer[3],
+    '1': {
+      Fill: Light.Layer[1].Fill,
+      Outline: Light.Layer[1].Outline,
+    },
+    '2': {
+      Fill: Light.Layer[2].Fill,
+      Outline: Light.Layer[2].Outline,
+    },
+    '3': {
+      Fill: Light.Layer[3].Fill,
+      Outline: Light.Layer[3].Outline,
+    },
     App: {
       Background: '#f0edeb',
     },
+    Feedback: {
+      Info: Light.Layer.Feedback.Info,
+      Success: Light.Layer.Feedback.Success,
+      Warning: Light.Layer.Feedback.Warning,
+      Error: Light.Layer.Feedback.Error,
+    },
+    TypeAction: {
+      Selected: Light.Layer.TypeAction.Selected,
+      Hover: Light.Layer.TypeAction.Hover,
+    },
     Highlight: {
       Fill: Light.Layer.Highlight,
-      Outline: Light.Layer.Highlight,
+      Outline: Color.Primary[500],
     },
-    TypeAction: Light.Layer.TypeAction,
-    Feedback: Light.Layer.Feedback,
   } as const
 
   const Text = {
@@ -62,8 +71,34 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
       Tertiary: Light.Text.Tertiary,
       Highlight: Light.Text.Highlight,
       Disabled: Light.Text.Disabled,
-      Feedback: Light.Text.Feedback,
-      FilledFeedback: { ...Light.Text.FilledFeedback },
+      FilledFeedback: {
+        Info: {
+          Primary: Light.Text.FilledFeedback.Info.Primary,
+          Secondary: Light.Text.FilledFeedback.Info.Secondary,
+        },
+        Highlight: {
+          Primary: Light.Text.FilledFeedback.Highlight.Primary,
+          Secondary: Light.Text.FilledFeedback.Highlight.Secondary,
+        },
+        Warning: {
+          Primary: Light.Text.FilledFeedback.Warning.Primary,
+          Secondary: Light.Text.FilledFeedback.Warning.Secondary,
+        },
+        Alert: {
+          Primary: Light.Text.FilledFeedback.Alert.Primary,
+          Secondary: Light.Text.FilledFeedback.Alert.Secondary,
+        },
+        Success: {
+          Primary: Light.Text.FilledFeedback.Success.Primary,
+          Secondary: Light.Text.FilledFeedback.Success.Secondary,
+        },
+      },
+      Feedback: {
+        Success: Light.Text.Feedback.Success,
+        Warning: Light.Text.Feedback.Warning,
+        Error: Light.Text.Feedback.Error,
+        Inverted: Grays[50],
+      },
     },
     FontFamily: {
       Heading: 'Mona Sans',
@@ -74,8 +109,14 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
   } as const
 
   const Button = {
+    Focus_Outline_Width: '0.125rem', // 2px
     Focus_Outline: Color.Primary[500],
-    Transition,
+    Radius: {
+      xs: '0',
+      sm: '0',
+      md: '0',
+      lg: '0',
+    },
     Primary: {
       Default: {
         Label: Grays[50],
@@ -83,7 +124,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
       },
       Hover: {
         Label: Grays[50],
-        Fill: Grays[900],
+        Fill: Grays[950],
       },
       Disabled: {
         Label: Text.TextColors.Disabled,
@@ -93,7 +134,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
     Secondary: {
       Default: {
         Label: Grays[50],
-        Fill: Grays[900],
+        Fill: Grays[950],
       },
       Hover: {
         Label: Grays[50],
@@ -101,13 +142,13 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
       },
       Disabled: {
         Label: Text.TextColors.Disabled,
-        Fill: Color.Neutral[600],
+        Fill: Color.Neutral[400],
       },
     },
     Outlined: {
       Default: {
-        Label: Grays[950],
-        Outline: Grays[300],
+        Label: Text.TextColors.Primary,
+        Outline: Text.TextColors.Primary,
       },
       Hover: {
         Label: Blues[500],
@@ -124,9 +165,11 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
       },
       Hover: {
         Label: Grays[975],
+        Fill: Transparent,
       },
       Disabled: {
         Label: Text.TextColors.Disabled,
+        Fill: Transparent,
       },
     },
     Success: {
@@ -135,50 +178,51 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
         Fill: Greens[400],
       },
       Hover: {
-        Label: Greens[300],
+        Label: Greens[400],
         Fill: Grays[900],
       },
       Disabled: {
-        Label: Text.TextColors.Disabled,
+        Label: Light.Text.Disabled,
         Fill: Greens[600],
       },
     },
     Error: {
       Default: {
-        Label: Grays[50],
+        Label: Grays[10],
         Fill: Reds[500],
       },
       Hover: {
-        Label: Reds[400],
-        Fill: Grays[900],
+        Label: Reds[500],
+        Fill: Grays[10],
       },
       Disabled: {
-        Label: Grays[300],
-        Fill: Reds[700],
+        Label: Grays[500],
+        Fill: Reds[800],
       },
     },
     Navigation: {
       Default: {
-        Label: Text.TextColors.Secondary,
+        Label: Text.TextColors.Tertiary,
       },
       Hover: {
         Label: Text.TextColors.Primary,
         Fill: Layer[1].Fill,
       },
       Current: {
-        Label: Grays[50],
+        Label: Grays[10],
         Fill: Layer.Highlight.Fill,
       },
     },
+    Transition: 'Transition',
   } as const
 
   const Tabs = {
-    Transition,
     UnderLined: {
       Inset: InsetUnderline,
+      Container_Border: Light.Layer[1].Outline,
       Default: {
         Label: Text.TextColors.Secondary,
-        Outline: Color.Neutral[200],
+        Outline: Layer[2].Outline,
       },
       Hover: {
         Label: Text.TextColors.Highlight,
@@ -208,11 +252,10 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
       Inset: InsetOverline,
       Default: {
         Label: Text.TextColors.Secondary,
-        Outline: Color.Neutral[200],
+        Outline: Layer[2].Outline,
       },
       Hover: {
         Label: Text.TextColors.Primary,
-        Fill: Color.Neutral[200],
         Outline: Color.Neutral[500],
       },
       Current: {
@@ -220,17 +263,14 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
         Outline: Color.Primary[500],
       },
     },
+    Transition: 'Transition',
   } as const
 
   const Chips = {
-    BorderRadius: {
-      Clickable: 0,
-      NonClickable: '100px',
-    },
     Default: {
       Label: Text.TextColors.Secondary,
-      Fill: Layer[1].Fill,
-      Stroke: Layer[2].Outline,
+      Fill: Layer[2].Fill,
+      Stroke: Light.Badges.Border.Default,
     },
     Hover: {
       Label: Color.Neutral[50],
@@ -241,17 +281,13 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
       Fill: Layer[2].Fill,
       Outline: Layer.Highlight.Outline,
     },
+    BorderRadius: {
+      Clickable: '0',
+      NonClickable: '6.25rem', // 100px
+    },
   } as const
 
   const Badges = {
-    Label: {
-      Default: Light.Badges.Label.Default,
-      Active: Light.Badges.Label.Active,
-      Alert: Light.Badges.Label.Alert,
-      Highlight: Light.Badges.Label.Highlight,
-      Warning: Light.Badges.Label.Warning,
-      Accent: Light.Badges.Label.Accent,
-    },
     Border: {
       Default: Light.Badges.Border.Default,
       Active: Light.Badges.Border.Active,
@@ -260,6 +296,14 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
       Warning: Light.Badges.Border.Warning,
       Accent: Light.Badges.Border.Accent,
     },
+    Label: {
+      Default: Light.Badges.Label.Default,
+      Active: Light.Badges.Label.Active,
+      Alert: Light.Badges.Label.Alert,
+      Highlight: Light.Badges.Label.Highlight,
+      Warning: Light.Badges.Label.Warning,
+      Accent: Light.Badges.Label.Accent,
+    },
     Fill: {
       Default: Light.Badges.Fill.Default,
       Active: Light.Badges.Fill.Active,
@@ -282,7 +326,7 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
     Lines: {
       Positive: Greens[400],
       Negative: Reds[600],
-      Line1: Color.Primary[400],
+      Line1: Color.Primary[500],
       Line2: Yellows[500],
       Line3: Color.Secondary[500],
     },
@@ -304,19 +348,30 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
   } as const
 
   const Table = {
-    Header: { Fill: Light.Tables.Header.Fill },
+    Header: {
+      Fill: Light.Tables.Header.Fill,
+      'Label_&_icon': {
+        Default: Light.Tables.Header.Label.Default,
+        Hover: Light.Tables.Header.Label.Hover,
+        Active: Light.Tables.Header.Label.Active,
+      },
+    },
     Row: {
-      Default: Light.Layer[1].Fill,
-      Selected: Light.Layer.TypeAction.Selected,
-      Hover: Light.Layer.TypeAction.Hover,
+      Default: Light.Tables.Row.Default,
+      Selected: Light.Tables.Row.Selected,
+      Hover: Light.Tables.Row.Hover,
     },
   } as const
 
   const InputBaseDefaultFill = Grays[100]
+
   const Inputs = {
     Base: {
       Default: {
-        Fill: InputBaseDefaultFill,
+        Fill: {
+          Default: Grays[100],
+          Active: Grays[50],
+        },
         Border: {
           Default: Grays[200],
           Active: Light.Text.Highlight,
@@ -337,7 +392,8 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
     },
     Large: {
       Default: {
-        Fill: InputBaseDefaultFill,
+        Fill: Grays[100],
+        Outline: Grays[200],
       },
     },
   } as const
@@ -355,16 +411,8 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
   } as const
 
   const Switch = {
-    Default: {
-      Fill: Layer[1].Fill,
-      Outline: Color.Neutral[400],
-      Label: Color.Primary[500],
-    },
-    Checked: {
-      Fill: Color.Primary[500],
-      Outline: Color.Neutral[400],
-      Label: Grays[50],
-    },
+    Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] },
+    Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] },
   } as const
 
   return {
@@ -386,26 +434,25 @@ export const createLightDesign = (Light: typeof plain.Light | typeof inverted.Li
 }
 
 export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark) => {
-  const color = Grays
   const Color = {
     Neutral: {
-      '25': color[975],
-      '50': color[950],
-      '75': color[900],
-      '100': color[850],
-      '150': color[800],
-      '200': color[750],
-      '300': color[700],
-      '400': color[600],
-      '500': color[500],
-      '600': color[400],
-      '700': color[300],
-      '750': color[200],
-      '800': color[150],
-      '850': color[100],
-      '900': color[75],
-      '950': color[50],
-      '975': color[25],
+      '25': Grays[975],
+      '50': Grays[950],
+      '75': Grays[900],
+      '100': Grays[850],
+      '150': Grays[800],
+      '200': Grays[750],
+      '300': Grays[700],
+      '400': Grays[600],
+      '500': Grays[500],
+      '600': Grays[400],
+      '700': Grays[300],
+      '750': Grays[200],
+      '800': Grays[150],
+      '850': Grays[100],
+      '900': Grays[75],
+      '950': Grays[50],
+      '975': Grays[25],
     },
     Primary: {
       '50': Blues[950],
@@ -431,10 +478,10 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
       '800': Greens[100],
     },
     Tertiary: {
-      '200': Reds[500],
-      '300': Reds[400],
-      '400': Reds[300],
-      '600': Reds[200],
+      '200': Reds[800],
+      '300': Oranges[500],
+      '400': Yellows[500],
+      '600': Yellows[400],
     },
   } as const
 
@@ -454,15 +501,20 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
     App: {
       Background: '#12110f',
     },
-    Highlight: {
-      Fill: Dark.Layer.Highlight,
-      Outline: Dark.Layer.Highlight,
+    Feedback: {
+      Info: Dark.Layer.Feedback.Info,
+      Success: Dark.Layer.Feedback.Success,
+      Warning: Dark.Layer.Feedback.Warning,
+      Error: Dark.Layer.Feedback.Error,
     },
     TypeAction: {
-      Hover: Dark.Layer.TypeAction.Hover,
       Selected: Dark.Layer.TypeAction.Selected,
+      Hover: Dark.Layer.TypeAction.Hover,
+    },
+    Highlight: {
+      Fill: Dark.Layer.Highlight,
+      Outline: Color.Primary[500],
     },
-    Feedback: Dark.Layer.Feedback,
   } as const
 
   const Text = {
@@ -472,8 +524,34 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
       Tertiary: Dark.Text.Tertiary,
       Highlight: Dark.Text.Highlight,
       Disabled: Dark.Text.Disabled,
-      Feedback: Dark.Text.Feedback,
-      FilledFeedback: { ...Dark.Text.FilledFeedback },
+      FilledFeedback: {
+        Info: {
+          Primary: Dark.Text.FilledFeedback.Info.Primary,
+          Secondary: Dark.Text.FilledFeedback.Info.Secondary,
+        },
+        Highlight: {
+          Primary: Dark.Text.FilledFeedback.Highlight.Primary,
+          Secondary: Dark.Text.FilledFeedback.Highlight.Secondary,
+        },
+        Warning: {
+          Primary: Dark.Text.FilledFeedback.Warning.Primary,
+          Secondary: Dark.Text.FilledFeedback.Warning.Secondary,
+        },
+        Alert: {
+          Primary: Dark.Text.FilledFeedback.Alert.Primary,
+          Secondary: Dark.Text.FilledFeedback.Alert.Secondary,
+        },
+        Success: {
+          Primary: Dark.Text.FilledFeedback.Success.Primary,
+          Secondary: Dark.Text.FilledFeedback.Success.Secondary,
+        },
+      },
+      Feedback: {
+        Success: Dark.Text.Feedback.Success,
+        Warning: Dark.Text.Feedback.Warning,
+        Error: Dark.Text.Feedback.Error,
+        Inverted: Grays[950],
+      },
     },
     FontFamily: {
       Heading: 'Mona Sans',
@@ -484,16 +562,22 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
   } as const
 
   const Button = {
+    Focus_Outline_Width: '0.125rem', // 2px
     Focus_Outline: Color.Primary[500],
-    Transition,
+    Radius: {
+      xs: '0',
+      sm: '0',
+      md: '0',
+      lg: '0',
+    },
     Primary: {
       Default: {
-        Label: color[50],
+        Label: Grays[50],
         Fill: Blues[500],
       },
       Hover: {
-        Label: color[900],
-        Fill: color[50],
+        Label: Grays[900],
+        Fill: Grays[50],
       },
       Disabled: {
         Label: Text.TextColors.Disabled,
@@ -502,26 +586,26 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
     },
     Secondary: {
       Default: {
-        Label: color[900],
-        Fill: color[50],
+        Label: Grays[900],
+        Fill: Grays[50],
       },
       Hover: {
-        Label: color[900],
+        Label: Grays[50],
         Fill: Blues[500],
       },
       Disabled: {
         Label: Text.TextColors.Disabled,
-        Fill: Color.Neutral[600],
+        Fill: Grays[750],
       },
     },
     Outlined: {
       Default: {
-        Label: color[50],
-        Outline: color[700],
+        Label: Text.TextColors.Primary,
+        Outline: Text.TextColors.Primary,
       },
       Hover: {
-        Label: Blues[500],
-        Outline: Blues[500],
+        Label: Text.TextColors.Highlight,
+        Outline: Text.TextColors.Highlight,
       },
       Disabled: {
         Label: Text.TextColors.Disabled,
@@ -530,65 +614,68 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
     },
     Ghost: {
       Default: {
-        Label: Color.Primary[700],
+        Label: Text.TextColors.Highlight,
       },
       Hover: {
-        Label: color[50],
+        Label: Grays[50],
+        Fill: Transparent,
       },
       Disabled: {
-        Label: Text.TextColors.Disabled,
+        Label: Blues[700],
+        Fill: Transparent,
       },
     },
     Success: {
       Default: {
-        Label: color[900],
-        Fill: Greens[300],
+        Label: Grays[900],
+        Fill: Greens[400],
       },
       Hover: {
-        Label: Greens[500],
-        Fill: color[50],
+        Label: Greens[400],
+        Fill: Grays[900],
       },
       Disabled: {
-        Label: Text.TextColors.Disabled,
+        Label: Dark.Text.Disabled,
         Fill: Greens[600],
       },
     },
     Error: {
       Default: {
-        Label: color[50],
+        Label: Grays[10],
         Fill: Reds[500],
       },
       Hover: {
-        Label: Reds[400],
-        Fill: color[900],
+        Label: Reds[500],
+        Fill: Grays[10],
       },
       Disabled: {
-        Label: color[300],
-        Fill: Reds[700],
+        Label: Grays[500],
+        Fill: Reds[800],
       },
     },
     Navigation: {
       Default: {
-        Label: Text.TextColors.Secondary,
+        Label: Text.TextColors.Tertiary,
       },
       Hover: {
         Label: Text.TextColors.Primary,
         Fill: Layer[1].Fill,
       },
       Current: {
-        Label: color[50],
+        Label: Grays[975],
         Fill: Layer.Highlight.Fill,
       },
     },
+    Transition: 'Transition',
   } as const
 
   const Tabs = {
-    Transition,
     UnderLined: {
       Inset: InsetUnderline,
+      Container_Border: Dark.Layer[1].Outline,
       Default: {
         Label: Text.TextColors.Secondary,
-        Outline: Color.Neutral[200],
+        Outline: Layer[2].Outline,
       },
       Hover: {
         Label: Text.TextColors.Highlight,
@@ -618,11 +705,10 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
       Inset: InsetOverline,
       Default: {
         Label: Text.TextColors.Secondary,
-        Outline: Color.Neutral[200],
+        Outline: Layer[2].Outline,
       },
       Hover: {
         Label: Text.TextColors.Primary,
-        Fill: Color.Neutral[200],
         Outline: Color.Neutral[500],
       },
       Current: {
@@ -630,38 +716,31 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
         Outline: Color.Primary[500],
       },
     },
+    Transition: 'Transition',
   } as const
 
   const Chips = {
-    BorderRadius: {
-      Clickable: 0,
-      NonClickable: '100px',
-    },
     Default: {
-      Label: Text.TextColors.Secondary,
-      Fill: Layer[1].Fill,
-      Stroke: Layer[2].Outline,
+      Label: Text.TextColors.Primary,
+      Fill: Layer[2].Fill,
+      Stroke: Dark.Badges.Border.Default,
     },
     Hover: {
       Label: Color.Neutral[50],
       Fill: Color.Neutral[900],
     },
     Current: {
-      Label: Color.Neutral[950],
-      Fill: Layer[2].Fill,
+      Label: Text.TextColors.Primary,
+      Fill: Layer[1].Fill,
       Outline: Layer.Highlight.Outline,
     },
+    BorderRadius: {
+      Clickable: '0',
+      NonClickable: '6.25rem', // 100px
+    },
   } as const
 
   const Badges = {
-    Label: {
-      Default: Dark.Badges.Label.Default,
-      Active: Dark.Badges.Label.Active,
-      Alert: Dark.Badges.Label.Alert,
-      Highlight: Dark.Badges.Label.Highlight,
-      Warning: Dark.Badges.Label.Warning,
-      Accent: Dark.Badges.Label.Accent,
-    },
     Border: {
       Default: Dark.Badges.Border.Default,
       Active: Dark.Badges.Border.Active,
@@ -670,6 +749,14 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
       Warning: Dark.Badges.Border.Warning,
       Accent: Dark.Badges.Border.Accent,
     },
+    Label: {
+      Default: Dark.Badges.Label.Default,
+      Active: Dark.Badges.Label.Active,
+      Alert: Dark.Badges.Label.Alert,
+      Highlight: Dark.Badges.Label.Highlight,
+      Warning: Dark.Badges.Label.Warning,
+      Accent: Dark.Badges.Label.Accent,
+    },
     Fill: {
       Default: Dark.Badges.Fill.Default,
       Active: Dark.Badges.Fill.Active,
@@ -682,7 +769,7 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
 
   const Chart = {
     LiquidationZone: {
-      Current: Oranges[950],
+      Current: Oranges[900],
       Future: Blues[800],
     },
     Candles: {
@@ -692,7 +779,7 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
     Lines: {
       Positive: Greens[300],
       Negative: Reds[500],
-      Line1: Color.Primary[400],
+      Line1: Color.Primary[500],
       Line2: Yellows[500],
       Line3: Color.Secondary[500],
     },
@@ -714,40 +801,52 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
   } as const
 
   const Table = {
-    Header: { Fill: Dark.Tables.Header.Fill },
+    Header: {
+      Fill: Dark.Tables.Header.Fill,
+      'Label_&_icon': {
+        Default: Dark.Tables.Header.Label.Default,
+        Hover: Dark.Tables.Header.Label.Hover,
+        Active: Dark.Tables.Header.Label.Active,
+      },
+    },
     Row: {
-      Default: Dark.Layer[1].Fill,
-      Selected: Dark.Layer.TypeAction.Selected,
-      Hover: Dark.Layer.TypeAction.Hover,
+      Default: Dark.Tables.Row.Default,
+      Selected: Dark.Tables.Row.Selected,
+      Hover: Dark.Tables.Row.Hover,
     },
   } as const
 
-  const InputBaseDefaultFill = color[900]
+  const InputBaseDefaultFill = Grays[900]
+
   const Inputs = {
     Base: {
       Default: {
-        Fill: InputBaseDefaultFill,
+        Fill: {
+          Default: Grays[900],
+          Active: Grays[900],
+        },
         Border: {
-          Default: color[800],
+          Default: Grays[800],
           Active: Dark.Text.Highlight,
-          Filled: color[75],
+          Filled: Grays[75],
           Error: Reds[500],
         },
       },
       Nested: {
-        Nested: color[850],
-        Fill: color[850],
+        Nested: Grays[850],
+        Fill: Grays[850],
         Border: {
-          Default: color[600],
+          Default: Grays[600],
           Active: Dark.Text.Highlight,
-          Filled: color[75],
+          Filled: Grays[75],
           Error: Reds[500],
         },
       },
     },
     Large: {
       Default: {
-        Fill: InputBaseDefaultFill,
+        Fill: Grays[900],
+        Outline: Grays[800],
       },
     },
   } as const
@@ -765,16 +864,8 @@ export const createDarkDesign = (Dark: typeof plain.Dark | typeof inverted.Dark)
   } as const
 
   const Switch = {
-    Default: {
-      Fill: Layer[1].Fill,
-      Outline: Color.Neutral[400],
-      Label: Color.Primary[500],
-    },
-    Checked: {
-      Fill: Color.Primary[500],
-      Outline: Color.Neutral[400],
-      Label: color[50],
-    },
+    Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] },
+    Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] },
   } as const
 
   return {
@@ -800,22 +891,44 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
     Neutral: Grays,
     Primary: Violets,
     Secondary: Greens,
-    Tertiary: Reds,
+    Tertiary: {
+      '200': Reds[200],
+      '300': Yellows[500],
+      '400': Oranges[500],
+      '600': Reds[500],
+    },
   } as const
 
   const Layer = {
-    '1': Chad.Layer[1],
-    '2': Chad.Layer[2],
-    '3': Chad.Layer[3],
+    '1': {
+      Fill: Chad.Layer[1].Fill,
+      Outline: Chad.Layer[1].Outline,
+    },
+    '2': {
+      Fill: Chad.Layer[2].Fill,
+      Outline: Chad.Layer[2].Outline,
+    },
+    '3': {
+      Fill: Chad.Layer[3].Fill,
+      Outline: Chad.Layer[3].Outline,
+    },
     App: {
       Background: '#bdbbec',
     },
+    Feedback: {
+      Info: Chad.Layer.Feedback.Info,
+      Success: Chad.Layer.Feedback.Success,
+      Warning: Chad.Layer.Feedback.Warning,
+      Error: Chad.Layer.Feedback.Error,
+    },
+    TypeAction: {
+      Selected: Chad.Layer.TypeAction.Selected,
+      Hover: Chad.Layer.TypeAction.Hover,
+    },
     Highlight: {
       Fill: Chad.Layer.Highlight,
-      Outline: Chad.Layer.Highlight,
+      Outline: Color.Primary[500],
     },
-    TypeAction: Chad.Layer.TypeAction,
-    Feedback: Chad.Layer.Feedback,
   } as const
 
   const Text = {
@@ -825,8 +938,34 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
       Tertiary: Chad.Text.Tertiary,
       Highlight: Chad.Text.Highlight,
       Disabled: Chad.Text.Disabled,
-      Feedback: Chad.Text.Feedback,
-      FilledFeedback: { ...Chad.Text.FilledFeedback },
+      FilledFeedback: {
+        Info: {
+          Primary: Chad.Text.FilledFeedback.Info.Primary,
+          Secondary: Chad.Text.FilledFeedback.Info.Secondary,
+        },
+        Highlight: {
+          Primary: Chad.Text.FilledFeedback.Highlight.Primary,
+          Secondary: Chad.Text.FilledFeedback.Highlight.Secondary,
+        },
+        Warning: {
+          Primary: Chad.Text.FilledFeedback.Warning.Primary,
+          Secondary: Chad.Text.FilledFeedback.Warning.Secondary,
+        },
+        Alert: {
+          Primary: Chad.Text.FilledFeedback.Alert.Primary,
+          Secondary: Chad.Text.FilledFeedback.Alert.Secondary,
+        },
+        Success: {
+          Primary: Chad.Text.FilledFeedback.Success.Primary,
+          Secondary: Chad.Text.FilledFeedback.Success.Secondary,
+        },
+      },
+      Feedback: {
+        Success: Chad.Text.Feedback.Success,
+        Warning: Chad.Text.Feedback.Warning,
+        Error: Chad.Text.Feedback.Error,
+        Inverted: Grays[50],
+      },
     },
     FontFamily: {
       Heading: 'Minecraft',
@@ -837,8 +976,14 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
   } as const
 
   const Button = {
-    Focus_Outline: Color.Primary[600],
-    Transition,
+    Focus_Outline_Width: '0.125rem', // 2px
+    Focus_Outline: Color.Primary[500],
+    Radius: {
+      xs: '0',
+      sm: '0',
+      md: '0',
+      lg: '0',
+    },
     Primary: {
       Default: {
         Label: Grays[50],
@@ -869,8 +1014,8 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
     },
     Outlined: {
       Default: {
-        Label: Grays[950],
-        Outline: Grays[300],
+        Label: Text.TextColors.Primary,
+        Outline: Text.TextColors.Primary,
       },
       Hover: {
         Label: Violets[500],
@@ -878,7 +1023,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
       },
       Disabled: {
         Label: Text.TextColors.Disabled,
-        Outline: Violets[200],
+        Outline: Text.TextColors.Disabled,
       },
     },
     Ghost: {
@@ -886,10 +1031,12 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
         Label: Text.TextColors.Highlight,
       },
       Hover: {
-        Label: Grays[800],
+        Label: Violets[800],
+        Fill: Transparent,
       },
       Disabled: {
         Label: Text.TextColors.Disabled,
+        Fill: Transparent,
       },
     },
     Success: {
@@ -898,7 +1045,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
         Fill: Greens[400],
       },
       Hover: {
-        Label: Greens[500],
+        Label: Greens[400],
         Fill: Grays[900],
       },
       Disabled: {
@@ -908,40 +1055,41 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
     },
     Error: {
       Default: {
-        Label: Grays[50],
+        Label: Grays[10],
         Fill: Reds[500],
       },
       Hover: {
-        Label: Reds[400],
-        Fill: Grays[900],
+        Label: Reds[500],
+        Fill: Grays[10],
       },
       Disabled: {
-        Label: Grays[300],
-        Fill: Reds[700],
+        Label: Grays[500],
+        Fill: Reds[800],
       },
     },
     Navigation: {
       Default: {
-        Label: Text.TextColors.Secondary,
+        Label: Text.TextColors.Tertiary,
       },
       Hover: {
         Label: Text.TextColors.Primary,
         Fill: Layer[1].Fill,
       },
       Current: {
-        Label: Grays[50],
+        Label: Grays[10],
         Fill: Layer.Highlight.Fill,
       },
     },
+    Transition: 'Transition',
   } as const
 
   const Tabs = {
-    Transition,
     UnderLined: {
       Inset: InsetUnderline,
+      Container_Border: Layer[1].Outline,
       Default: {
         Label: Text.TextColors.Secondary,
-        Outline: Color.Neutral[200],
+        Outline: Layer[2].Outline,
       },
       Hover: {
         Label: Text.TextColors.Highlight,
@@ -954,7 +1102,7 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
     },
     Contained: {
       Default: {
-        Label: Color.Neutral[50],
+        Label: Chad.Text.FilledFeedback.Highlight.Secondary,
         Fill: Color.Primary[950],
       },
       Hover: {
@@ -971,11 +1119,10 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
       Inset: InsetOverline,
       Default: {
         Label: Text.TextColors.Secondary,
-        Outline: Color.Neutral[200],
+        Outline: Layer[2].Outline,
       },
       Hover: {
         Label: Text.TextColors.Primary,
-        Fill: Color.Neutral[200],
         Outline: Color.Neutral[500],
       },
       Current: {
@@ -983,38 +1130,31 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
         Outline: Color.Primary[500],
       },
     },
+    Transition: 'Transition',
   } as const
 
   const Chips = {
-    BorderRadius: {
-      Clickable: 0,
-      NonClickable: 0,
-    },
     Default: {
       Label: Text.TextColors.Secondary,
       Fill: Layer[1].Fill,
-      Stroke: Layer[2].Outline,
+      Stroke: Chad.Badges.Border.Default,
     },
     Hover: {
       Label: Color.Neutral[50],
       Fill: Color.Primary[950],
     },
     Current: {
-      Label: Text.TextColors.Primary,
+      Label: Text.TextColors.Highlight,
       Fill: Layer[2].Fill,
       Outline: Layer.Highlight.Outline,
     },
+    BorderRadius: {
+      Clickable: '0',
+      NonClickable: '0',
+    },
   } as const
 
   const Badges = {
-    Label: {
-      Default: Chad.Badges.Label.Default,
-      Active: Chad.Badges.Label.Active,
-      Alert: Chad.Badges.Label.Alert,
-      Highlight: Chad.Badges.Label.Highlight,
-      Warning: Chad.Badges.Label.Warning,
-      Accent: Chad.Badges.Label.Accent,
-    },
     Border: {
       Default: Chad.Badges.Border.Default,
       Active: Chad.Badges.Border.Active,
@@ -1023,6 +1163,14 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
       Warning: Chad.Badges.Border.Warning,
       Accent: Chad.Badges.Border.Accent,
     },
+    Label: {
+      Default: Chad.Badges.Label.Default,
+      Active: Chad.Badges.Label.Active,
+      Alert: Chad.Badges.Label.Alert,
+      Highlight: Chad.Badges.Label.Highlight,
+      Warning: Chad.Badges.Label.Warning,
+      Accent: Chad.Badges.Label.Accent,
+    },
     Fill: {
       Default: Chad.Badges.Fill.Default,
       Active: Chad.Badges.Fill.Active,
@@ -1067,21 +1215,32 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
   } as const
 
   const Table = {
-    Header: { Fill: Chad.Tables.Header.Fill },
+    Header: {
+      Fill: Chad.Tables.Header.Fill,
+      'Label_&_icon': {
+        Default: Chad.Tables.Header.Label.Default,
+        Hover: Chad.Tables.Header.Label.Active,
+        Active: Chad.Tables.Header.Label.Active,
+      },
+    },
     Row: {
-      Default: Chad.Layer[1].Fill,
-      Selected: Chad.Layer.TypeAction.Selected,
-      Hover: Chad.Layer.TypeAction.Hover,
+      Default: Chad.Tables.Row.Default,
+      Selected: Chad.Tables.Row.Selected,
+      Hover: Chad.Tables.Row.Hover,
     },
   } as const
 
   const InputBaseDefaultFill = Grays[100]
+
   const Inputs = {
     Base: {
       Default: {
-        Fill: InputBaseDefaultFill,
+        Fill: {
+          Default: Grays[100],
+          Active: Grays[100],
+        },
         Border: {
-          Default: Grays[200],
+          Default: Grays[400],
           Active: Violets[400],
           Filled: Violets[600],
           Error: Reds[500],
@@ -1093,14 +1252,15 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
         Border: {
           Default: Grays[200],
           Active: Violets[400],
-          Filled: Violets[600],
+          Filled: Violets[400],
           Error: Reds[500],
         },
       },
     },
     Large: {
       Default: {
-        Fill: InputBaseDefaultFill,
+        Fill: Grays[100],
+        Outline: Grays[200],
       },
     },
   } as const
@@ -1118,16 +1278,8 @@ export const createChadDesign = (Chad: typeof plain.Chad | typeof inverted.Chad)
   } as const
 
   const Switch = {
-    Default: {
-      Fill: Layer[1].Fill,
-      Outline: Color.Neutral[400],
-      Label: Color.Primary[500],
-    },
-    Checked: {
-      Fill: Color.Primary[500],
-      Outline: Color.Neutral[400],
-      Label: Grays[50],
-    },
+    Default: { Fill: Layer[1].Fill, Outline: Color.Neutral[400], Label: Color.Primary[500] },
+    Checked: { Fill: Color.Primary[500], Outline: Color.Neutral[400], Label: Grays[50] },
   } as const
 
   return {