diff --git a/frontend/src/components/MainNavbar.tsx b/frontend/src/components/MainNavbar.tsx
index ce548fa..359a996 100644
--- a/frontend/src/components/MainNavbar.tsx
+++ b/frontend/src/components/MainNavbar.tsx
@@ -1,177 +1,104 @@
 import React, { useEffect, useState, useRef } from "react";
-import { Outlet, useNavigate, Link } from "react-router-dom";
+import { Outlet, useNavigate, Link, useLocation } from "react-router-dom";
 import { gsap } from "gsap";
 
 interface NavbarProps {
   btnName: string;
   navigateUrl: string;
   display: boolean;
+  loadingUsr: boolean;
 }
 
-const Navbar: React.FC<NavbarProps> = ({ btnName, navigateUrl, display }) => {
+const Navbar: React.FC<NavbarProps> = ({ btnName, navigateUrl, display, loadingUsr }) => {
   const navigate = useNavigate();
+  const location = useLocation();
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  const sidebarRef = useRef<HTMLDivElement | null>(null); // Ref for the sidebar
+  const sidebarRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     if (isSidebarOpen) {
-      gsap.fromTo(
-        sidebarRef.current,
-        { x: -250, opacity: 0 }, // Start position and opacity
-        { x: 0, opacity: 1, duration: 0.3 } // End position and opacity
-      );
+      gsap.fromTo(sidebarRef.current, { x: -250, opacity: 0 }, { x: 0, opacity: 1, duration: 0.3 });
     }
   }, [isSidebarOpen]);
 
   useEffect(() => {
     if (location.pathname === "/") navigate("/homepage");
-  }, [location, navigate]);
+  }, [location.pathname, navigate]);
 
