diff --git a/package-lock.json b/package-lock.json
index 467e6d8adb..65e1eee44c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
             "name": "@appwrite/console",
             "version": "0.0.1",
             "dependencies": {
-                "@aw-labs/ui": "*"
+                "@aw-labs/icons": "^0.0.0-4",
+                "@aw-labs/ui": "^0.0.0-4"
             },
             "devDependencies": {
                 "@playwright/test": "^1.22.1",
@@ -56,14 +57,14 @@
             }
         },
         "node_modules/@aw-labs/icons": {
-            "version": "0.0.0-1",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-1.tgz",
-            "integrity": "sha512-R9y70SYD9nE5LtHd6ghj2XqpRec08s+lOObRVrINHRMZnh44ATUkUsnceaIfr+Sc8v7qPXfVepU+lwAR+DODDA=="
+            "version": "0.0.0-4",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-4.tgz",
+            "integrity": "sha512-sHc7T62GbCoOjUqDLWUe2NRh6SQD/Nq7TBgtTTPcxwNKmt5Yn0taiERU5gD+CrNwsTonQk0mp283u65FAuNa6A=="
         },
         "node_modules/@aw-labs/ui": {
-            "version": "0.0.0-1",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-1.tgz",
-            "integrity": "sha512-zuF87wkB1ExVhfS9QgrtpATrzbz+elTEzP0ZDfApX/ILk0Drbp5+eogv2D/3iQUZFwWwJbhR1q1VdRLc9UUnMQ==",
+            "version": "0.0.0-4",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-4.tgz",
+            "integrity": "sha512-3tnR6lo9dAEwOyfUIc7o7SsrlbtNNAa2hq1z3un4/Rbpw94GN6unkRXG9GYD6V8qJ08oNZmkm3+nM7cYfdWsBA==",
             "dependencies": {
                 "@aw-labs/icons": "*"
             }
@@ -7015,14 +7016,14 @@
             }
         },
         "@aw-labs/icons": {
-            "version": "0.0.0-1",
-            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-1.tgz",
-            "integrity": "sha512-R9y70SYD9nE5LtHd6ghj2XqpRec08s+lOObRVrINHRMZnh44ATUkUsnceaIfr+Sc8v7qPXfVepU+lwAR+DODDA=="
+            "version": "0.0.0-4",
+            "resolved": "https://registry.npmjs.org/@aw-labs/icons/-/icons-0.0.0-4.tgz",
+            "integrity": "sha512-sHc7T62GbCoOjUqDLWUe2NRh6SQD/Nq7TBgtTTPcxwNKmt5Yn0taiERU5gD+CrNwsTonQk0mp283u65FAuNa6A=="
         },
         "@aw-labs/ui": {
-            "version": "0.0.0-1",
-            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-1.tgz",
-            "integrity": "sha512-zuF87wkB1ExVhfS9QgrtpATrzbz+elTEzP0ZDfApX/ILk0Drbp5+eogv2D/3iQUZFwWwJbhR1q1VdRLc9UUnMQ==",
+            "version": "0.0.0-4",
+            "resolved": "https://registry.npmjs.org/@aw-labs/ui/-/ui-0.0.0-4.tgz",
+            "integrity": "sha512-3tnR6lo9dAEwOyfUIc7o7SsrlbtNNAa2hq1z3un4/Rbpw94GN6unkRXG9GYD6V8qJ08oNZmkm3+nM7cYfdWsBA==",
             "requires": {
                 "@aw-labs/icons": "*"
             }
diff --git a/package.json b/package.json
index 7908bf5e9a..4c7446562e 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/ui": "*"
+        "@aw-labs/ui": "^0.0.0-4",
+        "@aw-labs/icons": "^0.0.0-4"
     },
     "devDependencies": {
         "@playwright/test": "^1.22.1",
diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte
index e2d373f06d..931aee3142 100644
--- a/src/lib/components/card.svelte
+++ b/src/lib/components/card.svelte
@@ -1,3 +1,3 @@
-<article class="card">
+<article class="card common-section">
     <slot />
 </article>
diff --git a/src/lib/components/empty.svelte b/src/lib/components/empty.svelte
index 5534ff29dc..4e27635635 100644
--- a/src/lib/components/empty.svelte
+++ b/src/lib/components/empty.svelte
@@ -1,12 +1,11 @@
 <script>
-    import { Card } from '.';
+    export let dashed = false;
+    export let centered = false;
 </script>
 
-<Card>
-    <b>
-        <slot name="header" />
-    </b>
-    <p>
-        <slot />
-    </p>
-</Card>
+<article
+    class="card common-section u-flex u-flex-vertical"
+    class:is-border-dashed={dashed}
+    class:u-cross-center={centered}>
+    <slot />
+</article>
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
index 17166c362b..eda6d80cc0 100644
--- a/src/lib/components/modal.svelte
+++ b/src/lib/components/modal.svelte
@@ -48,14 +48,14 @@
                     aria-label="Close Modal"
                     title="Close Modal"
                     on:click={closeModal}>
-                    <span class="icon-cancel" aria-hidden="true" />
+                    <span class="icon-x" aria-hidden="true" />
                 </button>
             </header>
             <div class="modal-content">
                 <slot />
             </div>
             <div class="modal-footer">
-                <div class="u-flex u-gap-10">
+                <div class="u-flex u-main-space-end u-gap-12">
                     <slot name="footer" />
                 </div>
             </div>
diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index e38adcf1ad..6c894b5b9c 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -13,6 +13,7 @@
             offset = limit * (page - 1);
             currentPage = page;
             dispatch('change');
+            pages = pagination(currentPage, totalPages);
         }
     }
 
@@ -21,36 +22,32 @@
             currentPage += 1;
             offset = limit * (currentPage - 1);
             dispatch('change');
+            pages = pagination(currentPage, totalPages);
         } else if (direction === 'prev' && currentPage > 1) {
             currentPage -= 1;
             offset = limit * (currentPage - 1);
             dispatch('change');
+            pages = pagination(currentPage, totalPages);
         }
     }
 
     let pages = pagination(currentPage, totalPages);
 
