diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index 4ee11b6..c6bf64d 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -26,7 +26,7 @@ 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/Loopherosectionmobiless.gif"
+import loopgif from "../components/imageandgif/loop hero new (1).gif"
 import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
 import gifeightm from "../components/imageandgif/reminemobile.gif";
 import giffivem from "../components/imageandgif/repairm.gif";
@@ -94,7 +94,7 @@ const HomePage: React.FC = () => {
                         xs={12}
                         sx={{
                             marginTop: "0px",
-                            height: { xs: "190px", lg: "55vh", sm: "300px", md: '400px' },
+                            height: { xs: "190px", lg: "100px", sm: "300px", md: '400px' },
                             width: { lg: "100vw" },
                             backgroundColor: "white",
                             position: "relative",
@@ -118,9 +118,9 @@ const HomePage: React.FC = () => {
                                     borderRadius: "12px",
                                     backgroundColor: "#7c77770d",
                                     textAlign: "center",
-                                    color:'#333333',
-                                    height:'107px',
-                                    fontSize:{xs:'12px' , sm:'16px'},
+                                    color: '#333333',
+                                    height: '107px',
+                                    fontSize: { xs: '12px', sm: '16px' },
                                     fontFamily: "SF Pro Regular, Arial, sans-serif",
                                 }}
                             >
@@ -167,14 +167,19 @@ const HomePage: React.FC = () => {
                                 padding: "10px",
                                 textAlign: 'center',
                                 marginBottom: { xs: "20px", md: "0" },
-                                
+
                             }}>
                                 <Box sx={{ width: { xs: "60%", md: "70%" } }}>
-                                    <img src={gifonem} alt="Gif" style={{ width: "91%" }} />
+                                    <img
+                                        src={window.innerWidth <= 1400 ? gifone : gifonem}
+                                        alt="Gif"
+                                        style={{ width: "91%" }}
+                                    />
+
                                 </Box>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
-                                    <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Mine from nature</Typography>
-                                    <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}} >Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
+                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Mine from nature</Typography>
+                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
                                 </Box>
                             </Box>
                         </Grid>
@@ -196,8 +201,8 @@ const HomePage: React.FC = () => {
                                 marginBottom: { xs: "20px", md: "0" },
                             }}>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
-                                    <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Manufacturing</Typography>
-                                    <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
+                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Manufacturing</Typography>
+                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>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%' } }}>
                                     <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
@@ -228,8 +233,8 @@ const HomePage: React.FC = () => {
                                     <img src={gifthree} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
-                                    <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Assemble</Typography>
-                                    <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
+                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Assemble</Typography>
+                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
                                 </Box>
 
                             </Box>
@@ -252,8 +257,8 @@ const HomePage: React.FC = () => {
                                 marginBottom: { xs: "20px", md: "0" },
                             }}>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
-                                    <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Use</Typography>
-                                    <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</Typography>
+                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Use</Typography>
+                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>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%' } }}>
@@ -284,8 +289,8 @@ const HomePage: React.FC = () => {
                                     margin: { xs: 1 }
                                 }}>
                                 <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
-                                    <Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Reuse</Typography>
-                                    <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
+                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
+                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                         We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
                                     </Typography>
                                 </Box>
@@ -310,8 +315,8 @@ const HomePage: React.FC = () => {
                                     margin: { xs: 1 }
                                 }}>
                                 <Box sx={{ width: "100%", textAlign: "left", background: { xs: '#95CD41', lg: 'white' }, p: 2 }}>
-                                    <Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography>
-                                    <Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
+                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
+                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                         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.
@@ -344,8 +349,8 @@ const HomePage: React.FC = () => {
                                     <img src={gifseven} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
-                                    <Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Disintegrate</Typography>
-                                    <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>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: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
+                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>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>
 
 
@@ -369,28 +374,28 @@ const HomePage: React.FC = () => {
                                     <img src={gifeight} alt="Gif" style={{ width: "100%" }} />
                                 </Box>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "10px", md: "10px" }, textAlign: { lg: 'left', xs: 'left' }, background: { xs: '#95CD41', lg: 'white' } }}>
-                                    <Typography variant="h4"sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Remine</Typography>
-                                    <Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}} >We take the disintegrated materials and remines them for precious metals, turning waste back into usable resources. closing the loop on electronic waste.</Typography>
+                                    <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
+                                    <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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>
                         {/* mobile only */}
-                        <Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 30  }}
+                        <Grid container spacing={2} rowSpacing={{ xs: 24, sm: 36, md: 30 }}
                             sx={{
                                 display: { xs: "flex", md: "flex", lg: 'none' },
                                 backgroundImage: { lg: null, xs: `url(${mobileback})` },
-                                backgroundSize: { xs: "60%", md: "50%", sm:'70%' },
+                                backgroundSize: { xs: "60%", md: "50%", sm: '70%' },
                                 backgroundPosition: { xs: "50% 60%", md: '50% 57%' },
                                 backgroundRepeat: "no-repeat",
                             }}>
-                            {/* Reuse */}   
+                            {/* Reuse */}
                             <Grid item xs={6}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
                                     <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
-                                        <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Reuse</Typography>
-                                        <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
+                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Reuse</Typography>
+                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                             We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
                                         </Typography>
                                     </Box>
@@ -410,15 +415,15 @@ const HomePage: React.FC = () => {
                             {/* Repair */}
                             <Grid item xs={6}>
                                 <Box sx={{ p: 2, textAlign: { xs: "left", md: 'center' }, borderRadius: 2 }}>
-                                    <Box sx={{ background: "#95CD41",marginBottom:'30px', p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
-                                        <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Repair</Typography>
-                                        <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
+                                    <Box sx={{ background: "#95CD41", marginBottom: '30px', p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
+                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Repair</Typography>
+                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }}>
                                             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={{ display: "flex", justifyContent: "center"  }}>
+                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
                                         <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                             <img
                                                 src={giffivem}
@@ -433,7 +438,7 @@ 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={{ display: "flex", justifyContent: "center" }}>
+                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
                                         <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                             <img
                                                 src={gifsevenm}
@@ -442,9 +447,9 @@ const HomePage: React.FC = () => {
                                             />
                                         </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138 , md:118}, maxHeight: 270 }}>
-                                        <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Disintegrate</Typography>
-                                        <Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}} >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 sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 138, md: 118 }, maxHeight: 270 }}>
+                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Disintegrate</Typography>
+                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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>
@@ -453,8 +458,8 @@ 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={{ display: "flex", justifyContent: "center" }}>
-                                        <Box sx={{ width: { xs: "100%", md: "60%" } ,marginTop:'27px' }}>
+                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
+                                        <Box sx={{ width: { xs: "100%", md: "60%" }, marginTop: '27px' }}>
                                             <img
                                                 src={gifeightm}
                                                 alt="Reuse Gif"
@@ -462,9 +467,9 @@ const HomePage: React.FC = () => {
                                             />
                                         </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 138 , md:118} }}>
-                                    <Typography variant="h4" sx={{fontSize:{xs:"18px" , sm:'36px'},fontFamily: "Helvetica Neue",}}>Remine</Typography>
-                                        <Typography variant="body2"sx={{fontSize:{xs:"12px" , sm:'16px'}}} >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' }, height: { xs: 175, sm: 138, md: 118 } }}>
+                                        <Typography variant="h4" sx={{ fontSize: { xs: "18px", sm: '36px' }, fontFamily: "Helvetica Neue", }}>Remine</Typography>
+                                        <Typography variant="body2" sx={{ fontSize: { xs: "12px", sm: '16px' } }} >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>