diff --git a/src/App.jsx b/src/App.jsx
index e6eff08..70ae5ee 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,6 +12,7 @@ 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";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -23,6 +24,7 @@ const router = createBrowserRouter(
       <Route path="community" element={<Community />} />
       <Route path="Articles" element={<ArticleInternalPage />} />
       <Route path="Contact" element={<Contact />} />
+      <Route path="*" element={<NotFound />} />
     </Route>
   )
 );
diff --git a/src/assets/images/communityBanner.webp b/src/assets/images/communityBanner.webp
new file mode 100644
index 0000000..df4629d
Binary files /dev/null and b/src/assets/images/communityBanner.webp differ
diff --git a/src/components/BuildPage/BuildBanner.jsx b/src/components/BuildPage/BuildBanner.jsx
index cda2c6e..c2e751b 100644
--- a/src/components/BuildPage/BuildBanner.jsx
+++ b/src/components/BuildPage/BuildBanner.jsx
@@ -148,7 +148,7 @@ const BuildBanner = () => {
             }}
             _hover={{
               color: "#000",
-              border: "none",
+              border: "1px solid white",
               zIndex: 1,
             }}
           >
diff --git a/src/components/BuildPage/Connect.jsx b/src/components/BuildPage/Connect.jsx
index a160602..813b9d1 100644
--- a/src/components/BuildPage/Connect.jsx
+++ b/src/components/BuildPage/Connect.jsx
@@ -82,6 +82,7 @@ const Connect = () => {
           //   fontSize={"40px"}
           color={"#fff"}
           marginBottom={"3rem"}
+          textAlign={"center"}
         >
           Connect with Rubix community
         </Text>
diff --git a/src/components/BuildPage/Tools.jsx b/src/components/BuildPage/Tools.jsx
index 6fa7cf9..f555b54 100644
--- a/src/components/BuildPage/Tools.jsx
+++ b/src/components/BuildPage/Tools.jsx
@@ -94,7 +94,11 @@ const Tools = () => {
                   borderRadius={"10px"}
                   height={"100%"}
                 >
-                  <CardHeader display={"flex"} justifyContent={"center"} paddingBottom={"15px"}>
+                  <CardHeader
+                    display={"flex"}
+                    justifyContent={"center"}
+                    paddingBottom={"15px"}
+                  >
                     <Image height={"70px"} src={item.img} />
                     {/* <Heading size="md"></Heading> */}
                   </CardHeader>
@@ -112,7 +116,11 @@ const Tools = () => {
                       dangerouslySetInnerHTML={{ __html: item.title }}
                     />
                   </CardBody>
-                  <CardFooter justifyContent={"center"} cursor={"pointer"} paddingTop={"15px"}>
+                  <CardFooter
+                    justifyContent={"center"}
+                    cursor={"pointer"}
+                    paddingTop={"15px"}
+                  >
                     <Image
                       src={arrow}
                       transition="all .5s"
@@ -168,7 +176,7 @@ const Tools = () => {
           }}
           _hover={{
             color: "#000",
-            border: "none",
+            border: "1px solid white",
             zIndex: 1,
           }}
         >
diff --git a/src/components/Card/HomeCard.jsx b/src/components/Card/HomeCard.jsx
index 92cc926..bfef239 100644
--- a/src/components/Card/HomeCard.jsx
+++ b/src/components/Card/HomeCard.jsx
@@ -8,10 +8,10 @@ const HomeCard = ({ key, date, text }) => {
   return (
     <Box
       backgroundImage={
-        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8D54F8), color-stop(0.67, #F8697A));"
+        "-webkit-gradient(linear, left bottom, left top, color-stop(0.33, #8d54f85c), color-stop(0.67, #f8697a75))"
       }
       padding={"1px"}
-      borderRadius={"10px"}
+      borderRadius={"8px"}
       sx={{
         "@media (max-width: 600px)": {
           width: "90%",
@@ -20,10 +20,10 @@ const HomeCard = ({ key, date, text }) => {
       }}
     >
       <Box
-        width={"502px"}
+        width={"475px"}
         background={"#151419"}
         borderRadius={"10px"}
-        minHeight={"502px"}
+        minHeight={"475px"}
         key={key}
         sx={{
           "@media (max-width: 600px)": {
@@ -44,14 +44,14 @@ const HomeCard = ({ key, date, text }) => {
             INSIGHT
           </Badge>
 
-          <Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
+          <Text fontSize={"12px"} color={"#979797"} margin={"20px 0px"}>
             {date}
           </Text>
           <Text
             color={"#fff"}
-            fontSize={"24px"}
+            fontSize={"20px"}
             marginBottom={"20px"}
-            minHeight={"73px"}
+            minHeight={"70px"}
             maxWidth={"460px"}
           >
             {text}
diff --git a/src/components/Card/MobileHomeCard.jsx b/src/components/Card/MobileHomeCard.jsx
index bd0864d..55e1501 100644
--- a/src/components/Card/MobileHomeCard.jsx
+++ b/src/components/Card/MobileHomeCard.jsx
@@ -30,7 +30,7 @@ const MobileHomeCard = ({ key, date, text }) => {
         background={"#151419"}
         borderRadius={"10px"}
         minHeight={"415px !important"}
-        key={key}
+        // key={key}
         sx={{
           "@media (max-width: 600px)": {
             width: "100%",
diff --git a/src/components/Card/PlaceCard.jsx b/src/components/Card/PlaceCard.jsx
index a41c604..205ecbc 100644
--- a/src/components/Card/PlaceCard.jsx
+++ b/src/components/Card/PlaceCard.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
 import { ArrowForwardIcon } from "@chakra-ui/icons";
@@ -17,7 +18,7 @@ const PlaceCard = ({ key, text, cardicon, title, button }) => {
           "@media (max-width: 500px)": {
             width: "320px",
             fontWeight: "400",
-            minHeight:'290px'
+            minHeight: "290px",
           },
         }}
       >
@@ -30,11 +31,14 @@ const PlaceCard = ({ key, text, cardicon, title, button }) => {
           }}
         />
         <Box>
-          <Text fontSize={"22px"} color={"#fff"} margin={"25px 0px"}
+          <Text
+            fontSize={"22px"}
+            color={"#fff"}
+            margin={"25px 0px"}
             sx={{
               "@media (max-width: 500px)": {
                 fontSize: "15px",
-                margin:'10px 0'
+                margin: "10px 0",
               },
             }}
           >
@@ -44,7 +48,7 @@ const PlaceCard = ({ key, text, cardicon, title, button }) => {
             color={"#D4D4D4"}
             fontSize={"16px"}
             marginBottom={"20px"}
-            minHeight={"73px"}
+            minHeight={"135px"}
             maxWidth={"460px"}
             sx={{
               "@media (max-width: 500px)": {
@@ -70,8 +74,10 @@ const PlaceCard = ({ key, text, cardicon, title, button }) => {
               }}
             >
               {button}
-              <Image src={Arrow} style={{ width: "30px", marginLeft: "8px" }} 
-                 sx={{
+              <Image
+                src={Arrow}
+                style={{ width: "30px", marginLeft: "8px" }}
+                sx={{
                   "@media (max-width: 500px)": {
                     width: "25px",
                   },
diff --git a/src/components/Community/CommunityBanner.jsx b/src/components/Community/CommunityBanner.jsx
index fba7458..d937b04 100644
--- a/src/components/Community/CommunityBanner.jsx
+++ b/src/components/Community/CommunityBanner.jsx
@@ -1,5 +1,5 @@
 import { Box, Button, Container, Text } from "@chakra-ui/react";
-import banner from "../../assets/images/learnBanner.webp";
+import banner from "../../assets/images/communityBanner.webp";
 
 const BannerContent = [
   {
@@ -73,7 +73,7 @@ const CommunityBanner = () => {
               "@media (max-width: 600px)": {
                 fontSize: "40px",
                 marginBottom: "0rem",
-                lineHeight:'54px'
+                lineHeight: "54px",
               },
             }}
           >
@@ -109,7 +109,7 @@ const CommunityBanner = () => {
                 },
                 "@media (max-width: 500px)": {
                   fontSize: "16px",
-                  lineHeight:'28px'
+                  lineHeight: "28px",
                 },
               }}
             >
@@ -161,13 +161,13 @@ const CommunityBanner = () => {
                 marginTop: "2rem",
                 bgGradient:
                   "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
-                color:'#000',
-                fontWeight:'600'
+                color: "#000",
+                fontWeight: "600",
               },
             }}
             _hover={{
               color: "#000",
-              border: "none",
+              border: "1px solid white",
               zIndex: 1,
             }}
           >
diff --git a/src/components/Community/CommunityCard.jsx b/src/components/Community/CommunityCard.jsx
index 077f669..f2277c7 100644
--- a/src/components/Community/CommunityCard.jsx
+++ b/src/components/Community/CommunityCard.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import {
   Box,
   Card,
@@ -23,7 +24,6 @@ import imgnine from "../../assets/images/Component123.png";
 import imgten from "../../assets/images/Component128.png";
 import imgeleven from "../../assets/images/Component127.png";
 
-
 const individuals = [
   {
     location: "india",
@@ -128,8 +128,8 @@ const CommunityCard = () => {
     <>
       <Box backgroundColor={"#101015"}>
         <Container
-          maxW={"container.xl"}
-          padding={"0 5rem"}
+          maxW={"1200px"}
+          padding={"0rem"}
           paddingBottom={"6rem"}
           sx={{
             "@media (max-width: 1024px)": {
diff --git a/src/components/Community/Happen.jsx b/src/components/Community/Happen.jsx
index 2ac1b3f..4baa60a 100644
--- a/src/components/Community/Happen.jsx
+++ b/src/components/Community/Happen.jsx
@@ -40,7 +40,8 @@ const Content = {
   heading: `Latest Happenings`,
 };
 
-const Happen = () => {  return (
+const Happen = () => {
+  return (
     <Box
       // height={"100vh"}
       background={"#000"}
@@ -56,7 +57,7 @@ const Happen = () => {  return (
             padding: "3rem",
           },
           "@media (max-width: 500px)": {
-            padding:'1rem'
+            padding: "1rem",
           },
         }}
       >
@@ -71,7 +72,7 @@ const Happen = () => {  return (
           sx={{
             "@media (max-width: 500px)": {
               fontSize: "22px",
-              fontWeight:'400'
+              fontWeight: "400",
             },
           }}
         >
@@ -88,17 +89,17 @@ const Happen = () => {  return (
         >
           <Box>
             <SimpleGrid
-             spacing={5}
-             templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
-             sx={{
-              "@media (max-width: 500px)": {
-                display:'flex',
-                overflowX:'scroll',
-                "&::-webkit-scrollbar": {
-                  width: "0px",
+              spacing={5}
+              templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
+              sx={{
+                "@media (max-width: 500px)": {
+                  display: "flex",
+                  overflowX: "scroll",
+                  "&::-webkit-scrollbar": {
+                    width: "0px",
+                  },
                 },
-              },
-            }}
+              }}
             >
               {Latest.map((item) => (
                 <HappenCard
@@ -112,71 +113,72 @@ const Happen = () => {  return (
               ))}
             </SimpleGrid>
           </Box>
-          <Box textAlign={"center"} marginTop={"4rem"}
-          sx={{
-            "@media (max-width: 500px)": {
-              marginTop:'2rem',
-            },
-          }}
-          >
-          <Button
-            position={"relative"}
-            backgroundColor={"transparent"}
-            cursor={"pointer"}
-            transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
-            color={"#fff"}
-            width={"216px"}
-            height={"54px"}
-            fontFamily={"Poppins"}
-            fontWeight={"400"}
-            border={"1px solid white"}
-            borderRadius={"10px"}
-            fontSize={"20px"}
-            zIndex={"1"}
-            overflow={"hidden"}
+          <Box
+            textAlign={"center"}
+            marginTop={"4rem"}
             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)": {
-                fontSize: "14px",
-                fontWeight:'400',
-                height:'40px',
-                width:'140px',
-                bgGradient:
-                "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
-                color: "#000",
-                fontWeight: "600",
-                
+                marginTop: "2rem",
               },
             }}
-            _hover={{
-              color: "#000",
-              border: "none",
-              zIndex: 1,
-            }}
           >
-            View More
-          </Button>
-        </Box>
+            <Button
+              position={"relative"}
+              backgroundColor={"transparent"}
+              cursor={"pointer"}
+              transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
+              color={"#fff"}
+              width={"216px"}
+              height={"54px"}
+              fontFamily={"Poppins"}
+              fontWeight={"400"}
+              border={"1px solid white"}
+              borderRadius={"10px"}
+              fontSize={"20px"}
+              zIndex={"1"}
+              overflow={"hidden"}
+              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)": {
+                  fontSize: "14px",
+                  fontWeight: "400",
+                  height: "40px",
+                  width: "140px",
+                  bgGradient:
+                    "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                  color: "#000",
+                  // fontWeight: "600",
+                },
+              }}
+              _hover={{
+                color: "#000",
+                border: "1px solid white",
+                zIndex: 1,
+              }}
+            >
+              View More
+            </Button>
+          </Box>
         </Box>
       </Container>
     </Box>
diff --git a/src/components/Community/Insights.jsx b/src/components/Community/Insights.jsx
index e29cdb3..635ced4 100644
--- a/src/components/Community/Insights.jsx
+++ b/src/components/Community/Insights.jsx
@@ -135,7 +135,7 @@ const Insights = () => {
           }}
           _hover={{
             color: "#000",
-            border: "none",
+            border: "1px solid white",
             zIndex: 1,
           }}
         >
diff --git a/src/components/Community/LearnMore.jsx b/src/components/Community/LearnMore.jsx
index b10bb74..90bf20d 100644
--- a/src/components/Community/LearnMore.jsx
+++ b/src/components/Community/LearnMore.jsx
@@ -5,7 +5,7 @@ const SectionContent = {
   heading: `Connect with us to learn more!`,
   subContent: `With countless applications, there's a place for everyone in the Rubix community.`,
   btnContent: `Contact Us`,
-  btnBild:"Build with Rubix",
+  btnBild: "Build with Rubix",
 };
 
 const LearnMore = () => {
@@ -37,8 +37,8 @@ const LearnMore = () => {
           "@media (max-width: 1024px)": {},
           "@media (max-width: 500px)": {
             fontSize: "20px",
-            fontWeight:'500',
-            marginBottom:'5px'
+            fontWeight: "500",
+            marginBottom: "5px",
           },
         }}
       >
@@ -54,131 +54,131 @@ const LearnMore = () => {
       >
         <Text
           color={"#E4E4E4"}
-            fontSize={"22px"}
+          fontSize={"22px"}
           marginBottom={"2rem"}
           fontFamily={"Poppins"}
           sx={{
             "@media (max-width: 500px)": {
               fontSize: "14px",
-              fontWeight:'100',
-              marginBottom:'5px',
-              marginBottom:'30px'
+              fontWeight: "100",
+              // marginBottom:'5px',
+              marginBottom: "30px",
             },
           }}
         >
           {SectionContent.subContent}
         </Text>
         <Text>
-        <Button
-          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:
+          <Button
+            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)",
-                color:'#000',
-                fontWeight:'600'
-             },
-          }}
-          _hover={{
-            color: "#000",
-            border: "none",
-            zIndex: 1,
-          }}
-        >
-          {SectionContent.btnBild}
-        </Button>
-        <Button
-          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:
+                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: "none",
-            zIndex: 1,
-          }}
-        >
-          {SectionContent.btnContent}
-        </Button>
+                color: "#000",
+                fontWeight: "600",
+              },
+            }}
+            _hover={{
+              color: "#000",
+              border: "1px solid white",
+              zIndex: 1,
+            }}
+          >
+            {SectionContent.btnBild}
+          </Button>
+          <Button
+            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>
         </Text>
       </Container>
     </Box>
diff --git a/src/components/Community/Place.jsx b/src/components/Community/Place.jsx
index 39dce4a..7f8fdd8 100644
--- a/src/components/Community/Place.jsx
+++ b/src/components/Community/Place.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
-import Partner from "../../assets/images/partner.png"
+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";
@@ -8,31 +8,31 @@ import Banner from "../../assets/images/place-banner.png";
 const content = [
   {
     id: 1,
-    title:'Partners',
+    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',
+    button: "Explore our ecosystem",
   },
   {
     id: 2,
-    title:'Enterprises',
+    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',
+    button: "See how it works",
   },
   {
     id: 3,
-    title:'Developers',
+    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',
+    button: "Start Building",
   },
   {
     id: 4,
-    title:'Advisors',
+    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',
+    button: "Contact Us",
   },
 ];
 
@@ -73,9 +73,9 @@ const Place = () => {
           textTransform={"capitalize"}
           color={"#fff"}
           sx={{
-            "@media (max-width: 500px)": {  
+            "@media (max-width: 500px)": {
               fontSize: "22px",
-              fontWeight:'400',
+              fontWeight: "400",
             },
           }}
         >
@@ -93,13 +93,13 @@ const Place = () => {
           }}
         >
           {content.map((item) => (
-            <PlaceCard 
-                key={item.id} 
-                cardicon={item.cardicon}
-                title={item.title}
-                date={item.date} 
-                text={item.text} 
-                button={item.button}
+            <PlaceCard
+              key={item.id}
+              cardicon={item.cardicon}
+              title={item.title}
+              date={item.date}
+              text={item.text}
+              button={item.button}
             />
           ))}
         </Box>
diff --git a/src/components/HomePage/HomeBanner.jsx b/src/components/HomePage/HomeBanner.jsx
index 1444431..911a9e2 100644
--- a/src/components/HomePage/HomeBanner.jsx
+++ b/src/components/HomePage/HomeBanner.jsx
@@ -178,7 +178,7 @@ const HomeBanner = () => {
             }}
             _hover={{
               color: "#000",
-              border: "none",
+              border: "1px solid white",
               zIndex: 1,
             }}
           >
diff --git a/src/components/HomePage/Partner.jsx b/src/components/HomePage/Partner.jsx
index e755fcf..30b6f2d 100644
--- a/src/components/HomePage/Partner.jsx
+++ b/src/components/HomePage/Partner.jsx
@@ -28,7 +28,7 @@ import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/navigation";
 
-import { Navigation, Pagination } from "swiper/modules";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import { useState } from "react";
 
 const imgWidth = {
@@ -91,8 +91,12 @@ export default function Partner() {
         {/* Box1     */}
         <Swiper
           pagination={true}
-          navigation={true}
-          modules={[Navigation, Pagination]}
+          navigation={false}
+          modules={[Navigation, Pagination, Autoplay]}
+          autoplay={{
+            delay: 2500,
+            disableOnInteraction: false,
+          }}
           loop={true}
           style={{
             paddingBottom: "4rem",
diff --git a/src/components/HomePage/Resources.jsx b/src/components/HomePage/Resources.jsx
index 70ee745..0861724 100644
--- a/src/components/HomePage/Resources.jsx
+++ b/src/components/HomePage/Resources.jsx
@@ -117,7 +117,7 @@ const Resources = () => {
             }}
             _hover={{
               color: "#000",
-              border: "none",
+              border: "1px solid white",
               zIndex: 1,
             }}
           >
diff --git a/src/components/HomePage/WhitePaper.jsx b/src/components/HomePage/WhitePaper.jsx
index 6814dc6..3751e46 100644
--- a/src/components/HomePage/WhitePaper.jsx
+++ b/src/components/HomePage/WhitePaper.jsx
@@ -106,7 +106,7 @@ const WhitePaper = () => {
           }}
           _hover={{
             color: "#000",
-            border: "none",
+            border: "1px solid white",
             zIndex: 1,
           }}
         >
diff --git a/src/components/LearnPage/LearnBanner.jsx b/src/components/LearnPage/LearnBanner.jsx
index 283eb84..5707c5a 100644
--- a/src/components/LearnPage/LearnBanner.jsx
+++ b/src/components/LearnPage/LearnBanner.jsx
@@ -3,7 +3,7 @@ import banner from "../../assets/images/learnBanner.webp";
 
 const BannerContent = [
   {
-    head:'Powerful',
+    head: "Powerful",
     heading1: ` blockchain tools`,
     heading2: `for developers`,
   },
@@ -58,8 +58,7 @@ const LearnBanner = () => {
               width: "100%",
             },
           }}
-        >   
-           
+        >
           <Text
             as={"h2"}
             fontWeight={700}
@@ -86,7 +85,9 @@ const LearnBanner = () => {
               style={{
                 color: "#fff",
               }}
-            >{BannerContent[0].head}</span>
+            >
+              {BannerContent[0].head}
+            </span>
             {BannerContent[0].heading1} <br />
             <span
               style={{
@@ -156,7 +157,7 @@ const LearnBanner = () => {
             }}
             _hover={{
               color: "#000",
-              border: "none",
+              border: "1px solid white",
               zIndex: 1,
             }}
           >
diff --git a/src/components/LearnPage/LearnDev.jsx b/src/components/LearnPage/LearnDev.jsx
index 60a030c..48cf6a5 100644
--- a/src/components/LearnPage/LearnDev.jsx
+++ b/src/components/LearnPage/LearnDev.jsx
@@ -58,34 +58,33 @@ const LearnDev = () => {
       backgroundRepeat={"no-repeat"}
       padding={"2rem 0 4rem 0"}
     >
-      <Container maxW="container.xl">
-        <Text
-          as={"h2"}
-          paddingTop={"2rem"}
-          paddingBottom={"2rem"}
-          paddingLeft={"3rem"}
-          fontWeight={700}
-          fontSize={"40px"}
-          textAlign={"left"}
-          textTransform={"capitalize"}
-          color={"#fff"}
-          sx={{
-            "@media (max-width: 996px)": {
-              fontSize: "35px",
-            },
-            "@media (max-width: 435px)": {
-              fontSize: "26px",
-              paddingLeft: "2rem",
-            },
-            "@media (max-width: 375px)": {
-              fontSize: "",
-            },
-          }}
-        >
-          {Content.heading} {isSmallScreen ? null : <br />}
-          {Content.span}
-        </Text>
-      </Container>
+      <Text
+        as={"h2"}
+        paddingTop={"2rem"}
+        paddingBottom={"2rem"}
+        paddingLeft={"7rem"}
+        fontWeight={700}
+        fontSize={"40px"}
+        textAlign={"left"}
+        textTransform={"capitalize"}
+        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: "",
+          },
+        }}
+      >
+        {Content.heading} {isSmallScreen ? null : <br />}
+        {Content.span}
+      </Text>
       <Box
         // maxW="container.xl"
         paddingLeft={"6rem"}
diff --git a/src/components/MobileComponent/MobileSubnet.jsx b/src/components/MobileComponent/MobileSubnet.jsx
index 55de628..0853b81 100644
--- a/src/components/MobileComponent/MobileSubnet.jsx
+++ b/src/components/MobileComponent/MobileSubnet.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import { Box, Image, ListItem, Text, UnorderedList } from "@chakra-ui/react";
 import cube from "../../assets/images/cube.png";
 import MobileSubnet2 from "./MobileSubnet2";
@@ -7,51 +8,38 @@ import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/navigation";
 
-import { Navigation, Pagination } from "swiper/modules";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
 const MobileSubnet = () => {
   return (
     <>
-      <Swiper>
-        <SwiperSlide></SwiperSlide>
-        <Box backgroundColor={"#000"} padding={"1.5rem"}>
-          {/* Subnet1 */}
-          <Box>
-            <Box
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent={"space-between"}
-            >
-              <Text
-                as={"h2"}
-                paddingTop={"2rem"}
-                fontWeight={700}
-                fontSize={"20px"}
-                textTransform={"capitalize"}
-                color={"#fff"}
-              >
-                decentralised Auto Syncing subnets
-              </Text>
-              <Image
-                src={cube}
-                width={"140px"}
-                transform="translateY(-10%)"
-                animation="floatAnimation 2s infinite alternate"
-                sx={{
-                  "@keyframes floatAnimation": {
-                    "0%": {
-                      transform: "translateY(0)",
-                    },
-                    "100%": {
-                      transform: "translateY(-20px)",
-                    },
-                  },
-                }}
-              />
-            </Box>
+      <Swiper
+        pagination={true}
+        navigation={false}
+        modules={[Navigation, Pagination, Autoplay]}
+        loop={true}
+        // autoplay={{
+        //   delay: 2500,
+        //   disableOnInteraction: false,
+        // }}
+        style={{ backgroundColor: "#000" }}
+      >
+        <SwiperSlide>
+          <Box
+            backgroundColor={"#000"}
+            padding={"1.5rem"}
+            height={"100dvh"}
+            display={"grid"}
+            alignContent={"center"}
+          >
+            {/* Subnet1 */}
             <Box>
-              <Box>
+              <Box
+                display={"flex"}
+                alignItems={"center"}
+                justifyContent={"space-between"}
+              >
                 <Text
                   as={"h2"}
                   paddingTop={"2rem"}
@@ -60,95 +48,127 @@ const MobileSubnet = () => {
                   textTransform={"capitalize"}
                   color={"#fff"}
                 >
-                  P2P
+                  decentralised Auto Syncing subnets
                 </Text>
-                <UnorderedList color={"#E1E1E1"}>
-                  <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>
-                  <ListItem>
-                    High scalability, Partition tolerance and portability
-                  </ListItem>
-                </UnorderedList>
+                {/* <Image
+                  src={cube}
+                  width={"140px"}
+                  transform="translateY(-10%)"
+                  animation="floatAnimation 2s infinite alternate"
+                  sx={{
+                    "@keyframes floatAnimation": {
+                      "0%": {
+                        transform: "translateY(0)",
+                      },
+                      "100%": {
+                        transform: "translateY(-20px)",
+                      },
+                    },
+                  }}
+                /> */}
               </Box>
-
               <Box>
-                <Text
-                  as={"h2"}
-                  paddingTop={"2rem"}
-                  fontWeight={700}
-                  fontSize={"20px"}
-                  textTransform={"capitalize"}
-                  color={"#fff"}
-                >
-                  Self Sovereign
-                </Text>
-                <UnorderedList color={"#E1E1E1"}>
-                  <ListItem>
-                    Permissioned subnets with no oracles and <br />{" "}
-                    intermediaries
-                  </ListItem>
-                  <ListItem>INo block space ransom</ListItem>
-                  <ListItem>
-                    Zero risk of transactions being blocked out of <br />
-                    chain.
-                  </ListItem>
-                </UnorderedList>
-              </Box>
+                <Box>
+                  <Text
+                    as={"h2"}
+                    paddingTop={"2rem"}
+                    fontWeight={700}
+                    fontSize={"20px"}
+                    textTransform={"capitalize"}
+                    color={"#fff"}
+                  >
+                    P2P
+                  </Text>
+                  <UnorderedList color={"#E1E1E1"}>
+                    <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>
+                    <ListItem>
+                      High scalability, Partition tolerance and portability
+                    </ListItem>
+                  </UnorderedList>
+                </Box>
 
-              <Box>
-                <Text
-                  as={"h2"}
-                  paddingTop={"2rem"}
-                  fontWeight={700}
-                  fontSize={"20px"}
-                  textTransform={"capitalize"}
-                  color={"#fff"}
-                >
-                  Easier
-                </Text>
-                <UnorderedList color={"#E1E1E1"}>
-                  <ListItem>
-                    Leverage own infrastructure for block space
-                  </ListItem>
-                  <ListItem>
-                    Smart contracts in Rust , GoLang and C/C++
-                  </ListItem>
-                  <ListItem>WASM compiler for smooth code migration</ListItem>
-                </UnorderedList>
-              </Box>
+                <Box>
+                  <Text
+                    as={"h2"}
+                    paddingTop={"2rem"}
+                    fontWeight={700}
+                    fontSize={"20px"}
+                    textTransform={"capitalize"}
+                    color={"#fff"}
+                  >
+                    Self Sovereign
+                  </Text>
+                  <UnorderedList color={"#E1E1E1"}>
+                    <ListItem>
+                      Permissioned subnets with no oracles and <br />{" "}
+                      intermediaries
+                    </ListItem>
+                    <ListItem>INo block space ransom</ListItem>
+                    <ListItem>
+                      Zero risk of transactions being blocked out of <br />
+                      chain.
+                    </ListItem>
+                  </UnorderedList>
+                </Box>
 
-              <Box>
-                <Text
-                  as={"h2"}
-                  paddingTop={"2rem"}
-                  fontWeight={700}
-                  fontSize={"20px"}
-                  textTransform={"capitalize"}
-                  color={"#fff"}
-                >
-                  cheaper
-                </Text>
-                <UnorderedList color={"#E1E1E1"}>
-                  <ListItem>No GAS fees</ListItem>
-                  <ListItem>
-                    Incremental and modular infrastructure ask
-                  </ListItem>
-                  <ListItem>
-                    No expensive re training of development <br />
-                    resources
-                  </ListItem>
-                </UnorderedList>
+                <Box>
+                  <Text
+                    as={"h2"}
+                    paddingTop={"2rem"}
+                    fontWeight={700}
+                    fontSize={"20px"}
+                    textTransform={"capitalize"}
+                    color={"#fff"}
+                  >
+                    Easier
+                  </Text>
+                  <UnorderedList color={"#E1E1E1"}>
+                    <ListItem>
+                      Leverage own infrastructure for block space
+                    </ListItem>
+                    <ListItem>
+                      Smart contracts in Rust , GoLang and C/C++
+                    </ListItem>
+                    <ListItem>WASM compiler for smooth code migration</ListItem>
+                  </UnorderedList>
+                </Box>
+
+                <Box>
+                  <Text
+                    as={"h2"}
+                    paddingTop={"2rem"}
+                    fontWeight={700}
+                    fontSize={"20px"}
+                    textTransform={"capitalize"}
+                    color={"#fff"}
+                  >
+                    cheaper
+                  </Text>
+                  <UnorderedList color={"#E1E1E1"}>
+                    <ListItem>No GAS fees</ListItem>
+                    <ListItem>
+                      Incremental and modular infrastructure ask
+                    </ListItem>
+                    <ListItem>
+                      No expensive re training of development <br />
+                      resources
+                    </ListItem>
+                  </UnorderedList>
+                </Box>
               </Box>
             </Box>
           </Box>
-        </Box>
-        <SwiperSlide></SwiperSlide>
-        <MobileSubnet2 />
-        <SwiperSlide></SwiperSlide>
-        <MobileSubnet3 />
+        </SwiperSlide>
+        <SwiperSlide>
+          <MobileSubnet2 />
+        </SwiperSlide>
+        <SwiperSlide>
+          <MobileSubnet3 />
+        </SwiperSlide>
       </Swiper>
     </>
   );
diff --git a/src/components/MobileComponent/MobileSubnet2.jsx b/src/components/MobileComponent/MobileSubnet2.jsx
index c4a1579..647f0d5 100644
--- a/src/components/MobileComponent/MobileSubnet2.jsx
+++ b/src/components/MobileComponent/MobileSubnet2.jsx
@@ -4,7 +4,13 @@ import cube from "../../assets/images/cube.png";
 
 const MobileSubnet2 = () => {
   return (
-    <Box backgroundColor={"#000"} padding={"1.5rem"}>
+    <Box
+      backgroundColor={"#000"}
+      padding={"1.5rem"}
+      height={"100dvh"}
+      display={"grid"}
+      alignContent={"center"}
+    >
       {/* Subnet1 */}
       <Box>
         <Box
@@ -22,7 +28,7 @@ const MobileSubnet2 = () => {
           >
             With unmatched privacy and scalability
           </Text>
-          <Image
+          {/* <Image
             src={cube}
             width={"140px"}
             transform="translateY(-10%)"
@@ -37,7 +43,7 @@ const MobileSubnet2 = () => {
                 },
               },
             }}
-          />
+          /> */}
         </Box>
         <Box>
           <Box>
diff --git a/src/components/MobileComponent/MobileSubnet3.jsx b/src/components/MobileComponent/MobileSubnet3.jsx
index 6238515..fcfc937 100644
--- a/src/components/MobileComponent/MobileSubnet3.jsx
+++ b/src/components/MobileComponent/MobileSubnet3.jsx
@@ -4,7 +4,14 @@ import stack from "../../assets/images/stacksmall.png";
 
 const MobileSubnet3 = () => {
   return (
-    <Box backgroundColor={"#000"} padding={"1.5rem"} paddingBottom={"4rem"}>
+    <Box
+      backgroundColor={"#000"}
+      padding={"1.5rem"}
+      paddingBottom={"4rem"}
+      height={"100dvh"}
+      display={"grid"}
+      alignContent={"center"}
+    >
       {/* Subnet1 */}
       <Box>
         <Box
@@ -23,7 +30,7 @@ const MobileSubnet3 = () => {
           >
             All In One Composable Stack
           </Text>
-          <Image
+          {/* <Image
             src={stack}
             width={"140px"}
             transform="translateY(-10%)"
@@ -39,7 +46,7 @@ const MobileSubnet3 = () => {
                 },
               },
             }}
-          />
+          /> */}
         </Box>
         <Box>
           <Box>
diff --git a/src/components/MobileComponent/ResourcesMobile.jsx b/src/components/MobileComponent/ResourcesMobile.jsx
index 3c104c5..a06a43d 100644
--- a/src/components/MobileComponent/ResourcesMobile.jsx
+++ b/src/components/MobileComponent/ResourcesMobile.jsx
@@ -5,7 +5,7 @@ import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/navigation";
 
-import { Navigation, Pagination } from "swiper/modules";
+import { Navigation, Pagination, Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import MobileHomeCard from "../Card/MobileHomeCard";
 
@@ -55,8 +55,12 @@ const ResourcesMobile = () => {
       <Swiper
         pagination={true}
         navigation={true}
-        modules={[Navigation, Pagination]}
+        modules={[Navigation, Pagination, Autoplay]}
         loop={true}
+        autoplay={{
+          delay: 2500,
+          disableOnInteraction: false,
+        }}
       >
         {content.map((item) => (
           <>
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index ea117a7..1382d1e 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -46,7 +46,7 @@ const NavBar = () => {
     position: "absolute",
     bottom: "0px",
     left: "50%",
-    width: "130%",
+    width: "100%",
     height: "3px",
     backgroundColor: "#DE858E",
     borderRadius: "10px",
@@ -168,7 +168,7 @@ const NavBar = () => {
 
               <Box
                 display={"flex"}
-                gap={"49px"}
+                gap={"25px"}
                 alignItems={"center"}
                 sx={{
                   "@media (max-width: 1024px)": {
@@ -692,11 +692,24 @@ const NavBar = () => {
                 </Popover>
 
                 <Link to="/" className="link" style={{ position: "relative" }}>
-                  FOUNDATION
+                  <Button
+                    backgroundColor={"transparent"}
+                    color={"#fff"}
+                    fontWeight={"400"}
+                    _hover={{
+                      backgroundColor: "transparent",
+                    }}
+                    _focus={{
+                      boxShadow: "none",
+                    }}
+                  >
+                    FOUNDATION
+                  </Button>
                   <span
                     style={location.pathname === "/" ? active : linkStyle}
                   />
                 </Link>
+
                 <Link
                   to="/Contact"
                   className="link"
@@ -715,7 +728,19 @@ const NavBar = () => {
                     arrowRight.style.transform = "none";
                   }}
                 >
-                  CONTACT US
+                  <Button
+                    backgroundColor={"transparent"}
+                    color={"#fff"}
+                    fontWeight={"400"}
+                    _hover={{
+                      backgroundColor: "transparent",
+                    }}
+                    _focus={{
+                      boxShadow: "none",
+                    }}
+                  >
+                    CONTACT US
+                  </Button>
                   <span
                     style={
                       location.pathname === "/Contact" ? active : linkStyle
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index 8b6dc41..d9b0e8b 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -34,7 +34,7 @@ export const NewSubnetComp = () => {
           start: "top top",
           scrub: 1,
           pin: true,
-          end: "bottom bottom-=100vh",
+          end: "bottom bottom-=500vh",
           markers: false,
         },
       })
@@ -95,7 +95,13 @@ export const NewSubnetComp = () => {
           display={"grid"}
           alignContent={"center"}
         >
-          <Container maxW="container.xl" textAlign={"center"} height={"100vh"}>
+          <Container
+            maxW="container.xl"
+            textAlign={"center"}
+            height={"100vh"}
+            display={"grid"}
+            alignContent={"center"}
+          >
             <Text
               as={"h2"}
               paddingTop={"2rem"}
diff --git a/src/pages/Community.jsx b/src/pages/Community.jsx
index 858cf24..422e401 100644
--- a/src/pages/Community.jsx
+++ b/src/pages/Community.jsx
@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react'
-import CommunityBanner from '../components/Community/CommunityBanner'
-import CommunityCard from '../components/Community/CommunityCard'
-import Place from '../components/Community/Place'
-import Connect from '../components/Community/Connect'
-import Happen from '../components/Community/Happen'
-import Insights from '../components/Community/Insights'
-import LearnMore from '../components/Community/LearnMore'
-import Footer from '../components/Footer/Footer'
-import MobileCommunityCard from '../components/MobileComponent/MobileCommunityCard'
+import CommunityBanner from "../components/Community/CommunityBanner";
+import CommunityCard from "../components/Community/CommunityCard";
+import Place from "../components/Community/Place";
+import Connect from "../components/Community/Connect";
+import Happen from "../components/Community/Happen";
+import Insights from "../components/Community/Insights";
+import LearnMore from "../components/Community/LearnMore";
+import Footer from "../components/Footer/Footer";
+import MobileCommunityCard from "../components/MobileComponent/MobileCommunityCard";
+import { useEffect, useState } from "react";
 
 const Community = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -31,19 +31,18 @@ const Community = () => {
 
   const isMobile = windowWidth <= 996;
 
-
   return (
     <>
-      <CommunityBanner/>
+      <CommunityBanner />
       {!isMobile ? <CommunityCard /> : <MobileCommunityCard />}
       <Place />
-      <Connect/>
+      <Connect />
       <Happen />
-      <Insights/>
+      <Insights />
       <LearnMore />
       <Footer />
     </>
-  )
-}
+  );
+};
 
-export default Community
+export default Community;
diff --git a/src/pages/NotFound.jsx b/src/pages/NotFound.jsx
new file mode 100644
index 0000000..a899483
--- /dev/null
+++ b/src/pages/NotFound.jsx
@@ -0,0 +1,31 @@
+import { Box, Heading } from "@chakra-ui/react";
+import { Link } from "react-router-dom";
+
+const NotFound = () => {
+  return (
+    <Box
+      backgroundColor={"#101015"}
+      height={"100vh"}
+      display={"grid"}
+      placeContent={"center"}
+      textAlign={"center"}
+    >
+      <Heading
+        as="h2"
+        color={"#FFF"}
+        fontFamily={"Mona Sans"}
+        fontSize={"42px"}
+        fontWeight={"500"}
+        lineHeight={"150%"}
+        marginBottom={"2rem"}
+      >
+        Page not Found!
+      </Heading>
+      <Link to="/" style={{ color: "#DE858E" }}>
+        Click to return Home
+      </Link>
+    </Box>
+  );
+};
+
+export default NotFound;