diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index dc22aa5..ca67335 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,4 +1,27 @@
-<!--<div class="bg-bkg h-full w-full grid grid-cols-6 grid-rows-6">
+---
+import SinglePage from "../layouts/SinglePage.astro"
+---
+<SinglePage>
+<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
+    <div class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 h-full p-2 sm:p-6">
+        <!-- Hero Image -->
+        <div class="w-full flex justify-center mt-20">
+            <img src="/temp.jpg" alt="" class="rounded-full"> <!-- https://loremflickr.com/g/200/200/cat,girl/all?lock=135 -->
+        </div>
+        <!-- Hero Text -->
+        <div class="mt-[6rem]">
+            <h1 class="text-accent text-4xl w-full text-center font-extrabold">Lorem Ipsum</h1>
+            <h2 class="text-content text-lg w-full text-center mt-[3.2rem]">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A suscipit facilis doloribus, dicta cupiditate sint nisi ad explicabo cumque dolorem quaerat hic aliquid. Iste quia aspernatur nam distinctio, animi dolorum?</h2>
+        </div>
+        <!-- Call action buttons -->
+        <div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
+            <button type="button" class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2">Lorem</button>
+            <button type="button" class="text-2xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content ">ipsum dolor</button>
+        </div>
+    </div>
+</div>
+</SinglePage>
+{/* <div class="bg-bkg h-full w-full grid grid-cols-6 grid-rows-6">
     <div class="col-start-1 lg:col-start-2 col-end-5 row-start-2 row-end-4 z-20 bg-bkg/80 p-2 rounded-lg">
         <h1 class="text-4xl text-accent">Lorem Ipsum</h1>
         <h2 class="text-primary">Dolor sit amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio  amet Et non saepe harum corrupti dicta. Placeat dignissimos quia atque velit distinctio consequatur aut. </h2>
@@ -8,22 +31,4 @@
     </div>
 
     <div class="hidden bg-pink-200 col-start-2 col-end-6 row-start-2 row-end-6 z-40"></div>
-</div>-->
-<div class="bg-bkg h-full w-full sm:grid sm:grid-cols-6 lg:grid-cols-12">
-    <div class="sm:col-start-2 sm:col-end-6 lg:col-start-3 lg:col-end-11 2xl:col-start-4 2xl:col-end-10 h-full p-2 sm:p-6">
-        <!-- Hero Image -->
-        <div class="w-full flex justify-center mt-20">
-            <img src="/temp.jpg" alt="" class="rounded-full"> <!-- https://loremflickr.com/g/200/200/cat,girl/all?lock=135 -->
-        </div>
-        <!-- Hero Text -->
-        <div class="mt-[6rem]">
-            <h1 class="text-accent text-4xl w-full text-center font-extrabold">Lorem Ipsum</h1>
-            <h2 class="text-content text-md w-full text-center mt-[3.2rem]">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A suscipit facilis doloribus, dicta cupiditate sint nisi ad explicabo cumque dolorem quaerat hic aliquid. Iste quia aspernatur nam distinctio, animi dolorum?</h2>
-        </div>
-        <!-- Call action buttons -->
-        <div class="mt-[5.5rem] w-full grid justify-around grid-cols-2">
-            <button type="button" class="text-3xl bg-accent text-bkg p-1 rounded-md bg-opacity-75 hover:bg-opacity-100 m-2">Lorem</button>
-            <button type="button" class="text-xl m-2 bg-secondary/60 rounded-md p-1 hover:bg-secondary text-content ">ipsum dolor</button>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+</div>- */}
\ No newline at end of file
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 5778316..290efeb 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -4,15 +4,17 @@ import Navbar from "../components/Navbar.astro";
 import "../style/index.css";
 ---
 <!DOCTYPE html>
-<html lang={lang} data-theme={themeOverride ? themeOverride : undefined}>
+<html lang={lang} data-theme={themeOverride ? themeOverride : undefined} class="overflow-hidden">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content={description}>
     <title>{title}</title>
 </head>
-<body class="bg-bkg h-dvh w-full">
+<body class="bg-bkg h-dvh w-full overflow-hidden">
     <!--<Navbar /> -->
-    <slot/>
+    <div class="snap-mandatory snap-y">
+        <slot />
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/layouts/SinglePage.astro b/src/layouts/SinglePage.astro
new file mode 100644
index 0000000..dc20038
--- /dev/null
+++ b/src/layouts/SinglePage.astro
@@ -0,0 +1,3 @@
+<div class="snap-center w-screen h-screen">
+	<slot />
+</div>
\ No newline at end of file
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
index 1ba375c..6c1a13e 100644
--- a/src/pages/[lang]/index.astro
+++ b/src/pages/[lang]/index.astro
@@ -14,4 +14,6 @@ export async function getStaticPaths() {
 ---
 <MainLayout title={title} description={description} lang={Astro.currentLocale} themeOverride="dark">
   <Hero />
+  <Hero />
+  <Hero />
 </MainLayout>
\ No newline at end of file
