diff --git a/app/citizen-frontend/src/pages/index.vue b/app/citizen-frontend/src/pages/index.vue
index 4206fd8..b63ef19 100644
--- a/app/citizen-frontend/src/pages/index.vue
+++ b/app/citizen-frontend/src/pages/index.vue
@@ -7,7 +7,7 @@
           <v-row class="mt-4" no-gutters>
             <v-col cols="8">
               <v-card-title>
-                {{ store.userProfile.name || "市民" }} 先生
+                {{ displayUserName }}
               </v-card-title>
               <v-card-subtitle>
                 資料更新於 {{ todayTimeString }}
@@ -291,6 +291,19 @@ const courseStore = useCourseStore();
 const router = useRouter();
 const missingGroupDialog = ref(false);
 
+const displayUserName = computed(() => {
+  const name = store.userProfile.name || "市民";
+  const gender = store.userProfile.gender;
+  const honorific =
+    gender === "男" || gender === "male"
+      ? "先生"
+      : gender === "女" || gender === "female"
+        ? "女士"
+        : "";
+
+  return honorific ? `${name} ${honorific}` : name;
+});
+
 const MISSING_GROUP_DIALOG_KEY = "missing-fitness-group-dialog-shown";
 
 function hasShownMissingGroupDialog() {