diff --git a/src/assets/images/BuildBanner.png b/src/assets/images/BuildBanner.png
deleted file mode 100644
index e3bf308..0000000
Binary files a/src/assets/images/BuildBanner.png and /dev/null differ
diff --git a/src/assets/images/BuildBanner.webp b/src/assets/images/BuildBanner.webp
new file mode 100644
index 0000000..0dfe1b3
Binary files /dev/null and b/src/assets/images/BuildBanner.webp differ
diff --git a/src/assets/images/faqBg.png b/src/assets/images/faqBg.png
deleted file mode 100644
index 9f8f4ac..0000000
Binary files a/src/assets/images/faqBg.png and /dev/null differ
diff --git a/src/assets/images/faqBg.webp b/src/assets/images/faqBg.webp
new file mode 100644
index 0000000..8a3d88f
Binary files /dev/null and b/src/assets/images/faqBg.webp differ
diff --git a/src/assets/images/form.png b/src/assets/images/form.png
deleted file mode 100644
index fecc597..0000000
Binary files a/src/assets/images/form.png and /dev/null differ
diff --git a/src/assets/images/form.webp b/src/assets/images/form.webp
new file mode 100644
index 0000000..4552d63
Binary files /dev/null and b/src/assets/images/form.webp differ
diff --git a/src/assets/images/learnBanner.png b/src/assets/images/learnBanner.png
deleted file mode 100644
index 7158be0..0000000
Binary files a/src/assets/images/learnBanner.png and /dev/null differ
diff --git a/src/assets/images/learnBanner.webp b/src/assets/images/learnBanner.webp
new file mode 100644
index 0000000..5f46fab
Binary files /dev/null and b/src/assets/images/learnBanner.webp differ
diff --git a/src/assets/images/whyRubix.webp b/src/assets/images/whyRubix.webp
new file mode 100644
index 0000000..e6b583a
Binary files /dev/null and b/src/assets/images/whyRubix.webp differ
diff --git a/src/components/BuildPage/BuildBanner.jsx b/src/components/BuildPage/BuildBanner.jsx
index d9069a0..fb8a08e 100644
--- a/src/components/BuildPage/BuildBanner.jsx
+++ b/src/components/BuildPage/BuildBanner.jsx
@@ -1,5 +1,5 @@
 import { Box, Button, Container, Text } from "@chakra-ui/react";
