diff --git a/spx-gui/src/apis/user.ts b/spx-gui/src/apis/user.ts
index 224feb6c8..2b1fbd96c 100644
--- a/spx-gui/src/apis/user.ts
+++ b/spx-gui/src/apis/user.ts
@@ -42,7 +42,15 @@ export async function getSignedInUser(): Promise<SignedInUser> {
   return await (client.get(`/user`) as Promise<SignedInUser>)
 }
 
-export type UpdateSignedInUserParams = Pick<User, 'description'>
+export type UpdateSignedInUserParams =
+  | {
+      displayName: User['displayName']
+      description?: User['description']
+    }
+  | {
+      displayName?: User['displayName']
+      description: User['description']
+    }
 
 export async function updateSignedInUser(params: UpdateSignedInUserParams) {
   return await (client.put(`/user`, params) as Promise<SignedInUser>)
diff --git a/spx-gui/src/components/community/user/EditProfileModal.vue b/spx-gui/src/components/community/user/EditProfileModal.vue
index 93609e960..bc848a125 100644
--- a/spx-gui/src/components/community/user/EditProfileModal.vue
+++ b/spx-gui/src/components/community/user/EditProfileModal.vue
@@ -24,9 +24,15 @@ const coverImgUrl = computed(() => getCoverImgUrl(props.user.username))
 const avatarUrl = useAvatarUrl(() => props.user.avatar)
 
 const form = useForm({
+  displayName: [props.user.displayName, validateDisplayName],
   description: [props.user.description, validateDescription]
 })
 
+function validateDisplayName(val: string) {
+  if (val.trim() === '') return t({ en: 'The name must not be blank', zh: '名字不可为空' })
+  return null
+}
+
 function validateDescription(val: string) {
   if (val.length > 200) return t({ en: 'The input must be 200 characters or fewer', zh: '输入不能超过 200 字' })
   return null
@@ -39,7 +45,10 @@ function handleCancel() {
 const updateProfile = useUpdateSignedInUser()
 
 const handleSubmit = useMessageHandle(async () => {
-  const updated = await updateProfile({ description: form.value.description })
+  const updated = await updateProfile({
+    displayName: form.value.displayName.trim(),
+    description: form.value.description.trim()
+  })
   emit('resolved', updated)
 })
 </script>
@@ -55,11 +64,10 @@ const handleSubmit = useMessageHandle(async () => {
     <div class="cover" :style="{ backgroundImage: `url(${coverImgUrl})` }"></div>
     <UIImg class="avatar" :src="avatarUrl" />
     <UIForm :form="form" has-success-feedback @submit="handleSubmit.fn">
-      <UIFormItem :label="$t({ en: 'Name', zh: '名字' })">
+      <UIFormItem :label="$t({ en: 'Name', zh: '名字' })" path="displayName">
         <UITextInput
-          v-radar="{ name: 'User name input', desc: 'Input field showing the user name' }"
-          :value="user.displayName"
-          disabled
+          v-model:value="form.value.displayName"
+          v-radar="{ name: 'User name input', desc: 'Input field for user display name' }"
         />
       </UIFormItem>
       <UIFormItem :label="$t({ en: 'About me', zh: '关于我' })" path="description">