diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index cd53712..fb0a2a5 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import "../includes/css/navbar.css"
 import logo from "../includes/images/aks.png"
@@ -6,6 +6,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLaptop,faCircleInfo, faContactBook, faHome, faLaptopCode, faTimeline } from '@fortawesome/free-solid-svg-icons';
 const Navbar = () => {
 
+  const [isShown, setIsShown] = useState(false);
+
   const location = useLocation();
 
  
@@ -34,8 +36,11 @@ const Navbar = () => {
 
   return (
     
-      <div className='fixed z-40 md:w-[200px] w-full'>
-        <div className="sticky navbar bg-slate-800 flex items-center md:justify-content-start md:items-start justify-between px-2 md:px-0 md:justify-center h-[80px] md:h-[100vh] shadow-sm md:shadow-lg shadow-gray-800">
+      <div className={`fixed z-40 md:w-[${isShown ? 200 : 70}px] w-full`}>
+        <div 
+          onMouseEnter={() => setIsShown(true)}
+          onMouseLeave={() => setIsShown(false)}
+          className="sticky navbar bg-slate-800 flex items-center md:justify-content-start md:items-start justify-between px-2 md:px-0 md:justify-center h-[80px] md:h-[100vh] shadow-sm md:shadow-lg shadow-gray-800">
           <Link className="md:hidden"to="/"><img className='h-[50px]' src={logo} alt="" /></Link>
             <div className="flex flex-col py-4 px-2 md:hidden" id="menu-btn" onClick={toggleMenu}>
                 <div className='bg-red-800 rounded-xl h-[5px] w-[40px] bar1 m-0.5'></div>
@@ -45,12 +50,12 @@ const Navbar = () => {
           <div className="navbar-list w-full h-full hidden md:flex text-center shadow-xl">
             <ul className='flex w-full flex-col h-full justify-evenly'>
               <div className={`navbar-list-item border-b h-full flex items-center justify-center border-slate-500 text-lg p-3`}><Link to="/"><img src={logo} className='w-[100px]' alt="" /></Link></div>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/"><li className='px-5'> <FontAwesomeIcon icon={faHome}/> Home</li></Link>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/about'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/about"><li className='px-5'> <FontAwesomeIcon icon={faCircleInfo}/> About</li></Link>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/timeline'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/timeline"><li className='px-5'><FontAwesomeIcon icon={faTimeline}/> Timeline</li></Link>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/skills'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/skills"><li className='px-5'><FontAwesomeIcon icon={faLaptop} /> Skills</li></Link>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/projects'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/projects"><li className='px-5'><FontAwesomeIcon icon={faLaptopCode} /> Projects</li></Link>
-              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/contact'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/contact"><li className='px-5'><FontAwesomeIcon icon={faContactBook} /> Contact</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/"><li className='px-5'> <FontAwesomeIcon icon={faHome}/>{isShown ?  ' Home' : ''}</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/about'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/about"><li className='px-5'> <FontAwesomeIcon icon={faCircleInfo}/> {isShown ?  ' About' : ''}</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/timeline'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/timeline"><li className='px-5'><FontAwesomeIcon icon={faTimeline}/> {isShown ?  ' Timeline' : ''}</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/skills'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/skills"><li className='px-5'><FontAwesomeIcon icon={faLaptop} /> {isShown ?  ' Skills' : ''}</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/projects'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/projects"><li className='px-5'><FontAwesomeIcon icon={faLaptopCode} /> {isShown ?  ' Projects' : ''}</li></Link>
+              <Link className={`flex justify-between w-full items-center navbar-list-item ${location.pathname==='/contact'? "bg-slate-600" : ""} text-white hover:bg-slate-700 border-b h-full  border-slate-500 text-xl`} to="/contact"><li className='px-5'><FontAwesomeIcon icon={faContactBook} /> {isShown ?  ' Contact' : ''}</li></Link>
             </ul>
           </div>
         </div>
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 0ee6817..ac3d73f 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -11,7 +11,7 @@ const Home = () => {
 
   return (
 
-    <div className="w-full mt-[80px] ml-0 md:ml-[200px] md:mt-0">
+    <div className="w-full mt-[80px] ml-0 md:ml-[80px] md:mt-0">
       <TsParticles />
       <div className={`z-10 flex flex-col justify-end md:bg-[url('${blackBg1}')] bg-[url('${blackBg2}')] backdrop-blur-xl h-[200px] lg:bg-cover bg-left text-white`}>