-    function pagination(current: number, total: number) {
-        let delta = 2,
-            left = current - delta,
-            right = current + delta + 1,
-            range = [],
-            rangeWithDots = [];
-
-        for (let i = 1; i <= total; i++) {
-            if (i == 1 || i == total || (i >= left && i < right)) {
-                range.push(i);
-            }
-        }
-
-        rangeWithDots = range.reduce((prev, current, index) => {
-            if (current - prev[index - 1] > delta) {
-                prev.push('...');
-            }
-            prev.push(current);
-            return prev;
-        }, []);
-        return rangeWithDots;
+    function pagination(page: number, total: number) {
+        const pagesShown = 5;
+        const start = Math.max(
+            1,
+            Math.min(page - Math.floor((pagesShown - 3) / 2), total - pagesShown + 2)
+        );
+        const end = Math.min(
+            total,
+            Math.max(page + Math.floor((pagesShown - 2) / 2), pagesShown - 1)
+        );
+        return [
+            ...(start > 2 ? [1, '...'] : start > 1 ? [1] : []),
+            ...Array.from({ length: end + 1 - start }, (_, i) => i + start),
+            ...(end < total - 1 ? ['...', total] : end < total ? [total] : [])
+        ];
     }
 </script>
 
@@ -93,4 +90,22 @@
             <span class="icon-cheveron-right" aria-hidden="true" />
         </button>
     </nav>
+{:else}
+    <nav class="pagination">
+        <button class="button is-text is-disabled" aria-label="prev page">
+            <span class="icon-cheveron-left" aria-hidden="true" />
+            <span class="text">Prev</span>
+        </button>
+        <ol class="pagination-list is-only-desktop">
+            <li class="pagination-item">
+                <button class="button is-disabled" aria-label="page">
+                    <span class="text">1</span>
+                </button>
+            </li>
+        </ol>
+        <button class="button is-text is-disabled" aria-label="next page">
+            <span class="text">Next</span>
+            <span class="icon-cheveron-right" aria-hidden="true" />
+        </button>
+    </nav>
 {/if}
diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte
index 81cd991c90..4e18871668 100644
--- a/src/lib/elements/forms/button.svelte
+++ b/src/lib/elements/forms/button.svelte
@@ -4,6 +4,7 @@
     export let outline = false;
     export let danger = false;
     export let disabled = false;
+    export let round = false;
     export let href: string = null;
 </script>
 
@@ -12,6 +13,7 @@
         {disabled}
         {href}
         class="button"
+        class:is-only-icon={round}
         class:is-secondary={secondary}
         class:is-outline={outline}
         class:is-danger={danger}>
@@ -22,6 +24,7 @@
         on:click
         {disabled}
         class="button"
+        class:is-only-icon={round}
         class:is-secondary={secondary}
         class:is-outline={outline}
         class:is-danger={danger}
diff --git a/src/lib/elements/table/cellHead.svelte b/src/lib/elements/table/cellHead.svelte
index 08bc549ba5..c1245fa71c 100644
--- a/src/lib/elements/table/cellHead.svelte
+++ b/src/lib/elements/table/cellHead.svelte
@@ -7,3 +7,9 @@
         <slot />
     </span>
 </th>
+
+<style>
+    th {
+        text-transform: uppercase;
+    }
+</style>
diff --git a/src/lib/helpers/date.ts b/src/lib/helpers/date.ts
index 5fcdc6b22a..2fb0c93bae 100644
--- a/src/lib/helpers/date.ts
+++ b/src/lib/helpers/date.ts
@@ -4,3 +4,16 @@ export const toLocaleDate = (timestamp: number) => {
 
     return date.toLocaleDateString('en', options);
 };
+
+export const toLocaleDateTime = (timestamp: number) => {
+    const date = new Date(timestamp * 1000);
+    const options: Intl.DateTimeFormatOptions = {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric'
+    };
+
+    return date.toLocaleDateString('en', options);
+};
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index 68aac55b53..109bef9708 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -4,7 +4,7 @@
 
 <div class="top-cover" class:is-adjust-content-to-cover={adjustContentToCover}>
     <div class="container">
-        <h1 class="heading-level-1">
+        <h1 class="heading-level-2">
             <slot name="title" />
         </h1>
         <slot />
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index b5ad6cfe33..befb4b076d 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -1,13 +1,59 @@
 <script lang="ts">
-    import { navigating } from '$app/stores';
+    import { navigating, page } from '$app/stores';
+    import { tabs, title } from '$lib/stores/layout';
+    import { fade } from 'svelte/transition';
+    import { Cover } from '.';
 
     export let isOpen = false;
 
+    $: base = `/console/${$page.params.project}`;
+
+    let tabsList: HTMLUListElement;
+    let showLeft = false;
+    let showRight = false;
+
     navigating.subscribe(() => {
         if (isOpen) isOpen = false;
     });
+
+    const slide = (direction: 'left' | 'right') => {
+        let scrollCompleted = 0;
+        let slideVar = setInterval(() => {
+            if (direction == 'left') {
+                tabsList.scrollLeft -= 10;
+            } else {
+                tabsList.scrollLeft += 10;
+            }
+            scrollCompleted += 10;
+            if (scrollCompleted >= 100) {
+                clearInterval(slideVar);
+            }
+        }, 10);
+    };
+
+    const onScroll = () => {
+        const { offsetWidth, scrollLeft, scrollWidth } = tabsList;
+        showLeft = scrollLeft > 10;
+        showRight = scrollLeft < scrollWidth - offsetWidth - 10;
+    };
+
+    //TODO: implement this directly into onScroll
+    const throttle = (fn: () => void, delay: number) => {
+        let timeout = false;
+        return () => {
+            if (!timeout) {
+                timeout = true;
+                fn.apply(this);
+                setTimeout(() => {
+                    timeout = false;
+                }, delay);
+            }
+        };
+    };
 </script>
 
+<svelte:window on:resize={throttle(onScroll, 25)} />
+
 <main class="grid-with-side" class:is-open={isOpen}>
     <header class="main-header">
         <button
@@ -22,7 +68,50 @@
         <slot name="side" />
     </nav>
     <section class="main-content">
-        <slot />
+        <Cover>
+            <svelte:fragment slot="title">{$title}</svelte:fragment>
+            {#if $tabs.length}
+                <div class="tabs">
+                    {#if showLeft}
+                        <button
+                            class="tabs-button-scroll is-start"
+                            aria-label="Show items in start side"
+                            on:click={() => slide('left')}>
+                            <span class="icon-cheveron-left" aria-hidden="true" />
+                        </button>
+                    {/if}
+                    {#if showRight}
+                        <button
+                            class="tabs-button-scroll is-end"
+                            aria-label="Show items in end side"
+                            on:click={() => slide('right')}>
+                            <span class="icon-cheveron-right" aria-hidden="true" />
+                        </button>
+                    {/if}
+                    <ul
+                        class="tabs-list scroll-shadow-horizontal"
+                        bind:this={tabsList}
+                        on:scroll={throttle(onScroll, 25)}>
+                        {#each $tabs as tab}
+                            <li class="tabs-item">
+                                <a
+                                    class="tabs-button"
+                                    href={`${base}/${tab.href}`}
+                                    class:is-selected={$page.url.pathname ===
+                                        `${base}/${tab.href}`}>
+                                    <span class="text">{tab.title}</span>
+                                </a>
+                            </li>
+                        {/each}
+                    </ul>
+                </div>
+            {/if}
+        </Cover>
+        {#key $page.routeId}
+            <div in:fade>
+                <slot />
+            </div>
+        {/key}
     </section>
 </main>
 
diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index 4d3e109695..b343d1f785 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -1,8 +1,9 @@
 import { writable } from 'svelte/store';
 
-export type Breadcrumb = {
-    name: string;
-    link?: string;
+export type Tab = {
+    href: string;
+    title: string;
 };
 
-export const breadcrumbs = writable<Breadcrumb[]>([]);
+export const title = writable<string>('');
+export const tabs = writable<Tab[]>([]);
diff --git a/src/routes/console/[project]/database/__layout.svelte b/src/routes/console/[project]/database/__layout.svelte
index 5a41d46614..2579cf50c7 100644
--- a/src/routes/console/[project]/database/__layout.svelte
+++ b/src/routes/console/[project]/database/__layout.svelte
@@ -1,25 +1,22 @@
 <script>
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
-    import Tabs from './_tabs.svelte';
+    import { tabs, title } from '$lib/stores/layout';
 
-    const project = $page.params.project;
+    const path = 'database';
+    title.set('Database');
+    tabs.set([
+        {
+            href: path,
+            title: 'Collections'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        }
+    ]);
 </script>
 
 <svelte:head>
     <title>Appwrite - Database</title>
 </svelte:head>
 
-{#if !$page.url.pathname.startsWith(`${base}/console/${project}/database/collection`)}
-    <Cover>
-        <svelte:fragment slot="breadcrumbs">
-            <Back href={`${base}/console/${project}`}>Home</Back>
-        </svelte:fragment>
-        <svelte:fragment slot="title">Database</svelte:fragment>
-        <Tabs />
-    </Cover>
-{/if}
-
 <slot />
diff --git a/src/routes/console/[project]/database/_tabs.svelte b/src/routes/console/[project]/database/_tabs.svelte
deleted file mode 100644
index 0e90abf99b..0000000000
--- a/src/routes/console/[project]/database/_tabs.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-
-    $: project = $page.params.project;
-</script>
-
-<ul class="tabs">
-    <li class="tabs-item">
-        <a
-            class="tabs-button is-selected"
-            href={`${base}/console/${project}/database`}
-            class:is-selected={$page.url.pathname === `/console/${project}/database`}>
-            <span class="text">Collections</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button is-selected"
-            href={`${base}/console/${project}/database/usage`}
-            class:is-selected={$page.url.pathname === `/console/${project}/database/usage`}>
-            <span class="text">Usage</span>
-        </a>
-    </li>
-</ul>
diff --git a/src/routes/console/[project]/database/collection/[collection]/__layout.svelte b/src/routes/console/[project]/database/collection/[collection]/__layout.svelte
index baa5070c04..8325cb632e 100644
--- a/src/routes/console/[project]/database/collection/[collection]/__layout.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/__layout.svelte
@@ -1,20 +1,43 @@
 <script lang="ts">
     import { browser } from '$app/env';
-    import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { tabs, title } from '$lib/stores/layout';
     import { collection } from './store';
-    import Tabs from './_tabs.svelte';
 
-    const project = $page.params.project;
     const collectionId = $page.params.collection;
 
+    const path = `database/collection/${collectionId}`;
+
     $: {
         if (browser) {
             collection.load(collectionId);
         }
     }
+
+    $: {
+        if ($collection) {
+            title.set($collection.name);
+        }
+    }
+
+    tabs.set([
+        {
+            href: path,
+            title: 'Documents'
+        },
+        {
+            href: `${path}/attributes`,
+            title: 'Attributes'
+        },
+        {
+            href: `${path}/indexes`,
+            title: 'Indexes'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ]);
 </script>
 
 <svelte:head>
@@ -22,16 +45,5 @@
 </svelte:head>
 
 {#if $collection}
-    {#if !$page.url.pathname.startsWith(`/console/${project}/database/collection/${collectionId}/document`)}
-        <Cover>
-            <svelte:fragment slot="breadcrumbs">
-                <Back href={`${base}/console/${project}/database`}>Database</Back>
-            </svelte:fragment>
-            <svelte:fragment slot="title">{$collection.name}</svelte:fragment>
-            <Tabs />
-        </Cover>
-    {/if}
     <slot />
-{:else}
-    <div aria-busy="true" />
 {/if}
diff --git a/src/routes/console/[project]/database/collection/[collection]/_tabs.svelte b/src/routes/console/[project]/database/collection/[collection]/_tabs.svelte
deleted file mode 100644
index 0f7de03fbb..0000000000
--- a/src/routes/console/[project]/database/collection/[collection]/_tabs.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-    import { base } from '$app/paths';
-
-    import { page } from '$app/stores';
-
-    $: project = $page.params.project;
-    $: collectionId = $page.params.collection;
-    $: path = `${base}/console/${project}/database/collection/${collectionId}`;
-</script>
-
-<ul class="tabs">
-    <li class="tabs-item">
-        <a class="tabs-button" href={path} class:is-selected={$page.url.pathname === path}>
-            <span class="text">Documents</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/attributes`}
-            class:is-selected={$page.url.pathname.startsWith(`${path}/attributes`)}>
-            <span class="text">Attributes</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/indexes`}
-            class:is-selected={$page.url.pathname.startsWith(`${path}/indexes`)}>
-            <span class="text">Indexes</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/settings`}
-            class:is-selected={$page.url.pathname.startsWith(`${path}/settings`)}>
-            <span class="text">Settings</span>
-        </a>
-    </li>
-</ul>
diff --git a/src/routes/console/[project]/database/collection/[collection]/document/[document]/__layout.svelte b/src/routes/console/[project]/database/collection/[collection]/document/[document]/__layout.svelte
index 7c19f08f60..93c7fae79f 100644
--- a/src/routes/console/[project]/database/collection/[collection]/document/[document]/__layout.svelte
+++ b/src/routes/console/[project]/database/collection/[collection]/document/[document]/__layout.svelte
@@ -1,40 +1,39 @@
 <script lang="ts">
-    import { browser } from '$app/env';
-    import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Back } from '$lib/components';
-    import { Container, Cover } from '$lib/layout';
-    import { collection } from '../../store';
+    import { browser } from '$app/env';
+    import { tabs, title } from '$lib/stores/layout';
     import { doc } from './store';
-    import Tabs from './_tabs.svelte';
 
-    const project = $page.params.project;
     const collectionId = $page.params.collection;
     const documentId = $page.params.document;
+    const path = `database/collection/${collectionId}/document/${documentId}`;
 
     $: {
         if (browser) {
             doc.load(collectionId, documentId);
         }
     }
+
+    $: {
+        if ($doc) {
+            title.set(`Document - ${$doc.$id}`);
+        }
+    }
+
+    tabs.set([
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity'
+        }
+    ]);
 </script>
 
 <svelte:head>
     <title>Appwrite - Database Document</title>
 </svelte:head>
 
-{#if $doc && $collection}
-    <Cover>
-        <Back href={`${base}/console/${project}/database/collection/${collectionId}`}>
-            Collection - {$collection.name}
-        </Back>
-        <h1>{$doc.$id}</h1>
-        <Tabs />
-    </Cover>
-
-    <Container>
-        <slot />
-    </Container>
-{:else}
-    <div aria-busy="true" />
-{/if}
+<slot />
diff --git a/src/routes/console/[project]/database/collection/[collection]/document/[document]/_tabs.svelte b/src/routes/console/[project]/database/collection/[collection]/document/[document]/_tabs.svelte
deleted file mode 100644
index e4e6677cd7..0000000000
--- a/src/routes/console/[project]/database/collection/[collection]/document/[document]/_tabs.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-    import { base } from '$app/paths';
-
-    import { page } from '$app/stores';
-
-    $: project = $page.params.project;
-    $: collectionId = $page.params.collection;
-    $: documentId = $page.params.document;
-    $: path = `${base}/console/${project}/database/collection/${collectionId}/document/${documentId}`;
-</script>
-
-<ul class="tabs">
-    <li class="tabs-item">
-        <a class="tabs-button" href={path} class:is-selected={$page.url.pathname === path}>
-            <span class="text">Overview</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/activity`}
-            class:is-selected={$page.url.pathname.startsWith(`${path}/activity`)}>
-            <span class="text">Activity</span>
-        </a>
-    </li>
-</ul>
diff --git a/src/routes/console/[project]/database/index.svelte b/src/routes/console/[project]/database/index.svelte
index dc6c6a0ee3..39c309655d 100644
--- a/src/routes/console/[project]/database/index.svelte
+++ b/src/routes/console/[project]/database/index.svelte
@@ -43,14 +43,10 @@
             <Pagination {limit} bind:offset sum={response.total} />
         {:else if search}
             <Empty>
-                <svelte:fragment slot="header"
-                    >No results found for <b>{search}</b></svelte:fragment>
+                No results found for <b>{search}</b>
             </Empty>
         {:else}
-            <Empty>
-                <svelte:fragment slot="header">No Collections Found</svelte:fragment>
-                You haven't created any collections for your project yet.
-            </Empty>
+            <Empty>You haven't created any collections for your project yet.</Empty>
         {/if}
     {/await}
 
diff --git a/src/routes/console/[project]/functions/__layout.svelte b/src/routes/console/[project]/functions/__layout.svelte
index 6998ad013e..49f2510e26 100644
--- a/src/routes/console/[project]/functions/__layout.svelte
+++ b/src/routes/console/[project]/functions/__layout.svelte
@@ -1,23 +1,12 @@
 <script>
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
-    import Tabs from './_tabs.svelte';
+    import { tabs, title } from '$lib/stores/layout';
 
-    const project = $page.params.project;
+    title.set('Functions');
+    tabs.set([]);
 </script>
 
 <svelte:head>
     <title>Appwrite - Functions</title>
 </svelte:head>
-{#if !$page.url.pathname.startsWith(`/console/${project}/functions/function`)}
-    <Cover>
-        <svelte:fragment slot="breadcrumbs">
-            <Back href={`${base}/console/${project}`}>Home</Back>
-        </svelte:fragment>
-        <svelte:fragment slot="title">Functions</svelte:fragment>
-        <Tabs />
-    </Cover>
-{/if}
+
 <slot />
diff --git a/src/routes/console/[project]/functions/_tabs.svelte b/src/routes/console/[project]/functions/_tabs.svelte
deleted file mode 100644
index 77ee018b8b..0000000000
--- a/src/routes/console/[project]/functions/_tabs.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-    import { base } from '$app/paths';
-
-    import { page } from '$app/stores';
-
-    $: project = $page.params.project;
-</script>
-
-<ul class="tabs">
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${base}/console/${project}/functions`}
-            class:is-selected={$page.url.pathname === `/console/${project}/functions`}>
-            <span class="text">Functions</span>
-        </a>
-    </li>
-</ul>
diff --git a/src/routes/console/[project]/functions/function/[function]/__layout.svelte b/src/routes/console/[project]/functions/function/[function]/__layout.svelte
index a366bd9af9..ef001d8432 100644
--- a/src/routes/console/[project]/functions/function/[function]/__layout.svelte
+++ b/src/routes/console/[project]/functions/function/[function]/__layout.svelte
@@ -1,30 +1,44 @@
 <script lang="ts">
     import { browser } from '$app/env';
-    import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { tabs, title } from '$lib/stores/layout';
     import { func } from './store';
-    import Tabs from './_tabs.svelte';
 
-    const project = $page.params.project;
     const functionId = $page.params.function;
+    const path = `functions/function/${functionId}`;
 
     $: {
         if (browser) {
             func.load(functionId);
         }
     }
+
+    $: {
+        if ($func) {
+            title.set($func.name);
+        }
+    }
+
+    tabs.set([
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/monitors`,
+            title: 'Monitors'
+        },
+        {
+            href: `${path}/logs`,
+            title: 'Logs'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ]);
 </script>
 
 {#if $func}
-    <Cover>
-        <svelte:fragment slot="breadcrumbs">
-            <Back href={`${base}/console/${project}/functions`}>Functions</Back>
-        </svelte:fragment>
-        <svelte:fragment slot="title">{$func.name}</svelte:fragment>
-        <Tabs />
-    </Cover>
-
     <slot />
 {/if}
diff --git a/src/routes/console/[project]/functions/function/[function]/_tabs.svelte b/src/routes/console/[project]/functions/function/[function]/_tabs.svelte
deleted file mode 100644
index 2492e06305..0000000000
--- a/src/routes/console/[project]/functions/function/[function]/_tabs.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-    import { base } from '$app/paths';
-
-    import { page } from '$app/stores';
-
-    $: project = $page.params.project;
-    $: functionId = $page.params.function;
-    $: path = `${base}/console/${project}/functions/function/${functionId}`;
-</script>
-
-<ul class="tabs">
-    <li class="tabs-item">
-        <a class="tabs-button" href={path} class:is-selected={$page.url.pathname === path}>
-            <span class="text">Overview</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/monitors`}
-            class:is-selected={$page.url.pathname === `${path}/monitors`}>
-            <span class="text">Monitors</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/logs`}
-            class:is-selected={$page.url.pathname === `${path}/logs`}>
-            <span class="text">Logs</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/settings`}
-            class:is-selected={$page.url.pathname === `${path}/settings`}>
-            <span class="text">Settings</span>
-        </a>
-    </li>
-</ul>
diff --git a/src/routes/console/[project]/index.svelte b/src/routes/console/[project]/index.svelte
index b367882559..8ea099022b 100644
--- a/src/routes/console/[project]/index.svelte
+++ b/src/routes/console/[project]/index.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { tabs, title } from '$lib/stores/layout';
     import { Button } from '$lib/elements/forms';
     import { sdkForConsole } from '$lib/stores/sdk';
     import { project } from './store';
@@ -9,6 +10,9 @@
     import { base } from '$app/paths';
     import CreatePlatform from './_createPlatform.svelte';
 
+    title.set($project.name);
+    tabs.set([]);
+
     let addPlatform = false;
     // let range: '24h' | '30d' | '90d' = '30d';
 
@@ -21,23 +25,22 @@
 
 {#if $project}
     <Cover adjustContentToCover>
-        <svelte:fragment slot="title">{$project.name}</svelte:fragment>
         <ul class="links-nav">
             <li class="links-nav-item">
                 <a class="link" href={`${base}/console/${$project.$id}/settings`}>
-                    <span class="icon-search" aria-hidden="true" />
+                    <span class="icon-cog" aria-hidden="true" />
                     <span class="text">Settings</span>
                 </a>
             </li>
             <li class="links-nav-item">
                 <a class="link" href={`${base}/console/${$project.$id}/keys`}>
-                    <span class="icon-search" aria-hidden="true" />
+                    <span class="icon-key" aria-hidden="true" />
                     <span class="text">API Keys</span>
                 </a>
             </li>
             <li class="links-nav-item">
                 <a class="link" href={`${base}/console/${$project.$id}/webhooks`}>
-                    <span class="icon-search" aria-hidden="true" />
+                    <span class="icon-link" aria-hidden="true" />
                     <span class="text">Webhooks</span>
                 </a>
             </li>
diff --git a/src/routes/console/[project]/keys/__layout.svelte b/src/routes/console/[project]/keys/__layout.svelte
index df96cc6b9c..fdbeb5f7c0 100644
--- a/src/routes/console/[project]/keys/__layout.svelte
+++ b/src/routes/console/[project]/keys/__layout.svelte
@@ -1,15 +1,8 @@
 <script>
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
-    const projectId = $page.params.project;
+    import { tabs, title } from '$lib/stores/layout';
+
+    title.set('API Keys');
+    tabs.set([]);
 </script>
 
-<Cover>
-    <svelte:fragment slot="breadcrumbs">
-        <Back href={`${base}/console/${projectId}`}>Home</Back>
-    </svelte:fragment>
-    <svelte:fragment slot="title">API Keys</svelte:fragment>
-</Cover>
 <slot />
diff --git a/src/routes/console/[project]/settings/__layout.svelte b/src/routes/console/[project]/settings/__layout.svelte
index 57a76442f9..eba5eb43e0 100644
--- a/src/routes/console/[project]/settings/__layout.svelte
+++ b/src/routes/console/[project]/settings/__layout.svelte
@@ -1,22 +1,30 @@
 <script>
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
-    import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
-    import Tabs from './_tabs.svelte';
+    import { tabs, title } from '$lib/stores/layout';
 
-    const project = $page.params.project;
+    const path = 'settings';
+    title.set('Settings');
+    tabs.set([
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/services`,
+            title: 'Services'
+        },
+        {
+            href: `${path}/domains`,
+            title: 'Custom Domains'
+        },
+        {
+            href: `${path}/members`,
+            title: 'Members'
+        }
+    ]);
 </script>
 
 <svelte:head>
     <title>Appwrite - Settings</title>
 </svelte:head>
 
-<Cover>
-    <svelte:fragment slot="breadcrumbs">
-        <Back href={`${base}/console/${project}`}>Home</Back>
-    </svelte:fragment>
-    <svelte:fragment slot="title">Settings</svelte:fragment>
-    <Tabs />
-</Cover>
 <slot />
diff --git a/src/routes/console/[project]/settings/_tabs.svelte b/src/routes/console/[project]/settings/_tabs.svelte
deleted file mode 100644
index bca0281b13..0000000000
--- a/src/routes/console/[project]/settings/_tabs.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-    import { base } from '$app/paths';
-
-    import { page } from '$app/stores';
-
-    $: path = `${base}/console/${$page.params.project}/settings`;
-</script>
-
-<ul class="tabs">
-    <li class="tabs-item">
-        <a
-            class="tabs-button is-selected"
-            href={path}
-            class:is-selected={$page.url.pathname === path}>
-            <span class="text">Overview</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button is-selected"
-            href={`${path}/services`}
-            class:is-selected={$page.url.pathname === `${path}/services`}>
-            <span class="text">Services</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button is-selected"
-            href={`${path}/domains`}
-            class:is-selected={$page.url.pathname === `${path}/domains`}>
-            <span class="text">Custom Domains</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button is-selected"
-            href={`${path}/members`}
-            class:is-selected={$page.url.pathname === `${path}/members`}>
-            <span class="text">Members</span>
-        </a>
-    </li>
-</ul>
diff --git a/src/routes/console/[project]/storage/__layout.svelte b/src/routes/console/[project]/storage/__layout.svelte
index 3253557f29..7c8037d5ba 100644
--- a/src/routes/console/[project]/storage/__layout.svelte
+++ b/src/routes/console/[project]/storage/__layout.svelte
@@ -1,25 +1,22 @@
 <script>
-    import { base } from '$app/paths';
+    import { tabs, title } from '$lib/stores/layout';
 
-    import { page } from '$app/stores';
-    import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
-    import Tabs from './_tabs.svelte';
-
-    const project = $page.params.project;
+    const path = 'storage';
+    title.set('Storage');
+    tabs.set([
+        {
+            href: path,
+            title: 'Buckets'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        }
+    ]);
 </script>
 
 <svelte:head>
     <title>Appwrite - Storage</title>
 </svelte:head>
-{#if !$page.url.pathname.startsWith(`${base}/console/${project}/storage/bucket`)}
-    <Cover>
-        <svelte:fragment slot="breadcrumbs">
-            <Back href={`${base}/console/${project}`}>Home</Back>
-        </svelte:fragment>
-        <svelte:fragment slot="title">Storage</svelte:fragment>
-        <Tabs />
-    </Cover>
-{/if}
 
 <slot />
diff --git a/src/routes/console/[project]/storage/_tabs.svelte b/src/routes/console/[project]/storage/_tabs.svelte
deleted file mode 100644
index 3163cf2a90..0000000000
--- a/src/routes/console/[project]/storage/_tabs.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-    import { base } from '$app/paths';
-
-    import { page } from '$app/stores';
-
-    $: project = $page.params.project;
-</script>
-
-<ul class="tabs">
-    <li class="tabs-item">
-        <a
-            class="tabs-button is-selected"
-            href={`${base}/console/${project}/storage`}
-            class:is-selected={$page.url.pathname === `${base}/console/${project}/storage`}>
-            <span class="text">Buckets</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button is-selected"
-            href={`${base}/console/${project}/storage/usage`}
-            class:is-selected={$page.url.pathname === `${base}/console/${project}/storage/usage`}>
-            <span class="text">Usage</span>
-        </a>
-    </li>
-</ul>
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte
index b5e6bea969..1e372dba04 100644
--- a/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte
+++ b/src/routes/console/[project]/storage/bucket/[bucket]/__layout.svelte
@@ -1,32 +1,42 @@
 <script lang="ts">
     import { browser } from '$app/env';
-    import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    import { tabs, title } from '$lib/stores/layout';
     import { bucket } from './store';
-    import Tabs from './_tabs.svelte';
 
-    const project = $page.params.project;
     const bucketId = $page.params.bucket;
+    const path = `storage/bucket/${bucketId}`;
 
     $: {
         if (browser) {
             bucket.load(bucketId);
         }
     }
+
+    $: {
+        if ($bucket) {
+            title.set($bucket.name);
+        }
+    }
+
+    tabs.set([
+        {
+            href: path,
+            title: 'Files'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/settings`,
+            title: 'Settings'
+        }
+    ]);
 </script>
 
 <svelte:head>
     <title>Appwrite - Bucket</title>
 </svelte:head>
-{#if $bucket}
-    <Cover>
-        <svelte:fragment slot="breadcrumbs">
-            <Back href={`${base}/console/${project}/storage`}>Storage</Back>
-        </svelte:fragment>
-        <svelte:fragment slot="title">{$bucket.name}</svelte:fragment>
-        <Tabs />
-    </Cover>
-    <slot />
-{/if}
+
+<slot />
diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_tabs.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_tabs.svelte
deleted file mode 100644
index 902ebe8cf9..0000000000
--- a/src/routes/console/[project]/storage/bucket/[bucket]/_tabs.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-    import { base } from '$app/paths';
-
-    import { page } from '$app/stores';
-
-    $: project = $page.params.project;
-    $: bucketId = $page.params.bucket;
-    $: path = `${base}/console/${project}/storage/bucket/${bucketId}`;
-</script>
-
-<ul class="tabs">
-    <li class="tabs-item">
-        <a
-            class="tabs-button is-selected"
-            href={path}
-            class:is-selected={$page.url.pathname === path}>
-            <span class="text">Files</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/usage`}
-            class:is-selected={$page.url.pathname === `${path}/usage`}>
-            <span class="text">Usage</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/settings`}
-            class:is-selected={$page.url.pathname === `${path}/settings`}>
-            <span class="text">Settings</span>
-        </a>
-    </li>
-</ul>
diff --git a/src/routes/console/[project]/users/__layout.svelte b/src/routes/console/[project]/users/__layout.svelte
index 8a2c1ece9b..bbcb62e92f 100644
--- a/src/routes/console/[project]/users/__layout.svelte
+++ b/src/routes/console/[project]/users/__layout.svelte
@@ -1,17 +1,34 @@
 <script lang="ts">
-    import { page } from '$app/stores';
-    import { Cover } from '$lib/layout';
-    import Tabs from './_tabs.svelte';
+    import { tabs, title } from '$lib/stores/layout';
+
+    const path = 'users';
+    title.set('Users');
+    tabs.set([
+        {
+            href: path,
+            title: 'Users'
+        },
+        {
+            href: `${path}/teams`,
+            title: 'Teams'
+        },
+        {
+            href: `${path}/authentication`,
+            title: 'Authentication'
+        },
+        {
+            href: `${path}/usage`,
+            title: 'Usage'
+        },
+        {
+            href: `${path}/security`,
+            title: 'Security'
+        }
+    ]);
 </script>
 
 <svelte:head>
     <title>Appwrite - Users</title>
 </svelte:head>
 
-{#if $page.url.pathname.endsWith(`/users`) || $page.url.pathname.endsWith(`/users/teams`) || $page.url.pathname.endsWith(`/users/usage`) || $page.url.pathname.endsWith(`/users/authentication`) || $page.url.pathname.endsWith(`/users/security`)}
-    <Cover>
-        <svelte:fragment slot="title">Users</svelte:fragment>
-        <Tabs />
-    </Cover>
-{/if}
 <slot />
diff --git a/src/routes/console/[project]/users/_tabs.svelte b/src/routes/console/[project]/users/_tabs.svelte
deleted file mode 100644
index ae6b1ab463..0000000000
--- a/src/routes/console/[project]/users/_tabs.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-    import { base } from '$app/paths';
-
-    import { page } from '$app/stores';
-
-    $: project = $page.params.project;
-</script>
-
-<div class="tabs">
-    <button class="tabs-button-scroll is-start" aria-label="Show items in start side">
-        <span class="icon-cheveron-left" aria-hidden="true" />
-    </button>
-    <button class="tabs-button-scroll is-end" aria-label="Show items in end side">
-        <span class="icon-cheveron-right" aria-hidden="true" />
-    </button>
-    <ul class="tabs-list scroll-shadow-horizontal">
-        <li class="tabs-item">
-            <a
-                class="tabs-button"
-                href={`${base}/console/${project}/users`}
-                class:is-selected={$page.url.pathname === `${base}/console/${project}/users`}>
-                <span class="text">Users</span>
-            </a>
-        </li>
-        <li class="tabs-item">
-            <a
-                class="tabs-button"
-                href={`${base}/console/${project}/users/teams`}
-                class:is-selected={$page.url.pathname === `${base}/console/${project}/users/teams`}>
-                <span class="text">Teams</span>
-            </a>
-        </li>
-        <li class="tabs-item">
-            <a
-                class="tabs-button"
-                href={`${base}/console/${project}/users/authentication`}
-                class:is-selected={$page.url.pathname ===
-                    `${base}/console/${project}/users/authentication`}>
-                <span class="text">Authentication</span>
-            </a>
-        </li>
-        <li class="tabs-item">
-            <a
-                class="tabs-button"
-                href={`${base}/console/${project}/users/usage`}
-                class:is-selected={$page.url.pathname === `${base}/console/${project}/users/usage`}>
-                <span class="text">Usage</span>
-            </a>
-        </li>
-        <li class="tabs-item">
-            <a
-                class="tabs-button"
-                href={`${base}/console/${project}/users/security`}
-                class:is-selected={$page.url.pathname ===
-                    `${base}/console/${project}/users/security`}>
-                <span class="text">Security</span>
-            </a>
-        </li>
-    </ul>
-</div>
diff --git a/src/routes/console/[project]/users/index.svelte b/src/routes/console/[project]/users/index.svelte
index 1c23e43a3f..fdf826c34a 100644
--- a/src/routes/console/[project]/users/index.svelte
+++ b/src/routes/console/[project]/users/index.svelte
@@ -17,22 +17,39 @@
     import type { Models } from 'src/sdk';
     import { goto } from '$app/navigation';
     import { Pill } from '$lib/elements';
-    import { toLocaleDate } from '$lib/helpers/date';
+    import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
+    import { usersList } from './store';
+    import { onMount } from 'svelte';
 
-    let search = '';
     let showCreate = false;
-    let offset = 0;
-    const limit = 5;
+    let search = '';
+    let offset: number = null;
 
+    const limit = 5;
     const project = $page.params.project;
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 30, 30).toString();
     const userCreated = async (event: CustomEvent<Models.User<Record<string, unknown>>>) => {
         await goto(`${base}/console/${project}/users/user/${event.detail.$id}`);
     };
-    $: request = sdkForProject.users.list(search, limit, offset, undefined, undefined, 'DESC');
+
+    $: usersList.load(search, limit, offset ?? 0);
     $: if (search) offset = 0;
+    $: {
+        //TODO: refactor this into something maintainable without the use of goto
+        if (offset !== null) {
+            $page.url.searchParams.set('offset', offset.toString());
+            goto(`?${$page.url.searchParams.toString()}`, { replaceState: true, keepfocus: true });
+        }
+    }
+
+    onMount(() => {
+        const queryOffset = +$page.url.searchParams.get('offset') ?? 0;
+        if (offset && offset !== queryOffset) {
+            offset = queryOffset;
+        }
+    });
 </script>
 
 <Container>
@@ -46,64 +63,85 @@
             <span class="icon-plus" aria-hidden="true" /> <span class="text">Create User</span>
         </Button>
     </div>
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        {#if response.total}
-            <Table>
-                <TableHeader>
-                    <TableCellHead width={30} />
-                    <TableCellHead>Name</TableCellHead>
-                    <TableCellHead>E-Mail</TableCellHead>
-                    <TableCellHead>Status</TableCellHead>
-                    <TableCellHead>Joined</TableCellHead>
-                </TableHeader>
-                <TableBody>
-                    {#each response.users as user}
-                        <TableRow>
-                            <TableCell onlyDesktop>
-                                <div class="image">
-                                    <img
-                                        class="avatar"
-                                        width="30"
-                                        height="30"
-                                        src={getAvatar(user.name)}
-                                        alt={user.name} />
-                                </div>
-                            </TableCell>
-                            <TableCellLink
-                                href={`${base}/console/${project}/users/user/${user.$id}`}
-                                title="Name">
-                                {user.name ? user.name : 'n/a'}
-                            </TableCellLink>
-                            <TableCellText title="E-Mail">{user.email}</TableCellText>
-                            <TableCellText title="Status">
+    {#if $usersList?.response?.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead width={30} />
+                <TableCellHead>Name</TableCellHead>
+                <TableCellHead>E-Mail</TableCellHead>
+                <TableCellHead width={100}>Status</TableCellHead>
+                <TableCellHead width={100}>ID</TableCellHead>
+                <TableCellHead>Joined</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each $usersList.response.users as user}
+                    <TableRow>
+                        <TableCell onlyDesktop>
+                            <div class="image">
+                                <img
+                                    class="avatar"
+                                    width="30"
+                                    height="30"
+                                    src={getAvatar(user.name)}
+                                    alt={user.name} />
+                            </div>
+                        </TableCell>
+                        <TableCellLink
+                            href={`${base}/console/${project}/users/user/${user.$id}`}
+                            title="Name">
+                            {user.name ? user.name : 'n/a'}
+                        </TableCellLink>
+                        <TableCellText title="E-Mail">{user.email}</TableCellText>
+                        <TableCellText title="Status">
+                            {#if user.status}
                                 <Pill success={user.emailVerification}>
                                     {user.emailVerification ? 'Verified' : 'Unverified'}
                                 </Pill>
-                            </TableCellText>
-                            <TableCellText title="Joined"
-                                >{toLocaleDate(user.registration)}</TableCellText>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-            <div class="u-flex common-section u-main-space-between">
-                <p class="text">Total results: {response.total}</p>
-                <Pagination bind:offset {limit} sum={response.total} />
+                            {:else}
+                                <Pill danger>Blocked</Pill>
+                            {/if}
+                        </TableCellText>
+                        <TableCellText title="ID">
+                            <Pill>User ID <i class="icon-duplicate" /></Pill>
+                        </TableCellText>
+                        <TableCellText title="Joined">
+                            {toLocaleDateTime(user.registration)}
+                        </TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+        <div class="u-flex common-section u-main-space-between">
+            <p class="text">Total results: {$usersList.response.total}</p>
+            <Pagination {limit} bind:offset sum={$usersList.response.total} />
+        </div>
+    {:else if search}
+        <Empty>
+            <div class="common-section">
+                <b>Sorry, we couldn’t find ‘{search}’</b>
+            </div>
+            <div class="common-section">
+                <p>There are no users that match your search.</p>
+            </div>
+            <div class="common-section">
+                <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+            </div>
+        </Empty>
+    {:else}
+        <Empty dashed centered>
+            <div class="common-section">
+                <Button secondary round on:click={() => (showCreate = true)}>
+                    <i class="icon-plus" />
+                </Button>
+            </div>
+            <div class="common-section">
+                <p>Add Your First User To Get Started</p>
+            </div>
+            <div class="common-section">
+                <Button secondary href="#">Documentation</Button>
             </div>
-        {:else if search}
-            <Empty>
-                <svelte:fragment slot="header"
-                    >No results found for <b>{search}</b></svelte:fragment>
-            </Empty>
-        {:else}
-            <Empty>
-                <svelte:fragment slot="header">No Users Found</svelte:fragment>
-                Create your first user to get started.
-            </Empty>
-        {/if}
-    {/await}
+        </Empty>
+    {/if}
 </Container>
 
 <Create bind:showCreate on:created={userCreated} />
diff --git a/src/routes/console/[project]/users/store.ts b/src/routes/console/[project]/users/store.ts
new file mode 100644
index 0000000000..b36e790771
--- /dev/null
+++ b/src/routes/console/[project]/users/store.ts
@@ -0,0 +1,82 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import { writable } from 'svelte/store';
+import type { Models } from 'src/sdk';
+import { browser } from '$app/env';
+
+export type UsersList = {
+    loading: boolean;
+    response?: Models.UserList<Record<string, unknown>>;
+};
+
+export type TeamsList = {
+    loading: boolean;
+    response?: Models.TeamList;
+};
+
+function createUsersListStore() {
+    const { subscribe, set } = writable<UsersList>({
+        loading: true,
+        response: browser ? JSON.parse(sessionStorage.getItem('users')) : null
+    });
+
+    return {
+        subscribe,
+        set,
+        load: async (search: string, limit: number, offset: number) => {
+            try {
+                const response = await sdkForProject.users.list(
+                    search,
+                    limit,
+                    offset,
+                    undefined,
+                    undefined,
+                    'DESC'
+                );
+                set({
+                    loading: false,
+                    response
+                });
+            } catch (error) {
+                //TODO: take care what happens here
+            }
+        }
+    };
+}
+
+function createTeamsListStore() {
+    const { subscribe, set } = writable<TeamsList>({
+        loading: true,
+        response: browser ? JSON.parse(sessionStorage.getItem('teams')) : null
+    });
+
+    return {
+        subscribe,
+        set,
+        load: async (search: string, limit: number, offset: number) => {
+            try {
+                const response = await sdkForProject.teams.list(
+                    search,
+                    limit,
+                    offset,
+                    undefined,
+                    undefined,
+                    'DESC'
+                );
+                set({
+                    loading: false,
+                    response
+                });
+            } catch (error) {
+                //TODO: take care what happens here
+            }
+        }
+    };
+}
+
+export const usersList = createUsersListStore();
+export const teamsList = createTeamsListStore();
+
+if (browser) {
+    usersList.subscribe((n) => sessionStorage?.setItem('users', JSON.stringify(n.response ?? '')));
+    teamsList.subscribe((n) => sessionStorage?.setItem('teams', JSON.stringify(n.response ?? '')));
+}
diff --git a/src/routes/console/[project]/users/teams.svelte b/src/routes/console/[project]/users/teams.svelte
index 6f9fae967a..d26d6bc56f 100644
--- a/src/routes/console/[project]/users/teams.svelte
+++ b/src/routes/console/[project]/users/teams.svelte
@@ -11,14 +11,16 @@
         TableCellText,
         TableCell
     } from '$lib/elements/table';
-    import { Button, InputSearch } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { Empty, Pagination } from '$lib/components';
     import Create from './_createTeam.svelte';
     import { goto } from '$app/navigation';
-    import type { Models } from 'src/sdk';
-    import { toLocaleDate } from '$lib/helpers/date';
+    import { toLocaleDateTime } from '$lib/helpers/date';
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
+    import { teamsList } from './store';
+    import { onMount } from 'svelte';
+    import type { Models } from 'src/sdk';
 
     let search = '';
     let showCreate = false;
@@ -30,68 +32,97 @@
     const teamCreated = async (event: CustomEvent<Models.Team>) => {
         await goto(`${base}/console/${project}/users/team/${event.detail.$id}`);
     };
-    $: request = sdkForProject.teams.list(search, limit, offset);
+    $: teamsList.load(search, limit, offset);
     $: if (search) offset = 0;
+    $: {
+        //TODO: refactor this into something maintainable without the use of goto
+        if (offset !== null) {
+            $page.url.searchParams.set('offset', offset.toString());
+            goto(`?${$page.url.searchParams.toString()}`, { replaceState: true, keepfocus: true });
+        }
+    }
+
+    onMount(() => {
+        offset = +$page.url.searchParams.get('offset') ?? 0;
+    });
 </script>
 
 <Container>
-    <div class="u-flex u-space-between common-section">
-        <InputSearch bind:value={search} />
+    <div class="u-flex u-gap-12 common-section u-main-space-between">
+        <div class="input-text-wrapper u-stretch" style="max-width: 500px">
+            <input type="search" class="input-text" bind:value={search} />
+            <span class="icon-search" aria-hidden="true" />
+        </div>
+
         <Button on:click={() => (showCreate = true)}>
             <span class="icon-plus" aria-hidden="true" /> <span class="text">Create Team</span>
         </Button>
     </div>
-
-    {#await request}
-        <div aria-busy="true" />
-    {:then response}
-        {#if response.total}
-            <Table>
-                <TableHeader>
-                    <TableCellHead width={30} />
-                    <TableCellHead>Name</TableCellHead>
-                    <TableCellHead>Members</TableCellHead>
-                    <TableCellHead>Created</TableCellHead>
-                </TableHeader>
-                <TableBody>
-                    {#each response.teams as team}
-                        <TableRow>
-                            <TableCell onlyDesktop>
-                                <div class="image">
-                                    <img
-                                        class="avatar"
-                                        width="30"
-                                        height="30"
-                                        src={getAvatar(team.name)}
-                                        alt={team.name} />
-                                </div>
-                            </TableCell>
-                            <TableCellLink
-                                title="ID"
-                                href={`${base}/console/${project}/users/teams/${team.$id}`}>
-                                {team.name}
-                            </TableCellLink>
-                            <TableCellText title="Members">{team.total}</TableCellText>
-                            <TableCellText title="Members"
-                                >{toLocaleDate(team.dateCreated)}</TableCellText>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-
-            <Pagination {limit} bind:offset sum={response.total} />
-        {:else if search}
-            <Empty>
-                <svelte:fragment slot="header"
-                    >No results found for <b>{search}</b></svelte:fragment>
-            </Empty>
-        {:else}
-            <Empty>
-                <svelte:fragment slot="header">No Teams Found</svelte:fragment>
-                Create your first team to get started.
-            </Empty>
-        {/if}
-    {/await}
+    {#if $teamsList?.response?.total}
+        <Table>
+            <TableHeader>
+                <TableCellHead width={30} />
+                <TableCellHead>Name</TableCellHead>
+                <TableCellHead>Members</TableCellHead>
+                <TableCellHead>Created</TableCellHead>
+            </TableHeader>
+            <TableBody>
+                {#each $teamsList.response.teams as team}
+                    <TableRow>
+                        <TableCell onlyDesktop>
+                            <div class="image">
+                                <img
+                                    class="avatar"
+                                    width="30"
+                                    height="30"
+                                    src={getAvatar(team.name)}
+                                    alt={team.name} />
+                            </div>
+                        </TableCell>
+                        <TableCellLink
+                            title="ID"
+                            href={`${base}/console/${project}/users/teams/${team.$id}`}>
+                            {team.name}
+                        </TableCellLink>
+                        <TableCellText title="Members">{team.total}</TableCellText>
+                        <TableCellText title="Members">
+                            {toLocaleDateTime(team.dateCreated)}
+                        </TableCellText>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </Table>
+        <div class="u-flex common-section u-main-space-between">
+            <p class="text">Total results: {$teamsList.response.total}</p>
+            <Pagination {limit} bind:offset sum={$teamsList.response.total} />
+        </div>
+    {:else if search}
+        <Empty>
+            <div class="common-section">
+                <b>Sorry, we couldn’t find ‘{search}’</b>
+            </div>
+            <div class="common-section">
+                <p>There are no teams that match your search.</p>
+            </div>
+            <div class="common-section">
+                <Button secondary on:click={() => (search = '')}>Clear Search</Button>
+            </div>
+        </Empty>
+    {:else}
+        <Empty dashed centered>
+            <div class="common-section">
+                <Button secondary round on:click={() => (showCreate = true)}>
+                    <i class="icon-plus" />
+                </Button>
+            </div>
+            <div class="common-section">
+                <p>Add Your First Team To Get Started</p>
+            </div>
+            <div class="common-section">
+                <Button secondary href="#">Documentation</Button>
+            </div>
+        </Empty>
+    {/if}
 </Container>
 
 <Create bind:showCreate on:created={teamCreated} />
diff --git a/src/routes/console/[project]/users/teams/[team]/__layout.svelte b/src/routes/console/[project]/users/teams/[team]/__layout.svelte
index 4a5f822ea5..7ed181390b 100644
--- a/src/routes/console/[project]/users/teams/[team]/__layout.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/__layout.svelte
@@ -1,22 +1,30 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-
+    import { browser } from '$app/env';
     import { page } from '$app/stores';
+    import { tabs, title } from '$lib/stores/layout';
+    import { team } from './store';
+
+    const teamId = $page.params.team;
+    // const path = `users/teams/${projectId}`;
+
+    $: {
+        if (browser) {
+            team.load(teamId);
+        }
+    }
 
-    import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
+    $: {
+        if ($team) {
+            title.set($team.name);
+        }
+    }
+    // title.set('Teams');
 
-    const project = $page.params.project;
+    tabs.set([]);
 </script>
 
 <svelte:head>
     <title>Appwrite - Team</title>
 </svelte:head>
-<Cover>
-    <svelte:fragment slot="breadcrumbs">
-        <Back href={`${base}/console/${project}/users`}>Users</Back>
-    </svelte:fragment>
-    <svelte:fragment slot="title" />
-</Cover>
 
 <slot />
diff --git a/src/routes/console/[project]/users/teams/[team]/store.ts b/src/routes/console/[project]/users/teams/[team]/store.ts
new file mode 100644
index 0000000000..171dd20c83
--- /dev/null
+++ b/src/routes/console/[project]/users/teams/[team]/store.ts
@@ -0,0 +1,17 @@
+import { sdkForProject } from '$lib/stores/sdk';
+import type { Models } from 'src/sdk';
+import { writable } from 'svelte/store';
+
+function createTeamStore() {
+    const { subscribe, set } = writable<Models.Team>();
+
+    return {
+        subscribe,
+        set,
+        load: async (teamId: string) => {
+            set(await sdkForProject.teams.get(teamId));
+        }
+    };
+}
+
+export const team = createTeamStore();
diff --git a/src/routes/console/[project]/users/user/[user]/__layout.svelte b/src/routes/console/[project]/users/user/[user]/__layout.svelte
index d7ee829912..10abcfd065 100644
--- a/src/routes/console/[project]/users/user/[user]/__layout.svelte
+++ b/src/routes/console/[project]/users/user/[user]/__layout.svelte
@@ -1,17 +1,38 @@
 <script lang="ts">
     import { browser } from '$app/env';
     import { page } from '$app/stores';
-    import { Cover } from '$lib/layout';
+    import { tabs, title } from '$lib/stores/layout';
     import { user } from './store';
-    import Tabs from './_tabs.svelte';
 
     const userId = $page.params.user;
+    const path = `users/user/${userId}`;
 
     $: {
         if (browser) {
             user.load(userId);
         }
     }
+
+    $: {
+        if ($user) {
+            title.set($user.name);
+        }
+    }
+
+    tabs.set([
+        {
+            href: path,
+            title: 'Overview'
+        },
+        {
+            href: `${path}/sessions`,
+            title: 'Sessions'
+        },
+        {
+            href: `${path}/activity`,
+            title: 'Activity'
+        }
+    ]);
 </script>
 
 <svelte:head>
@@ -19,9 +40,5 @@
 </svelte:head>
 
 {#if $user}
-    <Cover>
-        <svelte:fragment slot="title">{$user.name}</svelte:fragment>
-        <Tabs />
-    </Cover>
     <slot />
 {/if}
diff --git a/src/routes/console/[project]/users/user/[user]/_tabs.svelte b/src/routes/console/[project]/users/user/[user]/_tabs.svelte
deleted file mode 100644
index 8ff91267d0..0000000000
--- a/src/routes/console/[project]/users/user/[user]/_tabs.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script>
-    import { base } from '$app/paths';
-
-    import { page } from '$app/stores';
-
-    $: path = `${base}/console/${$page.params.project}/users/user/${$page.params.user}`;
-</script>
-
-<ul class="tabs">
-    <li class="tabs-item">
-        <a class="tabs-button" href={path} class:is-selected={$page.url.pathname === path}>
-            <span class="text">Overview</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/sessions`}
-            class:is-selected={$page.url.pathname === `${path}/sessions`}>
-            <span class="text">Sessions</span>
-        </a>
-    </li>
-    <li class="tabs-item">
-        <a
-            class="tabs-button"
-            href={`${path}/activity`}
-            class:is-selected={$page.url.pathname === `${path}/activity`}>
-            <span class="text">Activity</span>
-        </a>
-    </li>
-</ul>
diff --git a/src/routes/console/[project]/webhooks/__layout.svelte b/src/routes/console/[project]/webhooks/__layout.svelte
index 9d475b8811..1a21654399 100644
--- a/src/routes/console/[project]/webhooks/__layout.svelte
+++ b/src/routes/console/[project]/webhooks/__layout.svelte
@@ -1,16 +1,8 @@
 <script>
-    import { base } from '$app/paths';
+    import { tabs, title } from '$lib/stores/layout';
 
-    import { page } from '$app/stores';
-    import { Back } from '$lib/components';
-    import { Cover } from '$lib/layout';
-    const projectId = $page.params.project;
+    title.set('Webhooks');
+    tabs.set([]);
 </script>
 
-<Cover>
-    <svelte:fragment slot="breadcrumbs">
-        <Back href={`${base}/console/${projectId}`}>Home</Back>
-    </svelte:fragment>
-    <svelte:fragment slot="title">Webhooks</svelte:fragment>
-</Cover>
 <slot />
diff --git a/tests/unit/components/pagination.test.ts b/tests/unit/components/pagination.test.ts
index 53b93c74fa..3120521939 100644
--- a/tests/unit/components/pagination.test.ts
+++ b/tests/unit/components/pagination.test.ts
@@ -109,13 +109,13 @@ test('pagination - number button click', async () => {
     expect(button3).not.toHaveClass('is-disabled');
 });
 
-test('shows no controls', () => {
+test('shows no active controls', () => {
     const { queryByLabelText } = render(Pagination, {
         limit: 25,
         offset: 0,
         sum: 10
     });
 
-    expect(queryByLabelText('prev page')).not.toBeInTheDocument();
-    expect(queryByLabelText('next page')).not.toBeInTheDocument();
+    expect(queryByLabelText('prev page')).toHaveClass('is-disabled');
+    expect(queryByLabelText('next page')).toHaveClass('is-disabled');
 });