diff --git a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte b/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
index 5dc16cb3d..b7a6d4e6a 100644
--- a/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
+++ b/packages/builder/src/components/settings/ThemeEditorDropdown.svelte
@@ -1,27 +1,23 @@
 <script>
-  import { Icon, Label, Popover } from "@budibase/bbui"
+  import { Icon, Label, Modal, ModalContent } from "@budibase/bbui"
   import ThemeEditor from "./ThemeEditor.svelte"
 
-  let anchor
-  let popover
+  let modal
 </script>
 
-<div class="topnavitemright" on:click={popover.show} bind:this={anchor}>
+<div class="topnavitemright" on:click={modal.show}>
   <Icon hoverable name="ColorFill" />
 </div>
-<div class="dropdown">
-  <Popover bind:this={popover} {anchor} align="right">
-    <div class="content">
-      <Label extraSmall grey>Theme</Label>
-      <ThemeEditor />
-    </div>
-  </Popover>
-</div>
+<Modal bind:this={modal}>
+  <ModalContent
+    title="Builder Theme"
+    confirmText="Done"
+    showCancelButton={false}>
+    <ThemeEditor />
+  </ModalContent>
+</Modal>
 
 <style>
-  .dropdown {
-    z-index: 2;
-  }
   .topnavitemright {
     cursor: pointer;
     color: var(--grey-7);
@@ -35,7 +31,4 @@
     height: 24px;
     width: 24px;
   }
-  .content {
-    padding: var(--spacing-xl);
-  }
 </style>