diff --git a/src/Pages/Banners/Banner.jsx b/src/Pages/Banners/Banner.jsx
index a75a15b..31baa9b 100644
--- a/src/Pages/Banners/Banner.jsx
+++ b/src/Pages/Banners/Banner.jsx
@@ -4,6 +4,7 @@ import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import {
   useGetBuildBannerQuery,
   useGetCommunityBannerQuery,
+  useGetEcoBannerQuery,
   useGetHomeBannerQuery,
   useGetLearnBannerQuery,
   useGetNewsBannerQuery,
@@ -17,6 +18,7 @@ const Banner = () => {
   const buildBanner = useGetBuildBannerQuery();
   const newsBanner = useGetNewsBannerQuery();
   const homeBanner = useGetHomeBannerQuery();
+  const ecoBanner = useGetEcoBannerQuery();
 
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"}>
@@ -64,6 +66,14 @@ const Banner = () => {
         bannerArray={newsBanner?.data?.data?.rows?.slice(0, 3)}
         viewBannerLink={"/banner/news/view"}
       />
+      <Divider />
+      <BannerStack
+        stackTitle={"Ecosystem banner"}
+        viewAllLink={"/banner/eco"}
+        bannerIsLoading={ecoBanner?.isLoading}
+        bannerArray={ecoBanner?.data?.data?.rows?.slice(0, 3)}
+        viewBannerLink={"/banner/eco/view"}
+      />
     </Box>
   );
 };
diff --git a/src/Pages/Banners/EcoBanner/EcoBanner.jsx b/src/Pages/Banners/EcoBanner/EcoBanner.jsx
new file mode 100644
index 0000000..60ad09b
--- /dev/null
+++ b/src/Pages/Banners/EcoBanner/EcoBanner.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import {
+  useDeleteBuildBannerMutation,
+  useDeleteEcoBannerMutation,
+  useDeleteLearnBannerMutation,
+  useDeleteNewsBannerMutation,
+  useGetBuildBannerQuery,
+  useGetEcoBannerQuery,
+  useGetLearnBannerQuery,
+  useGetNewsBannerQuery,
+  useUpdateBuildBannerStatusMutation,
+  useUpdateEcoBannerStatusMutation,
+  useUpdateLearnBannerStatusMutation,
+  useUpdateNewsBannerStatusMutation,
+} from "../../../Services/api.service";
+import BannerTable from "../../../Components/Banner/BannerTable";
+
+const EcoBanner = () => {
+  const ecoBanner = useGetEcoBannerQuery();
+  const [deleteEcoBanner] = useDeleteEcoBannerMutation();
+  const [updateEcoBuildStatus] = useUpdateEcoBannerStatusMutation();
+  const { data, error, isLoading } = useUpdateNewsBannerStatusMutation();
+  return (
+    <BannerTable
+      addLink={"/banner/eco/add-banner"}
+      title={"Ecosystem Banner"}
+      viewLink={"/banner/eco/view/"}
+      editLink={"/banner/eco/edit/"}
+      deleteApi={deleteEcoBanner}
+      dataArray={ecoBanner}
+      statusUpdateApi={updateEcoBuildStatus}
+    />
+  );
+};
+
+export default EcoBanner;
diff --git a/src/Pages/Banners/EcoBanner/EcoBannerAdd.jsx b/src/Pages/Banners/EcoBanner/EcoBannerAdd.jsx
new file mode 100644
index 0000000..eedc319
--- /dev/null
+++ b/src/Pages/Banners/EcoBanner/EcoBannerAdd.jsx
@@ -0,0 +1,15 @@
+import AddBanner from "../../../Components/Banner/AddBanner";
+import { useCreateEcoBannerMutation, useCreateLearnBannerMutation, useCreateNewsBannerMutation } from "../../../Services/api.service";
+
+const EcoBannerAdd = () => {
+  const [createEcoBannerData] = useCreateEcoBannerMutation();
+  return (
+    <AddBanner
+      title={"Ecosystem banner"}
+      navigateLink={"/banner/eco"}
+      createApi={createEcoBannerData}
+    />
+  );
+};
+
+export default EcoBannerAdd;
diff --git a/src/Pages/Banners/EcoBanner/EcoBannerEdit.jsx b/src/Pages/Banners/EcoBanner/EcoBannerEdit.jsx
new file mode 100644
index 0000000..e2ce33e
--- /dev/null
+++ b/src/Pages/Banners/EcoBanner/EcoBannerEdit.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import BannerEdit from '../../../Components/Banner/BannerEdit'
+import { useParams } from 'react-router-dom';
+import { useGetEcoBannerByIdQuery, useGetNewsBannerByIdQuery, useUpdateEcoBannerMutation, useUpdateNewsBannerMutation } from '../../../Services/api.service';
+
+const EcoBannerEdit = () => {
+  const { id } = useParams();
+  const { data, error, isLoading } = useGetEcoBannerByIdQuery(id);
+  const [updateNewsBanner] = useUpdateEcoBannerMutation();
+  return (
+    <BannerEdit navigateTo="/banner/eco" isLoading={isLoading} data={data} updateBanner={updateNewsBanner} />
+  )
+}
+
+export default EcoBannerEdit
\ No newline at end of file
diff --git a/src/Pages/Banners/EcoBanner/EcoBannerView.jsx b/src/Pages/Banners/EcoBanner/EcoBannerView.jsx
new file mode 100644
index 0000000..133292e
--- /dev/null
+++ b/src/Pages/Banners/EcoBanner/EcoBannerView.jsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useGetEcoBannerByIdQuery, useGetLearnBannerByIdQuery, useGetNewsBannerByIdQuery } from "../../../Services/api.service";
+import BannerView from "../../../Components/Banner/BannerView";
+
+const EcoBannerView = () => {
+  const { id } = useParams();
+  console.log(id);
+  const { data, error, isLoading } = useGetEcoBannerByIdQuery(id);
+
+  
+  return <BannerView editLink={'/banner/eco/edit'} isLoading={isLoading} data={data} />;
+};
+
+export default EcoBannerView;
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index b62b453..1143e8c 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -46,6 +46,10 @@ import EditEvents from "../Pages/Events/EditEvents";
 import AddVideos from "../Pages/Videos/AddVideos";
 import ViewVideos from "../Pages/Videos/ViewVideos";
 import EditVideos from "../Pages/Videos/EditVideos";
