diff --git a/configs/app-config/app-config.local.example.yaml b/configs/app-config/app-config.local.example.yaml
index 458dcd97..3571c677 100644
--- a/configs/app-config/app-config.local.example.yaml
+++ b/configs/app-config/app-config.local.example.yaml
@@ -14,22 +14,30 @@ app:
     # If using a different logo, replace these lines with your own image(s)
     # fullLogo: data:image/svg+xml;base64,your-image-goes-here==
     # - or -
-    # fullLogo: 
+    # fullLogo:
     #   dark: data:image/svg+xml;base64,your-image-in-dark-mode-goes-here==
     #   light: data:image/svg+xml;base64,your-image-in-light-mode-goes-here==
     # iconLogo: data:image/svg+xml;base64,your-image-goes-here==
     fullLogoWidth: ${FULL_LOGO_WIDTH}
     theme:
       light:
-        primaryColor: ${PRIMARY_LIGHT_COLOR}
-        headerColor1: ${HEADER_LIGHT_COLOR_1}
-        headerColor2: ${HEADER_LIGHT_COLOR_2}
-        navigationIndicatorColor: ${NAV_INDICATOR_LIGHT_COLOR}
+        palette:
+          primary:
+            main: ${PRIMARY_LIGHT_COLOR}
+          navigation:
+            indicator: ${NAV_INDICATOR_LIGHT_COLOR}
+        pageTheme:
+          default:
+            backgroundColor: ${HEADER_LIGHT_COLOR_1}, ${HEADER_LIGHT_COLOR_2}
       dark:
-        primaryColor: ${PRIMARY_DARK_COLOR}
-        headerColor1: ${HEADER_DARK_COLOR_1}
-        headerColor2: ${HEADER_DARK_COLOR_2}
-        navigationIndicatorColor: ${NAV_INDICATOR_DARK_COLOR}
+        palette:
+          primary:
+            main: ${PRIMARY_DARK_COLOR}
+          navigation:
+            indicator: ${NAV_INDICATOR_DARK_COLOR}
+        pageTheme:
+          default:
+            backgroundColor: ${HEADER_DARK_COLOR_1}, ${HEADER_DARK_COLOR_2}
 
 # Tech Radar Plugin Example - uncomment with plugin override to use
 # Replace URL with your own hosted json to visualize data in Tech Radar
diff --git a/configs/app-config/app-config.yaml b/configs/app-config/app-config.yaml
index 71144b53..ff986460 100644
--- a/configs/app-config/app-config.yaml
+++ b/configs/app-config/app-config.yaml
@@ -29,15 +29,24 @@ app:
     fullLogoWidth: ${FULL_LOGO_WIDTH}
     theme:
       light:
-        primaryColor: ${PRIMARY_LIGHT_COLOR}
-        headerColor1: ${HEADER_LIGHT_COLOR_1}
-        headerColor2: ${HEADER_LIGHT_COLOR_2}
-        navigationIndicatorColor: ${NAV_INDICATOR_LIGHT_COLOR}
+        palette:
+          primary:
+            main: ${PRIMARY_LIGHT_COLOR}
+          navigation:
+            indicator: ${NAV_INDICATOR_LIGHT_COLOR}
+        pageTheme:
+          default:
+            backgroundColor: ${HEADER_LIGHT_COLOR_1}, ${HEADER_LIGHT_COLOR_2}
       dark:
-        primaryColor: ${PRIMARY_DARK_COLOR}
-        headerColor1: ${HEADER_DARK_COLOR_1}
-        headerColor2: ${HEADER_DARK_COLOR_2}
-        navigationIndicatorColor: ${NAV_INDICATOR_DARK_COLOR}
+        palette:
+          primary:
+            main: ${PRIMARY_DARK_COLOR}
+          navigation:
+            indicator: ${NAV_INDICATOR_DARK_COLOR}
+        pageTheme:
+          default:
+            backgroundColor: ${HEADER_DARK_COLOR_1}, ${HEADER_DARK_COLOR_2}
+
   quickstart:
     # Quickstarts for all users (both new admins and new developers)
     - title: 'What is Developer Hub?'