From 29d91895be0c6d069966734bc3da4202ecd8ae8a Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 19 Oct 2022 17:39:20 +0200
Subject: [PATCH] feat: new layout state management

---
 src/lib/layout/breadcrumbs.svelte             |  55 ++-----
 src/lib/layout/header.svelte                  |   8 +-
 src/lib/layout/shell.svelte                   | 136 +-----------------
 src/lib/stores/layout.ts                      |  68 ++-------
 src/routes/console/+layout.svelte             |  17 +--
 src/routes/console/_createOrganization.svelte |   2 -
 .../+layout.svelte                            |  31 +---
 .../breadcrumbs.svelte                        |  13 ++
 .../organization-[organization]/header.svelte | 104 ++++++++++++++
 .../settings/+page.svelte                     |   5 -
 .../console/project-[project]/+layout.svelte  |  20 +--
 .../authentication/+layout.svelte             |  45 +-----
 .../authentication/breadcrumbs.svelte         |  22 +++
 .../authentication/header.svelte              |  46 ++++++
 .../teams/[team]/+layout.svelte               |  34 +----
 .../authentication/teams/[team]/+page.svelte  |   7 +-
 .../teams/[team]/breadcrumbs.svelte           |  27 ++++
 .../authentication/teams/[team]/header.svelte |  53 +++++++
 .../authentication/user/[user]/+layout.svelte |  38 +----
 .../authentication/user/[user]/+page.svelte   |   5 -
 .../user/[user]/breadcrumbs.svelte            |  27 ++++
 .../authentication/user/[user]/header.svelte  |  57 ++++++++
 .../databases/+layout.svelte                  |  26 +---
 .../databases/breadcrumbs.svelte              |  22 +++
 .../database/[database]/+layout.svelte        |  38 +----
 .../database/[database]/breadcrumbs.svelte    |  27 ++++
 .../collection/[collection]/+layout.svelte    |  52 ++-----
 .../[collection]/breadcrumbs.svelte           |  26 ++++
 .../document/[document]/+layout.svelte        |  27 +---
 .../document/[document]/breadcrumbs.svelte    |  27 ++++
 .../document/[document]/header.svelte         |  51 +++++++
 .../collection/[collection]/header.svelte     |  62 ++++++++
 .../database/[database]/header.svelte         |  53 +++++++
 .../project-[project]/databases/header.svelte |  34 +++++
 .../project-[project]/overview/+layout.svelte |  15 +-
 .../overview/breadcrumbs.svelte               |  18 +++
 .../project-[project]/overview/header.svelte  |  20 +++
 .../keys/[key]/+page@project-[project].svelte |  27 +---
 .../overview/keys/[key]/breadcrumbs.svelte    |  27 ++++
 .../overview/keys/[key]/header.svelte         |  29 ++++
 .../[platform]/+page@project-[project].svelte |  23 +--
 .../platforms/[platform]/breadcrumbs.svelte   |  27 ++++
 .../platforms/[platform]/header.svelte        |  21 +++
 .../project-[project]/settings/+layout.svelte |  25 +---
 .../settings/breadcrumbs.svelte               |  22 +++
 .../project-[project]/settings/header.svelte  |  38 +++++
 .../project-[project]/storage/+layout.svelte  |  25 +---
 .../storage/breadcrumbs.svelte                |  22 +++
 .../storage/bucket/[bucket]/+layout.svelte    |  37 +----
 .../bucket/[bucket]/breadcrumbs.svelte        |  27 ++++
 .../[bucket]/file/[file]/+layout.svelte       |  20 +--
 .../[bucket]/file/[file]/breadcrumbs.svelte   |  26 ++++
 .../bucket/[bucket]/file/[file]/header.svelte |  30 ++++
 .../storage/bucket/[bucket]/header.svelte     |  53 +++++++
 .../project-[project]/storage/header.svelte   |  34 +++++
 55 files changed, 1165 insertions(+), 666 deletions(-)
 create mode 100644 src/routes/console/organization-[organization]/breadcrumbs.svelte
 create mode 100644 src/routes/console/organization-[organization]/header.svelte
 create mode 100644 src/routes/console/project-[project]/authentication/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/authentication/header.svelte
 create mode 100644 src/routes/console/project-[project]/authentication/teams/[team]/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/authentication/teams/[team]/header.svelte
 create mode 100644 src/routes/console/project-[project]/authentication/user/[user]/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/authentication/user/[user]/header.svelte
 create mode 100644 src/routes/console/project-[project]/databases/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/databases/database/[database]/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/header.svelte
 create mode 100644 src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/header.svelte
 create mode 100644 src/routes/console/project-[project]/databases/database/[database]/header.svelte
 create mode 100644 src/routes/console/project-[project]/databases/header.svelte
 create mode 100644 src/routes/console/project-[project]/overview/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/overview/header.svelte
 create mode 100644 src/routes/console/project-[project]/overview/keys/[key]/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/overview/keys/[key]/header.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/overview/platforms/[platform]/header.svelte
 create mode 100644 src/routes/console/project-[project]/settings/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/settings/header.svelte
 create mode 100644 src/routes/console/project-[project]/storage/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/storage/bucket/[bucket]/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/breadcrumbs.svelte
 create mode 100644 src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/header.svelte
 create mode 100644 src/routes/console/project-[project]/storage/bucket/[bucket]/header.svelte
 create mode 100644 src/routes/console/project-[project]/storage/header.svelte

diff --git a/src/lib/layout/breadcrumbs.svelte b/src/lib/layout/breadcrumbs.svelte
index b1845a831..63b6c801b 100644
--- a/src/lib/layout/breadcrumbs.svelte
+++ b/src/lib/layout/breadcrumbs.svelte
@@ -1,53 +1,24 @@
+<script lang="ts" context="module">
+    export type Breadcrumb = {
+        title: string;
+        href?: string;
+    };
+</script>
+
 <script lang="ts">
-    import { breadcrumbs as breadcrumbsStore, level, type Breadcrumb } from '$lib/stores/layout';
-
-    $: breadcrumbs = [...$breadcrumbsStore]
-        .map(([level, value]) => ({ level, value }))
-        .sort((a, b) => (a.level > b.level ? 1 : -1))
-        .filter((n) => n.level <= $level);
-
-    function truncate(
-        breadcrumbs: {
-            value: Breadcrumb;
-        }[]
-    ) {
-        /**
-         *  Maximum of 4 Breadcrumbs, truncated from the left.
-         */
-        if ($level > 4) {
-            breadcrumbs = [
-                {
-                    value: {
-                        href: null,
-                        title: '...'
-                    }
-                },
-                ...breadcrumbs.slice(-3)
-            ];
-        }
-
-        return breadcrumbs;
-    }
-
-    function buildHref(index: number) {
-        return breadcrumbs
-            .slice(0, index + 1)
-            .reduce((prev, next) => `${prev}/${next.value.href}`, '');
-    }
+    export let breadcrumbs: Breadcrumb[];
 </script>
 
 <nav class="breadcrumbs is-only-desktop" aria-label="breadcrumb">
     <ol class="breadcrumbs-list">
