From f5e9fd28438cdf78572ca6cef7585f67909aacda Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 30 Dec 2025 04:04:55 +0400
Subject: [PATCH 1/4] feat: api key routes for profiles

---
 src/lib/components/navbar.svelte              | 31 +++++++++++++++++++
 .../overview/(components)/create.svelte       |  8 ++---
 .../overview/(components)/delete.svelte       |  5 ++-
 .../overview/(components)/deleteBatch.svelte  |  5 ++-
 .../overview/(components)/keyDetails.svelte   |  6 ++--
 .../overview/(components)/table.svelte        | 10 +++---
 .../(components)/updateExpirationDate.svelte  |  2 ++
 7 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 37813d9172..d3dffb4546 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -34,6 +34,7 @@
         IconCreditCard,
         IconCurrencyDollar,
         IconGlobeAlt,
+        IconKey,
         IconLogoutRight,
         IconMenuAlt4,
         IconMode,
@@ -340,6 +341,21 @@
                                     )}
                                     on:click={() => toggle()}>
                                     Domains</ActionMenu.Item.Anchor>
+
+                                {#if currentProject}
+                                    <ActionMenu.Item.Anchor
+                                        size="l"
+                                        trailingIcon={IconKey}
+                                        href={resolve(
+                                            '/(console)/project-[region]-[project]/(studio)/api-keys',
+                                            {
+                                                region: currentProject.region,
+                                                project: currentProject.$id
+                                            }
+                                        )}
+                                        on:click={() => toggle()}>
+                                        API keys</ActionMenu.Item.Anchor>
+                                {/if}
                                 <Divider />
                             {/if}
 
@@ -402,6 +418,21 @@
                         leadingIcon: IconUser,
                         href: resolve('/(console)/account')
                     },
+                    ...(resolvedProfile.showExtendedAccountsMenu && currentProject
+                        ? [
+                              {
+                                  name: 'API keys',
+                                  leadingIcon: IconKey,
+                                  href: resolve(
+                                      '/(console)/project-[region]-[project]/(studio)/api-keys',
+                                      {
+                                          region: currentProject.region,
+                                          project: currentProject.$id
+                                      }
+                                  )
+                              }
+                          ]
+                        : []),
                     {
                         name: 'Sign out',
                         leadingIcon: IconLogoutRight,
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
index 4c9bb81508..ebff384cf4 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte
@@ -17,6 +17,8 @@
     import { page } from '$app/state';
     import { copy } from '$lib/helpers/copy';
 
+    export let basePath: string = `${base}/project-${page.params.region}-${page.params.project}/overview`;
+
     const projectId = page.params.project;
 
     let showExitModal = false;
@@ -41,9 +43,7 @@
             }
 
             trackEvent(Submit.KeyCreate);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/overview/api-keys/${$id}`
-            );
+            await goto(`${basePath}/api-keys/${$id}`);
             addNotification({
                 message: `API key has been created`,
                 type: 'success',
@@ -74,7 +74,7 @@
 
 <Wizard
     title="Create API key"
-    href={`${base}/project-${page.params.region}-${page.params.project}/overview/api-keys/`}
+    href={`${basePath}/api-keys/`}
     bind:showExitModal
     column
     columnSize="s"
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte
index 7055518376..5ac1e0c839 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/delete.svelte
@@ -12,6 +12,7 @@
     export let showDelete = false;
     export let keyType: 'api' | 'dev' = 'api';
     export let key: Models.DevKey | Models.Key;
+    export let basePath: string = `${base}/project-${page.params.region}-${page.params.project}/overview`;
 
     const projectId = page.params.project;
 
@@ -42,9 +43,7 @@
                 message: `${key.name} has been deleted`
             });
             trackEvent(event);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}`
