diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index fb72021cd..97ca79d1d 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -6,6 +6,7 @@
     import { Pill } from '$lib/elements';
 
     export let isOpen = false;
+    export let showSideNavigation = false;
 
     $: base = `/console/${$page.params.project}`;
 
@@ -58,7 +59,10 @@
 
 <svelte:window on:resize={throttle(onScroll, 25)} />
 
-<main class="grid-with-side" class:is-open={isOpen}>
+<main
+    class:grid-with-side={showSideNavigation}
+    class:grid={!showSideNavigation}
+    class:is-open={isOpen}>
     <header class="main-header">
         <button
             class="icon-button is-no-desktop"
diff --git a/src/routes/console/$me.svelte b/src/routes/console/$me@intro.svelte
similarity index 100%
rename from src/routes/console/$me.svelte
rename to src/routes/console/$me@intro.svelte
diff --git a/src/routes/console/__layout-intro.svelte b/src/routes/console/__layout-intro.svelte
new file mode 100644
index 000000000..52b81c34e
--- /dev/null
+++ b/src/routes/console/__layout-intro.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+    import Shell from '$lib/layout/shell.svelte';
+    import Header from '$lib/layout/header.svelte';
+</script>
+
+<Shell>
+    <svelte:fragment slot="header">
+        <Header />
+    </svelte:fragment>
+    <slot />
+    <footer class="main-footer" />
+</Shell>
diff --git a/src/routes/console/__layout.svelte b/src/routes/console/__layout.svelte
index f4a8c5e52..342c67b3d 100644
--- a/src/routes/console/__layout.svelte
+++ b/src/routes/console/__layout.svelte
@@ -4,7 +4,7 @@
     import Header from '$lib/layout/header.svelte';
 </script>
 
-<Shell>
+<Shell showSideNavigation>
     <svelte:fragment slot="header">
         <Header />
     </svelte:fragment>
diff --git a/src/routes/console/index.svelte b/src/routes/console/index@intro.svelte
similarity index 68%
rename from src/routes/console/index.svelte
rename to src/routes/console/index@intro.svelte
index 908aebcc0..f02af6248 100644
--- a/src/routes/console/index.svelte
+++ b/src/routes/console/index@intro.svelte
@@ -3,6 +3,7 @@
     import { base } from '$app/paths';
     import { Tiles, Tile } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import CreateOrganization from './_createOrganization.svelte';
@@ -40,22 +41,24 @@
 <svelte:head>
     <title>Appwrite - Console</title>
 </svelte:head>
-<h1>Your Organizations</h1>
-<Button on:click={() => (addOrganization = true)}>Add Organization</Button>
+<Container>
+    <h1>Your Organizations</h1>
+    <Button on:click={() => (addOrganization = true)}>Add Organization</Button>
 
-{#await request}
-    <div aria-busy="true" />
-{:then organizations}
-    {#each organizations as organization}
-        <h1>{organization.name}</h1>
-        <Tiles>
-            {#each organization.projects as project}
-                <Tile href={`${base}/console/${project.$id}`} title={project.name} />
-            {/each}
-        </Tiles>
-        <Button on:click={() => createProject(organization.$id)}>Create Project</Button>
-    {/each}
-{/await}
+    {#await request}
+        <div aria-busy="true" />
+    {:then organizations}
+        {#each organizations as organization}
+            <h1>{organization.name}</h1>
+            <Tiles>
+                {#each organization.projects as project}
+                    <Tile href={`${base}/console/${project.$id}`} title={project.name} />
+                {/each}
+            </Tiles>
+            <Button on:click={() => createProject(organization.$id)}>Create Project</Button>
+        {/each}
+    {/await}
+</Container>
 
 <CreateOrganization bind:show={addOrganization} />
 <CreateProject