diff --git a/packages/builder/src/components/settings/APIKeyModal.svelte b/packages/builder/src/components/settings/APIKeyModal.svelte
new file mode 100644
index 0000000000..6fb2c88634
--- /dev/null
+++ b/packages/builder/src/components/settings/APIKeyModal.svelte
@@ -0,0 +1,40 @@
+<script>
+  import { ModalContent } from "@budibase/bbui"
+  import { Body, notifications } from "@budibase/bbui"
+  import { auth } from "stores/portal"
+  import { onMount } from "svelte"
+  import CopyInput from "components/common/inputs/CopyInput.svelte"
+
+  let apiKey = null
+
+  async function generateAPIKey() {
+    try {
+      apiKey = await auth.generateAPIKey()
+      notifications.success("New API key generated")
+    } catch (err) {
+      notifications.error("Unable to generate new API key")
+    }
+    // need to return false to keep modal open
+    return false
+  }
+
+  onMount(async () => {
+    try {
+      apiKey = await auth.fetchAPIKey()
+    } catch (err) {
+      notifications.error("Unable to fetch API key")
+    }
+  })
+</script>
+
+<ModalContent
+  title="API Key"
+  showSecondaryButton
+  secondaryButtonText="Regenerate key"
+  secondaryAction={generateAPIKey}
+  showCancelButton={false}
+  confirmText="Close"
+>
+  <Body size="S">Your API key for accessing the Budibase public API:</Body>
+  <CopyInput bind:value={apiKey} />
+</ModalContent>
diff --git a/packages/builder/src/components/settings/UpdateUserInfoModal.svelte b/packages/builder/src/components/settings/ProfileModal.svelte
similarity index 89%
rename from packages/builder/src/components/settings/UpdateUserInfoModal.svelte
rename to packages/builder/src/components/settings/ProfileModal.svelte
index 5734f613ad..850bde2f35 100644
--- a/packages/builder/src/components/settings/UpdateUserInfoModal.svelte
+++ b/packages/builder/src/components/settings/ProfileModal.svelte
@@ -18,11 +18,7 @@
   }
 </script>
 
-<ModalContent
-  title="Update user information"
-  confirmText="Update information"
-  onConfirm={updateInfo}
->
+<ModalContent title="My profile" confirmText="Save" onConfirm={updateInfo}>
   <Body size="S">
     Personalise the platform by adding your first name and last name.
   </Body>
diff --git a/packages/builder/src/components/settings/ThemeModal.svelte b/packages/builder/src/components/settings/ThemeModal.svelte
new file mode 100644
index 0000000000..fd7460327a
--- /dev/null
+++ b/packages/builder/src/components/settings/ThemeModal.svelte
@@ -0,0 +1,16 @@
+<script>
+  import { ModalContent } from "@budibase/bbui"
+  import { Label, Select } from "@budibase/bbui"
+  import { themeStore } from "builderStore"
+  import { Constants } from "@budibase/frontend-core"
+</script>
+
+<ModalContent title="Theme">
+  <Select
+    options={Constants.Themes}
+    bind:value={$themeStore.theme}
+    placeholder={null}
+    getOptionLabel={x => x.name}
+    getOptionValue={x => x.class}
+  />
+</ModalContent>
diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte
index 4b2c336f6c..ad1b5ec7f8 100644
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@@ -17,7 +17,7 @@
   import { goto } from "@roxi/routify"
   import { AppStatus } from "constants"
   import { gradient } from "actions"
-  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
+  import ProfileModal from "components/settings/ProfileModal.svelte"
   import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
   import { processStringSync } from "@budibase/string-templates"
   import Spaceman from "assets/bb-space-man.svg"
@@ -185,7 +185,7 @@
     </Page>
   </div>
   <Modal bind:this={userInfoModal}>
-    <UpdateUserInfoModal />
+    <ProfileModal />
   </Modal>
   <Modal bind:this={changePasswordModal}>
     <ChangePasswordModal />
diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte
index 2a5b5ed4df..12f47d0f0d 100644
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@@ -13,15 +13,20 @@
   } from "@budibase/bbui"
   import { organisation, auth, admin as adminStore } from "stores/portal"
   import { onMount } from "svelte"
-  import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
+  import ProfileModal from "components/settings/ProfileModal.svelte"
   import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
+  import ThemeModal from "components/settings/ThemeModal.svelte"
+  import APIKeyModal from "components/settings/APIKeyModal.svelte"
   import Logo from "assets/bb-emblem.svg"
   import ConfigChecklist from "components/common/ConfigChecklist.svelte"
   // import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
 
   let loaded = false
+  let themeModal
+  let profileModal
   let userInfoModal
-  let changePasswordModal
+  let updatePasswordModal
+  let apiKeyModal
   let mobileMenuVisible = false
   let activeTab = "Apps"
 
@@ -201,19 +206,33 @@
               />
               <Icon size="XL" name="ChevronDown" />
             </div>
+            <MenuItem
+              icon="Moon"
+              on:click={() => themeModal.show()}
+              dataCy="theme"
+            >
+              Theme
+            </MenuItem>
             <MenuItem
               icon="UserEdit"
               on:click={() => userInfoModal.show()}
-              dataCy={"user-info"}
+              dataCy="user-info"
             >
-              Update user information
+              My profile
             </MenuItem>
             <MenuItem
               icon="LockClosed"
