diff --git a/src/lib/ui/generic/Fixate.svelte b/src/lib/ui/generic/Fixate.svelte
index 89bdcc31..c3164009 100644
--- a/src/lib/ui/generic/Fixate.svelte
+++ b/src/lib/ui/generic/Fixate.svelte
@@ -14,6 +14,11 @@
   let { placement, children }: Props = $props()
 </script>
 
-<div class={['sticky z-30 mb-0', placements[placement]]}>
+<div
+  class={[
+    'sticky z-30 mb-0 pointer-events-none *:pointer-events-auto',
+    placements[placement],
+  ]}
+>
   {@render children?.()}
 </div>
diff --git a/src/lib/ui/layout/Shell.svelte b/src/lib/ui/layout/Shell.svelte
index ea225c8a..fb081a87 100644
--- a/src/lib/ui/layout/Shell.svelte
+++ b/src/lib/ui/layout/Shell.svelte
@@ -11,10 +11,10 @@
 
   interface Props extends HTMLAttributes<HTMLDivElement> {
     children?: Snippet
-    navbar?: Snippet<[{ class: ClassValue; style: string }]>
-    sidebar?: Snippet<[{ class: ClassValue; style: string }]>
-    main?: Snippet<[{ class: ClassValue; style: string }]>
-    suffix?: Snippet<[{ class: ClassValue; style: string }]>
+    navbar?: Snippet<[{ class: ClassValue; style?: string }]>
+    sidebar?: Snippet<[{ class: ClassValue; style?: string }]>
+    main?: Snippet<[{ class: ClassValue; style?: string }]>
+    suffix?: Snippet<[{ class: ClassValue; style?: string }]>
   }
 
   let { children, navbar, sidebar, main, suffix }: Props = $props()
@@ -38,12 +38,7 @@
 {@render children?.()}
 <div class="min-h-screen flex flex-col">
   <div
-    class={[
-      'fixed md:sticky bottom-0 md:top-0',
-      !dockVisible && 'max-md:-bottom-24',
-      'w-full z-50 pointer-events-none',
-    ]}
-    style="transition: bottom .4s cubic-bezier(0.075, 0.82, 0.165, 1);"
+    class={['shell-navbar-holder', !dockVisible && 'max-md:-bottom-24']}
     aria-hidden="true"
   >
     <div class="md:hidden flex justify-between" dir="ltr">
@@ -55,32 +50,65 @@
       />
     </div>
     {@render navbar?.({
-      class: [
-        'md:bg-slate-100/70 md:dark:bg-zinc-950/90 border-slate-200/50 dark:border-zinc-900',
-        'bg-slate-100 dark:bg-zinc-950',
-        'pointer-events-auto backdrop-blur-xl border border-t-0 md:border-x-0',
-      ],
-      style: '',
+      class: ['shell-navbar'],
     })}
   </div>
-  <div class={['content flex-1', settings.newWidth && 'limit-width']}>
+  <div class={['shell-content flex-1', settings.newWidth && 'limit-width']}>
     {@render sidebar?.({
-      class: `hidden md:flex sticky top-0 lg:top-16 left-0 max-h-[calc(100vh-4rem)] bg-slate-100 dark:bg-zinc-950 z-40`,
-      style: 'grid-area: sidebar; width: 100% !important;',
+      class: `shell-aside shell-sidebar`,
     })}
     {@render main?.({
-      class: `w-full bg-slate-50 dark:bg-zinc-925 max-lg:pb-22 justify-self-center border-x border-slate-200 dark:border-zinc-900 pb-3 lg:pb-6`,
-      style: 'grid-area: main',
+      class: `shell-main`,
     })}
     {@render suffix?.({
-      class: `max-lg:hidden flex w-full sticky top-0 lg:top-16 left-0 max-h-[calc(100vh-4rem)] overflow-auto bg-slate-100 dark:bg-zinc-950 z-40`,
-      style: 'grid-area: suffix;',
+      class: `shell-aside shell-suffix`,
     })}
   </div>
 </div>
 
 <style>
-  .content {
+  @reference '../../../app.css';
+
+  .shell-navbar-holder {
+    position: fixed;
+    bottom: 0;
+    z-index: 50;
+    pointer-events: none;
+    width: 100%;
+    transition: bottom 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
+
+    @variant md {
+      position: sticky;
+      top: 0;
+    }
+
+    :global {
+      .shell-navbar {
+        pointer-events: auto;
+        backdrop-filter: blur(var(--blur-xl));
+        border-width: 1px;
+        border-color: var(--color-slate-200);
+        border-top: none;
+        background-color: var(--color-slate-100);
+
+        @variant md {
+          border-left: none;
+          border-right: none;
+          background-color: --alpha(var(--color-slate-100) / 70%);
+        }
+
+        @variant dark {
+          background-color: var(--color-zinc-950);
+          border-color: var(--color-zinc-900);
+          @variant md {
+            background-color: --alpha(var(--color-zinc-950) / 70%);
+          }
+        }
+      }
+    }
+  }
+
+  .shell-content {
     width: 100%;
     display: grid;
     height: 100%;
@@ -92,12 +120,12 @@
     justify-items: start;
   }
 
-  .content.limit-width {
+  .shell-content.limit-width {
     max-width: 100rem;
   }
 
   @media (min-width: 48rem) {
-    .content {
+    .shell-content {
       grid-template-columns: 16rem 1fr;
       justify-items: end start;
       grid-template-areas: 'sidebar main';
@@ -105,15 +133,72 @@
   }
 
   @media (min-width: 64rem) {
-    .content {
+    .shell-content {
       grid-template-columns: 20% 60% 20%;
       justify-items: end center start;
       grid-template-areas: 'sidebar main suffix';
     }
 
-    .content.limit-width {
+    .shell-content.limit-width {
       width: 100%;
       grid-template-columns: 2fr 5fr 2fr;
     }
   }
+
+  .shell-content {
+    :global {
+      .shell-main {
+        width: 100%;
+        grid-area: main;
+        background-color: var(--color-slate-50);
+        border-left: 1px solid var(--color-slate-200);
+        border-right: 1px solid var(--color-slate-200);
+        padding-bottom: calc(var(--spacing) * 22);
+        z-index: 0;
+
+        @variant dark {
+          background-color: var(--color-zinc-925);
+          border-left: 1px solid var(--color-zinc-900);
+          border-right: 1px solid var(--color-zinc-900);
+        }
+
+        @variant md {
+          padding-bottom: calc(var(--spacing) * 6);
+        }
+      }
+
+      .shell-aside {
+        display: none;
+        position: sticky;
+        top: 0;
+        left: 0;
+        background-color: var(--color-slate-100);
+        z-index: 40;
+        width: 100%;
+
+        @variant dark {
+          background-color: var(--color-zinc-950);
+        }
+      }
+
+      .shell-sidebar {
+        grid-area: sidebar;
+        width: 100% !important;
+        @variant md {
+          display: flex;
+          top: calc(var(--spacing) * 16);
+          max-height: calc(100vh - 4rem);
+        }
+      }
+
+      .shell-suffix {
+        grid-area: suffix;
+        @variant lg {
+          display: flex;
+          top: calc(var(--spacing) * 16);
+          max-height: calc(100vh - 4rem);
+        }
+      }
+    }
+  }
 </style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9aab914f..857542fe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -92,7 +92,6 @@
     this={settings.infiniteScroll && !settings.posts.noVirtualize
       ? 'noscript'
       : 'div'}
-    class="mt-auto flex flex-col"
   >
     <Pageination
       cursor={{ next: feed.next_page }}