diff --git a/frontend/src/components/MainNavbar.tsx b/frontend/src/components/MainNavbar.tsx
new file mode 100644
index 0000000..895a13f
--- /dev/null
+++ b/frontend/src/components/MainNavbar.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
+const Navbar = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  useEffect(() => {
+    console.log("here");
+    if (location.pathname === '/') navigate("/homepage");
+  }, [location]);
+  return (
+    <div>
+   <nav className="flex bg-gray-800 p-4">
+      <div className="container mx-auto flex justify-between items-center">
+        <div className="text-white text-xl font-bold">
+          <Link to="/">MyApp</Link>
+        </div>
+        <div className="hidden md:flex space-x-4">
+          <Link to="/homepage" className="text-gray-300 hover:text-white m-3">
+            Home
+          </Link>
+          <Link to="/login" className="text-gray-300 hover:text-white">
+            Login
+          </Link>
+          <Link to="/posts" className="text-gray-300 hover:text-white">
+            post
+          </Link>
+          <Link to="/room" className="text-gray-300 hover:text-white">
+            room
+          </Link>
+        </div>
+        <div className="md:hidden">
+          <button className="text-gray-300 hover:text-white focus:outline-none">
+            {/* Icon for mobile menu (e.g. hamburger icon) */}
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </nav>
+    <Outlet></Outlet>
+    </div>
+  );
+};
+
+export default Navbar;
diff --git a/frontend/src/components/loading.tsx b/frontend/src/components/loading.tsx
new file mode 100644
index 0000000..f337bdf
--- /dev/null
+++ b/frontend/src/components/loading.tsx
@@ -0,0 +1,9 @@
+import React from "react"
+export default function Loader(){
+  return(
+    <div
+      className="w-12 h-12 rounded-full animate-spin border-y-8 border-solid border-green-500 border-t-transparent shadow-md"
+    >
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/frontend/src/components/routes/mainroute.jsx b/frontend/src/components/routes/mainroute.jsx
index 4d69778..3299f29 100644
--- a/frontend/src/components/routes/mainroute.jsx
+++ b/frontend/src/components/routes/mainroute.jsx
@@ -10,6 +10,8 @@ import HomePage from "../../pages/HomePage";
 import Register from "../Register";
 import SinglePost from "../../components/SinglePost";
 import LoginPage from "../Login";
+import Navbar from "../MainNavbar";
+import Loader from "../loading";
 const Test = () => {
   const [userId, setUserId] = useState("");
   const [roomId, setRoomId] = useState("");
@@ -47,45 +49,52 @@ const Test = () => {
 const Mainrouter = createBrowserRouter([
   {
     path: "/",
-    element: <HomePage />,
-  },
-  {
-    path: "/posts",
-    element: <Posts />,
-  },
-  {
-    path: "/posts/:id",
-    element: <SinglePost />,
-  },
-  {
-    path: "/login",
-    element: <LoginPage />,
-  },
-  {
-    path: "/signup",
-    element: <Register />,
-  },
-  {
-    path: "/room",
-    element: <Test />,
-    children: [
+    element: <Navbar />,
+    children:[
       {
-        path: "/room",
-        element: <Mainbuttons />,
-        index: true,
+        path:"homepage",
+        element:<HomePage></HomePage>
+      },
+      {
+        path: "posts",
+        element: <Posts />,
       },
       {
-        path: "/room/createroom",
-        element: <Createroom />,
+        path: "posts/:id",
+        element: <SinglePost />,
       },
       {
-        path: "/room/joinroom",
-        element: <Joinroom />,
+        path: "login",
+        element: <LoginPage />,
       },
       {
-        path: "/room/chatting",
-        element: <Chatroom />,
+        path: "/signup",
+        element: <Register />,
       },
+      {
+        path: "/room",
+        element: <Test />,
+        children: [
+          {
+            path: "/room",
+            element: <Mainbuttons />,
+            index: true,
+          },
+          {
+            path: "/room/createroom",
+            element: <Createroom />,
+          },
+          {
+            path: "/room/joinroom",
+            element: <Joinroom />,
+          },
+          {
+            path: "/room/chatting",
+            element: <Chatroom />,
+          },
+        ],
+      },
+
     ],
   },
 ]);