diff --git a/app/citizen-frontend/src/components/FitnessGroupCardItem.vue b/app/citizen-frontend/src/components/FitnessGroupCardItem.vue
new file mode 100644
index 0000000..d817ee0
--- /dev/null
+++ b/app/citizen-frontend/src/components/FitnessGroupCardItem.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { GroupMeta } from "@/stores/course";
+
+defineProps<{
+  groupMeta: GroupMeta;
+}>();
+</script>
+
+<template>
+  <v-card-item class="pa-4" :class="`bg-${groupMeta.color}`">
+    <template #prepend>
+      <v-avatar class="group-avatar" size="60">
+        <v-icon color="white" :icon="groupMeta.icon" size="34" />
+      </v-avatar>
+    </template>
+
+    <template #subtitle>
+      <span class="text-title-small group-caption">你的體適能組別</span>
+    </template>
+
+    <template #title>
+      <span class="text-h5 font-weight-black text-white">
+        {{ groupMeta.label }}
+      </span>
+    </template>
+  </v-card-item>
+</template>
+
+<style scoped>
+.group-avatar {
+  background-color: rgba(255, 255, 255, 0.22);
+}
+
+.group-caption {
+  color: rgba(255, 255, 255, 0.85);
+}
+</style>
diff --git a/app/citizen-frontend/src/components/layout/DefaultLayout.vue b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
index e514b13..0b88674 100644
--- a/app/citizen-frontend/src/components/layout/DefaultLayout.vue
+++ b/app/citizen-frontend/src/components/layout/DefaultLayout.vue
@@ -6,9 +6,7 @@
         <v-app-bar-nav-icon variant="text" @click="drawer = !drawer" />
       </template>
 
-      <v-app-bar-title class="font-weight-bold flex-grow-1">
-        運動玩轉健康力
-      </v-app-bar-title>
+      <v-app-bar-title class="font-weight-bold flex-grow-1"> 運動玩轉健康力 </v-app-bar-title>
 
       <template #append>
         <div class="d-flex align-center">
@@ -21,10 +19,7 @@
             variant="text"
             @click="isLargeText = !isLargeText"
           >
-            <v-icon
-              :color="isLargeText ? 'accent' : 'white'"
-              icon="mdi-format-size"
-            />
+            <v-icon :color="isLargeText ? 'accent' : 'white'" icon="mdi-format-size" />
           </v-btn>
         </div>
       </template>
@@ -42,7 +37,7 @@
         <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>
@@ -63,9 +58,7 @@
           </v-avatar>
         </template>
 
-        <v-list-item-subtitle class="text-white-50"
-          >未登入訪客</v-list-item-subtitle
-        >
+        <v-list-item-subtitle class="text-white-50">未登入訪客</v-list-item-subtitle>
       </v-list-item>
 
       <v-divider />
@@ -78,12 +71,7 @@
         <v-list-item-title>大字體模式</v-list-item-title>
 
         <template #append>
-          <v-switch
-            v-model="isLargeText"
-            color="secondary"
-            density="compact"
-            hide-details
-          />
+          <v-switch v-model="isLargeText" color="secondary" density="compact" hide-details />
         </template>
       </v-list-item>
 
@@ -100,6 +88,13 @@
           @click="drawer = false"
         />
 
+        <v-list-item
+          v-if="SELF_ASSESSMENT_ENABLED"
+          color="primary"
+          prepend-icon="mdi-clipboard-text-search"
+          title="自評"
+          to="/self-assessment"
+        />
         <v-list-item
           v-if="BODY_COMPOSITION_ENABLED && store.isLoggedIn"
           color="primary"
@@ -109,14 +104,6 @@
           @click="drawer = false"
         />
 
-        <v-list-item
-          v-if="SELF_ASSESSMENT_ENABLED"
-          color="primary"
-          prepend-icon="mdi-clipboard-text-search"
-          title="自評"
-          to="/self-assessment"
-        />
-
         <v-list-item
           v-if="store.isLoggedIn"
           color="primary"
@@ -184,10 +171,7 @@
     </v-navigation-drawer>
 
     <!-- 主要內容區 -->