+import EcoBanner from "../Pages/Banners/EcoBanner/EcoBanner";
+import EcoBannerAdd from "../Pages/Banners/EcoBanner/EcoBannerAdd";
+import EcoBannerView from "../Pages/Banners/EcoBanner/EcoBannerView";
+import EcoBannerEdit from "../Pages/Banners/EcoBanner/EcoBannerEdit";
 
 export const RouteLink = [
   { path: "/", Component: UnderConstruction },
@@ -82,6 +86,13 @@ export const RouteLink = [
   { path: "banner/learn/view/:id", Component: ViewLearnBanner },
   { path: "banner/learn/edit/:id", Component: BannerLearnEdit }, 
 
+  
+  // =============[ eco banner ]================
+  { path: "banner/eco", Component: EcoBanner },
+  { path: "banner/eco/add-banner", Component: EcoBannerAdd },
+  { path: "banner/eco/view/:id", Component: EcoBannerView },
+  { path: "banner/eco/edit/:id", Component: EcoBannerEdit },
+
   // =============[ build banner ]================
   { path: "banner/build", Component: BannerBuild },
   { path: "banner/build/add-banner", Component: BannerBuildAdd },
diff --git a/src/Services/api.service.js b/src/Services/api.service.js
index 1a5817d..ba54e78 100644
--- a/src/Services/api.service.js
+++ b/src/Services/api.service.js
@@ -32,7 +32,8 @@ export const rubixApi = createApi({
     "getVideos",
 
 
-    "getWhitePaper"
+    "getWhitePaper",
+    "getEcoBanner"
   ],
   endpoints: (builder) => ({
     // ===============[ Community cards endpoints ]=======================
@@ -403,6 +404,52 @@ export const rubixApi = createApi({
       invalidatesTags: ["getHomeBanner"],
     }),
 
+    
+    // ===============[ Ecosystem Banners endpoints ]=======================
+    getEcoBanner: builder.query({
+      query: () => "/admin/eco",
+      providesTags: ["getEcoBanner"],
+    }),
+    createEcoBanner: builder.mutation({
+      query: (newBanner) => ({
+        url: "/admin/eco",
+        method: "POST",
+        body: newBanner,
+      }),
+      invalidatesTags: ["getEcoBanner"],
+    }),
+    getEcoBannerById: builder.query({
+      query: (id) => `/admin/eco/${id}`,
+      providesTags: ["getEcoBannerById"],
+    }),
+    deleteEcoBanner: builder.mutation({
+      query: (id) => ({
+        url: `/admin/eco/${id}`,
+        method: "DELETE",
+      }),
+      invalidatesTags: ["getEcoBanner"],
+    }),
+    updateEcoBannerStatus: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/admin/eco/change-visibility/${id}`,
+        method: "POST",
+        body:data
+      }),
+      invalidatesTags: ["getEcoBanner"],
+    }),
+    updateEcoBanner: builder.mutation({
+      query: ({ id, data }) => ({
+        url: `/admin/eco/${id}`,
+        method: "PUT",
+        body: data, // Include the data you want to send in the request body
+      }),
+      invalidatesTags: ["getEcoBanner"],
+    }),
+
+
+
+
+
 
 
     
@@ -502,6 +549,12 @@ export const rubixApi = createApi({
 
 
 
+
+
+
+
+
+
   }),
 });
 
@@ -587,4 +640,15 @@ export const {
   useCreateWhitepaperMutation,
   useGetWhitepaperByIdQuery,
   useUpdateWhitepaperMutation,
+
+
+
+  useGetEcoBannerByIdQuery,
+  useGetEcoBannerQuery,
+  useUpdateEcoBannerMutation,
+  useUpdateEcoBannerStatusMutation,
+  useDeleteEcoBannerMutation,
+  useCreateEcoBannerMutation,
+
+  
 } = rubixApi;
diff --git a/src/Theme/Theme.js b/src/Theme/Theme.js
index de7f680..4c8758a 100644
--- a/src/Theme/Theme.js
+++ b/src/Theme/Theme.js
@@ -34,7 +34,7 @@ const customTheme = extendTheme({
       baseStyle: {
         track: {
           _checked: {
-            bg: '#fd1449', // using your custom color here
+            bg: 'peach.500', // using your custom color here
           },
         },
       },