diff --git a/client/src/Pages/LandingPage.jsx b/client/src/Pages/LandingPage.jsx
index 7a0ed41..4911729 100644
--- a/client/src/Pages/LandingPage.jsx
+++ b/client/src/Pages/LandingPage.jsx
@@ -3,8 +3,8 @@ import { Link } from 'react-router-dom';
 import AOS from 'aos';
 import 'aos/dist/aos.css';
 import '../index.css';
-import ScrollToTop from '../components/ScrollTop';
-import { FaTwitter, FaFacebookF, FaLinkedinIn, FaArrowRight, FaPlay, FaStar, FaUsers, FaShieldAlt } from 'react-icons/fa';
+import { FaArrowRight, FaPlay, FaStar, FaUsers} from 'react-icons/fa';
+import { IoMdArrowDropdown } from "react-icons/io";
 import Tour from '../components/Tour';
 import FAQAccordion from '../components/FAQAccordion';
 import ThemeToggle from '../components/ThemeToggle';
@@ -12,6 +12,7 @@ import ThemeToggle from '../components/ThemeToggle';
 
 const Home = () => {
   const [showTour, setShowTour] = useState(false);
+  const [toggleDropdown, setToggleDropdown]=useState(false)
 
   const closeTour = () => {
     localStorage.setItem('hasSeenTour', 'true');
@@ -154,7 +155,7 @@ const Home = () => {
 
 
       {/* Modern Header */}
-<header className="fixed top-0 left-0 right-0 z-50 w-full px-2 sm:px-4 md:px-8 py-4 bg-white dark:bg-gray-900 border-b border-purple-100 dark:border-gray-700 shadow-sm" data-aos="fade-down" style={{ backdropFilter: 'blur(8px)' }}>
+<header className="fixed top-0 left-0 right-0 z-50 w-full px-3 sm:px-4 py-3 bg-white dark:bg-gray-900 border-b border-purple-100 dark:border-gray-700 shadow-sm" data-aos="fade-down" style={{ backdropFilter: 'blur(8px)' }}>
   <div className="max-w-7xl mx-auto flex items-center justify-between">
     <Link to="/" className="group">
       <h1 className="text-3xl sm:text-4xl font-extrabold gradient-text hover:scale-105 transition-transform duration-300 tour-step-1">
@@ -162,10 +163,14 @@ const Home = () => {
       </h1>
     </Link>
 
-    <nav className="tour-step-navbar flex items-center">
-      <ul className="hidden md:flex items-center space-x-8 text-sm sm:text-base font-medium text-purple-700 dark:text-purple-300">
+  
+    <nav className="tour-step-navbar flex items-center gap-4 justify-evenly px-4">
+      <ul className={`${toggleDropdown? "flex flex-col items-left justify-evenly bg-white rounded-xl dark:bg-gray-900 absolute top-14 right-1 z-20 w-[55%] sm:w-[30%] h-72 py-3 px-6 md:px-0 md:py-1 shadow-xl shadow-purple-400 gap-4 md:gap-0":
+        "hidden"} md:h-auto md:w-auto md:static md:justify-normal md:flex md:flex-row md:items-center
+         md:py-1 md:space-x-8 text-sm sm:text-base font-medium text-purple-700 
+         dark:text-purple-300 md:shadow-none`}>
         {["how-it-works", "features", "faq", "ready"].map((id, i) => (
-          <li key={i}>
+          <li key={i} onClick={()=>setToggleDropdown(false)}>
             <a
               href={`#${id}`}
               className="relative group transition-all duration-300 hover:text-purple-500 dark:hover:text-purple-400"
@@ -182,20 +187,28 @@ const Home = () => {
             </a>
           </li>
         ))}
+
         <li>
-          <Link to="/signup" className="tour-step-2">
-            <button className="modern-cta relative px-8 py-3 font-semibold rounded-full transition-all duration-300 transform hover:scale-105 hover:shadow-lg group">
+      <Link to="/signup" className="tour-step-2">
+            <button className="modern-cta relative px-3 py-2 md:px-4 font-semibold rounded-2xl transition-all duration-300 transform hover:scale-105 hover:shadow-lg group">
               <span className="relative z-10">Sign Up</span>
             </button>
-          </Link>
+        </Link>
         </li>
       </ul>
+      
 
+      {/* dropdown btn */}
+      <button className='md:hidden dark:text-purple-400'
+      onClick={()=>setToggleDropdown(!toggleDropdown)}>
+          <IoMdArrowDropdown size={"35px"}/>
+      </button>
       {/* Theme Toggle Button */}
-      <div className="ml-4 md:ml-6">
+      <div className="ml-0 md:ml-6">
         <ThemeToggle />
       </div>
     </nav>
+    
   </div>
 </header>
 
diff --git a/client/src/Pages/Tutorial.jsx b/client/src/Pages/Tutorial.jsx
index b8d74d2..99abf90 100644
--- a/client/src/Pages/Tutorial.jsx
+++ b/client/src/Pages/Tutorial.jsx
@@ -84,10 +84,8 @@ const Tutorial = () => {
     } finally {
       setLoading(false);
     }
-  },
-  [setError, setTutorials, setNextPageToken, setSearchHistory]
-);
-
+  }
+  
   const handleSearch = (e) => {
     e.preventDefault();
     setSelectedCategory("");
diff --git a/client/src/components/NavBar.jsx b/client/src/components/NavBar.jsx
index 0a3062c..5e58579 100644
--- a/client/src/components/NavBar.jsx
+++ b/client/src/components/NavBar.jsx
@@ -154,9 +154,10 @@ const NavBar = () => {
           <div className="hidden md:flex">
             <ThemeToggle />
           </div>
-
+          
           {/* Mobile Hamburger & Profile */}
           <div className="flex items-center gap-4 pr-2 sm:pr-4">
+            {/* hamburger */}
             <button
               className="md:hidden text-gray-900 dark:text-white focus:outline-none"
               aria-label="Toggle menu"
@@ -194,7 +195,7 @@ const NavBar = () => {
                 </svg>
               )}
             </button>
-
+          {/* profile dropdown */}
             <div className="relative" ref={dropdownRef}>
               <button
                 onClick={(e) => {
@@ -284,3 +285,5 @@ const NavBar = () => {
 };
 
 export default NavBar;
+
+
diff --git a/client/src/main.jsx b/client/src/main.jsx
index f66fc31..981fd88 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App.jsx';
 import './index.css';
-import { ThemeProvider } from './context/ThemeContext.jsx';
+import { ThemeProvider } from './context/ThemeProvider.jsx';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
diff --git a/package-lock.json b/package-lock.json
index 40182d6..9f914e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
         "react-router-dom": "^7.6.3",
+        "react-toastify": "^11.0.5",
         "tailwind-merge": "^3.3.1"
       },
       "devDependencies": {
@@ -12232,6 +12233,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",