diff --git a/web/src/components/Footer.tsx b/web/src/components/Footer.tsx
index cb4221a9..d1d870b7 100644
--- a/web/src/components/Footer.tsx
+++ b/web/src/components/Footer.tsx
@@ -1,7 +1,12 @@
 import { FaFacebook, FaInstagram } from "react-icons/fa";
 import peacockLogo from "../assets/peacock-logo.png";
 import whiteName from "../assets/auis_white.png";
-import { FacebookLink, InstagramLink, LinkedinLink, githubLink } from "../data/data";
+import {
+  FacebookLink,
+  InstagramLink,
+  LinkedinLink,
+  githubLink,
+} from "../data/data";
 import { AiOutlineGithub, AiOutlineLinkedin } from "react-icons/ai";
 
 const Footer = () => {
diff --git a/web/src/components/Hero.tsx b/web/src/components/Hero.tsx
new file mode 100644
index 00000000..73d50683
--- /dev/null
+++ b/web/src/components/Hero.tsx
@@ -0,0 +1,31 @@
+import auisLogo from "../assets/peacock.png";
+import auisAbbrev from "../assets/AUIS_black 3.png";
+
+export default function Hero() {
+  return (
+    <>
+      <div className=" min-h-[calc(100vh-70px)] bg-gradient-to-br from-orange-500 to-orange-50">
+        <div className="p-4 flex-row">
+          <div className="grid grid-cols-1 md:grid-cols-2 place-items-center">
+            <div className="grid grid-rows-3 place-items-center">
+              <img
+                src={auisAbbrev}
+                alt="AUIS logo"
+                className="h-auto max-w-lg rounded-lg"
+              />
+              <p className="py: text-3xl text-black text-center font-bold justify-self-stretch pt-6">
+                Not a member?
+              </p>
+              <div className="btn text-red-50 justify-self-stretch">
+                Sign-Up
+              </div>
+            </div>
+            <div>
+              <img src={auisLogo} alt="AUIS logo" className="ml-70" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/web/src/screens/HomeScreen.tsx b/web/src/screens/HomeScreen.tsx
index c87e96ac..a45ed11e 100644
--- a/web/src/screens/HomeScreen.tsx
+++ b/web/src/screens/HomeScreen.tsx
@@ -1,29 +1,9 @@
-import auisLogo from "../assets/peacock.png";
-import auisAbbrev from "../assets/AUIS_black 3.png";
-
+import Hero from "@components/Hero";
 
 export default function HomeScreen() {
   return (
     <div>
-      <div className="min-h-[calc(100%)] bg-gradient-to-br from-orange-500 to-orange-50">
-        <div className="p-4 flex-row">
-          <div className="grid grid-cols-1 md:grid-cols-2 place-items-center">
-            <div className="grid grid-rows-3 place-items-center">
-              <img src={auisAbbrev} alt="AUIS logo" className="h-auto max-w-lg rounded-lg" />
-              <p className="py: text-3xl text-black text-center font-bold justify-self-stretch pt-6">
-                Not a member?
-              </p>
-              <div className="btn text-red-50 justify-self-stretch">
-                Sign-Up
-              </div>
-            </div>
-
-            <div>
-              <img src={auisLogo} alt="AUIS logo" className="ml-70" />
-            </div>
-          </div>
-        </div>
-      </div>
+      <Hero/>
     </div>
   );
 }