diff --git a/Dockerfile b/Dockerfile
index 3522770..9909539 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -22,7 +22,7 @@ WORKDIR /app
 COPY --from=prod-deps /app/node_modules /app/node_modules
 COPY --from=build /app/dist /app/dist
 
-LABEL version="2.20.1"
+LABEL version="2.21.0"
 LABEL description="Astro based personal website"
 
 ENV HOST=0.0.0.0
diff --git a/package.json b/package.json
index 9f824fb..b7b8d72 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "site-profile",
   "type": "module",
-  "version": "2.20.1",
+  "version": "2.21.0",
   "homepage": "https://www.alexlebens.dev",
   "bugs": {
     "url": "https://gitea.alexlebens.dev/alexlebens/site-profile/issues",
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 3ff9066..20bc9f8 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -68,79 +68,51 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
     />
   </head>
 
-  <body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-x-hidden">
+  <body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-hidden">
 
     <!-- Sliding backgrounds -->
     <div class="bg"/>
     <div class="bg bg2"/>
     <div class="bg bg3"/>
 
-    <!-- Layout -->
-    <div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
+    <!-- Fixed header -->
+    <Header />
 
-      <Header />
+    <!-- Content -->
+    <div class="mask-container w-screen h-screen overflow-y-auto overflow-x-hidden">
+      <main class="pt-20">
 
-      <main class="has-js scroll-fade-container min-h-screen">
         <slot />
+
+        <Footer />
+        
       </main>
-
     </div>
 
-    <Footer />
-
   </body>
 </html>
 
-<script>
-  document.addEventListener('astro:page-load', () => {
-    let ticking = false;
-    const onScroll = () => {
-      if (!ticking) {
-        window.requestAnimationFrame(() => {
-          document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
-          ticking = false;
-        });
-        ticking = true;
-      }
-    };
-
-    window.addEventListener('scroll', onScroll, { passive: true });
-    
-    onScroll();
-
-    document.documentElement.classList.add('has-js');
-
-    document.addEventListener('astro:before-swap', () => {
-      window.removeEventListener('scroll', onScroll);
-    }, { once: true });
-  });
-</script>
-
 <style>
   /* Fade away content below header when scrolling */
-  .has-js .scroll-fade-container {
+  .mask-container {
     -webkit-mask-image: linear-gradient(
       to bottom,
       transparent 0px,
-      transparent 16px,
-      black 80px,
+      transparent 90px,
+      black 140px,
       black 100%
     );
 
     mask-image: linear-gradient(
       to bottom,
       transparent 0px,
-      transparent 16px,
-      black 60px,
+      transparent 90px,
+      black 140px,
       black 100%
     );
 
     -webkit-mask-size: 100vw 100vh;
     -webkit-mask-repeat: no-repeat;
-
-    -webkit-mask-position-y: var(--scroll-offset);
-    mask-position-y: var(--scroll-offset);
-    will-change: mask-position;
   }
 
   /* Background that creates the "glimmer" effect */
