diff --git a/src/App.jsx b/src/App.jsx
index bad29d41..b0850805 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import './App.css'
-import authService from "./appwrite/auth"
-import { login, logout } from "./store/authSlice"
+import authService from './appwrite/auth'
+import { login, logout } from './store/authSlice'
 import { Footer, Header } from './componenets'
-import { Outlet } from 'react-router-dom'
+import { Routes, Route, Outlet, Navigate } from 'react-router-dom'
 import BackToTopButton from './components/ui/BackToTopButton'
+import NotFound from './componenets/NotFound'
 
 function App() {
   const [loading, setLoading] = useState(true)
@@ -21,20 +22,34 @@ function App() {
         }
       })
       .finally(() => setLoading(false))
-  }, [])
+  }, [dispatch])
 
-  return !loading ? (
-    <div className='custom-theme min-h-screen flex flex-wrap content-between '>
-      <div className='w-full block'>
-        <BackToTopButton />
-        <Header />
-        <main>
-          <Outlet />
-        </main>
-        <Footer />
-      </div>
+  if (loading) return null
+
+  return (
+    <div className='custom-theme min-h-screen flex flex-wrap content-between'>
+      <Routes>
+        {/* Public Routes with Header, Footer, and Outlet */}
+        <Route path="/" element={
+          <>
+            <BackToTopButton />
+            <Header />
+            <main>
+              <Outlet />
+            </main>
+            <Footer />
+          </>
+        }>
+          {/* Add other valid routes here */}
+          <Route path="home" element={<h1>Home Page</h1>} />
+          <Route path="profile" element={<h1>User Profile</h1>} />
+        </Route>
+
+        {/* Route for invalid URLs */}
+        <Route path="*" element={<NotFound />} />
+      </Routes>
     </div>
-  ) : null
+  )
 }
 
-export default App
\ No newline at end of file
+export default App
diff --git a/src/componenets/Header/Header.jsx b/src/componenets/Header/Header.jsx
index 82959002..b3e4f57f 100644
--- a/src/componenets/Header/Header.jsx
+++ b/src/componenets/Header/Header.jsx
@@ -3,21 +3,19 @@ import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { Container, Logo, LogoutBtn } from "../index";
-import { FaBars, FaTimes } from "react-icons/fa"; // For hamburger icon
+import { FaBars, FaTimes, FaSun, FaMoon } from "react-icons/fa"; // Import icons
 
 function Header() {
   const authStatus = useSelector((state) => state.auth.status);
   const navigate = useNavigate();
 
-  // State to track theme mode
   const [isDarkMode, setIsDarkMode] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false); // State for hamburger menu
