diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index 2718c3a..d07a156 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -19,13 +19,16 @@ import loopgreenback from "../components/imageandgif/lsbg.png"
 import OurTeam from "./ourteam";
 import mobileLogo from "../components/imageandgif/loopsMoblogo.png"
 import mobileback from "../components/imageandgif/mobileback.png"
-import {  useMediaQuery, useTheme } from "@mui/material";
-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 sustainability  from "../components/imageandgif/Untitled-2.png"
+import sustainability from "../components/imageandgif/Untitled-2.png"
 import wasteimage from "../components/imageandgif/loopwastemanage.png"
 import WhyChooseUs from "./whyus";
 import WasteImageSection from "./wastemanagement";
+import loopgif from "../components/imageandgif/loop hero new (1).gif"
+import gifsevenm from "../components/imageandgif/disintegrate mobile.gif";
+import gifeightm from "../components/imageandgif/gifeight.gif";
 
 
 
@@ -48,14 +51,14 @@ const HomePage: React.FC = () => {
     ];
     // 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: {
@@ -76,7 +79,7 @@ const HomePage: React.FC = () => {
         //         color:"#77808B"
         //     }
         //   },
-        
+
     });
 
     return (
@@ -93,25 +96,19 @@ const HomePage: React.FC = () => {
                             width: { lg: "100vw" },
                             backgroundColor: "white",
                             position: "relative",
-                            backgroundImage:
-
-                                `url(${loopgreenback})`
-                            ,
-                            backgroundSize: "contain",
-                            backgroundPosition: " center",
-                            backgroundRepeat: "no-repeat",
+                            paddingTop:{xs:'50px', lg:'5px'},
                             marginBottom: { xs: "10px", md: "39px", lg: '60px' },
                         }}
                     >
-
+                        <img src={loopgif} alt="Gif" style={{ width: "100%" }} />
 
                     </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={{
@@ -134,11 +131,12 @@ const HomePage: React.FC = () => {
                         width: '100%',
                         backgroundImage: { lg: `url(${newbackground})`, xs: null },
                         backgroundSize: "contain",
-                        backgroundPosition: { lg: "center"},
+                        backgroundPosition: { lg: "center" },
                         backgroundRepeat: "no-repeat",
                         paddingBottom: { lg: 20, xs: 0 }
                     }}
                 >
+
                     <Grid
                         container
 
@@ -147,6 +145,10 @@ const HomePage: React.FC = () => {
                             width: '100%',
                         }}
                     >
+                        {/* <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "200px", 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: "200px", lg: '221px' }, display: { xs: 'none', md: 'none', sm: 'block', lg: 'block' } }}></Grid> */}
+
                         {/* ROW 1 */}
                         <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '358px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
                             <Box ref={mineRef} sx={{
@@ -191,7 +193,7 @@ const HomePage: React.FC = () => {
                                     <Typography variant="h4">Manufacturing</Typography>
                                     <Typography variant="body2">Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
                                 </Box>
-                                <Box sx={{ width: { lg: '50%' , md:'67%' } }}>
+                                <Box sx={{ width: { lg: '50%', md: '67%' } }}>
                                     <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
 
@@ -204,7 +206,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' , md:'500px' },
+                                height: { xs: "332px", lg: "215px", sm: '500px', md: '500px' },
                                 width: { xs: "80%", lg: "595px" },
                                 zIndex: 1,
                                 display: "flex",
@@ -216,7 +218,7 @@ const HomePage: React.FC = () => {
                                 marginBottom: { xs: "20px", md: "0" },
                             }}>
 
-                                <Box sx={{ width: { xs: "60%", md:'70%' } }}>
+                                <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' } }}>
@@ -248,7 +250,7 @@ const HomePage: React.FC = () => {
                                     <Typography variant="body2">Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography>
                                 </Box>
 
-                                <Box sx={{ width: { xs: "60%",md:'70%' } }}>
+                                <Box sx={{ width: { xs: "60%", md: '70%' } }}>
                                     <img src={giffour} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
                             </Box>
@@ -374,13 +376,13 @@ const HomePage: React.FC = () => {
                                 display: { xs: "flex", md: "flex", lg: 'none' },
                                 backgroundImage: { lg: null, xs: `url(${mobileback})` },
                                 backgroundSize: "contain",
-                                backgroundPosition: {  xs: "50% 60%", md:'50% 63%' },
+                                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={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200}, maxHeight:270 }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
                                         <Typography variant="h4">Reuse</Typography>
                                         <Typography variant="body2">
                                             We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
@@ -395,7 +397,7 @@ const HomePage: React.FC = () => {
                             {/* Repair */}
                             <Grid item xs={6}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
-                                    <Box sx={{ background: "#95CD41", p: 1 ,height:{xs:256 , sm:200} , maxHeight:270  }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
                                         <Typography variant="h4">Repair</Typography>
                                         <Typography variant="body2">
                                             Loop Sustainability steps in to repair damaged or outdated electronics.
@@ -411,11 +413,11 @@ 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  ,height:{xs:256 , sm:200} , maxHeight:270 }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 256, sm: 200 }, maxHeight: 270 }}>
                                         <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>
 
@@ -425,11 +427,11 @@ const HomePage: React.FC = () => {
 
                             {/* Remine */}
                             <Grid item xs={6} sx={{ mt: 2 }}>
-                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2  , maxHeight:270  }}>
+                                <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2, maxHeight: 270 }}>
                                     <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' },height:{xs:256 , sm:200} }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 256, sm: 200 } }}>
                                         <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>
