diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 75df4197b..4b494f450 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -8,36 +8,35 @@
         : '';
 </script>
 
-<div class="console-container" {style}>
-    <Layout.Stack gap="xl">
-        <slot />
-    </Layout.Stack>
+<div style:container-type="inline-size">
+    <div class="console-container" {style}>
+        <Layout.Stack gap="xl">
+            <slot />
+        </Layout.Stack>
+    </div>
 </div>
 
-<!--1728px (and wider): container size is 1200px-->
-<!--1440px: container size is 1144px-->
-<!--1280px: container size is 1000px-->
-<!--1024px (no side navigation): 944px-->
-<!--360px (no side navigation): 328px-->
-
 <style>
     :global(.console-container) {
-        margin: 1.25rem auto;
+        margin: 1.25rem 1rem;
 
-        @media (min-width: 360px) {
-            width: 328px;
+        @container (min-width: 360px) {
+            margin-inline: 2.5rem;
         }
-        @media (min-width: 1024px) {
-            width: 944px;
+        @container (min-width: 1024px) {
+            margin: 1.25rem auto;
+            max-width: 944px;
         }
-        @media (min-width: 1280px) {
-            width: 1000px;
+        @container (min-width: 1280px) {
+            max-width: 1000px;
         }
-        @media (min-width: 1440px) {
-            width: 1144px;
+
+        @container (min-width: 1440px) {
+            max-width: 1144px;
         }
-        @media (min-width: 1728px) {
-            width: 1200px;
+
+        @container (min-width: 1728px) {
+            max-width: 1200px;
         }
     }
 </style>
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index 6d05264b9..48250cfab 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    export let adjustContentToCover = false;
-
     export let size: 'small' | 'medium' | 'large' | 'xl' = null;
 
     $: style = size
@@ -8,8 +6,8 @@
         : '';
 </script>
 
-<div class="top-cover" class:is-adjust-content-to-cover={adjustContentToCover}>
-    <div class="console-container" {style}>
+<div class="top-cover-console">
+    <div class="cover-container" {style}>
         <div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20 u-flex-wrap">
             <slot name="header" />
         </div>
@@ -18,4 +16,33 @@
 </div>
 
 <style>
+    .top-cover-console {
+        container-type: inline-size;
+        padding-block-start: var(--base-48, 48px);
+        padding-block-end: var(--base-64, 64px);
+        border-bottom: 1px solid var(--color-border-neutral, #2d2d31);
+        background: var(--color-bgcolor-neutral-primary, #1d1d21);
+    }
+    .cover-container {
+        margin: 0 1rem;
+
+        @container (min-width: 360px) {
+            margin-inline: 2.5rem;
+        }
+        @container (min-width: 1024px) {
+            margin: 0 auto;
+            max-width: 944px;
+        }
+        @container (min-width: 1280px) {
+            max-width: 1000px;
+        }
+
+        @container (min-width: 1440px) {
+            max-width: 1144px;
+        }
+
+        @container (min-width: 1728px) {
+            max-width: 1200px;
+        }
+    }
 </style>
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 091280aaa..9c56b067f 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -117,7 +117,10 @@
         class="content"
         class:icons-content={state === 'icons'}
         class:no-sidebar={!showSideNavigation}>
-        <section class="main-content">
+        <section
+            class="main-content"
+            style:margin-left={!showSideNavigation ? 0 : '10px'}
+            data-test={showSideNavigation}>
             {#if $activeHeaderAlert?.show}
                 <svelte:component this={$activeHeaderAlert.component} />
             {/if}
diff --git a/src/routes/(console)/project-[project]/overview/onboard.svelte b/src/routes/(console)/project-[project]/overview/onboard.svelte
index 9aa826934..30bf24216 100644
--- a/src/routes/(console)/project-[project]/overview/onboard.svelte
+++ b/src/routes/(console)/project-[project]/overview/onboard.svelte
@@ -42,281 +42,302 @@
 </script>
 
 <svelte:window on:resize={updateViewport} on:load={updateViewport} />
-<div class="console-container">
-    <div class="dashboard-content">
-        {#if !hasPlatforms}
-            <Step.List>
-                <Step.Item state="previous"
-                    ><div>
-                        <h2 class="done">Create project</h2>
-                    </div></Step.Item>
-                <Step.Item state="current"
-                    ><Layout.Stack
-                        direction={isSmallViewport ? 'column' : 'row'}
-                        gap={isSmallViewport ? 'xl' : 'xxl'}>
-                        <Layout.Stack gap="m">
-                            <h2>Add a platform</h2>
-                            <div class="build-info">
-                                <span>
-                                    Start building with your preferred web, mobile, and native
-                                    frameworks.
-                                </span>
-                            </div>
-                        </Layout.Stack>
-                        <div class="grid">
-                            <button
-                                class="onboarding-card platform-card top-row"
-                                on:click={() => addPlatform(0)}>
-                                <Layout.Stack direction="column" justifyContent="space-between">
-                                    <img
-                                        src={$app.themeInUse === 'dark'
-                                            ? PlatformWebImgSourceDark
-                                            : PlatformWebImgSource}
-                                        alt="" />
-                                    <div class="card-content">
-                                        <Layout.Stack
-                                            direction="row"
-                                            justifyContent="space-between"
-                                            alignItems="flex-end">
-                                            <h3>Web</h3>
-
-                                            <div class="is-only-desktop">
-                                                <Icon icon={IconArrowRight} color="--neutral-250" />
-                                            </div></Layout.Stack>
-                                    </div>
-                                </Layout.Stack>
-                            </button>
-                            <button
-                                class="onboarding-card platform-card top-row"
-                                on:click={createKey}>
-                                <Layout.Stack direction="column" justifyContent="space-between">
-                                    <img
-                                        src={$app.themeInUse === 'dark'
-                                            ? PlatformServerImgSourceDark
-                                            : PlatformServerImgSource}
-                                        alt="" />
-                                    <div class="card-content">
-                                        <Layout.Stack
-                                            direction="row"
-                                            justifyContent="space-between"
-                                            alignItems="center">
-                                            <h3>Server</h3>
-                                            <div class="is-only-desktop">
-                                                <Icon icon={IconArrowRight} color="--neutral-250" />
-                                            </div></Layout.Stack>
-                                    </div>
-                                </Layout.Stack>
-                            </button>
-                            <button
-                                class="onboarding-card platform-card"
-                                on:click={() => addPlatform(3)}>
-                                <Layout.Stack direction="column" justifyContent="space-between">
-                                    <img
-                                        src={$app.themeInUse === 'dark'
-                                            ? PlatformIosImgSourceDark
-                                            : PlatformIosImgSource}
-                                        alt="" />
-                                    <div class="card-content">
-                                        <Layout.Stack
-                                            direction="row"
-                                            justifyContent="space-between"
-                                            alignItems="center">
-                                            <h3>Apple</h3>
-                                            <div class="is-only-desktop">
-                                                <Icon icon={IconArrowRight} color="--neutral-250" />
-                                            </div></Layout.Stack>
-                                    </div>
-                                </Layout.Stack>
-                            </button>
-                            <button
-                                class="onboarding-card platform-card"
-                                on:click={() => addPlatform(2)}>
-                                <Layout.Stack direction="column" justifyContent="space-between">
-                                    <img
-                                        src={$app.themeInUse === 'dark'
-                                            ? PlatformAndroidImgSourceDark
-                                            : PlatformAndroidImgSource}
-                                        alt="" />
-                                    <div class="card-content">
-                                        <Layout.Stack
-                                            direction="row"
-                                            justifyContent="space-between"
-                                            alignItems="center">
-                                            <h3>Android</h3>
-                                            <div class="is-only-desktop">
-                                                <Icon icon={IconArrowRight} color="--neutral-250" />
-                                            </div></Layout.Stack>
-                                    </div>
-                                </Layout.Stack>
-                            </button>
-
-                            <button
-                                class="onboarding-card platform-card"
-                                on:click={() => addPlatform(1)}>
-                                <Layout.Stack direction="column" justifyContent="space-between">
-                                    <img
-                                        src={$app.themeInUse === 'dark'
-                                            ? PlatformFlutterImgSourceDark
-                                            : PlatformFlutterImgSource}
-                                        alt="" />
-                                    <div class="card-content">
-                                        <Layout.Stack
-                                            direction="row"
-                                            justifyContent="space-between"
-                                            alignItems="center">
-                                            <h3>Flutter</h3>
-                                            <div class="is-only-desktop">
-                                                <Icon icon={IconArrowRight} color="--neutral-250" />
-                                            </div></Layout.Stack>
-                                    </div>
-                                </Layout.Stack>
-                            </button>
-                        </div>
-                    </Layout.Stack></Step.Item>
-                <Step.Item state="next"
-                    ><div>
-                        <h2 class="done">Build your app</h2>
-                    </div></Step.Item>
-            </Step.List>
-        {:else}
-            <Step.List>
-                <Step.Item state="previous"
-                    ><div>
-                        <h2 class="done">Create project</h2>
-                    </div></Step.Item>
-                <Step.Item state="previous"
-                    ><div>
-                        <h2 class="done">Add a platform</h2>
-                    </div></Step.Item>
-                <Step.Item state="current"
-                    ><Layout.Stack
-                        direction={isSmallViewport ? 'column' : 'row'}
-                        gap={isSmallViewport ? 'xl' : 'xxl'}>
-                        <Layout.Stack gap="m">
-                            <h2>Build your app</h2>
-                            <div class="build-info">
-                                <span>
-                                    Continue building your app by setting up services such as Auth,
-                                    Databases, Storage and Functions.</span>
-                            </div>
-                        </Layout.Stack>
-                        <div class="grid">
-                            <a
-                                class="onboarding-card build-card"
-                                href={`${base}/project-${projectId}/databases`}>
-                                <Layout.Stack direction="column" justifyContent="space-between">
-                                    <img
-                                        src={$app.themeInUse === 'dark'
-                                            ? DatabaseImgSourceDark
-                                            : DatabaseImgSource}
-                                        alt="" />
-                                    <div class="card-content">
-                                        <Layout.Stack
-                                            direction="row"
-                                            justifyContent="space-between"
-                                            alignItems="center">
-                                            <h3>Setup your database</h3>
-                                            <span class="is-only-desktop">
-                                                <Icon icon={IconArrowRight} color="--neutral-250" />
-                                            </span></Layout.Stack>
-                                    </div>
-                                </Layout.Stack>
-                            </a>
-                            <div class="onboarding-card build-card">
-                                <div class="card-content card-docs">
-                                    <Layout.Stack direction="column" justifyContent="space-between">
-                                        <h3>Discover our docs</h3>
-                                        <Layout.Stack
-                                            direction="column"
-                                            gap="s"
-                                            justifyContent="flex-end">
-                                            <Link.Anchor
-                                                variant="quiet-muted"
-                                                href="https://appwrite.io/docs/references"
-                                                target="_blank">API references</Link.Anchor>
-                                            <Link.Anchor
-                                                variant="quiet-muted"
-                                                href="https://appwrite.io/docs/tutorials"
-                                                target="_blank">Tutorials</Link.Anchor>
-                                            <Link.Anchor
-                                                variant="quiet-muted"
-                                                href="https://appwrite.io/docs/products/storage/quick-start"
-                                                target="_blank"
-                                                >Storage quick start
-                                            </Link.Anchor>
-                                            <Link.Anchor
-                                                variant="quiet-muted"
-                                                href="https://appwrite.io/docs/products/functions/quick-start"
-                                                target="_blank">Functions quick start</Link.Anchor>
-                                        </Layout.Stack>
-                                    </Layout.Stack>
+<div style:container-type="inline-size">
+    <div class="console-container">
+        <div class="dashboard-content">
+            {#if !hasPlatforms}
+                <Step.List>
+                    <Step.Item state="previous"
+                        ><div>
+                            <h2 class="done">Create project</h2>
+                        </div></Step.Item>
+                    <Step.Item state="current"
+                        ><Layout.Stack
+                            direction={isSmallViewport ? 'column' : 'row'}
+                            gap={isSmallViewport ? 'xl' : 'xxl'}>
+                            <Layout.Stack gap="m">
+                                <h2>Add a platform</h2>
+                                <div class="build-info">
+                                    <span>
+                                        Start building with your preferred web, mobile, and native
+                                        frameworks.
+                                    </span>
                                 </div>
-                            </div>
-                            <div class="onboarding-card card-auth build-card">
-                                <div class="card-content">
-                                    <Layout.Stack direction="column" justifyContent="space-between">
-                                        <h3>Setup auth</h3>
-                                        <Layout.Stack
-                                            direction="column"
-                                            gap="s"
-                                            justifyContent="flex-end">
-                                            <Link.Anchor
-                                                variant="quiet-muted"
-                                                href={`${base}/project-${projectId}/auth/settings`}
-                                                >E-mail and password
-                                            </Link.Anchor>
-                                            <Link.Anchor
-                                                variant="quiet-muted"
-                                                href={`${base}/project-${projectId}/auth/settings`}
-                                                >OAuth 2</Link.Anchor>
-                                            <Link.Anchor
-                                                variant="quiet-muted"
-                                                href={`${base}/project-${projectId}/auth/settings`}
-                                                >View all methods</Link.Anchor>
-                                        </Layout.Stack>
-                                    </Layout.Stack>
-                                </div>
-                                <img
-                                    src={$app.themeInUse === 'dark'
-                                        ? UsersImgSourceDark
-                                        : UsersImgSource}
-                                    alt="" />
-                            </div>
-                            <div class="onboarding-card build-card">
-                                <div class="card-content">
+                            </Layout.Stack>
+                            <div class="grid">
+                                <button
+                                    class="onboarding-card platform-card top-row"
+                                    on:click={() => addPlatform(0)}>
                                     <Layout.Stack direction="column" justifyContent="space-between">
                                         <img
                                             src={$app.themeInUse === 'dark'
-                                                ? DiscordImgSourceDark
-                                                : DiscordImgSource}
-                                            class="discord"
+                                                ? PlatformWebImgSourceDark
+                                                : PlatformWebImgSource}
                                             alt="" />
-                                        <h3>Discord</h3>
-                                        <Link.Anchor
-                                            variant="quiet-muted"
-                                            href="https://appwrite.io/discord"
-                                            size="l"
-                                            ><Layout.Stack
+                                        <div class="card-content">
+                                            <Layout.Stack
                                                 direction="row"
-                                                alignItems="flex-end"
-                                                gap="xxs"
-                                                ><span
-                                                    >Join our Discord for support, tips and product
-                                                    updates</span>
+                                                justifyContent="space-between"
+                                                alignItems="flex-end">
+                                                <h3>Web</h3>
+
+                                                <div class="is-only-desktop">
+                                                    <Icon
+                                                        icon={IconArrowRight}
+                                                        color="--neutral-250" />
+                                                </div></Layout.Stack>
+                                        </div>
+                                    </Layout.Stack>
+                                </button>
+                                <button
+                                    class="onboarding-card platform-card top-row"
+                                    on:click={createKey}>
+                                    <Layout.Stack direction="column" justifyContent="space-between">
+                                        <img
+                                            src={$app.themeInUse === 'dark'
+                                                ? PlatformServerImgSourceDark
+                                                : PlatformServerImgSource}
+                                            alt="" />
+                                        <div class="card-content">
+                                            <Layout.Stack
+                                                direction="row"
+                                                justifyContent="space-between"
+                                                alignItems="center">
+                                                <h3>Server</h3>
+                                                <div class="is-only-desktop">
+                                                    <Icon
+                                                        icon={IconArrowRight}
+                                                        color="--neutral-250" />
+                                                </div></Layout.Stack>
+                                        </div>
+                                    </Layout.Stack>
+                                </button>
+                                <button
+                                    class="onboarding-card platform-card"
+                                    on:click={() => addPlatform(3)}>
+                                    <Layout.Stack direction="column" justifyContent="space-between">
+                                        <img
+                                            src={$app.themeInUse === 'dark'
+                                                ? PlatformIosImgSourceDark
+                                                : PlatformIosImgSource}
+                                            alt="" />
+                                        <div class="card-content">
+                                            <Layout.Stack
+                                                direction="row"
+                                                justifyContent="space-between"
+                                                alignItems="center">
+                                                <h3>Apple</h3>
+                                                <div class="is-only-desktop">
+                                                    <Icon
+                                                        icon={IconArrowRight}
+                                                        color="--neutral-250" />
+                                                </div></Layout.Stack>
+                                        </div>
+                                    </Layout.Stack>
+                                </button>
+                                <button
+                                    class="onboarding-card platform-card"
+                                    on:click={() => addPlatform(2)}>
+                                    <Layout.Stack direction="column" justifyContent="space-between">
+                                        <img
+                                            src={$app.themeInUse === 'dark'
+                                                ? PlatformAndroidImgSourceDark
+                                                : PlatformAndroidImgSource}
+                                            alt="" />
+                                        <div class="card-content">
+                                            <Layout.Stack
+                                                direction="row"
+                                                justifyContent="space-between"
+                                                alignItems="center">
+                                                <h3>Android</h3>
+                                                <div class="is-only-desktop">
+                                                    <Icon
+                                                        icon={IconArrowRight}
+                                                        color="--neutral-250" />
+                                                </div></Layout.Stack>
+                                        </div>
+                                    </Layout.Stack>
+                                </button>
+
+                                <button
+                                    class="onboarding-card platform-card"
+                                    on:click={() => addPlatform(1)}>
+                                    <Layout.Stack direction="column" justifyContent="space-between">
+                                        <img
+                                            src={$app.themeInUse === 'dark'
+                                                ? PlatformFlutterImgSourceDark
+                                                : PlatformFlutterImgSource}
+                                            alt="" />
+                                        <div class="card-content">
+                                            <Layout.Stack
+                                                direction="row"
+                                                justifyContent="space-between"
+                                                alignItems="center">
+                                                <h3>Flutter</h3>
+                                                <div class="is-only-desktop">
+                                                    <Icon
+                                                        icon={IconArrowRight}
+                                                        color="--neutral-250" />
+                                                </div></Layout.Stack>
+                                        </div>
+                                    </Layout.Stack>
+                                </button>
+                            </div>
+                        </Layout.Stack></Step.Item>
+                    <Step.Item state="next"
+                        ><div>
+                            <h2 class="done">Build your app</h2>
+                        </div></Step.Item>
+                </Step.List>
+            {:else}
+                <Step.List>
+                    <Step.Item state="previous"
+                        ><div>
+                            <h2 class="done">Create project</h2>
+                        </div></Step.Item>
+                    <Step.Item state="previous"
+                        ><div>
+                            <h2 class="done">Add a platform</h2>
+                        </div></Step.Item>
+                    <Step.Item state="current"
+                        ><Layout.Stack
+                            direction={isSmallViewport ? 'column' : 'row'}
+                            gap={isSmallViewport ? 'xl' : 'xxl'}>
+                            <Layout.Stack gap="m">
+                                <h2>Build your app</h2>
+                                <div class="build-info">
+                                    <span>
+                                        Continue building your app by setting up services such as
+                                        Auth, Databases, Storage and Functions.</span>
+                                </div>
+                            </Layout.Stack>
+                            <div class="grid">
+                                <a
+                                    class="onboarding-card build-card"
+                                    href={`${base}/project-${projectId}/databases`}>
+                                    <Layout.Stack direction="column" justifyContent="space-between">
+                                        <img
+                                            src={$app.themeInUse === 'dark'
+                                                ? DatabaseImgSourceDark
+                                                : DatabaseImgSource}
+                                            alt="" />
+                                        <div class="card-content">
+                                            <Layout.Stack
+                                                direction="row"
+                                                justifyContent="space-between"
+                                                alignItems="center">
+                                                <h3>Setup your database</h3>
                                                 <span class="is-only-desktop">
                                                     <Icon
                                                         icon={IconArrowRight}
-                                                        size="s"
                                                         color="--neutral-250" />
-                                                </span></Layout.Stack
-                                            ></Link.Anchor>
+                                                </span></Layout.Stack>
+                                        </div>
                                     </Layout.Stack>
+                                </a>
+                                <div class="onboarding-card build-card">
+                                    <div class="card-content card-docs">
+                                        <Layout.Stack
+                                            direction="column"
+                                            justifyContent="space-between">
+                                            <h3>Discover our docs</h3>
+                                            <Layout.Stack
+                                                direction="column"
+                                                gap="s"
+                                                justifyContent="flex-end">
+                                                <Link.Anchor
+                                                    variant="quiet-muted"
+                                                    href="https://appwrite.io/docs/references"
+                                                    target="_blank">API references</Link.Anchor>
+                                                <Link.Anchor
+                                                    variant="quiet-muted"
+                                                    href="https://appwrite.io/docs/tutorials"
+                                                    target="_blank">Tutorials</Link.Anchor>
+                                                <Link.Anchor
+                                                    variant="quiet-muted"
+                                                    href="https://appwrite.io/docs/products/storage/quick-start"
+                                                    target="_blank"
+                                                    >Storage quick start
+                                                </Link.Anchor>
+                                                <Link.Anchor
+                                                    variant="quiet-muted"
+                                                    href="https://appwrite.io/docs/products/functions/quick-start"
+                                                    target="_blank"
+                                                    >Functions quick start</Link.Anchor>
+                                            </Layout.Stack>
+                                        </Layout.Stack>
+                                    </div>
+                                </div>
+                                <div class="onboarding-card card-auth build-card">
+                                    <div class="card-content">
+                                        <Layout.Stack
+                                            direction="column"
+                                            justifyContent="space-between">
+                                            <h3>Setup auth</h3>
+                                            <Layout.Stack
+                                                direction="column"
+                                                gap="s"
+                                                justifyContent="flex-end">
+                                                <Link.Anchor
+                                                    variant="quiet-muted"
+                                                    href={`${base}/project-${projectId}/auth/settings`}
+                                                    >E-mail and password
+                                                </Link.Anchor>
+                                                <Link.Anchor
+                                                    variant="quiet-muted"
+                                                    href={`${base}/project-${projectId}/auth/settings`}
+                                                    >OAuth 2</Link.Anchor>
+                                                <Link.Anchor
+                                                    variant="quiet-muted"
+                                                    href={`${base}/project-${projectId}/auth/settings`}
+                                                    >View all methods</Link.Anchor>
+                                            </Layout.Stack>
+                                        </Layout.Stack>
+                                    </div>
+                                    <img
+                                        src={$app.themeInUse === 'dark'
+                                            ? UsersImgSourceDark
+                                            : UsersImgSource}
+                                        alt="" />
+                                </div>
+                                <div class="onboarding-card build-card">
+                                    <div class="card-content">
+                                        <Layout.Stack
+                                            direction="column"
+                                            justifyContent="space-between">
+                                            <img
+                                                src={$app.themeInUse === 'dark'
+                                                    ? DiscordImgSourceDark
+                                                    : DiscordImgSource}
+                                                class="discord"
+                                                alt="" />
+                                            <h3>Discord</h3>
+                                            <Link.Anchor
+                                                variant="quiet-muted"
+                                                href="https://appwrite.io/discord"
+                                                size="l"
+                                                ><Layout.Stack
+                                                    direction="row"
+                                                    alignItems="flex-end"
+                                                    gap="xxs"
+                                                    ><span
+                                                        >Join our Discord for support, tips and
+                                                        product updates</span>
+                                                    <span class="is-only-desktop">
+                                                        <Icon
+                                                            icon={IconArrowRight}
+                                                            size="s"
+                                                            color="--neutral-250" />
+                                                    </span></Layout.Stack
+                                                ></Link.Anchor>
+                                        </Layout.Stack>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    </Layout.Stack></Step.Item>
-            </Step.List>
-        {/if}
+                        </Layout.Stack></Step.Item>
+                </Step.List>
+            {/if}
+        </div>
     </div>
 </div>