diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js
index 8ddbd7678a..54323ba55f 100644
--- a/packages/builder/src/builderStore/store/theme.js
+++ b/packages/builder/src/builderStore/store/theme.js
@@ -1,11 +1,10 @@
-import { createLocalStorageStore } from "@budibase/frontend-core"
+import { Constants, createLocalStorageStore } from "@budibase/frontend-core"
 
 export const getThemeStore = () => {
   const themeElement = document.documentElement
 
   const initialValue = {
     theme: "darkest",
-    options: ["lightest", "light", "dark", "darkest", "nord"],
   }
   const store = createLocalStorageStore("bb-theme", initialValue)
 
@@ -17,7 +16,7 @@ export const getThemeStore = () => {
       return
     }
 
-    state.options.forEach(option => {
+    Constants.ThemeOptions.forEach(option => {
       themeElement.classList.toggle(
         `spectrum--${option}`,
         option === state.theme
diff --git a/packages/builder/src/main.js b/packages/builder/src/main.js
index 8ab2c16ba2..dc1e1cf1bf 100644
--- a/packages/builder/src/main.js
+++ b/packages/builder/src/main.js
@@ -6,6 +6,7 @@ import "@spectrum-css/vars/dist/spectrum-dark.css"
 import "@spectrum-css/vars/dist/spectrum-light.css"
 import "@spectrum-css/vars/dist/spectrum-lightest.css"
 import "@budibase/frontend-core/src/themes/nord.css"
+import "@budibase/frontend-core/src/themes/midnight.css"
 import "@spectrum-css/page/dist/index-vars.css"
 import "./global.css"
 import { suppressWarnings } from "./helpers/warnings"
diff --git a/packages/builder/src/pages/builder/portal/settings/theming.svelte b/packages/builder/src/pages/builder/portal/settings/theming.svelte
index 2a2aaa8a3b..2a8e82f0e5 100644
--- a/packages/builder/src/pages/builder/portal/settings/theming.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/theming.svelte
@@ -2,6 +2,7 @@
   import { Layout, Heading, Body, Divider, Label, Select } from "@budibase/bbui"
   import { themeStore } from "builderStore"
   import { capitalise } from "helpers"
+  import { Constants } from "@budibase/frontend-core"
 </script>
 
 <Layout noPadding>
@@ -14,7 +15,7 @@
     <div class="field">
       <Label size="L">Builder theme</Label>
       <Select
-        options={$themeStore.options}
+        options={Constants.ThemeOptions}
         bind:value={$themeStore.theme}
         placeholder={null}
         getOptionLabel={capitalise}