diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts
index 45c94f786..5136bfda0 100644
--- a/src/theme/colors/colors.ts
+++ b/src/theme/colors/colors.ts
@@ -102,6 +102,11 @@ export const charcoal = {
   10: '#000D12'
 };
 
+export const gray = {
+  10: '#1A1A1A',
+  20: '#212121'
+};
+
 export const accentGrey = {
   100: '#F6F8F8',
   90: '#E8EFF3',
diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts
index 096a406b8..3d1a19607 100644
--- a/src/theme/colors/index.ts
+++ b/src/theme/colors/index.ts
@@ -57,6 +57,7 @@ export {
   darkSlateGray,
   darkTeal,
   eerieBlack,
+  gray,
   green,
   jungleGreen,
   keppel,
diff --git a/src/theme/components/tab.modifier.ts b/src/theme/components/tab.modifier.ts
index ed7ca5875..58e49f42e 100644
--- a/src/theme/components/tab.modifier.ts
+++ b/src/theme/components/tab.modifier.ts
@@ -6,7 +6,7 @@ export const MuiTab: Components<Theme>['MuiTab'] = {
       const {
         palette: {
           text: { default: defaultText },
-          background: { default: defaultBackground }
+          background: { tabs: defaultBackground }
         }
       } = theme;
       return {
diff --git a/src/theme/components/tabs.modifier.ts b/src/theme/components/tabs.modifier.ts
index 63173a06c..1fb4ed457 100644
--- a/src/theme/components/tabs.modifier.ts
+++ b/src/theme/components/tabs.modifier.ts
@@ -3,7 +3,7 @@ import { Components, Theme } from '@mui/material';
 export const MuiTabs: Components<Theme>['MuiTabs'] = {
   styleOverrides: {
     root: ({ theme }) => ({
-      backgroundColor: theme.palette.background.default
+      backgroundColor: theme.palette.background.tabs
     }),
     indicator: ({ theme }) => ({
       backgroundColor: theme.palette.background.brand?.default
diff --git a/src/theme/palette.ts b/src/theme/palette.ts
index 4fa6034d8..a8dda89f0 100644
--- a/src/theme/palette.ts
+++ b/src/theme/palette.ts
@@ -195,7 +195,7 @@ export const lightModePalette: PaletteOptions = {
     default: Colors.charcoal[100],
     secondary: Colors.accentGrey[90],
     tertiary: Colors.accentGrey[80],
-    tabs: Colors.charcoal[70],
+    tabs: Colors.accentGrey[100], // TODO: Make this name or token to more genric
     hover: Colors.charcoal[90],
     supplementary: Colors.accentGrey[40],
     blur: {
@@ -312,7 +312,7 @@ export const darkModePalette: PaletteOptions = {
     default: Colors.charcoal[10],
     secondary: Colors.accentGrey[20],
     tertiary: Colors.accentGrey[30],
-    tabs: Colors.charcoal[110],
+    tabs: Colors.gray[10], // TODO: Make this name or token to more genric
     hover: Colors.charcoal[20],
     supplementary: Colors.accentGrey[40],
     blur: {