diff --git a/src/components/ArticleInternalOne/ArticleInternalOne.jsx b/src/components/ArticleInternalOne/ArticleInternalOne.jsx
index b23276c..dd61279 100644
--- a/src/components/ArticleInternalOne/ArticleInternalOne.jsx
+++ b/src/components/ArticleInternalOne/ArticleInternalOne.jsx
@@ -40,10 +40,26 @@ const ArticleInternalOne = () => {
           alignItems={"center"}
           flexDirection={"column"}
           color="white"
+          sx={{
+            "@media (max-width: 600px)": {
+              minHeight: "28px",
+              minHeight: "40vh",
+              width:'100vw'
+            },
+          }}
         >
           <Text
             textAlign={"center"}
-            className="rubix-text-heading-2 rubix-fw-600"
+            className="rubix-fw-600"
+            fontSize={"40px"}
+            fontFamily={"Mona Sans"}
+            color={"#fff"}
+            sx={{
+              "@media (max-width: 600px)": {
+                fontSize: "28px",
+                lineHeight: "45px",
+              },
+            }}
           >
             Bring your own BlockSpace
           </Text>
diff --git a/src/components/BuildPage/BuildBanner.jsx b/src/components/BuildPage/BuildBanner.jsx
index 228146d..7c0e92b 100644
--- a/src/components/BuildPage/BuildBanner.jsx
+++ b/src/components/BuildPage/BuildBanner.jsx
@@ -16,7 +16,7 @@ const BannerContent = [
   },
 ];
 
