diff --git a/src/components/Header/Header.svelte b/src/components/Header/Header.svelte
index 55b30bf5..1f5a6ede 100644
--- a/src/components/Header/Header.svelte
+++ b/src/components/Header/Header.svelte
@@ -7,7 +7,7 @@
   let isNavOpen = false;
 </script>
 
-<div class="freq-container fixed top-0 flex items-center justify-between pt-[12px]">
+<div class="freq-container fixed top-0 z-50 flex items-center justify-between bg-cream pt-[12px]">
   <img src={Logo} alt="Logo" class="mr-3 sm:w-[140px] md:w-[180px] lg:w-[210px]" />
 
   <!-- For Desktop -->
diff --git a/src/components/Sections/Section1.svelte b/src/components/Sections/Section1.svelte
new file mode 100644
index 00000000..1dfc441e
--- /dev/null
+++ b/src/components/Sections/Section1.svelte
@@ -0,0 +1,7 @@
+<script>
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="section1">
+  <h2>Build at a higher Frequency</h2>
+</SectionWrapper>
diff --git a/src/components/Sections/Section2.svelte b/src/components/Sections/Section2.svelte
new file mode 100644
index 00000000..254a22d9
--- /dev/null
+++ b/src/components/Sections/Section2.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="section2" classes="bg-yellow">
+  <h2>Taking Back Control</h2>
+</SectionWrapper>
diff --git a/src/components/Sections/Section3.svelte b/src/components/Sections/Section3.svelte
new file mode 100644
index 00000000..8f6b5f59
--- /dev/null
+++ b/src/components/Sections/Section3.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="section3" classes="bg-teal">
+  <h2>Take Your Content & Relationships With You</h2>
+</SectionWrapper>
diff --git a/src/components/Sections/Section4.svelte b/src/components/Sections/Section4.svelte
new file mode 100644
index 00000000..c30ffb87
--- /dev/null
+++ b/src/components/Sections/Section4.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="section4" classes="bg-purple">
+  <h2>Publicly Vote for Your Preferred Apps</h2>
+</SectionWrapper>
diff --git a/src/components/Sections/Section5.svelte b/src/components/Sections/Section5.svelte
new file mode 100644
index 00000000..6eb0ed56
--- /dev/null
+++ b/src/components/Sections/Section5.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import SectionWrapper from './SectionWrapper.svelte';
+</script>
+
+<SectionWrapper id="section5" classes="bg-orange">
+  <h2>The Core of Our Technology</h2>
+</SectionWrapper>
diff --git a/src/components/Sections/SectionNavigation.svelte b/src/components/Sections/SectionNavigation.svelte
new file mode 100644
index 00000000..1edf2a87
--- /dev/null
+++ b/src/components/Sections/SectionNavigation.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let section: number;
+</script>
+
+<div class="freq-container absolute right-0 w-[50vw] justify-between pl-0 pt-[32px] sm:hidden md:hidden lg:flex">
+  {#each { length: 5 } as _, i}
+    <button
+      on:click={() => (section = i + 1)}
+      class={`text-lg transition-opacity duration-700	 ${section === i + 1 ? 'opacity-100' : 'opacity-25'}`}
+      >.0{i + 1}</button
+    >
+  {/each}
+</div>
diff --git a/src/components/Sections/SectionWrapper.svelte b/src/components/Sections/SectionWrapper.svelte
new file mode 100644
index 00000000..a2597d6d
--- /dev/null
+++ b/src/components/Sections/SectionWrapper.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let id = '';
+  export let classes = '';
+</script>
+
+<div {id} class={`w-[100vw] min-w-[100vw] ${classes}`}>
+  <slot />
+</div>
diff --git a/src/components/Sections/Sections.svelte b/src/components/Sections/Sections.svelte
new file mode 100644
index 00000000..ee79e2df
--- /dev/null
+++ b/src/components/Sections/Sections.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let scrollPosition: number;
+  export let isLastSection: boolean;
+
+  const handleWheel = (event: WheelEvent) => {
+    if (!isLastSection || event.deltaY < 0) event.preventDefault();
+    scrollPosition = event.deltaY;
+  };
+</script>
+
+<!-- For Mobile and Short -->
+<div class="sm:block md:block lg:hidden short:block">
+  <slot />
+</div>
+
+<!-- For Desktop -->
+<div
+  id="scroll-container"
+  class="h-[500px] flex-nowrap overflow-hidden sm:hidden md:hidden lg:flex short:hidden"
+  on:wheel={handleWheel}
+>
+  <slot />
+</div>
diff --git a/src/lib/assets/Exit.svg b/src/lib/assets/Exit.svg
deleted file mode 100644
index a9f1f7bc..00000000
--- a/src/lib/assets/Exit.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="57" height="57" viewBox="0 0 57 57" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <rect width="57" height="4" fill="#544974" transform="rotate(-45 55 16)"/>
-    <rect y="13" width="57" height="4" fill="#544974" transform="rotate(45 15 16)"/>
-</svg>
diff --git a/src/lib/assets/Menu.svg b/src/lib/assets/Menu.svg
deleted file mode 100644
index e21d6f05..00000000
--- a/src/lib/assets/Menu.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="57" height="17" viewBox="0 0 57 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="57" height="4" fill="#544974"/>
-<rect y="13" width="57" height="4" fill="#544974"/>
-</svg>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 80eba191..893239e5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div>
-  <div class="max-w-page mt-[27px] min-h-[calc(100vh-50px)] w-[100vw]">
+  <div class="max-w-page my-[30px] min-h-[calc(100vh-145px)] w-[100vw]">
     <Header />
     <slot />
   </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7e39d921..b68db2bc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,63 @@
-<script>
-  import { add } from '$lib';
-  const _x = add(1, 2);
+<script lang="ts">
+  import SectionNavigation from '../components/Sections/SectionNavigation.svelte';
+  import Sections from '../components/Sections/Sections.svelte';
+  import Section1 from '../components/Sections/Section1.svelte';
+  import Section2 from '../components/Sections/Section2.svelte';
+  import Section3 from '../components/Sections/Section3.svelte';
+  import Section4 from '../components/Sections/Section4.svelte';
+  import Section5 from '../components/Sections/Section5.svelte';
+
+  let SECTION_COUNT = 5;
+
+  let section = 1;
+  let prevSection = 1;
+  let scrollPosition = 0;
+
+  $: {
+    // TODO: Fix bug when resizing the window.
+    const scrollContainer = document.getElementById('scroll-container');
+    const spaceBetween = section - prevSection;
+    scrollContainer?.scrollBy({
+      left: window.innerWidth * spaceBetween,
+      behavior: 'smooth',
+    });
+    prevSection = section;
+  }
+
+  let timeoutId: number | null = null;
+  const throttle = (v: () => void) => {
+    if (timeoutId === null) {
+      timeoutId = setTimeout(() => {
+        timeoutId = null;
+      }, 100) as unknown as number;
+      v();
+      return;
+    }
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+    }, 100) as unknown as number;
+  };
+
+  $: {
+    throttle(() => {
+      if (scrollPosition > 0 && section < SECTION_COUNT) {
+        section++;
+      } else if (scrollPosition < 0 && section > 1) {
+        section--;
+      }
+      scrollPosition = 0;
+    });
+  }
 </script>
 
