diff --git a/apps/web/app/profile/page.tsx b/apps/web/app/profile/page.tsx
index 9396f750..ba296e12 100644
--- a/apps/web/app/profile/page.tsx
+++ b/apps/web/app/profile/page.tsx
@@ -4,6 +4,7 @@ import { authOptions } from "../../lib/auth";
 import { redirect } from "next/navigation";
 import { UserRound } from "lucide-react";
 import UserDetailForm from "../../components/UserDetailForm";
+import { getUserDetail } from "../../components/utils";
 
 export default async function Profile() {
   const session = await getServerSession(authOptions);
@@ -11,6 +12,17 @@ export default async function Profile() {
   if (!session || !session?.user) {
     redirect("/auth");
   }
+
+  const user = await getUserDetail(session?.user?.id)
+
+  if (!user) {
+    return (
+      <div>
+        <p>User not found. Please contact support or try again later.</p>
+      </div>
+    )
+  }
+
   return (
     <div>
       <header className="border-b-2 p-3">
@@ -24,7 +36,7 @@ export default async function Profile() {
       </header>
 
       <main className="p-3">
-        <UserDetailForm user={session?.user} />
+        <UserDetailForm user={user} />
       </main>
     </div>
   );
diff --git a/apps/web/components/EditUserName.tsx b/apps/web/components/EditUserName.tsx
new file mode 100644
index 00000000..0036e3ca
--- /dev/null
+++ b/apps/web/components/EditUserName.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { CheckIcon, Cross1Icon, Pencil1Icon } from '@radix-ui/react-icons'
+import { Button, Input, Label, useToast } from '@repo/ui'
+import React, { FormEvent, useState } from 'react'
+import { updateUserName } from './utils'
+import { useRouter } from 'next/navigation'
+
+export const EditUserName = ({ userName, userId }: { userName: string, userId: string }) => {
+    const router = useRouter();
+    const {toast} = useToast();
+    const [isDisable, setIsDisable] = useState<boolean>(true);
+    const [nameInput, setNameInput] = useState<string>('');
+    const clickHandler = (e: FormEvent) => {
+        e.preventDefault();
+        setIsDisable(!isDisable)
+    }
+    const updateHandler = async(e: FormEvent)=>{
+        e.preventDefault();
+        try {
+            const res = await updateUserName(userId, nameInput);
+            if(res.id){
+                toast({
+                    description: 'Your name has been updated'
+                })
+            }
+            router.refresh();
+        } catch (error) {
+            toast({
+                description: 'Failed to update name, try again'
+            })
+        }
+        setIsDisable(!isDisable)
+    }
+
+    return (
+        <>
+            <div>
+                <div className="flex gap-1 items-center">
+                    <Label className="">Your name</Label>
+                    {isDisable ? (<Button variant='ghost' onClick={clickHandler}>
+                        <Pencil1Icon />
+                    </Button>) : (
+                        <div className="flex gap-1 items-center">
+                            <Button variant='ghost' onClick={updateHandler}>
+                                <CheckIcon />
+                            </Button>
+                            <Button variant='ghost' onClick={clickHandler}>
+                                <Cross1Icon />
+                            </Button>
+                        </div>
+                    )}
+                </div>
+                <Input disabled={isDisable} placeholder="Enter your name" value={isDisable ? userName : nameInput} className="p-2 mt-2" onChange={(e)=>{setNameInput(e.target.value)}} />
+            </div>
+        </>
+    )
+}
diff --git a/apps/web/components/UserDetailForm.tsx b/apps/web/components/UserDetailForm.tsx
index aad4a2a9..fa74bf20 100644
--- a/apps/web/components/UserDetailForm.tsx
+++ b/apps/web/components/UserDetailForm.tsx
@@ -2,6 +2,7 @@ import { Input, Label } from "@repo/ui";
 import React from "react";
 import UserImage from "./UserImage";
 import { User } from "@prisma/client";
+import { EditUserName } from "./EditUserName";
 
 export default function UserDetailForm({ user }: { user: User }) {
   return (
@@ -12,11 +13,7 @@ export default function UserDetailForm({ user }: { user: User }) {
           <UserImage image={user?.image} key={user?.image} />
         </div>
       </div>
-
-      <div>
-        <Label className="">Your name</Label>
-        <Input disabled placeholder="Enter your name" value={user?.name ? user?.name : ""} className="p-2 mt-2" />
-      </div>
+      <EditUserName userName={user?.name ? user?.name : ""} userId={user?.id} />
       <div>
         <Label className="">Your Email</Label>
         <Input disabled placeholder="Enter your name" value={user?.email ? user?.email : ""} className="p-2 mt-2" />
diff --git a/apps/web/components/utils.tsx b/apps/web/components/utils.tsx
index f55a567f..d8a1318e 100644
--- a/apps/web/components/utils.tsx
+++ b/apps/web/components/utils.tsx
@@ -486,3 +486,26 @@ export async function deleteCategory(categoryId: string) {
     },
   });
 }
+
+export async function getUserDetail(userId: string){
+  const user = await db.user.findUnique({
+    where: {
+      id: userId,
+    }
+  })
+
+  return user;
+}
+
+export async function updateUserName(userId: string, name: string){
+  const user = await db.user.update({
+    where: {
+      id: userId,
+    },
+    data: {
+      name,
+    }
+  })
+  return user;
+}
+
diff --git a/yarn.lock b/yarn.lock
deleted file mode 100644
index e69de29b..00000000