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/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..2e8e0b1 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -71,7 +71,7 @@ const HomePage: React.FC = () => {
             },
         },
         typography: {
-            fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
+            fontFamily: "SF Pro Regular, Arial, sans-serif",
             h4: {
                 color: "#333333",
             },
@@ -118,7 +118,8 @@ const HomePage: React.FC = () => {
                                     textAlign: "center",
                                     color:'#333333',
                                     height:'107px',
-                                    fontSize:{xs:'12px' , sm:'16px'}
+                                    fontSize:{xs:'12px' , sm:'16px'},
+                                    fontFamily: "SF Pro Regular, Arial, sans-serif",
                                 }}
                             >
                                 <Typography variant="body1">{text}</Typography>
@@ -374,18 +375,18 @@ const HomePage: React.FC = () => {
                             </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 */}   
                             <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 }}>
+                                    <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.
@@ -407,7 +408,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: 175, sm: 131, md: 118 }, maxHeight: 270 }}>
+                                    <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",}}>Repair</Typography>
                                         <Typography variant="body2" sx={{fontSize:{xs:"12px" , sm:'16px'}}}>
                                             Loop Sustainability steps in to repair damaged or outdated electronics.
@@ -439,7 +440,7 @@ const HomePage: React.FC = () => {
                                             />
                                         </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, height: { xs: 175, sm: 131 , md:118}, maxHeight: 270 }}>
+                                    <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>
 
@@ -459,7 +460,7 @@ const HomePage: React.FC = () => {
                                             />
                                         </Box>
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1, textAlign: { xs: "left", md: 'center' }, height: { xs: 175, sm: 131 , md:118} }}>
+                                    <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>
diff --git a/src/components/ourteam.tsx b/src/components/ourteam.tsx
index 18b9f21..3828fb4 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,8 +81,8 @@ const OurTeam: React.FC = () => {
                 sx={{
                     color: "#4D4D4D",
                     fontSize: { xs: "12px", sm: "20px" },
-                    fontFamily: "SF Pro Rounded Regular, Arial, sans-serif",
-                    padding:"20px",
+                    fontFamily: "SF Pro Regular, Arial, sans-serif",
+                    padding:"30px",
                     textAlign:'center'
                 }}
             >
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