diff --git a/app/citizen-frontend/src/components/layout/DefaultLayout.vue b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
index 1598c91..45fd666 100644
--- a/app/citizen-frontend/src/components/layout/DefaultLayout.vue
+++ b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
@@ -42,13 +42,13 @@
         <template #prepend>
           <v-avatar color="accent" size="48">
             <span class="text-white font-weight-bold text-h6">
-              {{ (store.userProfile.name || "市民").substring(0, 1) }}
+              {{ (store.userProfile.name || "姓名").substring(0, 1) }}
             </span>
           </v-avatar>
         </template>
 
         <v-list-item-title class="font-weight-bold">
-          {{ store.userProfile.name || "市民" }} 先生
+          {{ displayUserName }}
         </v-list-item-title>
 
         <v-list-item-subtitle class="text-white-50">{{
@@ -278,6 +278,7 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useDisplayUserName } from "@/composables/useDisplayUserName";
 import { useAppStore } from "@/stores/app";
 import { useCourseStore } from "@/stores/course";
 
@@ -285,6 +286,7 @@ const store = useAppStore();
 const courseStore = useCourseStore();
 const router = useRouter();
 const route = useRoute();
+const displayUserName = useDisplayUserName(store.userProfile);
 
 const drawer = ref(false);
 const activeTab = ref("home");
diff --git a/app/citizen-frontend/src/composables/useDisplayUserName.ts b/app/citizen-frontend/src/composables/useDisplayUserName.ts
new file mode 100644
index 0000000..bef10b0
--- /dev/null
+++ b/app/citizen-frontend/src/composables/useDisplayUserName.ts
@@ -0,0 +1,22 @@
+import { computed, type ComputedRef } from "vue";
+
+interface UserProfileName {
+  name: string;
+  gender: string;
+}
+
+export function useDisplayUserName(
+  userProfile: UserProfileName,
+): ComputedRef<string> {
+  return computed(() => {
+    const name = userProfile.name || "姓名";
+    const honorific =
+      userProfile.gender === "男" || userProfile.gender === "male"
+        ? "先生"
+        : userProfile.gender === "女" || userProfile.gender === "female"
+          ? "女士"
+          : "";
+
+    return honorific ? `${name} ${honorific}` : name;
+  });
+}
diff --git a/app/citizen-frontend/src/pages/appointment.vue b/app/citizen-frontend/src/pages/appointment.vue
index 4cb549f..3befb3a 100644
--- a/app/citizen-frontend/src/pages/appointment.vue
+++ b/app/citizen-frontend/src/pages/appointment.vue
@@ -224,7 +224,7 @@
             </div>
 
             <div class="text-caption text-grey-darken-2 font-weight-bold mb-4">
-              姓名: {{ store.userProfile.name || "市民" }} 先生 | 電話:
+              姓名: {{ displayUserName }} | 電話:
               {{ store.userProfile.phone }}
             </div>
 
@@ -262,6 +262,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { useDisplayUserName } from "@/composables/useDisplayUserName";
 import Layout from "@/components/layout/DefaultLayout.vue";
 import QRCode from "@/components/QRCode.vue";
 import { type Appointment, useAppStore } from "@/stores/app";
@@ -273,6 +274,7 @@ const filterTab = ref("all");
 const showMissingGroupNotice = ref(
   route.query.reason === "missing-fitness-group",
 );
+const displayUserName = useDisplayUserName(store.userProfile);
 
 const qrcodeDialog = ref(false);
 const selectedApt = ref<Appointment | null>(null);
diff --git a/app/citizen-frontend/src/pages/index.vue b/app/citizen-frontend/src/pages/index.vue
index b63ef19..b3620aa 100644
--- a/app/citizen-frontend/src/pages/index.vue
+++ b/app/citizen-frontend/src/pages/index.vue
@@ -24,13 +24,13 @@
                   'justify-center',
                   'align-center',
                   courseStore.groupLoaded
-                    ? `bg-${courseStore.groupMeta.color}`
-                    : 'bg-primary',
+                    ? `text-${courseStore.groupMeta.color}`
+                    : 'text-primary',
                 ]"
               >
                 <v-progress-circular
                   v-if="courseStore.groupLoading"
