diff --git a/apps/web/components/navigation.tsx b/apps/web/components/navigation.tsx
index 263b04fcd..1f3d54c65 100644
--- a/apps/web/components/navigation.tsx
+++ b/apps/web/components/navigation.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useEffect } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { Disclosure, Menu, Transition } from "@headlessui/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -18,13 +18,6 @@ import {
 } from "@heroicons/react/24/outline";
 import Logo from "./logo";
 
-let user: {
-  id?: number | undefined;
-  name?: string | null;
-  email?: string | null;
-  image?: string | null;
-};
-
 const navigation = [
   {
     name: "Dashboard",
@@ -77,12 +70,20 @@ function classNames(...classes: any) {
   return classes.filter(Boolean).join(" ");
 }
 
+type UserType = {
+  id?: number | undefined;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+};
+
 export default function TopNavigation() {
+  const [user, setUser] = useState<UserType>();
   const session = useSession();
 
   useEffect(() => {
-    user = { ...session.data?.user };
-  });
+    setUser(session.data?.user);
+  }, [session]);
 
   const router = useRouter();
   navigation.forEach((element) => {