-              on:click={() => changePasswordModal.show()}
+              on:click={() => updatePasswordModal.show()}
             >
               Update password
             </MenuItem>
+            <MenuItem
+              icon="Key"
+              on:click={() => apiKeyModal.show()}
+              dataCy="api-key"
+            >
+              View API key
+            </MenuItem>
             <MenuItem icon="UserDeveloper" on:click={() => $goto("../apps")}>
               Close developer mode
             </MenuItem>
@@ -228,12 +247,18 @@
       <slot />
     </div>
   </div>
-  <Modal bind:this={userInfoModal}>
-    <UpdateUserInfoModal />
+  <Modal bind:this={themeModal}>
+    <ThemeModal />
   </Modal>
-  <Modal bind:this={changePasswordModal}>
+  <Modal bind:this={userInfoModal}>
+    <ProfileModal />
+  </Modal>
+  <Modal bind:this={updatePasswordModal}>
     <ChangePasswordModal />
   </Modal>
+  <Modal bind:this={apiKeyModal}>
+    <APIKeyModal />
+  </Modal>
 {/if}
 
 <style>
diff --git a/packages/builder/src/pages/builder/portal/settings/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
index 0ae25c17b4..7f92d8b710 100644
--- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte
@@ -10,11 +10,6 @@
   <Content>
     <div slot="side-nav">
       <SideNav>
-        <SideNavItem
-          text="API Key"
-          url={$url("./api")}
-          active={$isActive("./api")}
-        />
         <SideNavItem
           text="Auth"
           url={$url("./auth")}
@@ -35,11 +30,6 @@
           url={$url("./version")}
           active={$isActive("./version")}
         />
-        <SideNavItem
-          text="Theme"
-          url={$url("./theme")}
-          active={$isActive("./theme")}
-        />
       </SideNav>
     </div>
     <slot />
diff --git a/packages/builder/src/pages/builder/portal/settings/api.svelte b/packages/builder/src/pages/builder/portal/settings/api.svelte
deleted file mode 100644
index cee3dd3327..0000000000
--- a/packages/builder/src/pages/builder/portal/settings/api.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<script>
-  import {
-    Layout,
-    Heading,
-    Body,
-    Divider,
-    Button,
-    Label,
-    notifications,
-  } from "@budibase/bbui"
-  import { auth } from "stores/portal"
-  import { onMount } from "svelte"
-  import CopyInput from "components/common/inputs/CopyInput.svelte"
-
-  let apiKey = null
-
-  async function generateAPIKey() {
-    try {
-      apiKey = await auth.generateAPIKey()
-      notifications.success("New API key generated")
-    } catch (err) {
-      notifications.error("Unable to generate new API key")
-    }
-    // need to return false to keep modal open
-    return false
-  }
-
-  onMount(async () => {
-    try {
-      apiKey = await auth.fetchAPIKey()
-    } catch (err) {
-      notifications.error("Unable to fetch API key")
-    }
-  })
-</script>
-
-<Layout noPadding>
-  <Layout gap="XS" noPadding>
-    <Heading size="M">API Key</Heading>
-    <Body>Your API key to access the Budibase public API</Body>
-  </Layout>
-  <Divider />
-  <div class="fields">
-    <div class="field">
-      <Label size="L">API key</Label>
-      <CopyInput bind:value={apiKey} />
-    </div>
-  </div>
-  <div>
-    <Button secondary on:click={generateAPIKey}>Regenerate key</Button>
-  </div>
-</Layout>
-
-<style>
-  .fields {
-    display: grid;
-    grid-gap: var(--spacing-m);
-  }
-  .field {
-    display: grid;
-    grid-template-columns: 120px 1fr;
-    align-items: center;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/settings/index.svelte b/packages/builder/src/pages/builder/portal/settings/index.svelte
index 2d4630462c..842fe01be8 100644
--- a/packages/builder/src/pages/builder/portal/settings/index.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/index.svelte
@@ -1,4 +1,4 @@
 <script>
   import { redirect } from "@roxi/routify"
-  $redirect("./api")
+  $redirect("./auth")
 </script>
diff --git a/packages/builder/src/pages/builder/portal/settings/theme.svelte b/packages/builder/src/pages/builder/portal/settings/theme.svelte
deleted file mode 100644
index 2b08f3934b..0000000000
--- a/packages/builder/src/pages/builder/portal/settings/theme.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script>
-  import { Layout, Heading, Body, Divider, Label, Select } from "@budibase/bbui"
-  import { themeStore } from "builderStore"
-  import { Constants } from "@budibase/frontend-core"
-</script>
-
-<Layout noPadding>
-  <Layout gap="XS" noPadding>
-    <Heading size="M">Theme</Heading>
-    <Body>Customize how Budibase looks and feels</Body>
-  </Layout>
-  <Divider />
-  <div class="fields">
-    <div class="field">
-      <Label size="L">Theme</Label>
-      <Select
-        options={Constants.Themes}
-        bind:value={$themeStore.theme}
-        placeholder={null}
-        getOptionLabel={x => x.name}
-        getOptionValue={x => x.class}
-      />
-    </div>
-  </div>
-</Layout>
-
-<style>
-  .fields {
-    display: grid;
-    grid-gap: var(--spacing-m);
-  }
-  .field {
-    display: grid;
-    grid-template-columns: 120px 1fr;
-    align-items: center;
-  }
-</style>
