diff --git a/packages/builder/src/components/settings/SettingsModal.svelte b/packages/builder/src/components/settings/SettingsModal.svelte
index 9b83b506ba..5e69489830 100644
--- a/packages/builder/src/components/settings/SettingsModal.svelte
+++ b/packages/builder/src/components/settings/SettingsModal.svelte
@@ -1,28 +1,6 @@
 <script>
   import { General, DangerZone, APIKeys } from "./tabs"
-  import { Switcher, ModalContent } from "@budibase/bbui"
-
-  const tabs = [
-    {
-      title: "General",
-      key: "GENERAL",
-      component: General,
-    },
-    {
-      title: "API Keys",
-      key: "API_KEYS",
-      component: APIKeys,
-    },
-    {
-      title: "Danger Zone",
-      key: "DANGERZONE",
-      component: DangerZone,
-    },
-  ]
-
-  let value = "GENERAL"
-
-  $: selectedTab = tabs.find(tab => tab.key === value).component
+  import { ModalContent, Tab, Tabs } from "@budibase/bbui"
 </script>
 
 <ModalContent
@@ -30,9 +8,17 @@
   showConfirmButton={false}
   showCancelButton={false}>
   <div class="container">
-    <Switcher headings={tabs} bind:value>
-      <svelte:component this={selectedTab} />
-    </Switcher>
+    <Tabs selected="General">
+      <Tab title="General">
+        <General />
+      </Tab>
+      <Tab title="API Keys">
+        <APIKeys />
+      </Tab>
+      <Tab title="Danger Zone">
+        <DangerZone />
+      </Tab>
+    </Tabs>
   </div>
 </ModalContent>