diff --git a/src/components/navigationBar/profileBar.tsx b/src/components/navigationBar/AuthenticatedComponents.tsx
similarity index 64%
rename from src/components/navigationBar/profileBar.tsx
rename to src/components/navigationBar/AuthenticatedComponents.tsx
index c04e2db..4468ac6 100644
--- a/src/components/navigationBar/profileBar.tsx
+++ b/src/components/navigationBar/AuthenticatedComponents.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import {
@@ -11,29 +10,16 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Skeleton } from "@/components/ui/skeleton";
 import { Bell, Heart, Wallet } from "lucide-react";
 import { LogoutButton } from "@/components/auth/logoutButton";
-import useSession from "@/lib/supabase/useSession";
 import { useUserRole } from "@/hooks/useUserRole";
 
-const UnAuthenticatedComponents = () => {
-  return (
-    <div className="flex gap-2 pl-2">
-      <Link href="/auth">
-        <Button variant="secondary" className="border-2 border-border">
-          Login
-        </Button>
-      </Link>
-      <Link href="/auth/signup">
-        <Button>Sign up</Button>
-      </Link>
-    </div>
-  );
-};
+interface AuthenticatedComponentsProps {
+  uid: string;
+}
 
-const AuthenticatedComponents = ({ uid }: { uid: string }) => {
-  let notifications = 100;
+export const AuthenticatedComponents = ({ uid }: AuthenticatedComponentsProps) => {
+  const notifications = 100;
   const displayValue = notifications >= 100 ? "..." : notifications;
   const { data } = useUserRole();
 
@@ -68,7 +54,7 @@ const AuthenticatedComponents = ({ uid }: { uid: string }) => {
           <DropdownMenuSeparator />
           <DropdownMenuItem>Settings</DropdownMenuItem>
           <DropdownMenuItem>Support</DropdownMenuItem>
-          {data != null && data != undefined && data.role === "admin" && (
+          {data?.role === "admin" && (
             <DropdownMenuItem>
               <Link href="/admin">Admin</Link>
             </DropdownMenuItem>
@@ -82,31 +68,3 @@ const AuthenticatedComponents = ({ uid }: { uid: string }) => {
     </div>
   );
 };
-
-export function ProfileBar() {
-  const { session } = useSession();
-  const user = session?.user;
-  const [sessionLoaded, setSessionLoaded] = useState(false);
-
-  useEffect(() => {
-    if (!session) {
-      setSessionLoaded(true);
-    }
-  }, [session]);
-
-  return (
-    <>
-      {sessionLoaded ? (
-        user ? (
-          <AuthenticatedComponents uid={user.id} />
-        ) : (
-          <UnAuthenticatedComponents />
-        )
-      ) : (
-        <div>
-          <Skeleton className="rounded-lg h-full w-[160px]" />
-        </div>
-      )}
-    </>
-  );
-}
diff --git a/src/components/navigationBar/UnAuthenticatedComponents.tsx b/src/components/navigationBar/UnAuthenticatedComponents.tsx
new file mode 100644
index 0000000..b2a8f60
--- /dev/null
+++ b/src/components/navigationBar/UnAuthenticatedComponents.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+
+export const UnAuthenticatedComponents = () => {
+  return (
+    <div className="flex gap-2 pl-2">
+      <Link href="/auth">
+        <Button variant="secondary" className="border-2 border-border">
+          Login
+        </Button>
+      </Link>
+      <Link href="/auth/signup">
+        <Button>Sign up</Button>
+      </Link>
+    </div>
+  );
+};
diff --git a/src/components/navigationBar/nav.tsx b/src/components/navigationBar/nav.tsx
index c51dbc8..59869fd 100644
--- a/src/components/navigationBar/nav.tsx
+++ b/src/components/navigationBar/nav.tsx
@@ -14,7 +14,10 @@ import {
   NavigationMenuTrigger,
 } from "@/components/ui/navigation-menu";
 import { SearchBar } from "./serchBar";
-import { ProfileBar } from "./profileBar";
+import { AuthenticatedComponents } from "./AuthenticatedComponents";
+import { UnAuthenticatedComponents } from "./UnAuthenticatedComponents";
+
+import { getUserId } from "@/lib/supabase/actions/getUserId";
 
 const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
   ({ className, title, children, ...props }, ref) => {
@@ -40,7 +43,9 @@ const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWit
 );
 ListItem.displayName = "ListItem";
 
-export function NavigationBar() {
+export async function NavigationBar() {
+  const userId = await getUserId();
+
   const businessComponents = [
     {
       title: "Business",
@@ -112,7 +117,7 @@ export function NavigationBar() {
             <div className="flex gap-2 pl-2">
               <ThemeToggle />
               <Separator orientation="vertical" className="mx-3" />
-              <ProfileBar />
+              {userId ? <AuthenticatedComponents uid={userId} /> : <UnAuthenticatedComponents />}
             </div>
           </div>
         </div>
diff --git a/src/lib/supabase/actions/getUserId.ts b/src/lib/supabase/actions/getUserId.ts
new file mode 100644
index 0000000..3fa9e68
--- /dev/null
+++ b/src/lib/supabase/actions/getUserId.ts
@@ -0,0 +1,12 @@
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+
+export async function getUserId() {
+  const supabase = createSupabaseClient();
+  const { data, error } = await supabase.auth.getUser();
+
+  if (error || !data?.user) {
+    return null;
+  }
+
+  return data.user.id;
+}