diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 8c01f74cc..94cefe0f2 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -9,8 +9,14 @@
     import LightMode from '$lib/images/mode/light-mode.svg';
     import DarkMode from '$lib/images/mode/dark-mode.svg';
     import SystemMode from '$lib/images/mode/system-mode.svg';
+    import { breadcrumbs as breadcrumbsStore, level } from '$lib/stores/layout';
 
     let showDropdown = false;
+
+    $: breadcrumbs = [...$breadcrumbsStore]
+        .map(([level, value]) => ({ level, value }))
+        .sort((a, b) => (a.level > b.level ? 1 : -1))
+        .filter((n) => n.level <= $level);
 </script>
 
 <a class="logo" href={`${base}/console`}>
@@ -18,9 +24,11 @@
 </a>
 <nav class="breadcrumbs is-only-desktop" aria-label="breadcrumb">
     <ol class="breadcrumbs-list">
-        <li class="breadcrumbs-item">
-            <a href="#/">Home</a>
-        </li>
+        {#each breadcrumbs as breadcrumb}
+            <li class="breadcrumbs-item">
+                <a href={breadcrumb.value.href}>{breadcrumb.value.title}</a>
+            </li>
+        {/each}
     </ol>
 </nav>
 
diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index d01ff24c1..1e4f55518 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -6,18 +6,18 @@ export type Tab = {
     title: string;
 };
 
-export const title = writable<string>('');
-export const backButton = writable<string>('');
-export const copyData = writable({
-    text: '',
-    value: ''
-});
-export const tabs = writable<Tab[]>([]);
-
-export function updateLayout(args: {
+export type Breadcrumb = {
+    href: string;
     title: string;
+    level?: number;
+};
+
+export type updateLayoutArguments = {
+    title: string;
+    level?: number;
     tabs?: Tab[];
     back?: string;
+    breadcrumbs?: Breadcrumb[] | Breadcrumb;
     copy?: {
         text: string;
         value: string;
@@ -26,13 +26,25 @@ export function updateLayout(args: {
         from: URL | null;
         to: URL;
     };
-}) {
+};
+
+export const level = writable<number>();
+export const title = writable<string>('');
+export const backButton = writable<string>('');
+export const tabs = writable<Tab[]>([]);
+export const breadcrumbs = writable<Map<number, Breadcrumb>>(new Map());
+export const copyData = writable({
+    text: '',
+    value: ''
+});
+
+export function updateLayout(args: updateLayoutArguments) {
     const projectId = get(project)?.$id;
     const base = projectId ? `/console/${projectId}` : `/console`;
 
     if (args?.navigate?.to) {
-        const oldTabs = get(tabs);
-        if (oldTabs.some((t) => `${base}/${t.href}` === args.navigate.to.pathname)) {
+        const previousTabs = get(tabs);
+        if (previousTabs.some((t) => `${base}/${t.href}` === args.navigate.to.pathname)) {
             return;
         }
     }
@@ -40,5 +52,15 @@ export function updateLayout(args: {
     title.set(args.title);
     backButton.set(args.back ?? null);
     copyData.set(args.copy ?? null);
+    level.set(args.level ?? null);
     tabs.set(args.tabs ?? []);
+
+    if (args.breadcrumbs) {
+        if (!Array.isArray(args.breadcrumbs)) {
+            args.breadcrumbs = [args.breadcrumbs];
+        }
+        for (const breadcrumb of args.breadcrumbs) {
+            breadcrumbs.update((n) => n.set(breadcrumb.level ?? args.level, breadcrumb));
+        }
+    }
 }
diff --git a/src/routes/console/[project]/__layout.svelte b/src/routes/console/[project]/__layout.svelte
index d53850617..620db4df8 100644
--- a/src/routes/console/[project]/__layout.svelte
+++ b/src/routes/console/[project]/__layout.svelte
@@ -5,6 +5,9 @@
     import { collection } from './databases/database/[database]/collection/[collection]/store';
     import { UploadBox } from '$lib/components';
     import { project } from './store';
+    import { onMount } from 'svelte';
+    import { afterNavigate } from '$app/navigation';
+    import { updateLayout } from '$lib/stores/layout';
     import type { Models } from '@aw-labs/appwrite-console';
 
     type Attributes =
@@ -18,14 +21,7 @@
         | Models.AttributeUrl;
 
     $: projectId = $page.params.project;
-    $: {
-        if ($project?.$id !== projectId) {
-            setProject(projectId);
-            if (browser) {
-                project.load(projectId);
-            }
-        }
-    }
+
     if (browser) {
         sdkForConsole.client.subscribe<Attributes | Models.Index>('console', (message) => {
             if (message.events.includes('collections.*.attributes.*.create')) {
@@ -47,11 +43,43 @@
             }
         });
     }
+    onMount(handle);
+    afterNavigate(handle);
+
+    let loaded = false;
+    async function handle(event = null) {
+        if ($project?.$id !== projectId) {
+            setProject(projectId);
+            if (browser) {
+                await project.load(projectId);
+            }
+        }
+        // TODO: make this part of state
+        const organisation = await sdkForConsole.teams.get($project.teamId);
+
+        updateLayout({
+            navigate: event,
+            title: $project.name,
+            level: 2,
+            breadcrumbs: [
+                {
+                    href: '#',
+                    title: organisation.name
+                },
+                {
+                    href: '#',
+                    title: $project.name
+                }
+            ]
+        });
+        loaded = true;
+    }
 </script>
 
-{#if $project}
+{#if loaded}
     <slot />
 {:else}
     loading
 {/if}
+
 <UploadBox />
diff --git a/src/routes/console/[project]/databases/__layout.svelte b/src/routes/console/[project]/databases/__layout.svelte
index bb098a71c..e79ae6a35 100644
--- a/src/routes/console/[project]/databases/__layout.svelte
+++ b/src/routes/console/[project]/databases/__layout.svelte
@@ -11,7 +11,12 @@
     function handle(event = null) {
         updateLayout({
             navigate: event,
-            title: 'Databases'
+            title: 'Databases',
+            level: 3,
+            breadcrumbs: {
+                href: '#',
+                title: 'Databases'
+            }
         });
         loaded = true;
     }
diff --git a/src/routes/console/[project]/databases/database/[database]/__layout.svelte b/src/routes/console/[project]/databases/database/[database]/__layout.svelte
index 560f663ce..60526d469 100644
--- a/src/routes/console/[project]/databases/database/[database]/__layout.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/__layout.svelte
@@ -22,6 +22,11 @@
         updateLayout({
             navigate: event,
             title: $database.name,
+            level: 4,
+            breadcrumbs: {
+                href: '#',
+                title: $database.name
+            },
             tabs: [
                 {
                     href: path,
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
index 754b835b4..9fcbb08aa 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte
@@ -22,6 +22,11 @@
         updateLayout({
             navigate: event,
             title: $collection.name,
+            level: 5,
+            breadcrumbs: {
+                href: '#',
+                title: $collection.name
+            },
             back: `${base}/console/${$page.params.project}/database`,
             tabs: [
                 {
diff --git a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
index 426b2aeaf..84e934de4 100644
--- a/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
+++ b/src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte
@@ -17,9 +17,15 @@
         if ($doc?.$id !== documentId) {
             await doc.load(collectionId, documentId);
         }
+
         updateLayout({
             navigate: event,
-            title: `Document - ${$doc.$id}`,
+            title: $doc.$id,
+            level: 6,
+            breadcrumbs: {
+                title: $doc.$id,
+                href: '#'
+            },
             tabs: [
                 {
                     href: path,
diff --git a/src/routes/console/[project]/functions/__layout.svelte b/src/routes/console/[project]/functions/__layout.svelte
index d0d9f357b..0dc011c81 100644
--- a/src/routes/console/[project]/functions/__layout.svelte
+++ b/src/routes/console/[project]/functions/__layout.svelte
@@ -9,7 +9,12 @@
     function handle(event = null) {
         updateLayout({
             navigate: event,
-            title: 'Functions'
+            title: 'Functions',
+            level: 3,
+            breadcrumbs: {
+                href: '#',
+                title: 'Functions'
+            }
         });
     }
 </script>
diff --git a/src/routes/console/[project]/functions/function/[function]/__layout.svelte b/src/routes/console/[project]/functions/function/[function]/__layout.svelte
index ae320c248..477e563de 100644
--- a/src/routes/console/[project]/functions/function/[function]/__layout.svelte
+++ b/src/routes/console/[project]/functions/function/[function]/__layout.svelte
@@ -19,6 +19,11 @@
         updateLayout({
             navigate: event,
             title: $func.name,
+            level: 4,
+            breadcrumbs: {
+                title: $func.name,
+                href: '#'
+            },
             tabs: [
                 {
                     href: path,
diff --git a/src/routes/console/[project]/keys/__layout.svelte b/src/routes/console/[project]/keys/__layout.svelte
index a3edd87b1..d4fb2d671 100644
--- a/src/routes/console/[project]/keys/__layout.svelte
+++ b/src/routes/console/[project]/keys/__layout.svelte
@@ -9,7 +9,12 @@
     function handle(event = null) {
         updateLayout({
             navigate: event,
-            title: 'API Keys'
+            title: 'API Keys',
+            level: 3,
+            breadcrumbs: {
+                href: '#',
+                title: 'API Keys'
+            }
         });
     }
 </script>
diff --git a/src/routes/console/[project]/settings/__layout.svelte b/src/routes/console/[project]/settings/__layout.svelte
index 3159fd755..e12fbf5f0 100644
--- a/src/routes/console/[project]/settings/__layout.svelte
+++ b/src/routes/console/[project]/settings/__layout.svelte
@@ -12,6 +12,11 @@
         updateLayout({
             navigate: event,
             title: 'Settings',
+            level: 3,
+            breadcrumbs: {
+                title: 'Settings',
+                href: '#'
+            },
             tabs: [
                 {
                     href: path,
diff --git a/src/routes/console/[project]/storage/__layout.svelte b/src/routes/console/[project]/storage/__layout.svelte
index 4c453f37c..8ce4faaa0 100644
--- a/src/routes/console/[project]/storage/__layout.svelte
+++ b/src/routes/console/[project]/storage/__layout.svelte
@@ -12,6 +12,11 @@
         updateLayout({
             navigate: event,
             title: 'Storage',
+            level: 3,
+            breadcrumbs: {
+                title: 'Storage',
+                href: '#'
+            },
             tabs: [
                 {
                     href: path,
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte
index e70afc305..93cc98cf6 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte
@@ -19,6 +19,11 @@
         updateLayout({
             navigate: event,
             title: $bucket.name,
+            level: 4,
+            breadcrumbs: {
+                title: $bucket.name,
+                href: '#'
+            },
             copy: {
                 text: 'Bucket ID',
                 value: bucketId
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte
index 51188ec58..3d2d6496b 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/__layout.svelte
@@ -19,6 +19,11 @@
 
         updateLayout({
             navigate: event,
+            level: 5,
+            breadcrumbs: {
+                href: '#',
+                title: $file.name
+            },
             back: `${base}/console/${$page.params.project}/storage/bucket/${bucketId}`,
             title: $file.name,
             copy: {
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte
index 992530e33..d8dce4d29 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte
@@ -127,7 +127,7 @@
                     </svelte:fragment>
                     <p>
                         If you want to assign permissions specific to this file, you will need to
-                        update your <a class="link" href="#"> Bucket Settings</a> to enable File Level
+                        update your <a class="link" href="#/"> Bucket Settings</a> to enable File Level
                         permissions.
                     </p>
                 </Alert>
diff --git a/src/routes/console/[project]/users/__layout.svelte b/src/routes/console/[project]/users/__layout.svelte
index 1f8adb0d1..f88538356 100644
--- a/src/routes/console/[project]/users/__layout.svelte
+++ b/src/routes/console/[project]/users/__layout.svelte
@@ -14,6 +14,11 @@
         updateLayout({
             navigate: event,
             title: 'Users',
+            level: 3,
+            breadcrumbs: {
+                title: 'Users',
+                href: '#'
+            },
             tabs: [
                 {
                     href: path,
diff --git a/src/routes/console/[project]/users/teams/[team]/__layout.svelte b/src/routes/console/[project]/users/teams/[team]/__layout.svelte
index 1a79525e1..dd19635dd 100644
--- a/src/routes/console/[project]/users/teams/[team]/__layout.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/__layout.svelte
@@ -19,8 +19,13 @@
 
         updateLayout({
             navigate: event,
+            level: 4,
             title: $team.name,
             back: `${base}/console/${$page.params.project}/users/teams`,
+            breadcrumbs: {
+                title: $team.name,
+                href: '#'
+            },
             copy: {
                 text: 'Team ID',
                 value: teamId
diff --git a/src/routes/console/[project]/users/user/[user]/__layout.svelte b/src/routes/console/[project]/users/user/[user]/__layout.svelte
index 5e6c97dbd..9be796b29 100644
--- a/src/routes/console/[project]/users/user/[user]/__layout.svelte
+++ b/src/routes/console/[project]/users/user/[user]/__layout.svelte
@@ -20,6 +20,11 @@
         updateLayout({
             navigate: event,
             title: $user.name,
+            level: 4,
+            breadcrumbs: {
+                title: $user.name,
+                href: '#'
+            },
             back: `${base}/console/${$page.params.project}/users`,
             copy: {
                 text: 'User ID',