diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 00d7ea1ba..686a12a5f 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -357,7 +357,7 @@
     <div
         class="sub-navigation"
         class:icons={state === 'icons'}
-        style:--banner-spacing={$isDesktopViewport && $bannerSpacing ? $bannerSpacing : undefined}>
+        style:--banner-spacing={$bannerSpacing ? $bannerSpacing : undefined}>
         <svelte:component this={subNavigation} />
     </div>
 {/if}
@@ -608,8 +608,19 @@
             transition: width 0.2s linear;
 
             &.icons {
+                width: 266px;
                 transition: width 0.3s linear;
-                width: var(--banner-spacing, 266px);
+
+                & :global(nav) {
+                    margin-top: var(--banner-spacing);
+                }
+            }
+        }
+
+        /* when in small or tablet viewport and there's a banner */
+        @media (max-width: 1023px) {
+            & :global(header) {
+                margin-top: var(--banner-spacing);
             }
         }
     }
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index 03ee8ac55..be99cc7be 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Layout } from '@appwrite.io/pink-svelte';
+    import { isTabletViewport } from '$lib/stores/viewport';
 
     export let size: 'small' | 'medium' | 'large' | 'xl' = null;
     export let blocksize = '152px';
@@ -8,9 +9,15 @@
     $: style = size
         ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
         : '';
+
+    $: marginTop = expanded && $isTabletViewport ? '48px' : undefined;
 </script>
 
-<div class="top-cover-console" style:block-size={blocksize}>
+<div
+    class:expanded
+    class="top-cover-console"
+    style:block-size={blocksize}
+    style:margin-top={marginTop}>
     <div class="cover-container" {style} class:expanded>
         <Layout.Stack direction="row" alignItems="baseline">
             <slot name="header" />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 12d65c3de..b0a456b71 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -15,7 +15,6 @@
     import { BottomSheet } from '$lib/components';
     import Button from '$lib/elements/forms/button.svelte';
     import type { Models } from '@appwrite.io/console';
-    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
 
     let data = $derived(page.data) as PageData;
     let region = $derived(page.params.region);
@@ -45,76 +44,74 @@
 <svelte:window on:resize={onResize} />
 
 {#if !$isTabletViewport}
-    <div class="side-bar-base-wrapper" style:--banner-spacing={$bannerSpacing}>
-        <Sidebar.Base state="open" resizable={false}>
-            <section class="list-container" slot="top" style:width="100%">
-                <a
-                    href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
-                    class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
-                    <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
-                    {data.database?.name}
-                </a>
-                <div class="collection-content">
-                    {#if collections?.total}
-                        <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
-                            {#each sortedCollections as collection}
-                                {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
-                                {@const isSelected = collectionId === collection.$id}
+    <Sidebar.Base state="open" resizable={false}>
+        <section class="list-container" slot="top" style:width="100%">
+            <a
+                href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
+                class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
+                <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
+                {data.database?.name}
+            </a>
+            <div class="collection-content">
+                {#if collections?.total}
+                    <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
+                        {#each sortedCollections as collection}
+                            {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
+                            {@const isSelected = collectionId === collection.$id}
 
-                                <Layout.Stack gap="m" direction="row" alignItems="center">
-                                    <div
-                                        style:border-left="1px solid var(--border-neutral, #ededf0)"
-                                        style:height="1rem">
-                                    </div>
-
-                                    <li class:is-selected={isSelected} style:width="100%">
-                                        <a
-                                            class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
-                                            {href}>
-                                            <Icon
-                                                icon={IconTable}
-                                                size="s"
-                                                color={isSelected
-                                                    ? '--fgcolor-neutral-tertiary'
-                                                    : '--fgcolor-neutral-weak'} />
-                                            <span class="text collection-name" data-private
-                                                >{collection.name}</span>
-                                        </a>
-                                    </li>
-                                </Layout.Stack>
-                            {/each}
-                        </ul>
-                    {:else}
-                        <div style:padding-block="0.75rem">
-                            <Layout.Stack
-                                gap="m"
-                                direction="row"
-                                alignItems="center"
-                                class="u-margin-inline-start-8 u-margin-block-start-8">
+                            <Layout.Stack gap="m" direction="row" alignItems="center">
                                 <div
                                     style:border-left="1px solid var(--border-neutral, #ededf0)"
                                     style:height="1rem">
                                 </div>
-                                No tables yet
-                            </Layout.Stack>
-                        </div>
-                    {/if}
 
-                    <Layout.Stack alignItems="center" direction="row" style="gap: 3px;">
-                        <Icon icon={IconPlus} size="s" />
-                        <Button
-                            compact
-                            on:click={() => {
-                                $showCreate = true;
-                                $showSubNavigation = false;
-                            }}>
-                            Create collection
-                        </Button>
-                    </Layout.Stack>
-                </div>
-            </section>
-        </Sidebar.Base>
-    </div>
+                                <li class:is-selected={isSelected} style:width="100%">
+                                    <a
+                                        class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
+                                        {href}>
+                                        <Icon
+                                            icon={IconTable}
+                                            size="s"
+                                            color={isSelected
+                                                ? '--fgcolor-neutral-tertiary'
+                                                : '--fgcolor-neutral-weak'} />
+                                        <span class="text collection-name" data-private
+                                            >{collection.name}</span>
+                                    </a>
+                                </li>
+                            </Layout.Stack>
+                        {/each}
+                    </ul>
+                {:else}
+                    <div style:padding-block="0.75rem">
+                        <Layout.Stack
+                            gap="m"
+                            direction="row"
+                            alignItems="center"
+                            class="u-margin-inline-start-8 u-margin-block-start-8">
+                            <div
+                                style:border-left="1px solid var(--border-neutral, #ededf0)"
+                                style:height="1rem">
+                            </div>
+                            No tables yet
+                        </Layout.Stack>
+                    </div>
+                {/if}
+
+                <Layout.Stack alignItems="center" direction="row" style="gap: 3px;">
+                    <Icon icon={IconPlus} size="s" />
+                    <Button
+                        compact
+                        on:click={() => {
+                            $showCreate = true;
+                            $showSubNavigation = false;
+                        }}>
+                        Create collection
+                    </Button>
+                </Layout.Stack>
+            </div>
+        </section>
+    </Sidebar.Base>
 {:else}
     <Navbar.Base>
         <div slot="left">
@@ -131,7 +128,7 @@
                     onclick={() => {
                         openBottomSheet = !openBottomSheet;
                     }}>
-                    <span class="orgName">{selectedCollection.name}</span>
+                    <span class="orgName">{selectedCollection?.name}</span>
                     <Icon icon={IconChevronDown} size="s" />
                 </button>
             </Layout.Stack>
@@ -167,12 +164,6 @@
 {/if}
 
 <style lang="scss">
-    .side-bar-base-wrapper {
-        & :global(nav) {
-            margin-top: var(--banner-spacing);
-        }
-    }
-
     .list-container {
         display: flex;
         flex-direction: column;