diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts
index 5136bfda0..7da397736 100644
--- a/src/theme/colors/colors.ts
+++ b/src/theme/colors/colors.ts
@@ -104,7 +104,8 @@ export const charcoal = {
 
 export const gray = {
   10: '#1A1A1A',
-  20: '#212121'
+  20: '#212121',
+  30: '#303030'
 };
 
 export const accentGrey = {
diff --git a/src/theme/palette.ts b/src/theme/palette.ts
index 8ecfeec2f..7559a626b 100644
--- a/src/theme/palette.ts
+++ b/src/theme/palette.ts
@@ -19,6 +19,7 @@ declare module '@mui/material/styles' {
       default: string;
     };
     tabs?: string;
+    elevatedComponents?: string;
     card?: string;
     tertiary?: string;
     hover?: string;
@@ -198,6 +199,7 @@ export const lightModePalette: PaletteOptions = {
     tertiary: Colors.accentGrey[80],
     tabs: Colors.accentGrey[100], // TODO: Make this name or token to more genric
     card: Colors.charcoal[100],
+    elevatedComponents: Colors.WHITE,
     hover: Colors.charcoal[90],
     supplementary: Colors.accentGrey[40],
     blur: {
@@ -316,6 +318,7 @@ export const darkModePalette: PaletteOptions = {
     tertiary: Colors.accentGrey[30],
     tabs: Colors.gray[10], // TODO: Make this name or token to more genric
     card: Colors.gray[20],
+    elevatedComponents: Colors.gray[30],
     hover: Colors.charcoal[20],
     supplementary: Colors.accentGrey[40],
     blur: {