diff --git a/src/lib/components/tab.svelte b/src/lib/components/tab.svelte
index 36d17f7e98..b8167c40b4 100644
--- a/src/lib/components/tab.svelte
+++ b/src/lib/components/tab.svelte
@@ -8,6 +8,7 @@
     export let selected = false;
     export let href: string = null;
     export let event: string = null;
+    export let noscroll = false;
 
     async function handleClick(e: Event) {
         if (event) {
@@ -84,6 +85,7 @@
         <a
             class="tabs-button"
             {href}
+            data-sveltekit-noscroll={noscroll}
             class:is-selected={selected}
             on:click={handleClick}
             tabindex={selected ? 0 : -1}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte b/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
index f943168e54..aa2ff65ca0 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/+layout.svelte
@@ -15,11 +15,10 @@
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { Container, type UsagePeriods } from '$lib/layout';
     import { onMount } from 'svelte';
-    import { onboarding, project } from '../store';
+    import { onboarding } from '../store';
     import Bandwidth from './bandwidth.svelte';
     import { createApiKey } from './keys/+page.svelte';
     import Onboard from './onboard.svelte';
-    // import Realtime from './realtime.svelte';
     import Requests from './requests.svelte';
     import { usage } from './store';
     import { formatNum } from '$lib/helpers/string';
@@ -44,9 +43,11 @@
     }
 
     function changePeriod(newPeriod: UsagePeriods) {
-        period = newPeriod;
-        const dates = periodToDates(newPeriod);
-        return usage.load(dates.start, dates.end, dates.period);
+        if (period !== newPeriod) {
+            period = newPeriod;
+            const dates = periodToDates(newPeriod);
+            return usage.load(dates.start, dates.end, dates.period);
+        }
     }
 
     $: $registerCommands([
@@ -81,162 +82,158 @@
     <title>Console - Appwrite</title>
 </svelte:head>
 
-{#if $project}
-    <Container overlapCover>
-        {#if $onboarding}
-            <Onboard {projectId} />
-        {:else}
-            {#if $usage}
-                {@const storage = humanFileSize($usage.filesStorageTotal ?? 0)}
-                <section class="common-section">
-                    <div class="grid-dashboard-1s-2m-6l">
-                        <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
-                            <Bandwidth {period} on:change={(e) => changePeriod(e.detail)} />
-                        </div>
-                        <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
-                            <Requests {period} on:change={(e) => changePeriod(e.detail)} />
-                        </div>
-                        <a
-                            href={`${base}/project-${$page.params.region}-${projectId}/databases`}
-                            class="card is-2-columns-large-screen">
-                            <div class="grid-item-1">
-                                <div class="grid-item-1-start-start">
-                                    <div class="eyebrow-heading-3">
-                                        <span class="icon-database" aria-hidden="true" />
-                                        <span class="text">Database</span>
-                                    </div>
+<Container overlapCover>
+    {#if $onboarding}
+        <Onboard {projectId} />
+    {:else}
+        {#if $usage}
+            {@const storage = humanFileSize($usage.filesStorageTotal ?? 0)}
+            <section class="common-section">
+                <div class="grid-dashboard-1s-2m-6l">
+                    <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
+                        <Bandwidth {period} on:change={(e) => changePeriod(e.detail)} />
+                    </div>
+                    <div class="card is-2-columns-medium-screen is-3-columns-large-screen">
+                        <Requests {period} on:change={(e) => changePeriod(e.detail)} />
+                    </div>
+                    <a
+                        href={`${base}/project-${$page.params.region}-${projectId}/databases`}
+                        class="card is-2-columns-large-screen">
+                        <div class="grid-item-1">
+                            <div class="grid-item-1-start-start">
+                                <div class="eyebrow-heading-3">
+                                    <span class="icon-database" aria-hidden="true" />
+                                    <span class="text">Database</span>
                                 </div>
+                            </div>
 
-                                <div class="grid-item-1-start-end" />
+                            <div class="grid-item-1-start-end" />
 
-                                <div class="grid-item-1-end-start">
-                                    <div class="heading-level-4">
-                                        {formatNum($usage.documentsTotal ?? 0)}
-                                    </div>
-                                    <div>Documents</div>
+                            <div class="grid-item-1-end-start">
+                                <div class="heading-level-4">
+                                    {formatNum($usage.documentsTotal ?? 0)}
                                 </div>
+                                <div>Documents</div>
+                            </div>
 
-                                <div class="grid-item-1-end-end">
-                                    <div class="text">
-                                        Databases: {formatNum($usage.databasesTotal ?? 0)}
-                                    </div>
+                            <div class="grid-item-1-end-end">
+                                <div class="text">
+                                    Databases: {formatNum($usage.databasesTotal ?? 0)}
                                 </div>
                             </div>
-                        </a>
-                        <a
-                            href={`${base}/project-${$page.params.region}-${projectId}/storage`}
-                            class="card is-2-columns-large-screen">
-                            <div class="grid-item-1">
-                                <div class="grid-item-1-start-start">
-                                    <div class="eyebrow-heading-3">
-                                        <span class="icon-folder" aria-hidden="true" />
-                                        <span class="text">Storage</span>
-                                    </div>
+                        </div>
+                    </a>
+                    <a
+                        href={`${base}/project-${$page.params.region}-${projectId}/storage`}
+                        class="card is-2-columns-large-screen">
+                        <div class="grid-item-1">
+                            <div class="grid-item-1-start-start">
+                                <div class="eyebrow-heading-3">
+                                    <span class="icon-folder" aria-hidden="true" />
+                                    <span class="text">Storage</span>
                                 </div>
+                            </div>
 
-                                <div class="grid-item-1-start-end" />
+                            <div class="grid-item-1-start-end" />
 
-                                <div class="grid-item-1-end-start">
-                                    <div class="heading-level-4">
-                                        {storage.value}
-                                        <span class="body-text-2">{storage.unit}</span>
-                                    </div>
-                                    <div>Storage</div>
+                            <div class="grid-item-1-end-start">
+                                <div class="heading-level-4">
+                                    {storage.value}
+                                    <span class="body-text-2">{storage.unit}</span>
                                 </div>
+                                <div>Storage</div>
+                            </div>
 
-                                <div class="grid-item-1-end-end">
-                                    <div class="text">
-                                        Buckets: {formatNum($usage.bucketsTotal ?? 0)}
-                                    </div>
+                            <div class="grid-item-1-end-end">
+                                <div class="text">
+                                    Buckets: {formatNum($usage.bucketsTotal ?? 0)}
                                 </div>
                             </div>
-                        </a>
-                        <a
-                            href={`${base}/project-${$page.params.region}-${projectId}/auth`}
-                            class="card is-2-columns-large-screen">
-                            <div class="grid-item-1">
-                                <div class="grid-item-1-start-start">
-                                    <div class="eyebrow-heading-3">
-                                        <span class="icon-user-group" aria-hidden="true" />
-                                        <span class="text">Auth</span>
-                                    </div>
+                        </div>
+                    </a>
+                    <a
+                        href={`${base}/project-${$page.params.region}-${projectId}/auth`}
+                        class="card is-2-columns-large-screen">
+                        <div class="grid-item-1">
+                            <div class="grid-item-1-start-start">
+                                <div class="eyebrow-heading-3">
+                                    <span class="icon-user-group" aria-hidden="true" />
+                                    <span class="text">Auth</span>
                                 </div>
+                            </div>
 
-                                <div class="grid-item-1-start-end" />
+                            <div class="grid-item-1-start-end" />
 
-                                <div class="grid-item-1-end-start">
-                                    <div class="heading-level-4">
-                                        {formatNum($usage.usersTotal ?? 0)}
-                                    </div>
-                                    <div>Users</div>
+                            <div class="grid-item-1-end-start">
+                                <div class="heading-level-4">
+                                    {formatNum($usage.usersTotal ?? 0)}
                                 </div>
+                                <div>Users</div>
                             </div>
-                        </a>
-                        <a
-                            href={`${base}/project-${$page.params.region}-${projectId}/functions`}
-                            class="card is-2-columns-large-screen">
-                            <div class="grid-item-1">
-                                <div class="grid-item-1-start-start">
-                                    <div class="eyebrow-heading-3">
-                                        <span class="icon-lightning-bolt" aria-hidden="true" />
-                                        <span class="text">Functions</span>
-                                    </div>
+                        </div>
+                    </a>
+                    <a
+                        href={`${base}/project-${$page.params.region}-${projectId}/functions`}
+                        class="card is-2-columns-large-screen">
+                        <div class="grid-item-1">
+                            <div class="grid-item-1-start-start">
+                                <div class="eyebrow-heading-3">
+                                    <span class="icon-lightning-bolt" aria-hidden="true" />
+                                    <span class="text">Functions</span>
                                 </div>
+                            </div>
 
-                                <div class="grid-item-1-start-end" />
-
-                                <div class="grid-item-1-end-start">
-                                    <div class="heading-level-4">
-                                        {formatNum($usage.executionsTotal ?? 0)}
-                                    </div>
-                                    <div>Executions</div>
-                                </div>
+                            <div class="grid-item-1-start-end" />
 
-                                <div class="grid-item-1-end-end">
-                                    <div class="text" />
+                            <div class="grid-item-1-end-start">
+                                <div class="heading-level-4">
+                                    {formatNum($usage.executionsTotal ?? 0)}
                                 </div>
+                                <div>Executions</div>
                             </div>
-                        </a>
-                        <!--                        <div-->
-                        <!--                            class="card is-2-columns-medium-screen is-2-columns-large-screen is-2-rows-large-screen is-location-row-2-end-large-screen">-->
-                        <!--                            <Realtime />-->
-                        <!--                        </div>-->
-                    </div>
-                </section>
-            {/if}
 
-            <section class="common-section u-margin-block-start-100">
-                <Heading tag="h2" size="5" id="integrations">Integrations</Heading>
-                <div class="tabs u-margin-block-start-24 u-sep-block-end">
-                    <button
-                        class="tabs-button-scroll is-start u-hide"
-                        aria-label="Show items in start side">
-                        <span class="icon-cheveron-left" aria-hidden="true" />
-                    </button>
-                    <button
-                        class="tabs-button-scroll is-end u-hide"
-                        aria-label="Show items in end side">
-                        <span class="icon-cheveron-right" aria-hidden="true" />
-                    </button>
-                    <ul class="tabs-list" role="tablist" data-sveltekit-noscroll>
-                        <Tab
-                            href={`${path}/platforms`}
-                            selected={$page.url.pathname === `${path}/platforms`}
-                            event="platforms">Platforms</Tab>
-                        <Tab
-                            href={`${path}/keys`}
-                            selected={$page.url.pathname === `${path}/keys`}
-                            event="keys">API keys</Tab>
-                    </ul>
-                </div>
-
-                <div class="u-margin-block-start-40">
-                    <slot />
+                            <div class="grid-item-1-end-end">
+                                <div class="text" />
+                            </div>
+                        </div>
+                    </a>
                 </div>
             </section>
         {/if}
-    </Container>
-{/if}
+
+        <section class="common-section u-margin-block-start-100">
+            <Heading tag="h2" size="5" id="integrations">Integrations</Heading>
+            <div class="tabs u-margin-block-start-24 u-sep-block-end">
+                <button
+                    class="tabs-button-scroll is-start u-hide"
+                    aria-label="Show items in start side">
+                    <span class="icon-cheveron-left" aria-hidden="true" />
+                </button>
+                <button
+                    class="tabs-button-scroll is-end u-hide"
+                    aria-label="Show items in end side">
+                    <span class="icon-cheveron-right" aria-hidden="true" />
+                </button>
+                <ul class="tabs-list" role="tablist" data-sveltekit-noscroll>
+                    <Tab
+                        noscroll
+                        href={`${path}/platforms`}
+                        selected={$page.url.pathname === `${path}/platforms`}
+                        event="platforms">Platforms</Tab>
+                    <Tab
+                        noscroll
+                        href={`${path}/keys`}
+                        selected={$page.url.pathname === `${path}/keys`}
+                        event="keys">API keys</Tab>
+                </ul>
+            </div>
+
+            <div class="u-margin-block-start-40">
+                <slot />
+            </div>
+        </section>
+    {/if}
+</Container>
 
 <style>
     @media (min-width: 1199px) {
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/skipped.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/skipped.svelte
index cebaaff36f..a5b2168650 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/skipped.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/wizard/skipped.svelte
@@ -8,6 +8,7 @@
     const showSkippedModal = writable(false);
 
     async function closeWizard() {
+        await invalidateDependencies();
         wizard.hide();
         createPlatform.reset();
     }