diff --git a/src/web/src/app/page.jsx b/src/web/src/app/page.jsx
index 38f7071..dc253a1 100644
--- a/src/web/src/app/page.jsx
+++ b/src/web/src/app/page.jsx
@@ -1,11 +1,11 @@
 // Imports
+import { HeroSection1, HeroSection2, HeroSection3 } from "@/components/hero";
 
 // Metadata
 
 // Exports
 export default function Index() {
   return (
-    <div> 
-    </div>
+    <div></div>
   );
 }
diff --git a/src/web/src/components/hero.jsx b/src/web/src/components/hero.jsx
new file mode 100644
index 0000000..6d11895
--- /dev/null
+++ b/src/web/src/components/hero.jsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { motion, AnimatePresence } from "framer-motion";
+import { useState, useEffect } from "react";
+
+function HeroSection1() {
+
+}
+
+function HeroSection2() {
+
+}
+
+function HeroSection3() {
+
+}
+
+export default function () {
+  HeroSection1,
+  HeroSection2,
+  HeroSection3
+}