diff --git a/src/components/BuildPage/LearnMore.jsx b/src/components/BuildPage/LearnMore.jsx
index a2076ec..e20cc8c 100644
--- a/src/components/BuildPage/LearnMore.jsx
+++ b/src/components/BuildPage/LearnMore.jsx
@@ -10,7 +10,7 @@ const SectionContent = {
 const LearnMore = () => {
   return (
     <Box
-      height={"50vh"}
+      height={"auto"}
       backgroundImage={`url(${banner})`}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
@@ -47,7 +47,7 @@ const LearnMore = () => {
         textAlign={"center"}
         display={"grid"}
         placeContent={"center"}
-        height={"30vh"}
+        // height={"30vh"}
         paddingBottom={"3rem"}
       >
         <Text
diff --git a/src/components/Contact/Form.jsx b/src/components/Contact/Form.jsx
index 27a29dc..7a269bd 100644
--- a/src/components/Contact/Form.jsx
+++ b/src/components/Contact/Form.jsx
@@ -7,17 +7,10 @@ import {
   useDisclosure,
   Image,
   Badge,
-} from "@chakra-ui/react";
-// import { Link } from "react-router-dom";
-import {
-  // FormControl,
-  // FormLabel,
-  //   FormErrorMessage,
-  //   FormHelperText,
-  //   Input,
   Textarea,
 } from "@chakra-ui/react";
-import { useForm } from "react-hook-form";
+
+import { Controller, useForm } from "react-hook-form";
 import { useEffect, useState } from "react";
 import {
   Modal,
@@ -29,22 +22,25 @@ import {
   Button,
 } from "@chakra-ui/react";
 import BGimage from "../../assets/images/form.png";
-// import { contactUs } from "../service/api";
 import formx from "../../assets/images/formx.png";
-// import location from "../../src/assets/contactLocation.svg";
-// import mail from "../../src/assets/contactMail.svg";
-// import mobile from "../../src/assets/mobile.svg";
+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 {
     register,
     handleSubmit,
     reset,
+    control,
     formState: { errors },
   } = useForm();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [isLoading, setIsLoading] = useState(false);
 
+  const email = "rubix@gmail.com";
+
   const onSubmit = async (data) => {
     // console.log(data);
     setIsLoading(true);
@@ -78,13 +74,14 @@ const Contact = () => {
       paddingTop={"4rem"}
       backgroundRepeat={"no-repeat"}
       backgroundSize={"cover"}
+      backgroundPosition={"0 25%"}
     >
       <Container
         maxW="container.xl"
         backgroundColor={"transparent"}
         display={"flex"}
         justifyContent={"start"}
-        alignItems={"start"}
+        alignItems={"baseline"}
         gap={"2rem"}
         padding={"3rem 0rem"}
         sx={{
@@ -110,7 +107,7 @@ const Contact = () => {
           zIndex={"99"}
           backgroundColor={"#transparent"}
           // width={"30%"}
-          padding={"2rem"}
+          padding={"4rem"}
           minH={"583px"}
           // flex={"1"}
           sx={{
@@ -126,7 +123,7 @@ const Contact = () => {
               minH: "490px",
             },
             "@media (max-width: 820px)": { width: "55%" },
-            "@media (max-width: 535px)": { width: "95%" },
+            "@media (max-width: 535px)": { width: "95%", padding: "10px" },
             "@media (max-width: 375px)": {},
           }}
         >
@@ -151,15 +148,13 @@ const Contact = () => {
               sx={{
                 "@media (max-width: 1024px)": {},
                 "@media (max-width: 768px)": {},
-                "@media (max-width: 535px)": {
-                  padding: "1rem",
-                },
+                "@media (max-width: 535px)": {},
               }}
             >
               Start reaching <br /> your digital goals
             </Text>
           </Box>
-          <Box>
+          <Box marginBottom={"2rem"}>
             <Badge
               textAlign={"left"}
               background={"transparent"}
@@ -171,17 +166,79 @@ const Contact = () => {
             >
               Social Media
             </Badge>
+            <Box
+              display={"flex"}
+              alignItems={"center"}
+              marginTop={"20px"}
+              gap={"2rem"}
+            >
+              <Image src={formx} />
+              <Image src={formfb} />
+              <Image src={forml} />
+            </Box>
+          </Box>
+
+          <Box marginBottom={"2rem"}>
+            <Badge
+              textAlign={"left"}
+              background={"transparent"}
+              color={"#fff"}
+              textTransform={"capitalize"}
+              fontWeight={"500"}
+              fontFamily={"Poppins"}
+              fontSize={"18px"}
+            >
+              Chat to us
+            </Badge>
+            <Box marginTop={"10px"}>
+              <Link
+                to={`mailto:${email}`}
+                style={{
+                  fontSize: "18px",
+                  color: "#969696",
+                  fontWeight: "400",
+                  fontFamily: "Poppins",
+                }}
+              >
+                rubix@gmail.com
+              </Link>
+            </Box>
+          </Box>
+
+          <Box>
+            <Badge
+              textAlign={"left"}
+              background={"transparent"}
+              color={"#fff"}
+              textTransform={"capitalize"}
+              fontWeight={"500"}
+              fontFamily={"Poppins"}
+              fontSize={"18px"}
+            >
+              Call us
+            </Badge>
+            <Box marginTop={"10px"}>
+              <Link
+                to={`mailto:${email}`}
+                style={{
+                  fontSize: "18px",
+                  color: "#969696",
+                  fontWeight: "400",
+                  fontFamily: "Poppins",
+                }}
+              >
+                914 578 1245
+              </Link>
+            </Box>
           </Box>
         </Box>
 
         {/* Form */}
         <Container
           maxW="container.xl"
-          //   boxShadow={"0px 4px 18px 0px rgba(65, 65, 65, 0.25)"}
-          textAlign={"center"}
+          textAlign={"left"}
           marginLeft={"auto"}
           marginRight={"auto"}
-          // marginTop={"15rem"}
           backgroundColor={"transparent"}
           sx={{
             "@media (max-width: 1080px)": {
@@ -193,34 +250,8 @@ const Contact = () => {
           // flex={"1"}
         >
           <form onSubmit={handleSubmit(onSubmit)}>
-            <Box textAlign={"center"}>
-              <Heading
-                as="h2"
-                color={"#404040"}
-                fontFamily={"Asap"}
-                fontSize={"35px"}
-                fontWeight={"600"}
-                lineHeight={"135%"}
-                marginBottom={"1rem"}
-                padding={"20px"}
-                marginTop={"1.5rem"}
-                sx={{
-                  "@media (max-width: 1024px)": {},
-                  "@media (max-width: 768px)": {},
-                  "@media (max-width: 535px)": {
-                    padding: "1rem",
-                  },
-                }}
-              >
-                Send us a Message
-              </Heading>
-            </Box>
             <Box
-              // display={"flex"}
-              // justifyContent={"space-between"}
-              // alignItems={"start"}
               padding={"0rem 2rem 0rem 2rem"}
-              // flexDirection={"column"}
               gap={"20px"}
               sx={{
                 "@media (max-width: 1024px)": {},
@@ -253,19 +284,24 @@ const Contact = () => {
                 }}
               >
                 <Box width={"100%"} minH={"120px"}>
-                  <label style={{ color: "#404040", fontFamily: "Asap" }}>
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
                     First Name*
                   </label>
                   <input
                     style={{
                       width: "100%",
                       marginBottom: "5px",
-                      background: "transparent",
-                      color: "#404040",
-                      border: "1px solid #C8C8C8",
+                      background: "#1E1E23",
+                      color: "#fff",
                       padding: "10px",
                       marginTop: "10px",
-                      borderRadius: "2px",
+                      borderRadius: "5px",
                     }}
                     //   placeholder="First Name"
                     {...register("firstName", {
@@ -285,19 +321,24 @@ const Contact = () => {
                   )}
                 </Box>
                 <Box width={"100%"} minH={"120px"}>
-                  <label style={{ color: "#404040", fontFamily: "Asap" }}>
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
                     Last Name*
                   </label>
                   <input
                     style={{
                       width: "100%",
                       marginBottom: "5px",
-                      background: "transparent",
-                      color: "#404040",
-                      border: "1px solid #C8C8C8",
+                      background: "#1E1E23",
+                      color: "#fff",
                       padding: "10px",
                       marginTop: "10px",
-                      borderRadius: "2px",
+                      borderRadius: "5px",
                     }}
                     //   placeholder="Last Name"
                     {...register("lastName", {
@@ -338,19 +379,24 @@ const Contact = () => {
                 }}
               >
                 <Box width={"100%"} minH={"120px"}>
-                  <label style={{ color: "#404040", fontFamily: "Asap" }}>
-                    E-mail Address*
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
+                    Email*
                   </label>
                   <input
                     style={{
                       width: "100%",
                       marginBottom: "5px",
-                      background: "transparent",
-                      color: "#404040",
-                      border: "1px solid #C8C8C8",
+                      background: "#1E1E23",
+                      color: "#fff",
                       padding: "10px",
                       marginTop: "10px",
-                      borderRadius: "2px",
+                      borderRadius: "5px",
                     }}
                     //   placeholder="Email"
                     type="email"
@@ -370,19 +416,24 @@ const Contact = () => {
                 </Box>
 
                 <Box width={"100%"} minH={"120px"}>
-                  <label style={{ color: "#404040", fontFamily: "Asap" }}>
-                    Phone Number*
+                  <label
+                    style={{
+                      fontSize: "22px",
+                      color: "#fff",
+                      fontFamily: "Poppins",
+                    }}
+                  >
+                    Phone*
                   </label>
                   <input
                     style={{
                       width: "100%",
                       marginBottom: "5px",
-                      background: "transparent",
-                      color: "#404040",
-                      border: "1px solid #C8C8C8",
+                      background: "#1E1E23",
+                      color: "#fff",
                       padding: "10px",
                       marginTop: "10px",
-                      borderRadius: "2px",
+                      borderRadius: "5px",
                     }}
                     //   placeholder="Phone"
                     type="tel"
@@ -409,6 +460,52 @@ const Contact = () => {
                   )}
                 </Box>
               </Box>
+              <Box width={"100%"} minH={"120px"}>
+                <label
+                  style={{
+                    fontSize: "22px",
+                    color: "#fff",
+                    fontFamily: "Poppins",
+                  }}
+                >
+                  Choose type of inquiry
+                </label>
+
+                <Controller
+                  name="selectOption"
+                  control={control}
+                  defaultValue=""
+                  rules={{ required: "Please select an option" }}
+                  render={({ field }) => (
+                    <select
+                      {...field}
+                      placeholder="Select option"
+                      style={{
+                        width: "100%",
+                        marginBottom: "5px",
+                        background: "#1E1E23",
+                        color: "#fff",
+                        padding: "15px",
+                        marginTop: "10px",
+                        borderRadius: "5px",
+                        textAlign: "left",
+                      }}
+                    >
+                      <option value="" disabled>
+                        Select Options
+                      </option>
+                      <option value="option1">Option 1</option>
+                      <option value="option2">Option 2</option>
+                      <option value="option3">Option 3</option>
+                    </select>
+                  )}
+                />
+                {errors.selectOption && (
+                  <p style={{ fontSize: "13px", color: "red" }}>
+                    {errors.selectOption.message}
+                  </p>
+                )}
+              </Box>
             </Box>
             <Container
               maxW="container.lg"
@@ -422,86 +519,71 @@ const Contact = () => {
                 },
               }}
             >
-              <label style={{ color: "#404040", fontFamily: "Asap" }}>
+              <label
+                style={{
+                  fontSize: "22px",
+                  color: "#fff",
+                  fontFamily: "Poppins",
+                }}
+              >
                 Message*
               </label>
               <Textarea
                 placeholder="Type your message here..."
                 size="xl"
                 resize="vertical"
-                minH={"100px"}
+                minH={"200px"}
                 padding={"1rem"}
-                color={"#404040"}
+                color={"#fff"}
+                backgroundColor={"#1E1E23"}
+                border={"none"}
                 marginTop={"10px"}
-                border={"1px solid #C8C8C8"}
-                borderRadius="2px"
+                borderRadius="5px"
                 type="text"
                 required
                 {...register("Text", { required: true })}
               />
+              <Button
+                type="submit"
+                isLoading={isLoading}
+                loadingText="Submitting"
+                fontFamily={"poppins"}
+                fontSize={"22px"}
+                variant="outline"
+                margin={"4rem 0"}
+                background={"#DE858E"}
+                minWidth={"210px"}
+                color={"#fff"}
+                fontWeight={"400"}
+                minHeight={"55px"}
+                padding={"0rem 2rem 0rem 2rem"}
+                _hover={{
+                  background: "#ef843c",
+                  color: "#fff",
+                }}
+              >
+                Submit
+              </Button>
             </Container>
-
-            {/* <textarea
-              style={{
-                resize: "none",
-                minHeight: "130px",
-                padding: "1rem",
-                color: '"#404040"',
-                marginTop: "20px",
-                border: "1px solid #C8C8C8",
-                borderRadius: "2px",
-                type: "text",
-                width: "87%",
-                display: "block",
-                margin: "0rem 4rem 0rem 4rem",
-              }}
-              {...register("textarea", {
-                required: "This field is required",
-              })}
-            /> */}
-
-            {/* <input
-              type="submit"
-              style={{
-                padding: "10px 20px",
-                color: "#fff",
-                background: "#F46E15",
-                minWidth: "255px",
-                cursor: "pointer",
-                margin: "3rem 0",
-                borderRadius: "2px",
-              }}
-            /> */}
-            <Button
-              type="submit"
-              isLoading={isLoading}
-              loadingText="Submitting"
-              // colorScheme="teal"
-              variant="outline"
-              margin={"2rem 0"}
-              background={"#F46E15"}
-              minWidth={"255px"}
-              color={"#fff"}
-              fontWeight={"500"}
-              minHeight={"55px"}
-              _hover={{
-                background: "#ef843c",
-                color: "#fff",
-              }}
-            >
-              Submit
-            </Button>
           </form>
         </Container>
       </Container>
 
       <Modal isOpen={isOpen}>
         <ModalOverlay />
-        <ModalContent>
+        <ModalContent backgroundColor="#1E1E23" color="#fff">
           <ModalHeader>Success!</ModalHeader>
           <ModalBody>Your form has been submitted successfully.</ModalBody>
           <ModalFooter>
-            <Button colorScheme="blue" onClick={onClose}>
+            <Button
+              backgroundColor={"#DE858E"}
+              color="#fff"
+              onClick={onClose}
+              _hover={{
+                backgroundColor: "#DE858E",
+                color: "#fff",
+              }}
+            >
               Close
             </Button>
           </ModalFooter>
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
index 722b9f2..8574f3e 100644
--- a/src/components/Footer/Footer.jsx
+++ b/src/components/Footer/Footer.jsx
@@ -38,8 +38,8 @@ const Footer = () => {
           padding={"4rem"}
           sx={{
             "@media (max-width: 1024px)": {},
-            "@media (max-width: 412px)": {
-              padding: "2rem",
+            "@media (max-width: 535px)": {
+              padding: "1rem",
             },
           }}
         >
@@ -257,7 +257,7 @@ const Footer = () => {
             "@media (max-width: 600px)": {
               flexDirection: "column",
               alignItems: "flex-start",
-              padding: "2rem",
+              padding: "1rem",
             },
           }}
         >
diff --git a/src/components/HomePage/Client.jsx b/src/components/HomePage/Client.jsx
index d700339..9822973 100644
--- a/src/components/HomePage/Client.jsx
+++ b/src/components/HomePage/Client.jsx
@@ -28,10 +28,11 @@ const Client = () => {
   };
   return (
     <Box
-      height={"90vh"}
+      height={"auto"}
       background={"#101015"}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
+      padding={"3rem"}
       sx={{
         "@media (max-width: 1024px)": {
           height: "auto",
@@ -44,7 +45,7 @@ const Client = () => {
       <Text
         as={"h2"}
         paddingTop={"2rem"}
-        paddingBottom={"2rem"}
+        paddingBottom={"4rem"}
         fontWeight={700}
         fontSize={"40px"}
         textAlign={"center"}
@@ -65,7 +66,7 @@ const Client = () => {
         maxW="container.xl"
         display={"grid"}
         placeContent={"center"}
-        height={"65vh"}
+        paddingBottom={"3rem"}
         sx={{
           "@media (max-width: 1024px)": {
             height: "40vh",
diff --git a/src/components/HomePage/Resources.jsx b/src/components/HomePage/Resources.jsx
index 2f826c6..53f1361 100644
--- a/src/components/HomePage/Resources.jsx
+++ b/src/components/HomePage/Resources.jsx
@@ -65,6 +65,7 @@ const Resources = () => {
         <Box
           display={"flex"}
           alignItems={"center"}
+          justifyContent={"flex-end"}
           gap={"25px"}
           overflowX={"auto"}
           sx={{
diff --git a/src/components/HomePage/Stats.jsx b/src/components/HomePage/Stats.jsx
index db95234..0ba4460 100644
--- a/src/components/HomePage/Stats.jsx
+++ b/src/components/HomePage/Stats.jsx
@@ -14,10 +14,11 @@ const Stats = () => {
   });
   return (
     <Box
-      height={"80vh"}
+      height={"auto"}
       backgroundImage={`url(${banner})`}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
+      padding={"3rem"}
       sx={{
         "@media (max-width: 1024px)": {
           height: "auto",
@@ -49,7 +50,7 @@ const Stats = () => {
         maxW="container.lg"
         display={"grid"}
         placeContent={"center"}
-        height={"50vh"}
+        paddingBottom="3rem"
         sx={{
           "@media (max-width: 996px)": {
             height: "auto",
diff --git a/src/components/HomePage/WhitePaper.jsx b/src/components/HomePage/WhitePaper.jsx
index fa27eee..4ca12e4 100644
--- a/src/components/HomePage/WhitePaper.jsx
+++ b/src/components/HomePage/WhitePaper.jsx
@@ -10,7 +10,7 @@ const SectionContent = {
 const WhitePaper = () => {
   return (
     <Box
-      height={"50vh"}
+      height={"auto"}
       backgroundImage={`url(${banner})`}
       backgroundSize={"cover"}
       backgroundRepeat={"no-repeat"}
@@ -46,7 +46,6 @@ const WhitePaper = () => {
         textAlign={"center"}
         display={"grid"}
         placeContent={"center"}
-        height={"30vh"}
         paddingBottom={"3rem"}
       >
         <Text
diff --git a/src/components/LearnPage/Faq.jsx b/src/components/LearnPage/Faq.jsx
index 6902ee0..6ffdb8c 100644
--- a/src/components/LearnPage/Faq.jsx
+++ b/src/components/LearnPage/Faq.jsx
@@ -55,7 +55,7 @@ export const Faq = () => {
     >
       <Container
         maxW={"container.xl"}
-        padding={"5rem"}
+        padding={"5rem 4rem"}
         sx={{
           "@media (max-width: 435px)": {
             padding: "2rem",
diff --git a/src/components/LearnPage/GetStarted.jsx b/src/components/LearnPage/GetStarted.jsx
index 553967a..3dcd289 100644
--- a/src/components/LearnPage/GetStarted.jsx
+++ b/src/components/LearnPage/GetStarted.jsx
@@ -10,7 +10,7 @@ const GetStarted = () => {
     <Box backgroundColor={"#000"}>
       <Container
         maxW={"container.xl"}
-        padding={"0 5rem"}
+        padding={"4rem 4rem"}
         sx={{
           "@media (max-width: 1024px)": {
             padding: "3rem",
diff --git a/src/components/LearnPage/LearnBanner.jsx b/src/components/LearnPage/LearnBanner.jsx
index 540ae09..a4060ca 100644
--- a/src/components/LearnPage/LearnBanner.jsx
+++ b/src/components/LearnPage/LearnBanner.jsx
@@ -38,7 +38,7 @@ const LearnBanner = () => {
         maxW="container.xl"
         textAlign={"left"}
         marginTop={"2rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"3.5rem"}
         sx={{
           "@media (max-width: 435px)": {
             paddingLeft: "2rem",
@@ -57,7 +57,7 @@ const LearnBanner = () => {
             as={"h2"}
             fontWeight={700}
             fontSize={"60px"}
-            textTransform={"upperCase"}
+            textTransform={"Capitalize"}
             color={"#DE858E"}
             sx={{
               "@media (max-width: 996px)": {
@@ -108,7 +108,7 @@ const LearnBanner = () => {
         maxW="container.xl"
         textAlign={"left"}
         marginTop={"3rem"}
-        paddingLeft={"5rem"}
+        paddingLeft={"3.5rem"}
         sx={{
           "@media (max-width: 435px)": {
             paddingLeft: "2rem",
diff --git a/src/components/LearnPage/LearnDev.jsx b/src/components/LearnPage/LearnDev.jsx
index 54623e7..cbcd8a3 100644
--- a/src/components/LearnPage/LearnDev.jsx
+++ b/src/components/LearnPage/LearnDev.jsx
@@ -62,7 +62,7 @@ const LearnDev = () => {
           as={"h2"}
           paddingTop={"2rem"}
           paddingBottom={"2rem"}
-          paddingLeft={"4rem"}
+          paddingLeft={"3rem"}
           fontWeight={700}
           fontSize={"40px"}
           textAlign={"left"}
@@ -85,8 +85,9 @@ const LearnDev = () => {
           {Content.span}
         </Text>
       </Container>
-      <Box
-        paddingLeft={"7rem"}
+      <Container
+        maxW="container.xl"
+        paddingLeft={"4rem"}
         paddingBottom={"2rem"}
         // height={"50vh"}
         sx={{
@@ -119,7 +120,7 @@ const LearnDev = () => {
             />
           ))}
         </Box>
-      </Box>
+      </Container>
     </Box>
   );
 };
diff --git a/src/components/LearnPage/WhyRubix.jsx b/src/components/LearnPage/WhyRubix.jsx
index bae5381..f42df9a 100644
--- a/src/components/LearnPage/WhyRubix.jsx
+++ b/src/components/LearnPage/WhyRubix.jsx
@@ -49,7 +49,7 @@ const WhyRubix = () => {
     >
       <Container
         maxW={"container.xl"}
-        padding={"5rem"}
+        padding={"5rem 4rem"}
         sx={{
           "@media (max-width: 1024px)": {
             padding: "3rem",
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index 14c2392..91d6a8d 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -84,7 +84,7 @@ const NavBar = () => {
             zIndex={"999"}
             width={"100%"}
             top={"0px"}
-            padding={"2rem 0rem"}
+            padding={"2.5rem 0 2rem 0"}
             sx={{
               "@media (max-width: 996px)": {
                 justifyContent: "space-between",
diff --git a/src/index.css b/src/index.css
index 2a4124c..bae8f62 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,7 +20,7 @@
 }
 
 .rubix-text-large {
-  font-size: 22px !important;
+  font-size: 25px !important;
   font-family: "Poppins" !important;
   color: #fff !important;
 }
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index 8a27400..d9e4269 100644
--- a/src/pages/Contact.jsx
+++ b/src/pages/Contact.jsx
@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import Form from "../components/Contact/Form";
+import Footer from "../components/Footer/Footer";
 
 const Contact = () => {
   useEffect(() => {
@@ -9,6 +10,7 @@ const Contact = () => {
   return (
     <>
       <Form />
+      <Footer />
     </>
   );
 };