-                  color="white"
+                  color="primary"
                   indeterminate
                   size="28"
                   width="3"
@@ -39,7 +39,7 @@
                   {{ courseStore.groupMeta.label }}
                 </span>
                 <span v-else-if="courseStore.groupMissing" class="group-label">
-                  尚未分組
+                  未取得體適能分組
                 </span>
                 <span v-else class="group-label">無資料</span>
               </div>
@@ -60,7 +60,7 @@
           </v-card-subtitle>
 
           <!-- 四項核心能力數值簡覽 -->
-          <v-row class="mt-4" no-gutters>
+          <!-- <v-row class="mt-4" no-gutters>
             <v-col class="text-center border pa-2" cols="3">
               <div class="">肌力</div>
 
@@ -92,13 +92,13 @@
                 {{ store.radarData.cardio }}
               </div>
             </v-col>
-          </v-row>
+          </v-row> -->
 
           <!-- 課程建議入口 -->
 
           <v-list-item
             append-icon="mdi-chevron-right"
-            class="bg-primary py-4"
+            class="bg-primary py-4 mt-4"
             to="/course"
           >
             <v-list-item-title class="font-weight-bold">
@@ -283,6 +283,7 @@ import BrandAvatar from "@/components/BrandAvatar.vue";
 import HealthRadarChart from "@/components/HealthRadarChart.vue";
 import Layout from "@/components/layout/DefaultLayout.vue";
 import ModuleRouterCard from "@/components/ModuleRouterCard.vue";
+import { useDisplayUserName } from "@/composables/useDisplayUserName";
 import { useAppStore } from "@/stores/app";
 import { useCourseStore } from "@/stores/course";
 
@@ -291,18 +292,7 @@ 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 displayUserName = useDisplayUserName(store.userProfile);
 
 const MISSING_GROUP_DIALOG_KEY = "missing-fitness-group-dialog-shown";
 
@@ -424,12 +414,15 @@ const todayTimeString = computed(() => {
 }
 
 .score-disk {
-  border: 3px solid #ffffff;
-  width: min(100%, 108px);
+  border: 2px solid currentColor;
+  background-color: transparent;
+  width: fit-content;
+  min-width: 108px;
+  max-width: 100%;
   height: 72px;
-  padding: 0 10px;
-  border-radius: 22px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  padding: 0 8px;
+  border-radius: 16px;
+  box-shadow: 0 3px 10px rgba(29, 112, 99, 0.12);
   box-sizing: border-box;
   flex-shrink: 0;
 }
@@ -438,8 +431,11 @@ const todayTimeString = computed(() => {
   font-size: clamp(0.95rem, 3vw, 1.1rem);
   font-weight: 900;
   line-height: 1;
-  color: #ffffff;
-  white-space: nowrap;
+  color: inherit;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  text-align: center;
+  white-space: normal;
 }
 
 .transition-card {
diff --git a/app/citizen-frontend/src/pages/login.vue b/app/citizen-frontend/src/pages/login.vue
index 3a01c19..653bead 100644
--- a/app/citizen-frontend/src/pages/login.vue
+++ b/app/citizen-frontend/src/pages/login.vue
@@ -17,7 +17,7 @@
 
           <!-- 登入卡片 -->
           <v-card class="rounded-lg mt-4" color="surface">
-            <v-card-title> 市民登入 </v-card-title>
+            <v-card-title> 登入 </v-card-title>
             <v-card-text> 請輸入您的手機門號與登入密碼 </v-card-text>
             <!-- 表單 -->
             <v-form class="pa-4" @submit.prevent="handleLogin">
diff --git a/app/citizen-frontend/src/pages/register.vue b/app/citizen-frontend/src/pages/register.vue
index c7e6332..edf06e0 100644
--- a/app/citizen-frontend/src/pages/register.vue
+++ b/app/citizen-frontend/src/pages/register.vue
@@ -7,7 +7,7 @@
             <div class="text-center">
               <BrandAvatar />
               <v-card-title class="text-primary font-weight-bold">
-                建立市民帳號
+                建立帳號
               </v-card-title>
               <v-card-subtitle class="text-primary">
                 完成註冊後即可保存自評並進行預約