diff --git a/components/console/account-page-client.tsx b/components/console/account-page-client.tsx
index 2f577df..f81e3ec 100644
--- a/components/console/account-page-client.tsx
+++ b/components/console/account-page-client.tsx
@@ -37,6 +37,8 @@ function formatCreatedAt(createdAt: number): string {
 }
 
 export function AccountPageClient({ user, hasGithubConnection }: { user: UserProfile | null; hasGithubConnection: boolean }) {
+  const [displayName, setDisplayName] = useState(user?.name ?? user?.email?.split("@")[0] ?? "");
+  const [username, setUsername] = useState(user?.id ?? "");
   const [showOld, setShowOld] = useState(false);
   const [showNew, setShowNew] = useState(false);
   const [deleteInput, setDeleteInput] = useState("");
@@ -96,22 +98,25 @@ export function AccountPageClient({ user, hasGithubConnection }: { user: UserPro
 
             <Field label="Display Name">
               <input
-                value={user?.email?.split("@")[0] ?? ""}
-                readOnly
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                placeholder="Enter your display name"
                 className="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 transition-colors focus:border-gray-500 focus:outline-none dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:focus:border-zinc-400"
               />
             </Field>
             <Field label="Email Address">
               <input
                 value={user?.email ?? ""}
+                placeholder="Email managed by provider"
                 readOnly
                 className="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 transition-colors focus:border-gray-500 focus:outline-none dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:focus:border-zinc-400"
               />
             </Field>
-            <Field label="User ID">
+            <Field label="Username">
               <input
-                value={user?.id ?? ""}
-                readOnly
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                placeholder="Enter your username"
                 className="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-900 transition-colors focus:border-gray-500 focus:outline-none dark:border-zinc-700 dark:bg-zinc-800 dark:text-white dark:focus:border-zinc-400"
               />
             </Field>
diff --git a/lib/user-auth.ts b/lib/user-auth.ts
index 7793f2c..3e6b701 100644
--- a/lib/user-auth.ts
+++ b/lib/user-auth.ts
@@ -15,6 +15,7 @@ type UserRow = {
 
 export type UserProfile = {
   id: string;
+  name?: string | null;
   email: string;
   createdAt: number;
 };