@@ -440,7 +442,7 @@ const HomePage: React.FC = () => {
                     </Grid>
 
                 </Box>
-                <WasteImageSection/>
+                <WasteImageSection />
                 <WhyChooseUs />
                 <OurTeam />
 
diff --git a/src/components/imageandgif/disintegrate mobile.gif b/src/components/imageandgif/disintegrate mobile.gif
new file mode 100644
index 0000000..1dd21c8
Binary files /dev/null and b/src/components/imageandgif/disintegrate mobile.gif differ
diff --git a/src/components/imageandgif/loop hero new (1).gif b/src/components/imageandgif/loop hero new (1).gif
new file mode 100644
index 0000000..c832c2e
Binary files /dev/null and b/src/components/imageandgif/loop hero new (1).gif differ
diff --git a/src/components/imageandgif/remine mobile.mp4 b/src/components/imageandgif/remine mobile.mp4
new file mode 100644
index 0000000..fd6f788
Binary files /dev/null and b/src/components/imageandgif/remine mobile.mp4 differ
diff --git a/src/components/imageandgif/roadnew.svg b/src/components/imageandgif/roadnew.svg
new file mode 100644
index 0000000..9f12ad3
--- /dev/null
+++ b/src/components/imageandgif/roadnew.svg
@@ -0,0 +1,87 @@
+<svg width="1091" height="2413" viewBox="0 0 1091 2413" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M579.04 40H1031.04V190.5H40.04V578.5H1050.54V975.5H40.04V1397H535.54" stroke="#D9DADA" stroke-width="80"/>
+<circle cx="540" cy="2141" r="232" stroke="#D9DADA" stroke-width="80"/>
+<path d="M557.5 1357L553.961 1898" stroke="#D9DADA" stroke-width="80"/>
+<rect x="627.06" y="41.3304" width="8" height="44" transform="rotate(-90.4306 627.06 41.3304)" fill="white"/>
+<rect x="728.06" y="41.3304" width="8" height="44" transform="rotate(-90.4306 728.06 41.3304)" fill="white"/>
+<rect x="821.06" y="41.3304" width="8" height="44" transform="rotate(-90.4306 821.06 41.3304)" fill="white"/>
+<rect x="922.06" y="41.3304" width="8" height="44" transform="rotate(-90.4306 922.06 41.3304)" fill="white"/>
+<rect x="81.0601" y="189.33" width="8" height="44" transform="rotate(-90.4306 81.0601 189.33)" fill="white"/>
+<rect x="182.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 182.06 189.33)" fill="white"/>
+<rect x="275.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 275.06 189.33)" fill="white"/>
+<rect x="376.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 376.06 189.33)" fill="white"/>
+<rect x="469.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 469.06 189.33)" fill="white"/>
+<rect x="570.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 570.06 189.33)" fill="white"/>
+<rect x="663.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 663.06 189.33)" fill="white"/>
+<rect x="764.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 764.06 189.33)" fill="white"/>
+<rect x="857.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 857.06 189.33)" fill="white"/>
+<rect x="958.06" y="189.33" width="8" height="44" transform="rotate(-90.4306 958.06 189.33)" fill="white"/>
+<rect x="76.0601" y="581.33" width="8" height="44" transform="rotate(-90.4306 76.0601 581.33)" fill="white"/>
+<rect x="177.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 177.06 581.33)" fill="white"/>
+<rect x="270.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 270.06 581.33)" fill="white"/>
+<rect x="371.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 371.06 581.33)" fill="white"/>
+<rect x="464.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 464.06 581.33)" fill="white"/>
+<rect x="565.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 565.06 581.33)" fill="white"/>
+<rect x="658.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 658.06 581.33)" fill="white"/>
+<rect x="759.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 759.06 581.33)" fill="white"/>
+<rect x="852.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 852.06 581.33)" fill="white"/>
+<rect x="953.06" y="581.33" width="8" height="44" transform="rotate(-90.4306 953.06 581.33)" fill="white"/>
+<rect x="72.0601" y="981.33" width="8" height="44" transform="rotate(-90.4306 72.0601 981.33)" fill="white"/>
+<rect x="173.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 173.06 981.33)" fill="white"/>
+<rect x="266.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 266.06 981.33)" fill="white"/>
+<rect x="367.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 367.06 981.33)" fill="white"/>
+<rect x="460.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 460.06 981.33)" fill="white"/>
+<rect x="561.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 561.06 981.33)" fill="white"/>
+<rect x="654.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 654.06 981.33)" fill="white"/>
+<rect x="755.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 755.06 981.33)" fill="white"/>
+<rect x="848.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 848.06 981.33)" fill="white"/>
+<rect x="949.06" y="981.33" width="8" height="44" transform="rotate(-90.4306 949.06 981.33)" fill="white"/>
+<rect x="76.0601" y="1393.33" width="8" height="44" transform="rotate(-90.4306 76.0601 1393.33)" fill="white"/>
+<rect x="177.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 177.06 1393.33)" fill="white"/>
+<rect x="270.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 270.06 1393.33)" fill="white"/>
+<rect x="371.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 371.06 1393.33)" fill="white"/>
+<rect x="464.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 464.06 1393.33)" fill="white"/>
+<rect x="565.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 565.06 1393.33)" fill="white"/>
+<rect x="658.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 658.06 1393.33)" fill="white"/>
+<rect x="759.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 759.06 1393.33)" fill="white"/>
+<rect x="852.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 852.06 1393.33)" fill="white"/>
+<rect x="953.06" y="1393.33" width="8" height="44" transform="rotate(-90.4306 953.06 1393.33)" fill="white"/>
+<rect x="27.604" y="981.048" width="8" height="44" transform="rotate(-0.341438 27.604 981.048)" fill="white"/>
+<rect x="27.4468" y="1082.05" width="8" height="44" transform="rotate(-0.341438 27.4468 1082.05)" fill="white"/>
+<rect x="27.3018" y="1175.05" width="8" height="44" transform="rotate(-0.341438 27.3018 1175.05)" fill="white"/>
+<rect x="27.1445" y="1276.05" width="8" height="44" transform="rotate(-0.341438 27.1445 1276.05)" fill="white"/>
+<rect x="27" y="1369.05" width="8" height="44" transform="rotate(-0.341438 27 1369.05)" fill="white"/>
+<rect x="1044.6" y="571.048" width="8" height="44" transform="rotate(-0.341438 1044.6 571.048)" fill="white"/>
+<rect x="1044.45" y="672.048" width="8" height="44" transform="rotate(-0.341438 1044.45 672.048)" fill="white"/>
+<rect x="1044.3" y="765.047" width="8" height="44" transform="rotate(-0.341438 1044.3 765.047)" fill="white"/>
+<rect x="1044.14" y="866.047" width="8" height="44" transform="rotate(-0.341438 1044.14 866.047)" fill="white"/>
+<rect x="1044" y="959.047" width="8" height="44" transform="rotate(-0.341438 1044 959.047)" fill="white"/>
+<rect x="32.6035" y="195.048" width="8" height="44" transform="rotate(-0.341438 32.6035 195.048)" fill="white"/>
+<rect x="32.4463" y="296.048" width="8" height="44" transform="rotate(-0.341438 32.4463 296.048)" fill="white"/>
+<rect x="32.3018" y="389.047" width="8" height="44" transform="rotate(-0.341438 32.3018 389.047)" fill="white"/>
+<rect x="32.1445" y="490.047" width="8" height="44" transform="rotate(-0.341438 32.1445 490.047)" fill="white"/>
+<rect x="1020.14" y="28.0474" width="8" height="44" transform="rotate(-0.341438 1020.14 28.0474)" fill="white"/>
+<rect x="1020" y="121.047" width="8" height="44" transform="rotate(-0.341438 1020 121.047)" fill="white"/>
+<rect x="550.604" y="1385.05" width="8" height="44" transform="rotate(-0.341438 550.604 1385.05)" fill="white"/>
+<rect x="550.446" y="1486.05" width="8" height="44" transform="rotate(-0.341438 550.446 1486.05)" fill="white"/>
+<rect x="550.302" y="1579.05" width="8" height="44" transform="rotate(-0.341438 550.302 1579.05)" fill="white"/>
+<rect x="550.145" y="1680.05" width="8" height="44" transform="rotate(-0.341438 550.145 1680.05)" fill="white"/>
+<rect x="550" y="1789.05" width="8" height="44" transform="rotate(-0.341438 550 1789.05)" fill="white"/>
+<rect x="566.766" y="1892.15" width="5.78723" height="31.8298" transform="rotate(89.8736 566.766 1892.15)" fill="white"/>
+<rect x="463.447" y="1905.9" width="5.78723" height="31.8298" transform="rotate(64.6439 463.447 1905.9)" fill="white"/>
+<rect x="365.869" y="1965.98" width="5.78723" height="31.8298" transform="rotate(46.7426 365.869 1965.98)" fill="white"/>
+<rect x="736.895" y="1988.42" width="5.78723" height="31.8298" transform="rotate(135.961 736.895 1988.42)" fill="white"/>
+<rect x="317.834" y="2035.94" width="5.78723" height="31.8298" transform="rotate(28.2246 317.834 2035.94)" fill="white"/>
+<rect x="776.28" y="2064.69" width="5.78723" height="31.8298" transform="rotate(155.963 776.28 2064.69)" fill="white"/>
+<rect x="301.458" y="2119.12" width="5.78723" height="31.8298" transform="rotate(5.79739 301.458 2119.12)" fill="white"/>
+<rect x="788.994" y="2150.79" width="5.78723" height="31.8298" transform="rotate(174.238 788.994 2150.79)" fill="white"/>
+<rect x="316.641" y="2226.24" width="5.78723" height="31.8298" transform="rotate(161.951 316.641 2226.24)" fill="white"/>
+<rect x="779.71" y="2196.7" width="5.78723" height="31.8298" transform="rotate(26.1104 779.71 2196.7)" fill="white"/>
+<rect x="355.455" y="2297.04" width="5.78723" height="31.8298" transform="rotate(141.268 355.455 2297.04)" fill="white"/>
+<rect x="744.245" y="2272.95" width="5.78723" height="31.8298" transform="rotate(43.771 744.245 2272.95)" fill="white"/>
+<rect x="416.843" y="2349.01" width="5.78723" height="31.8298" transform="rotate(128.293 416.843 2349.01)" fill="white"/>
+<rect x="691.879" y="2329.38" width="5.78723" height="31.8298" transform="rotate(52.2356 691.879 2329.38)" fill="white"/>
+<rect x="514.944" y="2375.78" width="5.78723" height="31.8298" transform="rotate(101.591 514.944 2375.78)" fill="white"/>
+<rect x="602.842" y="2367.99" width="5.78723" height="31.8298" transform="rotate(72.9547 602.842 2367.99)" fill="white"/>
+<rect x="669.575" y="1926.93" width="5.78723" height="31.8298" transform="rotate(115.692 669.575 1926.93)" fill="white"/>
+</svg>