-    <v-main
-      class="bg-white min-vh-100"
-      :class="{ 'pb-16': BOTTOM_NAVIGATION_ENABLED }"
-    >
+    <v-main class="bg-white min-vh-100" :class="{ 'pb-16': BOTTOM_NAVIGATION_ENABLED }">
       <v-container class="px-4 py-2">
         <slot name="main" />
       </v-container>
@@ -204,17 +188,11 @@
       tag="div"
     >
       <v-btn to="/" value="home">
-        <v-icon :color="getBottomNavIconColor('home')"
-          >mdi-view-dashboard</v-icon
-        >
+        <v-icon :color="getBottomNavIconColor('home')">mdi-view-dashboard</v-icon>
         <span class="bottom-nav-text">首頁</span>
       </v-btn>
 
-      <v-btn
-        v-if="SELF_ASSESSMENT_ENABLED"
-        to="/self-assessment"
-        value="self-assessment"
-      >
+      <v-btn v-if="SELF_ASSESSMENT_ENABLED" to="/self-assessment" value="self-assessment">
         <v-icon :color="getBottomNavIconColor('self-assessment')">
           mdi-clipboard-text-search
         </v-icon>
@@ -222,25 +200,13 @@
         <span class="bottom-nav-text">自評</span>
       </v-btn>
 
-      <v-btn
-        v-if="CHECKIN_ENABLED && store.isLoggedIn"
-        to="/checkin"
-        value="checkin"
-      >
-        <v-icon :color="getBottomNavIconColor('checkin')"
-          >mdi-qrcode-scan</v-icon
-        >
+      <v-btn v-if="CHECKIN_ENABLED && store.isLoggedIn" to="/checkin" value="checkin">
+        <v-icon :color="getBottomNavIconColor('checkin')">mdi-qrcode-scan</v-icon>
         <span class="bottom-nav-text">量測</span>
       </v-btn>
 
-      <v-btn
-        v-if="APPOINTMENT_ENABLED && store.isLoggedIn"
-        to="/appointment"
-        value="appointment"
-      >
-        <v-icon :color="getBottomNavIconColor('appointment')"
-          >mdi-calendar-check</v-icon
-        >
+      <v-btn v-if="APPOINTMENT_ENABLED && store.isLoggedIn" to="/appointment" value="appointment">
+        <v-icon :color="getBottomNavIconColor('appointment')">mdi-calendar-check</v-icon>
         <span class="bottom-nav-text">預約</span>
       </v-btn>
     </v-bottom-navigation>
@@ -248,9 +214,7 @@
     <!-- 隱私授權對話框 -->
     <v-dialog v-model="showPrivacy" max-width="500">
       <v-card class="rounded-xl">
-        <v-card-title
-          class="bg-primary text-white font-weight-bold d-flex align-center"
-        >
+        <v-card-title class="bg-primary text-white font-weight-bold d-flex align-center">
           <v-icon class="mr-2" icon="mdi-shield-check" />
           個資同意與資料授權
         </v-card-title>
@@ -267,7 +231,7 @@
           </ul>
 
           <p class="text-caption text-grey">
-            授權狀態：{{ store.userProfile.consent ? "已同意授權" : "未授權" }}
+            授權狀態：{{ store.userProfile.consent ? '已同意授權' : '未授權' }}
           </p>
         </v-card-text>
 
@@ -287,58 +251,57 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useDisplayUserName } from "@/composables/useDisplayUserName";
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useDisplayUserName } from '@/composables/useDisplayUserName'
 import {
   APPOINTMENT_ENABLED,
   BODY_COMPOSITION_ENABLED,
   BOTTOM_NAVIGATION_ENABLED,
   CHECKIN_ENABLED,
   SELF_ASSESSMENT_ENABLED,
-} from "@/config/features";
-import { useAppStore } from "@/stores/app";
-import { useCourseStore } from "@/stores/course";
+} from '@/config/features'
+import { useAppStore } from '@/stores/app'
+import { useCourseStore } from '@/stores/course'
 
-const store = useAppStore();
-const courseStore = useCourseStore();
-const router = useRouter();
-const route = useRoute();
-const displayUserName = useDisplayUserName(store.userProfile);
+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");
-const showPrivacy = ref(false);
+const drawer = ref(false)
+const activeTab = ref('home')
+const showPrivacy = ref(false)
 
 // 無障礙狀態 (可持久化儲存於 localStorage)
