diff --git a/src/App.jsx b/src/App.jsx
index 00bd98c..50428ae 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -7,12 +7,14 @@ import {
 import HomePage from "./pages/HomePage";
 import NavBar from "./components/NavBar/NavBar";
 import LearnPage from "./pages/LearnPage";
+import BuildPage from "./pages/BuildPage";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<NavBar />}>
       <Route index element={<HomePage />} />
       <Route path="LearnPage" element={<LearnPage />} />
+      <Route path="BuildPage" element={<BuildPage />} />
     </Route>
   )
 );
diff --git a/src/assets/images/BuildBanner.png b/src/assets/images/BuildBanner.png
new file mode 100644
index 0000000..e3bf308
Binary files /dev/null and b/src/assets/images/BuildBanner.png differ
diff --git a/src/components/BuildPage/BuildBanner.jsx b/src/components/BuildPage/BuildBanner.jsx
new file mode 100644
index 0000000..d9069a0
--- /dev/null
+++ b/src/components/BuildPage/BuildBanner.jsx
@@ -0,0 +1,171 @@
+import { Box, Button, Container, Text } from "@chakra-ui/react";
+import banner from "../../assets/images/BuildBanner.png";
+
+const BannerContent = [
+  {
+    heading1: `Build Next-Gen dApps`,
+    heading2: `with Rubix`,
+  },
+  {
+    subheading: `Whether you are developing a Web3 app or expanding your Web2 app to incorporate Web3 features, 
+    building with Rubix is simple, fast, and easy.`,
+  },
+  {
+    btn: `Build Now`,
+  },
+];
+
+const BuildBanner = () => {
+  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
+        maxW="container.xl"
+        textAlign={"left"}
+        marginTop={"2rem"}
+        paddingLeft={"5rem"}
+        sx={{
+          "@media (max-width: 435px)": {
+            paddingLeft: "2rem",
+          },
+        }}
+      >
+        <Box
+          width={"90%"}
+          sx={{
+            "@media (max-width: 435px)": {
+              width: "100%",
+            },
+          }}
+        >
+          <Text
+            as={"h2"}
+            fontWeight={700}
+            fontSize={"60px"}
+            textTransform={"upperCase"}
+            color={"#DE858E"}
+            sx={{
+              "@media (max-width: 996px)": {
+                fontSize: "35px",
+              },
+              "@media (max-width: 600px)": {
+                fontSize: "28px",
+                marginBottom: "2rem",
+              },
+              "@media (max-width: 412px)": {
+                fontSize: "24px",
+                marginTop: "2rem",
+              },
+            }}
+          >
+            {BannerContent[0].heading1} <br />
+            <span
+              style={{
+                color: "#fff",
+                fontWeight: "600",
+              }}
+            >
+              {BannerContent[0].heading2}
+            </span>
+          </Text>
+          <Box marginTop={"1.5rem"} width={"80%"}>
+            <Text
+              color={"#fff"}
+              fontSize={"25px"}
+              fontWeight={"400"}
+              lineHeight={"37.5px"}
+              fontFamily={"Poppins"}
+              sx={{
+                "@media (max-width: 1024px)": {
+                  fontSize: "22px",
+                },
+                "@media (max-width: 600px)": {
+                  fontSize: "17px",
+                },
+              }}
+            >
+              {BannerContent[1].subheading}
+            </Text>
+          </Box>
+        </Box>
+      </Container>
+      <Container
+        maxW="container.xl"
+        textAlign={"left"}
+        marginTop={"3rem"}
+        paddingLeft={"5rem"}
+        sx={{
+          "@media (max-width: 435px)": {
+            paddingLeft: "2rem",
+          },
+          "@media (max-width: 375px)": {
+            marginTop: "1rem",
+          },
+        }}
+      >
+        <Button
+          position={"relative"}
+          backgroundColor={"transparent"}
+          cursor={"pointer"}
+          transition="0.3s ease-in-out"
+          color={"#fff"}
+          width={"227px"}
+          height={"60px"}
+          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",
+            },
+          }}
+          _hover={{
+            color: "#000",
+            border: "none",
+            zIndex: 1,
+          }}
+        >
+          {BannerContent[2].btn}
+        </Button>
+      </Container>
+    </Box>
+  );
+};
+
+export default BuildBanner;
diff --git a/src/components/BuildPage/WhyBuild.jsx b/src/components/BuildPage/WhyBuild.jsx
new file mode 100644
index 0000000..165f1aa
--- /dev/null
+++ b/src/components/BuildPage/WhyBuild.jsx
@@ -0,0 +1,177 @@
+import { Box, Container, Image, Text } from "@chakra-ui/react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionButton,
+  AccordionPanel,
+  AccordionIcon,
+} from "@chakra-ui/react";
+import bg from "../../assets/images/whyRubix.png";
+import cube from "../../assets/images/cube.png";
+
+const accordion = [
+  {
+    id: 1,
+    title: `Unlimited concurrent transactions`,
+    content: `The Rubix network supports millions of concurrent transactions
+    by eliminating the need to queue transactions for the
+    blockchain.`,
+  },
+  {
+    id: 2,
+    title: `Scalability`,
+    content: `The Rubix network supports millions of concurrent transactions
+    by eliminating the need to queue transactions for the
+    blockchain.`,
+  },
+  {
+    id: 3,
+    title: `Truly decentralised, secure and private`,
+    content: `The Rubix network supports millions of concurrent transactions
+    by eliminating the need to queue transactions for the
+    blockchain.`,
+  },
+  {
+    id: 4,
+    title: `ROI friendly`,
+    content: `The Rubix network supports millions of concurrent transactions
+    by eliminating the need to queue transactions for the
+    blockchain.`,
+  },
+];
+
+const WhyBuild = () => {
+  return (
+    <Box
+      backgroundImage={`url(${bg})`}
+      backgroundRepeat={"no-repeat"}
+      backgroundSize={"cover"}
+    >
+      <Container
+        maxW={"container.xl"}
+        padding={"5rem"}
+        sx={{
+          "@media (max-width: 1024px)": {
+            padding: "3rem",
+          },
+          "@media (max-width: 435px)": {},
+        }}
+      >
+        <Text
+          as={"h2"}
+          // paddingTop={"3rem"}
+          paddingBottom={"2rem"}
+          fontWeight={700}
+          fontSize={"40px"}
+          textAlign={"left"}
+          textTransform={"capitalize"}
+          color={"#fff"}
+          sx={{
+            "@media (max-width: 1024px)": {
+              fontSize: "35px",
+            },
+            "@media (max-width: 475px)": {
+              fontSize: "26px",
+              textAlign: "center",
+            },
+          }}
+        >
+          Why developers choose Rubix
+        </Text>
+        <Box
+          display={"flex"}
+          alignItems={"flex-start"}
+          justifyContent={"space-between"}
+          gap={"2rem"}
+          sx={{
+            "@media (max-width: 435px)": {
+              flexDirection: "column-reverse",
+              alignItems: "center",
+            },
+            "@media (max-width: 375px)": {},
+          }}
+        >
+          <Box
+            width={"70%"}
+            sx={{
+              "@media (max-width: 435px)": {
+                width: "100%",
+              },
+              "@media (max-width: 375px)": {},
+            }}
+          >
+            <Accordion allowToggle defaultIndex={[0]}>
+              {accordion.map((accord) => (
+                <>
+                  <AccordionItem
+                    borderTop={"none"}
+                    borderBottom={"1px solid white"}
+                    marginBottom={"1rem"}
+                    padding={"1rem 0"}
+                    key={accord.id}
+                  >
+                    <h2>
+                      <AccordionButton outline={"none"} paddingLeft={"0px"}>
+                        <Box
+                          as="span"
+                          flex="1"
+                          textAlign="left"
+                          fontFamily={"Mona Sans"}
+                          fontWeight={"500"}
+                          fontSize={"30px"}
+                          color={"#fff"}
+                          sx={{
+                            "@media (max-width: 435px)": {
+                              fontSize: "22px",
+                            },
+                            "@media (max-width: 375px)": {},
+                          }}
+                        >
+                          {accord.title}
+                        </Box>
+                        <AccordionIcon color={"#fff"} fontSize={"40px"} />
+                      </AccordionButton>
+                    </h2>
+                    <AccordionPanel
+                      pb={4}
+                      fontFamily={"Poppins"}
+                      fontWeight={"400"}
+                      color={"#E8E8E8"}
+                      width={"80%"}
+                      fontSize={"21px"}
+                      paddingLeft={"0px"}
+                      sx={{
+                        "@media (max-width: 1024px)": {
+                          width: "100%",
+                        },
+                        "@media (max-width: 435px)": {
+                          fontSize: "18px",
+                        },
+                      }}
+                    >
+                      {accord.content}
+                    </AccordionPanel>
+                  </AccordionItem>
+                </>
+              ))}
+            </Accordion>
+          </Box>
+          <Box>
+            <Image
+              src={cube}
+              width={"550px"}
+              sx={{
+                "@media (max-width: 1024px)": {
+                  width: "260px",
+                },
+                "@media (max-width: 435px)": {},
+              }}
+            />
+          </Box>
+        </Box>
+      </Container>
+    </Box>
+  );
+};
+
+export default WhyBuild;
diff --git a/src/components/Card/HomeCard.jsx b/src/components/Card/HomeCard.jsx
index 1087779..57aa8c0 100644
--- a/src/components/Card/HomeCard.jsx
+++ b/src/components/Card/HomeCard.jsx
@@ -3,7 +3,7 @@ import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
 import cardimg from "../../assets/images/CardImg.png";
 import { Badge } from "@chakra-ui/react";
 
