diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 325eb8bd58..b3ac70ada3 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -103,7 +103,7 @@
 <div
     class="sidebar"
     class:only-mobile-tablet={!project}
-    class:no-transitions={$noWidthTransition}
+    class:no-transitions={$noWidthTransition && !$isTabletViewport}
     style:--overlay-on-neutral={$app.themeInUse === 'dark'
         ? 'var(--neutral-750)'
         : 'var(--neutral-100)'}>
@@ -367,7 +367,7 @@
         <div
             class="sub-navigation"
             class:icons={state === 'icons'}
-            class:no-transitions={$noWidthTransition}>
+            class:no-transitions={$noWidthTransition && !$isTabletViewport}>
             <svelte:component this={subNavigation} />
         </div>
     {/if}
@@ -378,6 +378,14 @@
         &.no-transitions :global(nav) {
             transition: none !important;
         }
+
+        & :global(nav) {
+            @media (max-width: 1023px) {
+                top: var(--banner-spacing, 0px);
+                margin-top: var(--banner-spacing, 0px);
+                height: calc(100vh - var(--banner-spacing, 0px)) !important;
+            }
+        }
     }
 
     .middle-container {
diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte
index dce36d66f5..476ee0587e 100644
--- a/src/lib/layout/activity.svelte
+++ b/src/lib/layout/activity.svelte
@@ -11,7 +11,7 @@
     export let offset = 0;
     export let logs: Models.LogList;
     export let insideSideSheet = false;
-    export let databasesScreen = false;
+    export let expanded = false;
     export let useCreateLinkForPagination = true;
 
     const columns: PinkColumn[] = [
@@ -23,11 +23,7 @@
     ];
 </script>
 
-<Container
-    {databasesScreen}
-    {insideSideSheet}
-    expanded={databasesScreen && !insideSideSheet}
-    slotSpacing={databasesScreen && !insideSideSheet}>
+<Container {insideSideSheet} expanded={expanded && !insideSideSheet}>
     {#if logs.total}
         <div>
             <Table.Root {columns} let:root>
diff --git a/src/lib/layout/animatedTitle.svelte b/src/lib/layout/animatedTitle.svelte
index c9ee71741f..a98c36f859 100644
--- a/src/lib/layout/animatedTitle.svelte
+++ b/src/lib/layout/animatedTitle.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { isSmallViewport } from '$lib/stores/viewport';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
     import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
     import { Button, Icon, Layout } from '@appwrite.io/pink-svelte';
     import type { Snippet } from 'svelte';
@@ -7,19 +7,25 @@
 
     let {
         href = null,
+        children = null,
         collapsed = false,
-        children,
+        backOnlyDesktop = false,
         ...restProps
     }: {
         href?: string | null;
         collapsed?: boolean;
-        children: Snippet;
+        children?: Snippet;
+        backOnlyDesktop?: boolean;
     } & HTMLAttributes<HTMLDivElement> = $props();
 
     const buttonSize = $derived(collapsed ? 'xs' : 's');
-    const currentLineHeight = $derived(collapsed ? '130%' : '140%');
-    const currentLetterSpacing = $derived(collapsed ? '0' : '-0.144px');
-    const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxl)');
+    const currentFontSize = $derived(
+        collapsed
+            ? 'var(--font-size-l)'
+            : $isSmallViewport
+              ? 'var(--font-size-xl)'
+              : 'var(--font-size-xxl)'
+    );
 </script>
 
 <Layout.Stack
@@ -28,20 +34,24 @@
     direction="row"
     alignItems="center"
     justifyContent="center"
+    style={backOnlyDesktop && $isTabletViewport ? 'margin-inline-start: -2.5rem;' : ''}
     {...restProps}>
-    {#if href && !$isSmallViewport}
+    {#if href}
         <span style:position="relative">
-            <Button.Anchor size={buttonSize} icon variant="text" {href} aria-label="page back">
+            <Button.Anchor
+                {href}
+                icon
+                variant="text"
+                size={buttonSize}
+                aria-label="page back"
+                disabled={$isTabletViewport}
+                style={$isTabletViewport ? 'visibility: hidden' : ''}>
                 <Icon icon={IconChevronLeft} />
             </Button.Anchor>
         </span>
     {/if}
-    <h1
-        class="animated-title"
-        style:font-size={currentFontSize}
-        style:line-height={currentLineHeight}
-        style:letter-spacing={currentLetterSpacing}>
-        {@render children()}
+    <h1 class="animated-title" style:font-size={currentFontSize}>
+        {@render children?.()}
     </h1>
 </Layout.Stack>
 
@@ -62,5 +72,6 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         max-width: 100%;
+        line-height: 130%;
     }
 </style>
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index ffc83085b6..7bb07f202a 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -5,26 +5,16 @@
 
     let {
         expanded = false,
-        slotSpacing = false,
         overlapCover = false,
-        paddingInlineEnd = true,
-        paddingInlineEndDouble = false,
         insideSideSheet = false,
-        databasesScreen = false,
-        databasesMainScreen = false,
         expandHeightButton = false,
         size = null,
         children,
         ...restProps
     }: {
         expanded?: boolean;
-        slotSpacing?: boolean;
         overlapCover?: boolean;
-        paddingInlineEnd?: boolean;
-        paddingInlineEndDouble?: boolean;
         insideSideSheet?: boolean;
-        databasesScreen?: boolean;
-        databasesMainScreen?: boolean;
         expandHeightButton?: boolean;
         children?: Snippet;
         size?: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | null;
@@ -41,14 +31,9 @@
     <div
         {style}
         class:expanded
-        class:slotSpacing
         class:insideSideSheet
-        class:databasesScreen
         class:expandHeightButton
-        class:databasesMainScreen
-        class="console-container"
-        class:paddingInlineEndDouble
-        class:paddingInlineEnd={!paddingInlineEnd}>
+        class="console-container">
         <Layout.Stack gap="l">
             {@render children?.()}
         </Layout.Stack>
@@ -60,7 +45,8 @@
         z-index: 1;
         margin-block-start: -3.5rem;
     }
-    :global(.console-container) {
+
+    .console-container {
         margin-block: var(--base-32);
 
         &.insideSideSheet {
@@ -100,40 +86,6 @@
                     }
                 }
             }
-
-            &.slotSpacing {
-                padding-block-start: var(--base-32) !important;
-            }
-        }
-
-        &.paddingInlineEnd {
-            @media (min-width: 1024px) {
-                padding-inline-end: 2.75rem !important;
-            }
-        }
-
-        &.paddingInlineEndDouble {
-            @media (min-width: 1024px) {
-                padding-inline-end: calc(2 * 2.75rem) !important;
-            }
-        }
-
-        &.databasesScreen {
-            @media (min-width: 1440px) {
-                min-width: 1070px;
-                /*max-width: 1144px;*/
-            }
-
-            @media (min-width: 1728px) {
-                min-width: 1070px;
-                padding-inline: 196px !important;
-            }
-        }
-
-        &.databasesMainScreen {
-            @media (min-width: 1440px) {
-                max-width: 1200px;
-            }
         }
 
         @media (min-width: 360px) {
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index 2018e2b6f7..7e96c8ac2e 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -7,6 +7,7 @@
     export let expanded: boolean = false;
     export let animate: boolean = false;
     export let collapsed: boolean = false;
+    export let adjustForSpreadsheet: boolean = false;
     export let databasesMainScreen: boolean = false;
 
     let isAnimating = false;
@@ -33,7 +34,7 @@
 
 <div
     class:animate
-    class:expanded
+    class:adjustForSpreadsheet
     class:collapsed={animate && collapsed}
     class="top-cover-console"
     style:margin-top={marginTop}
@@ -43,8 +44,8 @@
     <div
         class="cover-container"
         {style}
-        class:expanded
         class:databasesMainScreen
+        class:adjustForSpreadsheet
         class:collapsed={animate && collapsed}
         class:animating={isAnimating}>
         <Layout.Stack direction="row" alignItems="baseline">
@@ -52,9 +53,7 @@
         </Layout.Stack>
 
         {#if $$slots.default}
-            <div class:expanded-slot={expanded}>
-                <slot />
-            </div>
+            <slot />
         {/if}
     </div>
 </div>
@@ -80,6 +79,12 @@
         &.collapsed {
             border-bottom-color: var(--border-neutral, #2d2d31);
         }
+
+        &.adjustForSpreadsheet {
+            @media (min-width: 1024px) {
+                padding-left: calc(190px + 3rem);
+            }
+        }
     }
 
     .cover-container {
@@ -114,25 +119,18 @@
             max-width: 1200px;
         }
 
-        &.expanded {
-            margin-inline: 1rem !important;
-        }
-
         &.animating {
             transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
         }
 
-        &.databasesMainScreen {
-            @media (min-width: 1440px) {
-                max-width: 1200px;
-            }
+        &.adjustForSpreadsheet {
+            padding-left: 2px;
         }
-    }
 
-    .expanded-slot {
-        margin-inline: 3rem !important;
-        @media (max-width: 768px) {
-            margin-inline: 0 !important;
+        &.databasesMainScreen {
+            @media (min-width: 1024px) {
+                margin: unset;
+            }
         }
     }
 </style>
diff --git a/src/lib/layout/coverTitle.svelte b/src/lib/layout/coverTitle.svelte
index 45d2f6d24d..982349fc2a 100644
--- a/src/lib/layout/coverTitle.svelte
+++ b/src/lib/layout/coverTitle.svelte
@@ -1,9 +1,20 @@
 <script lang="ts">
-    import { isSmallViewport } from '$lib/stores/viewport';
+    import type { Snippet } from 'svelte';
+    import type { HTMLAttributes } from 'svelte/elements';
     import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
     import { Typography, Button, Icon, Layout } from '@appwrite.io/pink-svelte';
 
-    export let href: string | null = null;
+    let {
+        href = null,
+        children = null,
+        backOnlyDesktop = false,
+        ...restProps
+    }: {
+        href?: string | null;
+        children?: Snippet;
+        backOnlyDesktop?: boolean;
+    } & HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
 <Layout.Stack
@@ -12,10 +23,18 @@
     direction="row"
     alignItems="center"
     justifyContent="center"
-    {...$$restProps}>
+    style={backOnlyDesktop && $isTabletViewport ? 'margin-inline-start: -2.5rem;' : ''}
+    {...restProps}>
     {#if href}
         <span style:position="relative">
-            <Button.Anchor size="s" icon variant="text" {href} aria-label="page back">
+            <Button.Anchor
+                {href}
+                icon
+                size="s"
+                variant="text"
+                aria-label="page back"
+                disabled={backOnlyDesktop && $isTabletViewport}
+                style={backOnlyDesktop && $isTabletViewport ? 'visibility: hidden' : ''}>
                 <Icon icon={IconChevronLeft} />
             </Button.Anchor>
         </span>
@@ -25,6 +44,6 @@
         truncate
         color="--fgcolor-neutral-primary"
         size={$isSmallViewport ? 'm' : 'l'}>
-        <slot />
+        {@render children?.()}
     </Typography.Title>
 </Layout.Stack>
diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 2e4f9819cc..2192484bfa 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -190,7 +190,7 @@
         }
     }
 
-    :global(main:has(.wide-screen-wrapper)) footer {
+    :global(main:has(.databases-spreadsheet)) footer {
         margin-inline-start: 2rem !important;
     }
 </style>
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index bfc06264ff..1459969ef8 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -305,10 +305,17 @@
             }
         }
 
-        @media (max-width: 768px) {
-            .main-content:not(:has(.wide-screen-wrapper)) {
-                width: 100%;
-                position: fixed;
+        :global(.console-container) {
+            @media (min-width: 1024px) {
+                padding-inline-start: var(--base-32, 32px);
+            }
+
+            @media (min-width: 1085px) {
+                padding-inline-start: calc(var(--base-32, 32px) - 0.5rem);
+            }
+
+            @media (min-width: 1280px) {
+                padding-inline-start: calc(var(--base-32, 32px) - 0.75rem);
             }
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
index 2bba6faf7f..e679ff7443 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -18,7 +18,7 @@
     const databaseId = page.params.database;
 </script>
 
-<Container databasesMainScreen>
+<Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Layout.Stack direction="row" alignItems="center">
             <SearchQuery placeholder="Search by name or ID" />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte
index 9fb56506ac..1c164340c9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte
@@ -177,7 +177,7 @@
     });
 </script>
 
-<Container size="xxl" databasesMainScreen>
+<Container size="xxl">
     <div class="backups-page u-flex u-gap-32 u-flex-vertical-mobile">
         {#if !isDisabled}
             <div class="u-flex-vertical u-gap-16 policies-holder-card">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
index 591955ca35..59b82bae55 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
@@ -38,10 +38,10 @@
     ].filter((tab) => !tab.disabled);
 </script>
 
-<Cover databasesMainScreen>
+<Cover>
     <svelte:fragment slot="header">
         <CoverTitle
-            style="margin-inline-start: -2.5rem;"
+            backOnlyDesktop
             href={`${base}/project-${page.params.region}-${projectId}/databases`}>
             {$database.name}
         </CoverTitle>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
index 00c09144e2..65e6c2b071 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
@@ -61,7 +61,7 @@
 </script>
 
 {#if $database}
-    <Container databasesMainScreen>
+    <Container>
         <CardGrid>
             <svelte:fragment slot="title">{$database.name}</svelte:fragment>
             <svelte:fragment slot="aside">
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 8ab8b314ef..953dbd377b 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
@@ -49,9 +49,7 @@
         sortedTables?.find((table: Models.Table) => table.$id === tableId)
     );
 
-    const isTablesScreen = $derived(page.route.id.endsWith('table-[table]'));
-
-    const isMainDatabaseScreen = $derived(page.route.id.endsWith('database-[database]'));
+    const isTablesScreen = $derived(page.route.id.includes('table-[table]'));
 
     async function loadTables() {
         tables = await sdk.forProject(region, project).tablesDB.listTables({
@@ -176,7 +174,7 @@
             </Layout.Stack>
         </section>
     </Sidebar.Base>
-{:else if data?.database?.name && !isMainDatabaseScreen}
+{:else if data?.database?.name && isTablesScreen}
     <Navbar.Base>
         <div slot="left">
             <Layout.Stack direction="row" alignItems="center" gap="s">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/activity/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/activity/+page.svelte
index 1161bb56d8..a406f74b9a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/activity/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/activity/+page.svelte
@@ -5,6 +5,6 @@
     export let data: PageData;
 </script>
 
-<div class="wide-screen-wrapper databases-spreadsheet">
-    <Activity {...data} databasesScreen />
+<div class="databases-spreadsheet">
+    <Activity {...data} />
 </div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
index 2e52e82f96..43fbc83d07 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
@@ -7,7 +7,6 @@
     import AnimatedTitle from '$lib/layout/animatedTitle.svelte';
     import { canWriteTables } from '$lib/stores/roles';
     import { expandTabs, table } from './store';
-    import { Layout } from '@appwrite.io/pink-svelte';
     import { preferences } from '$lib/stores/preferences';
 
     const databaseId = $derived(page.params.database);
@@ -75,47 +74,38 @@
     });
 </script>
 
-<div class:nonSheetPages>
-    <Cover animate expanded collapsed={!$expandTabs} blocksize={$expandTabs ? '152px' : '90px'}>
-        <svelte:fragment slot="header">
-            <Layout.Stack direction="row" alignContent="center" alignItems="center" inline>
-                <AnimatedTitle href={link} collapsed={!$expandTabs}>
-                    {$table?.name}
-                </AnimatedTitle>
+<Cover
+    adjustForSpreadsheet
+    expanded
+    animate
+    collapsed={!$expandTabs}
+    blocksize={$expandTabs ? '152px' : '90px'}>
+    <svelte:fragment slot="header">
+        <AnimatedTitle href={link} backOnlyDesktop collapsed={!$expandTabs}>
+            {$table?.name}
+        </AnimatedTitle>
 
-                {#key $table?.$id}
-                    <Id value={$table?.$id} tooltipPlacement={$expandTabs ? undefined : 'right'}
-                        >{$table?.$id}</Id>
-                {/key}
-            </Layout.Stack>
-        </svelte:fragment>
+        {#key $table?.$id}
+            <Id value={$table?.$id} tooltipPlacement={$expandTabs ? undefined : 'right'}
+                >{$table?.$id}</Id>
+        {/key}
+    </svelte:fragment>
 
-        <div class="tabs-container" class:collapsed={!$expandTabs}>
-            <Tabs>
-                {#each tabs as tab}
-                    <Tab
-                        href={tab.href}
-                        selected={isTabSelected(tab, page.url.pathname, path, tabs)}
-                        event={tab.event}>
-                        {tab.title}
-                    </Tab>
-                {/each}
-            </Tabs>
-        </div>
-    </Cover>
-</div>
+    <div class="tabs-container" class:collapsed={!$expandTabs}>
+        <Tabs>
+            {#each tabs as tab}
+                <Tab
+                    href={tab.href}
+                    selected={isTabSelected(tab, page.url.pathname, path, tabs)}
+                    event={tab.event}>
+                    {tab.title}
+                </Tab>
+            {/each}
+        </Tabs>
+    </div>
+</Cover>
 
 <style lang="scss">
-    .nonSheetPages :global(.cover-container) {
-        @media (min-width: 1440px) {
-            padding-inline: 7px !important;
-        }
-
-        @media (min-width: 1728px) {
-            padding-inline: 10.25rem !important;
-        }
-    }
-
     .tabs-container {
         opacity: 1;
         transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index 7b7f1c7da3..b643a6b3b7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -77,7 +77,9 @@
     // the first render is in a pretty quick succession, delay helps!
     const debouncedUpdateOverlayHeight = debounce(() => updateOverlayHeight(), 250);
 
-    onMount(async () => {
+    onMount(() => {
+        updateOverlayHeight();
+
         if (spreadsheetContainer) {
             resizeObserver = new ResizeObserver(debouncedUpdateOverlayHeight);
             resizeObserver.observe(spreadsheetContainer);
@@ -90,6 +92,11 @@
         }
     });
 
+    $effect(() => {
+        $expandTabs; /* trigger*/
+        debouncedUpdateOverlayHeight();
+    });
+
     const getCustomColumns = (): Column[] =>
         customColumns.map((col: Column) => ({
             ...col,
@@ -159,6 +166,8 @@
     const emptyCells = $derived(($isSmallViewport ? 14 : 17) + (!$expandTabs ? 2 : 0));
 </script>
 
+<svelte:window on:resize={updateOverlayHeight} />
+
 <div
     class="databases-spreadsheet spreadsheet-container-outer"
     data-mode={mode}
@@ -230,7 +239,6 @@
     </SpreadsheetContainer>
 
     {#if !$spreadsheetLoading}
-        <!-- Claude: Can this be truly centered without hacky left: xyz values? -->
         <div
             class="spreadsheet-fade-bottom"
             data-collapsed-tabs={!$expandTabs}
@@ -328,14 +336,10 @@
         z-index: 20;
         display: flex;
         justify-content: center;
-        transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+        transition: none !important;
 
         height: var(--dynamic-overlay-height, 70.5vh);
 
-        &[data-collapsed-tabs='true'] {
-            height: calc(var(--dynamic-overlay-height, 79.1vh) + 8.6vh);
-        }
-
         @media (max-width: 1024px) {
             height: var(--dynamic-overlay-height, 63.35vh);
         }
@@ -343,6 +347,10 @@
         @media (min-width: 1024px) {
             height: var(--dynamic-overlay-height, 70.35vh);
         }
+
+        &[data-ready='true'] {
+            transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+        }
     }
 
     :global(.theme-dark) .spreadsheet-fade-bottom {
@@ -360,17 +368,31 @@
         bottom: 35%;
         position: fixed;
 
-        @media (max-width: 1024px) {
+        @media (max-width: 768px) {
+            bottom: 35%;
+        }
+
+        @media (max-width: 1023px) {
             left: unset;
-            bottom: 30%;
+        }
+
+        @media (min-width: 1024px) {
+            left: 47.5%;
         }
 
         @media (min-width: 1280px) {
+            left: 50%;
             bottom: 37.5%;
         }
 
         @media (min-width: 1440px) {
+            left: 47.5%;
             bottom: 40%;
         }
+
+        @media (min-width: 1728px) {
+            left: 45%;
+            bottom: 50%;
+        }
     }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
index 20abb285b4..04455dd812 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
@@ -9,8 +9,8 @@
     import UpdateStatus from './updateStatus.svelte';
 </script>
 
-<div class="wide-screen-wrapper databases-spreadsheet">
-    <Container expanded slotSpacing databasesScreen>
+<div class="databases-spreadsheet">
+    <Container>
         {#if $table}
             <UpdateStatus />
             <UpdateName />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.svelte
index 4476c9a17b..1b374e93c2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.svelte
@@ -10,8 +10,8 @@
     $: total = data.rowsTotal;
 </script>
 
-<div class="wide-screen-wrapper databases-spreadsheet">
-    <Container expanded slotSpacing paddingInlineEnd databasesScreen>
+<div class="databases-spreadsheet">
+    <Container>
         <Usage
             path={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/table-${page.params.table}/usage`}
             {total}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
index 84c6ff2b72..1a29790fc3 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.svelte
@@ -10,7 +10,7 @@
     $: writesTotal = data.databaseWritesTotal;
 </script>
 
-<Container databasesMainScreen>
+<Container>
     <UsageMultiple
         title="Reads and writes"
         showHeader={false}