diff --git a/src/app/artistlogin/page.tsx b/src/app/artistlogin/page.tsx
index 707006e6..c531b8fc 100644
--- a/src/app/artistlogin/page.tsx
+++ b/src/app/artistlogin/page.tsx
@@ -52,6 +52,7 @@ export default function Login() {
         // Authenticate using email and password
         await signInWithEmailAndPassword(auth, email, password);
         // Redirect to portfolio page after successful login
+        localStorage.setItem('role', 'artist');
         router.push('/portfolio');
       } catch (error) {
         // Display error message if authentication fails
diff --git a/src/app/barber/page.tsx b/src/app/barber/page.tsx
new file mode 100644
index 00000000..0599734d
--- /dev/null
+++ b/src/app/barber/page.tsx
@@ -0,0 +1,31 @@
+'use client';
+import React from 'react';
+import '../categories.css';
+import Card from '../components/ui/card';
+
+export default function BarberShops() {
+  const businesses: any[] = [];
+
+  return (
+    <div className="container">
+      <h1 className="title">Barber Shops</h1>
+      <div className="list">
+        {businesses.length > 0 ? (
+          businesses.map((business, index) => (
+            <Card
+              key={index}
+              businessName={business.businessName}
+              address={business.address}
+              images={business.images}
+              about={business.about}
+              services={business.services}
+              socialLinks={business.socialLinks}
+            />
+          ))
+        ) : (
+          <p>No businesses available. Please check back later!</p>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/clients/page.tsx b/src/app/clients/page.tsx
index 471d163b..c63e4d94 100644
--- a/src/app/clients/page.tsx
+++ b/src/app/clients/page.tsx
@@ -4,7 +4,7 @@
 
 import { useRouter } from 'next/navigation';
 import React from 'react';
-import Nav_bar from '../components/navbar_artist';
+import Navbar from '../components/navigationbar';
 
 const Clients: React.FC = () => {
     const router = useRouter();
@@ -19,7 +19,7 @@ const Clients: React.FC = () => {
 
     return (
         <div className="min-h-screen bg-gray">
-            <Nav_bar />
+            <Navbar />
             <header className="text-black py-7 text-left mt-19">
                 <h1 className="text-3xl text-center font-bold tracking-wide text-teal-500">Daves Barbershop</h1>
                 <h2 className="text-4xl text-center tracking-wide mt-2">Upcoming Bookings</h2>
diff --git a/src/app/components/navbar_artist.tsx b/src/app/components/navbar_artist.tsx
index 0c308bd8..c3ce30bd 100644
--- a/src/app/components/navbar_artist.tsx
+++ b/src/app/components/navbar_artist.tsx
@@ -1,27 +1,59 @@
-'use client'
-
-import React from 'react';
-import './navbar_artist.css';
-import { useRouter } from 'next/navigation';
-
-export default function Nav_bar() {
-  const router = useRouter();
-
-  const handlelogout = () => {
-    localStorage.removeItem('authToken');
-    alert('Logging out');
-    router.push('/');
-  }
-
-  return (
-    <nav className="navigation">
-      <ul>
-        <li><button onClick={() => router.push('/homepage')}>Home</button></li>
-        <li><button onClick={() => router.push('/portfolio')}>Portfolio</button></li>
-        <li><button onClick={() => router.push('/clients')}>Clients</button></li>
-        <li><button onClick={() => router.push('/helppage')}>Help</button></li>
-        <li><button onClick={handlelogout}>Log Out</button></li>
-      </ul>
-    </nav>
-  );
-}
\ No newline at end of file
+//'use client'
+
+//import React, { useState, useEffect } from 'react';
+//import './navbar_artist.css';
+//import { useRouter } from 'next/navigation';
+//import { auth } from '../firebase'; 
+
+//export default function NavbarArtist() {
+//  const router = useRouter();
+//  const [user, setUser] = useState(null); 
+//  const [role, setRole] = useState(''); 
+//  const [isLoading, setIsLoading] = useState(true); 
+
+//  useEffect(() => {
+//    const userRole = localStorage.getItem('role');
+//    setRole(userRole || '');
+
+//    const unsubscribe = auth.onAuthStateChanged((currentUser) => {
+//      setUser(currentUser);
+//      setIsLoading(false);
+//    });
+
+//    return () => unsubscribe();
+//  }, []);
+
+//  const handleLogout = () => {
+//    localStorage.removeItem('role'); 
+//    auth.signOut(); 
+//    alert('Logging out');
+//    router.push('/'); 
+//  };
+
+//  if (isLoading) {
+//    return null; 
+//  }
+
+//  if (role !== 'artist') {
+//    return null;
+//  }
+
+//  return (
+//    <nav className="navigation">
+//      <ul>
+//        <li><button onClick={() => router.push('/homepage')}>Home</button></li>
+//        <li><button onClick={() => router.push('/portfolio')}>Portfolio</button></li>
+//        <li><button onClick={() => router.push('/clients')}>Clients</button></li>
+//        <li><button onClick={() => router.push('/helppage')}>Help</button></li>
+//        {user ? (
+//          <>
+//            <li>Welcome, {user.displayName || user.email}</li>
+//            <li><button onClick={handleLogout}>Log Out</button></li>
+//          </>
+//        ) : (
+//          <li><button onClick={() => router.push('/artistlogin')}>Log In</button></li>
+//        )}
+//      </ul>
+//    </nav>
+//  );
+//}
\ No newline at end of file
diff --git a/src/app/components/navigationbar.css b/src/app/components/navigationbar.css
index fe9b7607..b00c5b51 100644
--- a/src/app/components/navigationbar.css
+++ b/src/app/components/navigationbar.css
@@ -37,6 +37,6 @@
   }
   
   .navigation button:hover {
-    color: #f3cf9a;
+    color: #a7a39e;
   }
   
\ No newline at end of file
diff --git a/src/app/components/navigationbar.tsx b/src/app/components/navigationbar.tsx
index dc279218..04b0e44c 100644
--- a/src/app/components/navigationbar.tsx
+++ b/src/app/components/navigationbar.tsx
@@ -1,27 +1,93 @@
-'use client'
+'use client';
 
-import React from 'react';
-import './navigationbar.css';
+import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import { auth } from '../firebase';
+import './navigationbar.css';
 
 export default function Navbar() {
   const router = useRouter();
+  const [user, setUser] = useState<any>(null);
+  const [role, setRole] = useState<string>(''); 
+  const [isLoading, setIsLoading] = useState(true);
+  const [isAuthChecked, setIsAuthChecked] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const userRole = localStorage.getItem('role');
+      setRole(userRole || '');
+    }
+    const unsubscribe = auth.onAuthStateChanged((currentUser) => {
+      setUser(currentUser);
+      setIsLoading(false); 
+      setIsAuthChecked(true); 
+    });
 
-  const handlelogout = () => {
-    localStorage.removeItem('authToken');
+    return () => unsubscribe();
+  }, []);
+  const handleLogout = () => {
+    localStorage.removeItem('role');
+    auth.signOut();
     alert('Logging out');
     router.push('/');
+  };
+  if (isLoading || !isAuthChecked) {
+    return null; 
   }
 
   return (
     <nav className="navigation">
       <ul>
-        <li><button onClick={() => router.push('/homepage')}>Home</button></li>
-        <li><button onClick={() => router.push('/appointments')}>Appointments</button></li>
-        <li><button onClick={() => router.push('/userprofile')}>Profile</button></li>
-        <li><button onClick={() => router.push('/helppage')}>Help</button></li>
-        <li><button onClick={handlelogout}>Log Out</button></li>
+        <li>
+          <button onClick={() => router.push('/homepage')}>Home</button>
+        </li>
+        
+        {role === 'artist' && (
+          <>
+            <li>
+              <button onClick={() => router.push('/portfolio')}>Portfolio</button>
+            </li>
+            <li>
+              <button onClick={() => router.push('/clients')}>Clients</button>
+            </li>
+          </>
+        )}
+
+        {role === 'customer' && (
+          <>
+            <li>
+              <button onClick={() => router.push('/appointments')}>Appointments</button>
+            </li>
+            <li>
+              <button onClick={() => router.push('/userprofile')}>Profile</button>
+            </li>
+          </>
+        )}
+        
+        <li>
+          <button onClick={() => router.push('/helppage')}>Help</button>
+        </li>
+
+        {user ? (
+          <>
+            <li>
+              <button onClick={handleLogout}>Log Out</button>
+            </li>
+          </>
+        ) : (
+          <li>
+            <button
+              onClick={() => {
+                role === 'artist'
+                  ? router.push('/artistlogin')
+                  : router.push('/customerlogin');
+              }}
+            >
+              Log In
+            </button>
+          </li>
+        )}
       </ul>
     </nav>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/customerlogin/page.tsx b/src/app/customerlogin/page.tsx
index 44213670..3174b1ec 100644
--- a/src/app/customerlogin/page.tsx
+++ b/src/app/customerlogin/page.tsx
@@ -53,6 +53,7 @@ export default function CustomerLogin() {
         // Authenticate using email and password
         await signInWithEmailAndPassword(auth, email, password);
         // Redirect to user profile page after successful login
+        localStorage.setItem('role', 'customer');
         router.push('/userprofile');
       } catch (error) {
         // Display error message if authentication fails
diff --git a/src/app/hair/page.tsx b/src/app/hair/page.tsx
new file mode 100644
index 00000000..c2588665
--- /dev/null
+++ b/src/app/hair/page.tsx
@@ -0,0 +1,31 @@
+'use client';
+import React from 'react';
+import '../categories.css';
+import Card from '../components/ui/card';
+
+export default function HairStylists() {
+  const businesses: any[] = [];
+
+  return (
+    <div className="container">
+      <h1 className="title">Hair Stylists</h1>
+      <div className="list">
+        {businesses.length > 0 ? (
+          businesses.map((business, index) => (
+            <Card
+              key={index}
+              businessName={business.businessName}
+              address={business.address}
+              images={business.images}
+              about={business.about}
+              services={business.services}
+              socialLinks={business.socialLinks}
+            />
+          ))
+        ) : (
+          <p>No businesses available. Please check back later!</p>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/app/homepage/page.tsx b/src/app/homepage/page.tsx
index ae486ddb..82b6a763 100644
--- a/src/app/homepage/page.tsx
+++ b/src/app/homepage/page.tsx
@@ -164,7 +164,9 @@ export default function Home() {
                                 <Image src={hairLogo} alt="Hair Stylists" width={40} height={40} />
                             </div>
                             <div className="text-container mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                                <a href="/hair" className="text-lg hover:text-teal-400">Hair Stylists</a>
+                            <button onClick={() => router.push('/hair')} className="text-lg hover:text-teal-400">
+                                 Hair Stylists
+                                 </button>
                             </div>
                         </li>
                         <li className="sidebar-item mb-4 flex flex-col items-center group">
@@ -172,7 +174,9 @@ export default function Home() {
                                 <Image src={tattooLogo} alt="Tattoo Artist" width={40} height={40} />
                             </div>
                             <div className="text-container mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                                <a href="/tattoo" className="text-lg hover:text-teal-400">Tattoo Artist</a>
+                            <button onClick={() => router.push('/tattoo')} className="text-lg hover:text-teal-400">
+                                 Tattoo Artists
+                                 </button>
                             </div>
                         </li>
                         <li className="sidebar-item mb-4 flex flex-col items-center group">
@@ -180,7 +184,9 @@ export default function Home() {
                                 <Image src={barberLogo} alt="Barber Shops" width={40} height={40} />
                             </div>
                             <div className="text-container mt-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                                <a href="/barber" className="text-lg hover:text-teal-400">Barber Shops</a>
+                            <button onClick={() => router.push('/barber')} className="text-lg hover:text-teal-400">
+                                 Barber Shops
+                                 </button>
                             </div>
                         </li>
                         <li className="sidebar-item mb-4 flex flex-col items-center group">
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
index 99f3b4c8..2317d602 100644
--- a/src/app/portfolio/page.tsx
+++ b/src/app/portfolio/page.tsx
@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import './portfolio.css';
-import Nav_bar from '../components/navbar_artist';
+import Navbar from '../components/navigationbar';
 import SocialMediaInput from '../components/socialmediainput'; // Default import (no curly braces)
 
 export default function Portfolio() {
@@ -133,7 +133,7 @@ export default function Portfolio() {
 
   return (
     <div className="container">
-      <Nav_bar />
+      <Navbar />
       <div className="business-name">
         <input
           type="text"
diff --git a/src/app/tattoo/page.tsx b/src/app/tattoo/page.tsx
new file mode 100644
index 00000000..433e0903
--- /dev/null
+++ b/src/app/tattoo/page.tsx
@@ -0,0 +1,31 @@
+'use client';
+import React from 'react';
+import '../categories.css';
+import Card from '../components/ui/card';
+
+export default function TattooPage() {
+  const businesses: any[] = [];
+
+  return (
+    <div className="container">
+      <h1 className="title">Tattoo Artists</h1>
+      <div className="list">
+        {businesses.length > 0 ? (
+          businesses.map((business, index) => (
+            <Card
+              key={index}
+              businessName={business.businessName}
+              address={business.address}
+              images={business.images}
+              about={business.about}
+              services={business.services}
+              socialLinks={business.socialLinks}
+            />
+          ))
+        ) : (
+          <p>No businesses available. Please check back later!</p>
+        )}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file