-  const [isSticky, setIsSticky] = useState(false); // State for sticky navbar
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [isSticky, setIsSticky] = useState(false);
 
   useEffect(() => {
     const handleScroll = () => {
       if (window.scrollY > window.innerHeight * 0.1) {
-        // 10vh
         setIsSticky(true);
       } else {
         setIsSticky(false);
@@ -25,16 +23,11 @@ function Header() {
     };
 
     window.addEventListener("scroll", handleScroll);
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
+    return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
-  /* Toggle Text Color */
-  const toggleTextColor = () => {
+  const toggleTheme = () => {
     const rootElement = document.getElementById("root");
-    // Toggle text color for the root
     rootElement.classList.toggle("white-color");
 
     const footerLinks = document.getElementsByClassName("toggle");
@@ -43,114 +36,89 @@ function Header() {
       link.classList.toggle("text-alice-blue-900");
     });
 
-    // Toggle background and text color for custom screen elements
     const screenElements = document.querySelectorAll(".custom-theme");
-    screenElements.forEach((screenElement) => {
-      screenElement.classList.toggle("dark-mode-bg"); // Toggle background color
-      screenElement.classList.toggle("light-text"); // Toggle text color
+    screenElements.forEach((el) => {
+      el.classList.toggle("dark-mode-bg");
+      el.classList.toggle("light-text");
     });
 
-    // Toggle between dark and light mode
     setIsDarkMode(!isDarkMode);
   };
 
   const navItems = [
-    {
-      name: "Home",
-      slug: "/",
-      active: true,
-    },
-    {
-      name: "Login",
-      slug: "/login",
-      active: !authStatus,
-    },
-    {
-      name: "Signup",
-      slug: "/signup",
-      active: !authStatus,
-    },
-    {
-      name: "Profile",
-      slug: "/profile",
-      active: !authStatus,
-    },
-    {
-      name: "All Posts",
-      slug: "/all-posts",
-      active: authStatus,
-    },
-    {
-      name: "Add Post",
-      slug: "/add-post",
-      active: authStatus,
-    },
+    { name: "Home", slug: "/", active: true },
+    { name: "Login", slug: "/login", active: !authStatus },
+    { name: "Signup", slug: "/signup", active: !authStatus },
+    { name: "Profile", slug: "/profile", active: !authStatus },
+    { name: "All Posts", slug: "/all-posts", active: authStatus },
+    { name: "Add Post", slug: "/add-post", active: authStatus },
   ];
 
-  // Toggle the hamburger menu
   const toggleMenu = () => setMenuOpen(!menuOpen);
 
   return (
     <>
       <style>
         {`
-          /* Initial navbar styles */
           .header-custom-theme {
             position: relative;
             width: 100%;
             transition: all 0.3s ease-in-out;
           }
 
-          /* Sticky navbar styles */
           .header-custom-theme.sticky {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             z-index: 10;
-            background-color: #fff; /* Adjust as needed */
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional for shadow effect */
+            background-color: #fff;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+          }
+
+          .theme-icon {
+            font-size: 1.5rem;
+            color: #555;
+            cursor: pointer;
+            transition: color 0.3s;
+          }
+
+          .theme-icon:hover {
+            color: #007bff;
           }
         `}
       </style>
-      <header
-        className={`custom-theme header-custom-theme py-3 shadow bg-gray-200 ${isSticky ? "sticky" : ""
-          }`}
-      >
+      <header className={`custom-theme header-custom-theme py-3 shadow bg-gray-200 ${isSticky ? "sticky" : ""}`}>
         <Container>
-          <nav className='flex justify-between items-center p-2'>
-            <div className='mr-4 ml-10'>
-              <Link to='/'>
-                <Logo width='70px' />
+          <nav className="flex justify-between items-center p-2">
+            <div className="mr-4 ml-10">
+              <Link to="/">
+                <Logo width="70px" />
               </Link>
             </div>
 
-            {/* Hamburger Icon for smaller screens */}
-            <button className='text-2xl md:hidden' onClick={toggleMenu}>
+            <button className="text-2xl md:hidden" onClick={toggleMenu}>
               {menuOpen ? <FaTimes /> : <FaBars />}
             </button>
 
-            {/* Navbar items for large screens */}
-            <ul className='hidden md:flex ml-auto'>
+            <ul className="hidden md:flex ml-auto">
               <li>
-                <button
-                  onClick={toggleTextColor}
-                  className='inline-block px-6 py-2 duration-200 hover:bg-blue-100 rounded-full'
-                >
-                  {isDarkMode ? "LightMode" : "DarkMode"}
+                <button onClick={toggleTheme} className="inline-block p-2">
+                  {isDarkMode ? <FaSun className="theme-icon" /> : <FaMoon className="theme-icon" />}
                 </button>
               </li>
-              {navItems.map((item) =>
-                item.active ? (
-                  <li key={item.name}>
-                    <button
-                      onClick={() => navigate(item.slug)}
-                      className='inline-block px-6 py-2 duration-200 hover:bg-blue-100 rounded-full'
-                    >
-                      {item.name}
-                    </button>
-                  </li>
-                ) : null
+              {navItems.map(
+                (item) =>
+                  item.active && (
+                    <li key={item.name}>
+                      <button
+                        onClick={() => navigate(item.slug)}
+                        className="inline-block px-6 py-2 duration-200 hover:bg-blue-100 rounded-full"
+                      >
+                        {item.name}
+                      </button>
+                    </li>
+                  )
               )}
               {authStatus && (
                 <li>
@@ -159,34 +127,31 @@ function Header() {
               )}
             </ul>
 
-            {/* Hamburger Menu items for small screens */}
             {menuOpen && (
-              <ul className='md:hidden flex flex-col absolute top-16 right-0 bg-gray-200 w-full text-center shadow-lg z-10'>
-                <li className='p-4'>
-                  <button
-                    onClick={toggleTextColor}
-                    className='inline-block px-6 py-2 duration-200 hover:bg-blue-100 rounded-full'
-                  >
-                    {isDarkMode ? "LightMode" : "DarkMode"}
+              <ul className="md:hidden flex flex-col absolute top-16 right-0 bg-gray-200 w-full text-center shadow-lg z-10">
+                <li className="p-4">
+                  <button onClick={toggleTheme} className="inline-block p-2">
+                    {isDarkMode ? <FaSun className="theme-icon" /> : <FaMoon className="theme-icon" />}
                   </button>
                 </li>
-                {navItems.map((item) =>
-                  item.active ? (
-                    <li key={item.name} className='p-4'>
-                      <button
-                        onClick={() => {
-                          navigate(item.slug);
-                          setMenuOpen(false); // Close menu after navigation
-                        }}
-                        className='inline-block px-6 py-2 duration-200 hover:bg-blue-100 rounded-full'
-                      >
-                        {item.name}
-                      </button>
-                    </li>
-                  ) : null
+                {navItems.map(
+                  (item) =>
+                    item.active && (
+                      <li key={item.name} className="p-4">
+                        <button
+                          onClick={() => {
+                            navigate(item.slug);
+                            setMenuOpen(false);
+                          }}
+                          className="inline-block px-6 py-2 duration-200 hover:bg-blue-100 rounded-full"
+                        >
+                          {item.name}
+                        </button>
+                      </li>
+                    )
                 )}
                 {authStatus && (
-                  <li className='p-4'>
+                  <li className="p-4">
                     <LogoutBtn />
                   </li>
                 )}
diff --git a/src/componenets/NotFound/index.css b/src/componenets/NotFound/index.css
new file mode 100644
index 00000000..d153b7bf
--- /dev/null
+++ b/src/componenets/NotFound/index.css
@@ -0,0 +1,21 @@
+
+.not-found-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 70vh;
+  }
+  .not-found-img {
+    width: 400px;
+  }
+  .button {
+            padding: 10px 20px;
+            font-size: 16px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
diff --git a/src/componenets/NotFound/index.js b/src/componenets/NotFound/index.js
new file mode 100644
index 00000000..fb920c97
--- /dev/null
+++ b/src/componenets/NotFound/index.js
@@ -0,0 +1,16 @@
+import './index.css'
+import {Link} from 'react-router-dom'
+const NotFound = () => (
+  <div className="not-found-container">
+    <img
+      src="https://assets.ccbp.in/frontend/react-js/not-found-blog-img.png"
+      alt="not found"
+      className="not-found-img"
+    />
+    <Link to="/">
+    <button className='Button'>Go Back Home</button>
+    </Link>
+  </div>
+)
+
+export default NotFound