diff --git a/src/routes/(console)/project-[project]/overview/+layout.svelte b/src/routes/(console)/project-[project]/overview/+layout.svelte
index 4eda9f841..c42f5a12e 100644
--- a/src/routes/(console)/project-[project]/overview/+layout.svelte
+++ b/src/routes/(console)/project-[project]/overview/+layout.svelte
@@ -1,4 +1,7 @@
 <script lang="ts" context="module">
+    import { total } from '$lib/helpers/array';
+    import type { Metric } from '$lib/sdk/usage';
+
     export function totalMetrics(set: Array<unknown>): number {
         if (!set) return 0;
         return total((set as Metric[]).map((c) => c.value));
@@ -20,13 +23,12 @@
     import Requests from './requests.svelte';
     import { usage } from './store';
     import { formatNum } from '$lib/helpers/string';
-    import { total } from '$lib/helpers/array';
-    import type { Metric } from '$lib/sdk/usage';
     import { periodToDates } from '$lib/layout/usage.svelte';
     import { canWriteProjects } from '$lib/stores/roles';
     import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { writable, type Writable } from 'svelte/store';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     $: projectId = page.params.project;
     $: path = `${base}/project-${projectId}/overview`;
@@ -84,12 +86,11 @@
 </svelte:head>
 
 <Container overlapCover>
-    <!-- TODO: fix with nicer solution -->
-    <div class="flex-container">
+    <Layout.Stack gap="xxl">
         {#if $usage}
             {@const storage = humanFileSize($usage.filesStorageTotal ?? 0)}
-            <section class="common-section">
-                <div class="grid-dashboard-1s-2m-6l" style:gap="1rem">
+            <Layout.Stack gap="xl">
+                <Layout.Stack gap="l" direction={$isSmallViewport ? 'column' : 'row'}>
                     <Card.Base
                         class="is-2-columns-medium-screen is-3-columns-large-screen"
                         padding="s">
@@ -100,6 +101,9 @@
                         padding="s">
                         <Requests {period} on:change={(e) => changePeriod(e.detail)} />
                     </Card.Base>
+                </Layout.Stack>
+
+                <Layout.Stack gap="xl" direction={$isSmallViewport ? 'column' : 'row'}>
                     <Card.Link
                         padding="s"
                         href={`${base}/project-${projectId}/databases`}
@@ -193,43 +197,37 @@
                             </div>
                         </div>
                     </Card.Link>
-                    <Card.Base
-                        padding="s"
-                        class="is-2-columns-medium-screen is-2-columns-large-screen is-2-rows-large-screen is-location-row-2-end-large-screen">
-                        <Realtime />
-                    </Card.Base>
-                </div>
-            </section>
+                    <!--                    <Card.Base-->
+                    <!--                        padding="s"-->
+                    <!--                        class="is-2-columns-medium-screen is-2-columns-large-screen is-2-rows-large-screen is-location-row-2-end-large-screen">-->
+                    <!--                        <Realtime />-->
+                    <!--                    </Card.Base>-->
+                </Layout.Stack>
+            </Layout.Stack>
         {/if}
 
-        <Layout.Stack gap="xl">
-            <Typography.Title>Integrations</Typography.Title>
-            <Layout.Stack gap="xl" direction="row" justifyContent="space-between">
-                <Tabs>
-                    <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>
-                </Tabs>
-                {#if $action}
-                    <svelte:component this={$action} />
-                {/if}
+        <div class="u-margin-block-start-64">
+            <Layout.Stack gap="xl">
+                <Typography.Title>Integrations</Typography.Title>
+                <Layout.Stack gap="xl" direction="row" justifyContent="space-between">
+                    <Tabs>
+                        <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>
+                    </Tabs>
+                    {#if $action}
+                        <svelte:component this={$action} />
+                    {/if}
+                </Layout.Stack>
+                <slot />
             </Layout.Stack>
-            <slot />
-        </Layout.Stack>
-    </div>
+        </div>
+    </Layout.Stack>
 </Container>
-
-<style>
-    .flex-container {
-        display: flex;
-        flex-direction: column;
-        gap: var(--space-12);
-    }
-</style>