-const isLargeText = ref(localStorage.getItem("mode-large-text") === "true");
+const isLargeText = ref(localStorage.getItem('mode-large-text') === 'true')
 
 watch(isLargeText, (newVal) => {
-  localStorage.setItem("mode-large-text", String(newVal));
-});
+  localStorage.setItem('mode-large-text', String(newVal))
+})
 
 // 同步底部導航狀態與當前路由
 watch(
   () => route.path,
   (path) => {
-    if (path === "/") activeTab.value = "home";
-    else if (path.startsWith("/self-assessment"))
-      activeTab.value = "self-assessment";
-    else if (path.startsWith("/appointment")) activeTab.value = "appointment";
-    else if (path.startsWith("/checkin")) activeTab.value = "checkin";
+    if (path === '/') activeTab.value = 'home'
+    else if (path.startsWith('/self-assessment')) activeTab.value = 'self-assessment'
+    else if (path.startsWith('/appointment')) activeTab.value = 'appointment'
+    else if (path.startsWith('/checkin')) activeTab.value = 'checkin'
   },
-  { immediate: true },
-);
+  { immediate: true }
+)
 
 function getBottomNavIconColor(value: string) {
-  return activeTab.value === value ? "secondary" : "secondary-darken-1";
+  return activeTab.value === value ? 'secondary' : 'secondary-darken-1'
 }
 
 async function handleLogout() {
-  await store.logout();
-  courseStore.resetGroup();
-  await router.push("/login");
-  drawer.value = false;
+  await store.logout()
+  courseStore.resetGroup()
+  await router.push('/login')
+  drawer.value = false
 }
 </script>
 
diff --git a/app/citizen-frontend/src/config/features.ts b/app/citizen-frontend/src/config/features.ts
index 150c47f..d76797b 100644
--- a/app/citizen-frontend/src/config/features.ts
+++ b/app/citizen-frontend/src/config/features.ts
@@ -1,7 +1,7 @@
-export const APPOINTMENT_ENABLED = false;
-export const BODY_COMPOSITION_ENABLED = false;
-export const BOTTOM_NAVIGATION_ENABLED = false;
-export const CHECKIN_ENABLED = false;
-export const EXERCISE_DURATION_RECOMMENDATION_ENABLED = false;
-export const RADAR_ENABLED = true;
-export const SELF_ASSESSMENT_ENABLED = true;
+export const APPOINTMENT_ENABLED = false
+export const BODY_COMPOSITION_ENABLED = true
+export const BOTTOM_NAVIGATION_ENABLED = false
+export const CHECKIN_ENABLED = false
+export const EXERCISE_DURATION_RECOMMENDATION_ENABLED = false
+export const RADAR_ENABLED = true
+export const SELF_ASSESSMENT_ENABLED = true
diff --git a/app/citizen-frontend/src/pages/course.vue b/app/citizen-frontend/src/pages/course.vue
index 8a904a9..622f109 100644
--- a/app/citizen-frontend/src/pages/course.vue
+++ b/app/citizen-frontend/src/pages/course.vue
@@ -10,23 +10,7 @@
           elevation="1"
           variant="flat"
         >
-          <v-card-item class="pa-4" :class="`bg-${store.groupMeta.color}`">
-            <template #prepend>
-              <v-avatar class="group-avatar" size="60">
-                <v-icon color="white" :icon="store.groupMeta.icon" size="34" />
-              </v-avatar>
-            </template>
-
-            <template #subtitle>
-              <span class="text-title-small group-caption">你的體適能組別</span>
-            </template>
-
-            <template #title>
-              <span class="text-h5 font-weight-black text-white">{{
-                store.groupMeta.label
-              }}</span>
-            </template>
-          </v-card-item>
+          <FitnessGroupCardItem :group-meta="store.groupMeta" />
 
           <v-card-text class="text-body-medium text-grey-darken-2 pa-4">
             {{ store.groupMeta.description }}
@@ -388,6 +372,7 @@
 <script setup lang="ts">
 import type { TimeSlot, YesNo } from "@/api/types";
 import { computed, onMounted, ref } from "vue";
+import FitnessGroupCardItem from "@/components/FitnessGroupCardItem.vue";
 import Layout from "@/components/layout/DefaultLayout.vue";
 import PageHeading from "@/components/layout/PageHeading.vue";
 import { EXERCISE_DURATION_RECOMMENDATION_ENABLED } from "@/config/features";