-const BuildBanner = () => {
+const BuildBanner = () => {  
   return (
     <Box
       height={"100vh"}
@@ -46,8 +46,8 @@ const BuildBanner = () => {
         marginTop={"2rem"}
         paddingLeft={"3.5rem"}
         sx={{
-          "@media (max-width: 435px)": {
-            paddingLeft: "2rem",
+          "@media (max-width: 500px)": {
+            paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
           },
         }}
       >
@@ -69,15 +69,12 @@ const BuildBanner = () => {
             letterSpacing={"1px"}
             sx={{
               "@media (max-width: 996px)": {
-                fontSize: "35px",
+                fontSize: "46px",
               },
               "@media (max-width: 600px)": {
-                fontSize: "28px",
-                marginBottom: "2rem",
-              },
-              "@media (max-width: 412px)": {
-                fontSize: "24px",
-                marginTop: "2rem",
+                fontSize: "40px",
+                marginBottom: "0rem",
+                lineHeight: "54px",
               },
             }}
           >
@@ -90,7 +87,12 @@ const BuildBanner = () => {
               {BannerContent[0].heading2}
             </span>
           </Text>
-          <Box marginTop={"1.5rem"} width={"80%"}>
+          <Box marginTop={"1.5rem"} width={"80%"}
+          sx={{
+            "@media (max-width: 500px)": {
+              width: "100%",
+            },
+          }}>
             <Text
               color={"#fff"}
               fontSize={"20px"}
@@ -102,9 +104,9 @@ const BuildBanner = () => {
                 "@media (max-width: 1024px)": {
                   fontSize: "22px",
                 },
-                "@media (max-width: 600px)": {
-                  fontSize: "17px",
-                  width: "100%",
+                "@media (max-width: 500px)": {
+                  fontSize: "16px",
+                  lineHeight: "28px",
                 },
               }}
             >
@@ -154,6 +156,16 @@ const BuildBanner = () => {
                   borderRadius: "0px",
                   opacity: "1",
                 },
+                "@media (max-width: 500px)": {
+                  fontSize: "14px",
+                  width: "230px",
+                  height: "44px",
+                  marginTop: "2rem",
+                  bgGradient:
+                    "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                  color: "#000",
+                  fontWeight: "600",
+                },
               }}
               _hover={{
                 color: "#000",
diff --git a/src/components/BuildPage/Connect.jsx b/src/components/BuildPage/Connect.jsx
index a820fab..5df7ce4 100644
--- a/src/components/BuildPage/Connect.jsx
+++ b/src/components/BuildPage/Connect.jsx
@@ -60,13 +60,13 @@ const items = [
 ];
 
 const Connect = () => {
-  return (
+  return ( 
     <Box
       //   height={"80vh"}
       //   backgroundImage={`url(${banner})`}
       //   backgroundSize={"cover"}
       //   backgroundRepeat={"no-repeat"}
-      backgroundColor={"#000"}
+      backgroundColor={"#101015"}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
     >
@@ -79,17 +79,25 @@ const Connect = () => {
           "@media (max-width: 1024px)": {
             padding: "3rem",
           },
-          "@media (max-width: 435px)": {},
+          "@media (max-width: 500px)": {
+            padding: "4rem 1rem",
+          },
         }}
       >
         <Text
-          className="rubix-text-title"
           fontFamily={"Mona Sans"}
           fontWeight={"700"}
-          //   fontSize={"40px"}
+          fontSize={"38px"}
           color={"#fff"}
           marginBottom={"3rem"}
           textAlign={"center"}
+          sx={{
+            "@media (max-width: 500px)": {
+              fontSize: "22px",
+              fontWeight: "400",
+              marginBottom: "30px",
+            },
+          }}
         >
           Connect with Rubix community
         </Text>
@@ -113,17 +121,34 @@ const Connect = () => {
                   borderRadius={"10px"}
                   minH={"270px"}
                   border={"1px solid #454545"}
+                  sx={{
+                    "@media (max-width: 500px)": {
+                      minHeight: "200px",
+                    },
+                  }}
                 >
                   <CardHeader
                     textAlign={"center"}
                     paddingBottom={"0px"}
                     marginTop={"2rem"}
+                    sx={{
+                      "@media (max-width: 500px)": {
+                        marginTop: "0px",
+                      },
+                    }}
                   >
                     {/* <Image src={item.img} /> */}
                     <Heading
                       size="md"
-                      className="rubix-text-large"
+                      fontSize={"22px"}
                       fontWeight={"500"}
+                      color={"#fff"}
+                      sx={{
+                        "@media (max-width: 500px)": {
+                          fontSize: "17px",
+                          fontWeight: "400",
+                        },
+                      }}
                     >
                       {item.head}
                     </Heading>
diff --git a/src/components/BuildPage/LearnMore.jsx b/src/components/BuildPage/LearnMore.jsx
index 4e0174a..73299f6 100644
--- a/src/components/BuildPage/LearnMore.jsx
+++ b/src/components/BuildPage/LearnMore.jsx
@@ -30,14 +30,14 @@ const LearnMore = () => {
         paddingBottom={"1rem"}
         fontWeight={700}
         fontSize={"40px"}
-        className="rubix-text-title"
         textAlign={"center"}
         textTransform={"capitalize"}
         color={"#fff"}
         sx={{
-          "@media (max-width: 1024px)": {},
-          "@media (max-width: 600px)": {
-            fontSize: "28px",
+          "@media (max-width: 500px)": {
+            fontSize: "20px",
+            fontWeight: "500",
+            marginBottom: "5px",
           },
         }}
       >
@@ -54,55 +54,72 @@ const LearnMore = () => {
         <Text
           color={"#E4E4E4"}
           //   fontSize={"22px"}
-          className="rubix-text-large"
           marginBottom={"2rem"}
           fontFamily={"Poppins"}
+          sx={{
+            "@media (max-width: 500px)": {
+              fontSize: "14px",
+              fontWeight: "100",
+              // marginBottom:'5px',
+              marginBottom: "30px",
+            },
+          }}
         >
           {SectionContent.subContent}
         </Text>
         <Link to="/Contact">
           <Button
-            fontSize={"20px"}
-            //   minW={"284px"}
-            minH={"60px"}
-            fontFamily={"Poppins"}
-            backgroundColor={"transparent"}
-            border={"1px solid #fff"}
-            color={"#fff"}
-            fontWeight={"400"}
-            margin={"0 auto"}
-            // transition="0.3s ease-in-out"
-            zIndex={"1"}
-            overflow={"hidden"}
-            padding={"0 3rem"}
-            sx={{
-              "::before": {
-                content: '""',
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-                width: "65px",
-                height: "65px",
-                borderRadius: "50%",
-                transition: "0.35s linear",
-                zIndex: -1,
-                bgGradient:
-                  "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
-                opacity: "0",
-              },
-              "&:hover::before": {
-                width: "100%",
-                height: "120%",
-                borderRadius: "0px",
-                opacity: "1",
-              },
-            }}
-            _hover={{
-              color: "#000",
-              border: "1px solid white",
-              zIndex: 1,
-            }}
+           fontSize={"20px"}
+           //   minW={"284px"}
+           height={"54px"}
+           fontFamily={"Poppins"}
+           backgroundColor={"transparent"}
+           border={"1px solid #fff"}
+           color={"#fff"}
+           fontWeight={"400"}
+           margin={"0 10px"}
+           // transition="0.3s ease-in-out"
+           zIndex={"1"}
+           overflow={"hidden"}
+           padding={"0 3rem"}
+           sx={{
+             "::before": {
+               content: '""',
+               position: "absolute",
+               top: "50%",
+               left: "50%",
+               transform: "translate(-50%, -50%)",
+               width: "65px",
+               height: "65px",
+               borderRadius: "50%",
+               transition: "0.35s linear",
+               zIndex: -1,
+               bgGradient:
+                 "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+               opacity: "0",
+             },
+             "&:hover::before": {
+               width: "100%",
+               height: "120%",
+               borderRadius: "0px",
+               opacity: "1",
+             },
+             "@media (max-width: 500px)": {
+               padding: "5px 15px",
+               height: "40px",
+               fontSize: "14px",
+               margin: "0 7px",
+               bgGradient:
+                 "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+               color: "#000",
+               fontWeight: "600",
+             },
+           }}
+           _hover={{
+             color: "#000",
+             border: "1px solid white",
+             zIndex: 1,
+           }}
           >
             {SectionContent.btnContent}
           </Button>
diff --git a/src/components/BuildPage/Solve.jsx b/src/components/BuildPage/Solve.jsx
index e84d16f..e93e616 100644
--- a/src/components/BuildPage/Solve.jsx
+++ b/src/components/BuildPage/Solve.jsx
@@ -88,13 +88,34 @@ const Solve = () => {
   };
 
   return (
-    <Box backgroundColor={"#00020E"} padding={"5rem"}>
-      <Container maxW="container.xl">
+    <Box
+      backgroundColor={"#00020E"}
+      padding={"5rem"}
+      sx={{
+        "@media (max-width: 600px)": {
+          padding: "4rem 1rem",
+        },
+      }}
+    >
+      <Container
+        maxW="container.xl"
+        sx={{
+          "@media (max-width: 600px)": {
+            padding: "0rem",
+          },
+        }}
+      >
         <Text
           fontFamily={"Mona Sans"}
           fontWeight={"700"}
           fontSize={"40px"}
           color={"#fff"}
+          sx={{
+            "@media (max-width: 600px)": {
+              fontSize: "22px",
+              fontWeight: "500",
+            },
+          }}
         >
           Solving Real-World Issues And Business Problems
         </Text>
@@ -103,10 +124,21 @@ const Solve = () => {
         maxW="container.xl"
         justifyContent={"center"}
         marginTop={"4rem"}
+        sx={{
+          "@media (max-width: 600px)": {
+            marginTop: "2rem ",
+            padding: "0px",
+          },
+        }}
       >
         <SimpleGrid
           spacing={20}
           templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
+          sx={{
+            "@media (max-width: 600px)": {
+              gridGap:'10px'
+            },
+          }}
         >
           {items.map((item, index) => (
             <Card
@@ -122,8 +154,12 @@ const Solve = () => {
                   fontWeight={"600"}
                   fontSize={"20px"}
                   color={"#fff"}
+                  sx={{
+                    "@media (max-width: 600px)": {
+                      fontSize: "16px",
+                    },
+                  }}
                 >
-                  {" "}
                   {item.title}
                 </Heading>
               </CardHeader>
@@ -132,18 +168,31 @@ const Solve = () => {
                 paddingLeft={"0px"}
                 paddingRight={"0px"}
                 paddingBottom={"0px"}
-                color={"#E8E8E8"}
+                color={"#BCBCBC"}
                 fontFamily={"Poppins"}
                 fontWeight={"500"}
                 fontSize={"17px"}
+                sx={{
+                  "@media (max-width: 600px)": {
+                    fontSize: "14px",
+                  },
+                }}
               >
-                <Collapse startingHeight={55} in={expandedCardIndex === index}>
+                <Collapse
+                  startingHeight={55}
+                  in={expandedCardIndex === index}
+                  sx={{
+                    "@media (max-width: 500px)": {
+                      height: '30px' // Adjusted property to set the height
+                    }
+                  }}    
+                >
                   <Text dangerouslySetInnerHTML={{ __html: item.content }} />
                 </Collapse>
                 <Button
                   onClick={() => handleToggle(index)}
                   background={"transparent"}
-                  color={"#fff"}
+                  color={"#fff"}  
                   fontFamily={"Poppins"}
                   fontWeight={"100"}
                   fontSize={"16px"}
diff --git a/src/components/BuildPage/Tools.jsx b/src/components/BuildPage/Tools.jsx
index d6b3f82..fd3d3d7 100644
--- a/src/components/BuildPage/Tools.jsx
+++ b/src/components/BuildPage/Tools.jsx
@@ -56,20 +56,29 @@ const Tools = () => {
       backgroundRepeat={"no-repeat"}
       padding={"5rem"}
       sx={{
-        "@media (max-width: 1024px)": {
-          height: "auto",
-        },
         "@media (max-width: 600px)": {
-          fontSize: "28px",
+          padding: "4rem 1rem",
         },
       }}
     >
-      <Container maxW="container.xl">
+      <Container maxW="container.xl"
+      sx={{
+        "@media (max-width: 600px)": {
+          padding: "0rem",
+        },
+      }}
+      >
         <Text
           fontFamily={"Mona Sans"}
           fontWeight={"600"}
           fontSize={"38px"}
           color={"#fff"}
+          sx={{
+            "@media (max-width: 600px)": {
+              fontSize: "22px",
+              fontWeight:'500'
+            },
+          }}
         >
           Tools And Resources To Help You Succeed
         </Text>
@@ -119,6 +128,11 @@ const Tools = () => {
                       textAlign={"center"}
                       fontWeight={"400"}
                       dangerouslySetInnerHTML={{ __html: item.title }}
+                      sx={{
+                        "@media (max-width: 600px)": {
+                          fontSize: "16px",
+                        },
+                      }}
                     />
                   </CardBody>
                   <CardFooter
diff --git a/src/components/BuildPage/WhyBuild.jsx b/src/components/BuildPage/WhyBuild.jsx
index 0f4b0e4..69ec379 100644
--- a/src/components/BuildPage/WhyBuild.jsx
+++ b/src/components/BuildPage/WhyBuild.jsx
@@ -53,10 +53,9 @@ const WhyBuild = () => {
         maxW={"container.xl"}
         padding={"4rem"}
         sx={{
-          "@media (max-width: 1024px)": {
-            padding: "3rem",
+          "@media (max-width: 600px)": {
+            padding:'4rem 1rem'
           },
-          "@media (max-width: 435px)": {},
         }}
       >
         <Text
@@ -69,12 +68,10 @@ const WhyBuild = () => {
           textTransform={"capitalize"}
           color={"#fff"}
           sx={{
-            "@media (max-width: 1024px)": {
-              fontSize: "35px",
-            },
-            "@media (max-width: 475px)": {
-              fontSize: "26px",
+            "@media (max-width: 600px)": {
+              fontSize: "22px",
               textAlign: "center",
+              fontWeight:'500'
             },
           }}
         >
@@ -86,11 +83,10 @@ const WhyBuild = () => {
           justifyContent={"space-between"}
           gap={"2rem"}
           sx={{
-            "@media (max-width: 435px)": {
+            "@media (max-width: 600px)": {
               flexDirection: "column-reverse",
               alignItems: "center",
             },
-            "@media (max-width: 375px)": {},
           }}
         >
           <Box
@@ -99,7 +95,6 @@ const WhyBuild = () => {
               "@media (max-width: 435px)": {
                 width: "100%",
               },
-              "@media (max-width: 375px)": {},
             }}
           >
             <Accordion allowToggle defaultIndex={[0]}>
@@ -111,6 +106,11 @@ const WhyBuild = () => {
                     marginBottom={"1rem"}
                     padding={"1rem 0"}
                     key={accord.id}
+                    sx={{
+                      "@media (max-width: 600px)": {
+                        marginBottom: "0px",
+                      },
+                    }}
                   >
                     <h2>
                       <AccordionButton outline={"none"} paddingLeft={"0px"}>
@@ -123,15 +123,19 @@ const WhyBuild = () => {
                           fontSize={"28px"}
                           color={"#fff"}
                           sx={{
-                            "@media (max-width: 435px)": {
-                              fontSize: "22px",
+                            "@media (max-width: 600px)": {
+                              fontSize: "16px",
                             },
-                            "@media (max-width: 375px)": {},
                           }}
                         >
                           {accord.title}
                         </Box>
-                        <AccordionIcon color={"#fff"} fontSize={"40px"} />
+                        <AccordionIcon color={"#fff"} fontSize={"40px"} 
+                        sx={{
+                          "@media (max-width: 600px)": {
+                            fontSize: "30px",
+                          },
+                        }} />
                       </AccordionButton>
                     </h2>
                     <AccordionPanel
@@ -143,12 +147,10 @@ const WhyBuild = () => {
                       fontSize={"20px"}
                       paddingLeft={"0px"}
                       sx={{
-                        "@media (max-width: 1024px)": {
+                        "@media (max-width: 600px)": {
+                          fontSize: "14px",
                           width: "100%",
                         },
-                        "@media (max-width: 435px)": {
-                          fontSize: "18px",
-                        },
                       }}
                     >
                       <span style={{ paddingBottom: "2rem" }}>
diff --git a/src/components/Card/LearnCard.jsx b/src/components/Card/LearnCard.jsx
index d2a0c85..7ee8306 100644
--- a/src/components/Card/LearnCard.jsx
+++ b/src/components/Card/LearnCard.jsx
@@ -19,16 +19,40 @@ const LearnCard = ({ id, src, alt, text, href }) => {
         padding={"20px"}
         key={id}
         sx={{
-          "@media (max-width: 435px)": {
-            width: "390px",
+          "@media (max-width: 500px)": {
+            width: "320px",
+            fontWeight: "400",
+            minHeight: "290px",
           },
         }}
       >
-        <Box padding={"1rem"}>
-          <Image height={"60px"} src={src} alt={alt} />
+        <Box
+          padding={"1rem"}
+          sx={{
+            "@media (max-width: 600px)": {
+              padding: "0rem",
+            },
+          }}
+        >
+          <Image
+            height={"60px"}
+            src={src}
+            alt={alt}
+            sx={{
+              "@media (max-width: 600px)": {
+                height: "40px",
+              },
+            }}
+          />
         </Box>
 
-        <Box padding={"1rem"}>
+        <Box padding={"1rem"} 
+          sx={{
+            "@media (max-width: 500px)": {
+              padding: "1rem 0px",
+            },
+          }}
+        >
           <Text
             color={"#E8E8E8"}
             fontSize={"18px"}
@@ -36,6 +60,11 @@ const LearnCard = ({ id, src, alt, text, href }) => {
             marginBottom={"20px"}
             // fontWeight={"100"}
             minHeight={"100px"}
+            sx={{
+              "@media (max-width: 500px)": {
+                fontSize: "14px",
+              },
+            }}
           >
             {text}
           </Text>
@@ -70,6 +99,11 @@ const LearnCard = ({ id, src, alt, text, href }) => {
                 _hover={{
                   backgroundColor: "transparent",
                 }}
+                sx={{
+                  "@media (max-width: 500px)": {
+                    fontSize: "14px",
+                  },
+                }}
               >
                 Visit Website
               </Button>
diff --git a/src/components/Card/MobileHomeCard.jsx b/src/components/Card/MobileHomeCard.jsx
index 55e1501..4b60ae5 100644
--- a/src/components/Card/MobileHomeCard.jsx
+++ b/src/components/Card/MobileHomeCard.jsx
@@ -20,7 +20,7 @@ const MobileHomeCard = ({ key, date, text }) => {
       borderRadius={"10px"}
       sx={{
         "@media (max-width: 600px)": {
-          width: "90%",
+          width: "100%",
           margin: "0 auto",
         },
       }}
@@ -29,7 +29,7 @@ const MobileHomeCard = ({ key, date, text }) => {
         width={"502px"}
         background={"#151419"}
         borderRadius={"10px"}
-        minHeight={"415px !important"}
+        minHeight={"415px"}
         // key={key}
         sx={{
           "@media (max-width: 600px)": {
@@ -50,7 +50,13 @@ const MobileHomeCard = ({ key, date, text }) => {
             INSIGHT
           </Badge>
 
-          <Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
+          <Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}
+          sx={{
+            "@media (max-width: 600px)": {
+              margin: "15px 0px",
+            },
+          }}
+          >
             {date}
           </Text>
           <Text
@@ -59,6 +65,12 @@ const MobileHomeCard = ({ key, date, text }) => {
             marginBottom={"20px"}
             minHeight={"73px"}
             maxWidth={"460px"}
+            sx={{
+              "@media (max-width: 600px)": {
+                minHeight: "50px",
+                marginBottom: "10px",
+              },
+            }}
           >
             {text}
           </Text>
diff --git a/src/components/Card/PlaceCard.jsx b/src/components/Card/PlaceCard.jsx
index 6334b89..702b8c6 100644
--- a/src/components/Card/PlaceCard.jsx
+++ b/src/components/Card/PlaceCard.jsx
@@ -7,17 +7,17 @@ import { Link } from "react-router-dom";
 
 const PlaceCard = ({ key, text, cardicon, title, button, link }) => {
   return (
-    <Box padding={"1px"} borderRadius={"10px"}>
+    <Box borderRadius={"10px"}>
       <Box
         width={"502px"}
         background={"#46464647"}
-        borderRadius={"10px"}
-        minHeight={"350px"}
+        borderRadius={"10px"} 
+        minHeight={"350px"} 
         key={key}
         padding={"15px 20px"}
         sx={{
-          "@media (max-width: 500px)": {
-            width: "320px",
+          "@media (max-width: 600px)": {
+            width: "100%",
             fontWeight: "400",
             minHeight: "290px",
           },
diff --git a/src/components/Community/CommunityBanner.jsx b/src/components/Community/CommunityBanner.jsx
index d937b04..c9adcb0 100644
--- a/src/components/Community/CommunityBanner.jsx
+++ b/src/components/Community/CommunityBanner.jsx
@@ -83,8 +83,15 @@ const CommunityBanner = () => {
               }}
             >
               {BannerContent[0].heading1}
-            </span>{" "}
-            <br />
+            </span>
+            <br
+              sx={{
+                display: ["block", "none"], // Show by default, hide on screens less than 600px wide
+                "@media (max-width: 600px)": {
+                  display: "none", // Hide on screens less than 600px wide
+                },
+              }}
+            />
             {BannerContent[0].heading2}
           </Text>
           <Box
diff --git a/src/components/Community/CommunityCard.jsx b/src/components/Community/CommunityCard.jsx
index ae2ea08..d6c4737 100644
--- a/src/components/Community/CommunityCard.jsx
+++ b/src/components/Community/CommunityCard.jsx
@@ -152,10 +152,10 @@ const CommunityCard = () => {
           <Text
             as={"h2"}
             paddingTop={"4rem"}
-            paddingBottom={"5rem"}
+            paddingBottom={"4rem"}
             fontWeight={700}
             fontSize={"38px"}
-            textAlign={"left"}
+            textAlign={"center"}
             textTransform={"capitalize"}
             color={"#fff"}
             sx={{
diff --git a/src/components/Community/Connect.jsx b/src/components/Community/Connect.jsx
index efb561d..5df7ce4 100644
--- a/src/components/Community/Connect.jsx
+++ b/src/components/Community/Connect.jsx
@@ -60,7 +60,7 @@ const items = [
 ];
 
 const Connect = () => {
-  return (
+  return ( 
     <Box
       //   height={"80vh"}
       //   backgroundImage={`url(${banner})`}
diff --git a/src/components/Community/LearnMore.jsx b/src/components/Community/LearnMore.jsx
index 8445e2b..5fc4378 100644
--- a/src/components/Community/LearnMore.jsx
+++ b/src/components/Community/LearnMore.jsx
@@ -19,7 +19,7 @@ const LearnMore = () => {
       sx={{
         "@media (max-width: 1024px)": {
           height: "auto",
-        },
+        }, 
         "@media (max-width: 600px)": {
           fontSize: "28px",
         },
@@ -67,7 +67,7 @@ const LearnMore = () => {
             },
           }}
         >
-          {SectionContent.subContent}
+          {SectionContent.subContent}  
         </Text>
         <Text>
           <Link to="/BuildPage">
diff --git a/src/components/Community/Place.jsx b/src/components/Community/Place.jsx
index bddde97..a5e3821 100644
--- a/src/components/Community/Place.jsx
+++ b/src/components/Community/Place.jsx
@@ -48,7 +48,7 @@ const Place = () => {
   return (
     <Box
       // height={"100vh"}
-      background={"#000"}
+      background={"#000"} 
       paddingTop={"4rem"}
       paddingBottom={"4rem"}
       backgroundSize={"cover"}
@@ -64,7 +64,7 @@ const Place = () => {
         paddingLeft={"7rem"}
         // height={"50vh"}
         sx={{
-          "@media (max-width: 500px)": {
+          "@media (max-width: 600px)": {
             paddingLeft: "1rem",
           },
         }}
@@ -81,6 +81,7 @@ const Place = () => {
             "@media (max-width: 500px)": {
               fontSize: "22px",
               fontWeight: "400",
+              paddingBottom:'30px'
             },
           }}
         >
@@ -96,6 +97,9 @@ const Place = () => {
             "&::-webkit-scrollbar": {
               width: "0px",
             },
+            "@media (max-width: 600px)": {
+              padding: "0px",
+            },
           }}
         >
           {content.map((item) => (
diff --git a/src/components/Footer/MobileFooter.jsx b/src/components/Footer/MobileFooter.jsx
index ae1340d..d2fd524 100644
--- a/src/components/Footer/MobileFooter.jsx
+++ b/src/components/Footer/MobileFooter.jsx
@@ -95,7 +95,7 @@ const MobileFooter = () => {
                       color={"#B0B0B0"}
                       fontFamily={"Mona Sans"}
                       fontWeight={"500"}
-                      fontSize={"22px"}
+                      fontSize={"16px"}
                     >
                       Social
                     </Text>
diff --git a/src/components/LearnPage/Faq.jsx b/src/components/LearnPage/Faq.jsx
index 74bcd09..742cb72 100644
--- a/src/components/LearnPage/Faq.jsx
+++ b/src/components/LearnPage/Faq.jsx
@@ -194,8 +194,8 @@ export const Faq = () => {
         maxW={"container.xl"}
         padding={"5rem 4rem"}
         sx={{
-          "@media (max-width: 435px)": {
-            padding: "2rem",
+          "@media (max-width: 600px)": {
+            padding: "4rem 1rem",
           },
         }}
       >
@@ -209,11 +209,9 @@ export const Faq = () => {
           textTransform={"capitalize"}
           color={"#fff"}
           sx={{
-            "@media (max-width: 435px)": {
-              fontSize: "35px",
-            },
-            "@media (max-width: 375px)": {
-              fontSize: "28px",
+            "@media (max-width: 600px)": {
+              fontSize: "22px",
+              fontWeight: "500",
             },
           }}
         >
@@ -232,6 +230,11 @@ export const Faq = () => {
                   padding={"20px"}
                   borderRadius={"10px"}
                   background={"#161616"}
+                  sx={{
+                    "@media (max-width: 600px)": {
+                      padding: "14px",
+                    },
+                  }}
                 >
                   {({ isExpanded }) => (
                     <>
@@ -246,18 +249,33 @@ export const Faq = () => {
                             fontSize={"24px"}
                             color={"#fff"}
                             sx={{
-                              "@media (max-width: 1024px)": {},
-                              "@media (max-width: 435px)": {
-                                fontSize: "18px",
+                              "@media (max-width: 600px)": {
+                                fontSize: "14px",
                               },
                             }}
                           >
                             {accord.title}
                           </Box>
                           {isExpanded ? (
-                            <MinusIcon color={"#fff"} fontSize={"20px"} />
+                            <MinusIcon
+                              color={"#fff"}
+                              fontSize={"20px"}
+                              sx={{
+                                "@media (max-width: 600px)": {
+                                  fontSize: "14px",
+                                },
+                              }}
+                            />
                           ) : (
-                            <AddIcon color={"#fff"} fontSize={"20px"} />
+                            <AddIcon
+                              color={"#fff"}
+                              fontSize={"20px"}
+                              sx={{
+                                "@media (max-width: 600px)": {
+                                  fontSize: "14px",
+                                },
+                              }}
+                            />
                           )}
                         </AccordionButton>
                       </h2>
@@ -271,12 +289,8 @@ export const Faq = () => {
                         fontSize={"18px"}
                         paddingLeft={"0px"}
                         sx={{
-                          "@media (max-width: 1024px)": {},
-                          "@media (max-width: 435px)": {
-                            fontSize: "18px",
-                          },
-                          "@media (max-width: 375px)": {
-                            fontSize: "16px",
+                          "@media (max-width: 600px)": {
+                            fontSize: "14px",
                           },
                         }}
                       >
diff --git a/src/components/LearnPage/GetStarted.jsx b/src/components/LearnPage/GetStarted.jsx
index 27eefd8..59afa62 100644
--- a/src/components/LearnPage/GetStarted.jsx
+++ b/src/components/LearnPage/GetStarted.jsx
@@ -16,7 +16,9 @@ const GetStarted = () => {
           "@media (max-width: 1024px)": {
             padding: "3rem",
           },
-          "@media (max-width: 435px)": {},
+          "@media (max-width: 600px)": {
+            padding: "4rem 1rem",
+          },
         }}
       >
         <Text
@@ -25,16 +27,14 @@ const GetStarted = () => {
           paddingBottom={"1rem"}
           fontWeight={700}
           fontSize={"40px"}
-          textAlign={"left"}
+          textAlign={"center"}
           textTransform={"capitalize"}
           color={"#fff"}
           sx={{
-            "@media (max-width: 435px)": {
-              fontSize: "35px",
-            },
-            "@media (max-width: 375px)": {
-              fontSize: "28px",
-              textAlign: "center",
+            "@media (max-width: 600px)": {
+              fontSize: "22px",
+              fontWeight:'500',
+              paddingTop:'0rem'
             },
           }}
         >
@@ -47,19 +47,21 @@ const GetStarted = () => {
           width={"70%"}
           color={"#CFCFCF"}
           sx={{
-            "@media (max-width: 435px)": {
+            "@media (max-width: 600px)": {
+              fontSize: "14px",
               width: "100%",
             },
-            "@media (max-width: 375px)": {
-              fontSize: "16px",
-              textAlign: "center",
-            },
           }}
         >
           4 easy steps to quickly launch your dAPP
         </Text>
 
-        <Box padding={"4rem 0"}>
+        <Box padding={"4rem 0"} 
+        sx={{
+          "@media (max-width: 600px)": {
+            padding:'0rem 0'
+          },
+        }}>
           <Tabs
             defaultIndex={0}
             orientation="vertical"
@@ -82,7 +84,7 @@ const GetStarted = () => {
               justifyContent={"center"}
               sx={{
                 "@media (max-width: 435px)": {
-                  minH: "290px",
+                  // minH: "290px",
                 },
                 "@media (max-width: 375px)": {},
               }}
@@ -91,36 +93,18 @@ const GetStarted = () => {
                 {/* <Image
                   fit="cover"
                   src={getStarted}
-                  sx={{
-                    "@media (max-width: 435px)": {
-                      width: "250px",
-                    },
-                    "@media (max-width: 375px)": {},
-                  }}
                 /> */}
               </TabPanel>
               <TabPanel padding={"0px"}>
                 {/* <Image
                   fit="cover"
                   src={getStarted2}
-                  sx={{
-                    "@media (max-width: 435px)": {
-                      width: "250px",
-                    },
-                    "@media (max-width: 375px)": {},
-                  }}
                 /> */}
               </TabPanel>
               <TabPanel padding={"0px"}>
                 {/* <Image
                   fit="cover"
                   src={getStarted}
-                  sx={{
-                    "@media (max-width: 435px)": {
-                      width: "250px",
-                    },
-                    "@media (max-width: 375px)": {},
-                  }}
                 /> */}
               </TabPanel>
               <TabPanel padding={"0px"}>
@@ -128,12 +112,6 @@ const GetStarted = () => {
                   fit="cover"
                   src={getStarted3}
                   width={"300px"}
-                  sx={{
-                    "@media (max-width: 435px)": {
-                      width: "250px",
-                    },
-                    "@media (max-width: 375px)": {},
-                  }}
                 /> */}
               </TabPanel>
             </TabPanels>
@@ -146,7 +124,9 @@ const GetStarted = () => {
                 "@media (max-width: 1024px)": {
                   textAlign: "left",
                 },
-                "@media (max-width: 375px)": {},
+                "@media (max-width: 600px)": {
+                  gap:'2rem'
+                },
               }}
             >
               <Tab
@@ -160,9 +140,9 @@ const GetStarted = () => {
                   "@media (max-width: 1024px)": {
                     fontSize: "15px",
                   },
-                  "@media (max-width: 435px)": {
-                    textAlign: "center",
-                    justifyContent: "center",
+                  "@media (max-width: 600px)": {
+                    display:'block',
+                    fontSize:'14px'
                   },
                 }}
               >
@@ -189,12 +169,8 @@ const GetStarted = () => {
                 fontFamily={"Poppins"}
                 textAlign={"left"}
                 sx={{
-                  "@media (max-width: 1024px)": {
-                    fontSize: "15px",
-                  },
-                  "@media (max-width: 435px)": {
-                    textAlign: "center",
-                    justifyContent: "center",
+                  "@media (max-width: 600px)": {
+                    fontSize:'14px'
                   },
                 }}
               >
@@ -208,12 +184,9 @@ const GetStarted = () => {
                 textAlign={"left"}
                 whiteSpace={"nowrap"}
                 sx={{
-                  "@media (max-width: 1024px)": {
-                    fontSize: "15px",
-                  },
-                  "@media (max-width: 435px)": {
-                    textAlign: "center",
-                    justifyContent: "center",
+                  "@media (max-width: 600px)": {
+                    fontSize:'14px',
+                    whiteSpace:'inherit'
                   },
                 }}
               >
@@ -226,12 +199,8 @@ const GetStarted = () => {
                 fontFamily={"Poppins"}
                 textAlign={"left"}
                 sx={{
-                  "@media (max-width: 1024px)": {
-                    fontSize: "15px",
-                  },
-                  "@media (max-width: 435px)": {
-                    textAlign: "center",
-                    justifyContent: "center",
+                  "@media (max-width: 600px)": {
+                    fontSize:'14px'
                   },
                 }}
               >
diff --git a/src/components/LearnPage/LearnBanner.jsx b/src/components/LearnPage/LearnBanner.jsx
index ada9e6f..abf941b 100644
--- a/src/components/LearnPage/LearnBanner.jsx
+++ b/src/components/LearnPage/LearnBanner.jsx
@@ -26,7 +26,7 @@ const LearnBanner = () => {
       backgroundRepeat={"no-repeat"}
       backgroundSize={"cover"}
       display={"grid"}
-      placeContent={"center"}
+      placeContent={"center"}  
       sx={{
         "@media (max-width: 1024px)": {
           height: "70vh",
@@ -47,8 +47,8 @@ const LearnBanner = () => {
         marginTop={"2rem"}
         paddingLeft={"3.5rem"}
         sx={{
-          "@media (max-width: 435px)": {
-            paddingLeft: "2rem",
+          "@media (max-width: 500px)": {
+            paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
           },
         }}
       >
@@ -70,15 +70,12 @@ const LearnBanner = () => {
             letterSpacing={"1px"}
             sx={{
               "@media (max-width: 996px)": {
-                fontSize: "35px",
+                fontSize: "46px",
               },
               "@media (max-width: 600px)": {
-                fontSize: "28px",
-                marginBottom: "2rem",
-              },
-              "@media (max-width: 412px)": {
-                fontSize: "24px",
-                marginTop: "2rem",
+                fontSize: "40px",
+                marginBottom: "0rem",
+                lineHeight: "54px",
               },
             }}
           >
@@ -109,8 +106,9 @@ const LearnBanner = () => {
                 "@media (max-width: 1024px)": {
                   fontSize: "22px",
                 },
-                "@media (max-width: 600px)": {
-                  fontSize: "17px",
+                "@media (max-width: 500px)": {
+                  fontSize: "16px",
+                  lineHeight: "28px",
                 },
               }}
             >
@@ -160,6 +158,16 @@ const LearnBanner = () => {
                   borderRadius: "0px",
                   opacity: "1",
                 },
+                "@media (max-width: 500px)": {
+                  fontSize: "14px",
+                  width: "230px",
+                  height: "44px",
+                  marginTop: "2rem",
+                  bgGradient:
+                    "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                  color: "#000",
+                  fontWeight: "600",
+                },
               }}
               _hover={{
                 color: "#000",
diff --git a/src/components/LearnPage/LearnDev.jsx b/src/components/LearnPage/LearnDev.jsx
index 29a9e60..1d1d55b 100644
--- a/src/components/LearnPage/LearnDev.jsx
+++ b/src/components/LearnPage/LearnDev.jsx
@@ -75,15 +75,12 @@ const LearnDev = () => {
         color={"#fff"}
         width={"fit-content"}
         sx={{
-          "@media (max-width: 996px)": {
-            fontSize: "35px",
-          },
-          "@media (max-width: 435px)": {
-            fontSize: "26px",
-            paddingLeft: "2rem",
-          },
-          "@media (max-width: 375px)": {
-            fontSize: "",
+          "@media (max-width: 500px)": {
+            fontSize: "22px",
+            fontWeight: "400",
+            marginBottom: "30px",
+            padding:'1rem',
+            paddingBottom:'0px'
           },
         }}
       >
@@ -96,11 +93,8 @@ const LearnDev = () => {
         paddingBottom={"2rem"}
         // height={"50vh"}
         sx={{
-          "@media (max-width: 1024px)": {
-            paddingLeft: "5rem",
-          },
-          "@media (max-width: 435px)": {
-            paddingLeft: "3rem",
+          "@media (max-width: 600px)": {
+            padding: "1rem",
           },
         }}
       >
diff --git a/src/components/LearnPage/WhyRubix.jsx b/src/components/LearnPage/WhyRubix.jsx
index 252efce..fe4f485 100644
--- a/src/components/LearnPage/WhyRubix.jsx
+++ b/src/components/LearnPage/WhyRubix.jsx
@@ -51,7 +51,9 @@ const WhyRubix = () => {
           "@media (max-width: 1024px)": {
             padding: "3rem",
           },
-          "@media (max-width: 435px)": {},
+          "@media (max-width:600px)": {
+            padding: "4rem 1rem",
+          },
         }}
       >
         <Text
@@ -67,9 +69,10 @@ const WhyRubix = () => {
             "@media (max-width: 1024px)": {
               fontSize: "35px",
             },
-            "@media (max-width: 475px)": {
-              fontSize: "26px",
+            "@media (max-width: 600px)": {
+              fontSize: "22px",
               textAlign: "center",
+              marginBottom:'30px'
             },
           }}
         >
@@ -106,6 +109,12 @@ const WhyRubix = () => {
                     marginBottom={"1rem"}
                     padding={"1rem 0"}
                     key={accord.id}
+                    sx={{
+                      "@media (max-width: 600px)": {
+                        marginBottom: "0px",
+                        padding:'12px 0'
+                      },
+                    }}
                   >
                     <h2>
                       <AccordionButton outline={"none"} paddingLeft={"0px"}>
@@ -118,15 +127,14 @@ const WhyRubix = () => {
                           fontSize={"28px"}
                           color={"#fff"}
                           sx={{
-                            "@media (max-width: 435px)": {
-                              fontSize: "22px",
+                            "@media (max-width: 600px)": {
+                              fontSize: "16px",
                             },
-                            "@media (max-width: 375px)": {},
                           }}
                         >
                           {accord.title}
                         </Box>
-                        <AccordionIcon color={"#fff"} fontSize={"40px"} />
+                        <AccordionIcon color={"#fff"} fontSize={"30px"} />
                       </AccordionButton>
                     </h2>
                     <AccordionPanel
@@ -142,7 +150,7 @@ const WhyRubix = () => {
                           width: "100%",
                         },
                         "@media (max-width: 435px)": {
-                          fontSize: "18px",
+                          fontSize: "14px",
                         },
                       }}
                     >
diff --git a/src/components/MobileComponent/MobileCommunityCard.jsx b/src/components/MobileComponent/MobileCommunityCard.jsx
index b95a46c..da0eaf7 100644
--- a/src/components/MobileComponent/MobileCommunityCard.jsx
+++ b/src/components/MobileComponent/MobileCommunityCard.jsx
@@ -118,9 +118,9 @@ const individuals = [
 ];
 
 const MobileCommunityCard = () => {
-  return (
+  return ( 
     <>
-      <Box backgroundColor={"#101015"}>
+      <Box backgroundColor={"#101015"}>   
         <Container
           maxW={"container.xl"}
           padding={"0 5rem"}
@@ -131,7 +131,7 @@ const MobileCommunityCard = () => {
             },
             "@media (max-width: 500px)": {
                 padding:'0 1rem',
-                paddingBottom:'5rem'
+                paddingBottom:'0rem'
             },
           }}
         >
@@ -141,7 +141,7 @@ const MobileCommunityCard = () => {
             paddingBottom={"3rem"}
             fontWeight={700}
             fontSize={"38px"}
-            textAlign={"left"}
+            textAlign={"center"}
             textTransform={"capitalize"}
             color={"#fff"}
             sx={{
@@ -164,8 +164,7 @@ const MobileCommunityCard = () => {
               autoplay={{ delay: 3000 }}
               onSlideChange={() => console.log("slide change")}
               onSwiper={(swiper) => console.log(swiper)}
-              style={{paddingBottom:'60px',position:'relative'}}
-              
+              style={{paddingBottom:'8rem',position:'relative'}}
             >
               {individuals.map((item) => (
                 <SwiperSlide
diff --git a/src/components/MobileComponent/MobilePlace.jsx b/src/components/MobileComponent/MobilePlace.jsx
new file mode 100644
index 0000000..bf75559
--- /dev/null
+++ b/src/components/MobileComponent/MobilePlace.jsx
@@ -0,0 +1,108 @@
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import {
+  Box,
+  Container,
+  Text,
+} from "@chakra-ui/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+import Partner from "../../assets/images/partner.png";
+import PlaceCard from "../Card/PlaceCard";
+import Enterprise from "../../assets/images/enterprise.png";
+import Banner from "../../assets/images/place-banner.png";
+
+const content = [
+    {
+      id: 1,
+      title: "Partners",
+      cardicon: Partner,
+      text: `Our partners strengthen our foundation and the utility offered by the revolutionary L1 Rubix platform through the development and scaling of groundbreaking apps for ESG, media, real estate, construction, telecom, pharma, NFT, metaverse, DeFi, GameFi, cybersecurity, cloud, and more.`,
+      button: "Explore our ecosystem",
+      link: `/`,
+    },
+    {
+      id: 2,
+      title: "Enterprises",
+      cardicon: Enterprise,
+      text: `Rubix’s unique, lightweight subnet architecture and revolutionary Proof-of-Pledge protocol enables our partner DEVS to build secure, reliable, and efficient dApps that enable enterprises to realize their transformation goals.`,
+      button: "See how it works",
+      link: `/LearnPage`,
+    },
+    {
+      id: 3,
+      title: "Developers",
+      cardicon: Enterprise,
+      text: `Our developers bring the passion, knowledge, and technical resources needed to deliver next-generation Web3 and Web5 platforms and through innovative, scalable solutions.`,
+      button: "Start Building",
+      link: `/BuildPage`,
+    },
+    {
+      id: 4,
+      title: "Advisors",
+      cardicon: Enterprise,
+      text: `Our Advisors Share Our Passion For Making This Word A Better Place Through Web3. They Inspire Our Core Team To Change The Status Quo And Make The Impossible Possible.`,
+      button: "Contact Us",
+      link: `/Contact`,
+    },
+  ];
+  
+  const Content = {
+    heading: `Find your place at the table`,
+  };
+
+const MobilePlace = () => {
+  return (
+    <>
+      <Box backgroundColor={"#000"}>
+        <Container maxW={"container.xl"} padding={"4rem 1rem"}>
+          <Text
+            as={"h2"}
+            paddingBottom={"35px"}
+            fontWeight={400}
+            fontSize={"22px"}
+            textAlign={"center"}
+            textTransform={"capitalize"}
+            color={"#fff"}
+          >
+            Tools And Resources To Help You Succeed
+          </Text>
+          <Swiper
+            spaceBetween={20}
+            slidesPerView={1}
+            style={{ paddingBottom: "3rem", position: "relative" }}
+            pagination={true}
+            modules={[Navigation, Pagination, Autoplay]}
+            loop={true}
+            autoplay={{
+              delay: 2500,
+              disableOnInteraction: false,
+            }}
+          >
+            {content.map((item) => (
+              <SwiperSlide
+                // height={"100vh"}
+                background={"#101015"}
+                backgroundSize={"cover"}
+                backgroundRepeat={"no-repeat"}
+              >
+                <PlaceCard
+                  key={item.id}
+                  cardicon={item.cardicon}
+                  title={item.title}
+                  date={item.date}
+                  text={item.text}
+                  button={item.button}
+                  link={item.link}
+                />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </Container>
+      </Box>
+    </>
+  );
+};
+
+export default MobilePlace;
diff --git a/src/components/MobileComponent/MobileSolve.jsx b/src/components/MobileComponent/MobileSolve.jsx
new file mode 100644
index 0000000..b947ee6
--- /dev/null
+++ b/src/components/MobileComponent/MobileSolve.jsx
@@ -0,0 +1,166 @@
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Box,
+  Container,
+  SimpleGrid,
+  Heading,
+  Button,
+  Text,
+  Image,
+  Divider,
+  Collapse,
+} from "@chakra-ui/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+import image1 from "../../assets/images/dollar.png";
+import token from "../../assets/images/token.png";
+import collab from "../../assets/images/collab.png";
+import loyalty from "../../assets/images/loyalty.png";
+import logistics from "../../assets/images/logistics.png";
+import action from "../../assets/images/action.png";
+import { useState } from "react";
+
+const items = [
+  {
+    id: 1,
+    img: image1,
+    title: "DeFi Apps",
+    content: `Use Rubix to develop a variety of DeFi apps. 
+                  Rubix can also help you with improving payment processing, 
+                  money transfers, record keeping, and compliance reporting.`,
+  },
+  {
+    id: 2,
+    img: token,
+    title: "Tokenization",
+    content: `Rubix allows you to build ultra-scalable, interoperable, 
+                  and permissioned networks to build asset tokenization use cases across industries at low or no cost, 
+                  without any intermediaries.
+  `,
+  },
+  {
+    id: 3,
+    img: collab,
+    title: "Data Collaboration",
+    content: `Rubix in tandem with the right privacy-enhancing tools, can help organisations build trustless and permissionless data collaboration use cases.
+                  The plethora of use cases could range from simple insight sharing to running acquisition campaigns on second-party data or 
+                  non-competing brands building federated learning-based look-alike models without sharing PII data with each other.`,
+  },
+  {
+    id: 4,
+    img: loyalty,
+    title: "Brand Loyalty",
+    content: `Build token-gated NFTs to provide a tiered experience to different segments. Mount ROI enhancing cross-brand open loyalty programs.
+                 Brands looking for innovative mechanisms to engage and retain customers can quickly build token-gated NFTs to provide a tiered experience to different segments.
+                 Using smart contracts and secondary tokens, ROI enhancing cross-brand open loyalty programs can easily be mounted
+                 `,
+  },
+  {
+    id: 5,
+    img: logistics,
+    title: "Supply Chain And logistics",
+    content: `Supply chain management is complex. Leverage Rubix to track goods, automate your process, improve your workflow, share data transparently, increase efficiency, deliver quality, and save money.`,
+  },
+  {
+    id: 6,
+    img: action,
+    title: "ESG & Climate Action",
+    content: `Rubix has a number of applications, from decentralising and gamifying climate action to enabling businesses to meet net zero targets, streamlining ESG reporting, and improving carbon markets, climate finance, and beyond`,
+  },
+];
+
+const MobileSolve = () => {
+  const [collapseStates, setCollapseStates] = useState(items.map(() => false));
+  const [expandedCardIndex, setExpandedCardIndex] = useState(null);
+  const handleToggle = (index) => {
+    setExpandedCardIndex((prevIndex) => (prevIndex === index ? null : index));
+    setCollapseStates((prevStates) => {
+      const updatedStates = [...prevStates];
+      updatedStates[index] = !updatedStates[index];
+      return updatedStates;
+    });
+  };
+
+  return (
+    <>
+      <Box backgroundColor={"#00020E"}>
+        <Container
+          maxW={"container.xl"}
+          padding={"4rem 1rem"}
+        >
+          <Text
+            as={"h2"}
+            paddingBottom={"30px"}
+            marginBottom={"0px"}
+            fontWeight={400}
+            fontSize={"22px"}
+            textAlign={"center"}
+            textTransform={"capitalize"}
+            color={"#fff"}
+          >
+            Tools And Resources To Help You Succeed
+          </Text>
+          <Swiper
+            spaceBetween={20}
+            slidesPerView={1}
+            style={{ paddingBottom: "3rem", position: "relative" }}
+            pagination={true}
+            modules={[Navigation, Pagination, Autoplay]}
+            loop={true}
+            autoplay={{
+              delay: 2500,
+              disableOnInteraction: false,
+            }}
+          >
+            {items.map((item, index) => (
+              <SwiperSlide
+                // height={"100vh"}
+                background={"#00020E"}
+                backgroundSize={"cover"}
+                backgroundRepeat={"no-repeat"}
+              >
+                <Card
+                  backgroundColor={"#00020E"}
+                  key={item.id}
+                >
+                  <CardHeader paddingLeft={"0px"} paddingRight={"0px"}>
+                    <Image src={item.img} marginBottom={"20px"} />
+                    <Heading
+                      size="md"
+                      fontFamily={"Mona Sans"}
+                      fontWeight={"400"}
+                      fontSize={"16px"}
+                      color={"#fff"}
+                    >
+                      {item.title}
+                    </Heading>
+                  </CardHeader>
+                  <Divider color={"#fff"} />
+                  <CardBody
+                    paddingLeft={"0px"}
+                    paddingRight={"0px"}
+                    paddingBottom={"0px"}
+                    color={"#BCBCBC"}
+                    fontFamily={"Poppins"}
+                    fontWeight={"500"}
+                    fontSize={"14px"}
+                  >
+                    {item.content}
+                  </CardBody>
+                </Card>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </Container>
+      </Box>
+    </>
+  );
+};
+
+export default MobileSolve;
diff --git a/src/components/MobileComponent/MobileSubnet.jsx b/src/components/MobileComponent/MobileSubnet.jsx
index 0853b81..c760f62 100644
--- a/src/components/MobileComponent/MobileSubnet.jsx
+++ b/src/components/MobileComponent/MobileSubnet.jsx
@@ -19,11 +19,16 @@ const MobileSubnet = () => {
         navigation={false}
         modules={[Navigation, Pagination, Autoplay]}
         loop={true}
-        // autoplay={{
-        //   delay: 2500,
-        //   disableOnInteraction: false,
-        // }}
-        style={{ backgroundColor: "#000" }}
+        slidesPerView={1}
+        style={{
+          backgroundColor: "#000",
+          paddingBottom: "3rem",
+          position: "relative",
+        }}
+        autoplay={{
+          delay: 2500,
+          disableOnInteraction: false,
+        }}
       >
         <SwiperSlide>
           <Box
@@ -43,7 +48,7 @@ const MobileSubnet = () => {
                 <Text
                   as={"h2"}
                   paddingTop={"2rem"}
-                  fontWeight={700}
+                  fontWeight={500}
                   fontSize={"20px"}
                   textTransform={"capitalize"}
                   color={"#fff"}
@@ -72,20 +77,22 @@ const MobileSubnet = () => {
                   <Text
                     as={"h2"}
                     paddingTop={"2rem"}
-                    fontWeight={700}
-                    fontSize={"20px"}
+                    fontWeight={500}
+                    fontSize={"16px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
                   >
                     P2P
                   </Text>
                   <UnorderedList color={"#E1E1E1"}>
-                    <ListItem>Only L1 powering full mobile nodes</ListItem>
-                    <ListItem>
+                    <ListItem fontSize={"14px"}>
+                      Only L1 powering full mobile nodes
+                    </ListItem>
+                    <ListItem fontSize={"14px"}>
                       Mobile nodes with full state data will settle P2P .
                       Consensus provided by nearby node validators.
                     </ListItem>
-                    <ListItem>
+                    <ListItem fontSize={"14px"}>
                       High scalability, Partition tolerance and portability
                     </ListItem>
                   </UnorderedList>
@@ -95,20 +102,22 @@ const MobileSubnet = () => {
                   <Text
                     as={"h2"}
                     paddingTop={"2rem"}
-                    fontWeight={700}
-                    fontSize={"20px"}
+                    fontWeight={500}
+                    fontSize={"16px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
                   >
                     Self Sovereign
                   </Text>
                   <UnorderedList color={"#E1E1E1"}>
-                    <ListItem>
+                    <ListItem fontSize={"14px"}>
                       Permissioned subnets with no oracles and <br />{" "}
                       intermediaries
                     </ListItem>
-                    <ListItem>INo block space ransom</ListItem>
-                    <ListItem>
+                    <ListItem fontSize={"14px"}>
+                      INo block space ransom
+                    </ListItem>
+                    <ListItem fontSize={"14px"}>
                       Zero risk of transactions being blocked out of <br />
                       chain.
                     </ListItem>
@@ -119,8 +128,8 @@ const MobileSubnet = () => {
                   <Text
                     as={"h2"}
                     paddingTop={"2rem"}
-                    fontWeight={700}
-                    fontSize={"20px"}
+                    fontWeight={500}
+                    fontSize={"16px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
                   >
@@ -141,19 +150,19 @@ const MobileSubnet = () => {
                   <Text
                     as={"h2"}
                     paddingTop={"2rem"}
-                    fontWeight={700}
-                    fontSize={"20px"}
+                    fontWeight={500}
+                    fontSize={"16px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
                   >
                     cheaper
                   </Text>
                   <UnorderedList color={"#E1E1E1"}>
-                    <ListItem>No GAS fees</ListItem>
-                    <ListItem>
+                    <ListItem fontSize={"14px"}>No GAS fees</ListItem>
+                    <ListItem fontSize={"14px"}>
                       Incremental and modular infrastructure ask
                     </ListItem>
-                    <ListItem>
+                    <ListItem fontSize={"14px"}>
                       No expensive re training of development <br />
                       resources
                     </ListItem>
diff --git a/src/components/MobileComponent/MobileSubnet2.jsx b/src/components/MobileComponent/MobileSubnet2.jsx
index 647f0d5..854fdbf 100644
--- a/src/components/MobileComponent/MobileSubnet2.jsx
+++ b/src/components/MobileComponent/MobileSubnet2.jsx
@@ -21,7 +21,7 @@ const MobileSubnet2 = () => {
           <Text
             as={"h2"}
             paddingTop={"2rem"}
-            fontWeight={700}
+            fontWeight={500}
             fontSize={"20px"}
             textTransform={"capitalize"}
             color={"#fff"}
@@ -50,14 +50,14 @@ const MobileSubnet2 = () => {
             <Text
               as={"h2"}
               paddingTop={"2rem"}
-              fontWeight={700}
-              fontSize={"20px"}
+              fontWeight={500}
+              fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
             >
               01. Decentralisation
             </Text>
-            <Text color={"#E1E1E1"}>
+            <Text fontSize={"14px"} color={"#E1E1E1"}>
               Rubix Decentralised Identity( DID) issued at L1 is the foundation
               for building digital ownership enhancing applications.
             </Text>
@@ -67,14 +67,14 @@ const MobileSubnet2 = () => {
             <Text
               as={"h2"}
               paddingTop={"2rem"}
-              fontWeight={700}
-              fontSize={"20px"}
+              fontWeight={500}
+              fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
             >
               02. Ultra Scalability
             </Text>
-            <Text color={"#E1E1E1"}>
+            <Text fontSize={"14px"} color={"#E1E1E1"}>
               Unlike monolithic chains which become centralized and introduce
               latency to achieve high throughput, in the Rubix object chain
               architecture, where mobile nodes have real time full state data,
@@ -86,15 +86,14 @@ const MobileSubnet2 = () => {
             <Text
               as={"h2"}
               paddingTop={"2rem"}
-              fontWeight={700}
-              fontSize={"20px"}
+              fontWeight={500}
+              fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
             >
               03. Data Security and Privacy
             </Text>
-            <Text color={"#E1E1E1"}>
-              {" "}
+            <Text fontSize={"14px"} color={"#E1E1E1"}>
               Rubix Decentralised Identity(DID) issued at L1 is the foundation
               for building digital ownership enhancing applications
             </Text>
diff --git a/src/components/MobileComponent/MobileSubnet3.jsx b/src/components/MobileComponent/MobileSubnet3.jsx
index 7947126..01126ff 100644
--- a/src/components/MobileComponent/MobileSubnet3.jsx
+++ b/src/components/MobileComponent/MobileSubnet3.jsx
@@ -23,7 +23,7 @@ const MobileSubnet3 = () => {
           <Text
             as={"h2"}
             paddingTop={"2rem"}
-            fontWeight={700}
+            fontWeight={500}
             fontSize={"20px"}
             textTransform={"capitalize"}
             color={"#fff"}
@@ -53,15 +53,15 @@ const MobileSubnet3 = () => {
             <Text
               as={"h2"}
               paddingTop={"1rem"}
-              fontWeight={700}
-              fontSize={"20px"}
+              fontWeight={500}
+              fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
             >
               Single Comprehensive Stack :
             </Text>
             <UnorderedList color={"#E1E1E1"}>
-              <ListItem>
+              <ListItem fontSize={"14px"}>
                 Full Mobile node SDK, Smart Contracts, DIDs, Secondary tokens (
                 FTs and NFTs) all in one place.
               </ListItem>
@@ -71,15 +71,15 @@ const MobileSubnet3 = () => {
             <Text
               as={"h2"}
               paddingTop={"2rem"}
-              fontWeight={700}
-              fontSize={"20px"}
+              fontWeight={500}
+              fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
             >
               High Partition Tolerance :
             </Text>
             <UnorderedList color={"#E1E1E1"}>
-              <ListItem>
+              <ListItem fontSize={"14px"}>
                 Issues in one shard wont affect other shards performance
               </ListItem>
             </UnorderedList>
@@ -88,45 +88,45 @@ const MobileSubnet3 = () => {
             <Text
               as={"h2"}
               paddingTop={"2rem"}
-              fontWeight={700}
-              fontSize={"20px"}
+              fontWeight={500}
+              fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
             >
               Fully Deterministic :
             </Text>
             <UnorderedList color={"#E1E1E1"}>
-              <ListItem>Apps can bring Own Block space( BYOB)</ListItem>
+              <ListItem fontSize={"14px"}>Apps can bring Own Block space( BYOB)</ListItem>
             </UnorderedList>
           </Box>
           <Box>
             <Text
               as={"h2"}
               paddingTop={"2rem"}
-              fontWeight={700}
-              fontSize={"20px"}
+              fontWeight={500}
+              fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
             >
               Unique token/object based architecture :
             </Text>
             <UnorderedList color={"#E1E1E1"}>
-              <ListItem>Build unlimited FTs and NFTs all at L1!!</ListItem>
+              <ListItem fontSize={"14px"}>Build unlimited FTs and NFTs all at L1!!</ListItem>
             </UnorderedList>
           </Box>
           <Box>
             <Text
               as={"h2"}
               paddingTop={"2rem"}
-              fontWeight={700}
-              fontSize={"20px"}
+              fontWeight={500}
+              fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
             >
               Green by the design :
             </Text>
             <UnorderedList color={"#E1E1E1"}>
-              <ListItem>
+              <ListItem fontSize={"14px"}>
                 100,000 Rubix transactions consume &lt; 10 kWh <br /> &lt;
                 100000 Visa transactions
               </ListItem>
@@ -137,8 +137,8 @@ const MobileSubnet3 = () => {
             <Text
               as={"h2"}
               paddingTop={"2rem"}
-              fontWeight={700}
-              fontSize={"20px"}
+              fontWeight={500}
+              fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
             >
diff --git a/src/components/MobileComponent/PartnerMobile.jsx b/src/components/MobileComponent/PartnerMobile.jsx
index 080269b..1f526c1 100644
--- a/src/components/MobileComponent/PartnerMobile.jsx
+++ b/src/components/MobileComponent/PartnerMobile.jsx
@@ -77,10 +77,11 @@ export default function PartnerMobile() {
       width={"full"}
       overflow={"hidden"}
       height={"auto"}
-      background={"#101015"}
+      background={"#000"}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
-      padding={"1rem"}
+      padding={"1rem"} 
+      paddingBottom={"4rem"}
     >
       <Text
         as={"h2"}
diff --git a/src/components/MobileComponent/ResourcesMobile.jsx b/src/components/MobileComponent/ResourcesMobile.jsx
index a06a43d..4e2925b 100644
--- a/src/components/MobileComponent/ResourcesMobile.jsx
+++ b/src/components/MobileComponent/ResourcesMobile.jsx
@@ -44,18 +44,19 @@ const ResourcesMobile = () => {
         textTransform={"capitalize"}
         color={"#fff"}
         sx={{
-          "@media (max-width: 435px)": {
-            fontSize: "26px",
+          "@media (max-width: 600px)": {
+            fontSize: "22px",
+            fontWeight:'500'
           },
-          "@media (max-width: 375px)": {},
         }}
       >
         {Content.heading}
       </Text>
       <Swiper
         pagination={true}
-        navigation={true}
+        // navigation={true}
         modules={[Navigation, Pagination, Autoplay]}
+        style={{ paddingBottom: "4rem", position: "relative" }}
         loop={true}
         autoplay={{
           delay: 2500,
@@ -65,7 +66,7 @@ const ResourcesMobile = () => {
         {content.map((item) => (
           <>
             <SwiperSlide>
-              <MobileHomeCard key={item.id} date={item.date} text={item.text} />
+                <MobileHomeCard key={item.id} date={item.date} text={item.text} />
             </SwiperSlide>
           </>
         ))}
diff --git a/src/components/MobileComponent/ToolMobile.jsx b/src/components/MobileComponent/ToolMobile.jsx
new file mode 100644
index 0000000..62ef393
--- /dev/null
+++ b/src/components/MobileComponent/ToolMobile.jsx
@@ -0,0 +1,146 @@
+import React from "react";
+import { Swiper, SwiperSlide } from "swiper/react";
+import {
+  Box,Container,Text, Image,Card,CardBody,CardFooter,CardHeader, } from "@chakra-ui/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
+import read from "../../assets/images/read.png";
+import support from "../../assets/images/support.png";
+import access from "../../assets/images/access.png";
+import wallet from "../../assets/images/wallet.png";
+import arrow from "../../assets/images/toolArrow.png";
+import { Link } from "react-router-dom";
+
+const items = [
+  {
+    id: 1,
+    img: read,
+    title: "Read our </br> Resources",
+    link: `/`,
+  },
+  {
+    id: 2,
+    img: support,
+    title: "Reach Out To Us </br> For Support",
+    link: `/Contact`,
+  },
+  {
+    id: 3,
+    img: access,
+    title: "Access The </br> Developer Portal",
+    link: `https://learn.rubix.net/node-setup/`,
+  },
+  {
+    id: 4,
+    img: wallet,
+    title: "Wallet",
+    link: `https://getfexr.com/`,
+  },
+];
+
+const ToolMobile = () => {
+  return (
+    <>
+      <Box backgroundColor={"#000"}>
+        <Container
+          maxW={"container.xl"}
+          padding={"4rem 1rem"}
+        >
+          <Text
+            as={"h2"}
+            paddingBottom={"35px"}
+            fontWeight={400}
+            fontSize={"22px"}
+            textAlign={"center"}
+            textTransform={"capitalize"}
+            color={"#fff"}
+          >
+            Tools And Resources To Help You Succeed
+          </Text>
+          <Swiper
+            spaceBetween={20}
+            slidesPerView={2}
+            style={{ paddingBottom: "3rem", position: "relative" }}
+            pagination={true}
+            modules={[Navigation, Pagination, Autoplay]}
+            loop={true}
+            autoplay={{
+              delay: 2500,
+              disableOnInteraction: false,
+            }}
+          >
+            {items.map((item) => (
+              <SwiperSlide
+              // height={"100vh"}
+              background={"#101015"}
+              backgroundSize={"cover"}
+              backgroundRepeat={"no-repeat"}
+            >
+                <Box
+                  backgroundImage={
+                    "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f866), color-stop(0.67, #f8697a9e));"
+                  }
+                  padding={"1px"}
+                  borderRadius={"10px"}
+                  key={item.id}
+                >
+                  <Card
+                    background={"#131313"}
+                    borderRadius={"10px"}
+                    height={"100%"}
+                  >
+                    <CardHeader
+                      display={"flex"}
+                      justifyContent={"center"}
+                      paddingBottom={"15px"}
+                    >
+                      <Image height={"50px"} src={item.img} />
+                    </CardHeader>
+                    <CardBody
+                      padding={"0px"}
+                      display={"grid"}
+                      placeContent={"center"}
+                    >
+                      <Text
+                        color={"#fff"}
+                        fontFamily={"Poppins"}
+                        fontSize={"14px"}
+                        height={"45px"}
+                        textAlign={"center"}
+                        fontWeight={"400"}
+                        dangerouslySetInnerHTML={{ __html: item.title }}
+                      />
+                    </CardBody>
+                    <CardFooter
+                      justifyContent={"center"}
+                      cursor={"pointer"}
+                      paddingTop={"15px"}
+                    >
+                      {item.link && (
+                        <Link
+                          to={item.link}
+                          target={item.link.startsWith("http") ? "_blank" : ""}
+                        >
+                          <Image width={"30px"}
+                            src={arrow}
+                            transition="all .5s"
+                            _hover={{
+                              transform: "rotate(45deg)",
+                            }}
+                          />
+                        </Link>
+                      )}
+                    </CardFooter>
+                  </Card>
+                </Box>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </Container>
+      </Box>
+    </>
+  );
+};
+
+export default ToolMobile;
diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx
index 6e8cdcd..409be22 100644
--- a/src/components/MobileMenu/MobileMenu.jsx
+++ b/src/components/MobileMenu/MobileMenu.jsx
@@ -85,8 +85,8 @@ export const MobileMenu = () => {
         justifyContent={"space-between"}
         alignItems={"center"}
         width={"100%"}
-        padding={"1rem 1rem"}
-        paddingTop={"3rem"}
+        padding={"2rem 1rem"}
+        // paddingTop={"3rem"}
         sx={{
           "@media (max-width: 1024px)": {},
           "@media (max-width: 375px)": {
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index 429eed8..328e0c6 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -1,4 +1,5 @@
-/* eslint-disable no-unused-vars */
+// / eslint-disable no-unused-vars /
+// / eslint-disable no-unused-vars /;
 import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
 import { Fade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
@@ -15,33 +16,33 @@ import { ScrollTrigger } from "gsap/ScrollTrigger";
 // Initialize ScrollTrigger
 gsap.registerPlugin(ScrollTrigger);
 
-const SubnetContent = {
-  heading: `decentralised Auto Syncing subnets`,
-};
+// const SubnetContent = {
+//   heading: `decentralised Auto Syncing subnets`,
+// };
 
 export const NewSubnetComp = () => {
-  const firstBoxRef = useRef(null);
-  const secondBoxRef = useRef(null);
-  const thirdBoxRef = useRef(null);
-  const mainBox = useRef(null);
+  // const firstBoxRef = useRef(null);
+  // const secondBoxRef = useRef(null);
+  // const thirdBoxRef = useRef(null);
+  // const mainBox = useRef(null);
 
   useEffect(() => {
     // gsap.set(firstBoxRef.current, { opacity: 1 });
-    let tl = gsap
-      .timeline({
-        scrollTrigger: {
-          trigger: mainBox.current,
-          start: "top top",
-          scrub: 1,
-          pin: true,
-          end: "bottom bottom-=500vh",
-          markers: false,
-        },
-      })
-      .fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 })
-      .fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 })
-      .fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 })
-      .fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 });
+    // let tl = gsap
+    //   .timeline({
+    //     scrollTrigger: {
+    //       trigger: mainBox.current,
+    //       start: "top top",
+    //       scrub: 1,
+    //       pin: true,
+    //       end: "bottom bottom-=500vh",
+    //       markers: false,
+    //     },
+    //   })
+    //   .fromTo(firstBoxRef.current, { opacity: 1 }, { opacity: 0 })
+    //   .fromTo(secondBoxRef.current, { opacity: 0 }, { opacity: 1 })
+    //   .fromTo(secondBoxRef.current, { opacity: 1 }, { opacity: 0 })
+    //   .fromTo(thirdBoxRef.current, { opacity: 0 }, { opacity: 1 });
 
     // .fromTo(
     //   firstBoxRef.current,
@@ -65,7 +66,7 @@ export const NewSubnetComp = () => {
     // );
 
     return () => {
-      tl.kill();
+      // tl.kill();
     };
   }, []);
 
@@ -77,18 +78,18 @@ export const NewSubnetComp = () => {
       }}
     >
       <Box
-        ref={mainBox}
-        height={"100vh"}
-        position={"relative"}
-        display={"flex"}
-        justifyContent={"center"}
-        alignItems={"center"}
+        // ref={mainBox}
+        height={"auto"}
+        // position={"relative"}
+        // display={"flex"}
+        // justifyContent={"center"}
+        // alignItems={"center"}
       >
         <Box
-          ref={firstBoxRef}
-          position={"absolute"}
-          top={"0"}
-          left={"0"}
+          // ref={firstBoxRef}
+          // position={"absolute"}
+          // top={"0"}
+          // left={"0"}
           height={"100vh"}
           width={"100%"}
           backgroundColor={"#000"}
@@ -98,13 +99,14 @@ export const NewSubnetComp = () => {
           <Container
             maxW="container.xl"
             textAlign={"center"}
-            height={"100vh"}
+            // height={"100vh"}
             display={"grid"}
+            // p={10}
+            paddingTop={"4rem"}
             alignContent={"center"}
           >
             <Text
               as={"h2"}
-              paddingTop={"2rem"}
               fontWeight={700}
               fontSize={"40px"}
               textTransform={"capitalize"}
@@ -116,7 +118,7 @@ export const NewSubnetComp = () => {
                 },
               }}
             >
-              {SubnetContent.heading}
+              decentralised Auto Syncing subnets
             </Text>
             <Box
               display={"grid"}
@@ -194,21 +196,21 @@ export const NewSubnetComp = () => {
         </Box>
 
         <Box
-          backgroundColor={"#000"}
-          height={"100vh"}
+          backgroundColor={"#101015"}
+          // height={"100vh"}
           width={"100%"}
           padding={"0 5rem"}
           paddingBottom={"2rem"}
-          ref={secondBoxRef}
-          position={"absolute"}
-          top={"0"}
-          left={"0"}
+          // ref={secondBoxRef}
+          // position={"absolute"}
+          // top={"0"}
+          // left={"0"}
           display={"grid"}
           placeContent={"center"}
         >
           <Text
             as={"h2"}
-            paddingTop={"2rem"}
+            paddingTop={"4rem"}
             fontWeight={700}
             fontSize={"40px"}
             textTransform={"capitalize"}
@@ -310,16 +312,16 @@ export const NewSubnetComp = () => {
           width={"100%"}
           padding={"2rem"}
           // paddingBottom={"2rem"}
-          ref={thirdBoxRef}
-          position={"absolute"}
-          top={"0"}
-          left={"0"}
+          // ref={thirdBoxRef}
+          // position={"absolute"}
+          // top={"0"}
+          // left={"0"}
           display={"grid"}
           placeContent={"center"}
         >
           <Text
             as={"h2"}
-            paddingTop={"2rem"}
+            paddingTop={"5rem"}
             fontWeight={700}
             fontSize={"40px"}
             textTransform={"capitalize"}
diff --git a/src/components/UseCase/UseCase.jsx b/src/components/UseCase/UseCase.jsx
index 4fe8a03..a9620de 100644
--- a/src/components/UseCase/UseCase.jsx
+++ b/src/components/UseCase/UseCase.jsx
@@ -16,6 +16,11 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
         backgroundRepeat={"no-repeat"}
         backgroundSize={"cover"}
         position="relative"
+        sx={{
+          "@media (max-width: 600px)": {
+            height: "400px",
+          },
+        }}
       >
         <Box
           position="absolute"
@@ -29,16 +34,41 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
           alignItems={"center"}
           flexDirection={"column"}
         >
-          <Box w={"50vw"}>
+          <Box
+            w={"50vw"}
+            sx={{
+              "@media (max-width: 600px)": {
+                width: "100vw",
+                padding: "2rem",
+              },
+            }}
+          >
             <Text
               textAlign={"center"}
-              className="rubix-text-heading-2 rubix-fw-700"
+              className="rubix-fw-700"
+              fontSize={"40px"}
+              fontFamily={"Mona Sans"}
+              color={"#fff"}
+              sx={{
+                "@media (max-width: 600px)": {
+                  fontSize: "30px",
+                },
+              }}
             >
               {bannerHeading}
             </Text>
             <Text
               textAlign={"center"}
-              className="rubix-text-medium rubix-fw-500"
+              className="rubix-fw-500"
+              fontSize={"20px"}
+              fontFamily={"Poppins"}
+              color={"#fff"}
+              sx={{
+                "@media (max-width: 600px)": {
+                  fontSize: "16px",
+                },
+              }}
+              
             >
               {bannerSubHeading}
             </Text>
@@ -67,33 +97,72 @@ const UseCase = ({ useCase, bannerImage, bannerHeading, bannerSubHeading }) => {
               gap={7}
               pt={5}
               width={"85vw"}
+              sx={{
+                "@media (max-width: 600px)": {
+                  width: "100%",
+                },
+              }}
             >
               {/* ========[ Head-Para ]====== */}
-              <Box width={"65vw"}>
+              <Box width={"65vw"}
+              sx={{
+                "@media (max-width: 600px)": {
+                  width: "100%",
+                },
+              }}
+              >
                 <Text
                   style={{ marginBottom: 6 }}
                   className="rubix-fw-500"
                   fontSize="3xl"
                   textColor={"#ffffff"}
+                  sx={{
+                    "@media (max-width: 600px)": {
+                      fontSize: "22px",
+                    },
+                  }}
                 >
                   {useCaseHeading}
                 </Text>
-                <Text textColor={"#ffffff"} fontSize="xl">
+                <Text textColor={"#ffffff"} fontSize="xl" 
+                sx={{
+                  "@media (max-width: 600px)": {
+                    fontSize: "14px",
+                  },
+                }}
+                >
                   {useCaseSubHeading}
                 </Text>
               </Box>
 
               {useCaseDetails.map(({ title, description }, index) => (
-                <Box width={"75vw"}>
+                <Box width={"75vw"}
+                sx={{
+                  "@media (max-width: 600px)": {
+                    width: "100%",
+                  },
+                }}
+                >
                   <Text
                     style={{ marginBottom: 6 }}
                     className="rubix-fw-500"
                     fontSize="2xl"
                     textColor={"#ffffff"}
+                    sx={{
+                      "@media (max-width: 600px)": {
+                        fontSize: "16px",
+                      },
+                    }}
                   >
                     {title}
                   </Text>
-                  <Text textColor={"#ffffff"} fontSize="lg">
+                  <Text textColor={"#ffffff"} fontSize="lg"
+                  sx={{
+                    "@media (max-width: 600px)": {
+                      fontSize: "14px",
+                    },
+                  }}
+                  >
                     {description}
                   </Text>
                 </Box>
diff --git a/src/index.css b/src/index.css
index 97bf3a4..f9291bf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -103,11 +103,11 @@ span.swiper-pagination-bullet {
 }
 
 .swiper-pagination-bullet {
-  background: #383838 !important;
+  background: #383838;
 }
 
 .swiper-pagination-bullet-active {
-  background: #fff !important;
+  background: #fff ;
 }
 
 @media only screen and (max-width: 600px) {
@@ -125,12 +125,18 @@ span.swiper-pagination-bullet {
   }
 
   .swiper-button-next {
-    right: -8px;
+    right: -8px; 
   }
 
   .swiper-button-prev {
     left: -8px;
   }
+  .team-slider .swiper-button-prev {
+    left: 28px;
+  }
+  .team-slider .swiper-button-next {
+    right: 28px;
+  }
 }
 /* html {
   font-family: "Mona Sans";
diff --git a/src/pages/BuildPage.jsx b/src/pages/BuildPage.jsx
index 56c5c22..92c061f 100644
--- a/src/pages/BuildPage.jsx
+++ b/src/pages/BuildPage.jsx
@@ -3,21 +3,40 @@ import WhyBuild from "../components/BuildPage/WhyBuild";
 import Solve from "../components/BuildPage/Solve";
 import Tools from "../components/BuildPage/Tools";
 import Connect from "../components/BuildPage/Connect";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import Footer from "../components/Footer/Footer";
 import LearnMore from "../components/BuildPage/LearnMore";
+import ToolMobile from "../components/MobileComponent/ToolMobile";
+import MobileSolve from "../components/MobileComponent/MobileSolve";
 
 const BuildPage = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   useEffect(() => {
     // Scroll to the top of the page when the component mounts
     window.scrollTo(0, 0);
   }, []);
-  return (
+
+  const isMobile = windowWidth <= 996;
+
+  return ( 
     <>
       <BuildBanner />
       <WhyBuild />
-      <Solve />
-      <Tools />
+      {!isMobile ? <Solve /> : <MobileSolve />}
+      {!isMobile ? <Tools /> : <ToolMobile />}
       <Connect />
       <LearnMore />
       <Footer />
diff --git a/src/pages/Community.jsx b/src/pages/Community.jsx
index ecb5d87..773cb21 100644
--- a/src/pages/Community.jsx
+++ b/src/pages/Community.jsx
@@ -9,6 +9,7 @@ import LearnMore from "../components/Community/LearnMore";
 import Footer from "../components/Footer/Footer";
 import MobileCommunityCard from "../components/MobileComponent/MobileCommunityCard";
 import { useEffect, useState } from "react";
+import MobilePlace from "../components/MobileComponent/MobilePlace";
 
 const Community = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -36,11 +37,11 @@ const Community = () => {
     <>
       <CommunityBanner />
       {!isMobile ? <CommunityCard /> : <MobileCommunityCard />}
-      <Place />
+      {!isMobile ? <Place /> : <MobilePlace />}
       <Connect />
       {/* <Happen />
       <Insights /> */}
-      <LearnMore />
+      <LearnMore />   
       <Footer />
     </>
   );
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 647523b..94b23f2 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -40,7 +40,7 @@ const HomePage = () => {
     <>
       <HomeBanner />
       {/* <NewSubnetComp /> */}
-      {!isMobile ? <NewSubnetComp /> : <MobileSubnet />}
+      {!isMobile ? <NewSubnetComp /> : <MobileSubnet />} 
       <Stats />
       <WhitePaper />
       {!isMobile ? <Partner /> : <PartnerMobile />}