diff --git a/src/App.jsx b/src/App.jsx
index 22a4b68..3426824 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,129 +5,19 @@ import {
   createRoutesFromElements,
   RouterProvider,
 } from "react-router-dom";
-import HomePage from "./pages/HomePage";
-import NavBar from "./components/NavBar/NavBar";
-import LearnPage from "./pages/LearnPage";
-import BuildPage from "./pages/BuildPage";
-import Community from "./pages/Community";
-import Contact from "./pages/Contact";
-import UseCases from "./pages/UseCases";
-import ArticleInternalPage from "./components/ArticleInternalPage/ArticleInternalPage";
-import NotFound from "./pages/NotFound";
-import fintech from "../src/assets/images/usecase-bg.png";
-import adTech from "../src/assets/images/addtech.jpg";
-import martech from "../src/assets/images/martech.png";
-import healthTech from "../src/assets/images/health-tech.png";
-import { useCase } from "./data/useCase";
-import ArticleInternalOne from "./components/ArticleInternalOne/ArticleInternalOne";
-import ArticleInternalTwo from "./components/ArticleInternalTwo/ArticleInternalTwo";
-import ArticleInternalThree from "./components/ArticleInternalThree/ArticleInternalThree";
-import ArticleInternalFour from "./components/ArticleInternalFour/ArticleInternalFour";
-import ArticleInternalfive from "./components/ArticleInternalfive/ArticleInternalfive";
-import ArticleInternalSix from "./components/ArticleInternalSix/ArticleInternalSix";
+import { route } from "./routes/_routes";
+import DefaultLayout from "./Layout/DefaultLayout";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
-    <Route path="/" element={<NavBar />}>
-      <Route index element={<HomePage />} />
-      <Route path="LearnPage" element={<LearnPage />} />
-      <Route path="BuildPage" element={<BuildPage />} />
-      <Route path="UseCases" element={<UseCases />} />
-      <Route path="community" element={<Community />} />
-      {/* <Route
-        path="Articles/the_proofchain_technical_whitepaper"
-        element={<ArticleInternalPage />}
-      /> */}
-      <Route
-        path="bring-your-own-blockspace"
-        element={<ArticleInternalOne />}
-      />
-      <Route
-        path="rubix-the-sustainable-blockchain-solution-a-green-initiative"
-        element={<ArticleInternalTwo />}
-      />
-      <Route
-        path="mining-rubix-tokens-what-you-need-to-know"
-        element={<ArticleInternalThree />}
-      />
-      <Route
-        path="securing-wallet-to-wallet-transfers-across-the-network-rubix-solved-it-differently"
-        element={<ArticleInternalFour />}
-      />
-      <Route
-        path="enterprise-blockchains-on-a-public-chain"
-        element={<ArticleInternalfive />}
-      />
-      <Route
-        path="multichain-over-blockchain-a-reality-check-on-security-threat"
-        element={<ArticleInternalSix />}
-      />
-
-      <Route path="Contact" element={<Contact />} />
-      <Route path="*" element={<NotFound />} />
-      <Route
-        path="fin-tech"
-        element={
-          <UseCases
-            bannerHeading={"FinTech"}
-            bannerSubHeading={
-              "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
-            }
-            bannerImage={fintech}
-            useCase={useCase}
-          />
-        }
-      />
-
-      <Route
-        path="ad-tech"
-        element={
-          <UseCases
-            bannerHeading={"AdTech"}
-            bannerSubHeading={
-              "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
-            }
-            bannerImage={adTech}
-            useCase={useCase}
-          />
-        }
-      />
-      <Route
-        path="mar-tech"
-        element={
-          <UseCases
-            bannerHeading={"MarTech"}
-            bannerSubHeading={
-              "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
-            }
-            bannerImage={martech}
-            useCase={useCase}
-          />
-        }
-      />
-      <Route
-        path="health-tech"
-        element={
-          <UseCases
-            bannerHeading={"HealthTech"}
-            bannerSubHeading={
-              "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
-            }
-            bannerImage={healthTech}
-            useCase={useCase}
-          />
-        }
-      />
-    </Route>
+      route.map(({ path, element }) => (
+        <Route key={path} path={path} element={<DefaultLayout>{element}</DefaultLayout>} />
+      ))
   )
 );
 
 function App() {
-  return (
-    <>
-      <RouterProvider router={router} />
-    </>
-  );
+  return <RouterProvider router={router} />;
 }
 
 export default App;
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
new file mode 100644
index 0000000..4fe1237
--- /dev/null
+++ b/src/Layout/DefaultLayout.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import NavBar from "../components/NavBar/NavBar";
+import Footer from "../components/Footer/Footer";
+
+const DefaultLayout = ({ children }) => {
+  return (
+    <div>
+      <NavBar />
+      {children}
+      <Footer />
+    </div>
+  );
+};
+
+export default DefaultLayout;
diff --git a/src/components/ArticleInternalFour/ArticleInternalFour.jsx b/src/components/ArticleInternalFour/ArticleInternalFour.jsx
index d49aaab..b521651 100644
--- a/src/components/ArticleInternalFour/ArticleInternalFour.jsx
+++ b/src/components/ArticleInternalFour/ArticleInternalFour.jsx
@@ -264,7 +264,7 @@ const ArticleInternalFour = () => {
           </Box>
         </Box>
       </Box>
-      <Footer />
+      
     </>
   );
 };
diff --git a/src/components/ArticleInternalOne/ArticleInternalOne.jsx b/src/components/ArticleInternalOne/ArticleInternalOne.jsx
index dd61279..171f9a5 100644
--- a/src/components/ArticleInternalOne/ArticleInternalOne.jsx
+++ b/src/components/ArticleInternalOne/ArticleInternalOne.jsx
@@ -326,7 +326,6 @@ const ArticleInternalOne = () => {
           </Box>
         </Box>
       </Box>
-      <Footer />
     </>
   );
 };
diff --git a/src/components/ArticleInternalSix/ArticleInternalSix.jsx b/src/components/ArticleInternalSix/ArticleInternalSix.jsx
index c391fbf..3a7096e 100644
--- a/src/components/ArticleInternalSix/ArticleInternalSix.jsx
+++ b/src/components/ArticleInternalSix/ArticleInternalSix.jsx
@@ -345,7 +345,7 @@ const ArticleInternalSix = () => {
           </Box>
         </Box>
       </Box>
-      <Footer />
+      
     </>
   );
 };
