diff --git a/packages/utils/theme/src/defaultTheme.ts b/packages/utils/theme/src/defaultTheme.ts
index a7f67fd4c..5671e288a 100644
--- a/packages/utils/theme/src/defaultTheme.ts
+++ b/packages/utils/theme/src/defaultTheme.ts
@@ -123,6 +123,12 @@ export const defaultTheme: Theme = {
     surfaceHovered: '#F7FAFD',
     surfaceDisabled: '#F8F8F9',
     surfaceFocused: '#FFFFFF',
+    // Surface container
+    surfaceContainer: '#EBEBED',
+    onSurfaceContainer: '#4A4950',
+    surfaceContainerHovered: '#F7FAFD',
+    surfaceContainerDisabled: '#F8F8F9',
+    surfaceContainerFocused: '#FFFFFF',
     // Surface Inverse
     surfaceInverse: '#252428',
     onSurfaceInverse: '#FFFFFF',
diff --git a/packages/utils/theme/src/defaultThemeDark.ts b/packages/utils/theme/src/defaultThemeDark.ts
index 89cf5af23..1f28ee5a0 100644
--- a/packages/utils/theme/src/defaultThemeDark.ts
+++ b/packages/utils/theme/src/defaultThemeDark.ts
@@ -111,6 +111,12 @@ export const defaultThemeDark: Theme = createTheme({
     surfaceHovered: '#FFFFFF', // use with 8% opacity
     surfaceDisabled: '#F8F8F9',
     surfaceFocused: '#FFFFFF', // use with 8% opacity
+    // Surface container
+    surfaceContainer: '#000000',
+    onSurfaceContainer: '#FFFFFF',
+    surfaceContainerHovered: '#FFFFFF',
+    surfaceContainerDisabled: '#F8F8F9',
+    surfaceContainerFocused: '#FFFFFF',
     // Surface Inverse
     surfaceInverse: '#F8F8F9',
     onSurfaceInverse: '#000000',
diff --git a/packages/utils/theme/src/types.ts b/packages/utils/theme/src/types.ts
index 0e4df5c5f..5bfee1291 100644
--- a/packages/utils/theme/src/types.ts
+++ b/packages/utils/theme/src/types.ts
@@ -125,6 +125,11 @@ export interface Theme {
     surfaceHovered: string
     surfaceDisabled: string
     surfaceFocused: string
+    surfaceContainer: string
+    onSurfaceContainer: string
+    surfaceContainerHovered: string
+    surfaceContainerDisabled: string
+    surfaceContainerFocused: string
     // Surface Inverse
     surfaceInverse: string
     onSurfaceInverse: string