-import banner from "../../assets/images/BuildBanner.png";
+import banner from "../../assets/images/BuildBanner.webp";
 
 const BannerContent = [
   {
@@ -37,7 +37,7 @@ const BuildBanner = () => {
         maxW="container.xl"
         textAlign={"left"}
         marginTop={"2rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"4rem"}
         sx={{
           "@media (max-width: 435px)": {
             paddingLeft: "2rem",
@@ -56,7 +56,7 @@ const BuildBanner = () => {
             as={"h2"}
             fontWeight={700}
             fontSize={"60px"}
-            textTransform={"upperCase"}
+            textTransform={"capitalize"}
             color={"#DE858E"}
             sx={{
               "@media (max-width: 996px)": {
@@ -107,7 +107,7 @@ const BuildBanner = () => {
         maxW="container.xl"
         textAlign={"left"}
         marginTop={"3rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"4rem"}
         sx={{
           "@media (max-width: 435px)": {
             paddingLeft: "2rem",
diff --git a/src/components/BuildPage/Connect.jsx b/src/components/BuildPage/Connect.jsx
index 8e19045..9b35ec0 100644
--- a/src/components/BuildPage/Connect.jsx
+++ b/src/components/BuildPage/Connect.jsx
@@ -108,6 +108,7 @@ const Connect = () => {
                   background={"#000"}
                   borderRadius={"10px"}
                   minH={"270px"}
+                  height={"100%"}
                   border={"1px solid #454545"}
                 >
                   <CardHeader
diff --git a/src/components/BuildPage/Tools.jsx b/src/components/BuildPage/Tools.jsx
index da2819e..11b0f90 100644
--- a/src/components/BuildPage/Tools.jsx
+++ b/src/components/BuildPage/Tools.jsx
@@ -92,7 +92,7 @@ const Tools = () => {
                 <Card
                   background={"#131313"}
                   borderRadius={"10px"}
-                  minH={"270px"}
+                  height={"100%"}
                 >
                   <CardHeader display={"flex"} justifyContent={"center"}>
                     <Image src={item.img} />
@@ -130,7 +130,7 @@ const Tools = () => {
           position={"relative"}
           backgroundColor={"transparent"}
           cursor={"pointer"}
-          transition="0.3s ease-in-out"
+          transition="0.3s ease-in"
           color={"#fff"}
           width={"227px"}
           height={"60px"}
@@ -153,7 +153,7 @@ const Tools = () => {
               width: "65px",
               height: "65px",
               borderRadius: "50%",
-              transition: "0.35s linear",
+              transition: "0.35s ease-in",
               zIndex: -1,
               bgGradient:
                 "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
diff --git a/src/components/BuildPage/WhyBuild.jsx b/src/components/BuildPage/WhyBuild.jsx
index cc4f199..6d3c5c1 100644
--- a/src/components/BuildPage/WhyBuild.jsx
+++ b/src/components/BuildPage/WhyBuild.jsx
@@ -8,7 +8,7 @@ import {
   AccordionPanel,
   AccordionIcon,
 } from "@chakra-ui/react";
-import bg from "../../assets/images/whyRubix.png";
+import bg from "../../assets/images/whyRubix.webp";
 import cube from "../../assets/images/cube.png";
 
 const accordion = [
@@ -46,7 +46,7 @@ const WhyBuild = () => {
     >
       <Container
         maxW={"container.xl"}
-        padding={"5rem"}
+        padding={"4rem"}
         sx={{
           "@media (max-width: 1024px)": {
             padding: "3rem",
diff --git a/src/components/Contact/Form.jsx b/src/components/Contact/Form.jsx
index 7a269bd..15dc9f8 100644
--- a/src/components/Contact/Form.jsx
+++ b/src/components/Contact/Form.jsx
@@ -21,12 +21,11 @@ import {
   ModalFooter,
   Button,
 } from "@chakra-ui/react";
-import BGimage from "../../assets/images/form.png";
+import BGimage from "../../assets/images/form.webp";
 import formx from "../../assets/images/formx.png";
 import formfb from "../../assets/images/formfb.png";
 import forml from "../../assets/images/forml.png";
 import { Link } from "react-router-dom";
-import { ChevronDownIcon } from "@chakra-ui/icons";
 
 const Contact = () => {
   const {
@@ -218,8 +217,7 @@ const Contact = () => {
               Call us
             </Badge>
             <Box marginTop={"10px"}>
-              <Link
-                to={`mailto:${email}`}
+              <Text
                 style={{
                   fontSize: "18px",
                   color: "#969696",
@@ -228,7 +226,7 @@ const Contact = () => {
                 }}
               >
                 914 578 1245
-              </Link>
+              </Text>
             </Box>
           </Box>
         </Box>
diff --git a/src/components/HomePage/Stats.jsx b/src/components/HomePage/Stats.jsx
index 8c71923..c7ca75a 100644
--- a/src/components/HomePage/Stats.jsx
+++ b/src/components/HomePage/Stats.jsx
@@ -9,11 +9,12 @@ const StatsContent = {
 
 const Stats = () => {
   const { ref, inView } = useInView({
-    threshold: 0.3,
+    threshold: 0.5,
     triggerOnce: false,
   });
   return (
     <Box
+      ref={ref}
       height={"auto"}
       backgroundImage={`url(${banner})`}
       backgroundSize={"cover"}
@@ -80,7 +81,6 @@ const Stats = () => {
         >
           <Box
             color={"#fff"}
-            ref={ref}
             textAlign={"center"}
             position={"relative"}
             _before={{
diff --git a/src/components/LearnPage/Faq.jsx b/src/components/LearnPage/Faq.jsx
index 6ffdb8c..2259fb1 100644
--- a/src/components/LearnPage/Faq.jsx
+++ b/src/components/LearnPage/Faq.jsx
@@ -1,4 +1,4 @@
-import banner from "../../assets/images/faqBg.png";
+import banner from "../../assets/images/faqBg.webp";
 import {
   Accordion,
   AccordionButton,
diff --git a/src/components/LearnPage/GetStarted.jsx b/src/components/LearnPage/GetStarted.jsx
index 3dcd289..750a7fb 100644
--- a/src/components/LearnPage/GetStarted.jsx
+++ b/src/components/LearnPage/GetStarted.jsx
@@ -87,7 +87,7 @@ const GetStarted = () => {
                 "@media (max-width: 375px)": {},
               }}
             >
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted}
@@ -99,7 +99,7 @@ const GetStarted = () => {
                   }}
                 />
               </TabPanel>
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted2}
@@ -111,7 +111,7 @@ const GetStarted = () => {
                   }}
                 />
               </TabPanel>
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted}
@@ -123,7 +123,7 @@ const GetStarted = () => {
                   }}
                 />
               </TabPanel>
-              <TabPanel>
+              <TabPanel padding={"0px"}>
                 <Image
                   fit="cover"
                   src={getStarted3}
diff --git a/src/components/LearnPage/LearnBanner.jsx b/src/components/LearnPage/LearnBanner.jsx
index a4060ca..59bd44c 100644
--- a/src/components/LearnPage/LearnBanner.jsx
+++ b/src/components/LearnPage/LearnBanner.jsx
@@ -1,5 +1,5 @@
 import { Box, Button, Container, Text } from "@chakra-ui/react";
-import banner from "../../assets/images/learnBanner.png";
+import banner from "../../assets/images/learnBanner.webp";
 
 const BannerContent = [
   {
diff --git a/src/components/LearnPage/WhyRubix.jsx b/src/components/LearnPage/WhyRubix.jsx
index f42df9a..ba6494a 100644
--- a/src/components/LearnPage/WhyRubix.jsx
+++ b/src/components/LearnPage/WhyRubix.jsx
@@ -6,7 +6,7 @@ import {
   AccordionPanel,
   AccordionIcon,
 } from "@chakra-ui/react";
-import bg from "../../assets/images/whyRubix.png";
+import bg from "../../assets/images/whyRubix.webp";
 import cube from "../../assets/images/cube.png";
 
 const accordion = [
diff --git a/src/components/SubnetsComponent/NewSubnetComp.jsx b/src/components/SubnetsComponent/NewSubnetComp.jsx
index 7ee7265..4c30f4d 100644
--- a/src/components/SubnetsComponent/NewSubnetComp.jsx
+++ b/src/components/SubnetsComponent/NewSubnetComp.jsx
@@ -18,11 +18,11 @@ const SubnetContent = {
   heading: `decentralised Auto Syncing subnets`,
 };
 
-export const NewSubnetComp = ({ showSubnet }) => {
+export const NewSubnetComp = () => {
   const firstBoxRef = useRef(null);
   const secondBoxRef = useRef(null);
   const thirdBoxRef = useRef(null);
-  const mainBox = useRef(null);
+  const textBox = useRef(null);
 
   useEffect(() => {
     const animateBox = (boxRef) => {
@@ -40,13 +40,36 @@ export const NewSubnetComp = ({ showSubnet }) => {
         {
           position: "sticky",
           top: "-116px",
+          opacity: 0,
+          autoAlpha: 1,
         },
         {
-          transform: "translateX(0)",
+          // transform: "translateX(0)",
+          // duration: 0.5,
+          opacity: 1,
+          duration: 1,
+          autoAlpha: 0,
+        }
+      );
+      const tl2 = gsap.timeline({
+        scrollTrigger: {
+          trigger: textBox.current,
+          start: "top center+=50",
+          end: "bottom bottom+=100",
+          scrub: 1,
+          markers: false,
+        },
+      });
+      tl2.fromTo(
+        textBox.current,
+        {
+          opacity: 0,
+        },
+        {
+          opacity: 1,
           duration: 0.5,
         }
       );
-
       return () => {
         // Clean up
         tl.kill();
@@ -55,33 +78,10 @@ export const NewSubnetComp = ({ showSubnet }) => {
     animateBox(firstBoxRef);
     animateBox(secondBoxRef);
     animateBox(thirdBoxRef);
-
-    // const tl2 = gsap.timeline({
-    //   scrollTrigger: {
-    //     trigger: mainBox.current,
-    //     start: "top top",
-    //     end: "bottom bottom",
-    //     scrub: 1,
-    //     markers: false,
-    //   },
-    // });
-    // tl2.fromTo(
-    //   mainBox.current,
-    //   {
-    //     position: "sticky",
-    //     top: 60,
-    //     left: 0,
-    //     duration: 0.5,
-    //   },
-    //   {
-    //     position: "relative",
-    //     duration: 0.5,
-    //   }
-    // );
   }, []);
 
   return (
-    <Box ref={mainBox} backgroundColor={"#000"}>
+    <Box backgroundColor={"#000"}>
       <Box
         // height={"100vh"}
         backgroundColor={"#000"}
@@ -100,6 +100,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
             fontSize={"40px"}
             textTransform={"capitalize"}
             color={"#fff"}
+            ref={textBox}
             sx={{
               "@media (max-width: 1024px)": {},
               "@media (max-width: 600px)": {
@@ -118,6 +119,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
             position={"relative"}
             padding={"0 4rem"}
             paddingBottom={"50px"}
+            ref={textBox}
           >
             <Image
               src={cube}
@@ -148,6 +150,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component1 />
             </Box>
@@ -158,6 +161,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component2 />
             </Box>
@@ -168,6 +172,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component3 />
             </Box>
@@ -177,6 +182,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
               textAlign={"left"}
               position={"relative"}
               width={"383px"}
+              ref={textBox}
             >
               <Component4 />
             </Box>
@@ -190,104 +196,118 @@ export const NewSubnetComp = ({ showSubnet }) => {
         paddingBottom={"2rem"}
         ref={secondBoxRef}
       >
-        <Fade in={true}>
-          <Text
-            as={"h2"}
-            paddingTop={"2rem"}
-            fontWeight={700}
-            fontSize={"40px"}
-            textTransform={"capitalize"}
-            color={"#fff"}
-            marginBottom={"5rem"}
-            textAlign={"center"}
-            sx={{
-              "@media (max-width: 1024px)": {},
-              "@media (max-width: 600px)": {
-                fontSize: "28px",
-              },
-            }}
-          >
-            With Unmatched Privacy and Scalability
-          </Text>
-          <Container maxW="container.xl" textAlign={"center"}>
-            <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
-              <Box>
-                <Image
-                  src={cube}
-                  width={"480px"}
-                  //   position={"absolute"}
-                  left={"0"}
-                  right={"0"}
-                  marginLeft={"auto"}
-                  marginRight={"auto"}
-                  cursor={"pointer"}
-                  transform="translateY(-10%)"
-                  animation="floatAnimation 2s infinite alternate"
-                  // onClick={click}
-                  sx={{
-                    "@keyframes floatAnimation": {
-                      "0%": {
-                        transform: "translateY(0)",
-                      },
-                      "100%": {
-                        transform: "translateY(-20px)",
-                      },
+        <Text
+          ref={textBox}
+          as={"h2"}
+          paddingTop={"2rem"}
+          fontWeight={700}
+          fontSize={"40px"}
+          textTransform={"capitalize"}
+          color={"#fff"}
+          marginBottom={"5rem"}
+          textAlign={"center"}
+          sx={{
+            "@media (max-width: 1024px)": {},
+            "@media (max-width: 600px)": {
+              fontSize: "28px",
+            },
+          }}
+        >
+          With Unmatched Privacy and Scalability
+        </Text>
+        <Container maxW="container.xl" textAlign={"center"}>
+          <Box display={"flex"} alignItems={"center"} gap={"8rem"}>
+            <Box ref={textBox}>
+              <Image
+                src={cube}
+                width={"480px"}
+                //   position={"absolute"}
+                left={"0"}
+                right={"0"}
+                marginLeft={"auto"}
+                marginRight={"auto"}
+                cursor={"pointer"}
+                transform="translateY(-10%)"
+                animation="floatAnimation 2s infinite alternate"
+                // onClick={click}
+                sx={{
+                  "@keyframes floatAnimation": {
+                    "0%": {
+                      transform: "translateY(0)",
                     },
-                  }}
-                />
+                    "100%": {
+                      transform: "translateY(-20px)",
+                    },
+                  },
+                }}
+              />
+            </Box>
+            <Box width={"50%"}>
+              <Box
+                color={"#E1E1E1"}
+                textAlign={"left"}
+                marginBottom={"2rem"}
+                ref={textBox}
+              >
+                <Text
+                  as={"h2"}
+                  fontSize={"24px"}
+                  color={"#fff"}
+                  marginBottom={"10px"}
+                >
+                  01. Decentralisation
+                </Text>
+                <Text fontSize={"18px"}>
+                  Rubix Decentralised Identity( DID) issued at L1 is the
+                  foundation for building digital ownership enhancing
+                  applications.
+                </Text>
               </Box>
-              <Box width={"50%"}>
-                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
-                  <Text
-                    as={"h2"}
-                    fontSize={"24px"}
-                    color={"#fff"}
-                    marginBottom={"10px"}
-                  >
-                    01. Decentralisation
-                  </Text>
-                  <Text fontSize={"18px"}>
-                    Rubix Decentralised Identity( DID) issued at L1 is the
-                    foundation for building digital ownership enhancing
-                    applications.
-                  </Text>
-                </Box>
-                <Box color={"#E1E1E1"} textAlign={"left"} marginBottom={"2rem"}>
-                  <Text
-                    as={"h2"}
-                    fontSize={"24px"}
-                    color={"#fff"}
-                    marginBottom={"10px"}
-                  >
-                    02. Ultra Scalability
-                  </Text>
-                  <Text fontSize={"18px"}>
-                    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"}>
-                  <Text
-                    as={"h2"}
-                    fontSize={"24px"}
-                    color={"#fff"}
-                    marginBottom={"10px"}
-                  >
-                    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
-                  </Text>
-                </Box>
+              <Box
+                color={"#E1E1E1"}
+                textAlign={"left"}
+                marginBottom={"2rem"}
+                ref={textBox}
+              >
+                <Text
+                  as={"h2"}
+                  fontSize={"24px"}
+                  color={"#fff"}
+                  marginBottom={"10px"}
+                >
+                  02. Ultra Scalability
+                </Text>
+                <Text fontSize={"18px"}>
+                  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"}
+                ref={textBox}
+              >
+                <Text
+                  as={"h2"}
+                  fontSize={"24px"}
+                  color={"#fff"}
+                  marginBottom={"10px"}
+                >
+                  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
+                </Text>
               </Box>
             </Box>
-          </Container>
-        </Fade>
+          </Box>
+        </Container>
       </Box>
       <Box
         backgroundColor={"#000"}
@@ -332,7 +352,7 @@ export const NewSubnetComp = ({ showSubnet }) => {
                     Single Comprehensive Stack:
                   </Text>
                   <Text fontSize={"16px"}>
-                    Full Mobile node SDK, Smart Contracts, DID's, Secondary
+                    Full Mobile node SDK, Smart Contracts, DID&apos;s, Secondary
                     tokens ( FTs and NFTs) all in one place.
                   </Text>
                 </Box>