diff --git a/src/components/imageandgif/remine mobile.mp4 b/public/reminemobile.mp4
similarity index 100%
rename from src/components/imageandgif/remine mobile.mp4
rename to public/reminemobile.mp4
diff --git a/src/App.css b/src/App.css
index fb812f0..54516b0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -42,3 +42,9 @@
   font-weight: normal;
   font-style: normal;
 }
+@font-face {
+  font-family: 'Helvetica Neue';
+  src: url('../src//fonts/HelveticaNeue.ttc') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index c2b183a..fd41f97 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -13,7 +13,7 @@ const Footer: React.FC = () => {
         <Grid container spacing={4}>
           {/* Loop Sustainability */}
           <Grid item xs={12} md={3}>
-            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
+            <Typography variant="h6"  sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
               Loop Sustainability
             </Typography>
             <Typography variant="body2" sx={{ mt: 1, color: "#77808B", fontFamily: "Helvetica, Arial, sans-serif" }}>
@@ -23,7 +23,7 @@ const Footer: React.FC = () => {
 
           {/* Get in Touch */}
           <Grid item xs={7} md={3}>
-            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
+            <Typography variant="h6"  sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
               Get in Touch
             </Typography>
             <Box display="flex" alignItems="flex-start" sx={{ mt: 1, color: "#77808B" }}>
@@ -48,7 +48,7 @@ const Footer: React.FC = () => {
 
           {/* Company Links */}
           <Grid item xs={5} md={3} textAlign="center">
-            <Typography variant="h6" fontWeight="bold" sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
+            <Typography variant="h6"  sx={{ color: "#333333", fontFamily: "Helvetica, Arial, sans-serif" }}>
               Company
             </Typography>
             <Box sx={{ mt: 1 }}>
@@ -60,7 +60,7 @@ const Footer: React.FC = () => {
                   display="block"
                   sx={{
                     color: "#77808B",
-                    mt: 0.5,
+                    mt: 1,
                     textDecoration: "none",
                     fontFamily: "Helvetica, Arial, sans-serif",
                     "&:hover": { textDecoration: "underline" },
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 150cb6f..bcf7026 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -54,13 +54,13 @@ const Header: React.FC = () => {
 
         {/* Desktop Navigation */}
         <Box sx={{ display: { xs: "none", md: "flex" }, gap: 3, fontFamily: "Helvetica" }}>
-          <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">Home</Button>
-          <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">About</Button>
-          <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" }} color="inherit">Team</Button>
+          <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41"}} >Home</Button>
+          <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" , color:"#2F2E41" }} >About</Button>
+          <Button sx={{ fontFamily: "Helvetica", textTransform: "capitalize" ,color:"#2F2E41" }} >Team</Button>
           <Button 
             sx={{ 
               padding: "7px 20px",
-              backgroundColor: "#0841adcc", 
+              backgroundColor: "#317AF6", 
               color: "white", 
               fontFamily: "Helvetica",
               textTransform: "capitalize",
diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index dee27f7..c6bf64d 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -27,9 +27,11 @@ 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";
-
+import gifsevenm from "../components/imageandgif/disintegrate mobile (2).gif";
+import gifeightm from "../components/imageandgif/reminemobile.gif";
+import giffivem from "../components/imageandgif/repairm.gif";
+import gifsixm from "../components/imageandgif/newusenewuse.gif";
+import gifonem from "../components/imageandgif/mine mobile.gif";
 
 
 
@@ -71,7 +73,7 @@ const HomePage: React.FC = () => {
             },
         },
         typography: {
-            fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
+            fontFamily: "SF Pro Regular, Arial, sans-serif",
             h4: {
                 color: "#333333",
             },
@@ -92,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",
@@ -116,9 +118,10 @@ 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",
                                 }}
                             >
                                 <Typography variant="body1">{text}</Typography>
@@ -164,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={gifone} 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>
@@ -193,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%" }} />
@@ -225,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>
@@ -249,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%' } }}>
@@ -281,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>
@@ -307,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.
@@ -341,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>
 
 
@@ -366,35 +374,35 @@ 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: 38  }}
+                        <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: "70%", 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: 131, 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'}}}>
+                                    <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' } }}>
                                             We help businesses reuse their old electronic devices, repurposing functional parts and components for future use or resale, reducing overall environmental impact.
                                         </Typography>
                                     </Box>
                                     <Box sx={{ display: "flex", justifyContent: "center" }}>
                                         <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                             <img
-                                                src={gifsix}
+                                                src={gifsixm}
                                                 alt="Reuse Gif"
                                                 style={{ width: "100%" }}
                                             />
@@ -407,9 +415,9 @@ 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: 175, sm: 131, 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.
@@ -418,7 +426,7 @@ const HomePage: React.FC = () => {
                                     <Box sx={{ display: "flex", justifyContent: "center" }}>
                                         <Box sx={{ width: { xs: "100%", md: "60%" } }}>
                                             <img
-                                                src={giffive}
+                                                src={giffivem}
                                                 alt="Reuse Gif"
                                                 style={{ width: "100%" }}
                                             />
@@ -430,18 +438,18 @@ 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={gifseven}
+                                                src={gifsevenm}
                                                 alt="Reuse Gif"
                                                 style={{ width: "100%" }}
                                             />
                                         </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131 , 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>
@@ -450,18 +458,18 @@ 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%" } }}>
+                                    <Box sx={{ display: "flex", justifyContent: "center" }}>
+                                        <Box sx={{ width: { xs: "100%", md: "60%" }, marginTop: '27px' }}>
                                             <img
-                                                src={gifeight}
+                                                src={gifeightm}
                                                 alt="Reuse Gif"
                                                 style={{ width: "100%" }}
                                             />
                                         </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 131 , 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>
diff --git a/src/components/imageandgif/Loopherosectionmobiless.gif b/src/components/imageandgif/Loopherosectionmobiless.gif
new file mode 100644
index 0000000..48e2115
Binary files /dev/null and b/src/components/imageandgif/Loopherosectionmobiless.gif differ
diff --git a/src/components/imageandgif/disintegrate mobile (2).gif b/src/components/imageandgif/disintegrate mobile (2).gif
new file mode 100644
index 0000000..1dd21c8
Binary files /dev/null and b/src/components/imageandgif/disintegrate mobile (2).gif differ
diff --git a/src/components/imageandgif/mine mobile.gif b/src/components/imageandgif/mine mobile.gif
new file mode 100644
index 0000000..4a49156
Binary files /dev/null and b/src/components/imageandgif/mine mobile.gif differ
diff --git a/src/components/imageandgif/newusenewuse.gif b/src/components/imageandgif/newusenewuse.gif
new file mode 100644
index 0000000..ff8ea16
Binary files /dev/null and b/src/components/imageandgif/newusenewuse.gif differ
diff --git a/src/components/imageandgif/reminemobile.gif b/src/components/imageandgif/reminemobile.gif
new file mode 100644
index 0000000..52cd3c6
Binary files /dev/null and b/src/components/imageandgif/reminemobile.gif differ
diff --git a/src/components/imageandgif/repairm.gif b/src/components/imageandgif/repairm.gif
new file mode 100644
index 0000000..da4bc8f
Binary files /dev/null and b/src/components/imageandgif/repairm.gif differ
diff --git a/src/components/imageandgif/reusem (1) (1).gif b/src/components/imageandgif/reusem (1) (1).gif
new file mode 100644
index 0000000..6374330
Binary files /dev/null and b/src/components/imageandgif/reusem (1) (1).gif differ
diff --git a/src/components/ourteam.tsx b/src/components/ourteam.tsx
index 18b9f21..489e1c2 100644
--- a/src/components/ourteam.tsx
+++ b/src/components/ourteam.tsx
@@ -56,15 +56,15 @@ const OurTeam: React.FC = () => {
                 display="flex"
                 alignItems="center"
                 gap={1}
-                sx={{ cursor: "pointer", marginBottom: 10 }}
+                sx={{ cursor: "pointer", marginBottom: 5 }}
                 onClick={() => setShowTeam(!showTeam)}
             >
                 <Typography
                     variant="h4"
                     sx={{
-                        fontWeight: "bold",
+                        
                         fontSize: { xs: "20px", sm: "48px" },
-                        fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
+                        fontFamily: "SF Pro Regular, Arial, sans-serif",
                         color: "#333333",
                     }}
                 >
@@ -81,9 +81,10 @@ const OurTeam: React.FC = () => {
                 sx={{
                     color: "#4D4D4D",
                     fontSize: { xs: "12px", sm: "20px" },
-                    fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
-                    padding:"20px",
-                    textAlign:'center'
+                    fontFamily: "SF Pro Regular, Arial, sans-serif",
+                    paddingLeft:"60px",
+                    textAlign:'center',
+                    paddingRight:"60px",
                 }}
             >
                 For over a decade, our team members have been actively involved in
diff --git a/src/components/whyus.tsx b/src/components/whyus.tsx
index 42f0077..a6239da 100644
--- a/src/components/whyus.tsx
+++ b/src/components/whyus.tsx
@@ -11,6 +11,8 @@ const Circle = styled(Box)(({ theme }) => ({
   justifyContent: "center",
   border: "5px solid",
   transition: "0.3s",
+  textAlign: "center",
+  padding: "10px",
   [theme.breakpoints.down("sm")]: {
     width: 120, // Adjusting for mobile
     height: 120,
@@ -27,22 +29,40 @@ const items = [
 const WhyChooseUs: React.FC = () => {
   return (
     <Box sx={{ textAlign: "center", mt: 5 }}>
-      <Typography variant="h4" sx={{ fontWeight: "bold", color: '#333333', mb: 4, fontSize: { xs: "20px", sm: "48px" } }}>
+      <Typography
+        variant="h4"
+        sx={{
+         
+          color: "#333333",
+          mb: 4,
+          fontSize: { xs: "20px", sm: "48px" },
+          fontFamily: "SF Pro Rounded, sans-serif",
+        }}
+      >
         Why Choose Us?
       </Typography>
-      <Grid
-        container
-        spacing={1}
-        justifyContent="center"
-        alignItems="center"
-      >
+      <Grid container spacing={2} justifyContent="center" alignItems="center">
         {items.map((item, index) => (
-          <Grid item key={index} xs={6} sm={2} display="flex" justifyContent="center">
+          <Grid
+            item
+            key={index}
+            xs={6}
+            sm={2}
+            display="flex"
+            justifyContent="center"
+          >
             <Circle sx={{ borderColor: item.color }}>
-              <Typography variant="body1" fontWeight="400" fontFamily="Roboto" sx={{fontSize:{xs:'12px', sm:'24px'}}}>
+              <Typography
+                variant="body1"
+                fontWeight="400"
+                sx={{
+                  fontSize: { xs: "12px", sm: "20px" },
+                  fontFamily: "Roboto, sans-serif",
+                  textAlign: "center",
+                }}
+              >
                 {item.text}
               </Typography>
-
             </Circle>
           </Grid>
         ))}
diff --git a/src/fonts/HelveticaNeue.ttc b/src/fonts/HelveticaNeue.ttc
new file mode 100644
index 0000000..8be1d23
Binary files /dev/null and b/src/fonts/HelveticaNeue.ttc differ