diff --git a/src/components/ArticleInternalThree/ArticleInternalThree.jsx b/src/components/ArticleInternalThree/ArticleInternalThree.jsx
index 0636b18..d1e7958 100644
--- a/src/components/ArticleInternalThree/ArticleInternalThree.jsx
+++ b/src/components/ArticleInternalThree/ArticleInternalThree.jsx
@@ -243,7 +243,7 @@ const ArticleInternalThree = () => {
           </Box>
         </Box>
       </Box>
-      <Footer />
+      
     </>
   );
 };
diff --git a/src/components/ArticleInternalTwo/ArticleInternalTwo.jsx b/src/components/ArticleInternalTwo/ArticleInternalTwo.jsx
index cb3a92d..5207f62 100644
--- a/src/components/ArticleInternalTwo/ArticleInternalTwo.jsx
+++ b/src/components/ArticleInternalTwo/ArticleInternalTwo.jsx
@@ -426,7 +426,7 @@ const ArticleInternalTwo = () => {
           </Box>
         </Box>
       </Box>
-      <Footer />
+      
     </>
   );
 };
diff --git a/src/components/ArticleInternalfive/ArticleInternalfive.jsx b/src/components/ArticleInternalfive/ArticleInternalfive.jsx
index 5faf792..fe1b30a 100644
--- a/src/components/ArticleInternalfive/ArticleInternalfive.jsx
+++ b/src/components/ArticleInternalfive/ArticleInternalfive.jsx
@@ -46,8 +46,7 @@ const ArticleInternalfive = () => {
             textAlign={"center"}
             className="rubix-text-heading-2 rubix-fw-600"
           >
-            Securing wallet to wallet transfers across the network: Rubix solved
-            it differently
+            Enterprise blockchains on a Public Chain!
           </Text>
 
           <Text textAlign={"center"} className="rubix-text-xsmall rubix-fw-500">
@@ -226,7 +225,7 @@ const ArticleInternalfive = () => {
                 <img
                   style={{ backgroundColor: "#fff" }}
                   width={"100%"}
-                  src="https://www.rubix.net/wp-content/uploads/independent-proofchains-of-tokens.png"
+                  src="https://www.rubix.net/wp-content/uploads/multiple-quorum-validating-transactions.png"
                 />
               </Text>
               <Text pb={5} fontSize="xl">
@@ -296,7 +295,7 @@ const ArticleInternalfive = () => {
           </Box>
         </Box>
       </Box>
-      <Footer />
+      
     </>
   );
 };
diff --git a/src/components/Footer/MobileFooter.jsx b/src/components/Footer/MobileFooter.jsx
index d2fd524..c1387ec 100644
--- a/src/components/Footer/MobileFooter.jsx
+++ b/src/components/Footer/MobileFooter.jsx
@@ -78,8 +78,14 @@ const MobileFooter = () => {
                     <ListItem marginBottom={"1rem"}>Community</ListItem>
                   </Link>
 
-                  <ListItem marginBottom={"1rem"}>Wallet</ListItem>
-                  <ListItem marginBottom={"1rem"}>Careers</ListItem>
+                  <Link
+                    to="https://getfexr.com/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ListItem marginBottom={"1rem"}>Wallet</ListItem>
+                  </Link>
+                  {/* <ListItem marginBottom={"1rem"}>Careers</ListItem> */}
                 </UnorderedList>
               </AccordionPanel>
             </>
@@ -116,42 +122,117 @@ const MobileFooter = () => {
                   fontWeight={"400"}
                   marginLeft={"0px !important"}
                 >
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
+                  <Link
+                    to="https://t.me/rubixblockchain"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    <Image src={tele} />
-                    telegram
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={tele} />
+                      telegram
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://twitter.com/rubixchain"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    <Image src={x} />
-                    Twitter
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={x} />
+                      Twitter
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://github.com/rubixchain"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    <Image src={github} />
-                    GitHub
-                  </ListItem>
-                  <ListItem
-                    marginBottom={"1rem"}
-                    display={"flex"}
-                    alignItems={"center"}
-                    gap={"10px"}
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={github} />
+                      GitHub
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://discord.com/invite/MNYPfhFEEk"
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
-                    <Image src={discord} />
-                    Discord
-                  </ListItem>
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={discord} />
+                      Discord
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://www.reddit.com/r/rubixchain/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={reddit} />
+                      Reddit
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://www.facebook.com/RubixChain"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={fb} />
+                      Facebook
+                    </ListItem>
+                  </Link>
+
+                  <Link
+                    to="https://www.linkedin.com/company/rubixnet/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <ListItem
+                      marginBottom={"1rem"}
+                      display={"flex"}
+                      alignItems={"center"}
+                      gap={"10px"}
+                    >
+                      <Image src={linked} />
+                      LinkedIn
+                    </ListItem>
+                  </Link>
                 </UnorderedList>
               </AccordionPanel>
             </>
diff --git a/src/components/LearnPage/GetStarted.jsx b/src/components/LearnPage/GetStarted.jsx
index 59afa62..4e7a792 100644
--- a/src/components/LearnPage/GetStarted.jsx
+++ b/src/components/LearnPage/GetStarted.jsx
@@ -4,6 +4,7 @@ import { Tabs, TabList, TabPanels, Tab, TabPanel } from "@chakra-ui/react";
 import getStarted from "../../assets/images/getStarted.png";
 import getStarted2 from "../../assets/images/getStarted2.png";
 import getStarted3 from "../../assets/images/getStarted3.png";
+import pdf from "../../assets/pdf/Rubix.pdf";
 import { Link } from "react-router-dom";
 
 const GetStarted = () => {
@@ -149,7 +150,7 @@ const GetStarted = () => {
                 Step 1 - Start by reading our whitepaper
                 <a
                   download="RubiX_WhitePaper.pdf"
-                  href="../../assets/pdf/RubiX_WhitePaper.pdf"
+                  href={pdf}
                   style={{
                     color: "#fff",
                     fontSize: "14px",
diff --git a/src/components/MobileComponent/MobileSubnet.jsx b/src/components/MobileComponent/MobileSubnet.jsx
index c760f62..49aa6f1 100644
--- a/src/components/MobileComponent/MobileSubnet.jsx
+++ b/src/components/MobileComponent/MobileSubnet.jsx
@@ -12,6 +12,7 @@ import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 const MobileSubnet = () => {
+  const font = "14px";
   return (
     <>
       <Swiper
@@ -19,22 +20,16 @@ const MobileSubnet = () => {
         navigation={false}
         modules={[Navigation, Pagination, Autoplay]}
         loop={true}
-        slidesPerView={1}
-        style={{
-          backgroundColor: "#000",
-          paddingBottom: "3rem",
-          position: "relative",
-        }}
-        autoplay={{
-          delay: 2500,
-          disableOnInteraction: false,
-        }}
+        // autoplay={{
+        //   delay: 2500,
+        //   disableOnInteraction: false,
+        // }}
+        style={{ backgroundColor: "#000" }}
       >
         <SwiperSlide>
           <Box
             backgroundColor={"#000"}
             padding={"1.5rem"}
-            height={"100dvh"}
             display={"grid"}
             alignContent={"center"}
           >
@@ -52,6 +47,12 @@ const MobileSubnet = () => {
                   fontSize={"20px"}
                   textTransform={"capitalize"}
                   color={"#fff"}
+                  sx={{
+                    "@media (max-width: 1024px)": {},
+                    "@media (max-width: 375px)": {
+                      fontSize: "18px",
+                    },
+                  }}
                 >
                   decentralised Auto Syncing subnets
                 </Text>
@@ -77,18 +78,22 @@ const MobileSubnet = () => {
                   <Text
                     as={"h2"}
                     paddingTop={"2rem"}
-                    fontWeight={500}
-                    fontSize={"16px"}
+                    fontWeight={700}
+                    fontSize={"20px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: "18px",
+                      },
+                    }}
                   >
                     P2P
                   </Text>
                   <UnorderedList color={"#E1E1E1"}>
-                    <ListItem fontSize={"14px"}>
-                      Only L1 powering full mobile nodes
-                    </ListItem>
-                    <ListItem fontSize={"14px"}>
+                    <ListItem>Only L1 powering full mobile nodes</ListItem>
+                    <ListItem>
                       Mobile nodes with full state data will settle P2P .
                       Consensus provided by nearby node validators.
                     </ListItem>
@@ -106,11 +111,17 @@ const MobileSubnet = () => {
                     fontSize={"16px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: "18px",
+                      },
+                    }}
                   >
                     Self Sovereign
                   </Text>
                   <UnorderedList color={"#E1E1E1"}>
-                    <ListItem fontSize={"14px"}>
+                    <ListItem>
                       Permissioned subnets with no oracles and <br />{" "}
                       intermediaries
                     </ListItem>
@@ -132,10 +143,24 @@ const MobileSubnet = () => {
                     fontSize={"16px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: "18px",
+                      },
+                    }}
                   >
                     Easier
                   </Text>
-                  <UnorderedList color={"#E1E1E1"}>
+                  <UnorderedList
+                    color={"#E1E1E1"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: font,
+                      },
+                    }}
+                  >
                     <ListItem>
                       Leverage own infrastructure for block space
                     </ListItem>
@@ -154,12 +179,18 @@ const MobileSubnet = () => {
                     fontSize={"16px"}
                     textTransform={"capitalize"}
                     color={"#fff"}
+                    sx={{
+                      "@media (max-width: 1024px)": {},
+                      "@media (max-width: 375px)": {
+                        fontSize: "18px",
+                      },
+                    }}
                   >
                     cheaper
                   </Text>
                   <UnorderedList color={"#E1E1E1"}>
-                    <ListItem fontSize={"14px"}>No GAS fees</ListItem>
-                    <ListItem fontSize={"14px"}>
+                    <ListItem>No GAS fees</ListItem>
+                    <ListItem>
                       Incremental and modular infrastructure ask
                     </ListItem>
                     <ListItem fontSize={"14px"}>
@@ -173,10 +204,10 @@ const MobileSubnet = () => {
           </Box>
         </SwiperSlide>
         <SwiperSlide>
-          <MobileSubnet2 />
+          <MobileSubnet2 font={font} />
         </SwiperSlide>
         <SwiperSlide>
-          <MobileSubnet3 />
+          <MobileSubnet3 font={font} />
         </SwiperSlide>
       </Swiper>
     </>
diff --git a/src/components/MobileComponent/MobileSubnet2.jsx b/src/components/MobileComponent/MobileSubnet2.jsx
index 854fdbf..07cc1f2 100644
--- a/src/components/MobileComponent/MobileSubnet2.jsx
+++ b/src/components/MobileComponent/MobileSubnet2.jsx
@@ -1,13 +1,13 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
 import cube from "../../assets/images/cube.png";
 
-const MobileSubnet2 = () => {
+const MobileSubnet2 = ({ font }) => {
   return (
     <Box
       backgroundColor={"#000"}
       padding={"1.5rem"}
-      height={"100dvh"}
       display={"grid"}
       alignContent={"center"}
     >
@@ -25,6 +25,12 @@ const MobileSubnet2 = () => {
             fontSize={"20px"}
             textTransform={"capitalize"}
             color={"#fff"}
+            sx={{
+              "@media (max-width: 1024px)": {},
+              "@media (max-width: 375px)": {
+                fontSize: "18px",
+              },
+            }}
           >
             With unmatched privacy and scalability
           </Text>
@@ -54,6 +60,12 @@ const MobileSubnet2 = () => {
               fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
               01. Decentralisation
             </Text>
@@ -71,6 +83,12 @@ const MobileSubnet2 = () => {
               fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
               02. Ultra Scalability
             </Text>
@@ -90,6 +108,12 @@ const MobileSubnet2 = () => {
               fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
               03. Data Security and Privacy
             </Text>
diff --git a/src/components/MobileComponent/MobileSubnet3.jsx b/src/components/MobileComponent/MobileSubnet3.jsx
index 01126ff..4b11f99 100644
--- a/src/components/MobileComponent/MobileSubnet3.jsx
+++ b/src/components/MobileComponent/MobileSubnet3.jsx
@@ -1,14 +1,14 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
 import stack from "../../assets/images/stacksmall.png";
 
-const MobileSubnet3 = () => {
+const MobileSubnet3 = ({ font }) => {
   return (
     <Box
       backgroundColor={"#000"}
       padding={"1.5rem"}
       paddingBottom={"4rem"}
-      height={"100dvh"}
       display={"grid"}
       alignContent={"center"}
     >
@@ -27,6 +27,12 @@ const MobileSubnet3 = () => {
             fontSize={"20px"}
             textTransform={"capitalize"}
             color={"#fff"}
+            sx={{
+              "@media (max-width: 1024px)": {},
+              "@media (max-width: 375px)": {
+                fontSize: "18px",
+              },
+            }}
           >
             All In One Composable Stack
           </Text>
@@ -57,8 +63,14 @@ const MobileSubnet3 = () => {
               fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
             >
-              Single Comprehensive Stack :
+              Single Comprehensive Stack
             </Text>
             <UnorderedList color={"#E1E1E1"}>
               <ListItem fontSize={"14px"}>
@@ -75,8 +87,14 @@ const MobileSubnet3 = () => {
               fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
-              High Partition Tolerance :
+              High Partition Tolerance
             </Text>
             <UnorderedList color={"#E1E1E1"}>
               <ListItem fontSize={"14px"}>
@@ -92,8 +110,14 @@ const MobileSubnet3 = () => {
               fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
-              Fully Deterministic :
+              Fully Deterministic
             </Text>
             <UnorderedList color={"#E1E1E1"}>
               <ListItem fontSize={"14px"}>Apps can bring Own Block space( BYOB)</ListItem>
@@ -107,8 +131,14 @@ const MobileSubnet3 = () => {
               fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
-              Unique token/object based architecture :
+              Unique token/object based architecture
             </Text>
             <UnorderedList color={"#E1E1E1"}>
               <ListItem fontSize={"14px"}>Build unlimited FTs and NFTs all at L1!!</ListItem>
@@ -122,8 +152,14 @@ const MobileSubnet3 = () => {
               fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
-              Green by the design :
+              Green by the design
             </Text>
             <UnorderedList color={"#E1E1E1"}>
               <ListItem fontSize={"14px"}>
@@ -141,9 +177,27 @@ const MobileSubnet3 = () => {
               fontSize={"16px"}
               textTransform={"capitalize"}
               color={"#fff"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: "18px",
+                },
+              }}
             >
-              Fixed, hard capped supply of RBT at 51.4 Million
+              51.4 Million RBT
             </Text>
+
+            <UnorderedList
+              color={"#E1E1E1"}
+              sx={{
+                "@media (max-width: 1024px)": {},
+                "@media (max-width: 375px)": {
+                  fontSize: font,
+                },
+              }}
+            >
+              <ListItem>Fixed Supply.Hardcapped</ListItem>
+            </UnorderedList>
           </Box>
         </Box>
       </Box>
diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx
index 409be22..3a1eb49 100644
--- a/src/components/MobileMenu/MobileMenu.jsx
+++ b/src/components/MobileMenu/MobileMenu.jsx
@@ -1,26 +1,34 @@
-import { HamburgerIcon } from "@chakra-ui/icons";
+/* eslint-disable no-unused-vars */
+import { CloseIcon, HamburgerIcon } from "@chakra-ui/icons";
 import {
   Menu,
   MenuButton,
   MenuList,
   MenuItem,
-  // MenuItemOption,
-  // MenuGroup,
-  // MenuOptionGroup,
-  // MenuDivider,
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
   IconButton,
+  Text,
 } from "@chakra-ui/react";
 import { Box, Image } from "@chakra-ui/react";
 import { Link, useLocation } from "react-router-dom";
-// import { Button } from "@chakra-ui/react";
+import { Button } from "@chakra-ui/react";
 // import { HashLink } from "react-router-hash-link";
 import logo from "../../assets/images/rubix.png";
 import { useEffect, useState } from "react";
 
 export const MobileMenu = () => {
   const [isScrolled, setIsScrolled] = useState(false);
+  const [menu, setMenu] = useState(false);
   const location = useLocation();
 
+  const handleClick = () => {
+    setMenu(!menu);
+  };
+
   useEffect(() => {
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
@@ -37,9 +45,9 @@ export const MobileMenu = () => {
   const active = {
     content: "''",
     position: "absolute",
-    bottom: "-5px",
-    left: "50%",
-    width: "130%",
+    bottom: "10px",
+    left: "25%",
+    width: "50%",
     height: "3px",
     backgroundColor: "#DE858E",
     borderRadius: "10px",
@@ -51,35 +59,19 @@ export const MobileMenu = () => {
     width: "0",
   };
 
+  const links = {
+    position: "relative",
+    fontSize: "16px",
+    display: "block",
+    padding: "1rem 0",
+    color: "#fff",
+  };
   return (
     <>
-      {/* <Box
-        backgroundColor={"#141315"}
-        position={"fixed"}
-        zIndex={"9999"}
-        width={"100%"}
-        textAlign={"right"}
-        padding={"0.8px 0px"}
-      >
-        <Box marginRight={""}>
-          <Link
-            to="/"
-            style={{ color: "#fff", marginRight: "1.5rem", fontSize: "14px" }}
-          >
-            WALLET
-          </Link>
-          <Link
-            to="/"
-            style={{ color: "#fff", marginRight: "1.5rem", fontSize: "14px" }}
-          >
-            EXPLORER
-          </Link>
-        </Box>
-      </Box> */}
       <Box
         position={"fixed"}
         top={"0px"}
-        zIndex={999}
+        zIndex={888}
         backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
         display={"flex"}
         justifyContent={"space-between"}
@@ -106,115 +98,292 @@ export const MobileMenu = () => {
             </Box>
           </Link>
         </Box>
-        <Menu backgroundColor={"#fff"}>
-          <MenuButton
-            as={IconButton}
-            aria-label="Options"
-            icon={<HamburgerIcon />}
-            // variant="outline"
-            backgroundColor={"transparent"}
-            color={"#fff"}
-            fontSize={"34px"}
-            _hover={{
-              backgroundColor: "transparent",
-              color: "#fff",
-              fontSize: "34px",
-            }}
-          />
-          <MenuList>
-            {/* <MenuItem paddingLeft={"0px"}></MenuItem> */}
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              <Link
-                to="/LearnPage"
-                style={{ position: "relative", fontSize: "14px" }}
+        <HamburgerIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
+      </Box>
+
+      <Box
+        position={"fixed"}
+        top={"0px"}
+        transform={menu ? "translateX(0)" : "translateX(100%)"}
+        transition={"all 0.6s ease-in-out"}
+        zIndex={999}
+        backgroundColor={"#101015"}
+        height={"100vh"}
+        width={"100%"}
+        overflow={"auto"}
+        opacity={menu ? 1 : 0}
+      >
+        <Box
+          // backgroundColor={isScrolled ? "#0B0B27" : "transparent"}
+          display={"flex"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+          padding={"1rem 1rem"}
+          marginBottom={"4rem"}
+          gap={"2rem"}
+          sx={{
+            "@media (max-width: 1024px)": {},
+            "@media (max-width: 375px)": {
+              padding: "1rem",
+              alignItems: "baseline",
+            },
+          }}
+        >
+          <Box display={"flex"} alignItems={"center"}>
+            <Link to="/">
+              <Box
+                display={"flex"}
+                alignItems={"baseline"}
+                justifyContent={"center"}
               >
-                LEARN
+                <Image src={logo} width={"160px"} />
+              </Box>
+            </Link>
+          </Box>
+          <CloseIcon color={"#fff"} fontSize={"25px"} onClick={handleClick} />
+        </Box>
+
+        <Accordion allowToggle>
+          {/* Learn */}
+          <AccordionItem borderTop={"none"} padding={"2rem 1rem"}>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <Text
+                  color={"#B0B0B0"}
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"500"}
+                  fontSize={"20px"}
+                >
+                  LEARN
+                </Text>
+              </Box>
+              <AccordionIcon color={"#fff"} fontSize={"28px"} />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Link to="/LearnPage" style={links} onClick={handleClick}>
+                Learn
                 <span
                   style={
                     location.pathname === "/LearnPage" ? active : linkStyle
                   }
                 />
               </Link>
-            </MenuItem>
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
               <Link
-                to="/BuildPage"
-                style={{ position: "relative", fontSize: "14px" }}
+                to="https://learn.rubix.net/pop/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
               >
-                BUILD
+                Proof-of-pledge Protocol
+              </Link>
+              <Link
+                to="https://learn.rubix.net/smartcontract/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+              >
+                Smart Contracts
+              </Link>
+              <Link
+                to="https://learn.rubix.net/tokenomics/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                Tokenomics in Rubix
+              </Link>
+            </AccordionPanel>
+          </AccordionItem>
+
+          {/* Build */}
+          <AccordionItem padding={"2rem 1rem"}>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <Text
+                  color={"#B0B0B0"}
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"500"}
+                  fontSize={"20px"}
+                >
+                  BUILD
+                </Text>
+              </Box>
+              <AccordionIcon color={"#fff"} fontSize={"28px"} />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Link to="/BuildPage" style={links} onClick={handleClick}>
+                Build
                 <span
                   style={
                     location.pathname === "/BuildPage" ? active : linkStyle
                   }
                 />
               </Link>
-            </MenuItem>
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              {" "}
-              <Link to="/" style={{ position: "relative", fontSize: "14px" }}>
-                USE CASES
-                {/* <span style={location.pathname === "/" ? active : linkStyle} /> */}
-              </Link>
-            </MenuItem>
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              {" "}
               <Link
-                to="/community"
-                style={{ position: "relative", fontSize: "14px" }}
+                to="https://learn.rubix.net/node-setup/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
               >
-                COMMUNITY
+                Set up Rubix Node
+              </Link>
+              <Link
+                to="https://learn.rubix.net/quorum/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+              >
+                Quorum
+              </Link>
+              <Link
+                to="https://learn.rubix.net/subnets/"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                Subnets
+              </Link>
+            </AccordionPanel>
+          </AccordionItem>
+
+          {/* UseCases */}
+          <AccordionItem padding={"2rem 1rem"}>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <Text
+                  color={"#B0B0B0"}
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"500"}
+                  fontSize={"20px"}
+                >
+                  USE CASES
+                </Text>
+              </Box>
+              <AccordionIcon color={"#fff"} fontSize={"28px"} />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Link to="/fin-tech" style={links} onClick={handleClick}>
+                FinTech
+                <span
+                  style={location.pathname === "/fin-tech" ? active : linkStyle}
+                />
+              </Link>
+              <Link
+                to="/ad-tech"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                AdTech
+                <span
+                  style={location.pathname === "/ad-tech" ? active : linkStyle}
+                />
+              </Link>
+              <Link
+                to="/mar-tech"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                MarTech
+                <span
+                  style={location.pathname === "/mar-tech" ? active : linkStyle}
+                />
+              </Link>
+              <Link
+                to="/health-tech"
+                // target="_blank"
+                // rel="noopener noreferrer"
+                style={links}
+                onClick={handleClick}
+              >
+                HealthTech
+                <span
+                  style={
+                    location.pathname === "/health-tech" ? active : linkStyle
+                  }
+                />
+              </Link>
+            </AccordionPanel>
+          </AccordionItem>
+
+          {/* Community */}
+          <AccordionItem padding={"2rem 1rem"}>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <Text
+                  color={"#B0B0B0"}
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"500"}
+                  fontSize={"20px"}
+                >
+                  COMMUNITY
+                </Text>
+              </Box>
+              <AccordionIcon color={"#fff"} fontSize={"28px"} />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
+              <Link to="/community" style={links} onClick={handleClick}>
+                Community
                 <span
                   style={
                     location.pathname === "/community" ? active : linkStyle
                   }
                 />
               </Link>
-            </MenuItem>
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              {" "}
-              <Link to="/" style={{ position: "relative", fontSize: "14px" }}>
-                FOUNDATION
-                {/* <span style={location.pathname === "/" ? active : linkStyle} /> */}
-              </Link>
-            </MenuItem>
-            <MenuItem
-              justifyContent={"center"}
-              padding={"1rem 0"}
-              _focus={{ background: "#fff" }}
-            >
-              {" "}
+            </AccordionPanel>
+          </AccordionItem>
+
+          {/* Wallet*/}
+          <AccordionItem padding={"2rem 1rem"}>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <Text
+                  color={"#B0B0B0"}
+                  fontFamily={"Mona Sans"}
+                  fontWeight={"500"}
+                  fontSize={"20px"}
+                >
+                  AFFILIATES
+                </Text>
+              </Box>
+              <AccordionIcon color={"#fff"} fontSize={"28px"} />
+            </AccordionButton>
+            <AccordionPanel pb={4}>
               <Link
-                to="/Contact"
-                style={{ position: "relative", fontSize: "14px" }}
+                to="https://rubixexplorer.com/"
+                style={links}
+                onClick={handleClick}
               >
-                CONTACT US
-                <span
-                  style={location.pathname === "/Contact" ? active : linkStyle}
-                />
+                Wallet
               </Link>
-            </MenuItem>
-          </MenuList>
-        </Menu>
+              <Link
+                to="https://getfexr.com/"
+                style={links}
+                onClick={handleClick}
+              >
+                Explore
+              </Link>
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+
+        <Link to="/Contact" onClick={handleClick}>
+          <Button
+            margin={"2rem 2rem"}
+            padding={"1.5rem 2rem"}
+            borderRadius="0px"
+            backgroundImage="radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)"
+          >
+            CONTACT US
+          </Button>
+        </Link>
       </Box>
     </>
   );
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index 328e0c6..cbf741e 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -470,3 +470,453 @@ export const NewSubnetComp = () => {
     </div>
   );
 };
+
+// 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";
+// import { Component1 } from "./Component1";
+// import { Component2 } from "./Component2";
+// import { Component3 } from "./Component3";
+// import { Component4 } from "./Component4";
+// // import { SubnetPage2 } from "./SubnetPage2";
+// import cube from "../../assets/images/cube.png";
+// import stack from "../../assets/images/stackNew.webp";
+// import { gsap } from "gsap";
+// import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+// // Initialize ScrollTrigger
+// gsap.registerPlugin(ScrollTrigger);
+
+// // 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);
+
+//   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",
+//           markers: false,
+//         },
+//       })
+//       .fromTo(firstBoxRef.current, { alpha: 1 }, { alpha: 0 })
+//       .fromTo(secondBoxRef.current, { alpha: 0 }, { alpha: 1 })
+//       .fromTo(secondBoxRef.current, { alpha: 1 }, { alpha: 0 })
+//       .fromTo(thirdBoxRef.current, { alpha: 0 }, { alpha: 1 });
+
+//     return () => {
+//       tl.kill();
+//     };
+//   }, []);
+
+//   return (
+//     <div
+//       style={{
+//         backgroundColor: "#000",
+//         overflow: "hidden",
+//       }}
+//     >
+//       <Box
+//         ref={mainBox}
+//         height={"300vh"}
+//         position={"relative"}
+//         display={"flex"}
+//         justifyContent={"center"}
+//         alignItems={"center"}
+//       >
+//         <Box
+//           ref={firstBoxRef}
+//           position={"absolute"}
+//           top={"0"}
+//           left={"0"}
+//           height={"100vh"}
+//           width={"100%"}
+//           backgroundColor={"#000"}
+//           display={"grid"}
+//           alignContent={"center"}
+//         >
+//           <Container
+//             maxW="container.xl"
+//             textAlign={"center"}
+//             height={"100vh"}
+//             display={"grid"}
+//             // p={10}
+//             paddingTop={"10rem"}
+//             alignContent={"center"}
+//           >
+//             <Text
+//               as={"h2"}
+//               fontWeight={700}
+//               fontSize={"40px"}
+//               textTransform={"capitalize"}
+//               color={"#fff"}
+//               sx={{
+//                 "@media (max-width: 1024px)": {},
+//                 "@media (max-width: 600px)": {
+//                   fontSize: "28px",
+//                 },
+//               }}
+//             >
+//               decentralised Auto Syncing subnets
+//             </Text>
+//             <Box
+//               display={"grid"}
+//               gridTemplateColumns={"repeat(2, 1fr)"}
+//               gridTemplateRows={"repeat(2, 1fr)"}
+//               gap={"17rem 4rem"}
+//               marginTop={"150px"}
+//               position={"relative"}
+//               padding={"0 4rem"}
+//               paddingBottom={"50px"}
+//             >
+//               <Image
+//                 src={cube}
+//                 width={"410px"}
+//                 position={"absolute"}
+//                 left={"0"}
+//                 right={"0"}
+//                 marginLeft={"auto"}
+//                 marginRight={"auto"}
+//                 cursor={"pointer"}
+//                 transform="translateY(-10%)"
+//                 animation="floatAnimation 2s infinite alternate"
+//                 // onClick={handleImageClick}
+//                 sx={{
+//                   "@keyframes floatAnimation": {
+//                     "0%": {
+//                       transform: "translateY(0)",
+//                     },
+//                     "100%": {
+//                       transform: "translateY(-20px)",
+//                     },
+//                   },
+//                 }}
+//               />
+
+//               <Box
+//                 gridColumn={"1/2"}
+//                 textAlign={"left"}
+//                 position={"relative"}
+//                 width={"383px"}
+//               >
+//                 <Component1 />
+//               </Box>
+
+//               <Box
+//                 gridColumn={"1/2"}
+//                 gridRow={"2"}
+//                 textAlign={"left"}
+//                 position={"relative"}
+//                 width={"383px"}
+//               >
+//                 <Component2 />
+//               </Box>
+
+//               <Box
+//                 gridColumn={"2/2"}
+//                 gridRow={"2"}
+//                 textAlign={"left"}
+//                 position={"relative"}
+//                 width={"383px"}
+//               >
+//                 <Component3 />
+//               </Box>
+
+//               <Box
+//                 gridColumn={"2/2"}
+//                 textAlign={"left"}
+//                 position={"relative"}
+//                 width={"383px"}
+//               >
+//                 <Component4 />
+//               </Box>
+//             </Box>
+//           </Container>
+//         </Box>
+
+//         <Box
+//           backgroundColor={"#000"}
+//           height={"100vh"}
+//           width={"100%"}
+//           padding={"0 5rem"}
+//           paddingBottom={"2rem"}
+//           ref={secondBoxRef}
+//           position={"absolute"}
+//           top={"0"}
+//           left={"0"}
+//           display={"grid"}
+//           placeContent={"center"}
+//         >
+//           <Text
+//             as={"h2"}
+//             paddingTop={"10rem"}
+//             fontWeight={700}
+//             fontSize={"40px"}
+//             textTransform={"capitalize"}
+//             color={"#fff"}
+//             marginBottom={"5rem"}
+//             textAlign={"center"}
+//             sx={{
+//               "@media (max-width: 1024px)": {},
+//               "@media (max-width: 600px)": {
+//                 fontSize: "28px",
+//               },
+//             }}
+//           >
+//             With Unmatched Privacy and Scalability
+//           </Text>
+//           <Container maxW="container.xl" textAlign={"center"}>
+//             <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
+//               <Box>
+//                 <Image
+//                   src={cube}
+//                   width={"480px"}
+//                   //   position={"absolute"}
+//                   left={"0"}
+//                   right={"0"}
+//                   marginLeft={"auto"}
+//                   marginRight={"auto"}
+//                   cursor={"pointer"}
+//                   transform="translateY(-10%)"
+//                   animation="floatAnimation 2s infinite alternate"
+//                   // onClick={click}
+//                   sx={{
+//                     "@keyframes floatAnimation": {
+//                       "0%": {
+//                         transform: "translateY(0)",
+//                       },
+//                       "100%": {
+//                         transform: "translateY(-20px)",
+//                       },
+//                     },
+//                   }}
+//                 />
+//               </Box>
+//               <Box width={"50%"}>
+//                 <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"24px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     01. Decentralisation
+//                   </Text>
+//                   <Text fontSize={"18px"}>
+//                     Rubix Decentralised Identity(DID) issued at L1 is the
+//                     foundation for building digital ownership enhancing
+//                     applications.
+//                   </Text>
+//                 </Box>
+//                 <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"24px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     02. Ultra Scalability
+//                   </Text>
+//                   <Text fontSize={"18px"}>
+//                     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, the network TPS will increase with increase
+//                     in numbers of nodes.
+//                   </Text>
+//                 </Box>
+//                 <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"24px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     03. Data Security and Privacy
+//                   </Text>
+//                   <Text fontSize={"18px"}>
+//                     Rubix Decentralised Identity(DID) issued at L1 is the
+//                     foundation for building digital ownership enhancing
+//                     applications
+//                   </Text>
+//                 </Box>
+//               </Box>
+//             </Box>
+//           </Container>
+//         </Box>
+
+//         <Box
+//           backgroundColor={"#000"}
+//           height={"100vh"}
+//           width={"100%"}
+//           padding={"2rem"}
+//           paddingBottom={"2rem"}
+//           ref={thirdBoxRef}
+//           position={"absolute"}
+//           top={"0"}
+//           left={"0"}
+//           display={"grid"}
+//           placeContent={"center"}
+//         >
+//           <Text
+//             as={"h2"}
+//             paddingTop={"5rem"}
+//             fontWeight={700}
+//             fontSize={"40px"}
+//             textTransform={"capitalize"}
+//             color={"#fff"}
+//             marginBottom={"5rem"}
+//             textAlign={"center"}
+//             sx={{
+//               "@media (max-width: 1024px)": {},
+//               "@media (max-width: 600px)": {
+//                 fontSize: "28px",
+//               },
+//             }}
+//           >
+//             All In One Composable Stack
+//           </Text>
+//           <Container maxW="container.xl" textAlign={"center"}>
+//             <Box display={"flex"} alignItems={"start"} gap={"5rem"}>
+//               <Box width={"100%"}>
+//                 <Box
+//                   color={"#E1E1E1"}
+//                   textAlign={"right"}
+//                   marginBottom={"2rem"}
+//                 >
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     Single Comprehensive Stack:
+//                   </Text>
+//                   <Text fontSize={"16px"}>
+//                     Full Mobile node SDK, Smart Contracts, DID&apos;s, Secondary
+//                     tokens ( FTs and NFTs) all in one place.
+//                   </Text>
+//                 </Box>
+//                 <Box
+//                   color={"#E1E1E1"}
+//                   textAlign={"right"}
+//                   marginBottom={"2rem"}
+//                 >
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     High Partition Tolerence:
+//                   </Text>
+//                   <Text fontSize={"16px"}>
+//                     Issues in one shard wont affect other shards performance
+//                   </Text>
+//                 </Box>
+//                 <Box
+//                   color={"#E1E1E1"}
+//                   textAlign={"right"}
+//                   marginBottom={"2rem"}
+//                 >
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     Fully Deterministic
+//                   </Text>
+//                   <Text fontSize={"16px"}>
+//                     App can bring own Block space ( BYOB )
+//                   </Text>
+//                 </Box>
+//               </Box>
+//               <Box>
+//                 <Image
+//                   src={stack}
+//                   width={"700px"}
+//                   //   position={"absolute"}
+//                   left={"0"}
+//                   right={"0"}
+//                   marginLeft={"auto"}
+//                   marginRight={"auto"}
+//                   cursor={"pointer"}
+//                   transform="translateY(-10%)"
+//                   animation="floatAnimation 2s infinite alternate"
+//                   // onClick={click}
+//                   sx={{
+//                     "@keyframes floatAnimation": {
+//                       "0%": {
+//                         transform: "translateY(0)",
+//                       },
+//                       "100%": {
+//                         transform: "translateY(-20px)",
+//                       },
+//                     },
+//                   }}
+//                 />
+//               </Box>
+//               <Box width={"100%"}>
+//                 <Box
+//                   color={"#E1E1E1"}
+//                   textAlign={"left"}
+//                   marginBottom={"2rem"}
+//                   minHeight={"80px"}
+//                 >
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     Unique Token/Object Based Architecture
+//                   </Text>
+//                   <Text fontSize={"16px"}>
+//                     Build unlimited FTs and NFTs all at L1!!
+//                   </Text>
+//                 </Box>
+//                 <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     Green By The Design
+//                   </Text>
+//                   <Text fontSize={"16px"}>
+//                     100000 Rubix Transactions consume &lt; 10 kWh &lt; 100000
+//                     Visa transactions
+//                   </Text>
+//                 </Box>
+//                 <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
+//                   <Text
+//                     as={"h2"}
+//                     fontSize={"20px"}
+//                     color={"#fff"}
+//                     marginBottom={"10px"}
+//                   >
+//                     51.4 Million RBT
+//                   </Text>
+//                   <Text fontSize={"16px"}>Fixed Supply.Hardcapped </Text>
+//                 </Box>
+//               </Box>
+//             </Box>
+//           </Container>
+//         </Box>
+//       </Box>
+//     </div>
+//   );
+// };
diff --git a/src/index.css b/src/index.css
index f9291bf..d738c18 100644
--- a/src/index.css
+++ b/src/index.css
@@ -124,6 +124,10 @@ span.swiper-pagination-bullet {
     top: 90% !important;
   }
 
+  .subnet-mobile .swiper-pagination {
+    top: 94% !important;
+  }
+
   .swiper-button-next {
     right: -8px; 
   }
@@ -137,6 +141,23 @@ span.swiper-pagination-bullet {
   .team-slider .swiper-button-next {
     right: 28px;
   }
+  .fade-in {
+    opacity: 1;
+    transition: opacity 0.9s ease-in-out;
+    -webkit-transition: opacity 0.9s ease-in-out;
+    -moz-transition: opacity 0.9s ease-in-out;
+    -ms-transition: opacity 0.9s ease-in-out;
+    -o-transition: opacity 0.9s ease-in-out;
+  }
+
+  .fade-out {
+    opacity: 0;
+    transition: opacity 0.9s ease-in-out;
+    -webkit-transition: opacity 0.9s ease-in-out;
+    -moz-transition: opacity 0.9s ease-in-out;
+    -ms-transition: opacity 0.9s ease-in-out;
+    -o-transition: opacity 0.9s ease-in-out;
+  }
 }
 /* html {
   font-family: "Mona Sans";
diff --git a/src/pages/BuildPage.jsx b/src/pages/BuildPage.jsx
index 92c061f..f6c0e79 100644
--- a/src/pages/BuildPage.jsx
+++ b/src/pages/BuildPage.jsx
@@ -39,7 +39,6 @@ const BuildPage = () => {
       {!isMobile ? <Tools /> : <ToolMobile />}
       <Connect />
       <LearnMore />
-      <Footer />
     </>
   );
 };
diff --git a/src/pages/Community.jsx b/src/pages/Community.jsx
index 773cb21..6b9b3ff 100644
--- a/src/pages/Community.jsx
+++ b/src/pages/Community.jsx
@@ -41,8 +41,7 @@ const Community = () => {
       <Connect />
       {/* <Happen />
       <Insights /> */}
-      <LearnMore />   
-      <Footer />
+      <LearnMore />
     </>
   );
 };
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index d9e4269..af3d47b 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -10,7 +10,6 @@ const Contact = () => {
   return (
     <>
       <Form />
-      <Footer />
     </>
   );
 };
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 94b23f2..a43cdd2 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -46,8 +46,6 @@ const HomePage = () => {
       {!isMobile ? <Partner /> : <PartnerMobile />}
       {/* <Client /> */}
       {!isMobile ? <Resources /> : <ResourcesMobile />}
-
-      <Footer />
     </>
   );
 };
diff --git a/src/pages/LearnPage.jsx b/src/pages/LearnPage.jsx
index f8970ad..df18826 100644
--- a/src/pages/LearnPage.jsx
+++ b/src/pages/LearnPage.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { useEffect } from "react";
 import Footer from "../components/Footer/Footer";
 import { Faq } from "../components/LearnPage/Faq";
@@ -16,9 +17,8 @@ const LearnPage = () => {
       <LearnBanner />
       <LearnDev />
       <WhyRubix />
-      <GetStarted /> 
+      <GetStarted />
       <Faq />
-      <Footer />
     </>
   );
 };
diff --git a/src/pages/UseCases.jsx b/src/pages/UseCases.jsx
index 2be3520..592bb30 100644
--- a/src/pages/UseCases.jsx
+++ b/src/pages/UseCases.jsx
@@ -22,7 +22,6 @@ const UseCases = ({
         bannerImage={bannerImage}
         useCase={useCase}
       />
-      <Footer />
     </>
   );
 };
diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx
new file mode 100644
index 0000000..003196e
--- /dev/null
+++ b/src/routes/_routes.jsx
@@ -0,0 +1,129 @@
+import ArticleInternalFour from "../components/ArticleInternalFour/ArticleInternalFour";
+import ArticleInternalOne from "../components/ArticleInternalOne/ArticleInternalOne";
+import ArticleInternalSix from "../components/ArticleInternalSix/ArticleInternalSix";
+import ArticleInternalThree from "../components/ArticleInternalThree/ArticleInternalThree";
+import ArticleInternalTwo from "../components/ArticleInternalTwo/ArticleInternalTwo";
+import ArticleInternalfive from "../components/ArticleInternalfive/ArticleInternalfive";
+import { useCase } from "../data/useCase";
+import BuildPage from "../pages/BuildPage";
+import Community from "../pages/Community";
+import HomePage from "../pages/HomePage";
+import LearnPage from "../pages/LearnPage";
+import NotFound from "../pages/NotFound";
+import UseCases from "../pages/UseCases";
+import fintech from "../assets/images/usecase-bg.png";
+import adTech from "../assets/images/addtech.jpg";
+import martech from "../assets/images/martech.png";
+import healthTech from "../assets/images/health-tech.png";
+import Form from "../components/Contact/Form";
+import UseCase from "../components/UseCase/UseCase";
+
+export const route = [
+  {
+    path: "/",
+    element: <HomePage />,
+  },
+  {
+    path: "LearnPage",
+    element: <LearnPage />,
+  },
+  {
+    path: "BuildPage",
+    element: <BuildPage />,
+  },
+  {
+    path: "UseCases",
+    element: <UseCases />,
+  },
+  {
+    path: "community",
+    element: <Community />,
+  },
+
+  {
+    path: "bring-your-own-blockspace",
+    element: <ArticleInternalOne />,
+  },
+  {
+    path: "rubix-the-sustainable-blockchain-solution-a-green-initiative",
+    element: <ArticleInternalTwo />,
+  },
+  {
+    path: "mining-rubix-tokens-what-you-need-to-know",
+    element: <ArticleInternalThree />,
+  },
+  {
+    path: "securing-wallet-to-wallet-transfers-across-the-network-rubix-solved-it-differently",
+    element: <ArticleInternalFour />,
+  },
+  {
+    path: "enterprise-blockchains-on-a-public-chain",
+    element: <ArticleInternalfive />,
+  },
+  {
+    path: "multichain-over-blockchain-a-reality-check-on-security-threat",
+    element: <ArticleInternalSix />,
+  },
+  {
+    path: "Contact",
+    element: <Form />,
+  },
+  {
+    path: "*",
+    element: <NotFound />,
+  },
+
+  {
+    path: "fin-tech",
+    element: (
+      <UseCase
+        bannerHeading={"FinTech"}
+        bannerSubHeading={
+          "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
+        }
+        bannerImage={fintech}
+        useCase={useCase}
+      />
+    ),
+  },
+
+  {
+    path: "ad-tech",
+    element: (
+      <UseCase
+        bannerHeading={"AdTech"}
+        bannerSubHeading={
+          "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
+        }
+        bannerImage={adTech}
+        useCase={useCase}
+      />
+    ),
+  },
+  {
+    path: "mar-tech",
+    element: (
+      <UseCase
+        bannerHeading={"MarTech"}
+        bannerSubHeading={
+          "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
+        }
+        bannerImage={martech}
+        useCase={useCase}
+      />
+    ),
+  },
+  {
+    path: "health-tech",
+    element: (
+      <UseCase
+        bannerHeading={"HealthTech"}
+        bannerSubHeading={
+          "Stay up to date on what’s happening with Rubix, learn about upcoming events and access important resources."
+        }
+        bannerImage={healthTech}
+        useCase={useCase}
+      />
+    ),
+  },
+];