-<h1 class="text-xl">Welcome</h1>
-<p>Coming soon...</p>
+<div class="relative">
+  <Sections bind:scrollPosition isLastSection={section === SECTION_COUNT}>
+    <Section1 />
+    <Section2 />
+    <Section3 />
+    <Section4 />
+    <Section5 />
+  </Sections>
+  <SectionNavigation bind:section />
+</div>
diff --git a/src/style/app.css b/src/style/app.css
index 99960b4a..7a1831fa 100644
--- a/src/style/app.css
+++ b/src/style/app.css
@@ -43,7 +43,7 @@
 
 @layer base {
   body {
-    @apply my-[40px] flex flex-col items-center bg-cream text-base text-black;
+    @apply mt-[67px] flex flex-col items-center scroll-smooth bg-cream text-base text-black;
   }
 
   button {
diff --git a/tailwind.config.js b/tailwind.config.js
index 80b90809..cb95c6d1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -43,6 +43,7 @@ export default {
       sm: '0px',
       md: '900px',
       lg: '1300px',
+      short: { raw: '(max-height: 700px)' },
     },
   },
 };
diff --git a/tests/test.ts b/tests/test.ts
index 5328bd12..e73b7a82 100644
--- a/tests/test.ts
+++ b/tests/test.ts
@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-test('index page has expected h1', async ({ page }) => {
+test('index page has expected content', async ({ page }) => {
   await page.goto('/');
-  await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible();
+  await expect(page.getByText('Build at a higher Frequency')).toBeDefined();
 });