diff --git a/src/component/Footer.js b/src/component/Footer.js
index f98a3d4..0b24e59 100644
--- a/src/component/Footer.js
+++ b/src/component/Footer.js
@@ -134,7 +134,7 @@ export default function Footer() {
   };
 
   return (
-    <StyledContainer maxWidth={false}>
+    <StyledContainer maxWidth={false} id="f">
       <UpperFooter>
         <LogoSide>
           <Box sx={{ width: { xs: "100%", sm: "60%" } }}>
diff --git a/src/component/Header.js b/src/component/Header.js
index 5dc5de5..799f571 100644
--- a/src/component/Header.js
+++ b/src/component/Header.js
@@ -28,9 +28,9 @@ function Header() {
   const scrollToSection = (sectionId) => {
     const sectionElement = document.getElementById(sectionId);
     const offset = 128;
-    if (globalThis.location.pathname === '/') {
-      if (sectionId === '') {
-        globalThis.location.href = '/';
+    if (globalThis.location.pathname === "/") {
+      if (sectionId === "") {
+        globalThis.location.href = "/";
       } else if (sectionElement) {
         const targetScroll = sectionElement.offsetTop - offset;
         sectionElement.scrollIntoView({ behavior: "smooth" });
@@ -41,194 +41,230 @@ function Header() {
         setOpen(false);
       }
     } else {
-      if (sectionId === ' ') {
-        globalThis.location.href = '/';
+      if (sectionId === " ") {
+        globalThis.location.href = "/";
       } else {
-        globalThis.location.href = '/#' + sectionId;
+        globalThis.location.href = "/#" + sectionId;
       }
     }
   };
-  
 
   return (
-    <div >
-      <AppBar
-        position="fixed"
-        sx={{
-          boxShadow: 0,
-          bgcolor: "transparent",
-          backgroundImage: "none",
-          mt: 2,
-          width: "100%",
-        }}
-      >
-        <Container maxWidth="xl">
-          <Toolbar
-            variant="regular"
-            sx={(theme) => ({
+    <AppBar
+      position="fixed"
+      sx={{
+        boxShadow: 0,
+        bgcolor: "transparent",
+        backgroundImage: "none",
+        mt: 2,
+        width: "100%",
+      }}
+    >
+      <Container maxWidth="xl">
+        <Toolbar
+          variant="regular"
+          sx={(theme) => ({
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexShrink: 0,
+            borderRadius: ".5rem",
+            bgcolor:
+              theme.palette.mode === "light"
+                ? "rgba(255, 255, 255, 0.4)"
+                : "rgba(0, 0, 0, 0.4)",
+            backdropFilter: "blur(24px)",
+            maxHeight: 40,
+            border: "1px solid",
+
+            boxShadow:
+              theme.palette.mode === "light"
+                ? `0 0 1px rgba(85, 166, 246, 0.1), 1px 1.5px 2px -1px rgba(85, 166, 246, 0.15), 4px 4px 12px -2.5px rgba(85, 166, 246, 0.15)`
+                : "0 0 1px rgba(2, 31, 59, 0.7), 1px 1.5px 2px -1px rgba(2, 31, 59, 0.65), 4px 4px 12px -2.5px rgba(2, 31, 59, 0.65)",
+          })}
+        >
+          <Box
+            sx={{
+              flexGrow: 1,
               display: "flex",
               alignItems: "center",
-              justifyContent: "space-between",
-              flexShrink: 0,
-              borderRadius: ".5rem",
-              bgcolor:
-                theme.palette.mode === "light"
-                  ? "rgba(255, 255, 255, 0.4)"
-                  : "rgba(0, 0, 0, 0.4)",
-              backdropFilter: "blur(24px)",
-              maxHeight: 40,
-              border: "1px solid",
-
-              boxShadow:
-                theme.palette.mode === "light"
-                  ? `0 0 1px rgba(85, 166, 246, 0.1), 1px 1.5px 2px -1px rgba(85, 166, 246, 0.15), 4px 4px 12px -2.5px rgba(85, 166, 246, 0.15)`
-                  : "0 0 1px rgba(2, 31, 59, 0.7), 1px 1.5px 2px -1px rgba(2, 31, 59, 0.65), 4px 4px 12px -2.5px rgba(2, 31, 59, 0.65)",
-            })}
+              ml: "-18px",
+              margin: "20px",
+              px: 0,
+            }}
           >
-            <Box
-              sx={{
-                flexGrow: 1,
-                display: "flex",
-                alignItems: "center",
-                ml: "-18px",
-                margin: "20px",
-                px: 0,
-              }}
-            >
-              <img src={LogoImg} style={logoStyle} alt="EcoThaili" onClick={() => scrollToSection("ms")} />
-              <Box
-                sx={{ display: { xs: "none", md: "flex", margin: "100px" } }}
+            <img
+              src={LogoImg}
+              style={logoStyle}
+              alt="EcoThaili"
+              onClick={() => scrollToSection("ms")}
+            />
+            <Box sx={{ display: { xs: "none", md: "flex", margin: "100px" } }}>
+              <MenuItem
+                onClick={() => scrollToSection("os")}
+                sx={{ py: "6px", px: "12px" }}
               >
-                <MenuItem
-                  onClick={() => scrollToSection("os")}
-                  sx={{ py: "6px", px: "12px" }}
+                <Typography
+                  variant="body2"
+                  color="#123648"
+                  fontWeight="600"
+                  fontSize="clamp(.8rem, 1vw, 1rem)"
                 >
-                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
-                    Our Story
-                  </Typography>
-                </MenuItem>
-                <MenuItem
-                  onClick={() => scrollToSection("pwas")}
-                  sx={{ py: "6px", px: "12px" }}
+                  Our Story
+                </Typography>
+              </MenuItem>
+              <MenuItem
+                onClick={() => scrollToSection("pwas")}
+                sx={{ py: "6px", px: "12px" }}
+              >
+                <Typography
+                  variant="body2"
+                  color="#123648"
+                  fontWeight="600"
+                  fontSize="clamp(.8rem, 1vw, 1rem)"
                 >
-                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
-                    Problem We are Solving
-                  </Typography>
-                </MenuItem>
-                <MenuItem
-                  onClick={() => scrollToSection("mc")}
-                  sx={{ py: "6px", px: "12px" }}
+                  Problem We are Solving
+                </Typography>
+              </MenuItem>
+              <MenuItem
+                onClick={() => scrollToSection("mc")}
+                sx={{ py: "6px", px: "12px" }}
+              >
+                <Typography
+                  variant="body2"
+                  color="#123648"
+                  fontWeight="600"
+                  fontSize="clamp(.8rem, 1vw, 1rem)"
                 >
-                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
-                    Material Composition
-                  </Typography>
-                </MenuItem>
-                <MenuItem
-                  onClick={() => scrollToSection("mp")}
-                  sx={{ py: "6px", px: "12px" }}
+                  Material Composition
+                </Typography>
+              </MenuItem>
+              <MenuItem
+                onClick={() => scrollToSection("mp")}
+                sx={{ py: "6px", px: "12px" }}
+              >
+                <Typography
+                  variant="body2"
+                  color="#123648"
+                  fontWeight="600"
+                  fontSize="clamp(.8rem, 1vw, 1rem)"
                 >
-                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
-                    Manufacturing Process
-                  </Typography>
-                </MenuItem>
-                <MenuItem
-                  onClick={() => scrollToSection("oi")}
-                  sx={{ py: "6px", px: "12px" }}
+                  Manufacturing Process
+                </Typography>
+              </MenuItem>
+              <MenuItem
+                onClick={() => scrollToSection("oi")}
+                sx={{ py: "6px", px: "12px" }}
+              >
+                <Typography
+                  variant="body2"
+                  color="#123648"
+                  fontWeight="600"
+                  fontSize="clamp(.8rem, 1vw, 1rem)"
                 >
-                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
-                    Our Impact
-                  </Typography>
-                </MenuItem>
-                <MenuItem
-                  onClick={() => scrollToSection("p")}
-                  sx={{ py: "6px", px: "12px" }}
+                  Our Impact
+                </Typography>
+              </MenuItem>
+              <MenuItem
+                onClick={() => scrollToSection("p")}
+                sx={{ py: "6px", px: "12px" }}
+              >
+                <Typography
+                  variant="body2"
+                  color="#123648"
+                  fontWeight="600"
+                  fontSize="clamp(.8rem, 1vw, 1rem)"
                 >
-                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
-                    Product
-                  </Typography>
-                </MenuItem>
-                <MenuItem
-                  onClick={() => scrollToSection("faq")}
-                  sx={{ py: "6px", px: "12px" }}
+                  Product
+                </Typography>
+              </MenuItem>
+              <MenuItem
+                onClick={() => scrollToSection("faq")}
+                sx={{ py: "6px", px: "12px" }}
+              >
+                <Typography
+                  variant="body2"
+                  color="#123648"
+                  fontWeight="600"
+                  fontSize="clamp(.8rem, 1vw, 1rem)"
                 >
-                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
-                    FAQ
-                  </Typography>
-                </MenuItem>
-                <MenuItem
-                  onClick={() => scrollToSection("a")}
-                  sx={{ py: "6px", px: "12px" }}
+                  FAQ
+                </Typography>
+              </MenuItem>
+              <MenuItem
+                onClick={() => scrollToSection("a")}
+                sx={{ py: "6px", px: "12px" }}
+              >
+                <Typography
+                  variant="body2"
+                  color="#123648"
+                  fontWeight="600"
+                  fontSize="clamp(.8rem, 1vw, 1rem)"
                 >
-                  <Typography variant="body2" color="#123648" fontWeight="600" fontSize="clamp(.8rem, 1vw, 1rem)">
-                    About
-                  </Typography>
-                </MenuItem>
-              </Box>
+                  About
+                </Typography>
+              </MenuItem>
             </Box>
-            <Box
-              sx={{
-                display: { xs: "none", md: "flex" },
-                gap: 0.5,
-                alignItems: "center",
-              }}
-            ></Box>
-            <Box sx={{ display: { sm: "", md: "none" } }}>
-              <Button
-                variant="text"
-                color="primary"
-                aria-label="menu"
-                onClick={toggleDrawer(true)}
-                sx={{ minWidth: "30px", p: "4px" }}
+          </Box>
+          <Box
+            sx={{
+              display: { xs: "none", md: "flex" },
+              gap: 0.5,
+              alignItems: "center",
+            }}
+          ></Box>
+          <Box sx={{ display: { sm: "", md: "none" } }}>
+            <Button
+              variant="text"
+              color="primary"
+              aria-label="menu"
+              onClick={toggleDrawer(true)}
+              sx={{ minWidth: "30px", p: "4px" }}
+            >
+              <MenuIcon />
+            </Button>
+            <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
+              <Box
+                sx={{
+                  minWidth: "60dvw",
+                  p: 2,
+                  backgroundColor: "background.paper",
+                  flexGrow: 1,
+                }}
               >
-                <MenuIcon />
-              </Button>
-              <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
                 <Box
                   sx={{
-                    minWidth: "60dvw",
-                    p: 2,
-                    backgroundColor: "background.paper",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "end",
                     flexGrow: 1,
                   }}
-                >
-                  <Box
-                    sx={{
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "end",
-                      flexGrow: 1,
-                    }}
-                  ></Box>
-                  <MenuItem onClick={() => scrollToSection("os")}>
-                    Our Story
-                  </MenuItem>
-                  <MenuItem onClick={() => scrollToSection("pwas")}>
-                    problem We are Solving
-                  </MenuItem>
-                  <MenuItem onClick={() => scrollToSection("mc")}>
-                    Material Composition
-                  </MenuItem>
-                  <MenuItem onClick={() => scrollToSection("oi")}>
-                    Our Impact
-                  </MenuItem>
-                  <MenuItem onClick={() => scrollToSection("p")}>
-                    Product
-                  </MenuItem>
-                  <MenuItem onClick={() => scrollToSection("faq")}>
-                    FAQ
-                  </MenuItem>
-                  <MenuItem onClick={() => scrollToSection("a")}>
-                    About
-                  </MenuItem>
-                  <Divider />
-                </Box>
-              </Drawer>
-            </Box>
-          </Toolbar>
-        </Container>
-      </AppBar>
-    </div>
+                ></Box>
+                <MenuItem onClick={() => scrollToSection("os")}>
+                  Our Story
+                </MenuItem>
+                <MenuItem onClick={() => scrollToSection("pwas")}>
+                  problem We are Solving
+                </MenuItem>
+                <MenuItem onClick={() => scrollToSection("mc")}>
+                  Material Composition
+                </MenuItem>
+                <MenuItem onClick={() => scrollToSection("oi")}>
+                  Our Impact
+                </MenuItem>
+                <MenuItem onClick={() => scrollToSection("p")}>
+                  Product
+                </MenuItem>
+                <MenuItem onClick={() => scrollToSection("faq")}>FAQ</MenuItem>
+                <MenuItem onClick={() => scrollToSection("a")}>About</MenuItem>
+                <Divider />
+              </Box>
+            </Drawer>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
   );
 }
 
-export default Header;
\ No newline at end of file
+export default Header;
diff --git a/src/component/MainSlider.js b/src/component/MainSlider.js
index 0b3b8a0..04e1e90 100644
--- a/src/component/MainSlider.js
+++ b/src/component/MainSlider.js
@@ -64,7 +64,7 @@ function MainSlider() {
 
   return (
     <Container
-      id="os"
+      id="ms"
       sx={{
         py: { xs: 8, sm: 16, md: 6 },
         px: { xs: "0", sm: "0", md: 0 },
@@ -137,4 +137,4 @@ function MainSlider() {
   );
 }
 
-export default MainSlider;
+export default MainSlider;
\ No newline at end of file
diff --git a/src/page/HomePage.js b/src/page/HomePage.js
index e8006a0..b017240 100644
--- a/src/page/HomePage.js
+++ b/src/page/HomePage.js
@@ -28,17 +28,17 @@ export default function HomePage() {
   return (
     <>
       <SpeedInsights />
-      <MainSlider />
-      <Header active_item="Our Story" />
+      <Header active_item="Header" id="h"/>
+      <MainSlider active_item="Our Story" id="ms" />
       <OurStory active_item="Our Story" id="os" />
-      <ProblemWeAreSolving active_item="Our Story" id="pwas" />
-      <MaterialComposition active_item="Our Story" id="mc" />
-      <ManufacturingProcess active_item="Our Story" id="mp" />
-      <OurImpact active_item="Our Story" id="oi" />
-      <Product active_item="Our Story" id="product" />
-      <FAQ active_item="Our Story" id="faq" />
-      <About active_item="Our Story" id="about" />
-      <Footer active_item="Our Story" id="footer" />
+      <ProblemWeAreSolving active_item="Problem We Are Solving" id="pwas" />
+      <MaterialComposition active_item="Material Composition" id="mc" />
+      <ManufacturingProcess active_item="Manufacturing Process" id="mp" />
+      <OurImpact active_item="Our Impact" id="oi" />
+      <Product active_item="Product" id="p" />
+      <FAQ active_item="FAQ" id="faq" />
+      <About active_item="About Us" id="a" />
+      <Footer active_item="Footer" id="f" />
     </>
   );
 }