diff --git a/src/components/Card/LearnCard.jsx b/src/components/Card/LearnCard.jsx
index 1e546c8..4a448b7 100644
--- a/src/components/Card/LearnCard.jsx
+++ b/src/components/Card/LearnCard.jsx
@@ -4,10 +4,7 @@ import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
 
 const LearnCard = ({ id, src, alt, text }) => {
   return (
-    <Box
-      padding={"1px"}
-      borderRadius={"10px"}
-    >
+    <Box padding={"1px"} borderRadius={"10px"}>
       {/* {images.map((img) => (
         <></>
       ))} */}
@@ -26,17 +23,18 @@ const LearnCard = ({ id, src, alt, text }) => {
           },
         }}
       >
-        <Box padding={"1rem"} >
+        <Box padding={"1rem"}>
           <Image height={"60px"} src={src} alt={alt} />
         </Box>
 
-        <Box padding={"1rem"} height={"110px"}>
+        <Box padding={"1rem"}>
           <Text
             color={"#E8E8E8"}
             fontSize={"18px"}
             fontFamily={"Poppins"}
             marginBottom={"20px"}
             // fontWeight={"100"}
+            minHeight={"100px"}
           >
             {text}
           </Text>
diff --git a/src/components/Card/MobileHomeCard.jsx b/src/components/Card/MobileHomeCard.jsx
index 3f82d8c..bd0864d 100644
--- a/src/components/Card/MobileHomeCard.jsx
+++ b/src/components/Card/MobileHomeCard.jsx
@@ -29,7 +29,7 @@ const MobileHomeCard = ({ key, date, text }) => {
         width={"502px"}
         background={"#151419"}
         borderRadius={"10px"}
-        minHeight={"455px !important"}
+        minHeight={"415px !important"}
         key={key}
         sx={{
           "@media (max-width: 600px)": {
@@ -38,7 +38,7 @@ const MobileHomeCard = ({ key, date, text }) => {
           },
         }}
       >
-        <Image src={cardimg} />
+        <Image src={cardimg} borderRadius={"10px"} />
         <Box padding={"1rem"}>
           <Badge
             backgroundColor={"#565263"}
@@ -55,7 +55,7 @@ const MobileHomeCard = ({ key, date, text }) => {
           </Text>
           <Text
             color={"#fff"}
-            fontSize={"24px"}
+            fontSize={"16px"}
             marginBottom={"20px"}
             minHeight={"73px"}
             maxWidth={"460px"}
diff --git a/src/components/LearnPage/LearnDev.jsx b/src/components/LearnPage/LearnDev.jsx
index 57f9eba..60a030c 100644
--- a/src/components/LearnPage/LearnDev.jsx
+++ b/src/components/LearnPage/LearnDev.jsx
@@ -88,7 +88,7 @@ const LearnDev = () => {
       </Container>
       <Box
         // maxW="container.xl"
-        paddingLeft={"7rem"}
+        paddingLeft={"6rem"}
         paddingBottom={"2rem"}
         // height={"50vh"}
         sx={{
diff --git a/src/components/MobileComponent/MobileSubnet.jsx b/src/components/MobileComponent/MobileSubnet.jsx
index 26c6ea6..55de628 100644
--- a/src/components/MobileComponent/MobileSubnet.jsx
+++ b/src/components/MobileComponent/MobileSubnet.jsx
@@ -3,46 +3,26 @@ import cube from "../../assets/images/cube.png";
 import MobileSubnet2 from "./MobileSubnet2";
 import MobileSubnet3 from "./MobileSubnet3";
 
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+import { Navigation, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
 const MobileSubnet = () => {
   return (
     <>
-      <Box backgroundColor={"#000"} padding={"1.5rem"}>
-        {/* Subnet1 */}
-        <Box>
-          <Box
-            display={"flex"}
-            alignItems={"center"}
-            justifyContent={"space-between"}
-          >
-            <Text
-              as={"h2"}
-              paddingTop={"2rem"}
-              fontWeight={700}
-              fontSize={"20px"}
-              textTransform={"capitalize"}
-              color={"#fff"}
-            >
-              decentralised Auto Syncing subnets
-            </Text>
-            <Image
-              src={cube}
-              width={"140px"}
-              transform="translateY(-10%)"
-              animation="floatAnimation 2s infinite alternate"
-              sx={{
-                "@keyframes floatAnimation": {
-                  "0%": {
-                    transform: "translateY(0)",
-                  },
-                  "100%": {
-                    transform: "translateY(-20px)",
-                  },
-                },
-              }}
-            />
-          </Box>
+      <Swiper>
+        <SwiperSlide></SwiperSlide>
+        <Box backgroundColor={"#000"} padding={"1.5rem"}>
+          {/* Subnet1 */}
           <Box>
-            <Box>
+            <Box
+              display={"flex"}
+              alignItems={"center"}
+              justifyContent={"space-between"}
+            >
               <Text
                 as={"h2"}
                 paddingTop={"2rem"}
@@ -51,86 +31,125 @@ const MobileSubnet = () => {
                 textTransform={"capitalize"}
                 color={"#fff"}
               >
-                P2P
+                decentralised Auto Syncing subnets
               </Text>
-              <UnorderedList color={"#E1E1E1"}>
-                <ListItem>Only L1 powering full mobile nodes</ListItem>
-                <ListItem>
-                  Mobile nodes with full state data will settle P2P . Consensus
-                  provided by nearby node validators.
-                </ListItem>
-                <ListItem>
-                  High scalability, Partition tolerance and portability
-                </ListItem>
-              </UnorderedList>
+              <Image
+                src={cube}
+                width={"140px"}
+                transform="translateY(-10%)"
+                animation="floatAnimation 2s infinite alternate"
+                sx={{
+                  "@keyframes floatAnimation": {
+                    "0%": {
+                      transform: "translateY(0)",
+                    },
+                    "100%": {
+                      transform: "translateY(-20px)",
+                    },
+                  },
+                }}
+              />
             </Box>
-
             <Box>
-              <Text
-                as={"h2"}
-                paddingTop={"2rem"}
-                fontWeight={700}
-                fontSize={"20px"}
-                textTransform={"capitalize"}
-                color={"#fff"}
-              >
-                Self Sovereign
-              </Text>
-              <UnorderedList color={"#E1E1E1"}>
-                <ListItem>
-                  Permissioned subnets with no oracles and <br /> intermediaries
-                </ListItem>
-                <ListItem>INo block space ransom</ListItem>
-                <ListItem>
-                  Zero risk of transactions being blocked out of <br />
-                  chain.
-                </ListItem>
-              </UnorderedList>
-            </Box>
+              <Box>
+                <Text
+                  as={"h2"}
+                  paddingTop={"2rem"}
+                  fontWeight={700}
+                  fontSize={"20px"}
+                  textTransform={"capitalize"}
+                  color={"#fff"}
+                >
+                  P2P
+                </Text>
+                <UnorderedList color={"#E1E1E1"}>
+                  <ListItem>Only L1 powering full mobile nodes</ListItem>
+                  <ListItem>
+                    Mobile nodes with full state data will settle P2P .
+                    Consensus provided by nearby node validators.
+                  </ListItem>
+                  <ListItem>
+                    High scalability, Partition tolerance and portability
+                  </ListItem>
+                </UnorderedList>
+              </Box>
 
-            <Box>
-              <Text
-                as={"h2"}
-                paddingTop={"2rem"}
-                fontWeight={700}
-                fontSize={"20px"}
-                textTransform={"capitalize"}
-                color={"#fff"}
-              >
-                Easier
-              </Text>
-              <UnorderedList color={"#E1E1E1"}>
-                <ListItem>Leverage own infrastructure for block space</ListItem>
-                <ListItem>Smart contracts in Rust , GoLang and C/C++</ListItem>
-                <ListItem>WASM compiler for smooth code migration</ListItem>
-              </UnorderedList>
-            </Box>
+              <Box>
+                <Text
+                  as={"h2"}
+                  paddingTop={"2rem"}
+                  fontWeight={700}
+                  fontSize={"20px"}
+                  textTransform={"capitalize"}
+                  color={"#fff"}
+                >
+                  Self Sovereign
+                </Text>
+                <UnorderedList color={"#E1E1E1"}>
+                  <ListItem>
+                    Permissioned subnets with no oracles and <br />{" "}
+                    intermediaries
+                  </ListItem>
+                  <ListItem>INo block space ransom</ListItem>
+                  <ListItem>
+                    Zero risk of transactions being blocked out of <br />
+                    chain.
+                  </ListItem>
+                </UnorderedList>
+              </Box>
 
-            <Box>
-              <Text
-                as={"h2"}
-                paddingTop={"2rem"}
-                fontWeight={700}
-                fontSize={"20px"}
-                textTransform={"capitalize"}
-                color={"#fff"}
-              >
-                cheaper
-              </Text>
-              <UnorderedList color={"#E1E1E1"}>
-                <ListItem>No GAS fees</ListItem>
-                <ListItem>Incremental and modular infrastructure ask</ListItem>
-                <ListItem>
-                  No expensive re training of development <br />
-                  resources
-                </ListItem>
-              </UnorderedList>
+              <Box>
+                <Text
+                  as={"h2"}
+                  paddingTop={"2rem"}
+                  fontWeight={700}
+                  fontSize={"20px"}
+                  textTransform={"capitalize"}
+                  color={"#fff"}
+                >
+                  Easier
+                </Text>
+                <UnorderedList color={"#E1E1E1"}>
+                  <ListItem>
+                    Leverage own infrastructure for block space
+                  </ListItem>
+                  <ListItem>
+                    Smart contracts in Rust , GoLang and C/C++
+                  </ListItem>
+                  <ListItem>WASM compiler for smooth code migration</ListItem>
+                </UnorderedList>
+              </Box>
+
+              <Box>
+                <Text
+                  as={"h2"}
+                  paddingTop={"2rem"}
+                  fontWeight={700}
+                  fontSize={"20px"}
+                  textTransform={"capitalize"}
+                  color={"#fff"}
+                >
+                  cheaper
+                </Text>
+                <UnorderedList color={"#E1E1E1"}>
+                  <ListItem>No GAS fees</ListItem>
+                  <ListItem>
+                    Incremental and modular infrastructure ask
+                  </ListItem>
+                  <ListItem>
+                    No expensive re training of development <br />
+                    resources
+                  </ListItem>
+                </UnorderedList>
+              </Box>
             </Box>
           </Box>
         </Box>
-      </Box>
-      <MobileSubnet2 />
-      <MobileSubnet3 />
+        <SwiperSlide></SwiperSlide>
+        <MobileSubnet2 />
+        <SwiperSlide></SwiperSlide>
+        <MobileSubnet3 />
+      </Swiper>
     </>
   );
 };
diff --git a/src/components/MobileMenu/MobileMenu.jsx b/src/components/MobileMenu/MobileMenu.jsx
index 74861f9..6e8cdcd 100644
--- a/src/components/MobileMenu/MobileMenu.jsx
+++ b/src/components/MobileMenu/MobileMenu.jsx
@@ -53,7 +53,7 @@ export const MobileMenu = () => {
 
   return (
     <>
-      <Box
+      {/* <Box
         backgroundColor={"#141315"}
         position={"fixed"}
         zIndex={"9999"}
@@ -75,7 +75,7 @@ export const MobileMenu = () => {
             EXPLORER
           </Link>
         </Box>
-      </Box>
+      </Box> */}
       <Box
         position={"fixed"}
         top={"0px"}
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index 2c46873..ea117a7 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -30,6 +30,10 @@ import fintechIcon from "../../assets/images/Navicons/fintechIcon.png";
 
 const NavBar = () => {
   const [isScrolled, setIsScrolled] = useState(false);
+  const [isHoveredLearn, setIsHoveredLearn] = useState(false);
+  const [isHoveredBuild, setIsHoveredBuild] = useState(false);
+  const [isHoveredCases, setIsHoveredCases] = useState(false);
+  const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
   const location = useLocation();
 
@@ -172,7 +176,10 @@ const NavBar = () => {
                   },
                 }}
               >
-                <Popover>
+                <Popover
+                  isOpen={isHoveredLearn}
+                  onClose={() => setIsHoveredLearn(false)}
+                >
                   <PopoverTrigger>
                     <Button
                       backgroundColor={"transparent"}
@@ -181,6 +188,11 @@ const NavBar = () => {
                       _hover={{
                         backgroundColor: "transparent",
                       }}
+                      _focus={{
+                        boxShadow: "none",
+                      }}
+                      onMouseEnter={() => setIsHoveredLearn(true)}
+                      onMouseLeave={() => setIsHoveredLearn(false)}
                     >
                       LEARN
                       <span
@@ -197,6 +209,11 @@ const NavBar = () => {
                     borderRadius={"10px"}
                     border={"none"}
                     padding={"1rem"}
+                    onMouseEnter={() => setIsHoveredLearn(true)}
+                    onMouseLeave={() => setIsHoveredLearn(false)}
+                    _focus={{
+                      boxShadow: "none",
+                    }}
                   >
                     <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
                     <PopoverBody>
@@ -289,7 +306,10 @@ const NavBar = () => {
                   </PopoverContent>
                 </Popover>
 
-                <Popover>
+                <Popover
+                  isOpen={isHoveredBuild}
+                  onClose={() => setIsHoveredBuild(false)}
+                >
                   <PopoverTrigger>
                     <Button
                       backgroundColor={"transparent"}
@@ -298,6 +318,11 @@ const NavBar = () => {
                       _hover={{
                         backgroundColor: "transparent",
                       }}
+                      _focus={{
+                        boxShadow: "none",
+                      }}
+                      onMouseEnter={() => setIsHoveredBuild(true)}
+                      onMouseLeave={() => setIsHoveredBuild(false)}
                     >
                       BUILD
                       <span
@@ -314,6 +339,11 @@ const NavBar = () => {
                     borderRadius={"10px"}
                     border={"none"}
                     padding={"1rem"}
+                    _focus={{
+                      boxShadow: "none",
+                    }}
+                    onMouseEnter={() => setIsHoveredBuild(true)}
+                    onMouseLeave={() => setIsHoveredBuild(false)}
                   >
                     <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
                     <PopoverBody>
@@ -406,7 +436,10 @@ const NavBar = () => {
                   </PopoverContent>
                 </Popover>
 
-                <Popover>
+                <Popover
+                  isOpen={isHoveredCases}
+                  onClose={() => setIsHoveredCases(false)}
+                >
                   <PopoverTrigger>
                     <Button
                       backgroundColor={"transparent"}
@@ -415,6 +448,11 @@ const NavBar = () => {
                       _hover={{
                         backgroundColor: "transparent",
                       }}
+                      _focus={{
+                        boxShadow: "none",
+                      }}
+                      onMouseEnter={() => setIsHoveredCases(true)}
+                      onMouseLeave={() => setIsHoveredCases(false)}
                     >
                       USE CASES
                       <span
@@ -429,6 +467,11 @@ const NavBar = () => {
                     borderRadius={"10px"}
                     border={"none"}
                     padding={"1rem"}
+                    _focus={{
+                      boxShadow: "none",
+                    }}
+                    onMouseEnter={() => setIsHoveredCases(true)}
+                    onMouseLeave={() => setIsHoveredCases(false)}
                   >
                     <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
                     <PopoverBody>
@@ -519,7 +562,10 @@ const NavBar = () => {
                   </PopoverContent>
                 </Popover>
 
-                <Popover>
+                <Popover
+                  isOpen={isHoveredCommunity}
+                  onClose={() => setIsHoveredCommunity(false)}
+                >
                   <PopoverTrigger>
                     <Button
                       backgroundColor={"transparent"}
@@ -528,6 +574,11 @@ const NavBar = () => {
                       _hover={{
                         backgroundColor: "transparent",
                       }}
+                      _focus={{
+                        boxShadow: "none",
+                      }}
+                      onMouseEnter={() => setIsHoveredCommunity(true)}
+                      onMouseLeave={() => setIsHoveredCommunity(false)}
                     >
                       COMMUNITY
                       <span
@@ -545,6 +596,11 @@ const NavBar = () => {
                     borderRadius={"10px"}
                     border={"none"}
                     padding={"1rem"}
+                    _focus={{
+                      boxShadow: "none",
+                    }}
+                    onMouseEnter={() => setIsHoveredCommunity(true)}
+                    onMouseLeave={() => setIsHoveredCommunity(false)}
                   >
                     <PopoverArrow backgroundColor={"#0D0B20"} shadow={"none"} />
                     <PopoverBody>
diff --git a/src/components/Theme/Theme.jsx b/src/components/Theme/Theme.jsx
index 93ed335..6c1ae42 100644
--- a/src/components/Theme/Theme.jsx
+++ b/src/components/Theme/Theme.jsx
@@ -11,7 +11,7 @@ const theme = extendTheme({
       body: {
         // marginTop: { lg: "35px", md: "35px", base: "35px" },
         boxSizing: "border-box",
-        // backGround: "#000",
+        backgroundColor: "#101015",
       },
     }),
   },