-const HomeCard = () => {
+const HomeCard = ({ key, date, text }) => {
   return (
     <Box
       backgroundImage={
@@ -12,7 +12,13 @@ const HomeCard = () => {
       padding={"1px"}
       borderRadius={"10px"}
     >
-      <Box width={"502px"} background={"#151419"} borderRadius={"10px"}>
+      <Box
+        width={"502px"}
+        background={"#151419"}
+        borderRadius={"10px"}
+        minHeight={"502px"}
+        key={key}
+      >
         <Image src={cardimg} />
         <Box padding={"1rem"}>
           <Badge
@@ -26,10 +32,16 @@ const HomeCard = () => {
           </Badge>
 
           <Text fontSize={"12px"} color={"#979797"} margin={"25px 0px"}>
-            Published: March 13, 2020
+            {date}
           </Text>
-          <Text color={"#fff"} fontSize={"24px"} marginBottom={"20px"}>
-            Multichain over Blockchain — A reality check on security threat
+          <Text
+            color={"#fff"}
+            fontSize={"24px"}
+            marginBottom={"20px"}
+            minHeight={"73px"}
+            maxWidth={"460px"}
+          >
+            {text}
           </Text>
           <Box
             display={"flex"}
diff --git a/src/components/HomePage/HomeBanner.jsx b/src/components/HomePage/HomeBanner.jsx
index 913c691..d7c8803 100644
--- a/src/components/HomePage/HomeBanner.jsx
+++ b/src/components/HomePage/HomeBanner.jsx
@@ -1,6 +1,7 @@
 import { Box, Button, Text } from "@chakra-ui/react";
 import { Container } from "@chakra-ui/react";
 import banner from "../../assets/images/bannerBg.gif";
+import { ScaleFade } from "@chakra-ui/react";
 
 const BannerContent = [
   {
@@ -27,6 +28,9 @@ const HomeBanner = () => {
       placeContent={"center"}
       position="relative"
       zIndex={"2"}
+      ScaleFade
+      initialScale={0.9}
+      in={true}
       sx={{
         "&::after": {
           content: '""',
diff --git a/src/components/HomePage/Resources.jsx b/src/components/HomePage/Resources.jsx
index 722c60b..2f826c6 100644
--- a/src/components/HomePage/Resources.jsx
+++ b/src/components/HomePage/Resources.jsx
@@ -2,6 +2,24 @@
 import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
 import HomeCard from "../Card/HomeCard";
 
+const content = [
+  {
+    id: 1,
+    date: `Published: March 13, 2020`,
+    text: `Multichain over Blockchain — A reality check on security threat`,
+  },
+  {
+    id: 2,
+    date: `Published: March 13, 2020`,
+    text: `Financial Times Crypto & Digital Assets Summit Panel`,
+  },
+  {
+    id: 3,
+    date: `Published: March 13, 2020`,
+    text: `Enterprise blockchains on a Public Chain!`,
+  },
+];
+
 const Content = {
   heading: `Resources and Latest Happenings`,
 };
@@ -55,8 +73,8 @@ const Resources = () => {
             },
           }}
         >
-          {Array.from({ length: 4 }).map((_, index) => (
-            <HomeCard key={index} />
+          {content.map((item) => (
+            <HomeCard key={item.id} date={item.date} text={item.text} />
           ))}
         </Box>
         <Box textAlign={"center"} marginTop={"4rem"}>
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index fd7bfee..9500de5 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -34,93 +34,111 @@ const NavBar = () => {
   return (
     <>
       {!isMobile ? (
-        <Box
-          display="flex"
-          color={"#fff"}
-          justifyContent={"space-around"}
-          alignItems={"center"}
-          background={
-            isScrolled ? "#0B0B27" : "transparent"
-            // "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
-          }
-          boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
-          position={"fixed"}
-          zIndex={"999"}
-          width={"100%"}
-          top={"0px"}
-          padding={"2rem 0rem"}
-          sx={{
-            "@media (max-width: 996px)": {
-              justifyContent: "space-between",
-            },
-            "@media (max-width: 375px)": {
-              padding: "1rem",
-            },
-          }}
-        >
-          <Link to="/">
-            <Box
-              display={"flex"}
-              alignItems={"baseline"}
-              justifyContent={"center"}
-            >
-              <Image
-                src={logo}
-                width={"160px"}
-                sx={{
-                  "@media (max-width: 1024px)": {
-                    width: "100px",
-                  },
-                  "@media (max-width: 375px)": {
-                    width: "100px",
-                  },
-                }}
-              />
-            </Box>
-          </Link>
-
+        <>
           <Box
-            display={"flex"}
-            gap={"49px"}
+            backgroundColor={"#141315"}
+            position={"fixed"}
+            zIndex={"9999"}
+            width={"100%"}
+            textAlign={"right"}
+          >
+            <Box marginRight={"6%"}>
+              <Link to="/" style={{ color: "#fff", marginRight: "2.5rem" }}>
+                WALLET
+              </Link>
+              <Link to="/" style={{ color: "#fff", marginRight: "2.5rem" }}>
+                EXPLORER
+              </Link>
+            </Box>
+          </Box>
+          <Box
+            display="flex"
+            color={"#fff"}
+            justifyContent={"space-around"}
             alignItems={"center"}
+            background={
+              isScrolled ? "#0B0B27" : "transparent"
+              // "linear-gradient(to right, #9c5d67, #86455f, #6b3059, #4c1f54, #23144e)"
+            }
+            boxShadow={"0px 0px 4px 0px rgba(0, 0, 0, 0.25)"}
+            position={"fixed"}
+            zIndex={"999"}
+            width={"100%"}
+            top={"0px"}
+            padding={"2rem 0rem"}
             sx={{
-              "@media (max-width: 1024px)": {
-                gap: "22px",
+              "@media (max-width: 996px)": {
+                justifyContent: "space-between",
+              },
+              "@media (max-width: 375px)": {
+                padding: "1rem",
               },
             }}
           >
-            <Link to="/LearnPage">LEARN</Link>
-            <Link to="/">BUILD</Link>
-            <Link to="/">USE CASES</Link>
-            <Link to="/">COMMUNITY</Link>
-            <Link to="/">FOUNDATION</Link>
-            <Link
-              to="/"
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "5px",
-              }}
-              onMouseEnter={(e) => {
-                const arrowRight = document.querySelector(".arrow");
-                arrowRight.style.transform = "rotate(45deg)";
-              }}
-              onMouseLeave={(e) => {
-                const arrowRight = document.querySelector(".arrow");
-                arrowRight.style.transform = "none";
+            <Link to="/">
+              <Box
+                display={"flex"}
+                alignItems={"baseline"}
+                justifyContent={"center"}
+              >
+                <Image
+                  src={logo}
+                  width={"160px"}
+                  sx={{
+                    "@media (max-width: 1024px)": {
+                      width: "100px",
+                    },
+                    "@media (max-width: 375px)": {
+                      width: "100px",
+                    },
+                  }}
+                />
+              </Box>
+            </Link>
+
+            <Box
+              display={"flex"}
+              gap={"49px"}
+              alignItems={"center"}
+              sx={{
+                "@media (max-width: 1024px)": {
+                  gap: "22px",
+                },
               }}
             >
-              CONTACT US
-              <Image
-                src={arrow}
-                className="arrow"
+              <Link to="/LearnPage">LEARN</Link>
+              <Link to="/BuildPage">BUILD</Link>
+              <Link to="/">USE CASES</Link>
+              <Link to="/">COMMUNITY</Link>
+              <Link to="/">FOUNDATION</Link>
+              <Link
+                to="/"
                 style={{
-                  transition: "transform 0.3s",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "5px",
                 }}
-              />
-            </Link>
+                onMouseEnter={(e) => {
+                  const arrowRight = document.querySelector(".arrow");
+                  arrowRight.style.transform = "rotate(45deg)";
+                }}
+                onMouseLeave={(e) => {
+                  const arrowRight = document.querySelector(".arrow");
+                  arrowRight.style.transform = "none";
+                }}
+              >
+                CONTACT US
+                <Image
+                  src={arrow}
+                  className="arrow"
+                  style={{
+                    transition: "transform 0.3s",
+                  }}
+                />
+              </Link>
+            </Box>
           </Box>
-        </Box>
+        </>
       ) : (
         <MobileMenu />
       )}
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index 1f3138f..96a578d 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -1,5 +1,4 @@
 import { Box, Container, Image, Stack, Text } from "@chakra-ui/react";
-import cube from "../../assets/images/cube.png";
 import { Fade, ScaleFade, Slide, SlideFade, Collapse } from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { Component1 } from "./Component1";
@@ -7,7 +6,8 @@ import { Component2 } from "./Component2";
 import { Component3 } from "./Component3";
 import { Component4 } from "./Component4";
 // import { SubnetPage2 } from "./SubnetPage2";
-import stack from "../../assets/images/stack.png";
+import cube from "../../assets/images/cube.png";
+import stack from "../../assets/images/stackNew.webp";
 import { useInView, motion } from "framer-motion";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
@@ -181,9 +181,9 @@ export const NewSubnetComp = ({ showSubnet }) => {
                     01. Decentralisation
                   </Text>
                   <Text fontSize={"18px"}>
-                    Rubix Decentralised Identity(DID) issued at L1 is the
+                    Rubix Decentralised Identity( DID) issued at L1 is the
                     foundation for building digital ownership enhancing
-                    applications
+                    applications.
                   </Text>
                 </Box>
                 <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
@@ -193,12 +193,14 @@ export const NewSubnetComp = ({ showSubnet }) => {
                     color={"#fff"}
                     marginBottom={"10px"}
                   >
-                    01. Decentralisation
+                    02. Ultra Scalability
                   </Text>
                   <Text fontSize={"18px"}>
-                    Rubix Decentralised Identity(DID) issued at L1 is the
-                    foundation for building digital ownership enhancing
-                    applications
+                    Unlike monolithic chains which become centralized and
+                    introduce latency to achieve high throughput, in the Rubix
+                    object chain architecture, where mobile nodes have real time
+                    full state data, the network TPS will increase with increase
+                    in numbers of nodes.
                   </Text>
                 </Box>
                 <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
@@ -208,12 +210,12 @@ export const NewSubnetComp = ({ showSubnet }) => {
                     color={"#fff"}
                     marginBottom={"10px"}
                   >
-                    01. Decentralisation
+                    03. Data Security and Privacy
                   </Text>
                   <Text fontSize={"18px"}>
-                    Rubix Decentralised Identity(DID) issued at L1 is the
-                    foundation for building digital ownership enhancing
-                    applications
+                    Ideal for building automated, tokenized , consent-based
+                    data/insight exchange apps which require secure,
+                    decentralised identity-based encryption 
                   </Text>
                 </Box>
               </Box>
diff --git a/src/pages/BuildPage.jsx b/src/pages/BuildPage.jsx
new file mode 100644
index 0000000..ec75392
--- /dev/null
+++ b/src/pages/BuildPage.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import BuildBanner from "../components/BuildPage/BuildBanner";
+import WhyBuild from "../components/BuildPage/WhyBuild";
+
+const BuildPage = () => {
+  return (
+    <>
+      <BuildBanner />
+      <WhyBuild />
+    </>
+  );
+};
+
+export default BuildPage;