-        {#each truncate(breadcrumbs) as breadcrumb, i}
+        {#each breadcrumbs as breadcrumb}
             <li class="breadcrumbs-item">
-                {#if breadcrumb.value.href}
-                    <a
-                        href={buildHref(breadcrumbs.length > 4 ? i + breadcrumbs.length - 4 : i)}
-                        title={breadcrumb.value.title}>
-                        {breadcrumb.value.title}
+                {#if breadcrumb.href}
+                    <a href={breadcrumb.href} title={breadcrumb.title}>
+                        {breadcrumb.title}
                     </a>
                 {:else}
-                    <span>{breadcrumb.value.title}</span>
+                    <span>{breadcrumb.title}</span>
                 {/if}
             </li>
         {/each}
diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 10e026c8f..abc740fe1 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { onMount } from 'svelte';
-    import { Breadcrumbs } from '.';
     import { Avatar, DropList, DropListItem, DropListLink } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
+    import { organizationList, organization, newOrgModal } from '$lib/stores/organization';
+    import { breadcrumb } from '$lib/stores/layout';
     import AppwriteLogo from '$lib/images/appwrite-gray-light.svg';
     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 { organizationList, organization, newOrgModal } from '$lib/stores/organization';
 
     let showDropdown = false;
 
@@ -28,7 +28,9 @@
     <img src={AppwriteLogo} width="132" height="34" alt="Appwrite" />
 </a>
 
-<Breadcrumbs />
+{#if $breadcrumb}
+    <svelte:component this={$breadcrumb} />
+{/if}
 
 <div class="main-header-end">
     <nav class="u-flex is-only-desktop">
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 79d720472..60f62defc 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -1,28 +1,6 @@
 <script lang="ts">
-    import { navigating, page } from '$app/stores';
-    import { tabs, title, backButton, copyData, titleDropdown } from '$lib/stores/layout';
-    import { Cover } from '.';
-    import {
-        Copy,
-        DropList,
-        DropListItem,
-        DropListLink,
-        AvatarGroup,
-        Tabs,
-        Tab
-    } from '$lib/components';
-    import { Pill } from '$lib/elements';
-    import { Button } from '$lib/elements/forms';
-    import {
-        organization,
-        memberList,
-        newOrgModal,
-        newMemberModal
-    } from '$lib/stores/organization';
-    import { sdkForConsole } from '$lib/stores/sdk';
-    import { base } from '$app/paths';
-    import { user } from '$lib/stores/user';
-    import { goto } from '$app/navigation';
+    import { navigating } from '$app/stores';
+    import { header } from '$lib/stores/layout';
     import { browser } from '$app/environment';
     import { wizard } from '$lib/stores/wizard';
 
@@ -30,32 +8,11 @@
     export let showSideNavigation = false;
 
     let y: number;
-    let showDropdown = false;
 
     navigating.subscribe(() => {
         if (isOpen) isOpen = false;
     });
 
-    let avatars = [];
-    let avatarsTotal = 0;
-
-    memberList.subscribe((value) => {
-        if (value?.total > 0) {
-            avatarsTotal = value.total;
-            avatars = value.memberships.map((team) => {
-                return {
-                    name: team.userName,
-                    img: sdkForConsole.avatars.getInitials(team.userName, 80, 80).toString()
-                };
-            });
-        }
-    });
-
-    const logout = async () => {
-        await user.logout();
-        await goto(`${base}/login`);
-    };
-
     const toggleMenu = () => {
         y = 0;
         isOpen = !isOpen;
@@ -90,93 +47,10 @@
         <slot name="side" />
     </nav>
     <section class="main-content">
-        <Cover>
-            <svelte:fragment slot="header">
-                {#if $backButton}
-                    <a class="back-button" href={$backButton} aria-label="page back">
-                        <span class="icon-cheveron-left" aria-hidden="true" />
-                    </a>
-                {/if}
-                {#if $titleDropdown?.length && $organization}
-                    <DropList
-                        bind:show={showDropdown}
-                        position="bottom"
-                        arrow={false}
-                        scrollable={true}>
-                        <button
-                            class="button is-text u-padding-inline-0"
-                            on:click={() => (showDropdown = !showDropdown)}>
-                            <h1 class="heading-level-4">
-                                <span class="text"> {$organization.name}</span>
+        {#if $header}
+            <svelte:component this={$header} />
+        {/if}
 
-                                <span
-                                    class={`icon-cheveron-${showDropdown ? 'up' : 'down'}`}
-                                    aria-hidden="true" />
-                            </h1>
-                        </button>
-                        <svelte:fragment slot="list">
-                            {#each $titleDropdown as org}
-                                <DropListLink
-                                    href={`${base}/console/organization-${org.$id}`}
-                                    on:click={() => {
-                                        showDropdown = false;
-                                    }}>
-                                    {org.name}
-                                </DropListLink>
-                            {/each}
-                        </svelte:fragment>
-                        <svelte:fragment slot="other">
-                            <section class="drop-section">
-                                <ul class="drop-list">
-                                    <DropListItem
-                                        icon="plus"
-                                        on:click={() => {
-                                            showDropdown = false;
-                                            newOrgModal.set(true);
-                                        }}>New Organization</DropListItem>
-                                </ul>
-                            </section></svelte:fragment>
-                    </DropList>
-                    <div class="u-margin-inline-start-auto">
-                        <div class="u-flex u-gap-16">
-                            <AvatarGroup size={40} {avatars} total={avatarsTotal} />
-                            <Button secondary on:click={() => newMemberModal.set(true)}>
-                                <span class="icon-plus" aria-hidden="true" />
-                                <span class="text">Invite</span>
-                            </Button>
-                        </div>
-                    </div>
-                {:else}
-                    <h1 class="heading-level-4">
-                        <span class="text">{$title ? $title : '-'}</span>
-                    </h1>
-                {/if}
-                {#if $page.url.pathname.includes('/console/account')}
-                    <div class="u-margin-inline-start-auto">
-                        <Button secondary on:click={logout}>Logout</Button>
-                    </div>
-                {/if}
-
-                {#if $copyData?.value}
-                    <Copy value={$copyData.value}>
-                        <Pill button>
-                            <span class="icon-duplicate" aria-hidden="true" />
-                            {$copyData.text}
-                        </Pill>
-                    </Copy>
-                {/if}
-            </svelte:fragment>
-
-            {#if $tabs.length}
-                <Tabs>
-                    {#each $tabs as tab}
-                        <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
-                            {tab.title}
-                        </Tab>
-                    {/each}
-                </Tabs>
-            {/if}
-        </Cover>
         <slot />
     </section>
 </main>
diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index 87cb2c946..b5fc0bfe1 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -1,7 +1,5 @@
-import { project } from '../../routes/console/project-[project]/store';
-import { get, writable, readable } from 'svelte/store';
-import type { Models } from '@aw-labs/appwrite-console';
-import type { Navigation } from '@sveltejs/kit';
+import { writable, readable, get } from 'svelte/store';
+import type { SvelteComponent } from 'svelte';
 
 export type Tab = {
     href: string;
@@ -11,68 +9,20 @@ export type Tab = {
 export type Breadcrumb = {
     href: string;
     title: string;
-    level?: number;
 };
 
 export type updateLayoutArguments = {
-    title: string;
-    titleDropdown?: Models.Team[];
-    level?: number;
-    tabs?: Tab[];
-    back?: string;
-    breadcrumbs?: Breadcrumb[] | Breadcrumb;
-    copy?: {
-        text: string;
-        value: string;
-    };
-    customBase?: string;
-    navigate?: Navigation;
+    header?: typeof SvelteComponent;
+    breadcrumb?: typeof SvelteComponent;
 };
 
-export const level = writable<number>();
-export const title = writable<string>('');
-export const titleDropdown = writable<Models.Team[]>([]);
-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 const header = writable<typeof SvelteComponent>();
+export const breadcrumb = writable<typeof SvelteComponent>();
 
 export function updateLayout(args: updateLayoutArguments) {
-    const projectId = get(project)?.$id;
-    const base = args?.customBase ?? projectId ? `/console/project-${projectId}` : ``;
-
-    if (args?.tabs) {
-        args.tabs.map((tab) => {
-            tab.href = `${base}/${tab.href}`;
-        });
-    }
-
-    if (args?.navigate?.to) {
-        const previousTabs = get(tabs);
-        if (previousTabs.some((t) => `${base}/${t.href}` === args.navigate.to.url.pathname)) {
-            return;
-        }
-    }
-
-    title.set(args.title);
-    titleDropdown.set(args.titleDropdown ?? []);
-    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));
-        }
-    }
+    header.set(args.header ?? null);
+    breadcrumb.set(args.breadcrumb ?? null);
 }
 
 export const pageLimit = readable(12); // default page limit
-export const cardLimit = readable(6); // default page limit
+export const cardLimit = readable(6); // default card limit
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index cea54722f..c66ceae60 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -2,33 +2,22 @@
     import Shell from '$lib/layout/shell.svelte';
     import SideNavigation from '$lib/layout/navigation.svelte';
     import Header from '$lib/layout/header.svelte';
-    import { updateLayout } from '$lib/stores/layout';
-    import {
-        organization,
-        organizationList,
-        newOrgModal,
-        redirectTo
-    } from '$lib/stores/organization';
+    import { organizationList, newOrgModal, redirectTo } from '$lib/stores/organization';
     import Create from './_createOrganization.svelte';
     import { page } from '$app/stores';
     import { afterNavigate } from '$app/navigation';
     import { onMount } from 'svelte';
     import { wizard } from '$lib/stores/wizard';
 
-    updateLayout({
-        title: $organization?.name ?? '',
-        level: 0
-    });
-
     onMount(async () => {
         if ($page.url.pathname === '/console' && !$newOrgModal) {
-            await redirectTo();
+            return await redirectTo();
         }
     });
 
     afterNavigate(async () => {
         if ($page.url.pathname === '/console' && !$newOrgModal) {
-            await redirectTo();
+            return await redirectTo();
         }
     });
 </script>
diff --git a/src/routes/console/_createOrganization.svelte b/src/routes/console/_createOrganization.svelte
index 8024dff5b..152e74c56 100644
--- a/src/routes/console/_createOrganization.svelte
+++ b/src/routes/console/_createOrganization.svelte
@@ -6,7 +6,6 @@
     import { sdkForConsole } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
     import { organization, organizationList } from '$lib/stores/organization';
-    import { titleDropdown } from '$lib/stores/layout';
     import { goto } from '$app/navigation';
 
     export let show = false;
@@ -23,7 +22,6 @@
             const team = await sdkForConsole.teams.create(id ?? 'unique()', name);
             dispatch('created');
             await organizationList.load();
-            titleDropdown.set($organizationList.teams);
             organization.set(team);
             await goto(`/console/organization-${$organization.$id}`);
             addNotification({
diff --git a/src/routes/console/organization-[organization]/+layout.svelte b/src/routes/console/organization-[organization]/+layout.svelte
index b3e21afb1..e53ef2c41 100644
--- a/src/routes/console/organization-[organization]/+layout.svelte
+++ b/src/routes/console/organization-[organization]/+layout.svelte
@@ -3,7 +3,6 @@
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
     import {
-        organizationList,
         organization,
         memberList,
         newOrgModal,
@@ -13,14 +12,15 @@
     import Create from '../_createOrganization.svelte';
     import { page } from '$app/stores';
     import { Query } from '@aw-labs/appwrite-console';
+    import Header from './header.svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
 
     $: organizationId = $page.params.organization;
-    $: path = `console/organization-${organizationId}`;
 
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle(event = null) {
+    async function handle() {
         const promises = Promise.all([
             organization.load(organizationId),
             memberList.load(organizationId, [Query.limit($pageLimit)])
@@ -31,29 +31,8 @@
         }
 
         updateLayout({
-            navigate: event,
-            title: $organization?.name,
-            titleDropdown: $organizationList.teams,
-            level: 0,
-            customBase: '',
-            breadcrumbs: {
-                title: `${$organization.name}`,
-                href: path
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Projects'
-                },
-                {
-                    href: `${path}/members`,
-                    title: 'Members'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
     }
 </script>
diff --git a/src/routes/console/organization-[organization]/breadcrumbs.svelte b/src/routes/console/organization-[organization]/breadcrumbs.svelte
new file mode 100644
index 000000000..62b3a6f20
--- /dev/null
+++ b/src/routes/console/organization-[organization]/breadcrumbs.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/organization-[organization]/header.svelte b/src/routes/console/organization-[organization]/header.svelte
new file mode 100644
index 000000000..7f2e796c0
--- /dev/null
+++ b/src/routes/console/organization-[organization]/header.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { AvatarGroup, DropList, DropListItem, DropListLink, Tab, Tabs } from '$lib/components';
+    import { Button } from '$lib/elements/forms';
+    import { Cover } from '$lib/layout';
+    import {
+        memberList,
+        newMemberModal,
+        newOrgModal,
+        organization,
+        organizationList
+    } from '$lib/stores/organization';
+    import { sdkForConsole } from '$lib/stores/sdk';
+
+    let avatars = [];
+    let avatarsTotal = 0;
+    let showDropdown = false;
+
+    memberList.subscribe((value) => {
+        if (value?.total > 0) {
+            avatarsTotal = value.total;
+            avatars = value.memberships.map((team) => {
+                return {
+                    name: team.userName,
+                    img: sdkForConsole.avatars.getInitials(team.userName, 80, 80).toString()
+                };
+            });
+        }
+    });
+
+    $: organizationId = $page.params.organization;
+    $: path = `/console/organization-${organizationId}`;
+    $: tabs = [
+        {
+            href: path,
+            title: 'Projects'
+        },
+        {
+            href: `${path}/members`,
+            title: 'Members'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <DropList bind:show={showDropdown} position="bottom" arrow={false} scrollable={true}>
+            <button
+                class="button is-text u-padding-inline-0"
+                on:click={() => (showDropdown = !showDropdown)}>
+                <h1 class="heading-level-4">
+                    <span class="text"> {$organization.name}</span>
+
+                    <span
+                        class={`icon-cheveron-${showDropdown ? 'up' : 'down'}`}
+                        aria-hidden="true" />
+                </h1>
+            </button>
+            <svelte:fragment slot="list">
+                {#each $organizationList.teams as org}
+                    <DropListLink
+                        href={`${base}/console/organization-${org.$id}`}
+                        on:click={() => {
+                            showDropdown = false;
+                        }}>
+                        {org.name}
+                    </DropListLink>
+                {/each}
+            </svelte:fragment>
+            <svelte:fragment slot="other">
+                <section class="drop-section">
+                    <ul class="drop-list">
+                        <DropListItem
+                            icon="plus"
+                            on:click={() => {
+                                showDropdown = false;
+                                newOrgModal.set(true);
+                            }}>New Organization</DropListItem>
+                    </ul>
+                </section></svelte:fragment>
+        </DropList>
+        <div class="u-margin-inline-start-auto">
+            <div class="u-flex u-gap-16">
+                <AvatarGroup size={40} {avatars} total={avatarsTotal} />
+                <Button secondary on:click={() => newMemberModal.set(true)}>
+                    <span class="icon-plus" aria-hidden="true" />
+                    <span class="text">Invite</span>
+                </Button>
+            </div>
+        </div>
+    </svelte:fragment>
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/organization-[organization]/settings/+page.svelte b/src/routes/console/organization-[organization]/settings/+page.svelte
index b7a159bdc..f53a4665a 100644
--- a/src/routes/console/organization-[organization]/settings/+page.svelte
+++ b/src/routes/console/organization-[organization]/settings/+page.svelte
@@ -5,7 +5,6 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { organization, memberList } from '$lib/stores/organization';
-    import { title, breadcrumbs } from '$lib/stores/layout';
     import Delete from '../_deleteOrganization.svelte';
 
     let name: string = $organization.name;
@@ -15,10 +14,6 @@
         try {
             await sdkForConsole.teams.update($organization.$id, name);
             $organization.name = name;
-            title.set(name);
-            const breadcrumb = $breadcrumbs.get(0);
-            breadcrumb.title = name;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
diff --git a/src/routes/console/project-[project]/+layout.svelte b/src/routes/console/project-[project]/+layout.svelte
index 23b445c4e..a5c524d4c 100644
--- a/src/routes/console/project-[project]/+layout.svelte
+++ b/src/routes/console/project-[project]/+layout.svelte
@@ -8,7 +8,6 @@
     import { organization } from '$lib/stores/organization';
     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 =
@@ -48,7 +47,7 @@
     afterNavigate(handle);
 
     let loaded = false;
-    async function handle(event = null) {
+    async function handle() {
         if (sdkForProject.client.config.project !== projectId) {
             setProject(projectId);
         }
@@ -62,23 +61,6 @@
                 await promiseOrganization;
             }
         }
-
-        updateLayout({
-            navigate: event,
-            title: $project.name,
-            level: 1,
-            breadcrumbs: [
-                {
-                    href: 'console',
-                    title: $organization.name,
-                    level: 0
-                },
-                {
-                    href: `project-${$project.$id}`,
-                    title: $project.name
-                }
-            ]
-        });
         loaded = true;
     }
 </script>
diff --git a/src/routes/console/project-[project]/authentication/+layout.svelte b/src/routes/console/project-[project]/authentication/+layout.svelte
index 16b0c10d1..3c9702374 100644
--- a/src/routes/console/project-[project]/authentication/+layout.svelte
+++ b/src/routes/console/project-[project]/authentication/+layout.svelte
@@ -2,48 +2,17 @@
     import { afterNavigate } from '$app/navigation';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
-
-    const path = 'authentication';
+    import Breadcrumbs from './breadcrumbs.svelte';
+    import Header from './header.svelte';
 
     onMount(handle);
     afterNavigate(handle);
 
-    let loaded = false;
-
-    function handle(event = null) {
+    function handle() {
         updateLayout({
-            navigate: event,
-            title: 'Authentication',
-            level: 3,
-            breadcrumbs: {
-                title: 'Authentication',
-                href: path
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Users'
-                },
-                {
-                    href: `${path}/teams`,
-                    title: 'Teams'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                },
-                {
-                    href: `${path}/security`,
-                    title: 'Security'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
-
-        loaded = true;
     }
 </script>
 
@@ -51,6 +20,4 @@
     <title>Appwrite - Users</title>
 </svelte:head>
 
-{#if loaded}
-    <slot />
-{/if}
+<slot />
diff --git a/src/routes/console/project-[project]/authentication/breadcrumbs.svelte b/src/routes/console/project-[project]/authentication/breadcrumbs.svelte
new file mode 100644
index 000000000..e7c4585c7
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/breadcrumbs.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/authentication`,
+            title: 'Authentication'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/authentication/header.svelte b/src/routes/console/project-[project]/authentication/header.svelte
new file mode 100644
index 000000000..553fabfb6
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/header.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Tab, Tabs } from '$lib/components';
+    import { Cover } from '$lib/layout';
+
+    const projectId = $page.params.project;
+    const path = `/console/project-${projectId}/authentication`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Users'
+        },
+        {
+            href: `${path}/teams`,
+            title: 'Teams'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/security`,
+            title: 'Security'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <h1 class="heading-level-4">
+            <span class="text">Authentication</span>
+        </h1>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte
index 8a02e2b20..227328010 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/+layout.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { base } from '$app/paths';
     import { updateLayout } from '$lib/stores/layout';
     import { team } from './store';
     import { afterNavigate } from '$app/navigation';
     import { onMount } from 'svelte';
+    import Header from './header.svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
 
     const teamId = $page.params.team;
-    const path = `authentication/teams/${teamId}`;
 
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle(event = null) {
+    async function handle() {
         const promise = team.load(teamId);
 
         if ($team?.$id !== teamId) {
@@ -20,32 +20,8 @@
         }
 
         updateLayout({
-            navigate: event,
-            level: 4,
-            title: $team.name,
-            back: `${base}/console/project-${$page.params.project}/authentication/teams`,
-            breadcrumbs: {
-                title: $team.name,
-                href: `teams/${teamId}`
-            },
-            copy: {
-                text: 'Team ID',
-                value: teamId
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Overview'
-                },
-                {
-                    href: `${path}/members`,
-                    title: 'Members'
-                },
-                {
-                    href: `${path}/activity`,
-                    title: 'Activity'
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
     }
 </script>
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
index 1aa5cfaeb..2a2999ac0 100644
--- a/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { Avatar, CardGrid, Box } from '$lib/components';
     import { Container } from '$lib/layout';
@@ -7,9 +8,7 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { addNotification } from '$lib/stores/notifications';
     import { team } from './store';
-    import { title, breadcrumbs } from '$lib/stores/layout';
     import DeleteTeam from './_deleteTeam.svelte';
-    import { onMount } from 'svelte';
 
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 48, 48).toString();
 
@@ -24,10 +23,6 @@
         try {
             await sdkForProject.teams.update($page.params.team, teamName);
             $team.name = teamName;
-            title.set(teamName);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
-            breadcrumb.title = teamName;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/breadcrumbs.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/breadcrumbs.svelte
new file mode 100644
index 000000000..cdc1ead7f
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { team } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/authentication`,
+            title: 'Authentication'
+        },
+        {
+            href: `/console/project-${$project.$id}/authentication/user/${$team.$id}`,
+            title: $team.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/authentication/teams/[team]/header.svelte b/src/routes/console/project-[project]/authentication/teams/[team]/header.svelte
new file mode 100644
index 000000000..80a00e18b
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/teams/[team]/header.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { team } from './store';
+
+    const projectId = $page.params.project;
+    const teamId = $page.params.team;
+    const path = `/console/project-${projectId}/authentication/teams/${teamId}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/members`,
+            title: 'Members'
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/authentication`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$team.name}</span>
+        </h1>
+        <Copy value={$team.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Team ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte b/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte
index b5d5fc24d..68b81ed28 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/+layout.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
+    import Header from './header.svelte';
     import { user } from './store';
 
     const userId = $page.params.user;
-    const path = `authentication/user/${userId}`;
 
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle(event = null) {
+    async function handle() {
         const promise = user.load(userId);
 
         if ($user?.$id !== userId) {
@@ -20,36 +20,8 @@
         }
 
         updateLayout({
-            navigate: event,
-            title: $user.name,
-            level: 4,
-            breadcrumbs: {
-                title: $user.name,
-                href: `user/${userId}`
-            },
-            back: `${base}/console/project-${$page.params.project}/authentication`,
-            copy: {
-                text: 'User ID',
-                value: userId
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Overview'
-                },
-                {
-                    href: `${path}/memberships`,
-                    title: 'Memberships'
-                },
-                {
-                    href: `${path}/sessions`,
-                    title: 'Sessions'
-                },
-                {
-                    href: `${path}/activity`,
-                    title: 'Activity'
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
     }
 </script>
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte b/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
index 6d293e8d1..ad2b695f3 100644
--- a/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
+++ b/src/routes/console/project-[project]/authentication/user/[user]/+page.svelte
@@ -17,7 +17,6 @@
     import DeleteUser from './_deleteUser.svelte';
     import { user } from './store';
     import { onMount } from 'svelte';
-    import { title, breadcrumbs } from '$lib/stores/layout';
 
     $: if (prefs) {
         if (JSON.stringify(prefs) !== JSON.stringify(Object.entries($user.prefs))) {
@@ -108,10 +107,6 @@
         try {
             await sdkForProject.users.updateName($user.$id, userName);
             $user.name = userName;
-            title.set(userName);
-            const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
-            breadcrumb.title = userName;
-            $breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
             addNotification({
                 message: 'Name has been updated',
                 type: 'success'
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/breadcrumbs.svelte b/src/routes/console/project-[project]/authentication/user/[user]/breadcrumbs.svelte
new file mode 100644
index 000000000..9cc20db48
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user/[user]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { user } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/authentication`,
+            title: 'Authentication'
+        },
+        {
+            href: `/console/project-${$project.$id}/authentication/user/${$user.$id}`,
+            title: $user.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/authentication/user/[user]/header.svelte b/src/routes/console/project-[project]/authentication/user/[user]/header.svelte
new file mode 100644
index 000000000..901e7acc8
--- /dev/null
+++ b/src/routes/console/project-[project]/authentication/user/[user]/header.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { user } from './store';
+
+    const projectId = $page.params.project;
+    const userId = $page.params.user;
+    const path = `/console/project-${projectId}/authentication/user/${userId}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/memberships`,
+            title: 'Memberships'
+        },
+        {
+            href: `${path}/sessions`,
+            title: 'Sessions'
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/authentication`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$user.name}</span>
+        </h1>
+        <Copy value={$user.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                User ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/databases/+layout.svelte b/src/routes/console/project-[project]/databases/+layout.svelte
index 6011243d3..d4d2d4190 100644
--- a/src/routes/console/project-[project]/databases/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/+layout.svelte
@@ -2,33 +2,17 @@
     import { afterNavigate } from '$app/navigation';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
-
-    const path = 'databases';
+    import Breadcrumbs from './breadcrumbs.svelte';
+    import Header from './header.svelte';
 
     onMount(handle);
     afterNavigate(handle);
 
     let loaded = false;
-
-    function handle(event = null) {
+    function handle() {
         updateLayout({
-            navigate: event,
-            title: 'Databases',
-            tabs: [
-                {
-                    href: path,
-                    title: 'Databases'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                }
-            ],
-            level: 3,
-            breadcrumbs: {
-                href: 'databases',
-                title: 'Databases'
-            }
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
         loaded = true;
     }
diff --git a/src/routes/console/project-[project]/databases/breadcrumbs.svelte b/src/routes/console/project-[project]/databases/breadcrumbs.svelte
new file mode 100644
index 000000000..cbd1db386
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/breadcrumbs.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/databases`,
+            title: 'Databases'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte
index a2d5fc4e5..4f86f17e0 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/+layout.svelte
@@ -1,19 +1,19 @@
 <script>
+    import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { updateLayout } from '$lib/stores/layout';
-    import { onMount } from 'svelte';
+    import { breadcrumb, updateLayout } from '$lib/stores/layout';
     import { database } from './store';
+    import Breadcrumbs from './breadcrumbs.svelte';
+    import Header from './header.svelte';
 
     const databaseId = $page.params.database;
     const path = `databases/database/${databaseId}`;
 
-    let loaded = false;
-
     onMount(handle);
     afterNavigate(handle);
-
+    let loaded = false;
     async function handle(event = null) {
         const promise = database.load(databaseId);
         if ($database?.$id !== databaseId) {
@@ -21,32 +21,8 @@
         }
 
         updateLayout({
-            navigate: event,
-            back: `${base}/console/project-${$page.params.project}/databases`,
-            copy: {
-                text: 'Database ID',
-                value: databaseId
-            },
-            title: $database.name,
-            level: 4,
-            breadcrumbs: {
-                href: `database/${databaseId}`,
-                title: $database.name
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Collections'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
         loaded = true;
     }
diff --git a/src/routes/console/project-[project]/databases/database/[database]/breadcrumbs.svelte b/src/routes/console/project-[project]/databases/database/[database]/breadcrumbs.svelte
new file mode 100644
index 000000000..b863a9111
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database/[database]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { database } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/databases`,
+            title: 'Databases'
+        },
+        {
+            href: `/console/project-${$project.$id}/databases/database/${$database.$id}`,
+            title: $database.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte
index c21d4def9..55b38bfdf 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/+layout.svelte
@@ -1,62 +1,28 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
+    import Header from './header.svelte';
     import { collection } from './store';
 
     const databaseId = $page.params.database;
     const collectionId = $page.params.collection;
-    const path = `databases/database/${databaseId}/collection/${collectionId}`;
-
-    let loaded = false;
 
     onMount(handle);
     afterNavigate(handle);
-
-    async function handle(event = null) {
-        if ($collection?.$id !== collectionId || !event) {
-            await collection.load(databaseId, collectionId);
+    let loaded = false;
+    async function handle() {
+        const promise = collection.load(databaseId, collectionId);
+        if ($collection?.$id !== collectionId) {
+            await promise;
         }
 
         updateLayout({
-            navigate: event,
-            title: $collection.name,
-            back: `${base}/console/project-${$page.params.project}/databases/database/${databaseId}`,
-            copy: {
-                text: 'Collection ID',
-                value: collectionId
-            },
-            level: 5,
-            breadcrumbs: {
-                href: `collection/${collectionId}`,
-                title: $collection.name
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Documents'
-                },
-                {
-                    href: `${path}/attributes`,
-                    title: 'Attributes'
-                },
-                {
-                    href: `${path}/indexes`,
-                    title: 'Indexes'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
-
         loaded = true;
     }
 </script>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/breadcrumbs.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/breadcrumbs.svelte
new file mode 100644
index 000000000..3c2869348
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/breadcrumbs.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { project } from '../../../../../store';
+    import { database } from '../../store';
+    import { collection } from './store';
+
+    $: breadcrumbs = [
+        {
+            title: '...'
+        },
+        {
+            href: `/console/project-${$project.$id}/databases`,
+            title: 'Databases'
+        },
+        {
+            href: `/console/project-${$project.$id}/databases/database/${$database.$id}`,
+            title: $database.name
+        },
+        {
+            href: `/console/project-${$project.$id}/databases/database/${$database.$id}/collection/${$collection.$id}`,
+            title: $collection.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte
index 9fb424459..59b64eda7 100644
--- a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/+layout.svelte
@@ -4,42 +4,25 @@
     import { doc } from './store';
     import { onMount } from 'svelte';
     import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
+    import Header from './header.svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
 
     const databaseId = $page.params.database;
     const collectionId = $page.params.collection;
     const documentId = $page.params.document;
-    const path = `databases/database/${databaseId}/collection/${collectionId}/document/${documentId}`;
 
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle(event = null) {
+    async function handle() {
         const promise = doc.load(databaseId, collectionId, documentId);
         if ($doc?.$id !== documentId) {
             await promise;
         }
 
         updateLayout({
-            navigate: event,
-            title: 'Document',
-            copy: { text: 'Document ID', value: $doc.$id },
-            back: `${base}/console/project-${$page.params.project}/databases/database/${databaseId}/collection/${collectionId}`,
-            level: 6,
-            breadcrumbs: {
-                title: $doc.$id,
-                href: `document/${documentId}`
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Overview'
-                },
-                {
-                    href: `${path}/activity`,
-                    title: 'Activity'
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
     }
 </script>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/breadcrumbs.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/breadcrumbs.svelte
new file mode 100644
index 000000000..a350da0c2
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { project } from '../../../../../../../store';
+    import { database } from '../../../../store';
+    import { collection } from '../../store';
+    import { doc } from './store';
+
+    $: breadcrumbs = [
+        {
+            title: '...'
+        },
+        {
+            href: `/console/project-${$project.$id}/databases/database/${$database.$id}`,
+            title: $database.name
+        },
+        {
+            href: `/console/project-${$project.$id}/databases/database/${$database.$id}/collection/${$collection.$id}`,
+            title: $collection.name
+        },
+        {
+            href: `/console/project-${$project.$id}/databases/database/${$database.$id}/collection/${$collection.$id}/document/${$doc.$id}`,
+            title: $doc.$id
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/header.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/header.svelte
new file mode 100644
index 000000000..c40d3295d
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/document/[document]/header.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { doc } from './store';
+
+    const projectId = $page.params.project;
+    const databaseId = $page.params.database;
+    const collectionId = $page.params.collection;
+    const documentId = $page.params.document;
+    const path = `/console/project-${projectId}/databases/database/${databaseId}/collection/${collectionId}/document/${documentId}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/databases/database/${databaseId}/collection/${collectionId}`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$doc.$id}</span>
+        </h1>
+        <Copy value={$doc.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Document ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/header.svelte b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/header.svelte
new file mode 100644
index 000000000..72e1d2c0d
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database/[database]/collection/[collection]/header.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { collection } from './store';
+
+    const projectId = $page.params.project;
+    const databaseId = $page.params.database;
+    const collectionId = $page.params.collection;
+    const path = `/console/project-${projectId}/databases/database/${databaseId}/collection/${collectionId}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Documents'
+        },
+        {
+            href: `${path}/attributes`,
+            title: 'Attributes'
+        },
+        {
+            href: `${path}/indexes`,
+            title: 'Indexes'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/databases/database/${databaseId}`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$collection.name}</span>
+        </h1>
+        <Copy value={$collection.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Collection ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/databases/database/[database]/header.svelte b/src/routes/console/project-[project]/databases/database/[database]/header.svelte
new file mode 100644
index 000000000..d487258c0
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database/[database]/header.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { database } from './store';
+
+    const projectId = $page.params.project;
+    const databaseId = $page.params.database;
+    const path = `/console/project-${projectId}/databases/database/${databaseId}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Collections'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/databases`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$database.name}</span>
+        </h1>
+        <Copy value={$database.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Database ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/databases/header.svelte b/src/routes/console/project-[project]/databases/header.svelte
new file mode 100644
index 000000000..97b1b7098
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/header.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Tab, Tabs } from '$lib/components';
+    import { Cover } from '$lib/layout';
+
+    const projectId = $page.params.project;
+    const path = `/console/project-${projectId}/databases`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Databases'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <h1 class="heading-level-4">
+            <span class="text">Databases</span>
+        </h1>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/overview/+layout.svelte b/src/routes/console/project-[project]/overview/+layout.svelte
index 00972707c..3ad2ec39c 100644
--- a/src/routes/console/project-[project]/overview/+layout.svelte
+++ b/src/routes/console/project-[project]/overview/+layout.svelte
@@ -3,7 +3,6 @@
     import { Container, type UsagePeriods } from '$lib/layout';
     import { page } from '$app/stores';
     import { browser } from '$app/environment';
-    import { tabs, title, backButton, copyData } from '$lib/stores/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from '../store';
     import { usage } from './store';
@@ -12,6 +11,9 @@
     import { DropList, DropListItem } from '$lib/components';
     import { BarChart, LineChart } from '$lib/charts';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import { updateLayout } from '$lib/stores/layout';
+    import Header from './header.svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
 
     $: projectId = $page.params.project;
     $: path = `/console/project-${projectId}/overview`;
@@ -29,14 +31,9 @@
         if ($usage) {
             await promise;
         }
-
-        title.set($project.name);
-        tabs.set([]);
-        backButton.set('');
-
-        copyData.set({
-            text: 'Project ID',
-            value: $project.$id
+        updateLayout({
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
     }
 
diff --git a/src/routes/console/project-[project]/overview/breadcrumbs.svelte b/src/routes/console/project-[project]/overview/breadcrumbs.svelte
new file mode 100644
index 000000000..d679cf74e
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/breadcrumbs.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/overview/header.svelte b/src/routes/console/project-[project]/overview/header.svelte
new file mode 100644
index 000000000..40589b702
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { Copy } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { project } from '../store';
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <h1 class="heading-level-4">
+            <span class="text">{$project.name}</span>
+        </h1>
+        <Copy value={$project.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Project ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+</Cover>
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
index 29b8e2f59..0979f22d0 100644
--- a/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/keys/[key]/+page@project-[project].svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { CardGrid, Secret } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
@@ -14,7 +13,9 @@
     import { onMount } from 'svelte';
     import { project } from '../../../store';
     import Scopes from '../scopes.svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
     import Delete from './delete.svelte';
+    import Header from './header.svelte';
     import { key } from './store';
 
     const projectId = $page.params.project;
@@ -30,7 +31,7 @@
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle(event = null) {
+    async function handle() {
         await key.load(projectId, keyId);
 
         name ??= $key.name;
@@ -39,26 +40,8 @@
         scopes ??= $key.scopes;
 
         updateLayout({
-            navigate: event,
-            back: `${base}/console/project-${$page.params.project}/overview/keys`,
-            title: $key.name,
-            level: 4,
-            copy: {
-                text: 'API Key Secret',
-                value: $key.secret
-            },
-            breadcrumbs: [
-                {
-                    level: 3,
-                    href: 'keys',
-                    title: 'API Keys'
-                },
-                {
-                    level: 4,
-                    href: keyId,
-                    title: $key.name
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
         loaded = true;
     }
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/breadcrumbs.svelte b/src/routes/console/project-[project]/overview/keys/[key]/breadcrumbs.svelte
new file mode 100644
index 000000000..c6e0726ea
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/[key]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { key } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/overview/keys`,
+            title: 'API Keys'
+        },
+        {
+            href: `/console/project-${$project.$id}/overview/keys/${$key.$id}`,
+            title: $key.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/overview/keys/[key]/header.svelte b/src/routes/console/project-[project]/overview/keys/[key]/header.svelte
new file mode 100644
index 000000000..6ca38f613
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/keys/[key]/header.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { key } from './store';
+
+    const projectId = $page.params.project;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/overview/keys`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$key.name}</span>
+        </h1>
+        <Copy value={$key.secret}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                API Key Secret
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+</Cover>
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
index d90fa15e4..b19521b3e 100644
--- a/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/+page@project-[project].svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { CardGrid } from '$lib/components';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
@@ -22,6 +21,8 @@
     import AppleMacOs from './appleMacOS.svelte';
     import AppleWatchOs from './appleWatchOS.svelte';
     import AppleTvos from './appleTvOS.svelte';
+    import Header from './header.svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
 
     const projectId = $page.params.project;
     const platformId = $page.params.platform;
@@ -46,7 +47,7 @@
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle(event = null) {
+    async function handle() {
         if ($platform?.$id !== platformId) {
             await platform.load(projectId, platformId);
         }
@@ -54,22 +55,8 @@
         name ??= $platform.name;
 
         updateLayout({
-            navigate: event,
-            back: `${base}/console/project-${projectId}/overview/platforms`,
-            title: $platform.name,
-            level: 4,
-            breadcrumbs: [
-                {
-                    level: 3,
-                    href: 'platforms',
-                    title: 'Platforms'
-                },
-                {
-                    level: 4,
-                    href: platformId,
-                    title: $platform.name
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
         loaded = true;
     }
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/breadcrumbs.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/breadcrumbs.svelte
new file mode 100644
index 000000000..f07a84a65
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { platform } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/overview/platforms`,
+            title: 'Platforms'
+        },
+        {
+            href: `/console/project-${$project.$id}/overview/platforms/${$platform.$id}`,
+            title: $platform.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/overview/platforms/[platform]/header.svelte b/src/routes/console/project-[project]/overview/platforms/[platform]/header.svelte
new file mode 100644
index 000000000..cfccf8fa5
--- /dev/null
+++ b/src/routes/console/project-[project]/overview/platforms/[platform]/header.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Cover } from '$lib/layout';
+    import { platform } from './store';
+
+    const projectId = $page.params.project;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/overview/platforms`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$platform.name}</span>
+        </h1>
+    </svelte:fragment>
+</Cover>
diff --git a/src/routes/console/project-[project]/settings/+layout.svelte b/src/routes/console/project-[project]/settings/+layout.svelte
index 133d65fbc..3e3ff23bf 100644
--- a/src/routes/console/project-[project]/settings/+layout.svelte
+++ b/src/routes/console/project-[project]/settings/+layout.svelte
@@ -2,6 +2,8 @@
     import { afterNavigate } from '$app/navigation';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
+    import Header from './header.svelte';
 
     const path = 'settings';
 
@@ -10,27 +12,8 @@
 
     function handle(event = null) {
         updateLayout({
-            navigate: event,
-            title: 'Settings',
-            level: 3,
-            breadcrumbs: {
-                title: 'Settings',
-                href: 'settings'
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Overview'
-                },
-                {
-                    href: `${path}/services`,
-                    title: 'Services'
-                },
-                {
-                    href: `${path}/domains`,
-                    title: 'Custom Domains'
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
     }
 </script>
diff --git a/src/routes/console/project-[project]/settings/breadcrumbs.svelte b/src/routes/console/project-[project]/settings/breadcrumbs.svelte
new file mode 100644
index 000000000..c15a0e819
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/breadcrumbs.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/settings/header.svelte b/src/routes/console/project-[project]/settings/header.svelte
new file mode 100644
index 000000000..4562364ca
--- /dev/null
+++ b/src/routes/console/project-[project]/settings/header.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Tab, Tabs } from '$lib/components';
+    import { Cover } from '$lib/layout';
+
+    const projectId = $page.params.project;
+    const path = `/console/project-${projectId}/settings`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/services`,
+            title: 'Services'
+        },
+        {
+            href: `${path}/domains`,
+            title: 'Custom Domains'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <h1 class="heading-level-4">
+            <span class="text">Settings</span>
+        </h1>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/storage/+layout.svelte b/src/routes/console/project-[project]/storage/+layout.svelte
index c822db463..140497dcd 100644
--- a/src/routes/console/project-[project]/storage/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/+layout.svelte
@@ -2,33 +2,18 @@
     import { afterNavigate } from '$app/navigation';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
-
-    const path = 'storage';
+    import Breadcrumbs from './breadcrumbs.svelte';
+    import Header from './header.svelte';
 
     onMount(handle);
     afterNavigate(handle);
 
     let loaded = false;
 
-    async function handle(event = null) {
+    async function handle() {
         updateLayout({
-            navigate: event,
-            title: 'Storage',
-            level: 3,
-            breadcrumbs: {
-                title: 'Storage',
-                href: 'storage'
-            },
-            tabs: [
-                {
-                    href: path,
-                    title: 'Buckets'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
         loaded = true;
     }
diff --git a/src/routes/console/project-[project]/storage/breadcrumbs.svelte b/src/routes/console/project-[project]/storage/breadcrumbs.svelte
new file mode 100644
index 000000000..67dd8a078
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/breadcrumbs.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/storage`,
+            title: 'Storage'
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte
index a099a45a9..e6157d213 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/+layout.svelte
@@ -1,55 +1,30 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
     import { bucket } from './store';
+    import Breadcrumbs from './breadcrumbs.svelte';
+    import Header from './header.svelte';
 
-    const projectId = $page.params.project;
     const bucketId = $page.params.bucket;
-    const path = `storage/bucket/${bucketId}`;
 
     let loaded = false;
 
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle(event = null) {
+    async function handle() {
         const promise = bucket.load(bucketId);
         if ($bucket?.$id !== bucketId) {
             await promise;
         }
 
         updateLayout({
-            navigate: event,
-            title: $bucket.name,
-            level: 4,
-            breadcrumbs: {
-                title: $bucket.name,
-                href: `storage/bucket/${bucketId}`
-            },
-            copy: {
-                text: 'Bucket ID',
-                value: bucketId
-            },
-            back: `${base}/console/project-${projectId}/storage`,
-
-            tabs: [
-                {
-                    href: path,
-                    title: 'Files'
-                },
-                {
-                    href: `${path}/usage`,
-                    title: 'Usage'
-                },
-                {
-                    href: `${path}/settings`,
-                    title: 'Settings'
-                }
-            ]
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
+
         loaded = true;
     }
 </script>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/breadcrumbs.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/breadcrumbs.svelte
new file mode 100644
index 000000000..5034fa02a
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/breadcrumbs.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { organization } from '$lib/stores/organization';
+    import { project } from '../../../store';
+    import { bucket } from './store';
+
+    $: breadcrumbs = [
+        {
+            href: `/console/organization-${$organization.$id}`,
+            title: $organization.name
+        },
+        {
+            href: `/console/project-${$project.$id}`,
+            title: $project.name
+        },
+        {
+            href: `/console/project-${$project.$id}/storage`,
+            title: 'Storage'
+        },
+        {
+            href: `/console/project-${$project.$id}/storage/bucket/${$bucket.$id}`,
+            title: $bucket.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte
index 51a0c1cc3..c99faa133 100644
--- a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/+layout.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import { afterNavigate } from '$app/navigation';
     import { page } from '$app/stores';
-    import { base } from '$app/paths';
     import { file } from './store';
     import { updateLayout } from '$lib/stores/layout';
     import { onMount } from 'svelte';
+    import Header from './header.svelte';
+    import Breadcrumbs from './breadcrumbs.svelte';
 
     const bucketId = $page.params.bucket;
     const fileId = $page.params.file;
@@ -12,26 +13,15 @@
     onMount(handle);
     afterNavigate(handle);
 
-    async function handle(event = null) {
+    async function handle() {
         const promise = file.load(bucketId, fileId);
         if ($file?.$id !== fileId) {
             await promise;
         }
 
         updateLayout({
-            navigate: event,
-            level: 5,
-            breadcrumbs: {
-                href: `file/${fileId}`,
-                title: $file.name
-            },
-            back: `${base}/console/project-${$page.params.project}/storage/bucket/${bucketId}`,
-            title: $file.name,
-            copy: {
-                text: 'File ID',
-                value: fileId
-            },
-            tabs: []
+            header: Header,
+            breadcrumb: Breadcrumbs
         });
     }
 </script>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/breadcrumbs.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/breadcrumbs.svelte
new file mode 100644
index 000000000..6e4121f3d
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/breadcrumbs.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { Breadcrumbs } from '$lib/layout';
+    import { project } from '../../../../../store';
+    import { bucket } from '../../store';
+    import { file } from './store';
+
+    $: breadcrumbs = [
+        {
+            title: '...'
+        },
+        {
+            href: `/console/project-${$project.$id}/storage`,
+            title: 'Storage'
+        },
+        {
+            href: `/console/project-${$project.$id}/storage/bucket/${$bucket.$id}`,
+            title: $bucket.name
+        },
+        {
+            href: `/console/project-${$project.$id}/storage/bucket/${$bucket.$id}/file/${$file.$id}`,
+            title: $file.name
+        }
+    ];
+</script>
+
+<Breadcrumbs {breadcrumbs} />
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/header.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/header.svelte
new file mode 100644
index 000000000..e9bbac489
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/file/[file]/header.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { file } from './store';
+
+    const projectId = $page.params.project;
+    const bucketId = $page.params.bucket;
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/storage/bucket/${bucketId}`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$file.name}</span>
+        </h1>
+        <Copy value={$file.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                File ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+</Cover>
diff --git a/src/routes/console/project-[project]/storage/bucket/[bucket]/header.svelte b/src/routes/console/project-[project]/storage/bucket/[bucket]/header.svelte
new file mode 100644
index 000000000..0522b5c75
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/bucket/[bucket]/header.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Copy, Tab, Tabs } from '$lib/components';
+    import { Pill } from '$lib/elements';
+    import { Cover } from '$lib/layout';
+    import { bucket } from './store';
+
+    const projectId = $page.params.project;
+    const bucketId = $page.params.bucket;
+    const path = `/console/project-${projectId}/storage/bucket/${bucketId}`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Files'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <a
+            class="back-button"
+            href={`/console/project-${projectId}/storage`}
+            aria-label="page back">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+        </a>
+        <h1 class="heading-level-4">
+            <span class="text">{$bucket.name}</span>
+        </h1>
+        <Copy value={$bucket.$id}>
+            <Pill button>
+                <span class="icon-duplicate" aria-hidden="true" />
+                Bucket ID
+            </Pill>
+        </Copy>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/console/project-[project]/storage/header.svelte b/src/routes/console/project-[project]/storage/header.svelte
new file mode 100644
index 000000000..b58651102
--- /dev/null
+++ b/src/routes/console/project-[project]/storage/header.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+    import { page } from '$app/stores';
+    import { Tab, Tabs } from '$lib/components';
+    import { Cover } from '$lib/layout';
+
+    const projectId = $page.params.project;
+    const path = `/console/project-${projectId}/storage`;
+    const tabs = [
+        {
+            href: path,
+            title: 'Buckets'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        }
+    ];
+</script>
+
+<Cover>
+    <svelte:fragment slot="header">
+        <h1 class="heading-level-4">
+            <span class="text">Storage</span>
+        </h1>
+    </svelte:fragment>
+
+    <Tabs>
+        {#each tabs as tab}
+            <Tab href={tab.href} selected={$page.url.pathname === tab.href}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>