-            );
+            await goto(`${basePath}/${slug}`);
         } catch (e) {
             error = e.message;
             trackError(e, event);
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte
index 3a742d94cc..7c35ebebbd 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/deleteBatch.svelte
@@ -11,6 +11,7 @@
     export let showDelete = false;
     export let keyIds: string[] = [];
     export let keyType: 'api' | 'dev' = 'api';
+    export let basePath: string = `${base}/project-${page.params.region}-${page.params.project}/overview`;
 
     let error: string;
 
@@ -47,9 +48,7 @@
             });
 
             trackEvent(event);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}`
-            );
+            await goto(`${basePath}/${slug}`);
         } catch (e) {
             error = e.message;
             trackError(e, event);
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/keyDetails.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/keyDetails.svelte
index cf5a919ace..c40fdf3ed6 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/keyDetails.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/keyDetails.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { base } from '$app/paths';
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { Box, CardGrid } from '$lib/components';
@@ -23,6 +24,7 @@
 
     export let key: Models.DevKey | Models.Key;
     export let keyType: 'api' | 'dev' = 'api';
+    export let basePath: string = `${base}/project-${page.params.region}-${page.params.project}/overview`;
 
     let name: string = null;
     let scopes: string[] = null;
@@ -190,7 +192,7 @@
         </Form>
     {/if}
 
-    <UpdateExpirationDate {keyType} {key} />
+    <UpdateExpirationDate {keyType} {key} {basePath} />
 
     <CardGrid>
         <svelte:fragment slot="title">Delete {label} key</svelte:fragment>
@@ -212,4 +214,4 @@
     </CardGrid>
 </Container>
 
-<Delete {keyType} {key} bind:showDelete />
+<Delete {keyType} {key} {basePath} bind:showDelete />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte
index 9cfb56a832..3963d746f3 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/table.svelte
@@ -15,10 +15,12 @@
 
     let {
         keyType = 'api',
-        keys
+        keys,
+        basePath = `${base}/project-${page.params.region}-${page.params.project}/overview`
     }: {
         keyType?: 'api' | 'dev';
         keys: Models.KeyList | Models.DevKeyList;
+        basePath?: string;
     } = $props();
 
     let selectedKeys = $state([]);
@@ -126,13 +128,11 @@
         description={getDescription()}
         on:click={async () => {
             if (isApiKey) {
-                await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/overview/${slug}/create`
-                );
+                await goto(`${basePath}/${slug}/create`);
             } else {
                 $showDevKeysCreateModal = true;
             }
         }} />
 {/if}
 
-<DeleteBatch {keyType} bind:keyIds={selectedKeys} bind:showDelete={showDeleteModal} />
+<DeleteBatch {keyType} {basePath} bind:keyIds={selectedKeys} bind:showDelete={showDeleteModal} />
diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte
index 19f49adaed..824ee13771 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte
@@ -14,6 +14,8 @@
 
     export let keyType: 'api' | 'dev' = 'api';
     export let key: Models.DevKey | Models.Key;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    export let basePath: string = undefined;
 
     const projectId = page.params.project;
 

From 9b04810aa4c93c622c228215c46c02fce3af1bff Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 30 Dec 2025 04:05:07 +0400
Subject: [PATCH 2/4] Add API keys UI for project studio

---
 .../(studio)/api-keys/+layout.svelte          | 34 +++++++++++++++
 .../(studio)/api-keys/+page.svelte            | 12 ++++++
 .../(studio)/api-keys/+page.ts                | 12 ++++++
 .../(studio)/api-keys/[key]/+page.ts          | 25 +++++++++++
 .../+page@project-[region]-[project].svelte   | 10 +++++
 .../api-keys/[key]/breadcrumbs.svelte         | 29 +++++++++++++
 .../(studio)/api-keys/[key]/header.svelte     | 41 +++++++++++++++++++
 .../(studio)/api-keys/[key]/store.ts          |  5 +++
 .../+page@project-[region]-[project].svelte   |  9 ++++
 9 files changed, 177 insertions(+)
 create mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+layout.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.ts
 create mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page.ts
 create mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page@project-[region]-[project].svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/breadcrumbs.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/header.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/store.ts
 create mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/create/+page@project-[region]-[project].svelte

diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+layout.svelte b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+layout.svelte
new file mode 100644
index 0000000000..8eb4eb5256
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+layout.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Container } from '$lib/layout';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { canWriteKeys } from '$lib/stores/roles';
+    import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { getPageTitle } from '../../store';
+
+    const basePath = `${base}/project-${page.params.region}-${page.params.project}`;
+</script>
+
+<svelte:head>
+    <title>{getPageTitle(page.data?.project?.name, 'API Keys', resolvedProfile.platform)}</title>
+</svelte:head>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle>API Keys</CoverTitle>
+        {#if $canWriteKeys}
+            <Button href={`${basePath}/api-keys/create`}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create API key
+            </Button>
+        {/if}
+    </svelte:fragment>
+</Cover>
+
+<Container>
+    <slot />
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.svelte b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.svelte
new file mode 100644
index 0000000000..9d1354ae8f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import type { PageData } from './$types';
+    import Table from '../../overview/(components)/table.svelte';
+
+    export let data: PageData;
+
+    const basePath = `${base}/project-${page.params.region}-${page.params.project}`;
+</script>
+
+<Table keys={data.keys} {basePath} />
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.ts b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.ts
new file mode 100644
index 0000000000..36fa8bbf52
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.ts
@@ -0,0 +1,12 @@
+import { Dependencies } from '$lib/constants';
+import { sdk } from '$lib/stores/sdk';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.KEYS);
+    return {
+        keys: await sdk.forConsole.projects.listKeys({
+            projectId: params.project
+        })
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page.ts b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page.ts
new file mode 100644
index 0000000000..84421d00e6
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page.ts
@@ -0,0 +1,25 @@
+import Header from './header.svelte';
+import Breadcrumbs from './breadcrumbs.svelte';
+import { sdk } from '$lib/stores/sdk';
+import { Dependencies } from '$lib/constants';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async ({ params, depends }) => {
+    depends(Dependencies.KEY);
+
+    const key = await sdk.forConsole.projects.getKey({
+        projectId: params.project,
+        keyId: params.key
+    });
+    if (key.expire) {
+        key.expire = new Date(key.expire).toISOString().slice(0, 23);
+    } else {
+        key.expire = undefined;
+    }
+
+    return {
+        header: Header,
+        breadcrumbs: Breadcrumbs,
+        key
+    };
+};
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page@project-[region]-[project].svelte b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page@project-[region]-[project].svelte
new file mode 100644
index 0000000000..bcfd72edc7
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page@project-[region]-[project].svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { key } from './store';
+    import KeyDetails from '../../../overview/(components)/keyDetails.svelte';
+
+    const basePath = `${base}/project-${page.params.region}-${page.params.project}`;
+</script>
+
+<KeyDetails key={$key} {basePath} />
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/breadcrumbs.svelte
new file mode 100644
index 0000000000..f1b7cb2347
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/breadcrumbs.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { key } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `${base}/organization-${$organization?.$id}`,
+            title: $organization?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}`,
+            title: $project?.name
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/api-keys`,
+            title: 'API keys'
+        },
+        {
+            href: `${base}/project-${page.params.region}-${page.params.project}/api-keys/${$key?.$id}`,
+            title: $key?.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/header.svelte b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/header.svelte
new file mode 100644
index 0000000000..8de043c89f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/header.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Cover, CoverTitle } from '$lib/layout';
+    import { key } from './store';
+    import { RegionEndpoint, Copy } from '$lib/components';
+    import { Layout, Tag, Icon } from '@appwrite.io/pink-svelte';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
+    import { projectRegion } from '../../../store';
+
+    const projectId = page.params.project;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/api-keys`}>
+            {$key?.name}
+        </CoverTitle>
+        <Layout.Stack direction="row" inline>
+            {#if $key?.secret}
+                <Copy value={$key.secret} copyText="Copy API secret">
+                    <Tag size="xs" variant="code">
+                        <Icon icon={IconDuplicate} size="s" slot="start" />
+                        <span class="api-secret-label"> API secret </span>
+                    </Tag>
+                </Copy>
+            {/if}
+            {#if $projectRegion}
+                <RegionEndpoint region={$projectRegion} />
+            {/if}
+        </Layout.Stack>
+    </svelte:fragment>
+</Cover>
+
+<style>
+    .api-secret-label {
+        white-space: nowrap;
+        overflow: hidden;
+        word-break: break-all;
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/store.ts b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/store.ts
new file mode 100644
index 0000000000..5a1a9f936e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/store.ts
@@ -0,0 +1,5 @@
+import { page } from '$app/stores';
+import { derived } from 'svelte/store';
+import type { Models } from '@appwrite.io/console';
+
+export const key = derived(page, ($page) => $page.data.key as Models.Key);
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/create/+page@project-[region]-[project].svelte b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/create/+page@project-[region]-[project].svelte
new file mode 100644
index 0000000000..580a633a8f
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/create/+page@project-[region]-[project].svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import CreateKey from '../../../overview/(components)/create.svelte';
+
+    const basePath = `${base}/project-${page.params.region}-${page.params.project}`;
+</script>
+
+<CreateKey {basePath} />

From 5fc9c0d5be0d632c2c1d8aea44174ae73e884da4 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 30 Dec 2025 04:06:54 +0400
Subject: [PATCH 3/4] Remove unused eslint disable comment

---
 .../overview/(components)/updateExpirationDate.svelte            | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte b/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte
index 824ee13771..4c03ea2338 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/(components)/updateExpirationDate.svelte
@@ -14,7 +14,6 @@
 
     export let keyType: 'api' | 'dev' = 'api';
     export let key: Models.DevKey | Models.Key;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     export let basePath: string = undefined;
 
     const projectId = page.params.project;

From 191a09e356e9426121465b665bd6c6424b452e57 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 30 Dec 2025 20:00:02 +0400
Subject: [PATCH 4/4] Migrate API keys routes from studio to settings

- Rename API keys routes from (studio)/api-keys to /settings/api-keys
- Update basePath constructions to include /settings
- Update breadcrumbs to reflect settings/api-keys in navigation
---
 src/lib/components/navbar.svelte              |  4 +--
 .../(studio)/api-keys/+layout.svelte          | 34 -------------------
 .../(studio)/api-keys/+page.svelte            | 12 -------
 .../settings/api-keys/+layout.svelte          | 11 ++++++
 .../settings/api-keys/+page.svelte            | 27 +++++++++++++++
 .../{(studio) => settings}/api-keys/+page.ts  |  0
 .../api-keys/[key]/+page.ts                   |  0
 .../+page@project-[region]-[project].svelte   |  2 +-
 .../api-keys/[key]/breadcrumbs.svelte         |  4 +--
 .../api-keys/[key]/header.svelte              |  2 +-
 .../api-keys/[key]/store.ts                   |  0
 .../+page@project-[region]-[project].svelte   |  2 +-
 .../settings/header.svelte                    |  7 ++++
 13 files changed, 52 insertions(+), 53 deletions(-)
 delete mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+layout.svelte
 delete mode 100644 src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/settings/api-keys/+layout.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/settings/api-keys/+page.svelte
 rename src/routes/(console)/project-[region]-[project]/{(studio) => settings}/api-keys/+page.ts (100%)
 rename src/routes/(console)/project-[region]-[project]/{(studio) => settings}/api-keys/[key]/+page.ts (100%)
 rename src/routes/(console)/project-[region]-[project]/{(studio) => settings}/api-keys/[key]/+page@project-[region]-[project].svelte (91%)
 rename src/routes/(console)/project-[region]-[project]/{(studio) => settings}/api-keys/[key]/breadcrumbs.svelte (90%)
 rename src/routes/(console)/project-[region]-[project]/{(studio) => settings}/api-keys/[key]/header.svelte (97%)
 rename src/routes/(console)/project-[region]-[project]/{(studio) => settings}/api-keys/[key]/store.ts (100%)
 rename src/routes/(console)/project-[region]-[project]/{(studio) => settings}/api-keys/create/+page@project-[region]-[project].svelte (90%)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index d3dffb4546..1178cd1bfd 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -347,7 +347,7 @@
                                         size="l"
                                         trailingIcon={IconKey}
                                         href={resolve(
-                                            '/(console)/project-[region]-[project]/(studio)/api-keys',
+                                            '/(console)/project-[region]-[project]/settings/api-keys',
                                             {
                                                 region: currentProject.region,
                                                 project: currentProject.$id
@@ -424,7 +424,7 @@
                                   name: 'API keys',
                                   leadingIcon: IconKey,
                                   href: resolve(
-                                      '/(console)/project-[region]-[project]/(studio)/api-keys',
+                                      '/(console)/project-[region]-[project]/settings/api-keys',
                                       {
                                           region: currentProject.region,
                                           project: currentProject.$id
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+layout.svelte b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+layout.svelte
deleted file mode 100644
index 8eb4eb5256..0000000000
--- a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+layout.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import { Container } from '$lib/layout';
-    import { Cover, CoverTitle } from '$lib/layout';
-    import Button from '$lib/elements/forms/button.svelte';
-    import { Icon } from '@appwrite.io/pink-svelte';
-    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { canWriteKeys } from '$lib/stores/roles';
-    import { resolvedProfile } from '$lib/profiles/index.svelte';
-    import { getPageTitle } from '../../store';
-
-    const basePath = `${base}/project-${page.params.region}-${page.params.project}`;
-</script>
-
-<svelte:head>
-    <title>{getPageTitle(page.data?.project?.name, 'API Keys', resolvedProfile.platform)}</title>
-</svelte:head>
-
-<Cover>
-    <svelte:fragment slot="header">
-        <CoverTitle>API Keys</CoverTitle>
-        {#if $canWriteKeys}
-            <Button href={`${basePath}/api-keys/create`}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Create API key
-            </Button>
-        {/if}
-    </svelte:fragment>
-</Cover>
-
-<Container>
-    <slot />
-</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.svelte b/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.svelte
deleted file mode 100644
index 9d1354ae8f..0000000000
--- a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import type { PageData } from './$types';
-    import Table from '../../overview/(components)/table.svelte';
-
-    export let data: PageData;
-
-    const basePath = `${base}/project-${page.params.region}-${page.params.project}`;
-</script>
-
-<Table keys={data.keys} {basePath} />
diff --git a/src/routes/(console)/project-[region]-[project]/settings/api-keys/+layout.svelte b/src/routes/(console)/project-[region]-[project]/settings/api-keys/+layout.svelte
new file mode 100644
index 0000000000..2bb0a3bd9c
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/api-keys/+layout.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { resolvedProfile } from '$lib/profiles/index.svelte';
+    import { getPageTitle } from '../../store';
+    import { page } from '$app/state';
+</script>
+
+<svelte:head>
+    <title>{getPageTitle(page.data?.project?.name, 'API Keys', resolvedProfile.platform)}</title>
+</svelte:head>
+
+<slot />
diff --git a/src/routes/(console)/project-[region]-[project]/settings/api-keys/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/api-keys/+page.svelte
new file mode 100644
index 0000000000..ca50bac97e
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/settings/api-keys/+page.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import type { PageData } from './$types';
+    import Table from '../../overview/(components)/table.svelte';
+    import { Button } from '$lib/elements/forms';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { canWriteKeys } from '$lib/stores/roles';
+
+    export let data: PageData;
+
+    const basePath = `${base}/project-${page.params.region}-${page.params.project}/settings`;
+</script>
+
+<Container>
+    <ResponsiveContainerHeader hideView analyticsSource="settings_api_keys">
+        {#if $canWriteKeys}
+            <Button href={`${basePath}/api-keys/create`}>
+                <Icon icon={IconPlus} size="s" />
+                Create API key
+            </Button>
+        {/if}
+    </ResponsiveContainerHeader>
+    <Table keys={data.keys} {basePath} />
+</Container>
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.ts b/src/routes/(console)/project-[region]-[project]/settings/api-keys/+page.ts
similarity index 100%
rename from src/routes/(console)/project-[region]-[project]/(studio)/api-keys/+page.ts
rename to src/routes/(console)/project-[region]-[project]/settings/api-keys/+page.ts
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page.ts b/src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/+page.ts
similarity index 100%
rename from src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page.ts
rename to src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/+page.ts
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page@project-[region]-[project].svelte b/src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/+page@project-[region]-[project].svelte
similarity index 91%
rename from src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page@project-[region]-[project].svelte
rename to src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/+page@project-[region]-[project].svelte
index bcfd72edc7..60c780e334 100644
--- a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/+page@project-[region]-[project].svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/+page@project-[region]-[project].svelte
@@ -4,7 +4,7 @@
     import { key } from './store';
     import KeyDetails from '../../../overview/(components)/keyDetails.svelte';
 
-    const basePath = `${base}/project-${page.params.region}-${page.params.project}`;
+    const basePath = `${base}/project-${page.params.region}-${page.params.project}/settings`;
 </script>
 
 <KeyDetails key={$key} {basePath} />
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/breadcrumbs.svelte b/src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/breadcrumbs.svelte
similarity index 90%
rename from src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/breadcrumbs.svelte
rename to src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/breadcrumbs.svelte
index f1b7cb2347..7b81ac46d5 100644
--- a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/breadcrumbs.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/breadcrumbs.svelte
@@ -16,11 +16,11 @@
             title: $project?.name
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/api-keys`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/settings/api-keys`,
             title: 'API keys'
         },
         {
-            href: `${base}/project-${page.params.region}-${page.params.project}/api-keys/${$key?.$id}`,
+            href: `${base}/project-${page.params.region}-${page.params.project}/settings/api-keys/${$key?.$id}`,
             title: $key?.name
         }
     ];
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/header.svelte b/src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/header.svelte
similarity index 97%
rename from src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/header.svelte
rename to src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/header.svelte
index 8de043c89f..aa12667f7f 100644
--- a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/header.svelte
@@ -13,7 +13,7 @@
 
 <Cover>
     <svelte:fragment slot="header">
-        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/api-keys`}>
+        <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/settings/api-keys`}>
             {$key?.name}
         </CoverTitle>
         <Layout.Stack direction="row" inline>
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/store.ts b/src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/store.ts
similarity index 100%
rename from src/routes/(console)/project-[region]-[project]/(studio)/api-keys/[key]/store.ts
rename to src/routes/(console)/project-[region]-[project]/settings/api-keys/[key]/store.ts
diff --git a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/create/+page@project-[region]-[project].svelte b/src/routes/(console)/project-[region]-[project]/settings/api-keys/create/+page@project-[region]-[project].svelte
similarity index 90%
rename from src/routes/(console)/project-[region]-[project]/(studio)/api-keys/create/+page@project-[region]-[project].svelte
rename to src/routes/(console)/project-[region]-[project]/settings/api-keys/create/+page@project-[region]-[project].svelte
index 580a633a8f..ba22cb1841 100644
--- a/src/routes/(console)/project-[region]-[project]/(studio)/api-keys/create/+page@project-[region]-[project].svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/api-keys/create/+page@project-[region]-[project].svelte
@@ -3,7 +3,7 @@
     import { page } from '$app/state';
     import CreateKey from '../../../overview/(components)/create.svelte';
 
-    const basePath = `${base}/project-${page.params.region}-${page.params.project}`;
+    const basePath = `${base}/project-${page.params.region}-${page.params.project}/settings`;
 </script>
 
 <CreateKey {basePath} />
diff --git a/src/routes/(console)/project-[region]-[project]/settings/header.svelte b/src/routes/(console)/project-[region]-[project]/settings/header.svelte
index d7a715c2c8..9cee8d76f8 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/header.svelte
@@ -8,6 +8,7 @@
     import { canWriteProjects } from '$lib/stores/roles';
     import { isCloud } from '$lib/system';
     import { Typography } from '@appwrite.io/pink-svelte';
+    import { resolvedProfile } from '$lib/profiles/index.svelte';
 
     const path = `${base}/project-${page.params.region}-${page.params.project}/settings`;
     const tabs: TabElement[] = [
@@ -16,6 +17,12 @@
             title: 'Overview',
             event: 'overview'
         },
+        {
+            href: `${path}/api-keys`,
+            title: 'API keys',
+            event: 'api-keys',
+            disabled: !resolvedProfile.showExtendedAccountsMenu
+        },
         {
             href: `${path}/domains`,
             title: 'Custom domains',