diff --git a/packages/builder/src/builderStore/store/theme.js b/packages/builder/src/builderStore/store/theme.js
index d4d7460ed2..77b84ca78c 100644
--- a/packages/builder/src/builderStore/store/theme.js
+++ b/packages/builder/src/builderStore/store/theme.js
@@ -21,6 +21,10 @@ export const getThemeStore = () => {
         `spectrum--${option}`,
         option === state.theme
       )
+
+      // Ensure darkest is always added as this is the base class for custom
+      // themes
+      themeElement.classList.add("spectrum--darkest")
     })
   })
 
diff --git a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
index cdab47db66..59a8671bfd 100644
--- a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
+++ b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
@@ -20,6 +20,10 @@
       label: "Darkest",
       value: "spectrum--darkest",
     },
+    {
+      label: "Nord",
+      value: "spectrum--nord",
+    },
   ]
 
   const onChangeTheme = async theme => {
diff --git a/packages/builder/src/main.js b/packages/builder/src/main.js
index bc5ec4f009..8ab2c16ba2 100644
--- a/packages/builder/src/main.js
+++ b/packages/builder/src/main.js
@@ -5,6 +5,7 @@ import "@spectrum-css/vars/dist/spectrum-darkest.css"
 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 "@spectrum-css/page/dist/index-vars.css"
 import "./global.css"
 import { suppressWarnings } from "./helpers/warnings"
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index e8ed7e9538..8af065f972 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -77,7 +77,7 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    class="spectrum spectrum--medium {$themeStore.theme}"
+    class="spectrum spectrum--medium spectrum--darkest {$themeStore.theme}"
   >
     {#if permissionError}
       <div class="error">
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index 5af62201e5..71acee5eff 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -1,10 +1,11 @@
 import "@spectrum-css/vars/dist/spectrum-global.css"
 import "@spectrum-css/vars/dist/spectrum-medium.css"
 import "@spectrum-css/vars/dist/spectrum-large.css"
-import "@spectrum-css/vars/dist/spectrum-lightest.css"
-import "@spectrum-css/vars/dist/spectrum-light.css"
-import "@spectrum-css/vars/dist/spectrum-dark.css"
 import "@spectrum-css/vars/dist/spectrum-darkest.css"
+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 "@spectrum-css/page/dist/index-vars.css"
 
 // Non user-facing components
@@ -34,6 +35,7 @@ export { default as markdownviewer } from "./MarkdownViewer.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./table"
+
 export * from "./blocks"
 export * from "./dynamic-filter"