diff --git a/Apply-For-Me-UI/src/components/nav/Nav.jsx b/Apply-For-Me-UI/src/components/nav/Nav.jsx
index 7bcd34c7..5f47b05d 100644
--- a/Apply-For-Me-UI/src/components/nav/Nav.jsx
+++ b/Apply-For-Me-UI/src/components/nav/Nav.jsx
@@ -8,14 +8,38 @@ import BlueButton from "../buttons/blue_background/BlueButton";
 import LightButton from "../buttons/light_button/LightButton";
 import { useDispatch, useSelector } from "react-redux";
 import { userInfo } from "store/slice/UserSlice";
+import { motion } from "framer-motion";
 
 const Nav = ({setSeeMore}) => {
+
     const initState = {
         "about": false,
         "price": false,
         "blog": false,
         "contact": false
     };
+
+    const variants = {
+        open: { opacity: 1, x: 0, transition: { staggerChildren: 0.07, delayChildren: 0.2 } },
+        closed: { opacity: 0, x: "-100%",transition: { staggerChildren: 0.05, staggerDirection: -1 } },
+    }
+    const Itemvariants = {
+        open: {
+          y: 0,
+          opacity: 1,
+          transition: {
+            y: { stiffness: 1000, velocity: -100 }
+          }
+        },
+        closed: {
+          y: 50,
+          opacity: 0,
+          transition: {
+            y: { stiffness: 1000 }
+          }
+        }
+      };
+
     const [dropDown, setDropDown] = useState(false);
     const { user } = useSelector(state => state.user);
     const [active, setActiveLink] = useState({ ...initState });
@@ -157,67 +181,84 @@ const Nav = ({setSeeMore}) => {
                         
                         />
                     </div>
-
-                    <ul
-                        className={classes.nav_links__mobile}
-                        style={{ display: dropDown ? "flex" : "none" }}
-                    >
-                        <li onClick={() => navigate("/about")}>
-                            <Link to="/about" >About us</Link>
-                        </li>
-                        <li onClick={() => { setSeeMore(false); navigate("/pricing") }}>
-                            <Link to="/pricing" >Pricing plan</Link>
-                        </li>
-                        <li onClick={() => navigate("/faqs")}>
-                            <Link to="/faqs" >FAQs</Link>
-                        </li>
-                    </ul>
-
-                    <div
-                        className={classes.btn_container__mobile}
-                        style={{ display: dropDown ? "flex" : "none" }}
+                    <motion.div
+                        animate={dropDown ? "open" : "closed"}
+                        variants={variants}
                     >
-                        {!user ? (
-                            <>
-                                <Link to="/wel2">
-                                    <LightButton
-                                        text="Sign in"
+
+                        <ul
+                            className={classes.nav_links__mobile}
+                            style={{ display: dropDown ? "flex" : "none" }}
+                        >
+                            <motion.li
+                                variants={Itemvariants}
+                                whileHover={{ scale: 1.1 }}
+                                whileTap={{ scale: 0.95 }}
+                                onClick={() => navigate("/about")}>
+                                <Link to="/about" >About us</Link>
+                            </motion.li>
+                            <motion.li
+                                variants={Itemvariants}
+                                whileHover={{ scale: 1.1 }}
+                                whileTap={{ scale: 0.95 }} 
+                                onClick={() => { setSeeMore(false); navigate("/pricing") }}>
+                                <Link to="/pricing" >Pricing plan</Link>
+                            </motion.li>
+                            <motion.li
+                                variants={Itemvariants}
+                                whileHover={{ scale: 1.1 }}
+                                whileTap={{ scale: 0.95 }} 
+                                onClick={() => navigate("/faqs")}>
+                                <Link to="/faqs" >FAQs</Link>
+                            </motion.li>
+                        </ul>
+
+                        <div
+                            className={classes.btn_container__mobile}
+                            style={{ display: dropDown ? "flex" : "none" }}
+                        >
+                            {!user ? (
+                                <>
+                                    <Link to="/wel2">
+                                        <LightButton
+                                            text="Sign in"
+                                            width="185"
+                                            func={() => setDropDown(false)}
+                                        />
+                                    </Link>
+                                    <Link to="/wel1">
+                                        <BlueButton
+                                            text="Get started"
+                                            width="185"
+                                            func={() => setDropDown(false)}
+                                        />
+                                    </Link>
+                                </>
+                            ) : (
+                                <div className={classes.auth__user_btn}>
+                                    <BlueButton
+                                        text="Dashboard"
                                         width="185"
-                                        func={() => setDropDown(false)}
+                                        func={() =>
+                                            navigate(
+                                                user.roles[0] ===
+                                                    "SuperAdministrator"
+                                                    ? "/user-page"
+                                                    : user.roles[0] === "Recruiter"
+                                                    ? "/rr_admin"
+                                                    : "/dashboard/"
+                                            )
+                                        }
                                     />
-                                </Link>
-                                <Link to="/wel1">
                                     <BlueButton
-                                        text="Get started"
+                                        text="Logout"
                                         width="185"
-                                        func={() => setDropDown(false)}
+                                        func={handleLogout}
                                     />
-                                </Link>
-                            </>
-                        ) : (
-                            <div className={classes.auth__user_btn}>
-                                <BlueButton
-                                    text="Dashboard"
-                                    width="185"
-                                    func={() =>
-                                        navigate(
-                                            user.roles[0] ===
-                                                "SuperAdministrator"
-                                                ? "/user-page"
-                                                : user.roles[0] === "Recruiter"
-                                                ? "/rr_admin"
-                                                : "/dashboard/"
-                                        )
-                                    }
-                                />
-                                <BlueButton
-                                    text="Logout"
-                                    width="185"
-                                    func={handleLogout}
-                                />
-                            </div>
-                        )}
-                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </motion.div>
                 </nav>
             </div>
         </section>
diff --git a/Apply-For-Me-UI/src/pages/landing_page/Hero.module.css b/Apply-For-Me-UI/src/pages/landing_page/Hero.module.css
index d51d80c7..4fea4004 100644
--- a/Apply-For-Me-UI/src/pages/landing_page/Hero.module.css
+++ b/Apply-For-Me-UI/src/pages/landing_page/Hero.module.css
@@ -573,7 +573,13 @@ input[type=file]{
     }
 
     .FAQ_content div h3 {
-        font-size: 1.2rem;
+        font-family: 'Outfit';
+        font-style: normal;
+        font-weight: 300;
+        font-size: 20px;
+        line-height: 150%;
+        letter-spacing: 0.01em;
+        color: #52515B;
     }
     .learn_content .bottom {
         padding: 80px 40px;
@@ -782,15 +788,18 @@ input[type=file]{
         margin-top: 20px;
     }
     .reviews_content .bottom div{
-    margin: 0 0 2rem 0;
+        margin: 0 0 2rem 0;
     }
     
 .reviews_content .bottom .profile{
-    margin-bottom: -9px;
-}
+        margin-bottom: -9px;
+    }
 }
 
 @media (max-width: 425px) {
+    .FAQ_content div h3{
+        font-size: 14px;
+    }
     .figure_text{
         font-weight: 500;
         font-size: 14px;
diff --git a/Apply-For-Me-UI/src/pages/landing_page/question.module.css b/Apply-For-Me-UI/src/pages/landing_page/question.module.css
index f99f42c1..10262385 100644
--- a/Apply-For-Me-UI/src/pages/landing_page/question.module.css
+++ b/Apply-For-Me-UI/src/pages/landing_page/question.module.css
@@ -43,7 +43,13 @@
 .minheading {
     font-weight: 400;
     margin-bottom: 1rem;
-    font-size: 1rem;
+    font-family: 'Outfit';
+    font-style: normal;
+    font-weight: 300;
+    font-size: 20px;
+    line-height: 150%;
+    letter-spacing: 0.01em;
+    color: #52515B;
 }
 
 .faqicon {
@@ -69,6 +75,9 @@
     .toggle {
         display: none;
     }
+    .minheading{
+        font-size: 14px;
+    }
 }
 
 /*BreakPoints*/