diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index 2bca1c1..b430c5e 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -19,8 +19,8 @@ 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"
-
-import { createTheme, ThemeProvider } from "@mui/material/styles";
+import {  useMediaQuery, useTheme } from "@mui/material";
+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"
@@ -29,7 +29,6 @@ import WhyChooseUs from "./whyus";
 
 
 
-
 const HomePage: React.FC = () => {
     // Create refs for each content box
     const mineRef = useRef<HTMLDivElement>(null);
@@ -46,12 +45,16 @@ const HomePage: React.FC = () => {
         "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.",
     ];
+    // const theme = useTheme();
+    // const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+   
     // Function to scroll to the ref
     const scrollToRef = (ref: React.RefObject<HTMLDivElement>) => {
         if (ref.current) {
             ref.current.scrollIntoView({ behavior: "smooth", block: "center" });
         }
     };
+    
     const theme = createTheme({
         breakpoints: {
             values: {
@@ -59,7 +62,7 @@ const HomePage: React.FC = () => {
                 sm: 600,   // Default
                 md: 1000,   // Default
                 lg: 1400,  // Default
-                xl: 1800,  // Default
+                xl: 1600,  // Default
 
             },
         },
@@ -68,7 +71,7 @@ const HomePage: React.FC = () => {
     return (
         <ThemeProvider theme={theme}>
             <Box>
-                <Grid container sx={{ position: "relative", marginTop: {lg :'119px' , xs:'65px'} }}>
+                <Grid container sx={{ position: "relative", marginTop: { lg: '119px', xs: '65px' } }}>
                     {/* Grid 1 */}
                     <Grid
                         item
@@ -86,7 +89,7 @@ const HomePage: React.FC = () => {
                             backgroundSize: "contain",
                             backgroundPosition: " center",
                             backgroundRepeat: "no-repeat",
-                            marginBottom: { xs: "10px", md: "39px" ,lg :'120px' },
+                            marginBottom: { xs: "10px", md: "39px", lg: '120px' },
                         }}
                     >
 
@@ -113,11 +116,11 @@ const HomePage: React.FC = () => {
                 {/* Grid 2 */}
                 <Box
                     sx={{
-                        height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 ,md:2695 },
+                        height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580, md: 3095 },
                         width: '100%',
-                        backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
+                        backgroundImage: { lg: `url(${newbackground})`, xs: null },
                         backgroundSize: "contain",
-                        backgroundPosition: { lg: "center", xs: "50% 86%" , md: "50% 80%" },
+                        backgroundPosition: { lg: "center"},
                         backgroundRepeat: "no-repeat",
                         paddingBottom: { lg: 20, xs: 0 }
                     }}
@@ -134,7 +137,7 @@ const HomePage: React.FC = () => {
                         <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
                             <Box ref={mineRef} sx={{
                                 height: { xs: "70%", lg: "215px" },
-                                width: { xs: "80%", lg: "870px" },
+                                width: { xs: "83%", lg: "870px" },
                                 zIndex: 1,
                                 display: "flex",
                                 flexDirection: { xs: "column", lg: "row" },
@@ -144,8 +147,8 @@ const HomePage: React.FC = () => {
                                 textAlign: 'center',
                                 marginBottom: { xs: "20px", md: "0" },
                             }}>
-                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
-                                    <img src={gifone} alt="Gif" style={{ width: "100%" }} />
+                                <Box sx={{ width: { xs: "60%", md: "70%" } }}>
+                                    <img src={gifone} alt="Gif" style={{ width: "91%" }} />
                                 </Box>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                     <Typography variant="h4">Mine from nature</Typography>
@@ -153,10 +156,10 @@ const HomePage: React.FC = () => {
                                 </Box>
                             </Box>
                         </Grid>
-                        <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md:'none', sm: 'block' , lg:'block' } }}></Grid>
+                        <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid>
 
                         {/* ROW 2 */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' , md:'none',lg:'block'  } }}></Grid>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
                         <Grid item xs={12} lg={6} md={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" },
@@ -174,7 +177,7 @@ const HomePage: React.FC = () => {
                                     <Typography variant="h4">Manufacturing</Typography>
                                     <p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
                                 </Box>
-                                <Box sx={{ width: { lg: '50%' } }}>
+                                <Box sx={{ width: { lg: '50%' , md:'67%' } }}>
                                     <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
 
@@ -187,7 +190,7 @@ const HomePage: React.FC = () => {
                             display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
                         }}>
                             <Box ref={assembleRef} sx={{
-                                height: { xs: "332px", lg: "215px", sm: '500px' },
+                                height: { xs: "332px", lg: "215px", sm: '500px' , md:'500px' },
                                 width: { xs: "80%", lg: "595px" },
                                 zIndex: 1,
                                 display: "flex",
@@ -199,7 +202,7 @@ const HomePage: React.FC = () => {
                                 marginBottom: { xs: "20px", md: "0" },
                             }}>
 
-                                <Box sx={{ width: { xs: "60%", md: "100%" } }}>
+                                <Box sx={{ width: { xs: "60%", md:'70%' } }}>
                                     <img src={gifthree} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
@@ -209,10 +212,10 @@ const HomePage: React.FC = () => {
 
                             </Box>
                         </Grid>
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block',md:'none' ,lg:'block'} }}></Grid>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
 
                         {/* ROW 4 */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md:'none',lg:'block' } }}></Grid>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md: 'none', lg: 'block' } }}></Grid>
                         <Grid item xs={12} lg={6} md={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: "451px", lg: "215px", sm: '555px' },
@@ -231,14 +234,14 @@ const HomePage: React.FC = () => {
                                     <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%" } }}>
+                                <Box sx={{ width: { xs: "60%",md:'70%' } }}>
                                     <img src={giffour} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
                             </Box>
 
                         </Grid>
                         {/* new2 */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block',lg:'block' } }}></Grid>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', lg: 'block' } }}></Grid>
 
 
                         <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
@@ -352,10 +355,17 @@ const HomePage: React.FC = () => {
                             </Box>
                         </Grid>
                         {/* mobile only */}
-                        <Grid container spacing={2} rowSpacing={{ xs: 12, sm: 14, md: 34 }} sx={{ display: { xs: "flex", md: "flex" , lg:'none' } }}>
+                        <Grid container spacing={2} rowSpacing={{ xs: 12, sm: 26, md: 40 }}
+                            sx={{
+                                display: { xs: "flex", md: "flex", lg: 'none' },
+                                backgroundImage: { lg: null, xs: `url(${mobileback})` },
+                                backgroundSize: "contain",
+                                backgroundPosition: {  xs: "50% 60%", md:'50% 63%' },
+                                backgroundRepeat: "no-repeat",
+                            }}>
                             {/* Reuse */}
                             <Grid item xs={6}>
-                                <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                     <Box sx={{ background: "#95CD41", p: 1 }}>
                                         <Typography variant="h4">Reuse</Typography>
                                         <Typography variant="body2">
@@ -370,14 +380,14 @@ const HomePage: React.FC = () => {
 
                             {/* Repair */}
                             <Grid item xs={6}>
-                                <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                     <Box sx={{ background: "#95CD41", p: 1 }}>
                                         <Typography variant="h4">Repair</Typography>
                                         <Typography variant="body2">
-                                        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.
-                                    </Typography>
+                                            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.
+                                        </Typography>
                                     </Box>
                                     <Box sx={{ width: "100%" }}>
                                         <img src={giffive} alt="Repair Gif" style={{ width: "100%" }} />
@@ -387,27 +397,27 @@ const HomePage: React.FC = () => {
 
                             {/* Disintegrate (Added Extra Margin to Separate from Top Row) */}
                             <Grid item xs={6} sx={{ mt: 2 }}>
-                                <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                     <Box sx={{ width: "100%" }}>
                                         <img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
                                     </Box>
                                     <Box sx={{ background: "#95CD41", p: 1 }}>
-                                    <Typography variant="h4" sx={{fontSize:"1.6rem"}}>Disintegrate</Typography>
-                                    <Typography variant="body2" >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
+                                        <Typography variant="h4" sx={{ fontSize: "1.3rem" }}>Disintegrate</Typography>
+                                        <Typography variant="body2" >When electronics can no longer be repaired or reused, we safely disintegrate them into valuable materials, ensuring they are properly processed and recycled.</Typography>
 
                                     </Box>
                                 </Box>
                             </Grid>
 
                             {/* Remine */}
-                            <Grid item xs={6} sx={{ mt: 2 } }>
-                                <Box sx={{ p: 2,textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
+                            <Grid item xs={6} sx={{ mt: 2 }}>
+                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                     <Box sx={{ width: "100%" }}>
                                         <img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, textAlign:{xs: "left" , md:'center'}, }}>
-                                    <Typography variant="h4" sx={{fontSize:'1.6rem'}}>Remine</Typography>
-                                    <Typography variant="body2" >We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources .closing the loop on electronic waste.</Typography>
+                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, }}>
+                                        <Typography variant="h4" sx={{ fontSize: '1.6rem' }}>Remine</Typography>
+                                        <Typography variant="body2" >We take the disintegrated materials and remines them for precious metals ,turning waste back into usable resources .closing the loop on electronic waste.</Typography>
                                     </Box>
                                 </Box>
                             </Grid>
@@ -419,7 +429,6 @@ const HomePage: React.FC = () => {
                 <Grid
                     container
                     xs={12}
-
                     sx={{
                         height: "660px",
                         marginTop: { lg: 20, xs: 0 },
@@ -430,7 +439,7 @@ const HomePage: React.FC = () => {
                     }}
                 >
                     <img
-                        src={wasteimage}
+                        src={ wasteimage} // Different image for mobile
                         alt="Waste Image"
                         style={{
                             width: "100%",
@@ -439,7 +448,7 @@ const HomePage: React.FC = () => {
                         }}
                     />
                 </Grid>
-                <WhyChooseUs/>
+                <WhyChooseUs />
                 <OurTeam />
 
                 <Footer />
diff --git a/src/components/imageandgif/Soil & Water Contamination mob.png b/src/components/imageandgif/Soil & Water Contamination mob.png
new file mode 100644
index 0000000..582f463
Binary files /dev/null and b/src/components/imageandgif/Soil & Water Contamination mob.png differ