diff --git a/src/App.css b/src/App.css
index 74b5e05..729b10a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,3 +36,9 @@
     transform: rotate(360deg);
   }
 }
+@font-face {
+  font-family: 'SF Pro Medium';
+  src: url('../src/fonts/SF-Pro-Medium.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index 0c658e0..2e12eff 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -67,6 +67,16 @@ const HomePage: React.FC = () => {
 
             },
         },
+        typography: {
+            fontFamily: "SF Pro Rounded Medium, Arial, sans-serif",
+            h4: {
+                color: "#333333", 
+              },
+            body2:{
+                color:"#4D4D4D"
+            }
+          },
+        
     });
 
     return (
@@ -156,7 +166,7 @@ const HomePage: React.FC = () => {
                                 </Box>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                     <Typography variant="h4">Mine from nature</Typography>
-                                    <p>Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </p>
+                                    <Typography variant="body2">Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination. </Typography>
                                 </Box>
                             </Box>
                         </Grid>
@@ -179,7 +189,7 @@ const HomePage: React.FC = () => {
                             }}>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                     <Typography variant="h4">Manufacturing</Typography>
-                                    <p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
+                                    <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%' } }}>
                                     <img src={giftwo} alt="Gif" style={{ width: "100%" }} />
@@ -211,7 +221,7 @@ const HomePage: React.FC = () => {
                                 </Box>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                     <Typography variant="h4">Assemble</Typography>
-                                    <p>Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </p>
+                                    <Typography variant="body2">Materials are processed in energy-intensive factories that rely on fossil fuels, generating high carbon emissions </Typography>
                                 </Box>
 
                             </Box>
@@ -235,7 +245,7 @@ const HomePage: React.FC = () => {
                             }}>
                                 <Box sx={{ width: "100%", paddingLeft: { xs: "0", md: "10px" }, textAlign: { lg: 'left', xs: 'center' } }}>
                                     <Typography variant="h4">Use</Typography>
-                                    <p>Devices are used by consumers and businesses, but their production and usage contribute significantly to carbon footprints, energy consumption, and waste generation.</p>
+                                    <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%' } }}>
@@ -359,7 +369,7 @@ const HomePage: React.FC = () => {
                             </Box>
                         </Grid>
                         {/* mobile only */}
-                        <Grid container spacing={2} rowSpacing={{ xs: 12, sm: 26, md: 40 }}
+                        <Grid container spacing={2} rowSpacing={{ xs: 18, sm: 26, md: 40 }}
                             sx={{
                                 display: { xs: "flex", md: "flex", lg: 'none' },
                                 backgroundImage: { lg: null, xs: `url(${mobileback})` },
diff --git a/public/SF-Pro-Rounded-Medium (1).otf b/src/fonts/SF-Pro-Medium.otf
similarity index 100%
rename from public/SF-Pro-Rounded-Medium (1).otf
rename to src/fonts/SF-Pro-Medium.otf
diff --git a/src/index.css b/src/index.css
index ec2585e..cb10b60 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,3 +11,11 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+@font-face {
+  font-family: 'SF Pro Medium';
+  src: url('../src//fonts//SF-Pro-Medium.otf') format('opentype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+