-  // Close sidebar function with GSAP animation
   const closeSidebar = () => {
     gsap.to(sidebarRef.current, {
       x: -250,
       opacity: 0,
       duration: 0.3,
-      onComplete: () => setIsSidebarOpen(false), // Set sidebar state after animation
+      onComplete: () => setIsSidebarOpen(false),
     });
   };
 
   return (
     <>
       <nav className="bg-[#1F2135] text-white px-6 lg:px-32 py-5 flex justify-between items-center">
-        {/* Logo Section */}
-        <div className="text-lg font-bold flex items-center">
+        <div className="text-lg font-bold flex items-center w-1/3">
           <Link to="/homepage" className="flex items-center">
-            <img
-              src={"/logo.png"}
-              alt="Logo"
-              className="w-10 h-10 rounded-full mx-3"
-            />
+            <img src="/logo.png" alt="Logo" className="w-10 h-10 rounded-full mx-3" />
             <span className="pt-1">Campus Chatter</span>
           </Link>
         </div>
 
-        {/* Navigation Links (Centered) */}
-        <div className="hidden md:flex flex-grow justify-center space-x-6">
-          <Link to="/homepage" className="hover:text-purple-500 ">
-            Home
-          </Link>
-          <Link to="/posts" className="hover:text-purple-500 ">
-            Post
-          </Link>
-          <Link to="/edit" className="hover:text-purple-500 ">
-            Edit
-          </Link>
-          <Link to="/room/joinroom" className="hover:text-purple-500">
-            Room
-          </Link>
-          <Link to="/" className="hover:text-purple-500">
-            Contact
-          </Link>
+        <div className="hidden md:flex justify-center space-x-10 w-1/3 px-4">
+          <Link to="/homepage" className="hover:text-purple-500">Home</Link>
+          <Link to="/posts" className="hover:text-purple-500">Post</Link>
+          <Link to="/edit" className="hover:text-purple-500">Edit</Link>
+          <Link to="/room/joinroom" className="hover:text-purple-500">Room</Link>
+          <Link to="/" className="hover:text-purple-500">Contact</Link>
         </div>
 
-        {/* Button Section */}
         {display && (
-          <button
-            className="bg-purple-500 text-white rounded-full px-4 py-2 font-bold hover:bg-purple-600 hidden md:block"
-            onClick={() => navigate(navigateUrl)}
-          >
-            {btnName || "Sign Up"}
-          </button>
+          <div className="w-1/3 flex justify-end">
+            {loadingUsr ? (
+              <div className="hidden md:flex items-center bg-purple-500 text-white rounded-full px-4 py-2">
+                <div className="w-4 h-4 border-4 border-t-transparent border-white rounded-full animate-spin mr-2"></div>
+                Loading...
+              </div>
+            ) : (
+              <button
+                className="bg-purple-500 text-white rounded-full px-4 py-2 font-bold hover:bg-purple-600 hidden md:block"
+                onClick={() => navigate(navigateUrl)}
+              >
+                {btnName || "Sign Up"}
+              </button>
+            )}
+          </div>
         )}
 
-        {/* Hamburger Menu for Small Screens */}
         <button
           className="md:hidden text-white focus:outline-none"
           onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+          aria-label="Toggle menu"
         >
-          {/* 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 12h16M4 18h16"
-            ></path>
+          <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 12h16M4 18h16"></path>
           </svg>
         </button>
       </nav>
 
-      {/* Sidebar for Small Screens */}
       {isSidebarOpen && (
-        <div
-          className="fixed inset-0 bg-black bg-opacity-50 z-50"
-          onClick={closeSidebar} // Close sidebar when clicking outside
-        >
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50" onClick={closeSidebar}>
           <div
             ref={sidebarRef}
             className="fixed top-0 left-0 w-64 h-full bg-[#1F2135] z-50 p-5"
-            onClick={(e) => e.stopPropagation()} // Prevent closing on inner click
+            onClick={(e) => e.stopPropagation()}
           >
-            <button
-              className="text-white mb-5 focus:outline-none"
-              onClick={closeSidebar} // Close sidebar with GSAP animation
-            >
-              {/* Cross 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="M6 18L18 6M6 6l12 12"
-                />
+            <button className="text-white mb-5 focus:outline-none" onClick={closeSidebar} aria-label="Close menu">
+              <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="M6 18L18 6M6 6l12 12" />
               </svg>
             </button>
             <nav className="space-y-4">
-              {/* Synchronizing Navigation Links */}
-              <Link
-                to="/homepage"
-                className="block hover:text-purple-500"
-                onClick={closeSidebar}
-              >
-                Home
-              </Link>
-              <Link
-                to="/posts"
-                className="block hover:text-purple-500"
-                onClick={closeSidebar}
-              >
-                Post
-              </Link>
-              <Link
-                to="/edit"
-                className="block hover:text-purple-500"
-                onClick={closeSidebar}
-              >
-                Edit
-              </Link>
-              <Link
-                to="/room/joinroom"
-                className="block hover:text-purple-500"
-                onClick={closeSidebar}
-              >
-                Room
-              </Link>
-              <Link
-                to="/"
-                className="block hover:text-purple-500"
-                onClick={closeSidebar}
-              >
-                Contact
-              </Link>
+              <Link to="/homepage" className="block hover:text-purple-500" onClick={closeSidebar}>Home</Link>
+              <Link to="/posts" className="block hover:text-purple-500" onClick={closeSidebar}>Post</Link>
+              <Link to="/edit" className="block hover:text-purple-500" onClick={closeSidebar}>Edit</Link>
+              <Link to="/room/joinroom" className="block hover:text-purple-500" onClick={closeSidebar}>Room</Link>
+              <Link to="/" className="block hover:text-purple-500" onClick={closeSidebar}>Contact</Link>
               {display && (
                 <button
                   className="bg-purple-500 text-white rounded-full px-4 py-2 font-bold hover:bg-purple-600"
diff --git a/frontend/src/components/homePage/HomePage.jsx b/frontend/src/components/homePage/HomePage.jsx
index 6e38c12..865097d 100644
--- a/frontend/src/components/homePage/HomePage.jsx
+++ b/frontend/src/components/homePage/HomePage.jsx
@@ -1,20 +1,21 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { gsap } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
-import { Helmet } from "react-helmet-async"; // Add this line
+import { Helmet } from "react-helmet-async"; 
 import image from "../../images/image7.png";
 import { FiUsers, FiShare2, FiMessageCircle, FiBell } from "react-icons/fi";
-import logo from "../../images/logo.png";
 import "../../index.css";
 import { useUser } from "../../hook/useUser";
-import { InfinitySpin } from "react-loader-spinner";
+import Navbar from "../MainNavbar";
 
 gsap.registerPlugin(ScrollTrigger);
 
 export const Header = () => {
   const navigate = useNavigate();
   const { loadingUser, userDetails } = useUser();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const sidebarRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     gsap.to(".first-page-image", {
@@ -51,14 +52,6 @@ export const Header = () => {
     });
   }, [loadingUser]);
 
-  if (loadingUser) {
-    return (
-      <div className="flex justify-center items-center h-screen">
-        <InfinitySpin color="#6366F1" />
-      </div>
-    );
-  }
-
   return (
     <div className="bg-[#1F2135]">
       <Helmet>
@@ -77,172 +70,99 @@ export const Header = () => {
             },
           })}
         </script>
-        {/* Open Graph Meta Tags */}
         <meta property="og:title" content="Capusify - Your Platform for XYZ" />
-        <meta
-          property="og:description"
-          content="Offering the best services in XYZ."
-        />
-        <meta
-          property="og:image"
-          content="https://capusify.site/og-image.jpg"
-        />
+        <meta property="og:description" content="Offering the best services in XYZ." />
+        <meta property="og:image" content="https://capusify.site/og-image.jpg" />
         <meta property="og:url" content="https://capusify.site" />
         <meta property="og:type" content="website" />
-
-        {/* Twitter Card Meta Tags */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:title" content="Capusify - Your Platform for XYZ" />
-        <meta
-          name="twitter:description"
-          content="Offering the best services in XYZ."
-        />
-        <meta
-          name="twitter:image"
-          content="https://capusify.site/og-image.jpg"
-        />
+        <meta name="twitter:description" content="Offering the best services in XYZ." />
+        <meta name="twitter:image" content="https://capusify.site/og-image.jpg" />
       </Helmet>
-
-      <nav className="flex justify-between items-center px-6 lg:px-32 py-5">
-        <div className="text-lg font-bold flex">
-          <img
-            src={logo}
-            alt="Campus Chatter Logo"
-            className="w-10 h-10 rounded-full mx-3"
-          />
-          <span className="pt-1">Campus Chatter</span>
-        </div>
-        <div className="hidden md:flex space-x-6">
-          <Link to="/homepage" className="hover:text-purple-500 ">
-            Home
-          </Link>
-          <Link to="/posts" className="hover:text-purple-500 ">
-            Post
-          </Link>
-          <Link to="/room/joinroom" className="hover:text-purple-500">
-            Room
-          </Link>
-          <Link to="/" className="hover:text-purple-500">
-            Contact
-          </Link>
+      {loadingUser ? <Navbar display={true} loadingUsr={true} /> : <Navbar display={true} loadingUsr={false} btnName="Login" />}
+      
+      <div className="h-screen flex flex-col lg:flex-row items-center justify-center px-6 lg:px-32 space-y-10 lg:space-y-0 lg:space-x-10">
+  <div className="w-full lg:w-1/2 text-center lg:text-left">
+    <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
+      Grow your network, <br />
+      all are connected in{" "}
+      <span className="text-yellow-500 underline">Campus Chatter</span>
+    </h1>
+    <p className="mt-8 text-white">
+      Our platform offers a variety of features to help you stay connected, including instant messaging, video chat, and news feeds.
+    </p>
+    
+    {loadingUser ? (
+      <div className="flex justify-center mt-10 lg:justify-start">
+        <div className="flex bg-orange-500 text-white py-3 px-6 rounded-full">
+          <div className="w-4 h-4 border-4 border-t-transparent mt-1 border-white rounded-full animate-spin mr-2"></div>
+          Loading...
         </div>
+      </div>
+    ) : (
+      <>
         {!userDetails && (
           <button
-            className="bg-purple-500 text-white rounded-full px-4 py-2 font-bold hover:bg-purple-600"
             onClick={() => {
               navigate("/signup");
             }}
+            className="mt-10 bg-orange-500 text-black py-3 px-6 rounded-full font-semibold hover:bg-orange-600"
           >
-            Sign up
+            Create Account
           </button>
         )}
         {userDetails && (
-          <button
-            className="bg-purple-500 text-white rounded-full px-4 py-2 font-bold hover:bg-purple-600"
-            onClick={() => {
-              navigate("/logout");
-            }}
-          >
-            Logout
-          </button>
-        )}
-      </nav>
-
-      <div className="h-screen flex flex-col lg:flex-row items-center justify-center px-6 lg:px-32 space-y-10 lg:space-y-0 lg:space-x-10">
-        <div className="w-full lg:w-1/2 text-center lg:text-left">
-          <h1 className="text-4xl lg:text-6xl font-bold leading-tight">
-            Grow your network, <br />
-            all are connected in{" "}
-            <span className="text-yellow-500 underline">Campus Chatter</span>
-          </h1>
-          <p className="mt-8 text-white">
-            Our platform offers a variety of features to help you stay
-            connected, including instant messaging, video chat, and news feeds.
-          </p>
-          {!userDetails && (
-            <button
-              onClick={() => {
-                navigate("/signup");
-              }}
-              className="mt-10 bg-orange-500 text-black py-3 px-6 rounded-full font-semibold hover:bg-orange-600"
-            >
-              Create Account
-            </button>
-          )}
-          {userDetails && (
+          <div className="flex justify-center lg:justify-start mt-10">
             <button
               onClick={() => {
                 navigate("/posts");
               }}
-              className="mt-10 bg-orange-500 text-black py-3 px-6 rounded-full font-semibold hover:bg-orange-600"
+              className="bg-orange-500 text-black py-3 px-6 rounded-full font-semibold hover:bg-orange-600"
             >
               Get Started
             </button>
-          )}
-        </div>
+          </div>
+        )}
+      </>
+    )}
+  </div>
         <div className="w-full lg:w-1/2 ">
           <img src={image} alt="hero" className="w-full first-page-image" />
         </div>
       </div>
 
       <section className="h-full md:h-screen bg-[#E3E7EB] py-20 px-10 md:px-20 relative">
-                <div className="flex flex-col md:flex-row items-center h-full">
-                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8 w-full md:w-1/2 h-full">
-                        
-                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
-                            <div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
-                                {<FiUsers size={24} className="text-yellow-500" />}
-                            </div>
-                            <div className="flex-grow"></div> 
-                            <div className="flex justify-between items-center">
-                                <h3 className="text-lg font-semibold text-black ">{"Engage In Community"}</h3>
-                                <span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
-                            </div>
-                        </div>
-                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
-                            <div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
-                                {<FiShare2 size={24} className="text-red-400" />}
-                            </div>
-                            <div className="flex-grow"></div> 
-                            <div className="flex justify-between items-center">
-                                <h3 className="text-lg font-semibold text-black ">{"Discover New Connections"}</h3>
-                                <span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
-                            </div>
-                        </div>
-                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
-                            <div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
-                                {<FiMessageCircle size={24} className="text-purple-500"  />}
-                            </div>
-                            <div className="flex-grow"></div> 
-                            <div className="flex justify-between items-center">
-                                <h3 className="text-lg font-semibold text-black ">{"Share Ideas And Creativity"}</h3>
-                                <span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
-                            </div>
-                        </div>
-                        <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
-                            <div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
-                                {<FiBell size={24} className="text-blue-500" />}
-                            </div>
-                            <div className="flex-grow"></div> 
-                            <div className="flex justify-between items-center">
-                                <h3 className="text-lg font-semibold text-black ">{"Access Information And News"}</h3>
-                                <span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
-                            </div>
-                        </div>
-                        
-                        
-                    </div>
-                    <div className="md:pl-16 md:w-1/2 mt-10 md:mt-0 text-center md:text-left">
-                        <h2 className="text-3xl md:text-6xl font-bold text-gray-800 mb-4">Why <br/><span className='underline'>Campus Chatter?</span></h2>
-                        <p className="text-lg text-gray-600 mb-8">
-                            Campus Chatter can provide users with a wide range of benefits, from staying connected with loved ones to discovering new connections and engaging in creative expression and community building.
-                        </p>
-                        <button className="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
-                            Learn more
-                        </button>
-                    </div>
+        <div className="flex flex-col md:flex-row items-center h-full">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 md:gap-8 w-full md:w-1/2 h-full">
+            {/* Feature Cards */}
+            {["Engage In Community", "Discover New Connections", "Share Ideas And Creativity", "Access Information And News"].map((title, index) => (
+              <div key={index} className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 flex flex-col justify-between h-full feature-card">
+                <div className="flex items-center justify-center w-20 h-20 bg-gray-100 rounded-full mb-4">
+                  {index === 0 && <FiUsers size={24} className="text-yellow-500" />}
+                  {index === 1 && <FiShare2 size={24} className="text-red-400" />}
+                  {index === 2 && <FiMessageCircle size={24} className="text-purple-500" />}
+                  {index === 3 && <FiBell size={24} className="text-blue-500" />}
                 </div>
-            </section>
+                <div className="flex-grow"></div>
+                <div className="flex justify-between items-center">
+                  <h3 className="text-lg font-semibold text-black">{title}</h3>
+                  <span className="text-blue-500 font-bold text-xl cursor-pointer">→</span>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="md:pl-16 md:w-1/2 mt-10 md:mt-0 text-center md:text-left">
+            <h2 className="text-3xl md:text-6xl font-bold text-gray-800 mb-4">Why <br/><span className='underline'>Campus Chatter?</span></h2>
+            <p className="text-lg text-gray-600 mb-8">
+              Campus Chatter can provide users with a wide range of benefits, from staying connected with loved ones to discovering new connections and engaging in creative expression and community building.
+            </p>
+            <button className="bg-purple-600 text-white px-6 py-3 rounded-lg hover:bg-purple-700 transition-colors">
+              Learn more
+            </button>
+          </div>
+        </div>
+      </section>
     </div>
   );
 };