diff --git a/apps/server/src/users/users.entity.ts b/apps/server/src/users/users.entity.ts
index 0fce1ddf..4e54e62b 100644
--- a/apps/server/src/users/users.entity.ts
+++ b/apps/server/src/users/users.entity.ts
@@ -1,6 +1,6 @@
 // user.entity.ts
 import { Entity, PrimaryGeneratedColumn, Column } from "typeorm";
-// TODO: 改成
+
 @Entity()
 class User {
   @PrimaryGeneratedColumn()
@@ -9,7 +9,7 @@ class User {
   @Column()
   username: string;
 
-  @Column()
+  @Column({ nullable: true })
   email: string;
 
   @Column({ nullable: true })
diff --git a/apps/web/app/login/components/SigningButton.tsx b/apps/web/app/login/components/SigningButton.tsx
deleted file mode 100644
index 8f88e85c..00000000
--- a/apps/web/app/login/components/SigningButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Button } from "@/components/ui/button";
-import { useSession } from "next-auth/react";
-import React from "react";
-import { signOut, signIn } from "next-auth/react";
-
-export const SigningButton = () => {
-  const { data: session, status } = useSession();
-  if (session?.user) {
-    return (
-      <div>
-        <p>{session.user.name}</p>
-        <Button variant="outline" onClick={() => signOut()}>
-          Sign Out
-        </Button>
-      </div>
-    );
-  }
-  return (
-    <Button variant="outline" onClick={() => signIn()}>
-      Login
-    </Button>
-  );
-};
diff --git a/apps/web/app/signup/components/user-auth-form.tsx b/apps/web/app/signup/components/user-auth-form.tsx
index 2f8bf795..04d67ca7 100644
--- a/apps/web/app/signup/components/user-auth-form.tsx
+++ b/apps/web/app/signup/components/user-auth-form.tsx
@@ -7,7 +7,7 @@ import { Icons } from "@/components/icons";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { login } from "../api/auth";
+import { login, signUp } from "../api/auth";
 
 interface UserAuthFormProps extends React.HTMLAttributes<HTMLDivElement> {
   type: "signIn" | "signUp";
@@ -22,9 +22,15 @@ export function UserAuthForm({ className, type, ...props }: UserAuthFormProps) {
     setIsLoading(true);
 
     try {
-      const data = await login(userName, password);
-      console.log(data);
-      window.location.href = "/";
+      if (type === "signUp") {
+        const data = await signUp(userName, password);
+        console.log(data);
+        window.location.href = "/";
+      } else {
+        const data = await login(userName, password);
+        console.log(data);
+        window.location.href = "/";
+      }
     } catch (error) {
       console.log(error);
     }
diff --git a/apps/web/components/login-button.tsx b/apps/web/components/login-button.tsx
deleted file mode 100644
index d48687f4..00000000
--- a/apps/web/components/login-button.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-"use client";
-import { Button } from "@/components/ui/button";
-import { useSession } from "next-auth/react";
-import React from "react";
-import Link from "next/link";
-import { UserNav } from "./user-nav";
-import { User } from "next-auth";
-
-export const SigningButton = () => {
-  const { data: session, status } = useSession();
-  if (status === "loading") return null;
-
-  if (session?.user) {
-    return <UserNav user={session?.user as User}></UserNav>;
-  }
-  return (
-    <Link href="/login">
-      <Button variant="outline">Login</Button>
-    </Link>
-  );
-};
diff --git a/apps/web/components/sign-button.tsx b/apps/web/components/sign-button.tsx
new file mode 100644
index 00000000..fc745db3
--- /dev/null
+++ b/apps/web/components/sign-button.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export const SignButton = async () => {
+  const pathname = usePathname();
+
+  if (pathname === "/login") {
+    return (
+      <Link href="/signup">
+        <Button variant="outline">Sign Up</Button>
+      </Link>
+    );
+  } else {
+    return (
+      <Link href="/login">
+        <Button variant="outline">Login</Button>
+      </Link>
+    );
+  }
+};
diff --git a/apps/web/components/site-header.tsx b/apps/web/components/site-header.tsx
index e8ee7088..5b9dc3d7 100644
--- a/apps/web/components/site-header.tsx
+++ b/apps/web/components/site-header.tsx
@@ -1,15 +1,12 @@
-'use client';
 import Link from "next/link";
 
 import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/utils";
-import { Button, buttonVariants } from "@/components/ui/button";
-// import { CommandMenu } from "@/components/command-menu"
+import { buttonVariants } from "@/components/ui/button";
 import { Icons } from "@/components/icons";
 import { MainNav } from "@/components/main-nav";
-// import { MobileNav } from "@/components/mobile-nav"
 import { ModeToggle } from "@/components/mode-toggle";
-import { SigningButton } from "./login-button";
+import { UserSession } from "./user-session";
 
 export function SiteHeader() {
   return (
@@ -61,7 +58,7 @@ export function SiteHeader() {
             <ModeToggle />
             {/* TODO: when login show sign out button and username */}
             {/* <Link href="/login"> */}
-            <SigningButton />
+            <UserSession />
             {/* </Link> */}
           </nav>
         </div>
diff --git a/apps/web/components/user-nav.tsx b/apps/web/components/user-nav.tsx
index c49c6caa..7b6bafaf 100644
--- a/apps/web/components/user-nav.tsx
+++ b/apps/web/components/user-nav.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { Avatar, AvatarFallback, AvatarImage } from "components/ui/avatar";
 import { Button } from "components/ui/button";
 import {
@@ -60,6 +61,7 @@ export function UserNav({ user }: { user: User }) {
         <DropdownMenuItem
           onClick={() => {
             signOut({ redirect: false }).then(() => {
+              router.refresh()
               router.push("/login");
             });
           }}
diff --git a/apps/web/components/user-session.tsx b/apps/web/components/user-session.tsx
new file mode 100644
index 00000000..b5e8d41c
--- /dev/null
+++ b/apps/web/components/user-session.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { UserNav } from "./user-nav";
+import { User, getServerSession } from "next-auth";
+import { SignButton } from "./sign-button";
+import { authOptions } from "@/app/api/auth/[...nextauth]/route";
+
+export const UserSession = async () => {
+  const session = await getServerSession(authOptions);
+
+  console.debug("UserSession session", session);
+
+  if (session?.user) {
+    return <UserNav user={session?.user as User}></UserNav>;
+  }
+  return <SignButton />;
+};