diff --git a/components/hero.jsx b/components/hero.jsx
index f684294..b46a4cb 100644
--- a/components/hero.jsx
+++ b/components/hero.jsx
@@ -2,16 +2,20 @@ import Wave from "@/components/wave";
 
 export default function Hero({ children, title }) {
   return (
-    <div className="md:text-left text-center hero">
-      <div className="container mx-auto px-2">
-        {title ? (
-          <h1 className="mb-2 md:mb-5 lg:text-5xl text-4xl font-bold text-center">
-            {title}
-          </h1>
-        ) : null}
-        {children}
+    <div>
+      <div className="md:text-left text-center hero">
+        <div className="container mx-auto px-2">
+          {title ? (
+            <h1 className="mb-2 md:mb-5 lg:text-5xl text-4xl font-bold text-center">
+              {title}
+            </h1>
+          ) : null}
+          {children}
+        </div>
+        <div className="absolute bottom-0 w-full">
+          <Wave />
+        </div>
       </div>
-      <Wave></Wave>
     </div>
   );
 }
diff --git a/pages/index.jsx b/pages/index.jsx
index 755b6f9..a9d8429 100644
--- a/pages/index.jsx
+++ b/pages/index.jsx
@@ -6,8 +6,6 @@ import Layout from "@/components/layout";
 import SponsorSection from "@/components/sponsorSection";
 import CompanySection from "@/components/companySection";
 import Timeline from "@/components/timeline";
-import Wave from "@/components/wave";
-import Wave180 from "@/components/wave180";
 import CommunityImages from "@/components/communityImages";
 import loadStaticData from "@/shared/static";
 import Image from "next/image";
diff --git a/styles/globals.css b/styles/globals.css
index ad15874..568aa0f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -17,6 +17,10 @@
       #3e9644 303.75deg,
       #896ae4 387.03deg
     );
+  padding-top: 10%;
+  padding-bottom: 20%;
+  margin-bottom: 6%;
+  height: 90vh;
 }
 
 .gradient-text {