diff --git a/src/components/header.tsx b/src/components/header.tsx
index bad4420..61a0db1 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -22,7 +22,7 @@ const Header: React.FC = () => {
         width: {
           xs: "91.6vw",
           sm: "95.5vw",
-          md: "91.6vw",
+          md: "96.5vw",
           lg: "96.8vw",
           xl: "96.4vw"
         },
diff --git a/src/components/homepage.tsx b/src/components/homepage.tsx
index 9177f9b..16278ea 100644
--- a/src/components/homepage.tsx
+++ b/src/components/homepage.tsx
@@ -113,11 +113,11 @@ const HomePage: React.FC = () => {
                 {/* Grid 2 */}
                 <Box
                     sx={{
-                        height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 },
+                        height: { xl: 1800, lg: 2000, xs: 2770, sm: 3580 ,md:2695 },
                         width: '100%',
                         backgroundImage: { lg: `url(${newbackground})`, xs: `url(${mobileback})` },
                         backgroundSize: "contain",
-                        backgroundPosition: { lg: "center", xs: "50% 86%" },
+                        backgroundPosition: { lg: "center", xs: "50% 86%" , md: "50% 80%" },
                         backgroundRepeat: "no-repeat",
                         paddingBottom: { lg: 20, xs: 0 }
                     }}
@@ -131,7 +131,7 @@ const HomePage: React.FC = () => {
                         }}
                     >
                         {/* ROW 1 */}
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
+                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '328px' }, display: "flex", justifyContent: "center", alignItems: "center" }}>
                             <Box ref={mineRef} sx={{
                                 height: { xs: "70%", lg: "215px" },
                                 width: { xs: "80%", lg: "870px" },
@@ -153,11 +153,11 @@ const HomePage: React.FC = () => {
                                 </Box>
                             </Box>
                         </Grid>
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
+                        <Grid item xs={6} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', md:'none', sm: 'block' } }}></Grid>
 
                         {/* ROW 2 */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' , md:'none' } }}></Grid>
+                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px', }, display: "flex", justifyContent: { lg: "flex-start", xs: "center" }, alignItems: "center" }}>
                             <Box ref={manufactureRef} sx={{
                                 height: { xs: "472px", lg: "215px" },
                                 width: { xs: "80%", lg: "552px" },
@@ -182,7 +182,7 @@ const HomePage: React.FC = () => {
                         </Grid>
 
                         {/* ROW 3 */}
-                        <Grid item xs={12} lg={6} sx={{
+                        <Grid item xs={12} lg={6} md={6} sx={{
                             background: '#ffffff00', height: { xl: "500px", lg: '401px' },
                             display: "flex", justifyContent: { lg: 'flex-end', xs: 'center' }, alignItems: "center"
                         }}>
@@ -209,11 +209,11 @@ const HomePage: React.FC = () => {
 
                             </Box>
                         </Grid>
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block',md:'none' } }}></Grid>
 
                         {/* ROW 4 */}
-                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block' } }}></Grid>
-                        <Grid item xs={12} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
+                        <Grid item xs={6} lg={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: { xs: 'none', sm: 'block', md:'none' } }}></Grid>
+                        <Grid item xs={12} lg={6} md={6} sx={{ background: '#ffffff00', height: { xl: "500px", lg: '221px' }, display: "flex", justifyContent: { lg: 'flex-start', xs: 'center' }, alignItems: "center" }}>
                             <Box ref={useRefBox} sx={{
                                 height: { xs: "451px", lg: "215px", sm: '555px' },
                                 width: { xs: "80%", lg: "550px" },
@@ -352,10 +352,10 @@ const HomePage: React.FC = () => {
                             </Box>
                         </Grid>
                         {/* mobile only */}
-                        <Grid container spacing={2} rowSpacing={12} sx={{ display: { xs: "flex", md: "none" } }}>
+                        <Grid container spacing={2} rowSpacing={{ xs: 12, sm: 14, md: 34 }} sx={{ display: { xs: "flex", md: "flex" , lg:'none' } }}>
                             {/* Reuse */}
                             <Grid item xs={6}>
-                                <Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
                                     <Box sx={{ background: "#95CD41", p: 1 }}>
                                         <Typography variant="h4">Reuse</Typography>
                                         <Typography variant="body2">
@@ -370,7 +370,7 @@ const HomePage: React.FC = () => {
 
                             {/* Repair */}
                             <Grid item xs={6}>
-                                <Box sx={{ p: 2, textAlign: "left", borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
                                     <Box sx={{ background: "#95CD41", p: 1 }}>
                                         <Typography variant="h4">Repair</Typography>
                                         <Typography variant="body2">
@@ -387,7 +387,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: "left", borderRadius: 2 }}>
+                                <Box sx={{ p: 2, textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
                                     <Box sx={{ width: "100%" }}>
                                         <img src={gifseven} alt="Disintegrate Gif" style={{ width: "100%" }} />
                                     </Box>
@@ -401,11 +401,11 @@ const HomePage: React.FC = () => {
 
                             {/* Remine */}
                             <Grid item xs={6} sx={{ mt: 2 } }>
-                                <Box sx={{ p: 2, textAlign: "center", borderRadius: 2 }}>
+                                <Box sx={{ p: 2,textAlign:{xs: "left" , md:'center'}, borderRadius: 2 }}>
                                     <Box sx={{ width: "100%" }}>
                                         <img src={gifeight} alt="Remine Gif" style={{ width: "100%" }} />
                                     </Box>
-                                    <Box sx={{ background: "#95CD41", p: 1 ,textAlign:'left'  }}>
+                                    <Box sx={{ background: "#95CD41", p: 1, textAlign:{xs: "left" , md:'center'}, }}>
                                     <Typography variant="h4" sx={{fontSize:'1.6rem'}}>Remine</Typography>
                                     <Typography variant="body2" >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>