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/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/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/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 b156a6d..d9654d0 100644
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -23,6 +23,7 @@ import healthTech from "../assets/images/health-tech.png";
 import Form from "../components/Contact/Form";
 import UseCase from "../components/UseCase/UseCase";
 import ResourcesPage from "../pages/ResourcesPage";
+import Ecosystem from "../pages/Ecosystem";
 
 export const route = [
   {
@@ -78,6 +79,10 @@ export const route = [
     path: "resources-page",
     element: <ResourcesPage />,
   },
+  {
+    path: "ecosystem",
+    element: <Ecosystem />,
+  },
   {
     path: "*",
     element: <NotFound />,