diff --git a/src/component/HeroSection.js b/src/component/HeroSection.js
index b177bf3..27b17bf 100644
--- a/src/component/HeroSection.js
+++ b/src/component/HeroSection.js
@@ -7,6 +7,7 @@ import HeroImg from "../image/hero-img.PNG";
 import { Button as MuiButton } from "@mui/material";
 import { Box } from "@mui/material";
 import { Link } from "react-router-dom";
+import Wave from "../image/waves/heroSection.svg";
 
 const Title = styled(Typography)({
   color: "#226a49",
@@ -15,24 +16,33 @@ const Title = styled(Typography)({
   fontSize: "clamp(2rem, 6vw, 6.2rem)",
 });
 
+const WaveImg = styled("img")({
+  width: "100%",
+  height: "auto",
+  position: "absolute",
+  bottom: "-3rem",
+  left: "0",
+});
+
 export default function HeroSection() {
   return (
     <Container
       id="hs"
-      maxWidth="xl"
+      maxWidth="xxl"
       sx={{
+        position: "relative",
         height: { sm: "100%" },
         minHeight: { xs: "100%", sm: "100%", md: "100vh" },
         display: "flex",
         flexDirection: { xs: "column-reverse", sm: "row" },
         justifyContent: "space-between",
         alignItem: "center",
-        gap: { xs: "0", sm: "5vw", md: "5vw" },
+        gap: { xs: "5vw", sm: "5vw", md: "5vw" },
         width: "100%",
         padding: {
-          xs: "5rem 5vw 5rem 5vw",
-          sm: "8rem 5vw 5rem 5vw",
-          md: "10rem 5vw 5rem 5vw",
+          xs: "6rem 5vw 5rem 5vw",
+          sm: "7rem 5vw 6rem 5vw",
+          md: "6rem 15vw 5rem 15vw",
         },
         textAlign: "center",
       }}
@@ -69,8 +79,9 @@ export default function HeroSection() {
                 sm: "clamp(1.3rem, 1.3vw, 3rem)",
                 md: "clamp(1.5rem, 1.3vw, 3rem)",
               },
-              margin: "-1rem 0 0 0",
+              margin: {xs:"-1rem 0 0 0",sm:"-1.5rem 0 0 0",md:"-2rem 0 0 0"},
               fontWeight: "bold",
+              color: "#458d43",
             }}
           >
             Bag The Future Responsibly
@@ -91,8 +102,8 @@ export default function HeroSection() {
           <MuiButton
             style={{
               width: "max-content",
-              padding: "1rem 2rem",
-              fontSize: "clamp(1rem, 1vw, 2rem)",
+              padding: ".5rem 1rem",
+              fontSize: "clamp(.7rem, 1vw, 2rem)",
               margin: "0 auto",
               border: "none",
               borderRadius: ".5rem",
@@ -135,6 +146,15 @@ export default function HeroSection() {
           }}
         />
       </Box>
+      <WaveImg
+        src={Wave}
+        alt="Wave for next component. This will give a nice transition."
+        sx={{
+          position: {xs:"absolute"},
+          bottom: {xs:"-0.3rem",m:"23.5rem", md: "-3rem" },
+          left: { xs:"0",m:"0", md: "0" },
+        }}
+      />
     </Container>
   );
 }
diff --git a/src/component/ProblemStatement.js b/src/component/ProblemStatement.js
index b439a4b..990d53c 100644
--- a/src/component/ProblemStatement.js
+++ b/src/component/ProblemStatement.js
@@ -88,10 +88,10 @@ const ProblemBodyText = styled(Typography)({
 
 const ProblemImage = styled("img")({
   width: "100%",
-  aspectRatio: "5/4",
+  // aspectRatio: "5/4",
   objectFit: "content",
   "@media (min-width:600px)": {
-    width: "40%",
+    width: "30%",
   },
   "@media (max-width:600px)": {
     "&:nth-child(odd)": {
diff --git a/src/image/our_Story.PNG b/src/image/our_Story.PNG
new file mode 100644
index 0000000..3532e4c
Binary files /dev/null and b/src/image/our_Story.PNG differ
diff --git a/src/image/waves/heroSection.svg b/src/image/waves/heroSection.svg
new file mode 100644
index 0000000..aaff41d
--- /dev/null
+++ b/src/image/waves/heroSection.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 160" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(34, 106, 73, 1)" offset="0%"/><stop stop-color="rgba(34, 106, 73, 1)" offset="100%"/></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,32L40,26.7C80,21,160,11,240,16C320,21,400,43,480,64C560,85,640,107,720,104C800,101,880,75,960,56C1040,37,1120,27,1200,32C1280,37,1360,59,1440,80C1520,101,1600,123,1680,125.3C1760,128,1840,112,1920,109.3C2000,107,2080,117,2160,106.7C2240,96,2320,64,2400,61.3C2480,59,2560,85,2640,93.3C2720,101,2800,91,2880,96C2960,101,3040,123,3120,130.7C3200,139,3280,133,3360,109.3C3440,85,3520,43,3600,32C3680,21,3760,43,3840,64C3920,85,4000,107,4080,114.7C4160,123,4240,117,4320,98.7C4400,80,4480,48,4560,48C4640,48,4720,80,4800,85.3C4880,91,4960,69,5040,61.3C5120,53,5200,59,5280,69.3C5360,80,5440,96,5520,85.3C5600,75,5680,37,5720,18.7L5760,0L5760,160L5720,160C5680,160,5600,160,5520,160C5440,160,5360,160,5280,160C5200,160,5120,160,5040,160C4960,160,4880,160,4800,160C4720,160,4640,160,4560,160C4480,160,4400,160,4320,160C4240,160,4160,160,4080,160C4000,160,3920,160,3840,160C3760,160,3680,160,3600,160C3520,160,3440,160,3360,160C3280,160,3200,160,3120,160C3040,160,2960,160,2880,160C2800,160,2720,160,2640,160C2560,160,2480,160,2400,160C2320,160,2240,160,2160,160C2080,160,2000,160,1920,160C1840,160,1760,160,1680,160C1600,160,1520,160,1440,160C1360,160,1280,160,1200,160C1120,160,1040,160,960,160C880,160,800,160,720,160C640,160,560,160,480,160C400,160,320,160,240,160C160,160,80,160,40,160L0,160Z"/></svg>
\ No newline at end of file