diff --git a/src/Redux/slice/bannerSlice.js b/src/Redux/slice/bannerSlice.js
new file mode 100644
index 0000000..bf21ea3
--- /dev/null
+++ b/src/Redux/slice/bannerSlice.js
@@ -0,0 +1,24 @@
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
+
+export const learnPage = createApi({
+    reducerPath: 'LearnPage',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+    endpoints: (builder) => ({
+        getLearnPage: builder.query({
+            query: () => 'learn/active',
+        }),
+    }),
+});
+
+export const buildPage = createApi({
+    reducerPath: 'BuildPage',
+    baseQuery: fetchBaseQuery({ baseUrl: 'https://rubix.betadelivery.com/api/' }),
+    endpoints: (builder) => ({
+        getBuildPage: builder.query({
+            query: () => 'build/active',
+        }),
+    }),
+});
+
+export const { useGetLearnPageQuery } = learnPage;
+export const { useGetBuildPageQuery } = buildPage;
diff --git a/src/Redux/store/store.js b/src/Redux/store/store.js
index e3389d2..1c47951 100644
--- a/src/Redux/store/store.js
+++ b/src/Redux/store/store.js
@@ -7,6 +7,7 @@ import { resourcesApi } from '../slice/resources';
 import { videoTableApi } from '../slice/videoTable';
 import { newsLetterApi } from '../slice/newsLetter';
 import { whitePaper } from '../slice/whitePaperSlice';
+import { buildPage, learnPage } from '../slice/bannerSlice';
 
 const store = configureStore({
     reducer: {
@@ -18,6 +19,8 @@ const store = configureStore({
         [videoTableApi.reducerPath]: videoTableApi.reducer,
         [newsLetterApi.reducerPath]: newsLetterApi.reducer,
         [whitePaper.reducerPath]: whitePaper.reducer,
+        [learnPage.reducerPath]: learnPage.reducer,
+        [buildPage.reducerPath]: buildPage.reducer,
     },
     middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware().concat(
@@ -29,6 +32,8 @@ const store = configureStore({
             videoTableApi.middleware,
             newsLetterApi.middleware,
             whitePaper.middleware,
+            learnPage.middleware,
+            buildPage.middleware
         ), // Add blogApi.middleware here
 });
 
diff --git a/src/components/BuildPage/BuildBanner.jsx b/src/components/BuildPage/BuildBanner.jsx
index 2bc1c7a..2f41a97 100644
--- a/src/components/BuildPage/BuildBanner.jsx
+++ b/src/components/BuildPage/BuildBanner.jsx
@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
 import { Box, Button, Container, Text } from "@chakra-ui/react";
 import banner from "../../assets/images/BuildBanner.webp";
 import { Link } from "react-router-dom";
@@ -16,172 +18,177 @@ const BannerContent = [
   },
 ];
 
-const BuildBanner = () => {
+const BuildBanner = ({ data }) => {
   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",
-          backgroundPositionX: "center",
-        },
-      }}
-    >
-      <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
-          },
-        }}
-      >
+    <>
+      {data.map((item) => (
         <Box
-          width={"75%"}
+          key={item.id}
+          height={"100vh"}
+          backgroundImage={`url(https://rubix.betadelivery.com/${item.banner_image})`}
+          backgroundRepeat={"no-repeat"}
+          backgroundSize={"cover"}
+          display={"grid"}
+          placeContent={"center"}
           sx={{
-            "@media (max-width: 435px)": {
-              width: "100%",
+            "@media (max-width: 1024px)": {
+              height: "70vh",
+            },
+            "@media (max-width: 600px)": {
+              height: "85vh",
+              backgroundPositionX: "center",
             },
           }}
         >
-          <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",
-              },
-            }}
-          >
-            {BannerContent[0].heading1} <br />
-            <span
-              style={{
-                color: "#fff",
-              }}
-            >
-              {BannerContent[0].heading2}
-            </span>
-          </Text>
-          <Box
-            marginTop={"1.5rem"}
-            width={"80%"}
+          <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)": {
-                width: "100%",
+                paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
               },
             }}
           >
-            <Text
-              color={"#fff"}
-              fontSize={"20px"}
-              fontWeight={"400"}
-              lineHeight={"37.5px"}
-              fontFamily={"Poppins"}
-              width={"88%"}
+            <Box
+              width={"75%"}
               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/node-setup/"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <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": {
+                "@media (max-width: 435px)": {
                   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>
+              <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",
+                  },
+                }}
+              >
+                {item.Heading} <br />
+                {/* <span
+                  style={{
+                    color: "#fff",
+                  }}
+                >
+                  {BannerContent[0].heading2}
+                </span> */}
+              </Text>
+              <Box
+                marginTop={"1.5rem"}
+                width={"80%"}
+                sx={{
+                  "@media (max-width: 500px)": {
+                    width: "100%",
+                  },
+                }}
+              >
+                <Text
+                  color={"#fff"}
+                  fontSize={"20px"}
+                  fontWeight={"400"}
+                  lineHeight={"37.5px"}
+                  fontFamily={"Poppins"}
+                  width={"88%"}
+                  sx={{
+                    "@media (max-width: 1024px)": {
+                      fontSize: "22px",
+                    },
+                    "@media (max-width: 500px)": {
+                      fontSize: "16px",
+                      lineHeight: "28px",
+                    },
+                  }}
+                >
+                  {item.sub_heading}
+                </Text>
+              </Box>
+              <Link
+                to="https://learn.rubix.net/node-setup/"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <Button
+                  position={"relative"}
+                  backgroundColor={"transparent"}
+                  cursor={"pointer"}
+                  transition="0.3s ease-in-out"
+                  color={"#fff"}
+                  width={"auto"}
+                  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,
+                  }}
+                >
+                  {item.CTO_button_title}
+                </Button>
+              </Link>
+            </Box>
+          </Container>
         </Box>