@@ -528,15 +513,6 @@ onMounted(() => {
   border: 1px solid rgba(0, 0, 0, 0.08);
 }
 
-/* 組別卡片：半透明白底圓形與次級白字，Vuetify 沒有對應的 utility class */
-.group-avatar {
-  background-color: rgba(255, 255, 255, 0.22);
-}
-
-.group-caption {
-  color: rgba(255, 255, 255, 0.85);
-}
-
 .pa-0 :deep(.v-expansion-panel-text__wrapper) {
   padding: 0;
 }
diff --git a/app/citizen-frontend/src/pages/index.vue b/app/citizen-frontend/src/pages/index.vue
index bbb87ec..547adce 100644
--- a/app/citizen-frontend/src/pages/index.vue
+++ b/app/citizen-frontend/src/pages/index.vue
@@ -7,39 +7,17 @@
         <!-- 頂部：我的健康力護照卡片 (Taipei Masters Hub) -->
         <v-card class="border-primary border-xl rounded-xl" variant="flat">
           <v-row class="mt-4 pa-2" no-gutters>
-            <v-col cols="8">
+            <v-col :cols="courseStore.groupMissing ? 8 : 12">
               <v-card-title>
                 {{ displayUserName }}
               </v-card-title>
               <v-card-subtitle> 資料更新於 {{ todayTimeString }} </v-card-subtitle>
             </v-col>
 
-            <v-col class="d-flex justify-center" cols="4">
+            <v-col v-if="courseStore.groupMissing" class="d-flex justify-center" cols="4">
               <!-- 體適能分組徽章 -->
-              <div
-                :class="[
-                  'score-disk',
-                  'd-flex',
-                  'flex-column',
-                  'justify-center',
-                  'align-center',
-                  courseStore.groupLoaded ? `text-${courseStore.groupMeta.color}` : 'text-primary',
-                ]"
-              >
-                <v-progress-circular
-                  v-if="courseStore.groupLoading"
-                  color="primary"
-                  indeterminate
-                  size="28"
-                  width="3"
-                />
-                <span v-else-if="courseStore.groupLoaded" class="group-label">
-                  {{ courseStore.groupMeta.label }}
-                </span>
-                <span v-else-if="courseStore.groupMissing" class="group-label">
-                  未完成體適能測試
-                </span>
-                <span v-else class="group-label">無資料</span>
+              <div class="score-disk d-flex flex-column justify-center align-center text-primary">
+                <span class="group-label">未完成體適能測試</span>
               </div>
             </v-col>
           </v-row>
@@ -73,7 +51,7 @@
           <div class="px-2">
             <ModuleRouterCard
               clickable
-              description="依 11 項測驗成績重新計算體適能分組。"
+              description="依 11 項測驗成績重新計算"
               icon="mdi-refresh-circle"
               icon-color="secondary"
               :disabled="generatePhysicalFitnessLoading"
@@ -85,7 +63,13 @@
 
           <!-- 課程建議入口 -->
 
-          <v-list-item append-icon="mdi-chevron-right" class="bg-primary py-4 mt-4" to="/course">
+          <FitnessGroupCardItem
+            v-if="courseStore.groupLoaded"
+            class="mt-4"
+            :group-meta="courseStore.groupMeta"
+          />
+
+          <v-list-item append-icon="mdi-chevron-right" class="bg-primary py-4" to="/course">
             <v-list-item-title class="font-weight-bold">
               <v-icon icon="mdi-notebook-check-outline" size="16" />
               課程建議
@@ -349,6 +333,7 @@ import { useRouter } from 'vue-router'
 import type { PhysicalFitnessItem } from '@/api/types'
 import { fetchPhysicalFitness, generatePhysicalFitness } from '@/api/physical-fitness'
 import BrandAvatar from '@/components/BrandAvatar.vue'
+import FitnessGroupCardItem from '@/components/FitnessGroupCardItem.vue'
 import HealthRadarChart from '@/components/HealthRadarChart.vue'
 import IntroductionCarousel from '@/components/IntroductionCarousel.vue'
 import Layout from '@/components/layout/DefaultLayout.vue'