diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index 3d343f3..91223fe 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -179,29 +179,58 @@ const HomePage: React.FC = () => {
                     </Grid>
                 </Grid >
                 {/* Grid 2 */}
-                <Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: 20, mt: 20 }}>
+                <Box sx={{ width: '100%', height: 'auto', textAlign: 'center', mb: { xs: 10, md: 20 }, mt: { xs: 10, md: 20 } }}>
                     <Grid container justifyContent="center">
-                        <Grid item lg={10} xs={12} md={10}>
-                            <Typography variant="h4" fontWeight="bold" gutterBottom textAlign="left">
+                        <Grid item lg={10} xs={10} md={10}>
+                            <Typography
+                                variant="h4"
+                                sx={{
+                                    fontSize: { xs: '28px', md: '36px', lg: '42px' },
+                                    textAlign: "left",
+                                    fontFamily: "Helvetica Neue, Arial, sans-serif",
+                                    fontWeight: "bold"
+                                }}
+                                gutterBottom
+                            >
                                 The Process
                             </Typography>
-                            <Typography variant="body1" sx={{ fontSize: { xs: '14px', md: '18px' }, textAlign: 'left' }}>
+                            <Typography
+                                variant="body1"
+                                sx={{
+                                    fontSize: { xs: '14px', md: '18px', lg: '20px' },
+                                    textAlign: 'left',
+                                    fontFamily: "SF Pro Regular, Arial, sans-serif",
+                                    lineHeight: { xs: '1.4', md: '1.6' }
+                                }}
+                            >
                                 Raw materials are extracted through destructive mining practices, causing habitat loss, soil erosion, and water contamination.
                                 Components are assembled into finished products in factories, further increasing emissions and producing hazardous waste that is hard to dispose of.
                                 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="h2" fontWeight="bold" color="green" sx={{ mt: 9,mb:10, textAlign: "left" }}>
+                            <Typography
+                                variant="h2"
+                                sx={{
+                                    mt: { xs: 5, md: 9 },
+                                    mb: { xs: 5, md: 10 },
+                                    textAlign: "left",
+                                    fontFamily: "SF Pro Regular, Arial, sans-serif",
+                                    fontSize: { xs: '32px', md: '48px', lg: '64px' },
+                                    color: "#95CD41",
+                                    fontWeight: "bold"
+                                }}
+                            >
                                 This is where we come in.
                             </Typography>
                         </Grid>
                     </Grid>
                 </Box>
 
+
                 <Box
                     sx={{
                         height: { xl: 1800, lg: 700 },
                         width: '100%',
-                        backgroundImage: `url(${newbackground})`,
+                        backgroundImage: { xs: 'none', lg: `url(${newbackground})` },
                         backgroundSize: "261px 220px",
                         backgroundPosition: "638px 290px",
                         backgroundRepeat: "no-repeat",
@@ -325,8 +354,8 @@ const HomePage: React.FC = () => {
                         <Grid container spacing={2} rowSpacing={{ xs: 9, sm: 36, md: 16 }}
                             sx={{
                                 display: { xs: "flex", md: "flex", lg: 'none' },
-                                backgroundImage: { lg: null, xs: `url(${mobileback})` },
-                                backgroundSize: { xs: "60%", md: "40%", sm: '70%' },
+                                backgroundImage: { lg: null, xs: `url(${newbackground})` },
+                                backgroundSize: { xs: "30%", md: "22%", sm: '50%' },
                                 backgroundPosition: { xs: "50% 54%", md: '50% 52%' },
                                 backgroundRepeat: "no-repeat",
                             }}>
diff --git a/src/components/whyus.tsx b/src/components/whyus.tsx
index a6239da..59efb87 100644
--- a/src/components/whyus.tsx
+++ b/src/components/whyus.tsx
@@ -47,7 +47,7 @@ const WhyChooseUs: React.FC = () => {
             item
             key={index}
             xs={6}
-            sm={2}
+            sm={6}
             display="flex"
             justifyContent="center"
           >