-      </Container>
-    </Box>
+      ))}
+    </>
   );
 };
 
diff --git a/src/components/LearnPage/LearnBanner.jsx b/src/components/LearnPage/LearnBanner.jsx
index 63c88f8..3fa8e73 100644
--- a/src/components/LearnPage/LearnBanner.jsx
+++ b/src/components/LearnPage/LearnBanner.jsx
@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
 import { Box, Button, Container, Text } from "@chakra-ui/react";
 import banner from "../../assets/images/learnBanner.webp";
 import { Link } from "react-router-dom";
@@ -18,169 +20,160 @@ const BannerContent = [
   },
 ];
 
-const LearnBanner = () => { 
+const LearnBanner = ({ data }) => {
   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
-          },
-        }}
-      >
+    <>
+      {data?.map((item) => (
         <Box
-          width={"78%"}
+          key={item.id}
+          height={"100vh"}
+          backgroundImage={`url(https://rubix.betadelivery.com/${item.banner_image})`}
+          backgroundRepeat={"no-repeat"}
+          backgroundSize={"cover"}
+          display={"grid"}
+          placeContent={"center"}
           sx={{
-            "@media (max-width: 435px)": {
-              width: "100%",
+            "@media (max-width: 1024px)": {
+              height: "70vh",
+            },
+            "@media (max-width: 600px)": {
+              height: "85vh",
             },
           }}
         >
-          <Text
-            as={"h2"}
-            fontWeight={700}
-            fontSize={"52px"}
-            textTransform={"Capitalize"}
-            color={"#DE858E"}
-            lineHeight={"62px"}
-            letterSpacing={"1px"}
+          <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: 996px)": {
-                fontSize: "46px",
-              },
-              "@media (max-width: 600px)": {
-                fontSize: "40px",
-                marginBottom: "0rem",
-                lineHeight: "54px",
+              "@media (max-width: 500px)": {
+                paddingLeft: "1rem", // Correctly target paddingLeft instead of padding
               },
             }}
           >
-            <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"}
+            <Box
+              width={"78%"}
               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": {
+                "@media (max-width: 435px)": {
                   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>
+              <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",
+                  },
+                }}
+              >
+                {item.Heading}
+              </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",
+                    },
+                  }}
+                >
+                  {item.sub_heading}
+                </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={"auto"}
+                  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,
+                  }}
+                >
+                  {item.CTO_button_title}
+                </Button>
+              </Link>
+            </Box>
+          </Container>
         </Box>
-      </Container>
-    </Box>
+      ))}
+    </>
   );
 };
 
diff --git a/src/pages/BuildPage.jsx b/src/pages/BuildPage.jsx
index 98ea3c1..9fd056d 100644
--- a/src/pages/BuildPage.jsx
+++ b/src/pages/BuildPage.jsx
@@ -8,8 +8,13 @@ import { useEffect, useState } from "react";
 import LearnMore from "../components/BuildPage/LearnMore";
 import ToolMobile from "../components/MobileComponent/ToolMobile";
 import MobileSolve from "../components/MobileComponent/MobileSolve";
+import { useGetBuildPageQuery } from "../Redux/slice/bannerSlice";
 
 const BuildPage = () => {
+  const { data } = useGetBuildPageQuery();
+  const buildBanner = data?.data?.data;
+  console.log(buildBanner);
+
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
   useEffect(() => {
@@ -33,7 +38,7 @@ const BuildPage = () => {
 
   return (
     <>
-      <BuildBanner />
+      <BuildBanner data={buildBanner} />
       <WhyBuild />
       {!isMobile ? <Solve /> : <MobileSolve />}
       {!isMobile ? <Tools /> : <ToolMobile />}
diff --git a/src/pages/LearnPage.jsx b/src/pages/LearnPage.jsx
index 4ddfbd3..72e4f7a 100644
--- a/src/pages/LearnPage.jsx
+++ b/src/pages/LearnPage.jsx
@@ -6,16 +6,31 @@ import GetStarted from "../components/LearnPage/GetStarted";
 import LearnBanner from "../components/LearnPage/LearnBanner";
 import LearnDev from "../components/LearnPage/LearnDev";
 import WhyRubix from "../components/LearnPage/WhyRubix";
+import { useGetLearnPageQuery } from "../Redux/slice/bannerSlice";
+import Loader from "../components/Loader/Loader";
 
 const LearnPage = () => {
+  const { data, isLoading, error } = useGetLearnPageQuery();
+  const learnData = data?.data?.data;
+  console.log(learnData);
+
   useEffect(() => {
     // Scroll to the top of the page when the component mounts
     window.scrollTo(0, 0);
   }, []);
+
+  if (isLoading) {
+    return (
+      <div>
+        <Loader />
+      </div>
+    );
+  }
+
   return (
     <>
-      <LearnBanner />
-      <LearnDev />   
+      <LearnBanner data={learnData} />
+      <LearnDev />
       <WhyRubix />
       <GetStarted />
       <Faq />