diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
index 437909972..b481280c2 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutListPanel.svelte
@@ -1,31 +1,25 @@
 <script>
   import Panel from "components/design/Panel.svelte"
-  import { Banner, Layout } from "@budibase/bbui"
+  import { Layout } from "@budibase/bbui"
   import NavItem from "components/common/NavItem.svelte"
   import { store } from "builderStore"
   import LayoutDropdownMenu from "./LayoutDropdownMenu.svelte"
 </script>
 
 <Panel title="Layouts" borderRight>
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Banner
-      type="warning"
-      showCloseButton={false}
-      extraButtonText="View details"
-      extraButtonAction={() => {}}
-    >
-      Custom layouts are being deprecated. They will be removed on [date].
-    </Banner>
+  <Layout paddingY="XL" paddingX="">
+    <div>
+      {#each $store.layouts as layout (layout._id)}
+        <NavItem
+          icon="Experience"
+          indentLevel={0}
+          selected={$store.selectedLayoutId === layout._id}
+          text={layout.name}
+          on:click={() => ($store.selectedLayoutId = layout._id)}
+        >
+          <LayoutDropdownMenu {layout} />
+        </NavItem>
+      {/each}
+    </div>
   </Layout>
-  {#each $store.layouts as layout (layout._id)}
-    <NavItem
-      icon="Experience"
-      indentLevel={0}
-      selected={$store.selectedLayoutId === layout._id}
-      text={layout.name}
-      on:click={() => ($store.selectedLayoutId = layout._id)}
-    >
-      <LayoutDropdownMenu {layout} />
-    </NavItem>
-  {/each}
 </Panel>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
index 77431c703..8e1228d5a 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/layouts/[layoutId]/_components/LayoutSettingsPanel.svelte
@@ -1,7 +1,7 @@
 <script>
   import Panel from "components/design/Panel.svelte"
   import { store, selectedLayout } from "builderStore"
-  import { Layout, Body, Button, notifications } from "@budibase/bbui"
+  import { Layout, Body, Button, Banner, notifications } from "@budibase/bbui"
   import { Component } from "builderStore/store/screenTemplates/utils/Component"
 
   const copyLayout = () => {
@@ -37,6 +37,14 @@
 
 <Panel title={$selectedLayout?.name} icon="Experience" borderLeft>
   <Layout paddingX="L" paddingY="XL" gap="S">
+    <Banner
+      type="warning"
+      showCloseButton={false}
+      extraButtonText="View details"
+      extraButtonAction={() => {}}
+    >
+      Custom layouts are being deprecated. They will be removed on [date].
+    </Banner>
     <Body size="S">
       You can save the content of this layout by pressing the button below.
     </Body>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
index 66994cd23..0a6ad17f0 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/theme/_components/AppThemeSelect.svelte
@@ -16,13 +16,6 @@
     try {
       const theme = ThemeOptions[e.detail] ?? ThemeOptions[2]
       await store.actions.theme.save(theme)
-      await store.actions.navigation.save({
-        ...get(store).navigation,
-        navBackground:
-          theme === "spectrum--light"
-            ? "var(--spectrum-global-color-gray-50)"
-            : "var(--spectrum-global-color-gray-100)",
-      })
     } catch (error) {
       notifications.error("Error updating theme")
     }
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 337c8b9e0..a1a0c6df7 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -276,7 +276,7 @@ const performAppCreate = async (ctx: any) => {
       navigation: "Top",
       title: name,
       navWidth: "Large",
-      navBackground: "var(--spectrum-global-color-gray-50)",
+      navBackground: "var(--spectrum-global-color-gray-100)",
       links: [
         {
           url: "/home",
