diff --git a/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss b/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss
index 205e8038662d..ba5c31c9e740 100644
--- a/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss
+++ b/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.module.scss
@@ -17,6 +17,10 @@
   z-index: 2;
   background-color: $colors--background;
 
+  &__white-background {
+    background-color: $colors--white
+  }
+
   &__list {
     display: flex;
     justify-content: flex-start;
diff --git a/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx b/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx
index e4f9fb8c3129..19afded4c547 100644
--- a/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx
+++ b/pkg/ui/workspaces/cluster-ui/src/pageConfig/pageConfig.tsx
@@ -8,9 +8,10 @@
 // by the Apache License, Version 2.0, included in the file
 // licenses/APL.txt.
 
-import React from "react";
+import React, { useContext } from "react";
 import classnames from "classnames/bind";
 import styles from "./pageConfig.module.scss";
+import { CockroachCloudContext } from "../contexts";
 
 export interface PageConfigProps {
   layout?: "list" | "spread";
@@ -20,13 +21,15 @@ export interface PageConfigProps {
 const cx = classnames.bind(styles);
 
 export function PageConfig(props: PageConfigProps): React.ReactElement {
+  const isCockroachCloud = useContext(CockroachCloudContext);
+
   const classes = cx({
     "page-config__list": props.layout !== "spread",
     "page-config__spread": props.layout === "spread",
   });
 
   return (
-    <div className={cx("page-config")}>
+    <div className={cx("page-config", { "page-config__white-background": isCockroachCloud })}>
       <ul className={classes}>{props.children}</ul>
     </div>
   );