diff --git a/src/assets/images/EcoBanner.png b/src/assets/images/EcoBanner.png
new file mode 100644
index 0000000..f0abaa6
Binary files /dev/null and b/src/assets/images/EcoBanner.png differ
diff --git a/src/components/Card/EcoCard.jsx b/src/components/Card/EcoCard.jsx
new file mode 100644
index 0000000..df8a93e
--- /dev/null
+++ b/src/components/Card/EcoCard.jsx
@@ -0,0 +1,118 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-unused-vars */
+import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
+import { Link } from "react-router-dom";
+
+const EcoCard = ({ id, src, alt, text, href }) => {
+  return (
+    <Box padding={"1px"} borderRadius={"10px"}>
+      {/* {images.map((img) => (
+        <></>
+      ))} */}
+
+      <Box
+        display="inline-block"
+        width={"520px"}
+        height={"300px"}
+        background={"#161616"}
+        borderRadius={"10px"}
+        padding={"20px"}
+        key={id}
+        sx={{
+          "@media (max-width: 500px)": {
+            width: "320px",
+            fontWeight: "400",
+            minHeight: "290px",
+          },
+        }}
+      >
+        <Box
+          padding={"1rem"}
+          sx={{
+            "@media (max-width: 600px)": {
+              padding: "0rem",
+            },
+          }}
+        >
+          <Image
+            height={"60px"}
+            src={src}
+            alt={alt}
+            sx={{
+              "@media (max-width: 600px)": {
+                height: "40px",
+              },
+            }}
+          />
+        </Box>
+
+        <Box padding={"1rem"} 
+          sx={{
+            "@media (max-width: 500px)": {
+              padding: "1rem 0px",
+            },
+          }}
+        >
+          <Text
+            color={"#E8E8E8"}
+            fontSize={"18px"}
+            fontFamily={"Poppins"}
+            marginBottom={"20px"}
+            // fontWeight={"100"}
+            minHeight={"100px"}
+            sx={{
+              "@media (max-width: 500px)": {
+                fontSize: "14px",
+              },
+            }}
+          >
+            {text}
+          </Text>
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            _hover={
+              {
+                //   flexDirection: "column-reverse",
+              }
+            }
+          >
+            <Box
+              position={"relative"}
+              width={"10%"}
+              _before={{
+                content: '""',
+                width: "100%",
+                position: "absolute",
+                left: "0",
+                borderBottom: "1px solid #DE858E",
+                zIndex: "2",
+              }}
+            ></Box>
+            <Link to={href} target="_blank" rel="noopener noreferrer">
+              <Button
+                position={"relative"}
+                backgroundColor={"transparent"}
+                color={"#fff"}
+                fontFamily={"Poppins"}
+                fontWeight={"400"}
+                _hover={{
+                  backgroundColor: "transparent",
+                }}
+                sx={{
+                  "@media (max-width: 500px)": {
+                    fontSize: "14px",
+                  },
+                }}
+              >
+                Visit Website
+              </Button>
+            </Link>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default EcoCard;
diff --git a/src/components/Card/HappenCard.jsx b/src/components/Card/HappenCard.jsx
index e0e5a3a..3830e55 100644
--- a/src/components/Card/HappenCard.jsx
+++ b/src/components/Card/HappenCard.jsx
@@ -48,7 +48,7 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
           </Text>
           <Text
             color={"#fff"}
-            fontSize={"20px"}
+            fontSize={"18px"}
             marginBottom={"10px"}
             sx={{
               "@media (max-width: 500px)": {
@@ -61,6 +61,7 @@ const HappenCard = ({ key, date, text, para, month, curentDate }) => {
           </Text>
           <Text
             color={"#E1E1E1"}
+            fontSize={"14px"}
             sx={{
               "@media (max-width: 500px)": {
                 fontSize: "14px",
diff --git a/src/components/Community/Happen.jsx b/src/components/Community/Happen.jsx
index 4baa60a..39fc63d 100644
--- a/src/components/Community/Happen.jsx
+++ b/src/components/Community/Happen.jsx
@@ -41,7 +41,7 @@ const Content = {
 };
 
 const Happen = () => {
-  return (
+  return ( 
     <Box
       // height={"100vh"}
       background={"#000"}
diff --git a/src/components/EcoPage/EcoBanner.jsx b/src/components/EcoPage/EcoBanner.jsx
new file mode 100644
index 0000000..b19ec86
--- /dev/null
+++ b/src/components/EcoPage/EcoBanner.jsx
@@ -0,0 +1,185 @@
+import { Box, Button, Container, Text } from "@chakra-ui/react";
+import banner from "../../assets/images/EcoBanner.png";
+import { Link } from "react-router-dom";
+
+const BannerContent = [
+  {
+    head: "Meaningful",
+    heading1: ` partnerships`,
+    heading2: `that push the envelope`,
+  },
+  {
+    subheading: `Our partners are actively building dApps and other projects to support a variety of use cases, including ESG, media, real estate, construction, telecom, pharma, NFT, metaverse, deFi, gameFi, cybersecurity and more.`,
+  },
+  {
+    btn: `Learn Now`,
+  },
+];
+
+const EcoBanner = () => {
+  return (
+    <Box
+      height={"100vh"}
+      backgroundImage={`url(${banner})`}
+      backgroundRepeat={"no-repeat"}
+      backgroundSize={"cover"}
+      display={"grid"}
+      placeContent={"center"}
+      sx={{
+        "@media (max-width: 1024px)": {
+          height: "70vh",
+        },
+        "@media (max-width: 600px)": {
+          height: "85vh",
+        },
+      }}
+    >
+      <Container
+        alignItems={"center"}
+        display={"flex"}
+        height={"100vh"}
+        alignContent={"center"}
+        paddingTop={"10%"}
+        maxW="container.xl"
+        textAlign={"left"}
+        marginTop={"2rem"}
+        paddingLeft={"3.5rem"}
+        sx={{
+          "@media (max-width: 500px)": {
+            paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
+          },
+        }}
+      >
+        <Box
+          width={"78%"}
+          sx={{
+            "@media (max-width: 435px)": {
+              width: "100%",
+            },
+          }}
+        >
+          <Text
+            as={"h2"}
+            fontWeight={700}
+            fontSize={"52px"}
+            textTransform={"Capitalize"}
+            color={"#DE858E"}
+            lineHeight={"62px"}
+            letterSpacing={"1px"}
+            sx={{
+              "@media (max-width: 996px)": {
+                fontSize: "46px",
+              },
+              "@media (max-width: 600px)": {
+                fontSize: "40px",
+                marginBottom: "0rem",
+                lineHeight: "54px",
+              },
+            }}
+          >
+            <span
+              style={{
+                color: "#fff",
+              }}
+            >
+              {BannerContent[0].head}
+            </span>
+            {BannerContent[0].heading1} <br />
+            <span
+              style={{
+                color: "#fff",
+              }}
+            >
+              {BannerContent[0].heading2}
+            </span>
+          </Text>
+          <Box marginTop={"10px"} width={"80%"}>
+            <Text
+              color={"#fff"}
+              fontSize={"20px"}
+              fontWeight={"400"}
+              lineHeight={"37.5px"}
+              fontFamily={"Poppins"}
+              sx={{
+                "@media (max-width: 1024px)": {
+                  fontSize: "22px",
+                },
+                "@media (max-width: 500px)": {
+                  fontSize: "16px",
+                  lineHeight: "28px",
+                },
+              }}
+            >
+              {BannerContent[1].subheading}
+            </Text>
+          </Box>
+          <Link
+            to="https://learn.rubix.net/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Button
+              position={"relative"}
+              backgroundColor={"transparent"}
+              cursor={"pointer"}
+              transition="0.3s ease-in-out"
+              color={"#fff"}
+              width={"216px"}
+              marginTop={"2rem"}
+              height={"56px"}
+              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",
+                  width: "230px",
+                  height: "44px",
+                  marginTop: "2rem",
+                  bgGradient:
+                    "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
+                  color: "#000",
+                  fontWeight: "600",
+                },
+              }}
+              _hover={{
+                color: "#000",
+                border: "1px solid white",
+                zIndex: 1,
+              }}
+            >
+              {BannerContent[2].btn}
+            </Button>
+          </Link>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default EcoBanner;
diff --git a/src/components/EcoPage/EnterPrises.jsx b/src/components/EcoPage/EnterPrises.jsx
new file mode 100644
index 0000000..b321486
--- /dev/null
+++ b/src/components/EcoPage/EnterPrises.jsx
@@ -0,0 +1,125 @@
+/* eslint-disable no-unused-vars */
+import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
+import chainx from "../../assets/images/LearnCard2.png";
+import ensurity from "../../assets/images/LearnCard4.png";
+import exr from "../../assets/images/LearnCard5.png";
+import finalo from "../../assets/images/LearnCard1.png";
+import jupiter from "../../assets/images/LearnCard3.png";
+import { useMediaQuery } from "@chakra-ui/react";
+import EcoCard from "../Card/EcoCard";
+
+// import { Badge } from "@chakra-ui/react";
+
+const content = [
+  {
+    id: 1,
+    src: finalo,
+    alt: "Finalo Education",
+    text: `Building a Web3 infrastructure to support nonprofit communities, starting with YMCA`,
+    href: `https://www.finaoeducation.com/`,
+  },
+  {
+    id: 2,
+    src: `${chainx}`,
+    alt: "ChainX",
+    text: `Building solutions for an easier transition from Web2 to Web3 for global enterprises`,
+  },
+  {
+    id: 3,
+    src: jupiter,
+    alt: "Jupiter",
+    text: `A metaverse,XR, and Web3 entity offering solutions that infuse gamification and tokenomics.`,
+    href: `https://jupitermeta.io/`,
+  },
+  {
+    id: 4,
+    src: ensurity,
+    alt: "Ensurity",
+    text: `Delivers KYC/DID solutions for banks, and financial institutions, a highly secure algorithm for quantum security`,
+    href: `https://www.ensurity.com/`,
+  },
+  {
+    id: 5,
+    src: exr,
+    alt: "EXR",
+    text: `Mobile-based wallet that generates and stores private keys on a mobile device`,
+    href: `https://getfexr.com/`,
+  },
+];
+
+const Content = {
+  heading: `Enterprises and applications already on Rubix`,
+};
+
+const EnterPrises = () => {
+  const [isSmallScreen] = useMediaQuery("(max-width: 996px)");
+  return (
+    <Box
+      // height={"100vh"}
+      background={"#000"}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+      padding={"2rem 0 4rem 0"}
+    >
+      <Text
+        as={"h2"}
+        paddingTop={"2rem"}
+        paddingBottom={"2rem"}
+        paddingLeft={"6rem"}
+        fontWeight={700}
+        fontSize={"40px"}
+        textAlign={"left"}
+        textTransform={"capitalize"}
+        color={"#fff"}
+        width={"fit-content"}
+        sx={{
+          "@media (max-width: 500px)": {
+            fontSize: "22px",
+            fontWeight: "400",
+            marginBottom: "30px",
+            padding: "1rem",
+            paddingBottom: "0px",
+          },
+        }}
+      >
+        {Content.heading} {isSmallScreen ? null : <br />}
+      </Text>
+      <Box
+        // maxW="container.xl"
+        paddingLeft={"6rem"}
+        paddingBottom={"2rem"}
+        // height={"50vh"}
+        sx={{
+          "@media (max-width: 600px)": {
+            padding: "1rem",
+          },
+        }}
+      >
+        <Box
+          display={"flex"}
+          alignItems={"center"}
+          gap={"25px"}
+          overflowX={"auto"}
+          overflowY={"auto"}
+          sx={{
+            "&::-webkit-scrollbar": {
+              width: "0px",
+            },
+          }}
+        >
+          {content.map((item) => (
+            <EcoCard
+              key={item.id}
+              src={item.src}
+              alt={item.alt}
+              text={item.text}
+              href={item.href}
+            />
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default EnterPrises;
diff --git a/src/components/EventsPage/EventsSec.jsx b/src/components/EventsPage/EventsSec.jsx
new file mode 100644
index 0000000..60fb62f
--- /dev/null
+++ b/src/components/EventsPage/EventsSec.jsx
@@ -0,0 +1,82 @@
+import { Badge, Box, Container, Text } from "@chakra-ui/react";
+
+const EventsSec = () => {
+  return (
+    <Box
+      height={"80vh"}
+      backgroundColor={"#000"}
+      display={"grid"}
+      alignContent={"center"}
+      sx={{
+        "@media (max-width: 1024px)": {
+          height: "70vh",
+        },
+        "@media (max-width: 600px)": {
+          height: "400px",
+        },
+      }}
+    >
+      <Container
+        maxW="container.xl"
+        textAlign={"left"}
+        marginTop={"2rem"}
+        paddingLeft={"3.5rem"}
+        sx={{
+          "@media (max-width: 600px)": {
+            paddingLeft: "1rem",
+          },
+        }}
+      >
+        <Text
+          as={"h2"}
+          fontWeight={700}
+          fontSize={"52px"}
+          color={"#fff"}
+          lineHeight={"62px"}
+          letterSpacing={"1px"}
+          sx={{
+            "@media (max-width: 996px)": {
+              fontSize: "46px",
+            },
+            "@media (max-width: 600px)": {
+              fontSize: "40px",
+              marginBottom: "0rem",
+              lineHeight: "54px",
+            },
+          }}
+        >
+          Events
+        </Text>
+        <Box
+          marginTop={"1.5rem"}
+          sx={{
+            "@media (max-width: 500px)": {
+              width: "100%",
+            },
+          }}
+        >
+          <Text
+            color={"#fff"}
+            fontSize={"20px"}
+            fontWeight={"400"}
+            lineHeight={"37.5px"}
+            fontFamily={"Poppins"}
+            // textTransform={"capitalize"}
+            sx={{
+              "@media (max-width: 600px)": {
+                fontSize: "14px",
+                lineHeight: "28px",
+              },
+            }}
+          >
+            Stay up to date on what’s happening with Rubix,
+            <br /> learn about upcoming events and access
+            <br /> important resources.
+          </Text>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default EventsSec;
diff --git a/src/components/EventsPage/NewestEvents.jsx b/src/components/EventsPage/NewestEvents.jsx
new file mode 100644
index 0000000..908ecfd
--- /dev/null
+++ b/src/components/EventsPage/NewestEvents.jsx
@@ -0,0 +1,117 @@
+import { Badge, Box, Container, Image, Text } from "@chakra-ui/react";
+import pic from "../../assets/images/eventsPic.png";
+
+const NewestEvent = () => {
+  return (
+    <Box backgroundColor={"#000"}>
+      <Container
+        maxW="container.xl"
+        textAlign={"left"}
+        padding={"0rem 3.5rem"}
+        sx={{
+          "@media (max-width: 600px)": {
+            padding: "1rem",
+          },
+        }}
+      >
+        <Box
+          backgroundColor={"#101015"}
+          padding={"2rem"}
+          borderRadius={"5px"}
+          sx={{
+            "@media (max-width: 600px)": {
+              padding: "1rem",
+            },
+          }}
+        >
+          <Text
+            paddingBottom={"1rem"}
+            color={"#fff"}
+            fontSize={"18px"}
+            fontWeight={"500"}
+          >
+            Newest Post
+          </Text>
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"start"}
+            gap={"2rem"}
+            position={"relative"}
+            sx={{
+              "@media (max-width: 500px)": {
+                display: "block",
+              },
+            }}
+          >
+            <Text
+              color={"#fff"}
+              backgroundColor={"#DE858E"}
+              position={"absolute"}
+              top={"0"}
+              left={"17"}
+              padding={"6px 13px"}
+              textAlign={"center"}
+              sx={{
+                "@media (max-width: 500px)": {
+                  fontSize: "14px",
+                },
+              }}
+            >
+              May <br /> 04
+            </Text>
+            <Text>
+              <Image src={pic} />
+            </Text>
+            <Box flex={"1"}>
+              <Badge
+                backgroundColor={"transparent"}
+                color={"#fff"}
+                fontWeight={"500"}
+                fontFamily={"Poppins"}
+                fontSize={"14px"}
+                marginBottom={"1rem"}
+                sx={{
+                  "@media (max-width: 500px)": {
+                    marginTop: "2rem",
+                  },
+                }}
+              >
+                Events
+              </Badge>
+              <Text
+                as={"h2"}
+                marginBottom={"1rem"}
+                color={"#fff"}
+                fontSize={"25px"}
+                sx={{
+                  "@media (max-width: 500px)": {
+                    fontSize: "20px",
+                  },
+                }}
+              >
+                The Proofchain Technical Whitepaper
+              </Text>
+              <Text className="rubix-text-small" >
+                How do we align digital asset markets with UN Sustainable
+                Development Goals? Is the blockchain the missing piece to
+                bringing the world back on track to a two degree temperature
+                rise?
+              </Text>
+              <Text
+                color={"#A4A4A4"}
+                fontWeight={"300"}
+                fontSize={"14px"}
+                marginTop={"18px"}
+              >
+                Sunday, 10 May 2024
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default NewestEvent;
diff --git a/src/components/EventsPage/UpcomingEvents.jsx b/src/components/EventsPage/UpcomingEvents.jsx
new file mode 100644
index 0000000..4a54416
--- /dev/null
+++ b/src/components/EventsPage/UpcomingEvents.jsx
@@ -0,0 +1,128 @@
+/* eslint-disable no-unused-vars */
+import {
+  Box,
+  Container,
+  Text,
+  Image,
+  Button,
+  SimpleGrid,
+} from "@chakra-ui/react";
+import HappenCard from "../Card/HappenCard";
+
+const Latest = [
+  {
+    id: 1,
+    date: `Sunday, 10 May 2024`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
+    curentDate: "10",
+    month: "MAY",
+  },
+  {
+    id: 2,
+    date: `Sunday, 15 Jan 2024`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
+    curentDate: "10",
+    month: "MAY",
+  },
+  {
+    id: 3,
+    date: `Sunday, 14 Feb 2024`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
+    curentDate: "10",
+    month: "MAY",
+  },
+];
+
+const Content = {
+  heading: `Upcoming Events`,
+};
+
+const UpcomingEvents = () => {
+  return (
+    <Box
+      // height={"100vh"}
+      background={"#000"}
+      backgroundSize={"cover"}
+      backgroundRepeat={"no-repeat"}
+      paddingTop={"2rem"}
+      sx={{
+        "@media (max-width: 500px)": {
+          paddingTop: "0px",
+        },
+      }}
+    >
+      <Container
+        maxW={"container.xl"}
+        padding={"0 5rem"}
+        paddingBottom={"2rem"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            padding: "3rem",
+          },
+          "@media (max-width: 500px)": {
+            padding: "1rem",
+          },
+        }}
+      >
+        <Text
+          as={"h2"}
+          paddingTop={"2rem"}
+          paddingBottom={"2rem"}
+          fontWeight={700}
+          fontSize={"26px"}
+          textTransform={"capitalize"}
+          color={"#fff"}
+          sx={{
+            "@media (max-width: 500px)": {
+              fontSize: "22px",
+              fontWeight: "400",
+            },
+          }}
+        >
+          {Content.heading}
+        </Text>
+        <Box
+          paddingBottom={"2rem"}
+          // height={"50vh"}
+          sx={{
+            "@media (max-width: 500px)": {
+              paddingLeft: "0rem",
+            },
+          }}
+        >
+          <Box>
+            <SimpleGrid
+              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
+                  key={item.id}
+                  date={item.date}
+                  text={item.text}
+                  para={item.para}
+                  curentDate={item.curentDate}
+                  month={item.month}
+                />
+              ))}
+            </SimpleGrid>
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default UpcomingEvents;
diff --git a/src/components/LearnPage/LearnBanner.jsx b/src/components/LearnPage/LearnBanner.jsx
index abf941b..63c88f8 100644
--- a/src/components/LearnPage/LearnBanner.jsx
+++ b/src/components/LearnPage/LearnBanner.jsx
@@ -18,7 +18,7 @@ const BannerContent = [
   },
 ];
 
-const LearnBanner = () => {
+const LearnBanner = () => { 
   return (
     <Box
       height={"100vh"}
diff --git a/src/pages/Ecosystem.jsx b/src/pages/Ecosystem.jsx
new file mode 100644
index 0000000..926b9e7
--- /dev/null
+++ b/src/pages/Ecosystem.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import EcoBanner from '../components/EcoPage/EcoBanner'
+import EnterPrises from '../components/EcoPage/EnterPrises'
+import LearnMore from '../components/Community/LearnMore'
+
+const Ecosystem = () => {
+  return (
+    <div>
+      <EcoBanner />
+      <EnterPrises />
+      <LearnMore/>
+    </div>
+  )
+}
+
+export default Ecosystem
diff --git a/src/pages/Events.jsx b/src/pages/Events.jsx
new file mode 100644
index 0000000..e5dc203
--- /dev/null
+++ b/src/pages/Events.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import EventsSec from "../components/EventsPage/EventsSec";
+import NewestEvent from "../components/EventsPage/NewestEvents";
+import UpcomingEvents from "../components/EventsPage/UpcomingEvents";
+
+const Events = () => {
+  return (
+    <>
+      <EventsSec />
+      <NewestEvent />
+      <UpcomingEvents />
+    </>
+  );
+};
+
+export default Events;
diff --git a/src/pages/LearnPage.jsx b/src/pages/LearnPage.jsx
index df18826..4ddfbd3 100644
--- a/src/pages/LearnPage.jsx
+++ b/src/pages/LearnPage.jsx
@@ -15,7 +15,7 @@ const LearnPage = () => {
   return (
     <>
       <LearnBanner />
-      <LearnDev />
+      <LearnDev />   
       <WhyRubix />
       <GetStarted />
       <Faq />
diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx
index 75fee8e..17081f4 100644
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -24,6 +24,8 @@ import Form from "../components/Contact/Form";
 import UseCase from "../components/UseCase/UseCase";
 import ResourcesPage from "../pages/ResourcesPage";
 import VideoInternal from "../components/VideoInternal/VideoInternal";
+import Ecosystem from "../pages/Ecosystem";
+import Events from "../pages/Events";
 
 export const route = [
   {
@@ -83,6 +85,14 @@ export const route = [
     path: "video-page",
     element: <VideoInternal />,
   },
+  {
+    path: "ecosystem",
+    element: <Ecosystem />,
+  },
+  {
+    path: "events",
+    element: <Events />,
+  },
   {
     path: "*",
     element: <NotFound />,