diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 38fe4626a..3c252bb27 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,8 @@ import { Inter } from "next/font/google";
 
 import "./globals.css";
 
+import { SessionProvider } from "next-auth/react";
+
 import Providers from "~/components/providers";
 import { Toaster } from "~/components/ui/toaster";
 
@@ -22,7 +24,7 @@ export default function RootLayout({
       <body className={inter.className}>
         <div className="mx-auto w-full">
           <Providers />
-          {children}
+          <SessionProvider>{children}</SessionProvider>
           <Toaster />
         </div>
       </body>
diff --git a/src/components/layouts/navbar/index.tsx b/src/components/layouts/navbar/index.tsx
index f9fbafc49..e1f51c2d0 100644
--- a/src/components/layouts/navbar/index.tsx
+++ b/src/components/layouts/navbar/index.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 
@@ -62,7 +63,6 @@ const Navbar = () => {
             <UserCard image={session?.user?.image as string} />
           </div>
         ) : (
-        {!user.email && (
           <div className="w-fullx hidden items-center justify-end gap-x-4 justify-self-end md:flex lg:gap-x-8">
             <Link
               href="/login"
@@ -78,7 +78,6 @@ const Navbar = () => {
             </Link>
           </div>
         )}
-        {user.email && <UserCard email={user.email} />}
       </div>
     </nav>
   );
