diff --git a/packages/builder/src/components/design/AppPanel/AppPanel.svelte b/packages/builder/src/components/design/AppPanel/AppPanel.svelte
index d34835b43a..78b6dce457 100644
--- a/packages/builder/src/components/design/AppPanel/AppPanel.svelte
+++ b/packages/builder/src/components/design/AppPanel/AppPanel.svelte
@@ -1,8 +1,6 @@
 <script>
   import ComponentSelectionList from "./ComponentSelectionList.svelte"
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
-  import ThemeEditor from "./ThemeEditor.svelte"
-  import AppThemeSelect from "./AppThemeSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
   import { store } from "builderStore"
 </script>
@@ -13,11 +11,6 @@
     {#if $store.clientFeatures.devicePreview}
       <DevicePreviewSelect />
     {/if}
-    {#if $store.clientFeatures.customThemes}
-      <ThemeEditor />
-    {:else if $store.clientFeatures.spectrumThemes}
-      <AppThemeSelect />
-    {/if}
   </div>
   <div class="content">
     {#key $store.version}
diff --git a/packages/builder/src/components/design/AppPanel/AppThemeSelect.svelte b/packages/builder/src/pages/builder/app/[application]/design/theme/_components/AppThemeSelect.svelte
similarity index 100%
rename from packages/builder/src/components/design/AppPanel/AppThemeSelect.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/theme/_components/AppThemeSelect.svelte
diff --git a/packages/builder/src/components/design/AppPanel/ThemeEditor.svelte b/packages/builder/src/pages/builder/app/[application]/design/theme/_components/ThemeEditor.svelte
similarity index 98%
rename from packages/builder/src/components/design/AppPanel/ThemeEditor.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/theme/_components/ThemeEditor.svelte
index 933c9b27a7..9fb0c0c1b8 100644
--- a/packages/builder/src/components/design/AppPanel/ThemeEditor.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/theme/_components/ThemeEditor.svelte
@@ -73,7 +73,7 @@
 </script>
 
 <div class="container">
-  <ActionButton icon="Brush" on:click={modal.show}>Theme</ActionButton>
+  <ActionButton icon="Brush" on:click={modal.show}>Edit theme</ActionButton>
 </div>
 <Modal bind:this={modal}>
   <ModalContent
diff --git a/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
index 57d4104f25..ef86bcdc20 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
@@ -1 +1,15 @@
-Theme
+<script>
+  import NavigationPanel from "components/design/NavigationPanel/NavigationPanel.svelte"
+  import { Body, Layout } from "@budibase/bbui"
+  import AppPanel from "components/design/AppPanel/AppPanel.svelte"
+  import ThemeEditor from "./_components/ThemeEditor.svelte"
+</script>
+
+<NavigationPanel title="Theme">
+  <Layout paddingX="L" paddingY="XL" gap="S">
+    <Body>Your theme is set across all the screens within your app</Body>
+    <ThemeEditor />
+  </Layout>
+</NavigationPanel>
+
+<AppPanel />
