diff --git a/apps/webapp/src/components/HomePage/HomePage.css.ts b/apps/webapp/src/components/HomePage/HomePage.css.ts
index 75e49e9b..7714606e 100644
--- a/apps/webapp/src/components/HomePage/HomePage.css.ts
+++ b/apps/webapp/src/components/HomePage/HomePage.css.ts
@@ -6,7 +6,7 @@ export const container = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  minHeight: '100%',
+  flex: 1,
 
   '@media': {
     [responsive.m]: {
diff --git a/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts b/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts
index 42fbce19..297268f5 100644
--- a/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts
+++ b/apps/webapp/src/features/auth/components/AuthLayout/AuthLayout.css.ts
@@ -6,7 +6,7 @@ export const container = style({
   display: 'flex',
   // Gradient is indigo-500, quite transparent
   background: `linear-gradient(143deg, rgba(99, 102, 241, 0) 70%, rgba(99, 102, 241, 0.2) 100%);`,
-  height: '100%',
+  flex: 1,
 })
 
 export const formSide = style({
diff --git a/apps/webapp/src/renderer/PageShell.css.ts b/apps/webapp/src/renderer/PageShell.css.ts
index 530613e2..5f2a65cb 100644
--- a/apps/webapp/src/renderer/PageShell.css.ts
+++ b/apps/webapp/src/renderer/PageShell.css.ts
@@ -1,20 +1,31 @@
 import { style } from '@vanilla-extract/css'
 
-import { responsive } from '#/styles/theme.css'
+import { responsive, vars, zIndex } from '#/styles/theme.css'
 
-export const pageContainer = style({
-  display: 'grid',
-  gridTemplateRows: 'min-content 1fr',
-  gridTemplateColumns: 'min-content 1fr',
-  height: '100vh',
-})
+const NAVBAR_HEIGHT_REM = 4.5
+const NAVBAR_HEIGHT_MOBILE_REM = 5
+const SIDEBAR_WIDTH_REM = 6
 
 export const header = style({
-  gridArea: '1 / 2 / 2 / 3',
+  position: 'fixed',
+  top: 0,
+  left: `${SIDEBAR_WIDTH_REM}rem`,
+  right: 0,
+  background: vars.color.pageBackground,
+  zIndex: zIndex.layout.header,
+
+  '@media': {
+    [responsive.m]: {
+      left: 0,
+    },
+  },
 })
 
 export const nav = style({
-  gridArea: '1 / 1 / 3 / 2',
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
 
   '@media': {
     [responsive.m]: {
@@ -24,6 +35,16 @@ export const nav = style({
 })
 
 export const main = style({
-  gridArea: '2 / 2 / 3 / 3',
-  overflow: 'auto',
+  paddingTop: `${NAVBAR_HEIGHT_REM}rem`,
+  paddingLeft: `${SIDEBAR_WIDTH_REM}rem`,
+  minHeight: '100vh',
+  display: 'flex',
+  flexDirection: 'column',
+
+  '@media': {
+    [responsive.m]: {
+      paddingLeft: 0,
+      paddingTop: `${NAVBAR_HEIGHT_MOBILE_REM}rem`,
+    },
+  },
 })
diff --git a/apps/webapp/src/renderer/PageShell.tsx b/apps/webapp/src/renderer/PageShell.tsx
index 6d7fccd1..bc17a66f 100644
--- a/apps/webapp/src/renderer/PageShell.tsx
+++ b/apps/webapp/src/renderer/PageShell.tsx
@@ -33,7 +33,7 @@ export function PageShell({
               <AuthenticatedUserProvider>
                 <TooltipProvider>
                   <ToastProvider>
-                    <div className={s.pageContainer}>
+                    <div>
                       <Header className={s.header} />
                       <NavSidebar className={s.nav} />
                       <main className={s.main}>{children}</main>