diff --git a/frontend/src/components/HomeComponents/NavBar.js b/frontend/src/components/HomeComponents/NavBar.js
index b70a54a..4055aed 100644
--- a/frontend/src/components/HomeComponents/NavBar.js
+++ b/frontend/src/components/HomeComponents/NavBar.js
@@ -3,7 +3,7 @@ import Logo from '../../assets/images/logo-large.png'
 import NavList from './NavList'
 export default function NavBar() {
   return (
-    <div className=' flex justify-between'>
+    <div className='md:fixed md:top-0 md:left-0 md:px-40 md:z-50 relative md:bg-[#012478] md:w-screen flex justify-between'>
         <div className='text-white flex flex-row items-center'>
             <img src={Logo} alt='logo' className='w-10'/>
             <div className='text-white text-2xl font-Roboto font-semibold ml-2'>ChatBox</div>
diff --git a/frontend/src/components/HomeComponents/NavList.js b/frontend/src/components/HomeComponents/NavList.js
index 3589b92..e4ee209 100644
--- a/frontend/src/components/HomeComponents/NavList.js
+++ b/frontend/src/components/HomeComponents/NavList.js
@@ -17,9 +17,9 @@ export default function NavList() {
 
   return (
     <div>
-      <div id="menulinks" class="menulinks duration-500 md:static md:min-h-fit absolute min-h-[28vh] left-[0%] top-[-100%] md:w-auto w-[100%] flex justify-center py-5 fixed ">
+      <div id="menulinks" class="menulinks fixed top-[8%] duration-500 md:static md:min-h-fit w-[100%] left-[0%]  min-h-[28vh]  md:w-auto flex justify-center py-5 ">
         <ul className="flex md:flex-row flex-col md:items-center md:gap-[4vw] gap-8 text-white font-Roboto font-semibold ">
-          <li>
+          <li className="hover:text-[#FFCC33]">
             <NavLink
               to="/"
               className={({ isActive }) => (isActive ? "text-[#FFCC33]" : "")}
@@ -27,7 +27,7 @@ export default function NavList() {
               Product
             </NavLink>
           </li>
-          <li>
+          <li className="hover:text-[#FFCC33]">
             <NavLink
               onClick={() => {
                 ScrollDown();
@@ -36,10 +36,10 @@ export default function NavList() {
               Services
             </NavLink>
           </li>
-          <li>
+          <li className="hover:text-[#FFCC33]">
             <NavLink to="/login">Login</NavLink>
           </li>
-          <li>
+          <li className="hover:text-[#FFCC33]">
             <NavLink to="/signup">Signup</NavLink>
           </li>
         </ul>
diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.js
index 2b7a65a..3633053 100644
--- a/frontend/src/pages/Home.js
+++ b/frontend/src/pages/Home.js
@@ -9,7 +9,7 @@ import { useNavigate } from 'react-router-dom'
 export default function Home() {
 
   const navigate=useNavigate();
-  const [isLoading,setIsLoading]=useState(true);
+  const [isLoading,setIsLoading]=useState(false);
 
   useEffect(()=>{
     
@@ -39,7 +39,7 @@ export default function Home() {
   return (
      <div>
       {isLoading&&<LoadingPage></LoadingPage>}
-      {!isLoading&&(<><div className='h-[100vh] px-40 py-5 max-[885px]:px-20 max-[653px]:px-14 bg-[#012478]'>
+      {!isLoading&&(<><div className='h-[100vh] px-40 py-5 md:pt-24 max-[885px]:px-20 max-[653px]:px-14 bg-[#012478]'>
         <NavBar/>
         <Description></Description>
      </div>