diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..94b5524 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -3,7 +3,7 @@
   "name": "Create React App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "loops",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 537e817..3948687 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,13 +1,10 @@
 import React, { useState } from "react";
 import { 
-  AppBar, Toolbar, Typography, Button, IconButton, Menu, 
-  MenuItem, Box, Drawer, List, ListItem, ListItemButton, 
-  ListItemIcon, ListItemText, Divider 
+  AppBar, Toolbar, Typography, Button, IconButton, Box, Drawer, List, 
+  ListItem, ListItemButton, ListItemText 
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
-import HomeIcon from "@mui/icons-material/Home";
-import BuildIcon from "@mui/icons-material/Build";
-import FileDownloadIcon from "@mui/icons-material/FileDownload";
+import headerlogo from "../components/imageandgif/newlogo.png"
 
 const Header: React.FC = () => {
   const [mobileOpen, setMobileOpen] = useState<boolean>(false);
@@ -20,7 +17,7 @@ const Header: React.FC = () => {
     <AppBar 
       position="fixed" 
       sx={{ 
-        backgroundColor: "#e6e6e6cf", 
+        backgroundColor: "#7c77770d", 
         margin: "20px 20px 10px 20px",
         width: {
           xs: "91.6vw",
@@ -32,10 +29,19 @@ const Header: React.FC = () => {
         color: "black"
       }}
     >
-      <Toolbar>
-        {/* Mobile Menu Button */}
+      <Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
+        {/* Logo in Desktop, Centered in Mobile */}
+        <Box sx={{ display: "flex", alignItems: "center", flexGrow: { xs: 1, md: 0 } }}>
+          <img 
+            src={headerlogo}
+            alt="Logo" 
+            style={{ height: "40px", cursor: "pointer", width:'190px' }} 
+          />
+        </Box>
+
+        {/* Mobile Menu Button on the Right */}
         <IconButton 
-          edge="start" 
+          edge="end" 
           color="inherit" 
           aria-label="menu" 
           sx={{ display: { xs: "block", md: "none" } }} 
@@ -44,49 +50,39 @@ const Header: React.FC = () => {
           <MenuIcon />
         </IconButton>
 
-        {/* Logo or Title */}
-        <Typography variant="h6" sx={{ flexGrow: 1, textAlign: { xs: "center", md: "left" } }}>
-          My Website
-        </Typography>
-
         {/* Desktop Navigation */}
         <Box sx={{ display: { xs: "none", md: "flex" }, gap: 3 }}>
           <Button color="inherit">Home</Button>
-          <Button color="inherit" >About</Button>
-          <Button color="inherit" >Team</Button>
-          {/* Download Button */}
+          <Button color="inherit">About</Button>
+          <Button color="inherit">Team</Button>
           <Button 
             sx={{ 
-              padding:'7px 20px 7px 20px',
+              padding: "7px 20px",
               backgroundColor: "#0841adcc", 
               color: "white", 
               "&:hover": { backgroundColor: "darkblue" } 
             }} 
-            
           >
             Contact-Us
           </Button>
         </Box>
 
         {/* Mobile Drawer Menu */}
-        <Drawer anchor="left" open={mobileOpen} onClose={toggleMobileMenu}>
+        <Drawer anchor="right" open={mobileOpen} onClose={toggleMobileMenu}>
           <Box sx={{ width: 250 }} role="presentation" onClick={toggleMobileMenu} onKeyDown={toggleMobileMenu}>
             <List>
               <ListItem disablePadding>
                 <ListItemButton>
-                 
                   <ListItemText primary="Home" />
                 </ListItemButton>
               </ListItem>
               <ListItem disablePadding>
                 <ListItemButton>
-                  
                   <ListItemText primary="Services" />
                 </ListItemButton>
               </ListItem>
               <ListItem disablePadding>
                 <ListItemButton sx={{ backgroundColor: "blue", color: "white", "&:hover": { backgroundColor: "darkblue" } }}>
-                 
                   <ListItemText primary="Download" />
                 </ListItemButton>
               </ListItem>
diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index 6d41db6..b367768 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -15,7 +15,7 @@ import gifeight from "../components/imageandgif/gifeight.gif";
 import loopgreen from "../components/imageandgif/newloop.png";
 import PartnerWork from "./ourwork";
 import Footer from "./footer";
-import loopgreenback from "../components/imageandgif/loopgreenbackground.png"
+import loopgreenback from "../components/imageandgif/newloop.png"
 import OurTeam from "./ourteam";
 import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
 import mobileback from "../components/imageandgif/mobileback.png"
@@ -23,6 +23,7 @@ import mobileback from "../components/imageandgif/mobileback.png"
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import newbackground from "../components/imageandgif/full.png"
 import newbackgroundtwo from "../components/imageandgif/newbacktwo.png"
+import wasteimage from "../components/imageandgif/loopwastemanage.png"
 
 
 
@@ -39,7 +40,11 @@ const HomePage: React.FC = () => {
     const remineRef = useRef<HTMLDivElement>(null);
     const impactRef = useRef<HTMLDivElement>(null);
     const reuseRef = useRef<HTMLDivElement>(null);
-
+    const items = [
+        "Our mission is to maximize the reuse of nature’s precious resources, fostering a circular economy and driving true sustainability.",
+        "Loop Sustainability extends the life cycle of electronics through advanced technology and smart algorithms, enabling efficient reuse and responsible recycling.",
+        "We collaborate with consumer brands, retailers, recyclers, repair centers, policymakers, and more—all working together to reduce e-waste and drive sustainability.",
+    ];
     // Function to scroll to the ref
     const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
         if (ref.current) {
@@ -69,68 +74,51 @@ const HomePage: React.FC = () => {
                         xs={12}
                         sx={{
                             marginTop: "0px",
-                            height: { xs: "190px", lg: "337px" },
+                            height: { xs: "190px", lg: "58vh" },
+                            width: { lg: "100vw" },
                             backgroundColor: "white",
                             position: "relative",
-                            backgroundImage: {
-                                xs: `url(${mobileLogo})`, // Mobile background image
-                                lg: `url(${logo})`, // Desktop background image
-                            },
+                            backgroundImage:
+
+                                `url(${loopgreenback})`
+                            ,
                             backgroundSize: "contain",
-                            backgroundPosition: "right center",
+                            backgroundPosition: " center",
                             backgroundRepeat: "no-repeat",
-                            marginBottom: { xs: "10px", md: "399px" },
+                            marginBottom: { xs: "10px", md: "39px" },
                         }}
                     >
 
-                        <Box
-                            sx={{
-                                position: "absolute",
-                                top: { xs: "70%", md: "80%" },
-                                left: { xs: "2%", md: "5%" },
-                                transform: "translateY(-30%)",
-                                height: { xs: "235px", md: "440px" },
-                                width: { xs: "150px", md: "220px" },
-                                // backgroundColor: "#eee0e0a3",
-                                backgroundColor: "white",
-                                zIndex: 1,
-                                padding: "20px",
-                                overflowY: "auto",
-                                borderRadius: "8px",
-                                display: { xs: "none", md: "block" },
-                            }}
-                        >
-                            <ul style={{
-                                listStyleType: "none",
-                                padding: "0",
-                                margin: "0",
-                                display: "flex",
-                                flexDirection: "column",
-                                gap: "10px"
-                            }}>
-                                <li onClick={() => scrollToRef(mineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Mine</li>
-                                <li onClick={() => scrollToRef(manufactureRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Manufacture</li>
-                                <li onClick={() => scrollToRef(assembleRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Assemble</li>
-                                <li onClick={() => scrollToRef(useRefBox)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Use</li>
-                                <li onClick={() => scrollToRef(reuseRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Reuse</li>
-                                <li onClick={() => scrollToRef(repairRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Repair</li>
-                                <li onClick={() => scrollToRef(disintegrateRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Disintegrate</li>
-                                <li onClick={() => scrollToRef(remineRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Remine</li>
-                                <li onClick={() => scrollToRef(impactRef)} style={{ fontSize: "18px", fontWeight: "semibold", padding: "8px", borderRadius: "5px", cursor: "pointer" }}>Impact</li>
-                            </ul>
-                        </Box>
+
                     </Grid>
                 </Grid>
+                <Grid container spacing={4} justifyContent="center" sx={{ padding: 4 }}>
+                    {items.map((text, index) => (
+                        <Grid item xs={12} sm={6} md={4} key={index}  >
+                            <Box
+                                sx={{
+                                    p: 3,
+                                    borderRadius: "12px",
+                                    backgroundColor: "#7c77770d",
+                                    textAlign: "left",
+
+                                }}
+                            >
+                                <Typography variant="body1">{text}</Typography>
+                            </Box>
+                        </Grid>
+                    ))}
+                </Grid>
                 {/* Grid 2 */}
                 <Box
                     sx={{
-                        height: { xl: 1800, lg: 2000 , xs:2500 },
+                        height: { xl: 1800, lg: 2000, xs: 2830, sm: 2400 },
                         width: '100%',
-                        backgroundImage:{lg: `url(${newbackground})`, xs:`url(${mobileback})`},
+                        backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
                         backgroundSize: "contain",
-                        backgroundPosition: { lg: "center", xs: "50% 93%" },
+                        backgroundPosition: { lg: "center", xs: "50% 87%" },
                         backgroundRepeat: "no-repeat",
-                        paddingBottom: {lg:20,xs:0}
+                        paddingBottom: { lg: 20, xs: 0 }
                     }}
                 >
                     <Grid
@@ -157,17 +145,17 @@ const HomePage: React.FC = () => {
                                 <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                     <img src={gifone} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                     <Typography variant="h4">Mine from nature</Typography>
-                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
+                                    <p>Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </p>
                                 </Box>
                             </Box>
                         </Grid>
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
 
                         {/* ROW 2 */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start" ,xs:"center" }, alignItems: "center" }}>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
+                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
                             <Box ref={manufactureRef} sx={{
                                 height: { xs: "472px", lg: "215px" },
                                 width: { xs: "80%", lg: "552px" },
@@ -180,9 +168,9 @@ const HomePage: React.FC = () => {
                                 textAlign: 'center',
                                 marginBottom: { xs: "20px", md: "0" },
                             }}>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                     <Typography variant="h4">Manufacturing</Typography>
-                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                    <p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
                                 </Box>
                                 <Box sx={{ width: { lg: '50%' } }}>
                                     <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
@@ -192,7 +180,7 @@ const HomePage: React.FC = () => {
                         </Grid>
 
                         {/* ROW 3 */}
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end' ,xs:'center' }, alignItems: "center" }}>
+                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '401px' }, display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center" }}>
                             <Box ref={assembleRef} sx={{
                                 height: { xs: "332px", lg: "215px" },
                                 width: { xs: "80%", lg: "595px" },
@@ -209,18 +197,18 @@ const HomePage: React.FC = () => {
                                 <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                     <img src={gifthree} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                     <Typography variant="h4">Assemble</Typography>
-                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                    <p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
                                 </Box>
 
                             </Box>
                         </Grid>
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } ,display: { xs: 'none', sm: 'block' } }}></Grid>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
 
                         {/* ROW 4 */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' }}}></Grid>
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start' ,xs:'center' }, alignItems: "center" }}>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
+                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
                             <Box ref={useRefBox} sx={{
                                 height: { xs: "332px", lg: "215px" },
                                 width: { xs: "80%", lg: "550px" },
@@ -233,9 +221,9 @@ const HomePage: React.FC = () => {
                                 textAlign: 'center',
                                 marginBottom: { xs: "20px", md: "0" },
                             }}>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} }}>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                     <Typography variant="h4">Use</Typography>
-                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                    <p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p>
                                 </Box>
                                 <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                     <img src={giffour} alt="Gif" style={{ width: "100%" }} />
@@ -244,29 +232,29 @@ const HomePage: React.FC = () => {
                             </Box>
                         </Grid>
                         {/* new2 */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' } , display: { xs: 'none', sm: 'block' } }}></Grid>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
 
 
                         <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
                         {/* newnew */}
                         <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
                             <Box ref={reuseRef} sx={{
-                                height: { xs: "332px", lg: "115px" },
-                                width: { xs: "80%", lg: "250px" },
+                                height: { xs: "442px", lg: "115px" },
+                                width: { xs: "100%", lg: "250px" },
                                 zIndex: 1,
                                 display: "flex",
                                 flexDirection: { xs: "column", lg: "column" },
                                 justifyContent: "center",
                                 alignItems: "center",
                                 padding: "10px",
-                                textAlign: 'center',
+                                textAlign: 'left',
                                 marginBottom: { xs: "20px", md: "0" },
                             }}>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "8px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
                                     <Typography variant="h4">Reuse</Typography>
-                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                    <p>We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.</p>
                                 </Box>
-                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
+                                <Box sx={{ width: { xs: "100%", md: "100%" } }}>
                                     <img src={giffive} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
 
@@ -275,21 +263,21 @@ const HomePage: React.FC = () => {
                         <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
                             <Box ref={repairRef} sx={{
                                 height: { xs: "332px", lg: "115px" },
-                                width: { xs: "80%", lg: "250px" },
+                                width: { xs: "87%", lg: "250px" },
                                 zIndex: 1,
                                 display: "flex",
                                 flexDirection: { xs: "column", lg: "column" },
                                 justifyContent: "center",
                                 alignItems: "center",
                                 padding: "10px",
-                                textAlign: 'center',
+                                textAlign: 'left',
                                 marginBottom: { xs: "20px", md: "0" },
                             }}>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, paddingRight: { xs: "2px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
                                     <Typography variant="h4">Repair</Typography>
-                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                    <p>Loop Sustainability steps in to repair damaged or outdated electronics. Our repair services extend the life of devices, minimizing waste and reducing the need for new products.</p>
                                 </Box>
-                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
+                                <Box sx={{ width: { xs: "100%", md: "100%" } }}>
                                     <img src={gifsix} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
 
@@ -298,7 +286,7 @@ const HomePage: React.FC = () => {
                         {/* newnewnwe */}
                         <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
                             <Box ref={disintegrateRef} sx={{
-                                height: { xs: "332px", lg: "115px" },
+                                height: { xs: "600px", lg: "115px" },
                                 width: { xs: "92%", lg: "250px" },
                                 zIndex: 1,
                                 display: "flex",
@@ -306,24 +294,24 @@ const HomePage: React.FC = () => {
                                 justifyContent: "center",
                                 alignItems: "center",
                                 padding: "10px",
-                                textAlign: 'center',
+                                textAlign: 'left',
                                 marginBottom: { xs: "20px", md: "0" },
-                                marginTop: { xs: "20px"},
+                                marginTop: { xs: "20px" },
                             }}>
                                 <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                     <img src={gifseven} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'}, background:{xs:'green', lg:'white'} }}>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
                                     <Typography variant="h4">Disintegrate</Typography>
-                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                    <p>When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</p>
                                 </Box>
-                                
+
 
                             </Box>
                         </Grid>
                         <Grid item xs={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '421px' }, display: "flex", justifyContent: { lg: 'center' }, alignItems: "center" }}>
                             <Box ref={remineRef} sx={{
-                                height: { xs: "332px", lg: "115px" },
+                                height: { xs: "660px", lg: "115px" },
                                 width: { xs: "92%", lg: "250px" },
                                 zIndex: 1,
                                 display: "flex",
@@ -333,41 +321,47 @@ const HomePage: React.FC = () => {
                                 padding: "10px",
                                 textAlign: 'center',
                                 marginBottom: { xs: "20px", md: "0" },
-                                marginTop: { xs: "20px"},
+                                marginTop: { xs: "20px" },
                             }}>
                                 <Box sx={{ width: { xs: "60%", md: "100%" } }}>
                                     <img src={gifeight} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
-                                <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: {lg:'left' , xs:'center'} , background:{xs:'green', lg:'white'} }}>
+                                <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
                                     <Typography variant="h4">Remine</Typography>
-                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
+                                    <p>We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources, closing the loop on electronic waste.</p>
                                 </Box>
-                                
+
 
                             </Box>
                         </Grid>
                     </Grid>
+                    
                 </Box>
                 <Grid
-                    item
+                    container
                     xs={12}
-                    ref={mineRef} // Attach ref here
+                   
                     sx={{
-                        height: "300px",
-                        backgroundImage: `url(${loopgreen})`,
-                        marginTop:{lg:20 , xs:0},
-                        position: "relative",
-                        backgroundSize: "contain",
-                        backgroundPosition: "center",
-                        backgroundRepeat: "no-repeat",
-                    }}>
-
+                        height: "66 0px",
+                        marginTop: { lg: 20, xs: 0 },
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        overflow: "hidden"
+                    }}
+                >
+                    <img
+                        src={wasteimage}
+                        alt="Waste Image"
+                        style={{
+                            width: "100%",
+                            height: "100%",
+                            objectFit: "fill"
+                        }}
+                    />
                 </Grid>
-
-
-
-
                 <PartnerWork />
+                
                 <OurTeam />
                 <Footer />
             </Box>
diff --git a/src/components/imageandgif/loopwastemanage.png b/src/components/imageandgif/loopwastemanage.png
new file mode 100644
index 0000000..a9548ec
Binary files /dev/null and b/src/components/imageandgif/loopwastemanage.png differ