diff --git a/.gitignore b/.gitignore
index f176aac0..3a3ad837 100644
--- a/.gitignore
+++ b/.gitignore
@@ -87,8 +87,12 @@ celerybeat.pid
 
 # Database
 *.sql
+*.sql.gz
+*.dump
+*.backup
 *.sqlite
 *.db
+backups/
 artifacts/db_backups/
 
 # Migrations (optional - uncomment if you want to ignore migrations)
diff --git a/backend/apps/contests/exporters/data_service.py b/backend/apps/contests/exporters/data_service.py
index afa05b45..666c3c35 100644
--- a/backend/apps/contests/exporters/data_service.py
+++ b/backend/apps/contests/exporters/data_service.py
@@ -105,11 +105,12 @@ def get_participants(self) -> List[ParticipantDTO]:
 
         result = []
         for p in participants:
+            profile = getattr(p.user, 'profile', None)
             result.append(ParticipantDTO(
                 user_id=p.user.id,
                 username=p.user.username,
                 email=getattr(p.user, 'email', ''),
-                nickname=getattr(p, 'nickname', '') or '',
+                display_name=getattr(profile, 'display_name', '') or '',
                 exam_status=getattr(p, 'exam_status', ''),
                 started_at=getattr(p, 'started_at', None),
                 left_at=getattr(p, 'left_at', None),
@@ -178,7 +179,7 @@ def calculate_standings(self, user_id: Optional[int] = None) -> StandingsDTO:
             stats[p.user_id] = UserStandingDTO(
                 user_id=p.user_id,
                 username=p.username,
-                display_name=p.nickname or p.username,
+                display_name=p.display_name or p.username,
                 problems=problem_stats,
             )
 
diff --git a/backend/apps/contests/exporters/dto.py b/backend/apps/contests/exporters/dto.py
index a9596022..db3d8a9b 100644
--- a/backend/apps/contests/exporters/dto.py
+++ b/backend/apps/contests/exporters/dto.py
@@ -74,7 +74,7 @@ class ParticipantDTO:
     user_id: int
     username: str
     email: str = ''
-    nickname: str = ''
+    display_name: str = ''
     exam_status: str = ''
     started_at: Optional[datetime] = None
     left_at: Optional[datetime] = None
diff --git a/backend/apps/contests/migrations/0077_remove_contest_anonymous_mode.py b/backend/apps/contests/migrations/0077_remove_contest_anonymous_mode.py
new file mode 100644
index 00000000..8dd96514
--- /dev/null
+++ b/backend/apps/contests/migrations/0077_remove_contest_anonymous_mode.py
@@ -0,0 +1,19 @@
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("contests", "0076_unique_exam_question_order"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="contest",
+            name="anonymous_mode_enabled",
+        ),
+        migrations.RemoveField(
+            model_name="contestparticipant",
+            name="nickname",
+        ),
+    ]
diff --git a/backend/apps/contests/models.py b/backend/apps/contests/models.py
index 6c78b552..c5d2cd12 100644
--- a/backend/apps/contests/models.py
+++ b/backend/apps/contests/models.py
@@ -215,13 +215,6 @@ class QuestionEditLockTrigger(models.TextChoices):
         help_text='TA 完成批改後手動設為 True，學生才能查看成績'
     )
     
-    # Anonymous mode settings
-    anonymous_mode_enabled = models.BooleanField(
-        default=False,
-        verbose_name='啟用匿名模式',
-        help_text='啟用後學生可使用暱稱參與競賽，排行榜和提交列表顯示暱稱'
-    )
-    
     created_at = models.DateTimeField(auto_now_add=True, verbose_name='建立時間')
     updated_at = models.DateTimeField(auto_now=True, verbose_name='更新時間')
     
@@ -483,15 +476,6 @@ class ContestParticipant(models.Model):
         help_text='手動或系統自動交卷原因'
     )
     
-    # Anonymous mode nickname
-    nickname = models.CharField(
-        max_length=50,
-        blank=True,
-        default='',
-        verbose_name='暱稱',
-        help_text='匿名模式下顯示的名稱，預設為用戶名'
-    )
-    
     # Explicit exam state (primary state field for UI)
     exam_status = models.CharField(
         max_length=20,
diff --git a/backend/apps/contests/serializers.py b/backend/apps/contests/serializers.py
index e56b4c83..cfd03bb7 100644
--- a/backend/apps/contests/serializers.py
+++ b/backend/apps/contests/serializers.py
@@ -95,7 +95,6 @@ class ContestDetailSerializer(serializers.ModelSerializer):
     accepted_at = serializers.SerializerMethodField()
     submitted_at = serializers.SerializerMethodField()
     auto_unlock_at = serializers.SerializerMethodField()
-    my_nickname = serializers.SerializerMethodField()
     problems = serializers.SerializerMethodField()
     participant_count = serializers.SerializerMethodField()
     admins = serializers.SerializerMethodField()
@@ -139,7 +138,6 @@ class Meta:
             'created_at',
             'updated_at',
             # Computed fields
-            'my_nickname',
             'current_user_role',
             'permissions',
             'has_joined',
@@ -159,7 +157,6 @@ class Meta:
             'max_cheat_warnings',
             'allow_auto_unlock',
             'auto_unlock_minutes',
-            'anonymous_mode_enabled',
             'participant_count',
             'admins',
             'is_classroom_bound',
@@ -193,11 +190,6 @@ def _get_current_registration(self, obj):
             cache[cache_key] = obj.registrations.filter(user=user).first()
         return cache[cache_key]
 
-    def get_my_nickname(self, obj):
-        """Get nickname for current user."""
-        registration = self._get_current_registration(obj)
-        return registration.nickname if registration else None
-
     def get_lock_reason(self, obj):
         """Get lock reason for current user."""
         registration = self._get_current_registration(obj)
@@ -414,7 +406,6 @@ class Meta:
             'allow_auto_unlock',
             'auto_unlock_minutes',
             'status',
-            'anonymous_mode_enabled',
             'results_published',
         ]
         read_only_fields = ['id']
@@ -864,25 +855,8 @@ class Meta:
         read_only_fields = ['author', 'status', 'answered_at', 'author_username', 'author_display_name', 'problem_title']
 
     def get_author_display_name(self, obj):
-        """根據匿名模式返回適當的作者名稱"""
-        request = self.context.get('request')
-        contest = obj.contest
-        
-        if not contest.anonymous_mode_enabled:
-            return obj.author.username
-        
-        # 管理者可見真實名稱
-        if request and request.user.is_authenticated:
-            from .permissions import get_user_role_in_contest
-            role = get_user_role_in_contest(request.user, contest)
-            if role in ['admin', 'owner', 'teacher']:
-                return obj.author.username
-
-        # 查找該用戶的暱稱
-        participant = ContestParticipant.objects.filter(
-            contest=contest, user=obj.author
-        ).first()
-        return participant.nickname if participant else obj.author.username
+        profile = getattr(obj.author, 'profile', None)
+        return getattr(profile, 'display_name', '') or obj.author.username
 
 
 class ClarificationCreateSerializer(serializers.ModelSerializer):
@@ -1070,9 +1044,7 @@ class ContestParticipantSerializer(serializers.ModelSerializer):
     user = UserSerializer(read_only=True)
     user_id = serializers.IntegerField(source='user.id', read_only=True)
     username = serializers.CharField(source='user.username', read_only=True)
-    nickname = serializers.CharField(read_only=True)
     display_name = serializers.SerializerMethodField()
-    user_display_name = serializers.SerializerMethodField()
     account_role = serializers.CharField(source='user.role', read_only=True)
     auth_provider = serializers.CharField(source='user.auth_provider', read_only=True)
     total_score = serializers.SerializerMethodField()
@@ -1090,7 +1062,7 @@ class Meta:
             'user_id', 'username', 'user', 'score', 'total_score', 'rank', 
             'joined_at', 'exam_status',
             'lock_reason', 'violation_count', 'submit_reason', 'auto_unlock_at', 'remaining_unlock_seconds',
-            'nickname', 'display_name', 'user_display_name', 'account_role', 'auth_provider',
+            'display_name', 'account_role', 'auth_provider',
             'connection_status', 'last_heartbeat_at', 'live_monitoring_online', 'live_monitoring_sources',
         ]
 
@@ -1180,23 +1152,8 @@ def get_total_score(self, obj):
         return total
 
     def get_display_name(self, obj):
-        """根據權限返回適當的顯示名稱"""
-        request = self.context.get('request')
-        contest = obj.contest
-        
-        # 非匿名模式，直接返回真實用戶名
-        if not contest.anonymous_mode_enabled:
-            return obj.user.username
-        
-        # 管理者可見真實名稱
-        if request and request.user.is_authenticated:
-            from .permissions import get_user_role_in_contest
-            role = get_user_role_in_contest(request.user, contest)
-            if role in ['admin', 'owner', 'teacher']:
-                return obj.user.username
-
-        # 其他用戶看暱稱 (nickname 預設為 username)
-        return obj.nickname or obj.user.username
+        profile = getattr(obj.user, 'profile', None)
+        return getattr(profile, 'display_name', '') or ""
 
     def get_auto_unlock_at(self, obj):
         """Calculate auto unlock time if applicable."""
@@ -1218,13 +1175,6 @@ def get_remaining_unlock_seconds(self, obj):
             
         return int((unlock_at - now).total_seconds())
 
-    def get_user_display_name(self, obj):
-        profile = getattr(obj.user, 'profile', None)
-        if not profile:
-            return ""
-        return profile.display_name or ""
-
-
 # ============================================================================
 # Exam Answer Serializers
 # ============================================================================
@@ -1258,7 +1208,7 @@ class ExamAnswerDetailSerializer(serializers.ModelSerializer):
     )
     participant_user_id = serializers.SerializerMethodField()
     participant_username = serializers.SerializerMethodField()
-    participant_nickname = serializers.SerializerMethodField()
+    participant_display_name = serializers.SerializerMethodField()
 
     class Meta:
         model = ExamAnswer
@@ -1268,7 +1218,7 @@ class Meta:
             'answer', 'is_correct', 'score', 'feedback',
             'question_snapshot',
             'graded_by_username', 'graded_at',
-            'participant_user_id', 'participant_username', 'participant_nickname',
+            'participant_user_id', 'participant_username', 'participant_display_name',
             'created_at', 'updated_at',
         ]
         read_only_fields = fields
@@ -1304,15 +1254,16 @@ def get_participant_user_id(self, obj):
     def get_participant_username(self, obj):
         return obj.participant.user.username
 
-    def get_participant_nickname(self, obj):
-        return obj.participant.nickname or obj.participant.user.username
+    def get_participant_display_name(self, obj):
+        profile = getattr(obj.participant.user, 'profile', None)
+        return getattr(profile, 'display_name', '') or ""
 
 
 class ExamAnswerGradingSerializer(serializers.ModelSerializer):
     """Slim serializer for grading screens.
 
     Drops redundant per-row duplicates (question_prompt/type/options/explanation/
-    max_score/question_snapshot and participant_username/nickname). Consumers
+    max_score/question_snapshot and participant_username/display_name). Consumers
     should join question info via GET /exam-questions/ and participant info via
     contest participants list — both are O(题数) / O(学生数) rather than
     O(answers)."""
diff --git a/backend/apps/contests/services/exam_validation.py b/backend/apps/contests/services/exam_validation.py
index 8fa76c62..77aad9e4 100644
--- a/backend/apps/contests/services/exam_validation.py
+++ b/backend/apps/contests/services/exam_validation.py
@@ -27,10 +27,10 @@ def validate_exam_operation(contest, user, require_in_progress=False, allow_admi
     if allow_admin_bypass and can_manage_contest(user, contest):
         try:
             participant = ContestParticipant.objects.get(contest=contest, user=user)
-            return participant, None
+            return participant
         except ContestParticipant.DoesNotExist:
             # Managers don't need to be registered
-            return None, None
+            return None
 
     # Layer 1: Contest status
     if contest.status != 'published':
diff --git a/backend/apps/contests/services/export_service.py b/backend/apps/contests/services/export_service.py
index 035dba57..9b3e216e 100644
--- a/backend/apps/contests/services/export_service.py
+++ b/backend/apps/contests/services/export_service.py
@@ -163,7 +163,8 @@ def build_paper_exam_results_csv_response(contest):
     participant_count = len(students)
 
     for p in students:
-        display_name = p.nickname or p.user.username
+        profile = getattr(p.user, 'profile', None)
+        display_name = getattr(profile, 'display_name', '') or ''
         status_label = p.get_exam_status_display()
         p_answers = answer_lookup.get(p.id, {})
         graded_count = sum(
diff --git a/backend/apps/contests/services/participant_dashboard.py b/backend/apps/contests/services/participant_dashboard.py
index aa7a2ab9..871e6bfb 100644
--- a/backend/apps/contests/services/participant_dashboard.py
+++ b/backend/apps/contests/services/participant_dashboard.py
@@ -79,9 +79,7 @@ def _serialize_participant(participant: ContestParticipant) -> dict[str, Any]:
     return {
         "user_id": participant.user_id,
         "username": participant.user.username,
-        "nickname": participant.nickname or participant.user.username,
-        "display_name": participant.nickname or participant.user.username,
-        "user_display_name": getattr(profile, "display_name", "") or "",
+        "display_name": getattr(profile, "display_name", "") or "",
         "account_role": getattr(participant.user, "role", "student"),
         "auth_provider": getattr(participant.user, "auth_provider", "email"),
         "email": getattr(participant.user, "email", ""),
diff --git a/backend/apps/contests/services/scoreboard.py b/backend/apps/contests/services/scoreboard.py
index 427e90ed..dc477ba4 100644
--- a/backend/apps/contests/services/scoreboard.py
+++ b/backend/apps/contests/services/scoreboard.py
@@ -88,7 +88,6 @@ def calculate(contest: Contest, user_scope: ScoreboardScope) -> ScoreboardResult
             stats[participant.user.id] = {
                 "user": UserSerializer(participant.user).data,
                 "display_name": display_name,
-                "nickname": participant.nickname,
                 "solved": 0,
                 "rank": participant.rank,
                 "score": participant.score,
@@ -177,11 +176,5 @@ def _build_display_name(
         is_privileged: bool,
         use_export_display: bool,
     ) -> str:
-        if use_export_display:
-            return participant.nickname or participant.user.username
-
-        if not contest.anonymous_mode_enabled:
-            return participant.user.username
-        if is_privileged:
-            return participant.user.username
-        return participant.nickname or participant.user.username
+        profile = getattr(participant.user, "profile", None)
+        return getattr(profile, "display_name", "") or participant.user.username
diff --git a/backend/apps/contests/tests/exam/test_exam_answers.py b/backend/apps/contests/tests/exam/test_exam_answers.py
index 6ab1ac42..7d000f96 100644
--- a/backend/apps/contests/tests/exam/test_exam_answers.py
+++ b/backend/apps/contests/tests/exam/test_exam_answers.py
@@ -441,6 +441,38 @@ def test_teacher_view_dashboard_summary(self):
         self.assertEqual(essay_summary['subjective_stats']['graded_count'], 1)
         self.assertEqual(essay_summary['subjective_stats']['pending_count'], 1)
 
+    def test_participant_can_view_dashboard_summary_after_results_published(self):
+        self.contest.results_published = True
+        self.contest.save(update_fields=['results_published'])
+        ExamAnswer.objects.create(
+            participant=self.participant,
+            question=self.q_single,
+            answer={'selected': 'B'},
+            is_correct=True,
+            score=5,
+        )
+
+        self.client.force_authenticate(user=self.student)
+        url = reverse(
+            'contests:contest-exam-answers-dashboard-summary',
+            kwargs={'contest_pk': self.contest.id},
+        )
+        resp = self.client.get(url)
+
+        self.assertEqual(resp.status_code, status.HTTP_200_OK)
+        self.assertEqual(resp.data['contest']['participant_count'], 1)
+        self.assertEqual(resp.data['score_distribution'][-1]['range_label'], '90-100%')
+
+    def test_participant_cannot_view_dashboard_summary_before_results_published(self):
+        self.client.force_authenticate(user=self.student)
+        url = reverse(
+            'contests:contest-exam-answers-dashboard-summary',
+            kwargs={'contest_pk': self.contest.id},
+        )
+        resp = self.client.get(url)
+
+        self.assertEqual(resp.status_code, status.HTTP_403_FORBIDDEN)
+
     def test_dashboard_summary_cache_invalidates_on_submission(self):
         self.client.force_authenticate(user=self.teacher)
         summary_url = reverse(
diff --git a/backend/apps/contests/tests/exam/test_exam_state.py b/backend/apps/contests/tests/exam/test_exam_state.py
index 2a3c9641..524c5984 100644
--- a/backend/apps/contests/tests/exam/test_exam_state.py
+++ b/backend/apps/contests/tests/exam/test_exam_state.py
@@ -38,6 +38,17 @@ def test_start_exam(self):
         
         p = ContestParticipant.objects.get(user=self.user, contest=self.contest)
         self.assertEqual(p.exam_status, ExamStatus.IN_PROGRESS)
+
+    def test_owner_participant_can_start_exam(self):
+        ContestParticipant.objects.create(contest=self.contest, user=self.admin)
+        self.client.force_authenticate(user=self.admin)
+
+        url = reverse('contests:contest-exam-start-exam', args=[self.contest.id])
+        response = self.client.post(url)
+
+        self.assertEqual(response.status_code, status.HTTP_200_OK)
+        p = ContestParticipant.objects.get(user=self.admin, contest=self.contest)
+        self.assertEqual(p.exam_status, ExamStatus.IN_PROGRESS)
         
     def test_end_exam(self):
         # Start first
diff --git a/backend/apps/contests/tests/management/test_contest_viewset_actions.py b/backend/apps/contests/tests/management/test_contest_viewset_actions.py
index fd64de60..3b630736 100644
--- a/backend/apps/contests/tests/management/test_contest_viewset_actions.py
+++ b/backend/apps/contests/tests/management/test_contest_viewset_actions.py
@@ -276,7 +276,7 @@ def test_owner_can_list_participants(
     assert response.status_code == status.HTTP_200_OK
     assert len(response.data) == 1
     assert response.data[0]["user"]["id"] == student.id
-    assert response.data[0]["user_display_name"] == "Student Display"
+    assert response.data[0]["display_name"] == "Student Display"
     assert response.data[0]["account_role"] == student.role
     assert response.data[0]["auth_provider"] == student.auth_provider
 
@@ -455,37 +455,6 @@ def test_register_rejects_non_published_contest(
     assert response.data["message"] == "Contest is not published"
 
 
-@pytest.mark.django_db
-def test_update_nickname_handles_not_registered_and_blank_nickname(
-    api_client: APIClient,
-    contest: Contest,
-    student: User,
-) -> None:
-    contest.anonymous_mode_enabled = True
-    contest.save(update_fields=["anonymous_mode_enabled"])
-    api_client.force_authenticate(user=student)
-
-    not_registered = api_client.post(
-        f"/api/v1/contests/{contest.id}/update_nickname/",
-        {"nickname": "newname"},
-        format="json",
-    )
-    assert not_registered.status_code == status.HTTP_400_BAD_REQUEST
-    assert not_registered.data["error"] == "Not registered for this contest"
-
-    participant = ContestParticipant.objects.create(contest=contest, user=student, nickname="old")
-    response = api_client.post(
-        f"/api/v1/contests/{contest.id}/update_nickname/",
-        {"nickname": "   "},
-        format="json",
-    )
-
-    assert response.status_code == status.HTTP_200_OK
-    participant.refresh_from_db()
-    assert participant.nickname == student.username
-    assert response.data["nickname"] == student.username
-
-
 @pytest.mark.django_db
 def test_enter_privileged_user_and_leave_without_registration(
     api_client: APIClient,
diff --git a/backend/apps/contests/tests/participation/test_participation.py b/backend/apps/contests/tests/participation/test_participation.py
index b735c5a9..4fb18049 100644
--- a/backend/apps/contests/tests/participation/test_participation.py
+++ b/backend/apps/contests/tests/participation/test_participation.py
@@ -252,30 +252,3 @@ def test_enter_and_leave_contest(self):
         # Try to enter again
         response = self.client.post(url_enter)
         self.assertEqual(response.status_code, status.HTTP_403_FORBIDDEN)
-
-    def test_update_nickname_requires_anonymous_mode(self):
-        ContestParticipant.objects.create(contest=self.public_contest, user=self.user)
-        url = reverse('contests:contest-update-nickname', args=[self.public_contest.id])
-        response = self.client.post(url, {'nickname': 'alias'})
-        self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
-        self.assertEqual(response.data.get('error'), 'Anonymous mode is not enabled for this contest')
-
-    def test_update_nickname_rejects_long_value(self):
-        contest = Contest.objects.create(
-            name='Anonymous Contest',
-            start_time=timezone.now(),
-            end_time=timezone.now() + timedelta(hours=2),
-            owner=self.admin,
-            visibility='public',
-            status='published',
-            anonymous_mode_enabled=True,
-        )
-        ContestParticipant.objects.create(contest=contest, user=self.user)
-        long_nickname = 'n' * 51
-        url = reverse('contests:contest-update-nickname', args=[contest.id])
-        response = self.client.post(url, {'nickname': long_nickname})
-        self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
-        self.assertEqual(
-            response.data.get('error'),
-            'Nickname is too long (max 50 characters)',
-        )
diff --git a/backend/apps/contests/tests/standings/test_contest_legacy_flows.py b/backend/apps/contests/tests/standings/test_contest_legacy_flows.py
index a1a27795..4269b04a 100644
--- a/backend/apps/contests/tests/standings/test_contest_legacy_flows.py
+++ b/backend/apps/contests/tests/standings/test_contest_legacy_flows.py
@@ -62,7 +62,6 @@ class Meta:
     contest = factory.SubFactory(ContestFactory)
     user = factory.SubFactory(UserFactory)
     exam_status = ExamStatus.IN_PROGRESS
-    nickname = ""
 
 
 class ContestProblemBindingFactory(factory.django.DjangoModelFactory):
@@ -223,53 +222,6 @@ def test_standings_shows_problem_titles_for_admins(
         assert problem.get("title") is not None
 
 
-@pytest.mark.django_db
-def test_anonymous_mode_uses_nickname_for_students(
-    api_client: APIClient,
-) -> None:
-    teacher = UserFactory(role="teacher")
-    viewer = UserFactory()
-    other = UserFactory()
-    contest, _ = create_contest_with_problem(
-        owner=teacher,
-        scoreboard_visible_during_contest=True,
-        anonymous_mode_enabled=True,
-    )
-    ContestParticipantFactory(contest=contest, user=viewer, nickname="alpha")
-    ContestParticipantFactory(contest=contest, user=other, nickname="beta")
-
-    api_client.force_authenticate(user=viewer)
-    response = api_client.get(f"/api/v1/contests/{contest.id}/standings/")
-
-    assert response.status_code == 200
-    display_names = {entry["display_name"] for entry in response.data.get("standings", [])}
-    assert "alpha" in display_names
-    assert "beta" in display_names
-
-
-@pytest.mark.django_db
-def test_anonymous_mode_admin_sees_real_names(
-    api_client: APIClient,
-) -> None:
-    teacher = UserFactory(role="teacher")
-    admin = UserFactory(role="admin", is_staff=True)
-    participant = UserFactory()
-    contest, _ = create_contest_with_problem(
-        owner=teacher,
-        scoreboard_visible_during_contest=True,
-        anonymous_mode_enabled=True,
-    )
-    ContestParticipantFactory(contest=contest, user=participant, nickname="alias")
-
-    api_client.force_authenticate(user=admin)
-    response = api_client.get(f"/api/v1/contests/{contest.id}/standings/")
-
-    assert response.status_code == 200
-    display_names = {entry["display_name"] for entry in response.data.get("standings", [])}
-    assert participant.username in display_names
-    assert "alias" not in display_names
-
-
 @pytest.mark.django_db
 def test_standings_excludes_test_submissions_from_score(
     api_client: APIClient,
diff --git a/backend/apps/contests/tests/test_exam_service_boundaries.py b/backend/apps/contests/tests/test_exam_service_boundaries.py
index aa28be50..0edda7c1 100644
--- a/backend/apps/contests/tests/test_exam_service_boundaries.py
+++ b/backend/apps/contests/tests/test_exam_service_boundaries.py
@@ -92,6 +92,45 @@ def test_validate_exam_operation_returns_participant_on_success_and_raises_valid
     ) == participant
 
 
+@pytest.mark.django_db
+def test_validate_exam_operation_admin_bypass_returns_participant_not_tuple(
+    teacher: User,
+    published_contest: Contest,
+):
+    participant = ContestParticipant.objects.create(
+        contest=published_contest,
+        user=teacher,
+        exam_status=ExamStatus.NOT_STARTED,
+    )
+
+    assert validate_exam_operation(published_contest, teacher) == participant
+
+    adapted_participant, response = validate_exam_operation_for_view(
+        published_contest,
+        teacher,
+    )
+
+    assert response is None
+    assert adapted_participant == participant
+    assert not isinstance(adapted_participant, tuple)
+
+
+@pytest.mark.django_db
+def test_validate_exam_operation_admin_bypass_without_participant_returns_none(
+    teacher: User,
+    published_contest: Contest,
+):
+    assert validate_exam_operation(published_contest, teacher) is None
+
+    adapted_participant, response = validate_exam_operation_for_view(
+        published_contest,
+        teacher,
+    )
+
+    assert adapted_participant is None
+    assert response is None
+
+
 @pytest.mark.django_db
 def test_validate_exam_operation_view_adapter_preserves_legacy_error_response(
     teacher: User,
diff --git a/backend/apps/contests/tests/test_participant_dashboard_api.py b/backend/apps/contests/tests/test_participant_dashboard_api.py
index 6898b2df..f51cbbb3 100644
--- a/backend/apps/contests/tests/test_participant_dashboard_api.py
+++ b/backend/apps/contests/tests/test_participant_dashboard_api.py
@@ -63,7 +63,6 @@ def _create_participant(self, contest: Contest) -> ContestParticipant:
             user=self.student,
             exam_status=ExamStatus.IN_PROGRESS,
             started_at=timezone.now() - timedelta(minutes=20),
-            nickname="Stu Dashboard",
             score=12,
             violation_count=2,
         )
diff --git a/backend/apps/contests/views/contest.py b/backend/apps/contests/views/contest.py
index 17b16314..c80a9c43 100644
--- a/backend/apps/contests/views/contest.py
+++ b/backend/apps/contests/views/contest.py
@@ -212,7 +212,6 @@ def _ensure_classroom_bound_participant(self, contest: Contest, user):
                     if contest.delivery_mode == "practice"
                     else AssignmentState.ACCEPTED
                 ),
-                "nickname": user.username,
             },
         )
         return participant, created, None
@@ -855,9 +854,6 @@ def register(self, request, pk=None):
         )
         if error_response is not None:
             return error_response
-        if participant.nickname != user.username and not participant.nickname:
-            participant.nickname = user.username
-            participant.save(update_fields=["nickname"])
         if not created:
             raise DRFValidationError('Already registered')
         ContestActivityViewSet.log_activity(
@@ -871,46 +867,6 @@ def register(self, request, pk=None):
             status=status.HTTP_201_CREATED,
         )
 
-    @action(detail=True, methods=['post'], permission_classes=[permissions.IsAuthenticated], url_path='update_nickname')
-    def update_nickname(self, request, pk=None):
-        """
-        Allow user to update their nickname in an anonymous contest.
-        """
-        contest = self.get_object()
-        user = request.user
-
-        if not contest.anonymous_mode_enabled:
-            return Response(
-                {'error': 'Anonymous mode is not enabled for this contest'},
-                status=status.HTTP_400_BAD_REQUEST
-            )
-
-        try:
-            participant = ContestParticipant.objects.get(contest=contest, user=user)
-        except ContestParticipant.DoesNotExist:
-            return Response(
-                {'error': 'Not registered for this contest'},
-                status=status.HTTP_400_BAD_REQUEST
-            )
-
-        nickname = request.data.get('nickname', '').strip()
-        if not nickname:
-            nickname = user.username
-
-        if len(nickname) > 50:
-            return Response(
-                {'error': 'Nickname is too long (max 50 characters)'},
-                status=status.HTTP_400_BAD_REQUEST
-            )
-
-        participant.nickname = nickname
-        participant.save()
-
-        return Response({
-            'status': 'updated',
-            'nickname': nickname
-        })
-
     @action(detail=True, methods=['post'], permission_classes=[permissions.IsAuthenticated])
     def enter(self, request, pk=None):
         """
diff --git a/backend/apps/contests/views/exam_answer.py b/backend/apps/contests/views/exam_answer.py
index 86f4ca5f..392a7997 100644
--- a/backend/apps/contests/views/exam_answer.py
+++ b/backend/apps/contests/views/exam_answer.py
@@ -64,6 +64,21 @@ def _student_participants_qs(self, contest):
             user__role='student',
         ).select_related('user')
 
+    def _can_view_dashboard_summary(self, user, contest):
+        if can_manage_contest(user, contest):
+            return True
+        if not contest.results_published:
+            return False
+        return ContestParticipant.objects.filter(
+            contest=contest,
+            user=user,
+        ).exists()
+
+    @staticmethod
+    def _participant_display_name(participant):
+        profile = getattr(participant.user, 'profile', None)
+        return getattr(profile, 'display_name', '') or ''
+
     @staticmethod
     def _build_score_distribution(scores, max_score):
         buckets = [
@@ -151,8 +166,7 @@ def _build_option_distribution(cls, question, answers, participants_by_id):
                         participants.append({
                             'participant_id': participant.id,
                             'username': participant.user.username,
-                            'nickname': participant.nickname or None,
-                            'display_name': participant.nickname or participant.user.username,
+                            'display_name': cls._participant_display_name(participant),
                         })
 
             if isinstance(correct_answer, list):
@@ -355,16 +369,17 @@ def _parse_dashboard_kind(cls, raw):
 
     @action(detail=False, methods=['get'], url_path='dashboard-summary')
     def dashboard_summary(self, request, contest_pk=None):
-        """Contest result dashboard summary (teacher/admin only).
+        """Contest result dashboard summary.
 
         Supports ``?kind=<alias|csv of enums>`` to filter the per-question
         ``questions`` array (e.g. ``?kind=subjective``). Contest-level summary
         (average, median, score distribution) is always computed over all
-        questions so numbers stay consistent across callers.
+        questions so numbers stay consistent across callers. Contest staff can
+        view it anytime; participants can view it after results are published.
         """
         contest = self._get_contest(contest_pk)
-        if not can_manage_contest(request.user, contest):
-            raise PermissionDenied('Only contest staff can view dashboard summary.')
+        if not self._can_view_dashboard_summary(request.user, contest):
+            raise PermissionDenied('Results dashboard summary is not available.')
 
         kind_filter = self._parse_dashboard_kind(request.query_params.get('kind'))
 
@@ -544,8 +559,7 @@ def question_detail(self, request, contest_pk=None):
             {
                 'participant_id': participant.id,
                 'username': participant.user.username,
-                'nickname': participant.nickname or None,
-                'display_name': participant.nickname or participant.user.username,
+                'display_name': self._participant_display_name(participant),
             }
             for participant in participants
             if participant.id not in answered_participant_ids
@@ -560,10 +574,8 @@ def question_detail(self, request, contest_pk=None):
                     'exam_answer_id': answer['id'],
                     'participant_id': answer['participant_id'],
                     'username': participants_by_id[answer['participant_id']].user.username,
-                    'nickname': participants_by_id[answer['participant_id']].nickname or None,
-                    'display_name': (
-                        participants_by_id[answer['participant_id']].nickname
-                        or participants_by_id[answer['participant_id']].user.username
+                    'display_name': self._participant_display_name(
+                        participants_by_id[answer['participant_id']],
                     ),
                     'score': float(answer['score']) if answer['score'] is not None else None,
                     'graded_at': answer['graded_at'],
diff --git a/backend/apps/core/management/commands/seed_loadtest_data.py b/backend/apps/core/management/commands/seed_loadtest_data.py
index c87614e1..dbfc132d 100644
--- a/backend/apps/core/management/commands/seed_loadtest_data.py
+++ b/backend/apps/core/management/commands/seed_loadtest_data.py
@@ -292,7 +292,7 @@ def _register_participants(self, contest):
         for student in students:
             if student.id not in existing:
                 new_participants.append(
-                    ContestParticipant(contest=contest, user=student, nickname=student.username)
+                    ContestParticipant(contest=contest, user=student)
                 )
         if new_participants:
             ContestParticipant.objects.bulk_create(new_participants, ignore_conflicts=True)
diff --git a/backend/apps/submissions/managers.py b/backend/apps/submissions/managers.py
index e5ac4946..9a4045b4 100644
--- a/backend/apps/submissions/managers.py
+++ b/backend/apps/submissions/managers.py
@@ -5,11 +5,8 @@
 
 from django.contrib.auth import get_user_model
 from django.db import models
-from django.db.models import OuterRef, Subquery
 from django.utils import timezone
 
-from apps.contests.models import ContestParticipant
-
 User = get_user_model()
 
 
@@ -35,7 +32,6 @@ def optimized_for_list(self) -> "SubmissionQuerySet":
             "problem__id",
             "problem__question_asset__title",
             "contest__id",
-            "contest__anonymous_mode_enabled",
         ).select_related("user", "problem", "problem__question_asset", "contest")
 
     def visible_to(
@@ -55,13 +51,6 @@ def visible_to(
             and (user.is_staff or getattr(user, "role", "") in ["admin", "teacher"])
         )
 
-        if contest_id:
-            nickname_subquery = ContestParticipant.objects.filter(
-                contest_id=contest_id,
-                user_id=OuterRef("user_id"),
-            ).values("nickname")[:1]
-            queryset = queryset.annotate(_contest_nickname=Subquery(nickname_subquery))
-
         if not include_all:
             if created_after:
                 queryset = queryset.filter(created_at__gte=created_after)
diff --git a/backend/apps/submissions/serializers.py b/backend/apps/submissions/serializers.py
index 680235ed..8ca89301 100644
--- a/backend/apps/submissions/serializers.py
+++ b/backend/apps/submissions/serializers.py
@@ -99,27 +99,7 @@ def get_problem_title(self, obj):
     contest_id = serializers.UUIDField(source='contest.id', read_only=True, allow_null=True)
     
     def get_username(self, obj):
-        """Handle anonymous mode for contests."""
-        # If no contest or anonymous mode not enabled, return real username
-        if not obj.contest or not obj.contest.anonymous_mode_enabled:
-            return obj.user.username
-        
-        request = self.context.get('request')
-        viewer = request.user if request else None
-        
-        # Privileged users or owners see real username
-        is_privileged = viewer and (viewer.is_staff or getattr(viewer, 'role', '') in ['teacher', 'admin'])
-        is_owner = viewer and viewer == obj.user
-        
-        if is_privileged or is_owner:
-            return obj.user.username
-        
-        # For others, return nickname if available
-        # Use annotated field from queryset (added via Subquery in ViewSet)
-        if hasattr(obj, '_contest_nickname') and obj._contest_nickname:
-            return obj._contest_nickname
-        
-        # Fallback to real username
+        """Return submitter username."""
         return obj.user.username
     
     class Meta:
diff --git a/backend/apps/submissions/tests/test_submission_legacy_flows.py b/backend/apps/submissions/tests/test_submission_legacy_flows.py
index 0f67c4aa..31ee0425 100644
--- a/backend/apps/submissions/tests/test_submission_legacy_flows.py
+++ b/backend/apps/submissions/tests/test_submission_legacy_flows.py
@@ -65,7 +65,6 @@ class Meta:
     contest = factory.SubFactory(ContestFactory)
     user = factory.SubFactory(UserFactory)
     exam_status = ExamStatus.NOT_STARTED
-    nickname = ""
 
 
 @pytest.fixture
diff --git a/backend/apps/submissions/tests/test_submission_service.py b/backend/apps/submissions/tests/test_submission_service.py
index c4f01b85..ecb638e8 100644
--- a/backend/apps/submissions/tests/test_submission_service.py
+++ b/backend/apps/submissions/tests/test_submission_service.py
@@ -73,7 +73,6 @@ class Meta:
     contest = factory.SubFactory(ContestFactory)
     user = factory.SubFactory(UserFactory)
     exam_status = ExamStatus.IN_PROGRESS
-    nickname = ""
 
 
 # ---------------------------------------------------------------------------
diff --git a/docs/superpowers/plans/2026-05-05-contest-conversation-implementation.md b/docs/superpowers/plans/2026-05-05-contest-conversation-implementation.md
new file mode 100644
index 00000000..3b8b750a
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-05-contest-conversation-implementation.md
@@ -0,0 +1,2603 @@
+# 競賽公告與對話功能 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 取代既有 Clarification 模型為雙向 Conversation thread，新增 navbar 通知鈴鐺，並讓教師於 proctoring panel 對特定學生發訊息。
+
+**Architecture:**
+- Backend：新增 `ContestConversation` + `ContestMessage`，`(contest, student)` unique；同 migration 刪除舊 `Clarification` 表
+- Frontend：拆掉 `ContestClarifications.tsx` 巨檔，新增 `discussion/` 與 `notification/` 兩個元件夾、兩個 hook（`useContestConversations`、`useContestUnread`），鈴鐺掛在 `ContestLayout` 的 `HeaderGlobalBar`
+- 已讀狀態用 localStorage（無後端 read receipt）
+
+**Tech Stack:** Django 5 + DRF（後端）、React 18 + Carbon Design System + react-router-dom + react-i18next（前端）、pytest + RTL/Vitest（測試）
+
+**參考文件：** `docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md`
+
+---
+
+## Phase 1：Backend 模型 + Migration
+
+### Task 1: 新增 Conversation/Message model 並移除 Clarification
+
+**Files:**
+- Modify: `backend/apps/contests/models.py`
+- Modify: `backend/apps/contests/admin.py`
+- Create: `backend/apps/contests/migrations/0078_drop_clarification_add_conversation.py`
+
+- [ ] **Step 1：在 `models.py` 中刪除 `Clarification` class**
+
+定位 `backend/apps/contests/models.py:553-610`，整段 `class Clarification(models.Model)` 連同其 Meta 與 `__str__` 全部刪除。
+
+- [ ] **Step 2：在 `models.py` 末尾、`ContestActivity` class 之前新增兩個新 model**
+
+```python
+class ContestConversation(models.Model):
+    """
+    Single conversation thread between a student and the teaching team.
+    Unique per (contest, student) - one ongoing conversation per pair.
+    """
+    contest = models.ForeignKey(
+        Contest,
+        on_delete=models.CASCADE,
+        related_name='conversations',
+        verbose_name='競賽',
+    )
+    student = models.ForeignKey(
+        User,
+        on_delete=models.CASCADE,
+        related_name='contest_conversations',
+        verbose_name='學生',
+    )
+    created_at = models.DateTimeField(auto_now_add=True, verbose_name='建立時間')
+    last_message_at = models.DateTimeField(verbose_name='最後一則訊息時間')
+
+    class Meta:
+        db_table = 'contest_conversations'
+        verbose_name = '競賽對話'
+        verbose_name_plural = '競賽對話'
+        unique_together = [('contest', 'student')]
+        ordering = ['-last_message_at']
+
+    def __str__(self):
+        return f"Conversation #{self.id} ({self.student.username} in contest {self.contest_id})"
+
+
+class ContestMessage(models.Model):
+    """
+    A single message inside a ContestConversation thread.
+    """
+    SENDER_ROLE_CHOICES = [
+        ('student', 'Student'),
+        ('teacher', 'Teacher'),
+    ]
+    conversation = models.ForeignKey(
+        ContestConversation,
+        on_delete=models.CASCADE,
+        related_name='messages',
+        verbose_name='對話',
+    )
+    sender = models.ForeignKey(
+        User,
+        on_delete=models.SET_NULL,
+        null=True,
+        related_name='sent_contest_messages',
+        verbose_name='發送者',
+    )
+    sender_role = models.CharField(
+        max_length=10,
+        choices=SENDER_ROLE_CHOICES,
+        verbose_name='發送者角色',
+    )
+    content = models.TextField(verbose_name='內容')
+    created_at = models.DateTimeField(auto_now_add=True, verbose_name='建立時間')
+
+    class Meta:
+        db_table = 'contest_messages'
+        verbose_name = '競賽訊息'
+        verbose_name_plural = '競賽訊息'
+        ordering = ['created_at']
+
+    def __str__(self):
+        return f"Message #{self.id} from {self.sender_role} in conv {self.conversation_id}"
+```
+
+- [ ] **Step 3：在 `admin.py` 中刪除 Clarification 註冊、新增兩個 model**
+
+開啟 `backend/apps/contests/admin.py`，搜尋 `Clarification` 並把所有相關 import / `@admin.register(Clarification)` / class 整段刪除，於檔案結尾追加：
+
+```python
+from .models import ContestConversation, ContestMessage
+
+
+@admin.register(ContestConversation)
+class ContestConversationAdmin(admin.ModelAdmin):
+    list_display = ('id', 'contest', 'student', 'last_message_at', 'created_at')
+    list_filter = ('contest',)
+    search_fields = ('student__username',)
+    readonly_fields = ('created_at', 'last_message_at')
+
+
+@admin.register(ContestMessage)
+class ContestMessageAdmin(admin.ModelAdmin):
+    list_display = ('id', 'conversation', 'sender_role', 'sender', 'created_at')
+    list_filter = ('sender_role',)
+    readonly_fields = ('created_at',)
+```
+
+- [ ] **Step 4：產生 migration**
+
+Run：
+```bash
+bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev exec -T backend python manage.py makemigrations contests --name drop_clarification_add_conversation
+```
+
+Expected：產生 `backend/apps/contests/migrations/0078_drop_clarification_add_conversation.py`，內含 `DeleteModel(Clarification)` + `CreateModel(ContestConversation)` + `CreateModel(ContestMessage)`。
+
+- [ ] **Step 5：套用 migration（dev DB 不保留 Clarification 資料）**
+
+```bash
+bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev exec -T backend python manage.py migrate contests
+```
+
+Expected：output 含 `0078_drop_clarification_add_conversation... OK`。
+
+- [ ] **Step 6：Commit**
+
+```bash
+git add backend/apps/contests/models.py backend/apps/contests/admin.py backend/apps/contests/migrations/0078_drop_clarification_add_conversation.py
+git commit -m "feat(contests): replace Clarification with Conversation+Message models"
+```
+
+---
+
+### Task 2: 移除舊 Clarification 引用（serializers / urls / views）
+
+**Files:**
+- Modify: `backend/apps/contests/serializers.py`
+- Modify: `backend/apps/contests/urls.py`
+- Modify: `backend/apps/contests/views/__init__.py`
+- Delete: `backend/apps/contests/views/clarification.py`
+
+- [ ] **Step 1：刪除 `views/clarification.py`**
+
+```bash
+rm backend/apps/contests/views/clarification.py
+```
+
+- [ ] **Step 2：在 `views/__init__.py` 中移除 `ClarificationViewSet` 的 export**
+
+開啟 `backend/apps/contests/views/__init__.py`，刪除 `from .clarification import ClarificationViewSet` 與相應的 `__all__` 條目。
+
+- [ ] **Step 3：在 `urls.py` 中移除 clarification import + register**
+
+定位 `backend/apps/contests/urls.py:7` 的 `ClarificationViewSet` import 整行刪除；同時刪除 `backend/apps/contests/urls.py:24` 的：
+```python
+contest_router.register(r'clarifications', ClarificationViewSet, basename='contest-clarifications')
+```
+
+- [ ] **Step 4：在 `serializers.py` 中刪除三個 Clarification serializer**
+
+`grep -n "Clarification" backend/apps/contests/serializers.py` 找出 `ClarificationSerializer`、`ClarificationCreateSerializer`、`ClarificationReplySerializer` 三個 class，整段刪除（含相關 imports 中的 `Clarification` 引用）。
+
+- [ ] **Step 5：驗證沒有殘餘引用**
+
+```bash
+grep -rn "Clarification" backend/apps/contests/ --include="*.py"
+```
+Expected：只剩下 migrations 歷史檔（不可動）內提及 Clarification 的舊紀錄；views/serializers/admin/urls 都不再 import 或使用該名稱。
+
+- [ ] **Step 6：Commit**
+
+```bash
+git add backend/apps/contests/serializers.py backend/apps/contests/urls.py backend/apps/contests/views/__init__.py backend/apps/contests/views/clarification.py
+git commit -m "refactor(contests): drop ClarificationViewSet and serializers"
+```
+
+---
+
+### Task 3: 新增 Conversation/Message serializer
+
+**Files:**
+- Modify: `backend/apps/contests/serializers.py`
+
+- [ ] **Step 1：在 `serializers.py` 末尾追加三個 serializer**
+
+```python
+class ContestMessageSerializer(serializers.ModelSerializer):
+    sender_username = serializers.CharField(source='sender.username', read_only=True, default=None)
+
+    class Meta:
+        model = ContestMessage
+        fields = ['id', 'sender', 'sender_username', 'sender_role', 'content', 'created_at']
+        read_only_fields = ['id', 'sender', 'sender_username', 'sender_role', 'created_at']
+
+
+class ContestConversationListSerializer(serializers.ModelSerializer):
+    student_username = serializers.CharField(source='student.username', read_only=True)
+    last_message = serializers.SerializerMethodField()
+    first_sender_role = serializers.SerializerMethodField()
+
+    class Meta:
+        model = ContestConversation
+        fields = [
+            'id', 'student', 'student_username',
+            'created_at', 'last_message_at',
+            'last_message', 'first_sender_role',
+        ]
+
+    def get_last_message(self, obj):
+        msg = obj.messages.order_by('-created_at').first()
+        if not msg:
+            return None
+        return ContestMessageSerializer(msg).data
+
+    def get_first_sender_role(self, obj):
+        msg = obj.messages.order_by('created_at').first()
+        return msg.sender_role if msg else None
+
+
+class ContestConversationDetailSerializer(ContestConversationListSerializer):
+    messages = ContestMessageSerializer(many=True, read_only=True)
+
+    class Meta(ContestConversationListSerializer.Meta):
+        fields = ContestConversationListSerializer.Meta.fields + ['messages']
+
+
+class ContestConversationCreateSerializer(serializers.Serializer):
+    initial_content = serializers.CharField()
+    student_id = serializers.UUIDField(required=False, allow_null=True)
+
+
+class SendMessageToStudentSerializer(serializers.Serializer):
+    student_id = serializers.UUIDField()
+    content = serializers.CharField()
+
+
+class AppendMessageSerializer(serializers.Serializer):
+    content = serializers.CharField()
+```
+
+確保上方 `from .models import` 區塊新增 `ContestConversation, ContestMessage`。
+
+- [ ] **Step 2：Commit**
+
+```bash
+git add backend/apps/contests/serializers.py
+git commit -m "feat(contests): add Conversation/Message serializers"
+```
+
+---
+
+### Task 4: 新增 ContestConversationViewSet
+
+**Files:**
+- Create: `backend/apps/contests/views/conversation.py`
+- Modify: `backend/apps/contests/views/__init__.py`
+- Modify: `backend/apps/contests/urls.py`
+
+- [ ] **Step 1：建立 `views/conversation.py`**
+
+```python
+"""ContestConversationViewSet."""
+from django.db import IntegrityError, transaction
+from django.db.models import OuterRef, Subquery
+from django.utils import timezone
+from rest_framework import viewsets, permissions, status
+from rest_framework.decorators import action
+from rest_framework.exceptions import PermissionDenied, NotFound, ValidationError
+from rest_framework.response import Response
+from django.shortcuts import get_object_or_404
+
+from ..models import Contest, ContestConversation, ContestMessage, User
+from ..serializers import (
+    ContestConversationListSerializer,
+    ContestConversationDetailSerializer,
+    ContestConversationCreateSerializer,
+    SendMessageToStudentSerializer,
+    AppendMessageSerializer,
+    ContestMessageSerializer,
+)
+from ..permissions import can_manage_contest
+
+
+def _is_contest_active_for_student(contest):
+    now = timezone.now()
+    if contest.end_time and now > contest.end_time:
+        return False
+    return True
+
+
+def _annotate_last_message_role(qs):
+    last_msg_role = ContestMessage.objects.filter(
+        conversation=OuterRef('pk')
+    ).order_by('-created_at').values('sender_role')[:1]
+    return qs.annotate(_last_role=Subquery(last_msg_role))
+
+
+class ContestConversationViewSet(viewsets.GenericViewSet):
+    """
+    GET    /contests/{contest_pk}/conversations/                  教師 list
+    GET    /contests/{contest_pk}/conversations/me/               學生取自己的（404 if none）
+    GET    /contests/{contest_pk}/conversations/{pk}/             retrieve（含 messages）
+    POST   /contests/{contest_pk}/conversations/                  學生 create（idempotent）
+    POST   /contests/{contest_pk}/conversations/{pk}/messages/    append message
+    POST   /contests/{contest_pk}/conversations/messages-to-student/  教師 ensure-and-append
+    """
+    permission_classes = [permissions.IsAuthenticated]
+
+    def _get_contest(self):
+        contest_id = self.kwargs.get('contest_pk')
+        return get_object_or_404(Contest, id=contest_id)
+
+    def _is_manager(self, contest):
+        return can_manage_contest(self.request.user, contest)
+
+    def _serialize_detail(self, conversation):
+        return ContestConversationDetailSerializer(conversation).data
+
+    # ── list (teacher only) ────────────────────────────────────────────
+    def list(self, request, contest_pk=None):
+        contest = self._get_contest()
+        if not self._is_manager(request.user):
+            raise PermissionDenied("Only teaching staff can list conversations.")
+
+        qs = ContestConversation.objects.filter(contest=contest).select_related('student')
+        qs = _annotate_last_message_role(qs)
+
+        awaiting = request.query_params.get('awaiting')
+        if awaiting == 'teacher':
+            qs = qs.filter(_last_role='student')
+        elif awaiting == 'student':
+            qs = qs.filter(_last_role='teacher')
+
+        data = ContestConversationListSerializer(qs, many=True).data
+        return Response(data)
+
+    # ── retrieve ───────────────────────────────────────────────────────
+    def retrieve(self, request, pk=None, contest_pk=None):
+        contest = self._get_contest()
+        conv = get_object_or_404(ContestConversation, pk=pk, contest=contest)
+        if not self._is_manager(request.user) and conv.student_id != request.user.id:
+            raise PermissionDenied("You can only view your own conversation.")
+        return Response(self._serialize_detail(conv))
+
+    # ── student: my conversation ──────────────────────────────────────
+    @action(detail=False, methods=['get'], url_path='me')
+    def me(self, request, contest_pk=None):
+        contest = self._get_contest()
+        try:
+            conv = ContestConversation.objects.get(contest=contest, student=request.user)
+        except ContestConversation.DoesNotExist:
+            raise NotFound("No conversation yet.")
+        return Response(self._serialize_detail(conv))
+
+    # ── create (student-initiated) ────────────────────────────────────
+    def create(self, request, contest_pk=None):
+        contest = self._get_contest()
+        serializer = ContestConversationCreateSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        if self._is_manager(request.user):
+            raise PermissionDenied(
+                "Teachers should use POST /messages-to-student/ to send messages."
+            )
+
+        if not _is_contest_active_for_student(contest):
+            raise PermissionDenied("Contest has ended; cannot start a new message.")
+
+        with transaction.atomic():
+            conv, created = ContestConversation.objects.get_or_create(
+                contest=contest,
+                student=request.user,
+                defaults={'last_message_at': timezone.now()},
+            )
+            self._append_message(
+                conv, sender=request.user, sender_role='student',
+                content=serializer.validated_data['initial_content'],
+            )
+        return Response(
+            self._serialize_detail(conv),
+            status=status.HTTP_201_CREATED if created else status.HTTP_200_OK,
+        )
+
+    # ── append message ────────────────────────────────────────────────
+    @action(detail=True, methods=['post'], url_path='messages')
+    def append_message(self, request, pk=None, contest_pk=None):
+        contest = self._get_contest()
+        conv = get_object_or_404(ContestConversation, pk=pk, contest=contest)
+        serializer = AppendMessageSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        if self._is_manager(request.user):
+            sender_role = 'teacher'
+        else:
+            if conv.student_id != request.user.id:
+                raise PermissionDenied("You can only post in your own conversation.")
+            if not _is_contest_active_for_student(contest):
+                raise PermissionDenied("Contest has ended; cannot post message.")
+            sender_role = 'student'
+
+        msg = self._append_message(
+            conv, sender=request.user, sender_role=sender_role,
+            content=serializer.validated_data['content'],
+        )
+        return Response(ContestMessageSerializer(msg).data, status=status.HTTP_201_CREATED)
+
+    # ── teacher: ensure-and-append to a specific student ──────────────
+    @action(detail=False, methods=['post'], url_path='messages-to-student')
+    def messages_to_student(self, request, contest_pk=None):
+        contest = self._get_contest()
+        if not self._is_manager(request.user):
+            raise PermissionDenied("Only teaching staff can use this endpoint.")
+        serializer = SendMessageToStudentSerializer(data=request.data)
+        serializer.is_valid(raise_exception=True)
+
+        student_id = serializer.validated_data['student_id']
+        try:
+            student = User.objects.get(id=student_id)
+        except User.DoesNotExist:
+            raise ValidationError({'student_id': 'Student not found.'})
+
+        with transaction.atomic():
+            conv, _created = ContestConversation.objects.get_or_create(
+                contest=contest, student=student,
+                defaults={'last_message_at': timezone.now()},
+            )
+            self._append_message(
+                conv, sender=request.user, sender_role='teacher',
+                content=serializer.validated_data['content'],
+            )
+        return Response(self._serialize_detail(conv), status=status.HTTP_201_CREATED)
+
+    # ── helper ────────────────────────────────────────────────────────
+    def _append_message(self, conversation, sender, sender_role, content):
+        msg = ContestMessage.objects.create(
+            conversation=conversation,
+            sender=sender,
+            sender_role=sender_role,
+            content=content,
+        )
+        conversation.last_message_at = msg.created_at
+        conversation.save(update_fields=['last_message_at'])
+        return msg
+```
+
+- [ ] **Step 2：在 `views/__init__.py` 加上 export**
+
+```python
+from .conversation import ContestConversationViewSet
+```
+
+並加進 `__all__`（若有）。
+
+- [ ] **Step 3：在 `urls.py` 註冊新 router**
+
+`backend/apps/contests/urls.py` 內找 `contest_router.register(r'announcements', ...)` 區塊，下方追加：
+
+```python
+from .views import ContestConversationViewSet
+contest_router.register(r'conversations', ContestConversationViewSet, basename='contest-conversations')
+```
+
+（若 `from .views import ...` 已存在則直接把 `ContestConversationViewSet` 加進去）
+
+- [ ] **Step 4：用 Django shell 確認 URL 可解析**
+
+```bash
+bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev exec -T backend python manage.py show_urls | grep conversation
+```
+
+Expected：列出 `/api/contests/<contest_pk>/conversations/` 等 endpoints。
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add backend/apps/contests/views/conversation.py backend/apps/contests/views/__init__.py backend/apps/contests/urls.py
+git commit -m "feat(contests): add ContestConversationViewSet"
+```
+
+---
+
+### Task 5: 後端測試（list / create / append / messages-to-student / 權限）
+
+**Files:**
+- Create: `backend/apps/contests/tests/conversation/__init__.py`
+- Create: `backend/apps/contests/tests/conversation/test_conversation_viewset.py`
+
+- [ ] **Step 1：建立測試骨架**
+
+```python
+# backend/apps/contests/tests/conversation/__init__.py
+```
+（空檔案）
+
+- [ ] **Step 2：撰寫測試**
+
+```python
+# backend/apps/contests/tests/conversation/test_conversation_viewset.py
+import pytest
+from django.urls import reverse
+from rest_framework.test import APIClient
+from django.contrib.auth import get_user_model
+
+from apps.contests.models import (
+    Contest, ContestParticipant, ContestConversation, ContestMessage
+)
+
+User = get_user_model()
+
+
+@pytest.fixture
+def teacher(db):
+    return User.objects.create_user(username='teacher1', password='x', role='teacher')
+
+
+@pytest.fixture
+def student(db):
+    return User.objects.create_user(username='student1', password='x', role='student')
+
+
+@pytest.fixture
+def other_student(db):
+    return User.objects.create_user(username='student2', password='x', role='student')
+
+
+@pytest.fixture
+def contest(db, teacher, student, other_student):
+    from django.utils import timezone
+    from datetime import timedelta
+    c = Contest.objects.create(
+        name='Test',
+        owner=teacher,
+        start_time=timezone.now() - timedelta(hours=1),
+        end_time=timezone.now() + timedelta(hours=1),
+    )
+    ContestParticipant.objects.create(contest=c, user=student)
+    ContestParticipant.objects.create(contest=c, user=other_student)
+    return c
+
+
+def _client(user):
+    c = APIClient()
+    c.force_authenticate(user=user)
+    return c
+
+
+def test_student_create_conversation_idempotent(contest, student):
+    url = f'/api/contests/{contest.id}/conversations/'
+    client = _client(student)
+    r1 = client.post(url, {'initial_content': 'hello'}, format='json')
+    assert r1.status_code == 201
+    conv_id = r1.data['id']
+
+    r2 = client.post(url, {'initial_content': 'hello again'}, format='json')
+    assert r2.status_code == 200
+    assert r2.data['id'] == conv_id
+    assert ContestConversation.objects.filter(contest=contest, student=student).count() == 1
+    assert ContestMessage.objects.filter(conversation_id=conv_id).count() == 2
+
+
+def test_student_get_me_returns_404_when_no_conversation(contest, student):
+    url = f'/api/contests/{contest.id}/conversations/me/'
+    r = _client(student).get(url)
+    assert r.status_code == 404
+
+
+def test_student_cannot_view_other_students_conversation(contest, student, other_student):
+    conv = ContestConversation.objects.create(
+        contest=contest, student=other_student, last_message_at='2024-01-01T00:00:00Z'
+    )
+    url = f'/api/contests/{contest.id}/conversations/{conv.id}/'
+    r = _client(student).get(url)
+    assert r.status_code == 403
+
+
+def test_teacher_list_filters_awaiting_teacher(contest, teacher, student, other_student):
+    conv1 = ContestConversation.objects.create(
+        contest=contest, student=student, last_message_at='2024-01-01T00:00:00Z'
+    )
+    ContestMessage.objects.create(conversation=conv1, sender=student, sender_role='student', content='ask')
+    conv2 = ContestConversation.objects.create(
+        contest=contest, student=other_student, last_message_at='2024-01-01T00:00:00Z'
+    )
+    ContestMessage.objects.create(conversation=conv2, sender=other_student, sender_role='student', content='q')
+    ContestMessage.objects.create(conversation=conv2, sender=teacher, sender_role='teacher', content='a')
+
+    url = f'/api/contests/{contest.id}/conversations/?awaiting=teacher'
+    r = _client(teacher).get(url)
+    assert r.status_code == 200
+    assert {c['id'] for c in r.data} == {conv1.id}
+
+
+def test_student_create_blocked_after_contest_ended(contest, student):
+    from django.utils import timezone
+    from datetime import timedelta
+    contest.end_time = timezone.now() - timedelta(minutes=1)
+    contest.save()
+
+    url = f'/api/contests/{contest.id}/conversations/'
+    r = _client(student).post(url, {'initial_content': 'late'}, format='json')
+    assert r.status_code == 403
+
+
+def test_teacher_messages_to_student_creates_conversation(contest, teacher, student):
+    url = f'/api/contests/{contest.id}/conversations/messages-to-student/'
+    r = _client(teacher).post(url, {'student_id': str(student.id), 'content': 'pay attention'}, format='json')
+    assert r.status_code == 201
+    conv = ContestConversation.objects.get(contest=contest, student=student)
+    msgs = list(conv.messages.all())
+    assert len(msgs) == 1
+    assert msgs[0].sender_role == 'teacher'
+
+
+def test_teacher_messages_to_student_appends_to_existing(contest, teacher, student):
+    conv = ContestConversation.objects.create(
+        contest=contest, student=student, last_message_at='2024-01-01T00:00:00Z'
+    )
+    ContestMessage.objects.create(conversation=conv, sender=student, sender_role='student', content='q')
+
+    url = f'/api/contests/{contest.id}/conversations/messages-to-student/'
+    r = _client(teacher).post(url, {'student_id': str(student.id), 'content': 'a'}, format='json')
+    assert r.status_code == 201
+    assert conv.messages.count() == 2
+
+
+def test_student_append_message_blocked_after_contest_ended(contest, student):
+    conv = ContestConversation.objects.create(
+        contest=contest, student=student, last_message_at='2024-01-01T00:00:00Z'
+    )
+    from django.utils import timezone
+    from datetime import timedelta
+    contest.end_time = timezone.now() - timedelta(minutes=1)
+    contest.save()
+
+    url = f'/api/contests/{contest.id}/conversations/{conv.id}/messages/'
+    r = _client(student).post(url, {'content': 'late'}, format='json')
+    assert r.status_code == 403
+
+
+def test_student_cannot_use_messages_to_student_endpoint(contest, student, other_student):
+    url = f'/api/contests/{contest.id}/conversations/messages-to-student/'
+    r = _client(student).post(url, {'student_id': str(other_student.id), 'content': 'x'}, format='json')
+    assert r.status_code == 403
+```
+
+- [ ] **Step 3：執行測試**
+
+```bash
+bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev exec -T -e PYTEST_ADDOPTS='--no-cov' backend pytest apps/contests/tests/conversation/ -v
+```
+
+Expected：所有測試 pass。如有 fail，回頭 debug View / Serializer。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add backend/apps/contests/tests/conversation/
+git commit -m "test(contests): add Conversation viewset coverage"
+```
+
+---
+
+## Phase 2：Frontend Infrastructure
+
+### Task 6: Entity types + API repository
+
+**Files:**
+- Modify: `frontend/src/core/entities/contest.entity.ts`
+- Create: `frontend/src/infrastructure/api/repositories/contestConversation.ts`
+- Modify: `frontend/src/infrastructure/api/repositories/index.ts`
+- Modify: `frontend/src/infrastructure/mappers/contest.mapper.ts`
+
+- [ ] **Step 1：在 `contest.entity.ts` 中新增三個 type，移除 Clarification**
+
+開啟 `frontend/src/core/entities/contest.entity.ts`，刪除 `Clarification` 相關 type（搜尋 `Clarification` 的所有 export type / interface），於檔案末尾新增：
+
+```typescript
+export type ContestMessageSenderRole = 'student' | 'teacher';
+
+export interface ContestMessage {
+  id: string;
+  sender: string | null;
+  senderUsername: string | null;
+  senderRole: ContestMessageSenderRole;
+  content: string;
+  createdAt: string;
+}
+
+export interface ContestConversation {
+  id: string;
+  student: string;
+  studentUsername: string;
+  createdAt: string;
+  lastMessageAt: string;
+  lastMessage: ContestMessage | null;
+  firstSenderRole: ContestMessageSenderRole | null;
+  messages?: ContestMessage[];
+}
+```
+
+- [ ] **Step 2：在 `contest.mapper.ts` 中新增兩個 mapper，移除 Clarification mapper**
+
+刪除既有 `mapClarificationDto`（搜尋並整段刪除），新增：
+
+```typescript
+import type { ContestConversation, ContestMessage } from '@/core/entities/contest.entity';
+
+export const mapContestMessageDto = (raw: any): ContestMessage => ({
+  id: String(raw.id),
+  sender: raw.sender ? String(raw.sender) : null,
+  senderUsername: raw.sender_username ?? null,
+  senderRole: raw.sender_role,
+  content: raw.content,
+  createdAt: raw.created_at,
+});
+
+export const mapContestConversationDto = (raw: any): ContestConversation => ({
+  id: String(raw.id),
+  student: String(raw.student),
+  studentUsername: raw.student_username ?? '',
+  createdAt: raw.created_at,
+  lastMessageAt: raw.last_message_at,
+  lastMessage: raw.last_message ? mapContestMessageDto(raw.last_message) : null,
+  firstSenderRole: raw.first_sender_role ?? null,
+  messages: Array.isArray(raw.messages) ? raw.messages.map(mapContestMessageDto) : undefined,
+});
+```
+
+- [ ] **Step 3：建立 repository 檔**
+
+```typescript
+// frontend/src/infrastructure/api/repositories/contestConversation.ts
+import apiClient from '@/infrastructure/api/client';
+import {
+  mapContestConversationDto,
+  mapContestMessageDto,
+} from '@/infrastructure/mappers/contest.mapper';
+import type {
+  ContestConversation,
+  ContestMessage,
+} from '@/core/entities/contest.entity';
+
+const base = (contestId: string) => `/api/contests/${contestId}/conversations`;
+
+export const listConversations = async (
+  contestId: string,
+  awaiting?: 'teacher' | 'student',
+): Promise<ContestConversation[]> => {
+  const params = awaiting ? { awaiting } : {};
+  const { data } = await apiClient.get(`${base(contestId)}/`, { params });
+  return (data as unknown[]).map(mapContestConversationDto);
+};
+
+export const getMyConversation = async (
+  contestId: string,
+): Promise<ContestConversation | null> => {
+  try {
+    const { data } = await apiClient.get(`${base(contestId)}/me/`);
+    return mapContestConversationDto(data);
+  } catch (err: any) {
+    if (err?.response?.status === 404) return null;
+    throw err;
+  }
+};
+
+export const getConversation = async (
+  contestId: string,
+  conversationId: string,
+): Promise<ContestConversation> => {
+  const { data } = await apiClient.get(`${base(contestId)}/${conversationId}/`);
+  return mapContestConversationDto(data);
+};
+
+export const createStudentConversation = async (
+  contestId: string,
+  initialContent: string,
+): Promise<ContestConversation> => {
+  const { data } = await apiClient.post(`${base(contestId)}/`, {
+    initial_content: initialContent,
+  });
+  return mapContestConversationDto(data);
+};
+
+export const appendMessage = async (
+  contestId: string,
+  conversationId: string,
+  content: string,
+): Promise<ContestMessage> => {
+  const { data } = await apiClient.post(
+    `${base(contestId)}/${conversationId}/messages/`,
+    { content },
+  );
+  return mapContestMessageDto(data);
+};
+
+export const sendMessageToStudent = async (
+  contestId: string,
+  studentId: string,
+  content: string,
+): Promise<ContestConversation> => {
+  const { data } = await apiClient.post(
+    `${base(contestId)}/messages-to-student/`,
+    { student_id: studentId, content },
+  );
+  return mapContestConversationDto(data);
+};
+```
+
+- [ ] **Step 4：在 `repositories/index.ts` 補 export，並把所有 `createClarification / replyClarification / deleteClarification / getClarifications` 整段刪除**
+
+`grep -n "Clarification" frontend/src/infrastructure/api/repositories/index.ts` 找出後刪除，於底部新增：
+
+```typescript
+export {
+  listConversations,
+  getMyConversation,
+  getConversation,
+  createStudentConversation,
+  appendMessage,
+  sendMessageToStudent,
+} from './contestConversation';
+```
+
+- [ ] **Step 5：型別檢查**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+Expected：通過。預期會有「`useClarifications` 等檔尚未刪除而引用刪除的 type」錯誤 —— 這些檔案會在後續任務中刪除，先把錯誤檔列入下一階段（Phase 6）的清單，**此階段允許這幾個錯誤暫時存在**。
+
+> 若 typecheck 是 CI gate 又無法 pass，可在此 task 提前刪除 `useClarifications.ts`（檔案內容暫時換成 `export {}`），等 Phase 6 真正清理。實作上以「先讓 type 通過為止」為原則。
+
+- [ ] **Step 6：Commit**
+
+```bash
+git add frontend/src/core/entities/contest.entity.ts frontend/src/infrastructure/api/repositories/contestConversation.ts frontend/src/infrastructure/api/repositories/index.ts frontend/src/infrastructure/mappers/contest.mapper.ts
+git commit -m "feat(api): conversation entity + repository"
+```
+
+---
+
+### Task 7: localStorage 已讀工具
+
+**Files:**
+- Create: `frontend/src/features/contest/hooks/contestReadStorage.ts`
+- Create: `frontend/src/features/contest/hooks/contestReadStorage.test.ts`
+
+- [ ] **Step 1：寫失敗測試**
+
+```typescript
+// frontend/src/features/contest/hooks/contestReadStorage.test.ts
+import { describe, it, expect, beforeEach } from 'vitest';
+import {
+  loadReadIds,
+  saveReadIds,
+  markRead,
+  isRead,
+  STORAGE_KEY_PREFIX,
+} from './contestReadStorage';
+
+describe('contestReadStorage', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('returns empty Set when no entry exists', () => {
+    expect(loadReadIds('c1').size).toBe(0);
+  });
+
+  it('persists ids per contest', () => {
+    saveReadIds('c1', new Set(['ann:1', 'msg:5']));
+    expect(loadReadIds('c1')).toEqual(new Set(['ann:1', 'msg:5']));
+    expect(loadReadIds('c2').size).toBe(0);
+  });
+
+  it('markRead adds ids without dropping existing ones', () => {
+    saveReadIds('c1', new Set(['ann:1']));
+    markRead('c1', ['ann:2', 'msg:9']);
+    expect(loadReadIds('c1')).toEqual(new Set(['ann:1', 'ann:2', 'msg:9']));
+  });
+
+  it('isRead reflects storage', () => {
+    saveReadIds('c1', new Set(['ann:1']));
+    expect(isRead('c1', 'ann:1')).toBe(true);
+    expect(isRead('c1', 'ann:2')).toBe(false);
+  });
+
+  it('uses the documented key prefix', () => {
+    saveReadIds('c1', new Set(['ann:1']));
+    expect(localStorage.getItem(`${STORAGE_KEY_PREFIX}c1.readIds`)).toBeTruthy();
+  });
+});
+```
+
+- [ ] **Step 2：執行確認 fail**
+
+```bash
+cd frontend && npm test -- contestReadStorage
+```
+
+Expected：fail（檔案尚不存在）。
+
+- [ ] **Step 3：實作**
+
+```typescript
+// frontend/src/features/contest/hooks/contestReadStorage.ts
+export const STORAGE_KEY_PREFIX = 'qjudge.contest.';
+
+const keyFor = (contestId: string) => `${STORAGE_KEY_PREFIX}${contestId}.readIds`;
+
+export const loadReadIds = (contestId: string): Set<string> => {
+  try {
+    const raw = localStorage.getItem(keyFor(contestId));
+    if (!raw) return new Set();
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? new Set(parsed) : new Set();
+  } catch {
+    return new Set();
+  }
+};
+
+export const saveReadIds = (contestId: string, ids: Set<string>): void => {
+  try {
+    localStorage.setItem(keyFor(contestId), JSON.stringify([...ids]));
+  } catch (err) {
+    console.warn('[contestReadStorage] failed to save', err);
+  }
+};
+
+export const markRead = (contestId: string, ids: string[]): void => {
+  if (ids.length === 0) return;
+  const current = loadReadIds(contestId);
+  ids.forEach((id) => current.add(id));
+  saveReadIds(contestId, current);
+};
+
+export const isRead = (contestId: string, id: string): boolean =>
+  loadReadIds(contestId).has(id);
+```
+
+- [ ] **Step 4：執行測試 pass**
+
+```bash
+cd frontend && npm test -- contestReadStorage
+```
+
+Expected：5 tests pass。
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add frontend/src/features/contest/hooks/contestReadStorage.ts frontend/src/features/contest/hooks/contestReadStorage.test.ts
+git commit -m "feat(contest): localStorage read-tracking utility"
+```
+
+---
+
+### Task 8: useContestConversations hook（取代 useClarifications）
+
+**Files:**
+- Create: `frontend/src/features/contest/hooks/useContestConversations.ts`
+
+- [ ] **Step 1：實作**
+
+```typescript
+// frontend/src/features/contest/hooks/useContestConversations.ts
+import { useCallback, useEffect, useState } from 'react';
+import {
+  listConversations,
+  getMyConversation,
+  getContestAnnouncements,
+} from '@/infrastructure/api/repositories';
+import { mapContestAnnouncementDto } from '@/infrastructure/mappers/contest.mapper';
+import { useInterval } from '@/shared/hooks/useInterval';
+import type {
+  ContestAnnouncement,
+  ContestConversation,
+} from '@/core/entities/contest.entity';
+
+interface Options {
+  pollIntervalMs?: number | null;
+  role: 'student' | 'teacher';
+  awaiting?: 'teacher' | 'student';
+}
+
+export const useContestConversations = (
+  contestId: string,
+  options: Options,
+) => {
+  const [announcements, setAnnouncements] = useState<ContestAnnouncement[]>([]);
+  const [conversations, setConversations] = useState<ContestConversation[]>([]);
+  const [myConversation, setMyConversation] = useState<ContestConversation | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const pollIntervalMs = options.pollIntervalMs ?? null;
+  const role = options.role;
+  const awaiting = options.awaiting;
+
+  const fetchAll = useCallback(
+    async (showLoading = false) => {
+      if (!contestId) return;
+      if (showLoading) setLoading(true);
+      try {
+        const [annData, convPart] = await Promise.all([
+          getContestAnnouncements(contestId),
+          role === 'teacher'
+            ? listConversations(contestId, awaiting)
+            : getMyConversation(contestId).then((c) => (c ? [c] : [])),
+        ]);
+        setAnnouncements(
+          (Array.isArray(annData) ? annData : []).map((it: any) =>
+            mapContestAnnouncementDto(it),
+          ),
+        );
+        if (role === 'teacher') {
+          setConversations(convPart);
+          setMyConversation(null);
+        } else {
+          setConversations([]);
+          setMyConversation(convPart[0] ?? null);
+        }
+        setError(null);
+      } catch (err) {
+        setError(err as Error);
+      } finally {
+        if (showLoading) setLoading(false);
+      }
+    },
+    [contestId, role, awaiting],
+  );
+
+  useEffect(() => {
+    fetchAll(true);
+  }, [fetchAll]);
+
+  useInterval(
+    () => fetchAll(false),
+    contestId && pollIntervalMs && pollIntervalMs > 0 ? pollIntervalMs : null,
+  );
+
+  return {
+    announcements,
+    conversations,
+    myConversation,
+    loading,
+    error,
+    refresh: () => fetchAll(false),
+  };
+};
+```
+
+- [ ] **Step 2：型別檢查**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+Expected：通過（與既有 announcement repository / interval hook 已存在）。
+
+- [ ] **Step 3：Commit**
+
+```bash
+git add frontend/src/features/contest/hooks/useContestConversations.ts
+git commit -m "feat(contest): useContestConversations hook"
+```
+
+---
+
+### Task 9: useContestUnread hook
+
+**Files:**
+- Create: `frontend/src/features/contest/hooks/useContestUnread.ts`
+- Create: `frontend/src/features/contest/hooks/useContestUnread.test.ts`
+
+- [ ] **Step 1：寫失敗測試**
+
+```typescript
+// frontend/src/features/contest/hooks/useContestUnread.test.ts
+import { describe, it, expect, beforeEach } from 'vitest';
+import { computeUnread } from './useContestUnread';
+import type {
+  ContestAnnouncement,
+  ContestConversation,
+} from '@/core/entities/contest.entity';
+
+const ann = (id: string): ContestAnnouncement =>
+  ({ id, title: 't', content: 'c', createdAt: 'x' } as any);
+
+const msg = (id: string, role: 'student' | 'teacher') =>
+  ({ id, senderRole: role, content: 'm', createdAt: 'x', sender: null, senderUsername: null });
+
+const conv = (
+  id: string,
+  messages: ReturnType<typeof msg>[],
+): ContestConversation =>
+  ({
+    id, student: 's', studentUsername: 's',
+    createdAt: 'x', lastMessageAt: 'x',
+    lastMessage: messages[messages.length - 1] ?? null,
+    firstSenderRole: messages[0]?.senderRole ?? null,
+    messages,
+  } as any);
+
+describe('computeUnread', () => {
+  beforeEach(() => localStorage.clear());
+
+  it('student counts unread announcements + teacher messages', () => {
+    const result = computeUnread({
+      contestId: 'c1',
+      role: 'student',
+      announcements: [ann('1'), ann('2')],
+      conversations: [],
+      myConversation: conv('cv1', [
+        msg('m1', 'student'),
+        msg('m2', 'teacher'),
+        msg('m3', 'teacher'),
+      ]),
+      readIds: new Set<string>(),
+    });
+    expect(result.unreadAnnouncementIds).toEqual(['1', '2']);
+    expect(result.unreadMessageIds).toEqual(['m2', 'm3']);
+    expect(result.unreadCount).toBe(4);
+  });
+
+  it('student excludes own messages from unread', () => {
+    const result = computeUnread({
+      contestId: 'c1',
+      role: 'student',
+      announcements: [],
+      conversations: [],
+      myConversation: conv('cv1', [msg('m1', 'student')]),
+      readIds: new Set<string>(),
+    });
+    expect(result.unreadMessageIds).toEqual([]);
+  });
+
+  it('teacher unread = number of conversations awaiting teacher reply', () => {
+    const result = computeUnread({
+      contestId: 'c1',
+      role: 'teacher',
+      announcements: [ann('1')],
+      conversations: [
+        conv('cv1', [msg('m1', 'student')]),
+        conv('cv2', [msg('m2', 'student'), msg('m3', 'teacher')]),
+        conv('cv3', [msg('m4', 'student')]),
+      ],
+      myConversation: null,
+      readIds: new Set<string>(),
+    });
+    expect(result.pendingConversationCount).toBe(2);
+    expect(result.unreadCount).toBe(2);
+    expect(result.unreadAnnouncementIds).toEqual([]);
+  });
+
+  it('respects already-read ids in localStorage', () => {
+    const result = computeUnread({
+      contestId: 'c1',
+      role: 'student',
+      announcements: [ann('1'), ann('2')],
+      conversations: [],
+      myConversation: conv('cv1', [msg('m1', 'teacher'), msg('m2', 'teacher')]),
+      readIds: new Set<string>(['ann:1', 'msg:m1']),
+    });
+    expect(result.unreadAnnouncementIds).toEqual(['2']);
+    expect(result.unreadMessageIds).toEqual(['m2']);
+    expect(result.unreadCount).toBe(2);
+  });
+});
+```
+
+- [ ] **Step 2：執行測試確認 fail**
+
+```bash
+cd frontend && npm test -- useContestUnread
+```
+
+Expected：fail（檔案尚不存在）。
+
+- [ ] **Step 3：實作**
+
+```typescript
+// frontend/src/features/contest/hooks/useContestUnread.ts
+import { useCallback, useMemo, useState } from 'react';
+import type {
+  ContestAnnouncement,
+  ContestConversation,
+} from '@/core/entities/contest.entity';
+import {
+  loadReadIds,
+  markRead as markReadStorage,
+} from './contestReadStorage';
+
+export interface ComputeUnreadInput {
+  contestId: string;
+  role: 'student' | 'teacher';
+  announcements: ContestAnnouncement[];
+  conversations: ContestConversation[];
+  myConversation: ContestConversation | null;
+  readIds: Set<string>;
+}
+
+export interface UnreadSummary {
+  unreadAnnouncementIds: string[];
+  unreadMessageIds: string[];
+  pendingConversationCount: number;
+  unreadCount: number;
+}
+
+export const computeUnread = (input: ComputeUnreadInput): UnreadSummary => {
+  const { role, announcements, conversations, myConversation, readIds } = input;
+
+  const unreadAnnouncementIds = announcements
+    .map((a) => a.id)
+    .filter((id) => !readIds.has(`ann:${id}`));
+
+  if (role === 'teacher') {
+    const pending = conversations.filter(
+      (c) => c.lastMessage?.senderRole === 'student',
+    ).length;
+    return {
+      unreadAnnouncementIds: [],
+      unreadMessageIds: [],
+      pendingConversationCount: pending,
+      unreadCount: pending,
+    };
+  }
+
+  const teacherMsgs = (myConversation?.messages ?? []).filter(
+    (m) => m.senderRole === 'teacher',
+  );
+  const unreadMessageIds = teacherMsgs
+    .map((m) => m.id)
+    .filter((id) => !readIds.has(`msg:${id}`));
+
+  return {
+    unreadAnnouncementIds,
+    unreadMessageIds,
+    pendingConversationCount: 0,
+    unreadCount: unreadAnnouncementIds.length + unreadMessageIds.length,
+  };
+};
+
+export const useContestUnread = (input: Omit<ComputeUnreadInput, 'readIds'>) => {
+  const [readVersion, setReadVersion] = useState(0);
+
+  const readIds = useMemo(
+    () => loadReadIds(input.contestId),
+    [input.contestId, readVersion],
+  );
+
+  const summary = useMemo(
+    () => computeUnread({ ...input, readIds }),
+    [input, readIds],
+  );
+
+  const markRead = useCallback(
+    (ids: string[]) => {
+      if (!ids.length) return;
+      markReadStorage(input.contestId, ids);
+      setReadVersion((v) => v + 1);
+    },
+    [input.contestId],
+  );
+
+  const markAllRead = useCallback(() => {
+    const annKeys = summary.unreadAnnouncementIds.map((id) => `ann:${id}`);
+    const msgKeys = summary.unreadMessageIds.map((id) => `msg:${id}`);
+    markRead([...annKeys, ...msgKeys]);
+  }, [summary, markRead]);
+
+  return { ...summary, markRead, markAllRead };
+};
+```
+
+- [ ] **Step 4：執行測試 pass**
+
+```bash
+cd frontend && npm test -- useContestUnread
+```
+
+Expected：4 tests pass。
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add frontend/src/features/contest/hooks/useContestUnread.ts frontend/src/features/contest/hooks/useContestUnread.test.ts
+git commit -m "feat(contest): useContestUnread hook with read tracking"
+```
+
+---
+
+## Phase 3：Frontend Components — Discussion
+
+### Task 10: ConversationThreadView
+
+**Files:**
+- Create: `frontend/src/features/contest/components/discussion/ConversationThreadView.tsx`
+- Create: `frontend/src/features/contest/components/discussion/ConversationThreadView.module.scss`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/contest/components/discussion/ConversationThreadView.tsx
+import { useEffect, useState } from 'react';
+import { Button, TextArea, InlineNotification, Tag } from '@carbon/react';
+import { Send } from '@carbon/icons-react';
+import type { ContestConversation, ContestMessage } from '@/core/entities/contest.entity';
+import styles from './ConversationThreadView.module.scss';
+
+interface ConversationThreadViewProps {
+  conversation: ContestConversation | null;
+  /** 'student' or 'teacher' (current viewer role) */
+  viewerRole: 'student' | 'teacher';
+  /** if false, input is disabled (e.g., contest ended for student) */
+  canPost: boolean;
+  /** label for the disabled hint, shown above input when canPost=false */
+  disabledHint?: string;
+  /** called when sending message; promise resolves when done */
+  onSend: (content: string) => Promise<void>;
+  /** optional empty-state message when conversation is null */
+  emptyHint?: string;
+}
+
+export const ConversationThreadView = ({
+  conversation,
+  viewerRole,
+  canPost,
+  disabledHint,
+  onSend,
+  emptyHint,
+}: ConversationThreadViewProps) => {
+  const [draft, setDraft] = useState('');
+  const [sending, setSending] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  useEffect(() => {
+    setErrorMsg(null);
+  }, [conversation?.id]);
+
+  const handleSend = async () => {
+    if (!draft.trim() || sending) return;
+    setSending(true);
+    setErrorMsg(null);
+    try {
+      await onSend(draft.trim());
+      setDraft('');
+    } catch (err: any) {
+      setErrorMsg(err?.response?.data?.detail ?? '訊息送出失敗，請稍後再試');
+    } finally {
+      setSending(false);
+    }
+  };
+
+  const messages: ContestMessage[] = conversation?.messages ?? [];
+
+  return (
+    <div className={styles.thread}>
+      <div className={styles.messages}>
+        {messages.length === 0 && (
+          <p className={styles.empty}>{emptyHint ?? '目前沒有訊息'}</p>
+        )}
+        {messages.map((m) => {
+          const isMine =
+            (m.senderRole === 'student' && viewerRole === 'student') ||
+            (m.senderRole === 'teacher' && viewerRole === 'teacher');
+          return (
+            <div
+              key={m.id}
+              className={`${styles.bubble} ${isMine ? styles.mine : styles.theirs}`}
+            >
+              <div className={styles.meta}>
+                <Tag size="sm" type={m.senderRole === 'teacher' ? 'cyan' : 'gray'}>
+                  {m.senderRole === 'teacher' ? '老師' : '學生'}
+                </Tag>
+                <span className={styles.time}>{new Date(m.createdAt).toLocaleString()}</span>
+              </div>
+              <div className={styles.content}>{m.content}</div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div className={styles.composer}>
+        {!canPost && disabledHint && (
+          <InlineNotification
+            kind="info"
+            lowContrast
+            hideCloseButton
+            title={disabledHint}
+            className={styles.hint}
+          />
+        )}
+        {errorMsg && (
+          <InlineNotification
+            kind="error"
+            lowContrast
+            title={errorMsg}
+            onCloseButtonClick={() => setErrorMsg(null)}
+          />
+        )}
+        <TextArea
+          id="conv-thread-input"
+          labelText="輸入訊息"
+          rows={3}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          disabled={!canPost || sending}
+        />
+        <div className={styles.composerActions}>
+          <Button
+            renderIcon={Send}
+            disabled={!canPost || sending || !draft.trim()}
+            onClick={handleSend}
+          >
+            {sending ? '傳送中…' : '送出'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ConversationThreadView;
+```
+
+- [ ] **Step 2：建立 SCSS**
+
+```scss
+// frontend/src/features/contest/components/discussion/ConversationThreadView.module.scss
+.thread { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
+.messages { display: flex; flex-direction: column; gap: 0.75rem; min-height: 12rem; padding: 0.5rem; overflow-y: auto; }
+.empty { color: var(--cds-text-secondary); text-align: center; padding: 2rem 0; }
+.bubble { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1rem; border-radius: 0.25rem; max-width: 80%; }
+.bubble.mine { align-self: flex-end; background: var(--cds-layer-accent); }
+.bubble.theirs { align-self: flex-start; background: var(--cds-layer); }
+.meta { display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; color: var(--cds-text-secondary); }
+.time {}
+.content { white-space: pre-wrap; }
+.composer { display: flex; flex-direction: column; gap: 0.5rem; }
+.composerActions { display: flex; justify-content: flex-end; }
+.hint {}
+```
+
+- [ ] **Step 3：型別檢查**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+Expected：通過。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add frontend/src/features/contest/components/discussion/ConversationThreadView.tsx frontend/src/features/contest/components/discussion/ConversationThreadView.module.scss
+git commit -m "feat(contest): ConversationThreadView component"
+```
+
+---
+
+### Task 11: ContestAnnouncementList
+
+**Files:**
+- Create: `frontend/src/features/contest/components/discussion/ContestAnnouncementList.tsx`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/contest/components/discussion/ContestAnnouncementList.tsx
+import { useEffect, useRef } from 'react';
+import { Tile, Tag, Button } from '@carbon/react';
+import { TrashCan } from '@carbon/icons-react';
+import type { ContestAnnouncement } from '@/core/entities/contest.entity';
+
+interface Props {
+  announcements: ContestAnnouncement[];
+  unreadIds: Set<string>;
+  canDelete?: boolean;
+  onMarkRead: (ids: string[]) => void;
+  onDelete?: (id: string) => void;
+  onCreate?: () => void;
+  showCreateButton?: boolean;
+}
+
+export const ContestAnnouncementList = ({
+  announcements,
+  unreadIds,
+  canDelete,
+  onMarkRead,
+  onDelete,
+  onCreate,
+  showCreateButton,
+}: Props) => {
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        const ids = entries
+          .filter((e) => e.isIntersecting)
+          .map((e) => (e.target as HTMLElement).dataset.annId)
+          .filter((id): id is string => !!id && unreadIds.has(id));
+        if (ids.length) onMarkRead(ids.map((id) => `ann:${id}`));
+      },
+      { threshold: 0.5 },
+    );
+    return () => observerRef.current?.disconnect();
+  }, [unreadIds, onMarkRead]);
+
+  const refFn = (el: HTMLDivElement | null) => {
+    if (el && observerRef.current) observerRef.current.observe(el);
+  };
+
+  return (
+    <section>
+      <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.75rem' }}>
+        <h4 style={{ margin: 0 }}>公告</h4>
+        {showCreateButton && onCreate && (
+          <Button kind="ghost" size="sm" onClick={onCreate}>
+            發布公告
+          </Button>
+        )}
+      </header>
+
+      {announcements.length === 0 ? (
+        <Tile><div style={{ padding: '1rem', textAlign: 'center', color: 'var(--cds-text-secondary)' }}>目前沒有任何公告</div></Tile>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          {announcements.map((a) => {
+            const unread = unreadIds.has(a.id);
+            return (
+              <Tile key={a.id}>
+                <div ref={refFn} data-ann-id={a.id} style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
+                  <div style={{ flex: 1 }}>
+                    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', marginBottom: '0.25rem' }}>
+                      <strong>{a.title}</strong>
+                      {unread && <Tag size="sm" type="red">新</Tag>}
+                    </div>
+                    <p style={{ margin: '0.25rem 0', whiteSpace: 'pre-wrap' }}>{a.content}</p>
+                    <small style={{ color: 'var(--cds-text-secondary)' }}>
+                      {new Date(a.createdAt).toLocaleString()}
+                    </small>
+                  </div>
+                  {canDelete && onDelete && (
+                    <Button kind="ghost" size="sm" hasIconOnly renderIcon={TrashCan} iconDescription="刪除" onClick={() => onDelete(a.id)} />
+                  )}
+                </div>
+              </Tile>
+            );
+          })}
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default ContestAnnouncementList;
+```
+
+- [ ] **Step 2：型別檢查**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+Expected：通過。
+
+- [ ] **Step 3：Commit**
+
+```bash
+git add frontend/src/features/contest/components/discussion/ContestAnnouncementList.tsx
+git commit -m "feat(contest): ContestAnnouncementList with unread badge"
+```
+
+---
+
+### Task 12: ContestConversationList（教師端列表）
+
+**Files:**
+- Create: `frontend/src/features/contest/components/discussion/ContestConversationList.tsx`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/contest/components/discussion/ContestConversationList.tsx
+import { Tile, Tag } from '@carbon/react';
+import type { ContestConversation } from '@/core/entities/contest.entity';
+
+interface Props {
+  conversations: ContestConversation[];
+  selectedId: string | null;
+  onSelect: (conversation: ContestConversation) => void;
+}
+
+export const ContestConversationList = ({ conversations, selectedId, onSelect }: Props) => {
+  if (conversations.length === 0) {
+    return <Tile><div style={{ padding: '1rem', color: 'var(--cds-text-secondary)' }}>目前沒有對話</div></Tile>;
+  }
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+      {conversations.map((c) => {
+        const awaitingTeacher = c.lastMessage?.senderRole === 'student';
+        const selected = c.id === selectedId;
+        return (
+          <button
+            key={c.id}
+            type="button"
+            onClick={() => onSelect(c)}
+            style={{
+              textAlign: 'left',
+              border: selected ? '2px solid var(--cds-focus)' : '1px solid var(--cds-border-subtle)',
+              borderRadius: '0.25rem',
+              background: 'var(--cds-layer)',
+              padding: '0.75rem',
+              cursor: 'pointer',
+            }}
+          >
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '0.5rem' }}>
+              <strong>{c.studentUsername}</strong>
+              {awaitingTeacher && <Tag size="sm" type="red">未回</Tag>}
+            </div>
+            <div style={{ color: 'var(--cds-text-secondary)', fontSize: '0.875rem', marginTop: '0.25rem' }}>
+              {c.lastMessage?.content?.slice(0, 80) ?? '（尚無訊息）'}
+            </div>
+            <small style={{ color: 'var(--cds-text-helper)' }}>
+              {new Date(c.lastMessageAt).toLocaleString()}
+            </small>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ContestConversationList;
+```
+
+- [ ] **Step 2：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/contest/components/discussion/ContestConversationList.tsx
+git commit -m "feat(contest): ContestConversationList for teacher panel"
+```
+
+---
+
+### Task 13: PostAnnouncementModal + SendMessageModal
+
+**Files:**
+- Create: `frontend/src/features/contest/components/discussion/PostAnnouncementModal.tsx`
+- Create: `frontend/src/features/contest/components/discussion/SendMessageModal.tsx`
+
+- [ ] **Step 1：建 PostAnnouncementModal**
+
+```tsx
+// frontend/src/features/contest/components/discussion/PostAnnouncementModal.tsx
+import { useState } from 'react';
+import { Modal, TextArea, TextInput } from '@carbon/react';
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (title: string, content: string) => Promise<void>;
+}
+
+export const PostAnnouncementModal = ({ open, onClose, onSubmit }: Props) => {
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [sending, setSending] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!title.trim() || !content.trim() || sending) return;
+    setSending(true);
+    try {
+      await onSubmit(title.trim(), content.trim());
+      setTitle('');
+      setContent('');
+      onClose();
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      modalHeading="發布公告"
+      primaryButtonText={sending ? '發布中…' : '發布'}
+      secondaryButtonText="取消"
+      primaryButtonDisabled={sending || !title.trim() || !content.trim()}
+      onRequestClose={onClose}
+      onRequestSubmit={handleSubmit}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <TextInput id="ann-title" labelText="標題" value={title} onChange={(e) => setTitle(e.target.value)} />
+        <TextArea id="ann-content" labelText="內容" rows={5} value={content} onChange={(e) => setContent(e.target.value)} />
+      </div>
+    </Modal>
+  );
+};
+
+export default PostAnnouncementModal;
+```
+
+- [ ] **Step 2：建 SendMessageModal**
+
+```tsx
+// frontend/src/features/contest/components/discussion/SendMessageModal.tsx
+import { useState } from 'react';
+import { Modal, TextArea } from '@carbon/react';
+
+interface Props {
+  open: boolean;
+  recipientUsername: string;
+  onClose: () => void;
+  onSubmit: (content: string) => Promise<void>;
+}
+
+export const SendMessageModal = ({ open, recipientUsername, onClose, onSubmit }: Props) => {
+  const [content, setContent] = useState('');
+  const [sending, setSending] = useState(false);
+
+  const handleSubmit = async () => {
+    if (!content.trim() || sending) return;
+    setSending(true);
+    try {
+      await onSubmit(content.trim());
+      setContent('');
+      onClose();
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      modalHeading={`傳送訊息給：${recipientUsername}`}
+      primaryButtonText={sending ? '傳送中…' : '送出'}
+      secondaryButtonText="取消"
+      primaryButtonDisabled={sending || !content.trim()}
+      onRequestClose={onClose}
+      onRequestSubmit={handleSubmit}
+    >
+      <TextArea id="send-msg-content" labelText="訊息內容" rows={5} value={content} onChange={(e) => setContent(e.target.value)} />
+    </Modal>
+  );
+};
+
+export default SendMessageModal;
+```
+
+- [ ] **Step 3：建 `discussion/index.ts`**
+
+```typescript
+// frontend/src/features/contest/components/discussion/index.ts
+export { default as ConversationThreadView } from './ConversationThreadView';
+export { default as ContestAnnouncementList } from './ContestAnnouncementList';
+export { default as ContestConversationList } from './ContestConversationList';
+export { default as PostAnnouncementModal } from './PostAnnouncementModal';
+export { default as SendMessageModal } from './SendMessageModal';
+```
+
+- [ ] **Step 4：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/contest/components/discussion/
+git commit -m "feat(contest): announcement and message modals + index"
+```
+
+---
+
+### Task 14: StudentDiscussionView + AdminDiscussionView（組合元件）
+
+**Files:**
+- Create: `frontend/src/features/contest/components/discussion/StudentDiscussionView.tsx`
+- Create: `frontend/src/features/contest/components/discussion/AdminDiscussionView.tsx`
+
+- [ ] **Step 1：建 StudentDiscussionView**
+
+```tsx
+// frontend/src/features/contest/components/discussion/StudentDiscussionView.tsx
+import { useEffect } from 'react';
+import {
+  ContestAnnouncementList,
+  ConversationThreadView,
+} from '@/features/contest/components/discussion';
+import { useContestConversations } from '@/features/contest/hooks/useContestConversations';
+import { useContestUnread } from '@/features/contest/hooks/useContestUnread';
+import {
+  appendMessage,
+  createStudentConversation,
+} from '@/infrastructure/api/repositories';
+
+interface Props {
+  contestId: string;
+  contestEnded: boolean;
+  contestNotStarted: boolean;
+}
+
+export const StudentDiscussionView = ({ contestId, contestEnded, contestNotStarted }: Props) => {
+  const { announcements, myConversation, refresh, loading } = useContestConversations(
+    contestId,
+    { role: 'student', pollIntervalMs: 30_000 },
+  );
+  const { unreadAnnouncementIds, unreadMessageIds, markRead } = useContestUnread({
+    contestId, role: 'student',
+    announcements, conversations: [], myConversation,
+  });
+
+  useEffect(() => {
+    if (myConversation && unreadMessageIds.length) {
+      markRead(unreadMessageIds.map((id) => `msg:${id}`));
+    }
+  }, [myConversation?.id, unreadMessageIds.join(','), markRead]);
+
+  if (loading) return <div>載入中...</div>;
+
+  const handleSend = async (content: string) => {
+    if (!myConversation) {
+      await createStudentConversation(contestId, content);
+    } else {
+      await appendMessage(contestId, myConversation.id, content);
+    }
+    await refresh();
+  };
+
+  const canPost = !contestEnded && !contestNotStarted;
+  const hint = contestNotStarted
+    ? '考試開始後可發問'
+    : contestEnded
+      ? '考試已結束，無法繼續對話'
+      : undefined;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <ContestAnnouncementList
+        announcements={announcements}
+        unreadIds={new Set(unreadAnnouncementIds)}
+        onMarkRead={(keys) => markRead(keys)}
+      />
+      <section>
+        <h4 style={{ marginTop: 0 }}>與老師對話</h4>
+        <ConversationThreadView
+          conversation={myConversation}
+          viewerRole="student"
+          canPost={canPost}
+          disabledHint={hint}
+          emptyHint="尚無訊息，可在下方輸入框開始你的提問"
+          onSend={handleSend}
+        />
+      </section>
+    </div>
+  );
+};
+
+export default StudentDiscussionView;
+```
+
+- [ ] **Step 2：建 AdminDiscussionView**
+
+```tsx
+// frontend/src/features/contest/components/discussion/AdminDiscussionView.tsx
+import { useEffect, useMemo, useState } from 'react';
+import { Dropdown } from '@carbon/react';
+import {
+  ContestAnnouncementList,
+  ContestConversationList,
+  ConversationThreadView,
+  PostAnnouncementModal,
+} from '@/features/contest/components/discussion';
+import { useContestConversations } from '@/features/contest/hooks/useContestConversations';
+import {
+  appendMessage,
+  createContestAnnouncement,
+  deleteContestAnnouncement,
+  getConversation,
+} from '@/infrastructure/api/repositories';
+import type { ContestConversation } from '@/core/entities/contest.entity';
+
+interface Props {
+  contestId: string;
+  initialAwaiting?: 'teacher' | 'student' | undefined;
+}
+
+type AwaitingFilter = 'all' | 'teacher' | 'student';
+
+export const AdminDiscussionView = ({ contestId, initialAwaiting }: Props) => {
+  const [filter, setFilter] = useState<AwaitingFilter>(initialAwaiting ?? 'all');
+  const apiAwaiting = filter === 'all' ? undefined : filter;
+  const { announcements, conversations, refresh, loading } = useContestConversations(
+    contestId,
+    { role: 'teacher', pollIntervalMs: 30_000, awaiting: apiAwaiting },
+  );
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [selectedDetail, setSelectedDetail] = useState<ContestConversation | null>(null);
+  const [annModalOpen, setAnnModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (!selectedId) { setSelectedDetail(null); return; }
+    let cancelled = false;
+    getConversation(contestId, selectedId).then((d) => {
+      if (!cancelled) setSelectedDetail(d);
+    });
+    return () => { cancelled = true; };
+  }, [contestId, selectedId, conversations.length]);
+
+  const handleSend = async (content: string) => {
+    if (!selectedDetail) return;
+    await appendMessage(contestId, selectedDetail.id, content);
+    const fresh = await getConversation(contestId, selectedDetail.id);
+    setSelectedDetail(fresh);
+    await refresh();
+  };
+
+  const filterItems = useMemo(
+    () => [
+      { id: 'all', label: '全部' },
+      { id: 'teacher', label: '未回' },
+      { id: 'student', label: '已回' },
+    ],
+    [],
+  );
+
+  if (loading) return <div>載入中...</div>;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <ContestAnnouncementList
+        announcements={announcements}
+        unreadIds={new Set()}
+        canDelete
+        onMarkRead={() => {}}
+        onDelete={async (id) => {
+          await deleteContestAnnouncement(contestId, id);
+          await refresh();
+        }}
+        showCreateButton
+        onCreate={() => setAnnModalOpen(true)}
+      />
+
+      <section>
+        <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem', marginBottom: '0.75rem' }}>
+          <h4 style={{ margin: 0 }}>學生對話</h4>
+          <Dropdown
+            id="conv-filter"
+            label="篩選"
+            titleText=""
+            size="sm"
+            items={filterItems}
+            itemToString={(i) => i?.label ?? ''}
+            selectedItem={filterItems.find((i) => i.id === filter)}
+            onChange={({ selectedItem }) => selectedItem && setFilter(selectedItem.id as AwaitingFilter)}
+          />
+        </header>
+        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 2fr)', gap: '1rem' }}>
+          <ContestConversationList
+            conversations={conversations}
+            selectedId={selectedId}
+            onSelect={(c) => setSelectedId(c.id)}
+          />
+          <div>
+            {selectedDetail ? (
+              <ConversationThreadView
+                conversation={selectedDetail}
+                viewerRole="teacher"
+                canPost
+                onSend={handleSend}
+              />
+            ) : (
+              <div style={{ padding: '2rem', textAlign: 'center', color: 'var(--cds-text-secondary)' }}>
+                請選擇左側對話
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
+      <PostAnnouncementModal
+        open={annModalOpen}
+        onClose={() => setAnnModalOpen(false)}
+        onSubmit={async (title, content) => {
+          await createContestAnnouncement(contestId, { title, content });
+          await refresh();
+        }}
+      />
+    </div>
+  );
+};
+
+export default AdminDiscussionView;
+```
+
+- [ ] **Step 3：補進 `discussion/index.ts`**
+
+```typescript
+export { default as StudentDiscussionView } from './StudentDiscussionView';
+export { default as AdminDiscussionView } from './AdminDiscussionView';
+```
+
+- [ ] **Step 4：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/contest/components/discussion/
+git commit -m "feat(contest): Student/Admin discussion view composers"
+```
+
+---
+
+## Phase 4：Notification Bell
+
+### Task 15: ContestNotificationModal
+
+**Files:**
+- Create: `frontend/src/features/contest/components/notification/ContestNotificationModal.tsx`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/contest/components/notification/ContestNotificationModal.tsx
+import { Modal, Tag } from '@carbon/react';
+import type { ContestAnnouncement, ContestMessage } from '@/core/entities/contest.entity';
+
+interface Props {
+  open: boolean;
+  unreadAnnouncements: ContestAnnouncement[];
+  unreadMessages: ContestMessage[];
+  onMarkAllRead: () => void;
+  onClose: () => void;
+  onGoToDiscussion: () => void;
+}
+
+export const ContestNotificationModal = ({
+  open, unreadAnnouncements, unreadMessages,
+  onMarkAllRead, onClose, onGoToDiscussion,
+}: Props) => {
+  const handleClose = () => {
+    onMarkAllRead();
+    onClose();
+  };
+  const handleSecondary = () => {
+    onMarkAllRead();
+    onGoToDiscussion();
+    onClose();
+  };
+
+  return (
+    <Modal
+      open={open}
+      modalHeading="未讀通知"
+      primaryButtonText="我已閱讀"
+      secondaryButtonText="前往討論"
+      onRequestClose={handleClose}
+      onRequestSubmit={handleClose}
+      onSecondarySubmit={handleSecondary}
+    >
+      <section style={{ marginBottom: '1.5rem' }}>
+        <h5 style={{ marginTop: 0 }}>新公告（{unreadAnnouncements.length}）</h5>
+        {unreadAnnouncements.length === 0 ? (
+          <p style={{ color: 'var(--cds-text-secondary)' }}>無</p>
+        ) : (
+          <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            {unreadAnnouncements.map((a) => (
+              <li key={a.id}>
+                <strong>{a.title}</strong>
+                <p style={{ margin: '0.25rem 0', whiteSpace: 'pre-wrap' }}>{a.content}</p>
+                <small style={{ color: 'var(--cds-text-secondary)' }}>{new Date(a.createdAt).toLocaleString()}</small>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section>
+        <h5 style={{ margin: '0 0 0.5rem 0' }}>新訊息（{unreadMessages.length}）</h5>
+        {unreadMessages.length === 0 ? (
+          <p style={{ color: 'var(--cds-text-secondary)' }}>無</p>
+        ) : (
+          <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            {unreadMessages.map((m) => (
+              <li key={m.id}>
+                <Tag size="sm" type="cyan">老師</Tag>{' '}
+                <span>{m.content}</span>
+                <div><small style={{ color: 'var(--cds-text-secondary)' }}>{new Date(m.createdAt).toLocaleString()}</small></div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </Modal>
+  );
+};
+
+export default ContestNotificationModal;
+```
+
+- [ ] **Step 2：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/contest/components/notification/ContestNotificationModal.tsx
+git commit -m "feat(contest): ContestNotificationModal for student bell"
+```
+
+---
+
+### Task 16: ContestNotificationBell
+
+**Files:**
+- Create: `frontend/src/features/contest/components/notification/ContestNotificationBell.tsx`
+- Create: `frontend/src/features/contest/components/notification/ContestNotificationBell.module.scss`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/contest/components/notification/ContestNotificationBell.tsx
+import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { HeaderGlobalAction } from '@carbon/react';
+import { Notification } from '@carbon/icons-react';
+import { useContestConversations } from '@/features/contest/hooks/useContestConversations';
+import { useContestUnread } from '@/features/contest/hooks/useContestUnread';
+import { ContestNotificationModal } from './ContestNotificationModal';
+import styles from './ContestNotificationBell.module.scss';
+
+interface Props {
+  contestId: string;
+  /** 'student' | 'teacher' */
+  role: 'student' | 'teacher';
+  /** path to navigate teachers when bell clicked, e.g. /admin/conversations?awaiting=teacher */
+  teacherClickPath: string;
+  /** path to navigate students from "前往討論" */
+  studentDiscussionPath: string;
+}
+
+export const ContestNotificationBell = ({
+  contestId, role, teacherClickPath, studentDiscussionPath,
+}: Props) => {
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+
+  const awaiting = role === 'teacher' ? ('teacher' as const) : undefined;
+  const { announcements, conversations, myConversation } = useContestConversations(
+    contestId,
+    { role, pollIntervalMs: 30_000, awaiting },
+  );
+
+  const { unreadAnnouncementIds, unreadMessageIds, unreadCount, markAllRead } =
+    useContestUnread({ contestId, role, announcements, conversations, myConversation });
+
+  const unreadAnnouncements = useMemo(
+    () => announcements.filter((a) => unreadAnnouncementIds.includes(a.id)),
+    [announcements, unreadAnnouncementIds],
+  );
+  const unreadMessages = useMemo(
+    () => (myConversation?.messages ?? []).filter((m) => unreadMessageIds.includes(m.id)),
+    [myConversation?.messages, unreadMessageIds],
+  );
+
+  const badgeText = unreadCount === 0 ? null : unreadCount > 9 ? '9+' : String(unreadCount);
+
+  const handleClick = () => {
+    if (role === 'teacher') {
+      navigate(teacherClickPath);
+    } else {
+      setOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <HeaderGlobalAction aria-label="通知" tooltipAlignment="center" onClick={handleClick}>
+        <span className={styles.iconWrapper}>
+          <Notification size={20} />
+          {badgeText && <span className={styles.badge}>{badgeText}</span>}
+        </span>
+      </HeaderGlobalAction>
+      {role === 'student' && (
+        <ContestNotificationModal
+          open={open}
+          unreadAnnouncements={unreadAnnouncements}
+          unreadMessages={unreadMessages}
+          onClose={() => setOpen(false)}
+          onMarkAllRead={markAllRead}
+          onGoToDiscussion={() => navigate(studentDiscussionPath)}
+        />
+      )}
+    </>
+  );
+};
+
+export default ContestNotificationBell;
+```
+
+- [ ] **Step 2：建立 SCSS**
+
+```scss
+// frontend/src/features/contest/components/notification/ContestNotificationBell.module.scss
+.iconWrapper { position: relative; display: inline-flex; }
+.badge {
+  position: absolute;
+  top: -0.25rem; right: -0.5rem;
+  min-width: 1.1rem; height: 1.1rem;
+  padding: 0 0.25rem;
+  background: var(--cds-support-error);
+  color: var(--cds-text-on-color);
+  border-radius: 0.55rem;
+  font-size: 0.6875rem;
+  line-height: 1.1rem;
+  text-align: center;
+  font-weight: 600;
+}
+```
+
+- [ ] **Step 3：建 `notification/index.ts`**
+
+```typescript
+export { default as ContestNotificationBell } from './ContestNotificationBell';
+export { default as ContestNotificationModal } from './ContestNotificationModal';
+```
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add frontend/src/features/contest/components/notification/
+git commit -m "feat(contest): ContestNotificationBell with badge"
+```
+
+---
+
+### Task 17: 在 ContestLayout 掛上鈴鐺
+
+**Files:**
+- Modify: `frontend/src/features/contest/components/layout/ContestLayout.tsx`
+
+- [ ] **Step 1：在 import 區塊加上 Bell 與 path 構造器**
+
+開啟 `frontend/src/features/contest/components/layout/ContestLayout.tsx`：
+
+```typescript
+import { ContestNotificationBell } from '@/features/contest/components/notification';
+```
+
+- [ ] **Step 2：在 `<HeaderGlobalBar>` 內 `{renderExamStatus()}` 之後、`{headerActions}` 之前插入 Bell**
+
+定位 `frontend/src/features/contest/components/layout/ContestLayout.tsx:425` 的 `{renderExamStatus()}` 行，下方插入：
+
+```tsx
+{contestId && (
+  <ContestNotificationBell
+    contestId={contestId}
+    role={isAdmin ? 'teacher' : 'student'}
+    teacherClickPath={`${adminPath}/conversations?awaiting=teacher`}
+    studentDiscussionPath={`${dashboardPath}/qa`}
+  />
+)}
+```
+
+> 路徑請依現有 routing 命名調整：若 dashboard 的 Q&A 子路徑與此不同，於 Task 19 接線時一併修正。
+
+- [ ] **Step 3：手動驗證**
+
+```bash
+cd frontend && npm run dev
+```
+
+開瀏覽器到任一 contest，確認頂部 navbar 出現鈴鐺 icon；製造 1 筆未讀公告（用後端 admin 介面或 seed），重整看到紅色 badge。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add frontend/src/features/contest/components/layout/ContestLayout.tsx
+git commit -m "feat(contest): mount notification bell in ContestLayout header"
+```
+
+---
+
+## Phase 5：Wire Up Screens
+
+### Task 18: ContestQAScreen 改用 StudentDiscussionView
+
+**Files:**
+- Modify: `frontend/src/features/contest/screens/ContestQAScreen.tsx`
+
+- [ ] **Step 1：重寫整檔**
+
+```tsx
+// frontend/src/features/contest/screens/ContestQAScreen.tsx
+import { useParams } from 'react-router-dom';
+import { useContext } from 'react';
+import { ContestContext } from '@/features/contest/contexts/ContestContext';
+import { StudentDiscussionView } from '@/features/contest/components/discussion';
+
+export const ContestQAScreen = () => {
+  const { contestId } = useParams<{ contestId: string }>();
+  const { contest } = useContext(ContestContext);
+  const now = Date.now();
+  const contestEnded = !!contest?.endTime && new Date(contest.endTime).getTime() < now;
+  const contestNotStarted = !!contest?.startTime && new Date(contest.startTime).getTime() > now;
+
+  if (!contestId) return null;
+
+  return (
+    <StudentDiscussionView
+      contestId={contestId}
+      contestEnded={contestEnded}
+      contestNotStarted={contestNotStarted}
+    />
+  );
+};
+
+export default ContestQAScreen;
+```
+
+> 若 `ContestContext` API 與本檔假設不符（例如 `contest` 欄位不在 context 裡），改用既有 `useContestLayoutState` hook 取得 contest。透過 `grep -n "ContestContext" frontend/src/features/contest/contexts/ContestContext.tsx` 確認。
+
+- [ ] **Step 2：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/contest/screens/ContestQAScreen.tsx
+git commit -m "refactor(contest): ContestQAScreen uses StudentDiscussionView"
+```
+
+---
+
+### Task 19: AdminClarificationsScreen → AdminConversationsScreen
+
+**Files:**
+- Rename + Rewrite: `frontend/src/features/contest/screens/admin/panels/AdminClarificationsScreen.tsx` → `AdminConversationsScreen.tsx`
+- Modify: `frontend/src/features/contest/modules/AdminPanelRendererRegistry.tsx`
+- Modify: 其他 hardcoded `clarifications` key 處（grep 確認）
+- Delete: `frontend/src/features/contest/screens/admin/panels/AdminClarificationsPanel.module.scss`（內容若不再使用）
+
+- [ ] **Step 1：建立新檔 `AdminConversationsScreen.tsx`**
+
+```tsx
+// frontend/src/features/contest/screens/admin/panels/AdminConversationsScreen.tsx
+import { useParams, useSearchParams } from 'react-router-dom';
+import { AdminDiscussionView } from '@/features/contest/components/discussion';
+
+export const AdminConversationsScreen = () => {
+  const { contestId } = useParams<{ contestId: string }>();
+  const [params] = useSearchParams();
+  const awaiting = params.get('awaiting');
+  const initial = awaiting === 'teacher' || awaiting === 'student' ? awaiting : undefined;
+
+  if (!contestId) return null;
+  return <AdminDiscussionView contestId={contestId} initialAwaiting={initial} />;
+};
+
+export default AdminConversationsScreen;
+```
+
+- [ ] **Step 2：刪除舊檔**
+
+```bash
+rm frontend/src/features/contest/screens/admin/panels/AdminClarificationsScreen.tsx
+rm frontend/src/features/contest/screens/admin/panels/AdminClarificationsPanel.module.scss
+```
+
+- [ ] **Step 3：更新 panel registry**
+
+`frontend/src/features/contest/modules/AdminPanelRendererRegistry.tsx`：
+
+```typescript
+import AdminConversationsScreen from '../screens/admin/panels/AdminConversationsScreen';
+
+const registry = {
+  // ...existing entries...
+  conversations: AdminConversationsScreen,
+};
+```
+
+刪除舊 key `clarifications`。
+
+- [ ] **Step 4：搜尋 hardcoded `clarifications` 字串**
+
+```bash
+grep -rn "clarifications" frontend/src/features/contest/ --include="*.tsx" --include="*.ts" | grep -v node_modules
+```
+
+針對每處 hit：tab config / route / breadcrumb 等，把 `clarifications` 改為 `conversations`，label 與 i18n key 一併調整。
+
+- [ ] **Step 5：型別檢查 + 啟動 dev 確認 admin panel 可載入**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+- [ ] **Step 6：Commit**
+
+```bash
+git add -A frontend/src/features/contest/screens/admin/panels/ frontend/src/features/contest/modules/AdminPanelRendererRegistry.tsx
+git commit -m "refactor(contest): rename Clarifications panel to Conversations"
+```
+
+---
+
+### Task 20: AdminProctoringPanel 加「傳送訊息」按鈕
+
+**Files:**
+- Modify: `frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx`
+
+- [ ] **Step 1：閱讀現有檔案找出每個學生卡片渲染處**
+
+```bash
+grep -n "participant\|student\|map(" frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx | head -30
+```
+
+- [ ] **Step 2：在學生卡片操作區追加按鈕**
+
+於 student card 渲染區的動作 / button row 加入：
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@carbon/react';
+import { Email } from '@carbon/icons-react';
+import { SendMessageModal } from '@/features/contest/components/discussion';
+import { sendMessageToStudent } from '@/infrastructure/api/repositories';
+
+// inside the row:
+const [msgOpenFor, setMsgOpenFor] = useState<{ id: string; username: string } | null>(null);
+
+<Button
+  kind="ghost"
+  size="sm"
+  renderIcon={Email}
+  onClick={() => setMsgOpenFor({ id: participant.user.id, username: participant.user.username })}
+>
+  傳送訊息
+</Button>
+
+<SendMessageModal
+  open={!!msgOpenFor}
+  recipientUsername={msgOpenFor?.username ?? ''}
+  onClose={() => setMsgOpenFor(null)}
+  onSubmit={async (content) => {
+    if (!msgOpenFor) return;
+    await sendMessageToStudent(contestId, msgOpenFor.id, content);
+  }}
+/>
+```
+
+> 實際 import path 與型別欄位（`participant.user.id`）請依該檔現有資料結構調整。
+
+- [ ] **Step 3：型別檢查 + 手動測試**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+打開 dev server，登入教師帳號 → contest admin → 監考面板 → 對任一學生點「傳送訊息」 → 送出 → 切到學生帳號（另一瀏覽器）查看鈴鐺與 dashboard。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx
+git commit -m "feat(contest): proctoring panel can send direct message to student"
+```
+
+---
+
+## Phase 6：Cleanup
+
+### Task 21: 刪除既有 ContestClarifications / 相關元件 / 舊 hook
+
+**Files:**
+- Delete: `frontend/src/features/contest/components/ContestClarifications.tsx`
+- Delete: `frontend/src/features/contest/components/AnnouncementSectionLayout.tsx`
+- Delete: `frontend/src/features/contest/components/DiscussionsSection.tsx`
+- Delete: `frontend/src/features/contest/hooks/useClarifications.ts`
+- Modify: `frontend/src/features/contest/components/index.ts`
+
+- [ ] **Step 1：搜尋殘餘 import**
+
+```bash
+grep -rn "ContestClarifications\|AnnouncementSectionLayout\|DiscussionsSection\|useClarifications" frontend/src --include="*.ts" --include="*.tsx" | grep -v node_modules
+```
+
+- [ ] **Step 2：對每個 hit 改寫或刪除引用**
+
+預期僅剩 `frontend/src/features/contest/components/index.ts` 中的 re-export，整段刪除。其他若有則改為新元件。
+
+- [ ] **Step 3：刪除檔案**
+
+```bash
+rm frontend/src/features/contest/components/ContestClarifications.tsx \
+   frontend/src/features/contest/components/AnnouncementSectionLayout.tsx \
+   frontend/src/features/contest/components/DiscussionsSection.tsx \
+   frontend/src/features/contest/hooks/useClarifications.ts
+```
+
+- [ ] **Step 4：型別檢查 + lint**
+
+```bash
+cd frontend && npm run -s typecheck && npm run -s lint
+```
+
+Expected：無錯誤。
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add -A frontend/src/features/contest/
+git commit -m "chore(contest): remove legacy Clarifications components and hook"
+```
+
+---
+
+### Task 22: i18n 與最終驗收
+
+**Files:**
+- Modify: `frontend/src/locales/*` 或對應 i18n 檔（依專案結構）
+
+- [ ] **Step 1：執行 i18n 同步**
+
+```bash
+cd frontend && npm run sync:i18n && npm run check:i18n
+```
+
+Expected：通過。
+
+- [ ] **Step 2：執行完整 backend 測試**
+
+```bash
+bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev exec -T -e PYTEST_ADDOPTS='--no-cov' backend pytest apps/contests/tests/ -v
+```
+
+Expected：所有 contest 測試（含本次新增）通過；舊 Clarification 測試應已隨 Task 2 一併移除（如有殘留請刪除）。
+
+- [ ] **Step 3：執行 frontend 單元測試**
+
+```bash
+cd frontend && npm test
+```
+
+Expected：所有測試通過，特別是 `contestReadStorage.test.ts` 與 `useContestUnread.test.ts`。
+
+- [ ] **Step 4：手動 E2E 驗收清單**
+
+依序在瀏覽器驗證：
+
+- [ ] 學生登入 → contest → navbar 鈴鐺顯示未讀公告 badge
+- [ ] 點鈴鐺 → modal 列出公告與訊息 → 「我已閱讀」後 badge 消失
+- [ ] 學生 dashboard Q&A tab → 上半公告、下半對話 thread；無對話時顯示 empty hint
+- [ ] 學生輸入訊息送出 → 出現在 thread 中 → 重整仍在
+- [ ] 教師登入 → contest admin → 對話面板 filter 「未回」運作
+- [ ] 教師回覆 → 學生鈴鐺 badge 出現 → modal 顯示新訊息
+- [ ] 教師 proctoring panel 對學生送訊息 → 學生 dashboard 看到該訊息
+- [ ] 競賽結束（手動把 end_time 改為過去）：學生 thread 輸入框 disabled，hint 顯示
+
+- [ ] **Step 5：Commit i18n 變更（若有）**
+
+```bash
+git add -A
+git diff --cached --stat
+git commit -m "chore(contest): sync i18n & verify full conversation flow"
+```
+
+---
+
+## 自我審查
+
+1. **Spec 覆蓋檢查**
+   - §A 資料模型 → Task 1
+   - §B localStorage 已讀 → Task 7
+   - §C useContestUnread → Task 9
+   - §D navbar 鈴鐺 → Task 15-17
+   - §E Q&A tab + thread → Task 10-11, 14, 18
+   - §F 權限狀態 → Task 4 後端 + Task 14 前端輸入框 disabled
+   - §G.1 教師面板 + filter → Task 12, 14, 19
+   - §G.2 Proctoring 傳送訊息 → Task 20
+   - §H 元件拆檔 → Task 10-14
+   - §I 後端 → Task 1-5
+
+2. **Placeholder 檢查**：每段 step 皆含完整代碼或精確命令，無 TBD / TODO。Task 19 / 20 留有「依現有結構微調」的彈性註記，但動作描述明確（grep + 取代 hardcoded key）。
+
+3. **型別一致性**：`ContestConversation` / `ContestMessage` / `senderRole` / `firstSenderRole` 的命名在 Task 6 定義後，Task 8-20 皆延用。後端 `last_message` / `first_sender_role` 與前端 `lastMessage` / `firstSenderRole` 一一對應（mapper 在 Task 6 處理）。
diff --git a/docs/superpowers/plans/2026-05-05-contest-dashboard-typography-implementation.md b/docs/superpowers/plans/2026-05-05-contest-dashboard-typography-implementation.md
new file mode 100644
index 00000000..5a9853d5
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-05-contest-dashboard-typography-implementation.md
@@ -0,0 +1,1492 @@
+# 競賽儀表板版面與排版整頓 — 實作計畫
+
+> **Spec:** `docs/superpowers/specs/2026-05-05-contest-dashboard-typography-design.md`
+
+**Goal:** 把學生競賽儀表板與競賽管理儀表板各自重複的 title/subtitle/time/divider/tab+toolbar 樣式，遷移到一組可重用的 dashboard primitive（DashboardPage / Container / Block / BlockHeader / Tabs / Toolbar / 4 個 typography primitive）。
+
+**Architecture:** 新元件放 `frontend/src/shared/components/dashboard/`，採三層 + tab 子系統設計。所有 typography 樣式來自 Carbon token；divider 由 Container 注入；tab+toolbar 樣式由 TabBar/Toolbar 內部處理。
+
+**Tech Stack:** React 19 + TypeScript + CSS Modules + SCSS + `@carbon/react` + Vitest + Storybook (CSF3)。
+
+---
+
+## 執行順序
+
+1. Phase 1：typography primitives（PageTitle / SectionTitle / MetricBlock / TimeDisplay）
+2. Phase 2：結構元件（DashboardPage / Container / Block / BlockHeader）
+3. Phase 3：Tabs + Toolbar 子系統
+4. Phase 4：遷移學生競賽儀表板（小範圍驗證）
+5. Phase 5：遷移管理端（AdminOverviewScreen header / CommandCenter / Preparation / ActionWidgets / InsightsPanel）
+6. Phase 6：遷移 ContestHero / ContestLayout 時間相關
+
+每個 Phase 結束都 commit。Phase 1–3 是純新增、零侵入；Phase 4 之後才動既有畫面。
+
+---
+
+## Phase 1：Typography Primitives
+
+**Files:**
+
+- Create: `frontend/src/shared/components/dashboard/typography/PageTitle.tsx`
+- Create: `frontend/src/shared/components/dashboard/typography/PageTitle.module.scss`
+- Create: `frontend/src/shared/components/dashboard/typography/SectionTitle.tsx`
+- Create: `frontend/src/shared/components/dashboard/typography/SectionTitle.module.scss`
+- Create: `frontend/src/shared/components/dashboard/typography/MetricBlock.tsx`
+- Create: `frontend/src/shared/components/dashboard/typography/MetricBlock.module.scss`
+- Create: `frontend/src/shared/components/dashboard/typography/TimeDisplay.tsx`
+- Create: `frontend/src/shared/components/dashboard/typography/TimeDisplay.module.scss`
+- Create: `frontend/src/shared/components/dashboard/typography/index.ts`
+- Create: `frontend/src/shared/components/dashboard/typography/typography.test.tsx`
+- Create: `frontend/src/shared/components/dashboard/typography/typography.stories.tsx`
+
+### Task 1.1：PageTitle
+
+責任：頁面層級主標題；預設 `<h1>`；學生端 size + 細體字。
+
+- [ ] **Step 1：寫 SCSS**
+
+```scss
+// PageTitle.module.scss
+.root {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: 400;
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+}
+```
+
+- [ ] **Step 2：寫 component**
+
+```tsx
+// PageTitle.tsx
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import styles from "./PageTitle.module.scss";
+
+type Props<E extends ElementType> = {
+  as?: E;
+  children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<E>, "as" | "children" | "className" | "style">;
+
+export function PageTitle<E extends ElementType = "h1">({
+  as,
+  children,
+  ...rest
+}: Props<E>) {
+  const Tag = (as ?? "h1") as ElementType;
+  return (
+    <Tag className={styles.root} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+```
+
+### Task 1.2：SectionTitle
+
+責任：區塊標題；預設 `<h2>`；對齊 `heading-compact-02`。
+
+- [ ] **Step 1：寫 SCSS**
+
+```scss
+// SectionTitle.module.scss
+.root {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+}
+```
+
+- [ ] **Step 2：寫 component**
+
+```tsx
+// SectionTitle.tsx
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import styles from "./SectionTitle.module.scss";
+
+type Props<E extends ElementType> = {
+  as?: E;
+  children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<E>, "as" | "children" | "className" | "style">;
+
+export function SectionTitle<E extends ElementType = "h2">({
+  as,
+  children,
+  ...rest
+}: Props<E>) {
+  const Tag = (as ?? "h2") as ElementType;
+  return (
+    <Tag className={styles.root} {...rest}>
+      {children}
+    </Tag>
+  );
+}
+```
+
+### Task 1.3：MetricBlock
+
+責任：label + value + 可選 trend slot；size default(1rem) / lg(1.25rem)；align start / end。
+
+- [ ] **Step 1：寫 SCSS**
+
+```scss
+// MetricBlock.module.scss
+.root {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.alignEnd {
+  justify-items: end;
+  text-align: end;
+}
+
+.label {
+  margin: 0;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: 400;
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-weight: 600;
+}
+
+.valueDefault {
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+}
+
+.valueLg {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+}
+```
+
+- [ ] **Step 2：寫 component**
+
+```tsx
+// MetricBlock.tsx
+import type { ReactNode } from "react";
+import styles from "./MetricBlock.module.scss";
+
+export interface MetricBlockProps {
+  label: ReactNode;
+  value: ReactNode;
+  size?: "default" | "lg";
+  align?: "start" | "end";
+  trailing?: ReactNode;
+}
+
+export function MetricBlock({
+  label,
+  value,
+  size = "default",
+  align = "start",
+  trailing,
+}: MetricBlockProps) {
+  const valueClass =
+    size === "lg" ? styles.valueLg : styles.valueDefault;
+  const rootClass = [styles.root, align === "end" && styles.alignEnd]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={rootClass}>
+      <span className={styles.label}>{label}</span>
+      <strong className={`${styles.value} ${valueClass}`}>
+        {value}
+        {trailing}
+      </strong>
+    </div>
+  );
+}
+```
+
+### Task 1.4：TimeDisplay
+
+責任：時間數字（monospace）；variant countdown / header；可選 label。
+
+- [ ] **Step 1：寫 SCSS**
+
+```scss
+// TimeDisplay.module.scss
+.root {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.label {
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: 400;
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.value {
+  color: var(--cds-text-primary);
+  font-family: var(--cds-code-font-family, monospace);
+}
+
+.countdown {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-03-line-height, 1.4);
+}
+
+.header {
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: 400;
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+}
+```
+
+- [ ] **Step 2：寫 component**
+
+```tsx
+// TimeDisplay.tsx
+import type { ReactNode } from "react";
+import styles from "./TimeDisplay.module.scss";
+
+export interface TimeDisplayProps {
+  value: ReactNode;
+  variant?: "countdown" | "header";
+  label?: ReactNode;
+}
+
+export function TimeDisplay({
+  value,
+  variant = "countdown",
+  label,
+}: TimeDisplayProps) {
+  const valueClass =
+    variant === "header" ? styles.header : styles.countdown;
+  return (
+    <span className={styles.root}>
+      {label && <span className={styles.label}>{label}</span>}
+      <span className={`${styles.value} ${valueClass}`}>{value}</span>
+    </span>
+  );
+}
+```
+
+### Task 1.5：Barrel export
+
+- [ ] **Step 1：寫 index.ts**
+
+```ts
+// frontend/src/shared/components/dashboard/typography/index.ts
+export { PageTitle } from "./PageTitle";
+export { SectionTitle } from "./SectionTitle";
+export { MetricBlock, type MetricBlockProps } from "./MetricBlock";
+export { TimeDisplay, type TimeDisplayProps } from "./TimeDisplay";
+```
+
+### Task 1.6：行為測試
+
+涵蓋：預設 tag、`as` 切換、MetricBlock align、TimeDisplay 有/無 label、TimeDisplay variant。
+
+- [ ] **Step 1：寫測試**
+
+```tsx
+// typography.test.tsx
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  MetricBlock,
+  PageTitle,
+  SectionTitle,
+  TimeDisplay,
+} from "./index";
+
+describe("PageTitle", () => {
+  it("defaults to h1", () => {
+    render(<PageTitle>Hello</PageTitle>);
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Hello");
+  });
+
+  it("respects as prop", () => {
+    render(<PageTitle as="h2">Hello</PageTitle>);
+    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
+  });
+});
+
+describe("SectionTitle", () => {
+  it("defaults to h2", () => {
+    render(<SectionTitle>Section</SectionTitle>);
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent("Section");
+  });
+});
+
+describe("MetricBlock", () => {
+  it("renders label and value", () => {
+    render(<MetricBlock label="參賽人數" value={42} />);
+    expect(screen.getByText("參賽人數")).toBeInTheDocument();
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("renders trailing slot", () => {
+    render(
+      <MetricBlock label="x" value="y" trailing={<span data-testid="t">T</span>} />,
+    );
+    expect(screen.getByTestId("t")).toBeInTheDocument();
+  });
+});
+
+describe("TimeDisplay", () => {
+  it("renders value", () => {
+    render(<TimeDisplay value="01:23:45" />);
+    expect(screen.getByText("01:23:45")).toBeInTheDocument();
+  });
+
+  it("renders optional label", () => {
+    render(<TimeDisplay value="01:23:45" label="剩餘時間" />);
+    expect(screen.getByText("剩餘時間")).toBeInTheDocument();
+  });
+});
+```
+
+- [ ] **Step 2：跑測試**
+
+```bash
+cd frontend && npx vitest run src/shared/components/dashboard/typography
+```
+
+預期：全綠。
+
+### Task 1.7：Storybook stories
+
+- [ ] **Step 1：寫 stories**
+
+```tsx
+// typography.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowUp } from "@carbon/icons-react";
+import {
+  MetricBlock,
+  PageTitle,
+  SectionTitle,
+  TimeDisplay,
+} from "./index";
+
+const meta: Meta = {
+  title: "Dashboard/Typography",
+  parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Headings: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: "1rem" }}>
+      <PageTitle>2026 春季程式競賽</PageTitle>
+      <SectionTitle>參賽進度</SectionTitle>
+    </div>
+  ),
+};
+
+export const Metrics: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "2rem" }}>
+      <MetricBlock label="題目數量" value={12} />
+      <MetricBlock label="參賽人數" value={42} size="lg" />
+      <MetricBlock
+        label="完成率"
+        value="78%"
+        size="lg"
+        trailing={<ArrowUp size={16} />}
+      />
+      <MetricBlock label="剩餘" value="04:12" align="end" />
+    </div>
+  ),
+};
+
+export const Times: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "2rem", alignItems: "center" }}>
+      <TimeDisplay variant="countdown" value="01:23:45" label="剩餘時間" />
+      <TimeDisplay variant="header" value="14:05" />
+    </div>
+  ),
+};
+```
+
+### Task 1.8：Commit
+
+- [ ] **Step 1：commit**
+
+```bash
+git add frontend/src/shared/components/dashboard/typography
+git commit -m "feat(dashboard): add typography primitives"
+```
+
+---
+
+## Phase 2：結構元件 Container / Block / BlockHeader
+
+**Files:**
+
+- Create: `frontend/src/shared/components/dashboard/DashboardPage.tsx`
+- Create: `frontend/src/shared/components/dashboard/DashboardPage.module.scss`
+- Create: `frontend/src/shared/components/dashboard/DashboardContainer.tsx`
+- Create: `frontend/src/shared/components/dashboard/DashboardContainer.module.scss`
+- Create: `frontend/src/shared/components/dashboard/DashboardBlock.tsx`
+- Create: `frontend/src/shared/components/dashboard/DashboardBlock.module.scss`
+- Create: `frontend/src/shared/components/dashboard/BlockHeader.tsx`
+- Create: `frontend/src/shared/components/dashboard/BlockHeader.module.scss`
+- Create: `frontend/src/shared/components/dashboard/index.ts`
+- Create: `frontend/src/shared/components/dashboard/structure.test.tsx`
+- Create: `frontend/src/shared/components/dashboard/structure.stories.tsx`
+
+### Task 2.1：DashboardPage
+
+責任：scroll 容器 + max-width clamp + 頁面 padding。
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// DashboardPage.module.scss
+.root {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.inner {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+@media (max-width: 672px) {
+  .inner {
+    padding: 0.75rem;
+  }
+}
+```
+
+- [ ] **Step 2：component**
+
+```tsx
+// DashboardPage.tsx
+import type { ReactNode } from "react";
+import styles from "./DashboardPage.module.scss";
+
+export interface DashboardPageProps {
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+export function DashboardPage({ children, ariaLabel }: DashboardPageProps) {
+  return (
+    <main className={styles.root} aria-label={ariaLabel}>
+      <div className={styles.inner}>{children}</div>
+    </main>
+  );
+}
+```
+
+### Task 2.2：DashboardContainer
+
+責任：layout=stack/split/grid + dividers="auto"|"none" + bordered；不接 padding/style/className。
+
+關鍵實作：dividers 用 `> *:not(:last-child)` 補 border（stack：bottom；split：right；grid：right + bottom 都補，外層 wrap 時自動）。
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// DashboardContainer.module.scss
+.root {
+  display: flex;
+  min-width: 0;
+}
+
+.bordered {
+  border: 1px solid var(--cds-border-subtle);
+}
+
+// stack
+.stack {
+  flex-direction: column;
+}
+
+.stack.dividers > *:not(:last-child) {
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+// split
+.split {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.split.dividers > *:not(:last-child) {
+  border-right: 1px solid var(--cds-border-subtle);
+}
+
+@media (max-width: 1056px) {
+  .split {
+    flex-direction: column;
+  }
+
+  .split.dividers > *:not(:last-child) {
+    border-right: 0;
+    border-bottom: 1px solid var(--cds-border-subtle);
+  }
+}
+
+// grid
+.grid {
+  display: grid;
+}
+
+.gridCols2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.gridCols3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.gridCols4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.gridColsAuto {
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+}
+
+.grid.dividers > * {
+  border-right: 1px solid var(--cds-border-subtle);
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+// 最右一欄 / 最下一列消除多餘 border 由具體 column 數決定
+.grid.dividers.gridCols2 > *:nth-child(2n) { border-right: 0; }
+.grid.dividers.gridCols3 > *:nth-child(3n) { border-right: 0; }
+.grid.dividers.gridCols4 > *:nth-child(4n) { border-right: 0; }
+
+// 最後一列無下邊框（簡化處理：所有 child 加 bottom，再用負的 margin 方式較複雜；改用最後 child 取消）
+.grid.dividers > *:last-child { border-right: 0; }
+
+// 最後一整列移除底邊：以 nth-last-child + nth-child 的精確算法在 wrap 情境較難覆蓋全部欄數；保留底邊時讓外層 .bordered 包裹效果視覺仍可接受。
+// （保留 bottom border，整體外觀類似 Carbon DataTable 的網格視覺）
+
+@media (max-width: 672px) {
+  .grid:not(.gridColsAuto) {
+    grid-template-columns: 1fr;
+  }
+
+  .grid.dividers:not(.gridColsAuto) > * {
+    border-right: 0;
+  }
+}
+```
+
+- [ ] **Step 2：component**
+
+```tsx
+// DashboardContainer.tsx
+import type { ReactNode } from "react";
+import styles from "./DashboardContainer.module.scss";
+
+type Layout = "stack" | "split" | "grid";
+type Columns = 2 | 3 | 4 | "auto";
+
+export interface DashboardContainerProps {
+  layout: Layout;
+  columns?: Columns;
+  dividers?: "auto" | "none";
+  bordered?: boolean;
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+const COLS_CLASS: Record<Columns, string> = {
+  2: styles.gridCols2,
+  3: styles.gridCols3,
+  4: styles.gridCols4,
+  auto: styles.gridColsAuto,
+};
+
+export function DashboardContainer({
+  layout,
+  columns,
+  dividers = "none",
+  bordered = false,
+  children,
+  ariaLabel,
+}: DashboardContainerProps) {
+  const classes = [
+    styles.root,
+    styles[layout],
+    dividers === "auto" && styles.dividers,
+    bordered && styles.bordered,
+    layout === "grid" && columns && COLS_CLASS[columns],
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={classes} aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
+}
+```
+
+### Task 2.3：DashboardBlock
+
+責任：padding (default/compact/flush)；不畫 border。
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// DashboardBlock.module.scss
+.root {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.paddingDefault {
+  padding: 1.25rem 1.5rem;
+}
+
+.paddingCompact {
+  padding: 0.75rem 1rem;
+}
+
+.paddingFlush {
+  padding: 0;
+}
+
+@media (max-width: 672px) {
+  .paddingDefault {
+    padding: 1rem;
+  }
+}
+```
+
+- [ ] **Step 2：component**
+
+```tsx
+// DashboardBlock.tsx
+import type { ReactNode } from "react";
+import styles from "./DashboardBlock.module.scss";
+
+type Padding = "default" | "compact" | "flush";
+
+export interface DashboardBlockProps {
+  padding?: Padding;
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+const PAD: Record<Padding, string> = {
+  default: styles.paddingDefault,
+  compact: styles.paddingCompact,
+  flush: styles.paddingFlush,
+};
+
+export function DashboardBlock({
+  padding = "default",
+  children,
+  ariaLabel,
+}: DashboardBlockProps) {
+  return (
+    <section
+      className={`${styles.root} ${PAD[padding]}`}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </section>
+  );
+}
+```
+
+### Task 2.4：BlockHeader
+
+責任：title + description + actions slot；可選 titleSize=page|section、titleAs。
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// BlockHeader.module.scss
+.root {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.text {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.description {
+  margin: 0;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+}
+
+.actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 0 0 auto;
+}
+```
+
+- [ ] **Step 2：component**
+
+```tsx
+// BlockHeader.tsx
+import type { ElementType, ReactNode } from "react";
+import { PageTitle } from "./typography/PageTitle";
+import { SectionTitle } from "./typography/SectionTitle";
+import styles from "./BlockHeader.module.scss";
+
+export interface BlockHeaderProps {
+  title: ReactNode;
+  titleAs?: ElementType;
+  titleSize?: "page" | "section";
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+export function BlockHeader({
+  title,
+  titleAs,
+  titleSize = "section",
+  description,
+  actions,
+}: BlockHeaderProps) {
+  const TitleComp = titleSize === "page" ? PageTitle : SectionTitle;
+  return (
+    <header className={styles.root}>
+      <div className={styles.text}>
+        <TitleComp as={titleAs}>{title}</TitleComp>
+        {description && <p className={styles.description}>{description}</p>}
+      </div>
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </header>
+  );
+}
+```
+
+### Task 2.5：Barrel export
+
+- [ ] **Step 1：寫 index.ts**
+
+```ts
+// frontend/src/shared/components/dashboard/index.ts
+export * from "./typography";
+export { DashboardPage } from "./DashboardPage";
+export {
+  DashboardContainer,
+  type DashboardContainerProps,
+} from "./DashboardContainer";
+export { DashboardBlock, type DashboardBlockProps } from "./DashboardBlock";
+export { BlockHeader, type BlockHeaderProps } from "./BlockHeader";
+```
+
+### Task 2.6：行為測試
+
+- [ ] **Step 1：寫測試**
+
+```tsx
+// structure.test.tsx
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardPage,
+} from "./index";
+
+describe("DashboardPage", () => {
+  it("renders children inside main", () => {
+    render(<DashboardPage ariaLabel="page">x</DashboardPage>);
+    expect(screen.getByRole("main", { name: "page" })).toHaveTextContent("x");
+  });
+});
+
+describe("DashboardContainer", () => {
+  it("renders children", () => {
+    render(
+      <DashboardContainer layout="stack">
+        <div>a</div>
+        <div>b</div>
+      </DashboardContainer>,
+    );
+    expect(screen.getByText("a")).toBeInTheDocument();
+    expect(screen.getByText("b")).toBeInTheDocument();
+  });
+});
+
+describe("DashboardBlock", () => {
+  it("renders as section", () => {
+    render(<DashboardBlock ariaLabel="block">body</DashboardBlock>);
+    expect(screen.getByRole("region", { name: "block" })).toHaveTextContent("body");
+  });
+});
+
+describe("BlockHeader", () => {
+  it("renders title and description", () => {
+    render(<BlockHeader title="Hello" description="desc" />);
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    expect(screen.getByText("desc")).toBeInTheDocument();
+  });
+
+  it("renders actions slot", () => {
+    render(
+      <BlockHeader
+        title="t"
+        actions={<button data-testid="a">A</button>}
+      />,
+    );
+    expect(screen.getByTestId("a")).toBeInTheDocument();
+  });
+
+  it("uses h1 when titleSize=page", () => {
+    render(<BlockHeader title="X" titleSize="page" />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+});
+```
+
+- [ ] **Step 2：跑測試**
+
+```bash
+cd frontend && npx vitest run src/shared/components/dashboard
+```
+
+預期：全綠。
+
+### Task 2.7：Storybook stories
+
+- [ ] **Step 1：寫 stories**
+
+```tsx
+// structure.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import { Add } from "@carbon/icons-react";
+import { Button } from "@carbon/react";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardPage,
+  MetricBlock,
+} from "./index";
+
+const meta: Meta = {
+  title: "Dashboard/Structure",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const SplitWithStackInside: Story = {
+  render: () => (
+    <DashboardPage>
+      <DashboardContainer layout="split" bordered dividers="auto">
+        <DashboardContainer layout="stack" dividers="auto">
+          <DashboardBlock>
+            <BlockHeader
+              titleSize="page"
+              title="2026 春季程式競賽"
+              description="練習用儀表板示範"
+              actions={<Button size="sm" renderIcon={Add}>新增</Button>}
+            />
+          </DashboardBlock>
+          <DashboardContainer layout="grid" columns={3} dividers="auto">
+            <DashboardBlock><MetricBlock label="題目" value={12} /></DashboardBlock>
+            <DashboardBlock><MetricBlock label="參賽" value={42} /></DashboardBlock>
+            <DashboardBlock><MetricBlock label="完成率" value="78%" /></DashboardBlock>
+          </DashboardContainer>
+        </DashboardContainer>
+        <DashboardContainer layout="stack" dividers="auto">
+          <DashboardBlock>
+            <BlockHeader title="統計" description="近 24 小時" />
+          </DashboardBlock>
+          <DashboardBlock>內容</DashboardBlock>
+        </DashboardContainer>
+      </DashboardContainer>
+    </DashboardPage>
+  ),
+};
+
+export const Grid2x2Matrix: Story = {
+  render: () => (
+    <DashboardContainer layout="grid" columns={2} bordered dividers="auto">
+      <DashboardBlock><MetricBlock label="A" value="1" size="lg" /></DashboardBlock>
+      <DashboardBlock><MetricBlock label="B" value="2" size="lg" /></DashboardBlock>
+      <DashboardBlock><MetricBlock label="C" value="3" size="lg" /></DashboardBlock>
+      <DashboardBlock><MetricBlock label="D" value="4" size="lg" /></DashboardBlock>
+    </DashboardContainer>
+  ),
+};
+```
+
+### Task 2.8：Commit
+
+- [ ] **Step 1：commit**
+
+```bash
+git add frontend/src/shared/components/dashboard
+git commit -m "feat(dashboard): add page/container/block/header primitives"
+```
+
+---
+
+## Phase 3：Tabs + Toolbar
+
+**Files:**
+
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardTabs.tsx`
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx`
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss`
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx`
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx`
+- Create: `frontend/src/shared/components/dashboard/tabs/DashboardToolbar.module.scss`
+- Create: `frontend/src/shared/components/dashboard/tabs/index.ts`
+- Create: `frontend/src/shared/components/dashboard/tabs/tabs.test.tsx`
+- Create: `frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx`
+- Modify: `frontend/src/shared/components/dashboard/index.ts`（加上 tabs 出口）
+
+### Task 3.1：DashboardTabs context provider
+
+- [ ] **Step 1：context**
+
+```tsx
+// DashboardTabs.tsx
+import { createContext, useContext, type ReactNode } from "react";
+
+interface Ctx {
+  activeId: string;
+  onChange: (id: string) => void;
+}
+const TabsCtx = createContext<Ctx | null>(null);
+
+export interface DashboardTabsProps {
+  activeId: string;
+  onChange: (id: string) => void;
+  children: ReactNode;
+}
+
+export function DashboardTabs({
+  activeId,
+  onChange,
+  children,
+}: DashboardTabsProps) {
+  return (
+    <TabsCtx.Provider value={{ activeId, onChange }}>
+      {children}
+    </TabsCtx.Provider>
+  );
+}
+
+export function useDashboardTabs(): Ctx {
+  const ctx = useContext(TabsCtx);
+  if (!ctx) {
+    throw new Error("DashboardTabs context missing");
+  }
+  return ctx;
+}
+```
+
+### Task 3.2：DashboardTabBar
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// DashboardTabBar.module.scss
+.root {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+.tabs {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.toolbar {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 1 auto;
+  margin: 0 1rem;
+  align-self: center;
+  max-width: 24rem;
+  width: 100%;
+}
+
+@media (max-width: 672px) {
+  .root {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .toolbar {
+    margin: 0 1rem 0.5rem;
+    max-width: none;
+  }
+}
+```
+
+- [ ] **Step 2：component（用 Carbon Tabs）**
+
+```tsx
+// DashboardTabBar.tsx
+import type { ReactNode } from "react";
+import { Tabs, TabList, Tab } from "@carbon/react";
+import { useDashboardTabs } from "./DashboardTabs";
+import styles from "./DashboardTabBar.module.scss";
+
+export interface TabDef {
+  id: string;
+  label: ReactNode;
+  badge?: ReactNode;
+}
+
+export interface DashboardTabBarProps {
+  tabs: TabDef[];
+  toolbar?: ReactNode;
+}
+
+export function DashboardTabBar({ tabs, toolbar }: DashboardTabBarProps) {
+  const { activeId, onChange } = useDashboardTabs();
+  const selectedIndex = Math.max(
+    0,
+    tabs.findIndex((t) => t.id === activeId),
+  );
+  return (
+    <div className={styles.root}>
+      <Tabs
+        selectedIndex={selectedIndex}
+        onChange={({ selectedIndex }) => {
+          const next = tabs[selectedIndex];
+          if (next) onChange(next.id);
+        }}
+        className={styles.tabs}
+      >
+        <TabList aria-label="dashboard tabs">
+          {tabs.map((t) => (
+            <Tab key={t.id}>
+              {t.label}
+              {t.badge !== undefined && <> ({t.badge})</>}
+            </Tab>
+          ))}
+        </TabList>
+      </Tabs>
+      {toolbar && <div className={styles.toolbar}>{toolbar}</div>}
+    </div>
+  );
+}
+```
+
+### Task 3.3：DashboardTabPanel
+
+- [ ] **Step 1：component**
+
+```tsx
+// DashboardTabPanel.tsx
+import type { ReactNode } from "react";
+import { useDashboardTabs } from "./DashboardTabs";
+
+export interface DashboardTabPanelProps {
+  tabId: string;
+  children: ReactNode;
+}
+
+export function DashboardTabPanel({ tabId, children }: DashboardTabPanelProps) {
+  const { activeId } = useDashboardTabs();
+  if (activeId !== tabId) return null;
+  return <>{children}</>;
+}
+```
+
+### Task 3.4：DashboardToolbar
+
+- [ ] **Step 1：SCSS**
+
+```scss
+// DashboardToolbar.module.scss
+.root {
+  display: inline-flex;
+  align-items: stretch;
+  width: 100%;
+  gap: 0;
+  border: 0;
+  background: transparent;
+}
+
+.search {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.search :global(.cds--search-input) {
+  border: none;
+  background: transparent;
+}
+
+.search :global(.cds--search-magnifier) {
+  inset-inline-start: 0.75rem;
+}
+
+.filterMenu {
+  flex: 0 0 auto;
+  border-left: 0;
+}
+```
+
+- [ ] **Step 2：component**
+
+```tsx
+// DashboardToolbar.tsx
+import type { ChangeEvent, ReactNode } from "react";
+import { Search } from "@carbon/react";
+import styles from "./DashboardToolbar.module.scss";
+
+export interface DashboardToolbarProps {
+  children: ReactNode;
+}
+
+function Root({ children }: DashboardToolbarProps) {
+  return <div className={styles.root}>{children}</div>;
+}
+
+interface ToolbarSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  ariaLabel?: string;
+}
+
+function ToolbarSearch({
+  value,
+  onChange,
+  placeholder,
+  ariaLabel,
+}: ToolbarSearchProps) {
+  return (
+    <div className={styles.search}>
+      <Search
+        size="lg"
+        labelText={ariaLabel ?? placeholder ?? "search"}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}
+
+interface ToolbarFilterSlotProps {
+  children: ReactNode;
+}
+function ToolbarFilter({ children }: ToolbarFilterSlotProps) {
+  return <div className={styles.filterMenu}>{children}</div>;
+}
+
+export const DashboardToolbar = Object.assign(Root, {
+  Search: ToolbarSearch,
+  Filter: ToolbarFilter,
+});
+```
+
+### Task 3.5：Barrel exports
+
+- [ ] **Step 1：tabs/index.ts**
+
+```ts
+export {
+  DashboardTabs,
+  type DashboardTabsProps,
+} from "./DashboardTabs";
+export {
+  DashboardTabBar,
+  type DashboardTabBarProps,
+  type TabDef,
+} from "./DashboardTabBar";
+export {
+  DashboardTabPanel,
+  type DashboardTabPanelProps,
+} from "./DashboardTabPanel";
+export {
+  DashboardToolbar,
+  type DashboardToolbarProps,
+} from "./DashboardToolbar";
+```
+
+- [ ] **Step 2：在 dashboard/index.ts 加入**
+
+```ts
+export * from "./tabs";
+```
+
+### Task 3.6：行為測試
+
+- [ ] **Step 1：tabs.test.tsx**
+
+```tsx
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  DashboardToolbar,
+} from "./index";
+
+describe("Dashboard tabs", () => {
+  function setup(active: string, onChange = vi.fn()) {
+    render(
+      <DashboardTabs activeId={active} onChange={onChange}>
+        <DashboardTabBar
+          tabs={[
+            { id: "a", label: "A" },
+            { id: "b", label: "B" },
+          ]}
+          toolbar={
+            <DashboardToolbar>
+              <DashboardToolbar.Search
+                value=""
+                onChange={() => undefined}
+                placeholder="search"
+              />
+            </DashboardToolbar>
+          }
+        />
+        <DashboardTabPanel tabId="a">PANEL_A</DashboardTabPanel>
+        <DashboardTabPanel tabId="b">PANEL_B</DashboardTabPanel>
+      </DashboardTabs>,
+    );
+    return { onChange };
+  }
+
+  it("only renders active panel", () => {
+    setup("a");
+    expect(screen.getByText("PANEL_A")).toBeInTheDocument();
+    expect(screen.queryByText("PANEL_B")).not.toBeInTheDocument();
+  });
+
+  it("renders toolbar slot", () => {
+    setup("a");
+    expect(screen.getByPlaceholderText("search")).toBeInTheDocument();
+  });
+
+  it("fires onChange when clicking another tab", () => {
+    const { onChange } = setup("a");
+    fireEvent.click(screen.getByRole("tab", { name: "B" }));
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+});
+```
+
+- [ ] **Step 2：跑測試**
+
+```bash
+cd frontend && npx vitest run src/shared/components/dashboard/tabs
+```
+
+### Task 3.7：Stories
+
+- [ ] **Step 1：tabs.stories.tsx**
+
+```tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  DashboardBlock,
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  DashboardToolbar,
+} from "../index";
+
+const meta: Meta = {
+  title: "Dashboard/Tabs",
+  parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const TabsWithToolbar: Story = {
+  render: () => {
+    const [active, setActive] = useState("all");
+    const [q, setQ] = useState("");
+    return (
+      <DashboardBlock padding="flush">
+        <DashboardTabs activeId={active} onChange={setActive}>
+          <DashboardTabBar
+            tabs={[
+              { id: "all", label: "全部" },
+              { id: "active", label: "進行中", badge: 12 },
+              { id: "done", label: "已結束" },
+            ]}
+            toolbar={
+              <DashboardToolbar>
+                <DashboardToolbar.Search
+                  value={q}
+                  onChange={setQ}
+                  placeholder="搜尋學生"
+                />
+              </DashboardToolbar>
+            }
+          />
+          <DashboardTabPanel tabId="all">
+            <div style={{ padding: "1rem" }}>全部內容</div>
+          </DashboardTabPanel>
+          <DashboardTabPanel tabId="active">
+            <div style={{ padding: "1rem" }}>進行中</div>
+          </DashboardTabPanel>
+          <DashboardTabPanel tabId="done">
+            <div style={{ padding: "1rem" }}>已結束</div>
+          </DashboardTabPanel>
+        </DashboardTabs>
+      </DashboardBlock>
+    );
+  },
+};
+```
+
+### Task 3.8：Commit
+
+```bash
+git add frontend/src/shared/components/dashboard/tabs frontend/src/shared/components/dashboard/index.ts
+git commit -m "feat(dashboard): add tabs and toolbar primitives"
+```
+
+---
+
+## Phase 4：遷移學生競賽儀表板
+
+**Files:**
+
+- Modify: `frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx`
+- Modify: `frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss`（移除已用元件取代的規則）
+- Read for context: `frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx`
+
+### Task 4.1：取代外層 layout
+
+- [ ] **Step 1：把 `<main className={styles.root}><div className={styles.dashboard}><div className={styles.layout}>...` 換成 `<DashboardPage ariaLabel="學生競賽首頁"><DashboardContainer layout="split" bordered dividers="auto">...`
+
+- [ ] **Step 2：左欄改 `<DashboardContainer layout="stack" dividers="auto">`，右欄同理。
+
+### Task 4.2：取代 titleRow / detailRow / 各種 metric
+
+- [ ] **Step 1**：頁面標題用 `<DashboardBlock><BlockHeader titleSize="page" title={contest.name} actions={<TagRow ... />} /></DashboardBlock>`。
+- [ ] **Step 2**：原 `.detailRow` 三格 metric 改 `<DashboardContainer layout="grid" columns={3} dividers="auto">` 內含三個 `<DashboardBlock><MetricBlock label="..." value={...} /></DashboardBlock>`。
+- [ ] **Step 3**：原右欄 summaryMetric / summaryChart / scoreDistributionPanel / actionStack / rulesPanel 各包成 `<DashboardBlock>`，header 用 `<BlockHeader title="..." description="..." />` 或 `<BlockHeader title="..." />`。
+- [ ] **Step 4**：`.timerValue` 換 `<TimeDisplay variant="countdown" value={remainingTime} label="剩餘時間" />`。
+- [ ] **Step 5**：`.recordTitle` / `.recordMeta` 區仍走自有 layout（這部分不在整頓範圍），但 `.metricLabel + .metricValue` 全部用 `<MetricBlock>`。
+
+### Task 4.3：清理舊 SCSS
+
+- [ ] **Step 1**：刪除 `StudentContestDashboard.module.scss` 中已不使用的：`.title`、`.titleRow`、`.tagRow`、`.sectionHeader`、`.sectionTitle`、`.inlineRecordsTitle`、`.sectionDescription`、`.detailRow`、`.detailCell`、`.summaryMetric`、`.scoreDistributionPanel`、`.actionStack`、`.rulesPanel`、`.timerValue`、`.metricLabel`、`.metricValue`、`.layout`、`.mainPanel`、`.summaryPanel`、`.dashboard`、`.root`，以及對應的 media query 內覆寫。
+- [ ] **Step 2**：保留 `.recordTitle`、`.recordScore`、`.recordMeta`、`.problemReportList`、`.problemReportItem`、`.problemReportMeta`、`.questionList`、`.errorText`、`.emptyText`、`.warningIcon`、`.successIcon`、`.progressTrack`、`.progressFill`、`.chartSkeleton`、`.scoreDistributionChart`、`.rulesContent`、`.inlineRecordsPanel`（這些是 record-list 與 chart 自己的 layout，不在整頓範圍）。
+
+### Task 4.4：跑既有測試
+
+- [ ] **Step 1：跑 student dashboard 測試**
+
+```bash
+cd frontend && npx vitest run src/features/contest/components/studentDashboard
+```
+
+預期：全綠（測試斷言應為 text content 或 aria，不依賴具體 className）。
+
+如有測試斷言依賴 `styles.title` className，更新為 `getByRole("heading", { name: ... })`。
+
+### Task 4.5：lint / typecheck
+
+```bash
+cd frontend && npx tsc -b --noEmit && npm run lint -- src/features/contest/components/studentDashboard src/shared/components/dashboard
+```
+
+### Task 4.6：Commit
+
+```bash
+git add frontend/src/features/contest/components/studentDashboard
+git commit -m "refactor(contest): migrate student dashboard to dashboard primitives"
+```
+
+---
+
+## Phase 5：遷移管理端主畫面
+
+涵蓋：
+
+- `screens/admin/panels/AdminOverviewScreen.tsx` 與 `.module.scss`：頁面 header 改 `BlockHeader titleSize="page"`，刪除 `.dashboardTitleBlock / .dashboardTitleRow h2 / .dashboardDescription / .contestHeader`。
+- `components/admin/AdminOverviewCommandCenter.tsx` 與 `.module.scss`：
+  - `.examStatusMatrix + .examStatusMetric` 換 `DashboardContainer layout="grid" columns={2} dividers="auto"` + `MetricBlock size="lg"`。
+  - `.examScheduleGrid + .examScheduleItem` 換 `DashboardContainer layout="grid" columns={2} dividers="auto"` + `MetricBlock size="lg"`。
+  - `.examProgressBlock + .examProgressTitle + .examProgressValue` 換 `DashboardBlock` + `MetricBlock size="lg"`。
+  - `.panelHeader h3 / .panelHeader p` 全換 `BlockHeader`，刪 SCSS 對應規則。
+- `components/admin/AdminPreparationDashboard.module.scss`：`.panelHeader` 同上。
+- `components/admin/OverviewActionWidgets.module.scss`：`.title / .subtitle / .widgetTitle / 數值` 改用 `BlockHeader` + `MetricBlock`。
+- `components/admin/OverviewInsightsPanel.module.scss`：`.title / .actionTileTitle / 數值` 同上。
+- `components/admin/AdminInsightRail.module.scss`：影響部分（標題與描述）。
+
+每個檔案改完後 commit：
+
+```bash
+git commit -m "refactor(contest-admin): migrate <FileName> to dashboard primitives"
+```
+
+完成後跑：
+
+```bash
+cd frontend && npx vitest run src/features/contest && npx tsc -b --noEmit
+```
+
+---
+
+## Phase 6：遷移 ContestHero / ContestLayout 時間元件
+
+**Files:**
+
+- Modify: `frontend/src/features/contest/components/layout/ContestHero.tsx`
+- Modify: `frontend/src/features/contest/components/layout/ContestHero.module.scss`：刪 `.timeLabel / .timeValue`。
+- Modify: `frontend/src/features/contest/components/layout/ContestLayout.tsx`：`.headerTimerDisplay` 處改 `<TimeDisplay variant="header" value={...} />`。
+- Modify: `frontend/src/features/contest/components/layout/ContestLayout.module.scss`：刪 `.headerTimerDisplay`。
+
+完成後 commit：
+
+```bash
+git commit -m "refactor(contest): use TimeDisplay primitive for hero and layout timers"
+```
+
+---
+
+## 收尾
+
+- [ ] 跑全部 contest 測試：`cd frontend && npx vitest run src/features/contest`
+- [ ] 跑 typecheck：`cd frontend && npx tsc -b --noEmit`
+- [ ] 啟動 storybook 目視：`bash .codex/skills/qjudge-env-compose-owner/scripts/qjudge-dc.sh dev logs -f storybook`，逐個檢查 `Dashboard/Typography`、`Dashboard/Structure`、`Dashboard/Tabs` 故事。
+- [ ] 啟動 dev：visual check 學生 dashboard 與 admin overview。
+
+完成 Phase 1–6 後，stylelint 規則與其餘 admin tab（participants/clarifications/proctoring）的 toolbar 遷移為獨立後續工作。
diff --git a/docs/superpowers/plans/2026-05-05-contest-workspace-shell-unification-implementation.md b/docs/superpowers/plans/2026-05-05-contest-workspace-shell-unification-implementation.md
new file mode 100644
index 00000000..1484b2bd
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-05-contest-workspace-shell-unification-implementation.md
@@ -0,0 +1,1013 @@
+# 競賽 Layout 統一 Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** 砍掉 `ContestLayout.tsx`（505 行），所有 contest 頁面（含 runtime / 非 runtime）統一走 `MainLayout` + `WorkspaceShell`，客製化由 `SideMenu` / `WorkspaceTopNav` / `UserMenu` 各自的 mode-aware 邏輯處理。
+
+**Architecture:**
+- 新增一個 URL-based hook `useContestRuntimeMode` 集中判定 runtime 狀態
+- 新增 `RuntimeRouteWrapper` 包住 runtime route element，負責 ExamModeWrapper / 監考 modal / 關閉 right chat panel
+- `SideMenu` / `WorkspaceTopNav` / `UserMenu` 直接呼叫該 hook 自我調整
+- 合併路由：runtime 與非 runtime 共用 `ContestWorkspaceLayout`，整段放進 `MainLayout`
+
+**Tech Stack:** React 18、react-router-dom、Carbon Design System、Vitest/RTL（測試）。
+
+**參考文件：** `docs/superpowers/specs/2026-05-05-contest-workspace-shell-unification-design.md`
+
+---
+
+## Phase 1：共用偵測 + RuntimeRouteWrapper
+
+### Task 1: `useContestRuntimeMode` hook
+
+**Files:**
+- Create: `frontend/src/features/contest/hooks/useContestRuntimeMode.ts`
+- Create: `frontend/src/features/contest/hooks/useContestRuntimeMode.test.ts`
+
+- [ ] **Step 1：寫失敗測試**
+
+```typescript
+// frontend/src/features/contest/hooks/useContestRuntimeMode.test.ts
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { useContestRuntimeMode } from './useContestRuntimeMode';
+
+const wrap = (initialPath: string) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <MemoryRouter initialEntries={[initialPath]}>{children}</MemoryRouter>
+  );
+  return Wrapper;
+};
+
+describe('useContestRuntimeMode', () => {
+  it.each([
+    ['/classrooms/c1/contest/x1/solve', true],
+    ['/classrooms/c1/contest/x1/solve/p1', true],
+    ['/classrooms/c1/contest/x1', false],
+    ['/classrooms/c1/contest/x1/admin', false],
+    ['/dashboard', false],
+    ['/classrooms/c1', false],
+  ])('returns isRuntime=%s for %s', (path, expected) => {
+    const { result } = renderHook(() => useContestRuntimeMode(), {
+      wrapper: wrap(path),
+    });
+    expect(result.current.isRuntime).toBe(expected);
+  });
+});
+```
+
+- [ ] **Step 2：執行測試確認 fail**
+
+```bash
+cd frontend && npm test -- useContestRuntimeMode
+```
+Expected：fail（檔案尚不存在）。
+
+- [ ] **Step 3：實作**
+
+```typescript
+// frontend/src/features/contest/hooks/useContestRuntimeMode.ts
+import { useLocation } from 'react-router-dom';
+
+const RUNTIME_REGEX = /^\/classrooms\/[^/]+\/contest\/[^/]+\/solve(?:\/|$)/;
+
+export interface ContestRuntimeMode {
+  isRuntime: boolean;
+}
+
+export const useContestRuntimeMode = (): ContestRuntimeMode => {
+  const { pathname } = useLocation();
+  return { isRuntime: RUNTIME_REGEX.test(pathname) };
+};
+```
+
+- [ ] **Step 4：執行測試 pass**
+
+```bash
+cd frontend && npm test -- useContestRuntimeMode
+```
+Expected：6 tests pass。
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add frontend/src/features/contest/hooks/useContestRuntimeMode.ts frontend/src/features/contest/hooks/useContestRuntimeMode.test.ts
+git commit -m "feat(contest): URL-based useContestRuntimeMode hook"
+```
+
+---
+
+### Task 2: `RuntimeRouteWrapper` + `ContestRuntimeContext`
+
+**Files:**
+- Create: `frontend/src/features/contest/contexts/ContestRuntimeContext.tsx`
+- Create: `frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx`
+
+- [ ] **Step 1：建立 ContestRuntimeContext**
+
+```typescript
+// frontend/src/features/contest/contexts/ContestRuntimeContext.tsx
+import { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+
+interface ContestRuntimeContextValue {
+  isRuntime: boolean;
+}
+
+const ContestRuntimeContext = createContext<ContestRuntimeContextValue>({
+  isRuntime: false,
+});
+
+export const ContestRuntimeProvider = ({
+  value,
+  children,
+}: {
+  value: ContestRuntimeContextValue;
+  children: ReactNode;
+}) => (
+  <ContestRuntimeContext.Provider value={value}>
+    {children}
+  </ContestRuntimeContext.Provider>
+);
+
+export const useContestRuntimeContext = () => useContext(ContestRuntimeContext);
+```
+
+- [ ] **Step 2：建立 RuntimeRouteWrapper**
+
+開啟 `frontend/src/features/contest/components/layout/ContestLayout.tsx` 速覽 `useContestExamActions` / `ExamModeWrapper` / `ExamModeMonitorModal` / `ExamSubmissionProgressModal` / `useContestLayoutState` / `useContestTimers` 等使用方式作為參考，但**不從 ContestLayout import 任何東西**——RuntimeRouteWrapper 自行重建這些 hook 呼叫。
+
+```tsx
+// frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { Modal } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+import { useDisablePanel } from '@/features/app/contexts/useDisablePanel';
+import ExamModeWrapper from '@/features/contest/components/ExamModeWrapper';
+import { ExamModeMonitorModal } from '@/features/contest/components/modals/ExamModeMonitorModal';
+import ExamSubmissionProgressModal from '@/features/contest/components/exam/ExamSubmissionProgressModal';
+import { useContestExamActions } from '@/features/contest/hooks/useContestExamActions';
+import { useContestLayoutState } from '@/features/contest/hooks/useContestLayoutState';
+import { ContestRuntimeProvider } from '@/features/contest/contexts/ContestRuntimeContext';
+
+interface Props {
+  children: ReactNode;
+}
+
+export const RuntimeRouteWrapper = ({ children }: Props) => {
+  const { t } = useTranslation('contest');
+  const { t: tc } = useTranslation('common');
+  const {
+    contestId,
+    contest,
+    hasEnded,
+    refreshContest,
+    navigate,
+  } = useContestLayoutState();
+
+  const [errorOpen, setErrorOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [monitoringOpen, setMonitoringOpen] = useState(false);
+
+  // 關閉右側 AI chat panel
+  useDisablePanel('right');
+
+  const showError = (msg: string) => {
+    setErrorMessage(msg);
+    setErrorOpen(true);
+  };
+
+  const examActions = useContestExamActions({
+    contest,
+    contestId,
+    hasEnded,
+    refreshContest,
+    navigate,
+    messages: {
+      joinError: t('error.joinFailed'),
+      startError: t('error.startExamFailed'),
+      endError: t('error.endExamFailed'),
+      exitError: t('error.exitFailed'),
+    },
+    onError: showError,
+  });
+
+  const isContestParticipant = !!contest?.hasJoined;
+  const examModeProps = {
+    contestId: contestId || '',
+    cheatDetectionEnabled: isContestParticipant && !!contest?.cheatDetectionEnabled,
+    isExamMonitored: isContestParticipant && !!contest?.isExamMonitored,
+    requiresFullscreen: isContestParticipant && !!contest?.requiresFullscreen,
+    hasEnded,
+    lockReason: contest?.lockReason,
+    examStatus: contest?.examStatus,
+    onRefresh: refreshContest,
+  };
+
+  return (
+    <ContestRuntimeProvider value={{ isRuntime: true }}>
+      <ExamModeWrapper {...examModeProps}>
+        {children}
+      </ExamModeWrapper>
+
+      <ExamModeMonitorModal
+        open={monitoringOpen}
+        onRequestClose={() => setMonitoringOpen(false)}
+      />
+
+      <ExamSubmissionProgressModal
+        state={examActions.submissionProgress.state}
+        onRequestClose={examActions.submissionProgress.close}
+      />
+
+      <Modal
+        open={errorOpen}
+        modalHeading={tc('message.error')}
+        passiveModal
+        onRequestClose={() => setErrorOpen(false)}
+      >
+        <p>{errorMessage}</p>
+      </Modal>
+    </ContestRuntimeProvider>
+  );
+};
+
+export default RuntimeRouteWrapper;
+```
+
+> 若 `useContestExamActions` 的 `messages` 欄位實際 key 與本檔不同，依該檔簽名調整；不要更動其 contract。
+
+- [ ] **Step 3：型別檢查**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+Expected：通過。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add frontend/src/features/contest/contexts/ContestRuntimeContext.tsx frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
+git commit -m "feat(contest): RuntimeRouteWrapper + ContestRuntimeContext"
+```
+
+---
+
+## Phase 2：Top nav 與 UserMenu 適配
+
+### Task 3: `WorkspaceTopNav` 加 runtime 鎖定 + ExamStatusBadge
+
+**Files:**
+- Modify: `frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx`
+- Modify: `frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss`
+
+- [ ] **Step 1：在 WorkspaceTopNav 加 useContestRuntimeMode 與 ExamStatusBadge**
+
+開啟 `frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx`，於既有 imports 之後加入：
+
+```tsx
+import { useContestRuntimeMode } from '@/features/contest/hooks/useContestRuntimeMode';
+import { useContestLayoutState } from '@/features/contest/hooks/useContestLayoutState';
+import { useContestTimers } from '@/features/contest/hooks/useContestTimers';
+import ExamStatusBadge from '@/features/contest/components/exam/ExamStatusBadge';
+import { TimeDisplay } from '@/shared/components/dashboard';
+```
+
+於主元件函式內取得 runtime / contest 資料：
+
+```tsx
+const { isRuntime } = useContestRuntimeMode();
+const { contest, contestId, refreshContest } = useContestLayoutState();
+const { timeLeft, isCountdownToStart, unlockTimeLeft } = useContestTimers({
+  contest,
+  contestId,
+  refreshContest,
+});
+```
+
+- [ ] **Step 2：將 logo / 麵包屑 hyperlinks 套上 runtime 鎖定 className**
+
+定位 `frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx:153`（`<header>` 與 `styles.left`）。在現有的 logo / 麵包屑容器外層 className 後面附加 runtime modifier：
+
+```tsx
+<div
+  className={[styles.context, isRuntime ? styles.contextLocked : '']
+    .filter(Boolean)
+    .join(' ')}
+>
+```
+
+並對所有 `contextLink` 元素加 `aria-disabled={isRuntime}`、`tabIndex={isRuntime ? -1 : 0}`，並把 `onClick` 包裝為 `runtime 時 noop`：
+
+```tsx
+const handleContextClick = (next: () => void) =>
+  isRuntime
+    ? (e: React.SyntheticEvent) => { e.preventDefault(); }
+    : next;
+```
+
+接著把所有 `onClick={someHandler}` 替換為 `onClick={handleContextClick(someHandler)}`。
+
+- [ ] **Step 3：在 actions 區塊插入 ExamStatusBadge + 倒數**
+
+定位 `<div className={styles.actions}>`（第 291 行附近），在 `<UserMenu />` 之前插入：
+
+```tsx
+{isRuntime && contest && (
+  <>
+    <ExamStatusBadge
+      examStatus={contest.examStatus}
+      cheatDetectionEnabled={contest.cheatDetectionEnabled}
+      timeLeft={timeLeft}
+      unlockTimeLeft={unlockTimeLeft}
+      lockReason={contest.lockReason}
+      autoUnlockAt={contest.autoUnlockAt}
+    />
+    <div className={styles.runtimeTimer}>
+      <TimeDisplay
+        variant="header"
+        value={isCountdownToStart ? `(待開始) ${timeLeft}` : timeLeft}
+      />
+    </div>
+  </>
+)}
+```
+
+- [ ] **Step 4：在 SCSS 加 contextLocked 與 runtimeTimer 樣式**
+
+開啟 `frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss`，於檔案結尾新增：
+
+```scss
+.contextLocked {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.runtimeTimer {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-variant-numeric: tabular-nums;
+  margin-right: 0.5rem;
+}
+```
+
+- [ ] **Step 5：型別檢查 + 視覺驗證**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+```bash
+cd frontend && npm run dev
+```
+開瀏覽器：1) 隨意 contest dashboard 頁面 navbar 與其他 app 頁面一致；2) 進入 `/solve` 後 logo / 麵包屑 hyperlinks 點擊無反應、ExamStatusBadge + 倒數顯示。
+
+- [ ] **Step 6：Commit**
+
+```bash
+git add frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
+git commit -m "feat(top-nav): runtime lock + ExamStatusBadge in workspace top nav"
+```
+
+---
+
+### Task 4: `UserMenu` settingsOnly 來源改為 hook
+
+**Files:**
+- Modify: `frontend/src/features/app/components/UserMenu.tsx`
+
+- [ ] **Step 1：在 UserMenu 內讀 useContestRuntimeMode**
+
+開啟 `frontend/src/features/app/components/UserMenu.tsx`，於既有 imports 後加入：
+
+```tsx
+import { useContestRuntimeMode } from '@/features/contest/hooks/useContestRuntimeMode';
+```
+
+修改 props 與內部邏輯：原 `settingsOnly = false` 仍保留作為「外部強制覆蓋」的 escape hatch，但若沒傳就讀 hook：
+
+```tsx
+export const UserMenu: React.FC<UserMenuProps> = ({
+  settingsOnly,
+  ...rest
+}) => {
+  const { isRuntime } = useContestRuntimeMode();
+  const effectiveSettingsOnly = settingsOnly ?? isRuntime;
+
+  // ... 原本檔案內所有 `settingsOnly` 的引用都換為 `effectiveSettingsOnly`
+};
+```
+
+實作上把所有 `settingsOnly` 內部 reference（檔內第 81 行附近的條件分支等）統一替換為 `effectiveSettingsOnly`。
+
+- [ ] **Step 2：型別檢查 + 手動驗證**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+dev 開啟，driver flow：1) /dashboard 點頭像 → 完整選單；2) `/classrooms/.../contest/.../solve` 點頭像 → 只剩設定 / 登出。
+
+- [ ] **Step 3：Commit**
+
+```bash
+git add frontend/src/features/app/components/UserMenu.tsx
+git commit -m "feat(user-menu): auto settingsOnly during contest runtime"
+```
+
+---
+
+## Phase 3：SideMenu 兩個 contest mode
+
+### Task 5: `SideMenuContestIdleSection`
+
+**Files:**
+- Create: `frontend/src/features/app/components/SideMenuContestIdleSection.tsx`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/app/components/SideMenuContestIdleSection.tsx
+import { Link, useLocation, useParams } from 'react-router-dom';
+import { Home, ArrowLeft } from '@carbon/icons-react';
+
+interface Props {
+  classroomId: string;
+  contestId: string;
+  compact?: boolean;
+}
+
+export const SideMenuContestIdleSection = ({ classroomId, contestId, compact }: Props) => {
+  const { pathname } = useLocation();
+  const dashboardPath = `/classrooms/${classroomId}/contest/${contestId}`;
+  const isDashboard = pathname === dashboardPath;
+  const classroomPath = `/classrooms/${classroomId}`;
+
+  const itemBase: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.75rem',
+    padding: compact ? '0.5rem' : '0.75rem 1rem',
+    borderRadius: '0.25rem',
+    color: 'var(--cds-text-primary)',
+    textDecoration: 'none',
+  };
+
+  return (
+    <nav aria-label="Contest navigation" style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+      <Link to={classroomPath} style={itemBase}>
+        <ArrowLeft size={20} />
+        {!compact && <span>返回教室</span>}
+      </Link>
+      <Link
+        to={dashboardPath}
+        style={{
+          ...itemBase,
+          background: isDashboard ? 'var(--cds-layer-accent)' : 'transparent',
+          fontWeight: isDashboard ? 600 : 400,
+        }}
+        aria-current={isDashboard ? 'page' : undefined}
+      >
+        <Home size={20} />
+        {!compact && <span>競賽主頁</span>}
+      </Link>
+    </nav>
+  );
+};
+
+export default SideMenuContestIdleSection;
+```
+
+- [ ] **Step 2：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/app/components/SideMenuContestIdleSection.tsx
+git commit -m "feat(side-menu): contest idle section with back-to-classroom"
+```
+
+---
+
+### Task 6: `SideMenuContestRuntimeSection`
+
+**Files:**
+- Create: `frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx`
+
+- [ ] **Step 1：實作**
+
+```tsx
+// frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
+import { useNavigate, useParams } from 'react-router-dom';
+import { ContentSwitcher, Switch, Tag } from '@carbon/react';
+import { Checkmark, CircleDash, IncompleteCancel } from '@carbon/icons-react';
+import { useContest } from '@/features/contest/contexts/ContestContext';
+
+interface Props {
+  classroomId: string;
+  contestId: string;
+  /** 'solve' | 'dashboard' — current sidebar tab */
+  activeTab: 'solve' | 'dashboard';
+  /** 已選的 problem id，用以高亮 */
+  activeProblemId?: string;
+  compact?: boolean;
+}
+
+const statusIcon = (status: 'done' | 'partial' | 'untouched') => {
+  if (status === 'done') return <Checkmark size={16} aria-label="已作答" />;
+  if (status === 'partial') return <IncompleteCancel size={16} aria-label="進行中" />;
+  return <CircleDash size={16} aria-label="未作答" />;
+};
+
+export const SideMenuContestRuntimeSection = ({
+  classroomId,
+  contestId,
+  activeTab,
+  activeProblemId,
+  compact,
+}: Props) => {
+  const navigate = useNavigate();
+  const { contest } = useContest();
+  const dashboardPath = `/classrooms/${classroomId}/contest/${contestId}`;
+  const solvePath = `/classrooms/${classroomId}/contest/${contestId}/solve`;
+
+  const handleTabChange = ({ name }: { name: string | number }) => {
+    if (name === 'dashboard') navigate(dashboardPath);
+    else navigate(solvePath);
+  };
+
+  const problems = contest?.problems ?? [];
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+      {!compact && (
+        <ContentSwitcher
+          selectedIndex={activeTab === 'solve' ? 0 : 1}
+          onChange={handleTabChange}
+          size="sm"
+        >
+          <Switch name="solve" text="Solve" />
+          <Switch name="dashboard" text="Dashboard" />
+        </ContentSwitcher>
+      )}
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem' }}>
+        {problems.length === 0 ? (
+          <p style={{ color: 'var(--cds-text-secondary)', fontSize: '0.75rem' }}>
+            {compact ? '' : '尚無題目'}
+          </p>
+        ) : (
+          problems.map((p) => {
+            const isActive = p.problemId === activeProblemId;
+            const status =
+              p.userStatus === 'completed'
+                ? 'done'
+                : p.userStatus === 'in_progress'
+                  ? 'partial'
+                  : 'untouched';
+            const target = `/classrooms/${classroomId}/contest/${contestId}/solve/${p.problemId}`;
+            return (
+              <button
+                key={p.problemId}
+                type="button"
+                onClick={() => navigate(target)}
+                aria-current={isActive ? 'page' : undefined}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '0.5rem',
+                  padding: compact ? '0.5rem' : '0.5rem 0.75rem',
+                  borderRadius: '0.25rem',
+                  background: isActive ? 'var(--cds-layer-accent)' : 'transparent',
+                  border: 'none',
+                  cursor: 'pointer',
+                  textAlign: 'left',
+                  width: '100%',
+                  color: 'var(--cds-text-primary)',
+                }}
+              >
+                {statusIcon(status)}
+                {!compact && (
+                  <>
+                    <span style={{ flexShrink: 0, fontWeight: 600 }}>{p.label}</span>
+                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      {p.title}
+                    </span>
+                  </>
+                )}
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default SideMenuContestRuntimeSection;
+```
+
+> `contest.problems` / `userStatus` 的實際欄位名稱請對照 `core/entities/contest.entity.ts` 的 `ContestProblemSummary`；若 status 欄位不是 `userStatus` 就調整為實際 key，但**不改動 entity 定義**。
+
+- [ ] **Step 2：型別檢查 + Commit**
+
+```bash
+cd frontend && npm run -s typecheck
+git add frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
+git commit -m "feat(side-menu): contest runtime section with tabs and problem list"
+```
+
+---
+
+### Task 7: `SideMenu` 接上 contest idle / runtime 分支
+
+**Files:**
+- Modify: `frontend/src/features/app/components/SideMenu.tsx`
+
+- [ ] **Step 1：在 SideMenu 內 imports 區塊加入新元件與 hook**
+
+```tsx
+import { useContestRuntimeMode } from '@/features/contest/hooks/useContestRuntimeMode';
+import SideMenuContestIdleSection from './SideMenuContestIdleSection';
+import SideMenuContestRuntimeSection from './SideMenuContestRuntimeSection';
+```
+
+- [ ] **Step 2：在 SideMenu 主函式內加上 contest path 偵測**
+
+於既有取得 `pathname` 之後，新增：
+
+```tsx
+const contestMatch = useMemo(
+  () => pathname.match(/^\/classrooms\/([^/]+)\/contest\/([^/]+)/),
+  [pathname],
+);
+const inAdminPath = /^\/classrooms\/[^/]+\/contest\/[^/]+\/admin/.test(pathname);
+const { isRuntime } = useContestRuntimeMode();
+const inContestIdle = !!contestMatch && !inAdminPath && !isRuntime;
+const inContestRuntime = !!contestMatch && isRuntime;
+const classroomId = contestMatch?.[1] ?? '';
+const contestId = contestMatch?.[2] ?? '';
+const activeProblemId = useMemo(() => {
+  const m = pathname.match(/\/solve\/([^/]+)/);
+  return m?.[1];
+}, [pathname]);
+```
+
+> `useMemo` 已經是 SideMenu 內部使用模式，沿用即可。
+
+- [ ] **Step 3：在 `SideMenu` 既有 render flow 中插入 idle / runtime 分支**
+
+定位 SideMenu 內目前回傳的 nav 區塊（`<div className={styles.nav}>` 等），改為早期返回：
+
+```tsx
+if (inContestRuntime) {
+  return (
+    <SideMenuContestRuntimeSection
+      classroomId={classroomId}
+      contestId={contestId}
+      activeTab="solve"
+      activeProblemId={activeProblemId}
+      compact={compact}
+    />
+  );
+}
+
+if (inContestIdle) {
+  return (
+    <SideMenuContestIdleSection
+      classroomId={classroomId}
+      contestId={contestId}
+      compact={compact}
+    />
+  );
+}
+
+// 既有原始 SideMenu 內容（教室列表、提交、AI 等）
+return ( /* ... */ );
+```
+
+> 確切插入位置：早於既有「角色 / 路徑」分支返回；若 SideMenu 主結構是 `<aside>...</aside>`，可在頂層 `<aside>` 內以條件 children 的方式加分支，避免重複包 `<aside>`。
+
+- [ ] **Step 4：型別檢查 + 視覺驗證**
+
+```bash
+cd frontend && npm run -s typecheck
+```
+
+dev 啟動，逐一檢查：
+- /dashboard：原 SideMenu（教室、題目、提交...）
+- /classrooms/cid/contest/cid（idle）：sidebar 只有「返回教室 / 競賽主頁」
+- /classrooms/cid/contest/cid/admin：原 admin sidebar 不變
+- /classrooms/cid/contest/cid/solve（runtime）：sidebar 是 ContentSwitcher + 題目列表
+
+- [ ] **Step 5：Commit**
+
+```bash
+git add frontend/src/features/app/components/SideMenu.tsx
+git commit -m "feat(side-menu): switch to contest idle/runtime sections by URL"
+```
+
+---
+
+## Phase 4：路由合併
+
+### Task 8: `routes.tsx` 合併
+
+**Files:**
+- Modify: `frontend/src/features/contest/routes.tsx`
+- Modify: `frontend/src/features/contest/index.ts`（若有 export `classroomContestRuntimeRoutes`）
+
+- [ ] **Step 1：重寫 routes.tsx 的 contest 主路由**
+
+```tsx
+// frontend/src/features/contest/routes.tsx
+import { lazy, Suspense } from 'react';
+import { Route } from 'react-router';
+import ContestWorkspaceLayout from './components/layout/ContestWorkspaceLayout';
+import RuntimeRouteWrapper from './components/layout/RuntimeRouteWrapper';
+import { ContestProvider } from './contexts/ContestContext';
+import ContestDashboardScreen from './screens/ContestDashboardScreen';
+import ContestSolveScreen from './screens/ContestSolveScreen';
+import ContestPracticeScreen from './screens/ContestPracticeScreen';
+
+const AdminDashboardScreen = lazy(() => import('./screens/admin/AdminDashboardScreen'));
+const StudentExamDemoScreen = lazy(() => import('./screens/examDemo/StudentExamDemoScreen'));
+const ExamPrecheckScreen = lazy(() => import('./screens/paperExam/ExamPrecheckScreen'));
+
+/**
+ * Classroom Contest 主路由（dashboard + runtime 共用）。
+ * 在 App.tsx 必須掛在 <MainLayout> 之下。
+ */
+export const classroomContestRoutes = (
+  <Route
+    path="/classrooms/:classroomId/contest/:contestId"
+    element={<ContestWorkspaceLayout />}
+  >
+    <Route index element={<ContestDashboardScreen />} />
+    <Route
+      path="solve"
+      element={
+        <RuntimeRouteWrapper>
+          <ContestSolveScreen />
+        </RuntimeRouteWrapper>
+      }
+    />
+    <Route
+      path="solve/:problemId"
+      element={
+        <RuntimeRouteWrapper>
+          <ContestSolveScreen />
+        </RuntimeRouteWrapper>
+      }
+    />
+  </Route>
+);
+
+/**
+ * Classroom Contest Admin Dashboard — 獨立全頁面
+ */
+export const classroomContestAdminRoute = (
+  <Route
+    path="/classrooms/:classroomId/contest/:contestId/admin"
+    element={<Suspense fallback={null}><AdminDashboardScreen /></Suspense>}
+  />
+);
+
+/**
+ * Classroom Exam Preview — 獨立全頁面
+ */
+export const classroomExamPreviewRoute = (
+  <Route
+    path="/classrooms/:classroomId/contest/:contestId/exam-preview"
+    element={<Suspense fallback={null}><StudentExamDemoScreen /></Suspense>}
+  />
+);
+
+/**
+ * Classroom Practice — 獨立全頁面
+ */
+export const classroomPracticeRoute = (
+  <Route
+    path="/classrooms/:classroomId/contest/:contestId/practice"
+    element={
+      <ContestProvider>
+        <ContestPracticeScreen />
+      </ContestProvider>
+    }
+  />
+);
+
+/**
+ * Classroom Exam Precheck — 獨立全頁面
+ */
+export const classroomExamPrecheckRoute = (
+  <Route
+    path="/classrooms/:classroomId/contest/:contestId/exam-precheck"
+    element={
+      <ContestProvider>
+        <Suspense fallback={null}><ExamPrecheckScreen /></Suspense>
+      </ContestProvider>
+    }
+  />
+);
+```
+
+> **變動重點**：移除 `classroomContestDetailRoutes` 與 `classroomContestRuntimeRoutes`，合併為單一 `classroomContestRoutes`；移除 `ContestLayout` 的 import。
+
+- [ ] **Step 2：同步 `frontend/src/features/contest/index.ts`**
+
+把舊 exports（`classroomContestDetailRoutes`、`classroomContestRuntimeRoutes`）替換為 `classroomContestRoutes`。
+
+```bash
+grep -n "classroomContestDetailRoutes\|classroomContestRuntimeRoutes" frontend/src/features/contest/index.ts
+```
+
+把找到的 export 名稱改為 `classroomContestRoutes`，import 對齊。
+
+- [ ] **Step 3：Commit**
+
+```bash
+git add frontend/src/features/contest/routes.tsx frontend/src/features/contest/index.ts
+git commit -m "refactor(contest): merge runtime+detail routes into one branch"
+```
+
+---
+
+### Task 9: `App.tsx` 把 contest 路由放進 MainLayout
+
+**Files:**
+- Modify: `frontend/src/App.tsx`
+
+- [ ] **Step 1：修改 contest 路由掛載位置**
+
+定位 `frontend/src/App.tsx:148`（既有 `<Route element={<MainLayout />}>` 區塊）與 contest 路由相關片段。把目前分屬 MainLayout 內、外兩處的 contest 路由統一放進 MainLayout 下：
+
+搜尋現有：
+```bash
+grep -n "classroomContestDetailRoutes\|classroomContestRuntimeRoutes\|classroomContestRoutes" frontend/src/App.tsx
+```
+
+把舊的 `{classroomContestDetailRoutes}`（在 MainLayout 內）與 `{classroomContestRuntimeRoutes}`（在 MainLayout 外）替換為**單一引用** `{classroomContestRoutes}`，且**只放在 `<Route element={<MainLayout />}>` 之內**。
+
+對應 imports：
+
+```diff
+- import {
+-   classroomContestDetailRoutes,
+-   classroomContestRuntimeRoutes,
+-   classroomContestAdminRoute,
+-   classroomExamPreviewRoute,
+-   classroomPracticeRoute,
+-   classroomExamPrecheckRoute,
+- } from '@/features/contest';
++ import {
++   classroomContestRoutes,
++   classroomContestAdminRoute,
++   classroomExamPreviewRoute,
++   classroomPracticeRoute,
++   classroomExamPrecheckRoute,
++ } from '@/features/contest';
+```
+
+> 不要碰其他 admin / preview / practice / precheck route 的位置（依然獨立於 MainLayout 之外）。
+
+- [ ] **Step 2：型別檢查 + dev server**
+
+```bash
+cd frontend && npm run -s typecheck && npm run dev
+```
+
+開瀏覽器逐一驗證：
+- /classrooms/cid/contest/cid 渲染正常（與其他 dashboard 同 layout）
+- /classrooms/cid/contest/cid/solve 渲染正常（runtime sidebar + locked navbar）
+- /classrooms/cid/contest/cid/admin 渲染正常（不在 MainLayout 下，自帶 layout）
+- /classrooms/cid/contest/cid/exam-precheck 渲染正常（不在 MainLayout 下）
+
+- [ ] **Step 3：Commit**
+
+```bash
+git add frontend/src/App.tsx
+git commit -m "refactor(app): mount contest routes under MainLayout"
+```
+
+---
+
+## Phase 5：清理
+
+### Task 10: 刪除 `ContestLayout`
+
+**Files:**
+- Delete: `frontend/src/features/contest/components/layout/ContestLayout.tsx`
+- Delete: `frontend/src/features/contest/components/layout/ContestLayout.module.scss`
+
+- [ ] **Step 1：搜尋殘餘 import**
+
+```bash
+grep -rn "ContestLayout\b\|ContestLayout\.module\|from .*ContestLayout" frontend/src --include="*.ts" --include="*.tsx" | grep -v ContestLayoutHeaderSlotContext | grep -v ContestWorkspaceLayout | grep -v node_modules
+```
+
+對每個 hit 檢查並修改/刪除引用。預期殘餘只在已修改的檔案內。
+
+- [ ] **Step 2：刪檔**
+
+```bash
+rm frontend/src/features/contest/components/layout/ContestLayout.tsx
+rm frontend/src/features/contest/components/layout/ContestLayout.module.scss
+```
+
+- [ ] **Step 3：型別檢查 + lint**
+
+```bash
+cd frontend && npm run -s typecheck && npm run -s lint
+```
+Expected：通過。
+
+- [ ] **Step 4：Commit**
+
+```bash
+git add -A frontend/src/features/contest/components/layout/
+git commit -m "chore(contest): remove obsolete ContestLayout"
+```
+
+---
+
+### Task 11: i18n 與 E2E 驗收
+
+**Files:**
+- Modify: `frontend/src/locales/*` 或對應 i18n 檔（依專案結構）
+
+- [ ] **Step 1：i18n 檢查 / 同步**
+
+```bash
+cd frontend && npm run sync:i18n && npm run check:i18n
+```
+Expected：通過；本次未新增字串，預期無變動或僅顯示未使用提示。
+
+- [ ] **Step 2：執行所有單元測試**
+
+```bash
+cd frontend && npm test
+```
+Expected：所有測試通過，特別是 `useContestRuntimeMode.test.ts`。
+
+- [ ] **Step 3：手動 E2E 驗收清單**
+
+依序在瀏覽器逐一驗證：
+
+- [ ] 學生登入 → /dashboard：sidebar 是原本的（教室、題目、提交...），navbar 正常
+- [ ] 點進 /classrooms/cid/contest/cid：sidebar 切為「返回教室 / 競賽主頁」；navbar 仍可互動；右側 chat panel 可開啟
+- [ ] 點 navbar 教室 / contest 麵包屑可切換
+- [ ] 進入 /solve：
+  - sidebar 切為 ContentSwitcher（Solve / Dashboard）+ 題目列表
+  - navbar logo / 麵包屑點擊無反應（pointer-events: none）
+  - navbar 顯示 ExamStatusBadge 與倒數
+  - UserMenu 點開只剩設定 / 登出
+  - 右側 chat panel 不可開啟（FAB / 按鈕 disable）
+- [ ] sidebar 點 Dashboard tab → 切回 contest dashboard URL，sidebar 自動回 idle 模式，右側 chat 可開
+- [ ] sidebar 點 Solve tab 或題目項 → navigate 至 `/solve` 或 `/solve/{id}`
+- [ ] 視覺：navbar / sidebar 與其他 app 頁面（dashboard / classroom）視覺一致（顏色、border、字級、間距）
+- [ ] 行動裝置：sidebar 在 contest idle 與 runtime 模式都可透過 drawer 開啟，內容正確
+- [ ] 競賽結束（手動把 end_time 改為過去）：runtime sidebar 仍能瀏覽歷史；提交按鈕 disable
+
+- [ ] **Step 4：Commit i18n 變更（若有）**
+
+```bash
+git add -A
+git diff --cached --stat
+git commit -m "chore(contest): finalize layout unification verification"
+```
+
+---
+
+## 自我審查
+
+### 1. Spec 覆蓋
+
+- §A 架構：runtime/非 runtime 共用 `ContestWorkspaceLayout` → Task 8
+- §B `RuntimeRouteWrapper` → Task 2
+- §C `SideMenu` 兩個 mode → Task 5、6、7
+- §D `WorkspaceTopNav` runtime 鎖定 + ExamStatus → Task 3
+- §E `UserMenu` settingsOnly → Task 4
+- §F Runtime 偵測 → Task 1
+- §G 路由調整 → Task 8、9
+- 元件結構 / 刪除清單 → Task 10
+- 測試重點 → Task 1（unit）、Task 11（E2E）
+
+### 2. Placeholder 掃描
+
+- Task 7 內提到「依 SideMenu 主結構決定條件 children 包裝方式」—— 是合理的實作彈性註記，不是 TBD
+- Task 6 註記 `userStatus` 欄位需對照 entity —— 這是已知 entity 的屬性查詢，動作明確
+- Task 3 步驟 2 對 `onClick` 包裝邏輯給出完整 helper 函式，無 TBD
+- 無 TBD / TODO / 「實作 later」字樣
+
+### 3. 型別 / 命名一致性
+
+- `useContestRuntimeMode` 回傳 `{ isRuntime: boolean }`，Task 1、3、4、7 一致
+- `RuntimeRouteWrapper` 接受 `{ children }`，Task 2、8 一致
+- `ContestRuntimeProvider` value 形狀 `{ isRuntime: boolean }`，Task 2 內一致
+- `SideMenuContestIdleSection` / `SideMenuContestRuntimeSection` 命名與 file path 在 Task 5、6、7 一致
+- `classroomContestRoutes` 名稱在 Task 8、9、index.ts 一致
+- 路徑 regex `/^\/classrooms\/[^/]+\/contest\/[^/]+\/solve(?:\/|$)/` 在 Task 1 與 Task 7 一致
diff --git a/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md b/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
new file mode 100644
index 00000000..26049ec1
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-05-contest-announcement-qna-design.md
@@ -0,0 +1,342 @@
+# 競賽公告與對話功能 UX 設計
+
+- 日期：2026-05-05
+- 分支：dev
+- 狀態：Draft（待 writing-plans）
+
+## 目標
+
+讓競賽中三類訊息流——「廣播公告」、「老師–學生雙向對話」、「未讀通知」——形成一致、可被注意到的流程，並修正目前完全沒有通知入口、教師無法在考試前後發公告、學生無法回覆老師訊息的缺陷。
+
+## 範圍與非範圍
+
+**範圍**
+
+- ContestLayout 頂部 navbar 新增「通知鈴鐺」入口，覆蓋所有 contest 子頁面（dashboard / 答題 / 排行榜 / admin）
+- 學生與教師可在 contest dashboard / admin panel 進行雙向對話（thread）
+- 教師可在 AdminProctoringPanel 對「特定學生」主動開啟對話
+- 廣播公告 (`ContestAnnouncement`)：教師可在競賽未開始 / 進行中 / 已結束三種狀態下都能發布
+- 移除舊 `Clarification` 模型與既有 `ContestClarifications.tsx` / 相關 UI
+
+**非範圍**
+
+- 不引入 ReadReceipt 表、不顯示「已讀人數 / 未讀名單」（已讀狀態用 localStorage）
+- 不做 SSE / WebSocket，沿用 polling
+- 不做答題畫面內直接提問入口（學生想開對話需回 dashboard）
+- 不修改既有競賽分數 / 排行榜 / 監考偵測流程
+- 不做「公開 Q&A」（所有對話僅老師與該學生可見）
+- 不保留 `Clarification` 舊資料（依使用者指示直接 drop table、不做 fallback）
+
+## 現況差距
+
+| 既有 | 缺陷 |
+|---|---|
+| `Clarification` model | 只能「問一次答一次」，無法雙向多輪對話；老師無法主動開啟 |
+| `ContestAnnouncement` | 純廣播，老師無法只通知個別學生 |
+| `ContestClarifications.tsx` | 405 行單檔，混合公告 + Q&A + 三種 modal |
+| `ContestQAScreen` / `AdminClarificationsScreen` | 在「進行中以外」整段 readOnly，導致教師考試前後不能發公告 |
+| `ContestLayout` header | 沒有任何通知入口 |
+| `AdminProctoringPanel` | 沒有「對單一學生送訊息」的能力 |
+
+## 設計
+
+### A. 資料模型
+
+#### A.1 新增 `ContestConversation`
+
+```
+contest          FK → Contest
+student          FK → User                 # 對話另一端的學生
+created_at       DateTimeField
+last_message_at  DateTimeField             # 用於排序與未讀判斷
+```
+
+- `(contest, student)` **unique**：每個學生在一個 contest 內僅一條對話串（避免無法區分的多條對話）
+- 無 status / initiated_by / problem 欄位；所有「狀態」與「誰發話」都由 message 表表達
+
+#### A.2 新增 `ContestMessage`
+
+```
+conversation  FK → ContestConversation
+sender        FK → User
+sender_role   CharField('student'|'teacher')   # denormalized for clarity & queries
+content       TextField
+created_at    DateTimeField
+```
+
+- 一條 conversation 至少有一則 message（建立 conversation 時一併寫入第一則）
+- `sender_role` 在 create 時依 sender 的競賽角色決定，後端強制；前端不可指定
+
+#### A.3 移除 `Clarification`
+
+- Migration：drop table `contest_clarifications`
+- 同時移除所有引用：`models.py` 的 `Clarification` class、`serializers.py`、`views/`、`admin.py`、`urls.py` 的 router register、相關測試檔
+- 既有資料直接清除（依使用者指示）
+
+#### A.4 `ContestAnnouncement` 維持原狀（純廣播）
+
+- 不加 `target_user`（原計畫廢除）
+- 行為：老師發布 → 全部已加入該 contest 的學生都能看見
+
+### B. 已讀狀態：localStorage
+
+- 不動後端的 read 狀態。每個學生瀏覽器自己記
+- key：`qjudge.contest.{contestId}.readIds`
+- value：JSON 陣列，混存兩種前綴 id：
+  - `ann:{announcementId}`：對應廣播公告
+  - `msg:{messageId}`：對應 ContestMessage 中「對方傳給我」的訊息
+- 已讀寫入時機：
+  - Notification Modal 點「我已閱讀」或「✕」 → 把 modal 顯示的所有 id 一次寫入
+  - Dashboard 上 `ContestAnnouncementList` / `ContestConversationList` 的卡片進入 viewport（IntersectionObserver）→ 標單筆已讀
+  - 開啟 Conversation thread 時，把 thread 內所有對方訊息標已讀
+- 跨裝置 / 清快取會重新提示，這是接受的取捨
+
+### C. 未讀計算 hook：`useContestUnread`
+
+```ts
+useContestUnread(contestId, currentUserId, role): {
+  unreadAnnouncementIds: string[]      // 學生用
+  unreadMessageIds: string[]            // 學生用：對方傳給我且未讀的 message
+  pendingConversationCount: number      // 老師用：等我回的對話數
+  unreadCount: number
+  markRead: (ids: string[]) => void
+  markAllRead: () => void
+}
+```
+
+- 內部 polling 兩個 list endpoint：`/announcements/`、`/conversations/`（含每個 conversation 的最新一則 message 預覽）
+- 角色差異：
+  - **學生**：可見 conversation = 自己參與的；`unreadCount = unreadAnnouncementIds.length + unreadMessageIds.length`，其中 unreadMessageIds 取每個 conversation 中 `sender_role='teacher'` 且尚未在 localStorage 的訊息 id
+  - **教師 / 管理員**：可見全部 conversation；`unreadCount = pendingConversationCount`，定義為 `last_message.sender_role='student'`（=「最後一則是學生發的，等我回」），不計公告
+
+### D. 通知入口：`ContestLayout` 頂部 navbar 鈴鐺
+
+**為何放 navbar 而不是答題畫面 banner**
+
+- 一個 ContestLayout 覆蓋所有 contest 子頁面，不只答題中
+- 不吃答題畫面的垂直空間
+- 跟既有 `HeaderGlobalBar` 一致風格
+
+**新增兩個元件**
+
+1. **`ContestNotificationBell.tsx`**（掛在 `ContestLayout` 的 `<HeaderGlobalBar>` 內）
+   - Carbon `HeaderGlobalAction`，icon 用 `@carbon/icons-react` 的 `Notification`
+   - 右上角紅色數字 badge：`unreadCount`（>9 顯示 `9+`，=0 不顯示 badge）
+   - 角色差異：
+     - **學生**：點擊 → 開 `ContestNotificationModal`（見下）
+     - **教師 / 管理員**：點擊 → 直接導向 `AdminConversationsScreen?awaiting=teacher`，不開 modal（待回的對話需要的是處理動作而非閱讀）
+
+2. **`ContestNotificationModal.tsx`**（學生用）
+   - Carbon `Modal`，`passiveModal`
+   - 內容兩區（依時間倒序，未讀置頂並用分隔線與已讀分開）：
+     - **新公告**：title / content / 時間
+     - **新訊息**：對話另一端 (老師) / 訊息內容（截斷）/ 題目（若有）/ 時間
+   - 底部按鈕：
+     - Primary：「我已閱讀」→ markAllRead，關閉
+     - Secondary：「前往討論」→ 導向 contest dashboard 的 Q&A tab；保持 modal 已標已讀的副作用
+   - **此 Modal 僅是通知摘要，不含發起新對話 / 完整歷史**
+
+### E. 學生端：Contest Dashboard / Q&A Tab
+
+維持 `ContestQAScreen` 入口，但元件拆檔（見 §H）。佈局：
+
+- 上半部：公告完整歷史列表（含已讀與未讀）
+- 下半部：與老師的單一對話 thread —— `ConversationThreadView` 直接展開（不需要列表，每個學生只有一條）
+  - 若尚無對話：顯示空狀態「點下方輸入框開始你的提問」+ 輸入框
+  - 若已有對話：時序顯示所有 message，底部輸入框可繼續發訊（依下表權限決定 enabled）
+  - 第一次送訊時若 conversation 不存在，前端先呼叫 `POST /conversations/` 建立 + 寫第一則 message；之後都呼叫 `POST /conversations/{id}/messages/`
+- 公告卡片進入 viewport 標已讀；開啟頁面時對話 thread 內所有訊息直接標已讀
+
+### F. 權限狀態表
+
+| 競賽狀態 | 學生看公告/對話 | 學生發訊（含首則） | 教師發公告 | 教師發訊（含首則） |
+|---|---|---|---|---|
+| 未開始（published, now < startTime） | ✅ | ❌（disabled，hint：「考試開始後可發問」） | ✅ | ✅ |
+| 進行中 | ✅ | ✅ | ✅ | ✅ |
+| 已結束（now > endTime） | ✅（只讀） | ❌（輸入框 disabled） | ✅ | ✅ |
+
+需要對應修改現行 `isReadOnly` 邏輯：原本 `contestStatus !== "published" || isEnded` 一律鎖死所有操作；改為**僅鎖學生的訊息輸入框**，教師永不鎖。
+
+### G. 教師端
+
+#### G.1 `AdminClarificationsScreen` 改為 `AdminConversationsScreen`
+
+- 對話列表頂部加 Filter：`全部 / 未回 / 已回`
+  - `未回 = last_message.sender_role='student'`
+  - `已回 = last_message.sender_role='teacher'`
+- 預設排序：`未回` 優先，再依 `last_message_at` 由新到舊
+- 每筆顯示：學生 username / 最後一則訊息預覽 / 時間 / `未回` badge（若為未回）
+- 點開單筆 → `ConversationThreadView`，老師在底部輸入框 append message（sender_role 自動為 teacher）
+- 公告區「發布公告」按鈕在所有競賽狀態下可用
+
+#### G.2 `AdminProctoringPanel` 新增動作
+
+- 在每位被監考的學生卡片上新增「📩 傳送訊息」按鈕
+- 點擊 → 開 `SendMessageModal`：
+  - 標頭顯示「給：{username}」
+  - TextArea 輸入訊息內容
+  - Primary：「送出」→ 走 `POST /conversations/{contestId}/messages-to-student/`（見 §I.2 的 ensure-and-append action），後端：若 `(contest, student)` 已有對話則 append；否則 create + 寫入第一則 `Message(sender_role='teacher')`
+- 該訊息會出現在學生 navbar bell 與 dashboard 對話 thread 中
+
+### H. 元件拆檔
+
+把現行 `frontend/src/features/contest/components/ContestClarifications.tsx` 整檔砍掉。新結構：
+
+```
+frontend/src/features/contest/components/discussion/
+  ContestAnnouncementList.tsx        # 公告列表
+  ContestConversationList.tsx        # 對話列表（僅老師端用）
+  ConversationThreadView.tsx         # thread 顯示 + 訊息輸入框（學生 / 老師通用）
+  SendMessageModal.tsx               # 老師於 proctoring panel「傳送訊息」用
+  PostAnnouncementModal.tsx          # 教師發公告 modal
+  StudentDiscussionView.tsx          # 學生 ContestQAScreen 用：公告列表 + ConversationThreadView
+  AdminDiscussionView.tsx            # 老師 AdminConversationsScreen 用：公告列表 + ConversationList
+  index.ts
+
+frontend/src/features/contest/components/notification/
+  ContestNotificationBell.tsx
+  ContestNotificationModal.tsx
+
+frontend/src/features/contest/hooks/
+  useContestUnread.ts
+  useContestConversations.ts          # 取代 useClarifications，封裝 polling + thread 操作
+```
+
+刪除：`ContestClarifications.tsx`、`AnnouncementSectionLayout.tsx`、`DiscussionsSection.tsx`、`useClarifications.ts`。
+
+### I. 後端改動
+
+#### I.1 新增 model + migration
+
+- 建立 `contest_conversations`、`contest_messages` 兩張表（schema 如 §A）
+- Migration 同時 `DROP TABLE contest_clarifications`（依使用者指示，不做資料保留）
+
+#### I.2 新增 ViewSets
+
+- **`ContestConversationViewSet`**（巢狀於 `/contests/{id}/conversations/`）
+  - list：
+    - 學生 queryset：`Q(student=user)`
+    - 教師 queryset：所有 contest 內 conversation
+  - filter（僅教師端有意義）：
+    - `?awaiting=teacher|student`（依 `last_message.sender_role` 判斷誰在等對方回）
+  - create payload：`{ initial_content, student_id? }`，後端依 user 角色處理：
+    - 學生 create：忽略 `student_id`，`student=user`；若 `(contest, user)` 已有對話則回傳既存（idempotent），否則建立 + 寫第一則 `sender_role='student'`
+    - 教師 create：必須提供 `student_id`，permission 限教師 / 管理員；同樣 idempotent
+  - retrieve：回傳 conversation + 所有 messages
+  - 自訂 action `POST /conversations/{id}/messages/`：append message（前端送 `{ content }`，後端依 sender 自動填 `sender_role`、檢查權限）
+  - 學生端「我的對話」可用 `GET /conversations/me/`：直接回傳該學生在此 contest 的唯一 conversation（含 messages）；不存在則回 404，前端據此顯示空狀態
+  - 教師端 proctoring 用 `POST /conversations/messages-to-student/`：body `{ student_id, content }`，後端做 ensure-and-append（有就用，沒就建）
+
+- **`ContestMessageViewSet`** 不另外開 root，僅以 nested action 形式存在
+
+#### I.3 既有 ViewSet 調整
+
+- `ClarificationViewSet`：刪除整個檔案
+- `urls.py`：移除 `clarifications` router 註冊
+- `ContestAnnouncementViewSet`：無 schema 變更；「進行中以外整段 readOnly」是前端邏輯，後端原本就允許教師任何時候發公告，僅做測試覆蓋確認
+
+#### I.4 權限
+
+- 學生對 `ContestConversationViewSet`：
+  - list：僅自己參與的
+  - retrieve：僅自己參與的
+  - create：限自己作為 student
+  - append message：限本人是 conversation.student，且該 contest 未結束（依 §F 表）
+- 教師 / 管理員：全部允許
+
+## 資料流
+
+```
+[Polling 30s]
+  ↓
+useContestConversations(contestId)  ──→  conversations + latest message preview
+useContestAnnouncements(contestId)  ──→  announcements
+                                          │
+                                          ▼
+                          useContestUnread(contestId, userId, role)
+                                          │
+                ┌────────────────────────┼─────────────────────────┐
+                ▼                        ▼                         ▼
+   ContestNotificationBell      ContestAnnouncementList    ContestConversationList
+   (badge = unreadCount)        (in-viewport markRead)     (in-viewport markRead)
+                │                                                  │
+                ▼                                                  ▼
+      ContestNotificationModal                          ConversationThreadView
+      (markAllRead on close, 學生用)                    (open → mark thread msgs read,
+                                                         post → append message API)
+```
+
+## 錯誤處理
+
+- 發布公告 / 開對話 / 回覆訊息 API 失敗：沿用 `showError(...)` modal
+- localStorage 寫入失敗（quota / private mode）：catch 後 log warn，不擋 UI
+- polling 失敗：保留 loaded state，不在鈴鐺顯示錯誤訊息
+- thread 中追加訊息送出失敗：保留輸入框內容，顯示 inline 錯誤；不清空使用者打的字
+
+## 測試重點
+
+**Frontend**
+
+- `useContestUnread`：學生 / 教師兩種角色下 unreadCount 計算；markRead / markAllRead 寫入 localStorage
+- 鈴鐺 badge：`unreadCount` 變化時出現 / 消失，>9 顯示 `9+`
+- 學生 Modal：未讀置頂、已讀置底、各自時間倒序
+- 教師鈴鐺點擊：導向 `?awaiting=teacher`
+- ConversationThreadView：開啟時把 thread 內對方訊息標已讀；送訊失敗保留輸入內容；end-state 對話唯讀
+- 權限：未開始 / 進行中 / 已結束三狀態下，學生訊息輸入框、教師發公告 / 訊息按鈕的 enabled / disabled
+- AdminProctoringPanel：點「傳送訊息」打開 modal，送出後呼叫 ensure-and-append API 帶 `student_id`
+
+**Backend**
+
+- `ContestConversationViewSet`：
+  - 學生 `GET /me/` 取自己唯一對話（不存在回 404）；教師 list 看全部
+  - 學生 create / messages-to-student 被拒；教師 messages-to-student 可用
+  - `(contest, student)` unique 約束生效：重複呼叫 create 不會建立第二筆，回傳既存
+  - 學生 append message 限自己參與；教師 append 任意 conversation
+  - filter `?awaiting` 正確
+  - 競賽結束後學生 append 被拒（403）
+- Migration：drop `contest_clarifications` table 後相關 import 不留殘骸
+- `ContestAnnouncementViewSet`：教師在三種競賽狀態下都能 create
+
+## 影響的檔案（粗估）
+
+**Backend（新增）**
+- `backend/apps/contests/migrations/00XX_drop_clarification_add_conversation.py`
+- `backend/apps/contests/views/conversation.py`
+- `backend/apps/contests/serializers.py`（新增 `ContestConversationSerializer`、`ContestMessageSerializer`）
+- `backend/apps/contests/tests/conversation/`
+
+**Backend（修改）**
+- `backend/apps/contests/models.py`（移除 Clarification、新增 Conversation/Message）
+- `backend/apps/contests/admin.py`（移除 Clarification、新增 Conversation/Message）
+- `backend/apps/contests/urls.py`（換 router）
+- `backend/apps/contests/permissions.py`
+
+**Backend（刪除）**
+- 所有 Clarification 相關 view / serializer / 測試 / 引用
+
+**Frontend（新增）**
+- `features/contest/components/discussion/*`（如 §H）
+- `features/contest/components/notification/ContestNotificationBell.tsx`
+- `features/contest/components/notification/ContestNotificationModal.tsx`
+- `features/contest/hooks/useContestUnread.ts`
+- `features/contest/hooks/useContestConversations.ts`
+- `infrastructure/api/repositories` 新增 conversation / message endpoints
+- `core/entities/contest.entity` 新增 `ContestConversation`、`ContestMessage` 類型
+
+**Frontend（修改）**
+- `features/contest/components/layout/ContestLayout.tsx`（在 `HeaderGlobalBar` 掛鈴鐺）
+- `features/contest/screens/ContestQAScreen.tsx`（改用 `StudentDiscussionView`）
+- `features/contest/screens/admin/panels/AdminClarificationsScreen.tsx` → 改名為 `AdminConversationsScreen.tsx`
+- `features/contest/screens/admin/panels/AdminProctoringPanel.tsx`（每位學生加「📩 傳送訊息」按鈕）
+- `features/contest/modules/AdminPanelRendererRegistry.tsx`（key 改為 `conversations`）
+- `features/contest/tabConfig.ts` / 路由若有 hardcoded `clarifications` key 一併改
+
+**Frontend（刪除）**
+- `features/contest/components/ContestClarifications.tsx`
+- `features/contest/components/AnnouncementSectionLayout.tsx`
+- `features/contest/components/DiscussionsSection.tsx`
+- `features/contest/hooks/useClarifications.ts`
+
+## 開放問題
+
+無。
diff --git a/docs/superpowers/specs/2026-05-05-contest-dashboard-typography-design.md b/docs/superpowers/specs/2026-05-05-contest-dashboard-typography-design.md
new file mode 100644
index 00000000..3bd61e13
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-05-contest-dashboard-typography-design.md
@@ -0,0 +1,203 @@
+# 競賽儀表板版面與排版整頓設計
+
+- Date: 2026-05-05
+- Scope: `frontend/src/features/contest/`（學生競賽儀表板 + 競賽管理儀表板 + 對應的 tab 區）
+- Goal: 消除兩端各自實作的 title / subtitle / time / divider / tab+toolbar 樣式重複，建立可長期沿用的儀表板版面元件。
+
+## 目前問題
+
+目前學生端與管理端各自寫一套 SCSS：
+
+- 頁面標題 size 不一（學生 1.75rem `heading-04`、管理寫死 `1.25rem`）。
+- 區塊標題、metric label/value 各自命名（`.title` / `.sectionTitle` / `.recordTitle` / `.panelHeader h3` / `.examScheduleItem strong` …），且管理端多處直接寫 `1.25rem`、`1.5rem` 等 hardcoded 值。
+- `border-right` / `border-bottom` + `:last-child { border: 0 }` 這類 divider 樣板在 `detailRow` / `examStatusMatrix` / `panelGrid` / 學生端 `.layout` 等多處重寫。
+- Tab + toolbar 模式（`.tabRow / .tabRowToolbar / .tabRowSearch / .tabRowFilterMenu`）以及 mobile 換行 media query 在 participants / clarifications / proctoring 等 admin tab 各寫一份。
+- 同一個 className（例如 `.title`、`.subtitle`）在多個 module 各自定義不同字型，閱讀程式碼時無從預期實際長相。
+
+## 設計方向
+
+採三層元件架構，由 Container 處理結構（佈局 + divider + 邊框），Block 處理內容外殼（padding + header slot），Typography primitives 處理字型細節。Tab + toolbar 不另立層級，而是 `DashboardBlock` 的一種頭部選擇。
+
+兩端視覺對齊原則：
+
+- 頁面標題使用學生端尺寸（`heading-04` 1.75rem）但採細體字（weight 400）。
+- 其餘標題、metric、副標、時間，全部對齊管理端較緊湊的尺寸；移除所有 hardcode，全部走 Carbon token。
+
+### Type Scale
+
+| 角色 | Token | 計算值 | weight | 字型 |
+| --- | --- | --- | --- | --- |
+| PageTitle | `--cds-heading-04-font-size` | 1.75rem | 400（細體）| sans |
+| PageSubtitle | `--cds-body-01-font-size` | 0.875rem | 400 | sans |
+| SectionTitle | `--cds-heading-compact-02-font-size` | 1rem | 600 | sans |
+| SectionDescription | `--cds-body-compact-01-font-size` | 0.875rem | 400 | sans |
+| MetricLabel | `--cds-label-01-font-size` | 0.75rem | 400 | sans |
+| MetricValue（預設）| `--cds-heading-compact-02-font-size` | 1rem | 600 | sans |
+| MetricValue（大）| `--cds-heading-03-font-size` | 1.25rem | 600 | sans |
+| TimeDisplay（大）| `--cds-heading-03-font-size` | 1.25rem | 600 | `--cds-code-font-family` |
+| TimeDisplay（header 內聯）| `--cds-body-compact-01-font-size` | 0.875rem | 400 | `--cds-code-font-family` |
+
+實作端規定：所有 typography 樣式必須來自 Carbon token；新增 stylelint 規則 `declaration-property-value-disallowed-list` 在 `font-size` / `font-weight` 上禁止寫死的 rem / 數字 weight。
+
+## 元件規格
+
+統一前綴 `Dashboard*`。所有元件放置於 `frontend/src/shared/components/dashboard/`（新建）。各元件一個 `.tsx` + 對應 `.module.scss`，禁止呼叫端透過 `className` / `style` 覆寫核心樣式。
+
+### Layer 1：結構容器
+
+#### `DashboardPage`
+
+最外層 wrapper。處理 max-width clamp 與整體 padding，提供 scroll 區。對應目前學生端 `.root` + `.dashboard`、admin 的 `.page` + `.content`。
+
+```tsx
+<DashboardPage>
+  {/* children: DashboardContainer 或多個區塊 */}
+</DashboardPage>
+```
+
+#### `DashboardContainer`
+
+```tsx
+<DashboardContainer
+  layout="stack" | "split" | "grid"
+  columns={number | "auto"}        // 僅 layout="grid" 有效
+  dividers="auto" | "none"          // 預設 "none"
+  bordered                          // 是否畫外圍邊框
+>
+  {children}
+</DashboardContainer>
+```
+
+行為：
+
+- `stack`：垂直排列 children；`dividers="auto"` 時於每對相鄰 children 之間補水平分隔線（最後一個不補）。
+- `split`：水平排列；`dividers="auto"` 時於相鄰 children 之間補垂直分隔線。
+- `grid`：依 `columns` 排列；`dividers="auto"` 時水平與垂直分隔線都補，多列換行時兩個方向都處理（matrix 風格）。
+- 可任意 nest。`bordered` 由外層控制，內層不重複畫框。
+- 不接收 `padding` / `gap` / `style` / `className`，避免逃生口導致呼叫端再開分支。
+
+對應目前 SCSS 中要刪除的：
+
+- 學生端 `.layout`（split + bordered + 中間分隔線）。
+- 學生端 `.detailRow` + `.detailCell` 的 grid + border-right + last-child 樣板。
+- 管理端 `.examStatusMatrix` / `.examStatusMetric`、`.examScheduleGrid` / `.examScheduleItem` 的 grid + border-right。
+- `.panelGrid`、`.entryGrid` 的外框 + 內部 divider。
+- 上述伴隨的 mobile 拆欄 media query（由 Container 內部處理）。
+
+#### `DashboardBlock`
+
+```tsx
+<DashboardBlock padding="default" | "compact" | "flush">
+  {/* children 可以是 BlockHeader + 任意內容，或 DashboardTabs */}
+</DashboardBlock>
+```
+
+行為：
+
+- `padding`：`default`（一般 panel）/ `compact`（密度高的清單）/ `flush`（內部子組件自帶 padding，不再外加）。
+- 不畫 border、不管自己跟兄弟之間的分隔線；那是父層 Container 的事。
+- Block 是 leaf 級的內容外殼；children 可自由組合（shadcn 風）。
+
+### Layer 2：Block 頭部
+
+#### `BlockHeader`
+
+```tsx
+<BlockHeader
+  title="參賽進度"
+  titleAs="h2" | "h3"               // 預設 h2
+  titleSize="page" | "section"      // 預設 section
+  description="可選副標"
+  actions={<IconButton ... />}
+/>
+```
+
+`titleSize="page"` → 使用 `PageTitle` 樣式；`titleSize="section"` → `SectionTitle` 樣式。
+
+對應目前 SCSS 要刪除的：
+
+- 學生端 `.titleRow` / `.title` / `.tagRow`（actions slot 取代 tagRow 的固定位置）。
+- 學生端 `.sectionHeader` / `.sectionTitle` / `.sectionDescription` / `.inlineRecordsHeader` / `.inlineRecordsTitle` / `.chartHeader`。
+- 管理端 `.dashboardTitleBlock` / `.dashboardTitleRow h2` / `.dashboardDescription`、`.panelHeader h3` / `.panelHeader p`（`AdminOverviewCommandCenter`、`AdminPreparationDashboard`、`OverviewActionWidgets`、`OverviewInsightsPanel` 的同型樣式）。
+
+### Layer 3：Tab 區
+
+`DashboardTabs` 為 context provider，協調 `DashboardTabBar` 與 `DashboardTabPanel`。
+
+```tsx
+<DashboardBlock padding="flush">
+  <DashboardTabs activeId={tabId} onChange={setTabId}>
+    <DashboardTabBar
+      tabs={[
+        { id: "all", label: "全部" },
+        { id: "active", label: "進行中", badge: 12 },
+      ]}
+      toolbar={
+        <DashboardToolbar>
+          <DashboardToolbar.Search value={q} onChange={setQ} placeholder="搜尋學生" />
+          <DashboardToolbar.FilterMenu options={...} />
+        </DashboardToolbar>
+      }
+    />
+
+    <DashboardTabPanel tabId="all">{/* 自由內容 */}</DashboardTabPanel>
+    <DashboardTabPanel tabId="active">{/* 自由內容 */}</DashboardTabPanel>
+  </DashboardTabs>
+</DashboardBlock>
+```
+
+責任分配：
+
+- `DashboardTabs`：context（active id、onChange）。不畫任何視覺。
+- `DashboardTabBar`：tab 列排版、底線 border-bottom、toolbar slot 的對齊與 `max-width` clamp、mobile 換行（toolbar 自動換到下一行佔滿寬度）。內部仍使用 Carbon `<Tabs> / <TabList> / <Tab>` 以保留鍵盤導覽與 aria。
+- `DashboardTabPanel`：依 context 中 `activeId` 與自身 `tabId` 比對，match 才 render。
+- `DashboardToolbar`：flex row、預設右對齊、提供 borderless 子元件樣式 context（取代目前 `:global(.cds--search-input) { border: none; background: transparent; }` 等覆蓋）。`children` 開放給任意內容（例如 export 按鈕）；常用的 `Search` / `FilterMenu` 以 sub-component 形式提供，內部已套好 toolbar 預設樣式。
+
+對應目前 SCSS 要刪除的：
+
+- `AdminOverviewCommandCenter.module.scss` 的 `.tabRow / .tabRowToolbar / .tabRowToolbarActive / .tabRowSearch / .tabRowFilterMenu` 與其 `@media (max-width: 672px)` 規則。
+- 其他 admin panel（participants / clarifications / proctoring）若各自重抄一份，亦同步移除。
+
+### Layer 4：Typography primitives
+
+放 `frontend/src/shared/components/dashboard/typography/`。多數情境會被 `BlockHeader` 與 `MetricBlock` 等高階元件包用，呼叫端極少直接使用。
+
+- `PageTitle`：預設 `<h1>`，可由 `as` 改。
+- `SectionTitle`：預設 `<h2>`。
+- `MetricBlock`：包裝 label + value（+ 可選 trend / icon slot），props `label`、`value`、`size="default" | "lg"`、`align="start" | "end"`。對應學生端 `.metricLabel + .metricValue`、管理端 `.examStatusMetric span+strong`、`.examScheduleItem span+strong`、`.examProgressTitle + .examProgressValue`、`participantSingleMetric`、`OverviewActionWidgets` 與 `OverviewInsightsPanel` 的數值 + 標籤組合。
+- `TimeDisplay`：props `variant="countdown" | "header"`、`value`、`label`。`countdown` 走 `heading-03` + monospace；`header` 走 `body-compact-01` + monospace。對應學生端 `.timerValue`、`ContestHero` 的 `.timeLabel / .timeValue`、`ContestLayout` 的 `.headerTimerDisplay`。
+
+所有 typography primitive 僅接 `as` / `size` / `align` 等語意 props，不接受 `style` / `className`。
+
+## 整頓範圍
+
+直接以新元件取代並刪除對應 SCSS 規則：
+
+- `frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss`
+- `frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx`
+- `frontend/src/features/contest/components/participants/ContestParticipantsDashboard.module.scss`（若使用 panelHeader / sectionHeader）
+- `frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss` 與 `.tsx`
+- `frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss` 與 `.tsx`
+- `frontend/src/features/contest/components/admin/AdminInsightRail.module.scss`
+- `frontend/src/features/contest/components/admin/OverviewInsightsPanel.module.scss`
+- `frontend/src/features/contest/components/admin/OverviewActionWidgets.module.scss`
+- `frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss` 與 `.tsx`
+- `frontend/src/features/contest/screens/admin/panels/AdminClarificationsPanel.module.scss`
+- `frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.module.scss`
+- `frontend/src/features/contest/components/layout/ContestHero.module.scss` 與相關 `.tsx`
+- `frontend/src/features/contest/components/layout/ContestLayout.module.scss`（`.headerTimerDisplay` 部分換 `<TimeDisplay variant="header" />`，其餘 layout 樣式保留）
+
+僅替換 typography / divider / tab+toolbar 相關規則；色彩、interactive state、specific layout（例如 `.scoreDistributionPanel` 的圖表容器尺寸）等保留不動。
+
+## 預期效果
+
+- 兩端頁面標題、區塊標題、metric、時間視覺一致；學生端僅以 weight 400 維持柔和感。
+- `font-size` / `font-weight` / `border-right` / `border-bottom` + `:last-child` 的重複樣板從 contest 模組消失。
+- 新儀表板（教師工作區、批改、統計、未來其他應用）可直接組合 `DashboardPage` / `Container` / `Block` / `BlockHeader` / `Tabs` / `Toolbar`，無需從零寫 module SCSS。
+- 加上 stylelint 規則後，`font-size`、`font-weight` 寫死值無法再進入 contest 模組，避免回退。
+
+## 開放議題
+
+1. `DashboardContainer` `layout="grid"` 在多列 wrap 時的 divider 演算法在 RTL 下是否需要特例驗證。
+2. 引入 stylelint 規則的範圍：先限縮在 `frontend/src/shared/components/dashboard/**` 與 `frontend/src/features/contest/**`，待穩定後再擴及全 features。
+3. Storybook：每個新元件需有對應 story，列為實作計畫的一部分。
diff --git a/docs/superpowers/specs/2026-05-05-contest-workspace-shell-unification-design.md b/docs/superpowers/specs/2026-05-05-contest-workspace-shell-unification-design.md
new file mode 100644
index 00000000..c6c9fb41
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-05-contest-workspace-shell-unification-design.md
@@ -0,0 +1,309 @@
+# 競賽 Layout 統一在 WorkspaceShell 之下 設計
+
+- 日期：2026-05-05
+- 分支：dev
+- 狀態：Draft（待 writing-plans）
+
+## 目標
+
+把目前 contest runtime 自帶的 505 行 `ContestLayout` 砍掉，所有 contest 頁面（含 runtime / 非 runtime）統一走 `MainLayout` + `WorkspaceShell`。客製化由 SideMenu / WorkspaceTopNav / UserMenu 各自的 mode-aware 邏輯處理。視覺一致、main content 為重心。
+
+## 範圍與非範圍
+
+**範圍**
+
+- 移除 `ContestLayout.tsx`（與其 SCSS）
+- runtime 路由（`/solve`、paper exam 答題畫面）改掛在 `MainLayout` / `WorkspaceShell` / `ContestWorkspaceLayout` 之下
+- `SideMenu` 加 contest mode 分支：非 runtime 顯示「返回教室」單條目；runtime 顯示「Solve/Dashboard tabs + problem list」
+- `WorkspaceTopNav` 加 runtime 鎖定：logo / 麵包屑 `pointer-events: none`，視覺保留
+- `UserMenu` 在 runtime 期間 `settingsOnly={true}`
+- runtime 期間透過 `useDisablePanel('right')` 關閉右側 AI chat panel
+- `ExamModeWrapper` 等 runtime 限定邏輯從 `ContestLayout` 拆出，搬到一個 `RuntimeRouteWrapper`
+
+**非範圍**
+
+- `WorkspaceShell` 本體不動（不引入 slot system、不換位置）
+- AppSidebar 不動
+- precheck / admin / preview / practice / classroom 既有 layout 不動
+- 不新建 `ContestShell` 元件
+- 不重做右側 aside panel（先前提的「dashboard 左欄資訊塞右欄」**取消**，重心放在 main content）
+- 不動 contest 路由的 URL 結構
+
+## 現況差距
+
+| 既有 | 缺陷 |
+|---|---|
+| `ContestLayout.tsx`（505 行） | 自帶 Header + sidebar + 麵包屑 + Modal，跟 WorkspaceShell 平行宇宙；視覺與行為要靠人為紀律才能跟 app 一致 |
+| `routes.tsx` 雙條路由 | runtime 用 `ContestLayout`，非 runtime 用 `ContestWorkspaceLayout`；多軌維護 |
+| `SideMenu` | 沒有 runtime mode 概念；無法在 contest 答題期間顯示「Solve/Dashboard tabs + problem list」 |
+| `WorkspaceTopNav` | 沒有 runtime 鎖定機制 |
+| 答題期間 AI chat panel | 沒有自動關閉 |
+
+## 設計
+
+### A. 架構：所有 contest 頁面共用 ContestWorkspaceLayout
+
+`ContestWorkspaceLayout` 已存在且只是個透明 wrapper（提供 `ContestProvider` + outletContext）。讓 runtime 與非 runtime 共用這同一個 layout：
+
+```
+<Route element={<MainLayout />}>          // 提供 WorkspaceShell + AppSidebar + WorkspaceTopNav
+  <Route element={<ContestWorkspaceLayout />}>   // 提供 ContestProvider + exam handlers
+    <Route index element={<ContestDashboardScreen />} />
+    <Route path="solve" element={<RuntimeRouteWrapper><ContestSolveScreen /></RuntimeRouteWrapper>} />
+    <Route path="solve/:problemId" element={<RuntimeRouteWrapper><ContestSolveScreen /></RuntimeRouteWrapper>} />
+    {/* 其他子頁同樣留在這裡 */}
+  </Route>
+</Route>
+```
+
+`ContestLayout.tsx` 整檔刪除。其內既有功能拆解到：
+- 權限 / refresh / score / 麵包屑顯示 → 已存在於 `WorkspaceTopNav` / `useContestLayoutState`
+- ExamModeWrapper / ExamSubmissionProgressModal / ExamModeMonitorModal / 計時 / handleStartExam 等 → 搬到下方 §B 的 `RuntimeRouteWrapper`
+- contestShell sidebar（既有的 Solve/Dashboard nav + Home/List icon）→ 搬到 SideMenu 的 runtime mode（§C）
+- ExamStatusBadge / 計時顯示 → 搬到 WorkspaceTopNav 的 runtime extension（§D）
+
+### B. `RuntimeRouteWrapper`
+
+新增一個 wrapper，包住每個 runtime route element，負責：
+
+- 渲染 `<ExamModeWrapper>`（既有，保留 cheat detection / fullscreen / 監考行為）
+- 把 `ExamSubmissionProgressModal` / `ExamModeMonitorModal` mount 在這裡
+- 透過 `useDisablePanel('right')` 關閉右側 AI chat panel
+- 提供 runtime context（見 §F）讓 SideMenu / TopNav 知道「現在是 runtime」
+
+```tsx
+// frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
+export const RuntimeRouteWrapper = ({ children }: { children: ReactNode }) => {
+  const { contest, contestId, hasEnded, isAdmin, refreshContest } = useContestLayoutState();
+  // useDisablePanel('right') already exists; 這個 hook 確保 runtime 期間右側 chat 關閉
+  useDisablePanel('right');
+
+  const examActions = useContestExamActions({ /* ... */ });
+  const submissionProgress = examActions.submissionProgress;
+
+  return (
+    <ContestRuntimeProvider value={{ isRuntime: true, ...examActions }}>
+      <ExamModeWrapper {...examModeProps}>
+        {children}
+      </ExamModeWrapper>
+      <ExamSubmissionProgressModal state={submissionProgress.state} onRequestClose={submissionProgress.close} />
+      <ExamModeMonitorModal /* ... */ />
+    </ContestRuntimeProvider>
+  );
+};
+```
+
+### C. `SideMenu` 加 contest mode 分支
+
+`SideMenu` 已是 561 行 context-aware menu，依 URL 與角色決定顯示什麼。新增兩個 contest mode：
+
+```ts
+// 偵測階段（在既有 contest path 判定下加細分）
+const inContestPath = /^\/classrooms\/[^/]+\/contest\/[^/]+/.test(pathname);
+const inAdminPath = /^\/classrooms\/[^/]+\/contest\/[^/]+\/admin/.test(pathname);
+const { isRuntime } = useContestRuntimeMode();
+const inContestIdle = inContestPath && !inAdminPath && !isRuntime;
+```
+
+**非 runtime contest mode**（`inContestPath && !isRuntime && 不在 admin path`）
+
+```
+返回教室                    → /classrooms/:classroomId
+競賽主頁（current page）
+```
+
+不顯示 dashboard / 教室列表 / 提交 / chat 等其他 app-level 條目（聚焦 contest）。
+
+**Runtime contest mode**（`isRuntime`）
+
+```
+┌──────────────────┐
+│ [Solve|Dashboard]│   tab toggle（Carbon ContentSwitcher 樣式）
+├──────────────────┤
+│ 題目列表：        │
+│  P1 ✓ Hello      │
+│  P2 ● A+B   ← active │
+│  P3 ○ Factorial  │
+└──────────────────┘
+```
+
+- Solve tab active：當前在 `/solve`；點 Dashboard tab → navigate 到 contest dashboard URL，SideMenu 自動切回「非 runtime contest mode」
+- 題目列表來自 `useContest()`（既有 ContestProvider）；每題 status icon：
+  - ✓ = 已完整作答（依現有 status 判斷邏輯）
+  - ● = 部分作答 / 進行中
+  - ○ = 未作答
+
+不顯示「返回教室」（runtime 不允許離開）。
+
+> 抽出 `<SideMenuContestRuntimeSection />` 與 `<SideMenuContestIdleSection />` 作為 SideMenu 內部子元件，避免 SideMenu 主檔再膨脹。
+
+### D. `WorkspaceTopNav` 加 runtime 鎖定
+
+加入一個 prop 或 context 偵測：
+
+```tsx
+const { isRuntime } = useContestRuntimeMode();
+```
+
+當 `isRuntime` 為 true：
+
+- Logo / 麵包屑 hyperlink 加 `aria-disabled` + `pointer-events: none`，視覺保留但不可點擊
+- 顯示新增資訊：ExamStatusBadge（從 ContestLayout 搬出）+ 倒數計時 TimeDisplay（既有）
+- 既有的「avatar / 教室 / contest」麵包屑邏輯不變（已支援）
+
+### E. `UserMenu` settingsOnly
+
+`UserMenu` 已支援 `settingsOnly` prop（既有 `lockContestMenu` 邏輯透過 ContestLayout 傳入）。改為從 context 讀：
+
+```tsx
+const { isRuntime } = useContestRuntimeMode();
+return <UserMenu settingsOnly={isRuntime} ... />;
+```
+
+讓任何掛在 WorkspaceShell 下的 page 都能正確啟用該行為。
+
+### F. Runtime 偵測機制
+
+新增 `useContestRuntimeMode` hook 與 context，集中判定：
+
+```ts
+// frontend/src/features/contest/hooks/useContestRuntimeMode.ts
+import { useLocation } from 'react-router-dom';
+
+export const useContestRuntimeMode = () => {
+  const { pathname } = useLocation();
+  const isRuntime = /^\/classrooms\/[^/]+\/contest\/[^/]+\/solve(?:\/|$)/.test(pathname);
+  return { isRuntime };
+};
+```
+
+> 既有 `useContestLayoutState` 的 `isSolvePage` / `isPaperExamPage` 判斷依賴 contest type，繼續供需要區分 coding vs paper 的場景使用；本 hook 只暴露 navbar / sidemenu 需要的單一 boolean。
+
+`SideMenu` / `WorkspaceTopNav` / `UserMenu` 直接呼叫此 hook 即可，不依賴 prop 傳遞。
+
+> 若有 cheat-detection-active 等更細的 runtime 子狀態（例：考試已開始但未進入 solve 路徑），由 `RuntimeRouteWrapper` 提供的 `ContestRuntimeContext` 補充表達；本次不擴張此狀態空間，先以 URL 為準。
+
+### G. 路由調整（`routes.tsx`）
+
+```diff
+- export const classroomContestDetailRoutes = (
+-   <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestWorkspaceLayout />}>
+-     <Route index element={<ContestDashboardScreen />} />
+-   </Route>
+- );
+- export const classroomContestRuntimeRoutes = (
+-   <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestLayout />}>
+-     <Route path="solve" element={<ContestSolveScreen />} />
+-     <Route path="solve/:problemId" element={<ContestSolveScreen />} />
+-   </Route>
+- );
+
++ export const classroomContestRoutes = (
++   <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestWorkspaceLayout />}>
++     <Route index element={<ContestDashboardScreen />} />
++     <Route
++       path="solve"
++       element={<RuntimeRouteWrapper><ContestSolveScreen /></RuntimeRouteWrapper>}
++     />
++     <Route
++       path="solve/:problemId"
++       element={<RuntimeRouteWrapper><ContestSolveScreen /></RuntimeRouteWrapper>}
++     />
++   </Route>
++ );
+```
+
+`App.tsx` 對應：把 `classroomContestRoutes` 整段放進 `<Route element={<MainLayout />}>` 區塊；移除原先 `classroomContestRuntimeRoutes` 的 import 與使用。
+
+precheck / admin / preview / practice 路由不動。
+
+## 元件結構
+
+```
+frontend/src/features/contest/components/layout/
+  ContestWorkspaceLayout.tsx         # 既有，保留作 ContestProvider wrapper
+  RuntimeRouteWrapper.tsx            # NEW：runtime route 共用 wrapper
+  ContestLayoutHeaderSlotContext.tsx # 既有，保留供 page 自行 inject header actions
+
+frontend/src/features/contest/hooks/
+  useContestRuntimeMode.ts           # NEW：URL-based runtime 偵測
+
+frontend/src/features/contest/contexts/
+  ContestRuntimeContext.tsx          # NEW：runtime route 提供 examActions / submissionProgress 等
+
+frontend/src/features/app/components/
+  SideMenu.tsx                       # 修改：加 contest idle / runtime branch
+  workspace/WorkspaceTopNav.tsx      # 修改：runtime 鎖定 + ExamStatusBadge / 倒數
+  GlobalHeader.tsx                   # 若 UserMenu 由此渲染，改為讀 useContestRuntimeMode
+```
+
+刪除：
+- `frontend/src/features/contest/components/layout/ContestLayout.tsx`
+- `frontend/src/features/contest/components/layout/ContestLayout.module.scss`
+
+## 資料流
+
+```
+URL change
+   │
+   ▼
+useContestRuntimeMode()  ──→  isRuntime
+   │
+   ├─→ SideMenu                 (idle: 返回教室 / runtime: tabs+題目)
+   ├─→ WorkspaceTopNav          (runtime: logo/breadcrumb disabled, ExamStatus shown)
+   ├─→ UserMenu                 (runtime: settingsOnly)
+   └─→ RuntimeRouteWrapper      (掛在 runtime route 上，啟動 ExamModeWrapper / 關閉 chat panel / mount runtime modals)
+```
+
+## 錯誤處理
+
+- runtime 期間使用者試圖直接 navigate 到 app-level URL（透過瀏覽器位址列等）：由 `ExamModeWrapper` 既有的 fullscreen lock / cheat detection 處理；不另外做 SPA 攔截
+- `useDisablePanel('right')` 期間使用者試圖打開 chat：依現有 useDisablePanel 行為（按鈕 disable / FAB 隱藏）
+- 路由切換到 runtime 時若使用者已開著 chat：依現有 `useDisablePanel` 自動關閉
+- 取消遷移風險：保留 `ContestWorkspaceLayout` 的 outletContext 介面（refreshContest / onJoin / onStartExam / onEndExam / onGoToAnswering / onOpenAdminPanel / isAdmin），既有 children screens 不需大改
+
+## 測試重點
+
+**Frontend 單元 / 整合**
+
+- `useContestRuntimeMode`：給 mock pathname，驗證 isRuntime / isSolve / isPaper 正確
+- `SideMenu`：在 contest idle path 下渲染，DOM 上只有「返回教室」+「競賽主頁」；在 runtime path 下渲染，DOM 上有 Solve/Dashboard tab + problem list、無「返回教室」
+- `WorkspaceTopNav`：runtime 時 logo / breadcrumb 有 `pointer-events: none`、ExamStatusBadge 顯示
+- `UserMenu`：runtime 時菜單只剩設定 / 登出
+- `RuntimeRouteWrapper`：render 時呼叫 `useDisablePanel('right')`、ExamModeWrapper 收到正確 props
+
+**手動 E2E 驗收清單**
+
+- [ ] 學生登入 → contest dashboard：左 sidebar 只有「返回教室 / 競賽主頁」
+- [ ] 點「進入答題」進到 /solve：左 sidebar 切換為 Solve/Dashboard tabs + 題目清單
+- [ ] runtime 期間點 logo / 麵包屑無反應
+- [ ] runtime 期間點頭像 → menu 只有設定 / 登出
+- [ ] runtime 期間 AI chat 右面板按鈕被 disable
+- [ ] 點 sidebar Dashboard tab → 切回 contest dashboard URL，sidebar 自動回 idle 模式
+- [ ] 答題流程結束、提交完畢 → 回到 dashboard，AI chat 右面板可開啟
+- [ ] 視覺：navbar / sidebar 與其他 app 頁面視覺一致
+
+## 影響的檔案（粗估）
+
+**Frontend（新增）**
+- `features/contest/components/layout/RuntimeRouteWrapper.tsx`
+- `features/contest/hooks/useContestRuntimeMode.ts`
+- `features/contest/contexts/ContestRuntimeContext.tsx`
+- `features/app/components/SideMenuContestSection.tsx`（將 idle / runtime 子區塊抽出）
+
+**Frontend（修改）**
+- `features/contest/routes.tsx`（合併路由）
+- `features/contest/index.ts`（exports）
+- `App.tsx`（把 contest 路由放進 MainLayout）
+- `features/app/components/SideMenu.tsx`（加 contest idle / runtime 分支）
+- `features/app/components/workspace/WorkspaceTopNav.tsx`（runtime 鎖定 + ExamStatusBadge）
+- `features/app/components/UserMenu.tsx`（settingsOnly 來源從 prop 改為直接呼叫 `useContestRuntimeMode`，移除外部傳入 prop 的 path）
+- `features/contest/components/layout/ContestWorkspaceLayout.tsx`（補完 outletContext，補可能缺的 examActions）
+
+**Frontend（刪除）**
+- `features/contest/components/layout/ContestLayout.tsx`
+- `features/contest/components/layout/ContestLayout.module.scss`
+
+## 開放問題
+
+無。
diff --git a/frontend/package.json b/frontend/package.json
index 849b4583..479e9daa 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
     "cf:landing:deploy:preview": "npm run build:landing && npx wrangler pages deploy dist-landing --project-name=qjudge-landing --branch=preview",
     "check:docs": "node scripts/check-docs-translations.js",
     "check:i18n": "node scripts/check-i18n-sync.js",
+    "check:typography": "node scripts/check-typography-tokens.js",
     "sync:i18n": "node scripts/sync-i18n.js",
     "lint": "eslint . --max-warnings=9999",
     "preview": "vite preview",
diff --git a/frontend/scripts/check-typography-tokens.js b/frontend/scripts/check-typography-tokens.js
new file mode 100644
index 00000000..e688a561
--- /dev/null
+++ b/frontend/scripts/check-typography-tokens.js
@@ -0,0 +1,153 @@
+#!/usr/bin/env node
+/**
+ * Typography Token Guard
+ *
+ * Forbids hardcoded font-size / font-weight values inside the dashboard
+ * primitive library and the contest feature module so that the cleanup
+ * we did doesn't silently regress. Allowed: var(--cds-...), inherit,
+ * normal, and other CSS keywords. Disallowed: bare numbers, rem/px/em
+ * lengths.
+ *
+ * Usage: npm run check:typography
+ *        node scripts/check-typography-tokens.js
+ */
+
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const ROOT = path.join(__dirname, "..");
+
+// Only enforce inside the dashboard primitive library. These files are
+// the source of truth for typography in the contest dashboards, so any
+// hardcoded font-size here would silently break the contract for every
+// caller. Feature-level SCSS files retain their own legacy styles.
+const TARGET_DIRS = [
+  "src/shared/components/dashboard",
+];
+
+const colors = {
+  reset: "\x1b[0m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  cyan: "\x1b[36m",
+  bold: "\x1b[1m",
+};
+
+function walk(dir, out = []) {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      walk(full, out);
+    } else if (entry.isFile() && entry.name.endsWith(".module.scss")) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+// A line passes if the property declares a value coming from a Carbon
+// token, an explicit keyword (inherit/normal/initial/etc.), or
+// references a SCSS variable / mixin. It fails on bare numbers and
+// length units like 1rem / 14px.
+function isAllowed(value) {
+  const v = value.trim().toLowerCase();
+  if (v.startsWith("var(")) return true;
+  if (v.startsWith("inherit")) return true;
+  if (v.startsWith("initial")) return true;
+  if (v.startsWith("unset")) return true;
+  if (v.startsWith("revert")) return true;
+  if (v.startsWith("normal")) return true;
+  if (v.startsWith("bold")) return true;
+  if (v.startsWith("bolder")) return true;
+  if (v.startsWith("lighter")) return true;
+  if (v.startsWith("$")) return true; // SCSS variable
+  if (v.startsWith("@")) return true; // SCSS function or mixin output
+  return false;
+}
+
+function check(file) {
+  const content = fs.readFileSync(file, "utf8");
+  const lines = content.split("\n");
+  const issues = [];
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    // Strip line comments to avoid false positives in `// font-size: 1rem`
+    const stripped = line.replace(/\/\/.*$/, "");
+    // Only enforce font-size — font-weight numbers (400/600/etc.) are
+    // standard CSS and don't all map to Carbon tokens.
+    const match = stripped.match(/^\s*(font-size)\s*:\s*([^;]+);?/i);
+    if (!match) continue;
+
+    const [, prop, value] = match;
+    if (isAllowed(value)) continue;
+
+    issues.push({
+      line: i + 1,
+      property: prop,
+      value: value.trim(),
+      raw: line,
+    });
+  }
+
+  return issues;
+}
+
+function main() {
+  const files = [];
+  for (const dir of TARGET_DIRS) {
+    const full = path.join(ROOT, dir);
+    if (!fs.existsSync(full)) continue;
+    walk(full, files);
+  }
+
+  let totalIssues = 0;
+  const reports = [];
+
+  for (const file of files) {
+    const issues = check(file);
+    if (issues.length === 0) continue;
+    totalIssues += issues.length;
+    reports.push({ file, issues });
+  }
+
+  if (totalIssues === 0) {
+    console.log(
+      `${colors.green}✓ Typography token guard passed${colors.reset} ` +
+        `(${files.length} files scanned)`,
+    );
+    return;
+  }
+
+  console.log(
+    `${colors.red}${colors.bold}✗ Typography token guard found ${totalIssues} hardcoded value(s):${colors.reset}\n`,
+  );
+
+  for (const { file, issues } of reports) {
+    const rel = path.relative(ROOT, file);
+    console.log(`${colors.cyan}${rel}${colors.reset}`);
+    for (const issue of issues) {
+      console.log(
+        `  ${colors.yellow}line ${issue.line}${colors.reset}  ` +
+          `${issue.property}: ${colors.red}${issue.value}${colors.reset}`,
+      );
+    }
+    console.log();
+  }
+
+  console.log(
+    `Replace hardcoded values with Carbon typography tokens, e.g.\n` +
+      `  font-size: var(--cds-heading-compact-02-font-size, 1rem);\n` +
+      `  font-weight: 600;  // → var(--cds-heading-compact-02-font-weight) where available\n`,
+  );
+
+  process.exit(1);
+}
+
+main();
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fe054b72..b2e5964e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -30,7 +30,14 @@ import {
   UserPreferencesHydrator,
 } from "@/features/auth";
 import { problemDetailRoutes, problemSolveRoutes } from "@/features/problems";
-import { classroomContestDetailRoutes, classroomContestAdminRoute, classroomExamPreviewRoute, classroomExamPrecheckRoute, classroomPracticeRoute } from "@/features/contest";
+import {
+  classroomContestRouteChildren,
+  ContestWorkspaceLayout,
+  classroomContestAdminRoute,
+  classroomExamPreviewRoute,
+  classroomExamPrecheckRoute,
+  classroomPracticeRoute,
+} from "@/features/contest";
 import { dashboardRoute } from "@/features/dashboard";
 import { docsRoutes, DocsLayout } from "@/features/docs";
 import { changelogRoutes } from "@/features/changelog";
@@ -148,6 +155,16 @@ function App() {
                               {classroomDetailRoute}
                             </Route>
 
+                            {/* Classroom Contest - ContestProvider wraps MainLayout/WorkspaceShell */}
+                            <Route
+                              path="/classrooms/:classroomId/contest/:contestId"
+                              element={<ContestWorkspaceLayout />}
+                            >
+                              <Route element={<MainLayout />}>
+                                {classroomContestRouteChildren}
+                              </Route>
+                            </Route>
+
                             {/* Legacy hidden routes */}
                             <Route path="/problems" element={<LegacyProblemListRedirect />} />
                             {/* Problem Detail - Outside MainLayout with Custom ProblemLayout */}
@@ -156,9 +173,6 @@ function App() {
                             {/* Problem Solve - Full-screen IDE-style solver */}
                             {problemSolveRoutes}
 
-                            {/* Classroom-scoped Contest Routes */}
-                            {classroomContestDetailRoutes}
-
                             {/* Classroom Exam Precheck - Classroom-scoped */}
                             {classroomExamPrecheckRoute}
                           </Route>
diff --git a/frontend/src/core/entities/contest.entity.ts b/frontend/src/core/entities/contest.entity.ts
index 7306a933..bc9f823c 100644
--- a/frontend/src/core/entities/contest.entity.ts
+++ b/frontend/src/core/entities/contest.entity.ts
@@ -98,7 +98,7 @@ export interface ContestParticipant {
   userId: string;
   username: string;
   email?: string;
-  userDisplayName?: string;
+  displayName?: string;
   accountRole?: string;
   authProvider?: string;
   connectionStatus?: "offline" | "online" | "live";
@@ -115,9 +115,6 @@ export interface ContestParticipant {
   lockReason?: string;
   violationCount: number;
   submitReason?: string;
-  // Anonymous mode fields
-  nickname?: string;
-  displayName?: string;
 }
 
 export type ParticipantDashboardDetail =
@@ -324,10 +321,6 @@ export interface ContestDetail extends Contest {
   screenShareRecoveryGraceMs?: number;
   scoreboardVisibleDuringContest: boolean;
 
-  // Anonymous mode
-  anonymousModeEnabled?: boolean;
-  myNickname?: string;
-
   // Advanced settings
   allowMultipleJoins: boolean;
   maxCheatWarnings: number;
@@ -546,7 +539,6 @@ export interface ScoreboardProblemCell {
 export interface ScoreboardRow {
   userId: string;
   displayName: string;
-  nickname?: string;
   solvedCount: number;
   totalScore: number;
   penalty: number;
@@ -663,7 +655,6 @@ export interface ContestUpdateRequest {
   warningTimeoutSeconds?: number;
   screenShareRecoveryGraceMs?: number;
   scoreboardVisibleDuringContest?: boolean;
-  anonymousModeEnabled?: boolean;
   allowMultipleJoins?: boolean;
   maxCheatWarnings?: number;
   allowAutoUnlock?: boolean;
@@ -687,7 +678,7 @@ export const getContestState = (contest: {
   endTime?: string;
   start_time?: string;
   end_time?: string;
-}): ContestDisplayState => {
+}, nowMs: number = Date.now()): ContestDisplayState => {
   if (contest.status === "draft") {
     return "draft";
   }
@@ -696,7 +687,7 @@ export const getContestState = (contest: {
     return "archived";
   }
 
-  const now = new Date().getTime();
+  const now = nowMs;
   const startTimeValue = contest.startTime || contest.start_time || "";
   const endTimeValue = contest.endTime || contest.end_time || "";
   const startTime = new Date(startTimeValue).getTime();
diff --git a/frontend/src/core/ports/contest.repository.ts b/frontend/src/core/ports/contest.repository.ts
index b93cfd9a..ecd3d917 100644
--- a/frontend/src/core/ports/contest.repository.ts
+++ b/frontend/src/core/ports/contest.repository.ts
@@ -33,7 +33,7 @@ export interface IContestRepository {
   toggleStatus(id: string): Promise<{ status: string }>;
   registerContest(
     id: string,
-    data?: { password?: string; nickname?: string }
+    data?: { password?: string }
   ): Promise<void>;
   enterContest(id: string, data?: { password?: string }): Promise<void>;
   archiveContest(id: string): Promise<void>;
@@ -199,7 +199,6 @@ export interface ContestUpdatePayload {
   warningTimeoutSeconds?: number;
   screenShareRecoveryGraceMs?: number;
   scoreboardVisibleDuringContest?: boolean;
-  anonymousModeEnabled?: boolean;
   allowMultipleJoins?: boolean;
   maxCheatWarnings?: number;
   allowAutoUnlock?: boolean;
diff --git a/frontend/src/core/usecases/contest/joinContest.usecase.test.ts b/frontend/src/core/usecases/contest/joinContest.usecase.test.ts
index 33e35203..88f8a681 100644
--- a/frontend/src/core/usecases/contest/joinContest.usecase.test.ts
+++ b/frontend/src/core/usecases/contest/joinContest.usecase.test.ts
@@ -22,6 +22,7 @@ describe("joinContest.usecase", () => {
         endTime: "",
         status: "published",
         visibility: "private",
+        hasJoined: false,
         isRegistered: false,
       },
       undefined
@@ -40,6 +41,7 @@ describe("joinContest.usecase", () => {
         endTime: "",
         status: "published",
         visibility: "public",
+        hasJoined: true,
         isRegistered: true,
       },
       undefined
@@ -58,6 +60,7 @@ describe("joinContest.usecase", () => {
         endTime: "",
         status: "published",
         visibility: "public",
+        hasJoined: false,
         isRegistered: false,
       },
       undefined
@@ -72,12 +75,10 @@ describe("joinContest.usecase", () => {
     const result = await joinContestUseCase({
       contestId: "c1",
       password: "secret",
-      nickname: "neo",
     });
 
     expect(registerContest).toHaveBeenCalledWith("c1", {
       password: "secret",
-      nickname: "neo",
     });
     expect(result).toEqual({ success: true });
   });
diff --git a/frontend/src/core/usecases/contest/joinContest.usecase.ts b/frontend/src/core/usecases/contest/joinContest.usecase.ts
index 48de063c..3feedbef 100644
--- a/frontend/src/core/usecases/contest/joinContest.usecase.ts
+++ b/frontend/src/core/usecases/contest/joinContest.usecase.ts
@@ -17,7 +17,6 @@ import type { ContestDetail } from "@/core/entities/contest.entity";
 export interface JoinContestInput {
   contestId: string;
   password?: string;
-  nickname?: string;
 }
 
 export interface JoinContestOutput {
@@ -43,7 +42,7 @@ export function validateJoinContest(
   }
 
   // Check if already registered
-  if (contest.isRegistered) {
+  if (contest.hasJoined) {
     return {
       valid: false,
       error: "Already registered for this contest",
@@ -60,10 +59,10 @@ export function validateJoinContest(
 export async function joinContestUseCase(
   input: JoinContestInput
 ): Promise<JoinContestOutput> {
-  const { contestId, password, nickname } = input;
+  const { contestId, password } = input;
 
   try {
-    await registerContest(contestId, { password, nickname });
+    await registerContest(contestId, { password });
 
     return {
       success: true,
diff --git a/frontend/src/features/app/components/MainLayout.tsx b/frontend/src/features/app/components/MainLayout.tsx
index 8583341b..ecae13fe 100644
--- a/frontend/src/features/app/components/MainLayout.tsx
+++ b/frontend/src/features/app/components/MainLayout.tsx
@@ -1,10 +1,11 @@
-import { Outlet, useLocation } from "react-router-dom";
+import { Outlet, useLocation, useOutletContext } from "react-router-dom";
 import { Content } from "@carbon/react";
 import { WorkspaceShell } from "@/features/chatbot/components/workspace/WorkspaceShell";
 import styles from "./MainLayout.module.scss";
 
 const MainLayout = () => {
   const location = useLocation();
+  const outletContext = useOutletContext<unknown>();
   const isChatPage = location.pathname.startsWith("/chat");
 
   return (
@@ -13,11 +14,20 @@ const MainLayout = () => {
         <WorkspaceShell>
           {isChatPage ? (
             <div style={{ flex: 1, height: "100%", overflow: "hidden", display: "flex", flexDirection: "column" }}>
-              <Outlet />
+              <Outlet context={outletContext} />
             </div>
           ) : (
-            <Content style={{ height: "100%", overflow: "auto", marginTop: 0 }}>
-              <Outlet />
+            <Content
+              style={{
+                height: "100%",
+                minHeight: 0,
+                overflow: "auto",
+                marginTop: 0,
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <Outlet context={outletContext} />
             </Content>
           )}
         </WorkspaceShell>
diff --git a/frontend/src/features/app/components/SideMenu.tsx b/frontend/src/features/app/components/SideMenu.tsx
index 414653a3..c7522dc1 100644
--- a/frontend/src/features/app/components/SideMenu.tsx
+++ b/frontend/src/features/app/components/SideMenu.tsx
@@ -29,10 +29,14 @@ import { useAiSessionParam } from "@/features/chatbot/lib/aiSessionUrl";
 import { useOptionalChatbotContext } from "@/features/chatbot/contexts/ChatbotProvider";
 import { chatbotRepository } from "@/infrastructure/api/repositories";
 import { ChatHistoryPanel } from "@/features/chatbot/components/chat-ui/ChatHistoryPanel";
+import { useOptionalContest } from "@/features/contest/contexts";
 import { getClassroomContestDashboardPath } from "@/features/contest/domain/contestRoutePolicy";
+import { useContestRuntimeMode } from "@/features/contest/hooks";
 import { getContestTypeModule } from "@/features/contest/modules/registry";
 import type { AdminPanelId } from "@/features/contest/modules/types";
 import type { ClassroomAdminPanelId } from "@/features/classroom/screens/ClassroomAdminLayout";
+import SideMenuContestIdleSection from "./SideMenuContestIdleSection";
+import SideMenuContestRuntimeSection from "./SideMenuContestRuntimeSection";
 import "./SideMenu.scss";
 
 type ContestPanelNavItem = {
@@ -87,7 +91,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
 
   const [classrooms, setClassrooms] = useState<Classroom[]>([]);
   const [fetched, setFetched] = useState(false);
-  const [contestForAdminNav, setContestForAdminNav] = useState<ContestDetail | null>(null);
+  const [contestForNav, setContestForNav] = useState<ContestDetail | null>(null);
   const [contestFetched, setContestFetched] = useState(false);
   const { sessions, refreshSessions } = useChatSessionContext();
   const chatbot = useOptionalChatbotContext();
@@ -105,6 +109,27 @@ export const SideMenu: React.FC<SideMenuProps> = ({
     return { classroomId: match[1], contestId: match[2] };
   }, [location.pathname]);
 
+  const contestMatch = useMemo(() => {
+    const m = location.pathname.match(/^\/classrooms\/([^/]+)\/contest\/([^/]+)/);
+    return m ? { classroomId: m[1], contestId: m[2] } : null;
+  }, [location.pathname]);
+
+  const contestIdToFetch = contestAdminContext?.contestId ?? contestMatch?.contestId ?? null;
+  const contestContext = useOptionalContest();
+  const contextContestForNav =
+    contestContext?.contest?.id === contestIdToFetch ? contestContext.contest : null;
+  const effectiveContestForNav = contextContestForNav ?? contestForNav;
+
+  const { isRuntime } = useContestRuntimeMode();
+
+  const inContestIdle = !!contestMatch && !contestAdminContext && !isRuntime;
+  const inContestRuntime = !!contestMatch && isRuntime;
+
+  const activeProblemId = useMemo(() => {
+    const m = location.pathname.match(/\/solve\/([^/]+)/);
+    return m?.[1];
+  }, [location.pathname]);
+
   // Route-aware: show classroom workspace panel when on a classroom route
   const isOnClassroomRoute = Boolean(classroomId) && !location.pathname.startsWith("/classrooms/join");
   const isChatRoute = location.pathname === "/chat" || location.pathname.startsWith("/chat/");
@@ -139,18 +164,18 @@ export const SideMenu: React.FC<SideMenuProps> = ({
   }, [isPanelMode, isOpen, isChatRoute, isTeacherOrAdmin, refreshSessions]);
 
   useEffect(() => {
-    setContestForAdminNav(null);
+    setContestForNav(null);
     setContestFetched(false);
-  }, [contestAdminContext?.contestId]);
+  }, [contestIdToFetch]);
 
   useEffect(() => {
-    if (!contestAdminContext?.contestId || contestFetched) return;
+    if (!contestIdToFetch || contestFetched || contextContestForNav) return;
     let active = true;
     const loadContest = async () => {
       try {
-        const contest = await getContest(contestAdminContext.contestId);
+        const contest = await getContest(contestIdToFetch);
         if (!active) return;
-        setContestForAdminNav(contest ?? null);
+        setContestForNav(contest ?? null);
       } finally {
         if (active) {
           setContestFetched(true);
@@ -161,7 +186,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
     return () => {
       active = false;
     };
-  }, [contestAdminContext?.contestId, contestFetched]);
+  }, [contestIdToFetch, contestFetched, contextContestForNav]);
 
   useEffect(() => {
     if (isPanelMode || !isOpen) return;
@@ -268,10 +293,10 @@ export const SideMenu: React.FC<SideMenuProps> = ({
 
   const contestPanelNavItems = useMemo<ContestPanelNavItem[]>(() => {
     if (!contestAdminContext) return [];
-    const module = getContestTypeModule(contestForAdminNav?.contestType);
+    const module = getContestTypeModule(effectiveContestForNav?.contestType);
     const isExamMode = module.admin.editorKind === "paper_exam";
     const panels = Array.from(new Set<AdminPanelId>([
-      ...module.admin.getAvailablePanels(contestForAdminNav),
+      ...module.admin.getAvailablePanels(effectiveContestForNav),
       "settings",
     ]));
     return panels.flatMap((panel) => {
@@ -284,7 +309,7 @@ export const SideMenu: React.FC<SideMenuProps> = ({
         Icon: meta.Icon,
       }];
     });
-  }, [contestAdminContext, contestForAdminNav, tContest]);
+  }, [contestAdminContext, effectiveContestForNav, tContest]);
 
   const goToPanel = useCallback((panel: string) => {
     navigate(`/classrooms/${classroomId}?panel=${panel}`);
@@ -319,239 +344,257 @@ export const SideMenu: React.FC<SideMenuProps> = ({
         ].filter(Boolean).join(" ")}
         aria-label={t("header.sideNav", "Side navigation")}
       >
-        {showContestAdminMiniNav && (
-          <div className="side-menu__section">
-            {contestPanelNavItems.map(({ panel, label, Icon }) => (
-              <button
-                key={panel}
-                type="button"
-                title={label}
-                aria-label={label}
-                className={`side-menu__link${contestActivePanel === panel ? " side-menu__link--active" : ""}`}
-                onClick={() => goToContestPanel(panel)}
-              >
-                <Icon size={16} />
-                <span>{label}</span>
-              </button>
-            ))}
-          </div>
-        )}
-
-        {!showContestAdminMiniNav && (
-          isChatRoute && isTeacherOrAdmin ? (
-            <>
+        {inContestRuntime && contestMatch ? (
+          <SideMenuContestRuntimeSection
+            classroomId={contestMatch.classroomId}
+            contestId={contestMatch.contestId}
+            activeProblemId={activeProblemId}
+            compact={compact}
+            problems={effectiveContestForNav?.problems ?? []}
+          />
+        ) : inContestIdle && contestMatch ? (
+          <SideMenuContestIdleSection
+            classroomId={contestMatch.classroomId}
+            contestId={contestMatch.contestId}
+            compact={compact}
+          />
+        ) : (
+          <>
+            {showContestAdminMiniNav && (
               <div className="side-menu__section">
-                <button
-                  type="button"
-                  title={homeLabel}
-                  aria-label={homeLabel}
-                  className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
-                  onClick={() => go("/dashboard")}
-                >
-                  <Home size={16} />
-                  <span>{homeLabel}</span>
-                </button>
-                <button
-                  type="button"
-                  title={t("nav.chat", "Chat")}
-                  aria-label={t("nav.chat", "Chat")}
-                  className="side-menu__link side-menu__link--active"
-                  onClick={() => go("/chat")}
-                >
-                  <ChatIcon size={16} />
-                  <span>{t("nav.chat", "Chat")}</span>
-                </button>
-              </div>
-              <div className="side-menu__chat-panel">
-                <ChatHistoryPanel
-                  sessions={sessions}
-                  currentSessionId={currentSessionId}
-                  onSelectSession={handleSelectSession}
-                  onDeleteSession={handleDeleteSession}
-                  onRenameSession={handleRenameSession}
-                  showNewChatButton
-                  onNewChat={handleNewChat}
-                />
-              </div>
-            </>
-          ) : isOnClassroomRoute ? (
-            /* Inside a classroom: global links + panel sub-nav */
-            <>
-              <div className="side-menu__section">
-                <button
-                  type="button"
-                  title={homeLabel}
-                  aria-label={homeLabel}
-                  className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
-                  onClick={() => go("/dashboard")}
-                >
-                  <Home size={16} />
-                  <span>{homeLabel}</span>
-                </button>
-                {isTeacherOrAdmin && (
+                {contestPanelNavItems.map(({ panel, label, Icon }) => (
                   <button
+                    key={panel}
                     type="button"
-                    title={t("nav.chat", "Chat")}
-                    aria-label={t("nav.chat", "Chat")}
-                    className={`side-menu__link${isActive("/chat") ? " side-menu__link--active" : ""}`}
-                    onClick={() => go("/chat")}
+                    title={label}
+                    aria-label={label}
+                    className={`side-menu__link${contestActivePanel === panel ? " side-menu__link--active" : ""}`}
+                    onClick={() => goToContestPanel(panel)}
                   >
-                    <ChatIcon size={16} />
-                    <span>{t("nav.chat", "Chat")}</span>
+                    <Icon size={16} />
+                    <span>{label}</span>
                   </button>
-                )}
-                {isTeacherOrAdmin && (
-                  <button
-                    type="button"
-                    title={t("nav.marketplace", "Marketplace")}
-                    aria-label={t("nav.marketplace", "Marketplace")}
-                    className={`side-menu__link${isActive("/marketplace") ? " side-menu__link--active" : ""}`}
-                    onClick={() => go("/marketplace")}
-                  >
-                    <Globe size={16} />
-                    <span>{t("nav.marketplace", "Marketplace")}</span>
-                  </button>
-                )}
+                ))}
               </div>
-              <div className="side-menu__divider" />
-              <div className="side-menu__section">
-                {contestAdminContext ? (
-                  contestPanelNavItems.map(({ panel, label, Icon }) => (
+            )}
+
+            {!showContestAdminMiniNav && (
+              isChatRoute && isTeacherOrAdmin ? (
+                <>
+                  <div className="side-menu__section">
                     <button
-                      key={panel}
                       type="button"
-                      title={label}
-                      aria-label={label}
-                      className={`side-menu__link${contestActivePanel === panel ? " side-menu__link--active" : ""}`}
-                      onClick={() => goToContestPanel(panel)}
+                      title={homeLabel}
+                      aria-label={homeLabel}
+                      className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
+                      onClick={() => go("/dashboard")}
                     >
-                      <Icon size={16} />
-                      <span>{label}</span>
+                      <Home size={16} />
+                      <span>{homeLabel}</span>
                     </button>
-                  ))
-                ) : (
-                  ([
-                    { panel: "overview", label: tClassroom("sideMenu.overview", "概要"), Icon: Dashboard },
-                    { panel: "announcements", label: tClassroom("sideMenu.announcements", "教室公告"), Icon: Bullhorn },
-                    { panel: "contests", label: tClassroom("sideMenu.contests", "競賽列表"), Icon: Trophy },
-                    { panel: "members", label: tClassroom("sideMenu.members", "教室成員"), Icon: UserMultiple },
-                    ...(canOpenClassroomSettings
-                      ? ([
-                          {
-                            panel: "settings" as const,
-                            label: tClassroom("sideMenu.settings", "教室設定"),
-                            Icon: Settings,
-                          },
-                        ] as const)
-                      : []),
-                  ] as { panel: ClassroomAdminPanelId; label: string; Icon: ComponentType<{ size?: number }> }[]).map(({ panel, label, Icon }) => (
                     <button
-                      key={panel}
                       type="button"
-                      title={label}
-                      aria-label={label}
-                      className={`side-menu__link${classroomActivePanel === panel ? " side-menu__link--active" : ""}`}
-                      onClick={() => goToPanel(panel)}
+                      title={t("nav.chat", "Chat")}
+                      aria-label={t("nav.chat", "Chat")}
+                      className="side-menu__link side-menu__link--active"
+                      onClick={() => go("/chat")}
                     >
-                      <Icon size={16} />
-                      <span>{label}</span>
+                      <ChatIcon size={16} />
+                      <span>{t("nav.chat", "Chat")}</span>
                     </button>
-                  ))
-                )}
-              </div>
-            </>
-          ) : (
-            /* Default classrooms list */
-            <>
-              <div className="side-menu__section">
-                <button
-                  type="button"
-                  title={homeLabel}
-                  aria-label={homeLabel}
-                  className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
-                  onClick={() => go("/dashboard")}
-                >
-                  <Home size={16} />
-                  <span>{homeLabel}</span>
-                </button>
-                {isTeacherOrAdmin && (
-                  <button
-                    type="button"
-                    title={t("nav.chat", "Chat")}
-                    aria-label={t("nav.chat", "Chat")}
-                    className={`side-menu__link${isActive("/chat") ? " side-menu__link--active" : ""}`}
-                    onClick={() => go("/chat")}
-                  >
-                    <ChatIcon size={16} />
-                    <span>{t("nav.chat", "Chat")}</span>
-                  </button>
-                )}
-                {isTeacherOrAdmin && (
-                  <button
-                    type="button"
-                    title={t("nav.marketplace", "Marketplace")}
-                    aria-label={t("nav.marketplace", "Marketplace")}
-                    className={`side-menu__link${isActive("/marketplace") ? " side-menu__link--active" : ""}`}
-                    onClick={() => go("/marketplace")}
-                  >
-                    <Globe size={16} />
-                    <span>{t("nav.marketplace", "Marketplace")}</span>
-                  </button>
-                )}
-              </div>
-              {classrooms.length > 0 && (
+                  </div>
+                  <div className="side-menu__chat-panel">
+                    <ChatHistoryPanel
+                      sessions={sessions}
+                      currentSessionId={currentSessionId}
+                      onSelectSession={handleSelectSession}
+                      onDeleteSession={handleDeleteSession}
+                      onRenameSession={handleRenameSession}
+                      showNewChatButton
+                      onNewChat={handleNewChat}
+                    />
+                  </div>
+                </>
+              ) : isOnClassroomRoute ? (
+                /* Inside a classroom: global links + panel sub-nav */
                 <>
+                  <div className="side-menu__section">
+                    <button
+                      type="button"
+                      title={homeLabel}
+                      aria-label={homeLabel}
+                      className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
+                      onClick={() => go("/dashboard")}
+                    >
+                      <Home size={16} />
+                      <span>{homeLabel}</span>
+                    </button>
+                    {isTeacherOrAdmin && (
+                      <button
+                        type="button"
+                        title={t("nav.chat", "Chat")}
+                        aria-label={t("nav.chat", "Chat")}
+                        className={`side-menu__link${isActive("/chat") ? " side-menu__link--active" : ""}`}
+                        onClick={() => go("/chat")}
+                      >
+                        <ChatIcon size={16} />
+                        <span>{t("nav.chat", "Chat")}</span>
+                      </button>
+                    )}
+                    {isTeacherOrAdmin && (
+                      <button
+                        type="button"
+                        title={t("nav.marketplace", "Marketplace")}
+                        aria-label={t("nav.marketplace", "Marketplace")}
+                        className={`side-menu__link${isActive("/marketplace") ? " side-menu__link--active" : ""}`}
+                        onClick={() => go("/marketplace")}
+                      >
+                        <Globe size={16} />
+                        <span>{t("nav.marketplace", "Marketplace")}</span>
+                      </button>
+                    )}
+                  </div>
                   <div className="side-menu__divider" />
                   <div className="side-menu__section">
-                    <div className="side-menu__section-header">
-                      <span>{t("nav.classrooms")}</span>
-                    </div>
-                    <div className="side-menu__classroom-list">
-                      {classrooms.map((c) => {
-                        const isCurrent = c.id === classroomId;
-                        const Icon = getClassroomIcon(c.icon);
-                        const avatarInitial = getClassroomAvatarInitial(c.name);
-                        return (
-                          <button
-                            key={c.id}
-                            type="button"
-                            title={c.name}
-                            aria-label={c.name}
-                            className={`side-menu__classroom${isCurrent ? " side-menu__classroom--active" : ""}`}
-                            onClick={() => go(`/classrooms/${c.id}`)}
-                          >
-                            {compact ? (
-                              <div className="side-menu__classroom-avatar" aria-hidden="true">
-                                {avatarInitial}
-                              </div>
-                            ) : (
-                              <Icon size={16} />
-                            )}
-                            <span className="side-menu__classroom-name">{c.name}</span>
-                            {isCurrent && <Checkmark size={16} className="side-menu__classroom-check" />}
-                          </button>
-                        );
-                      })}
-                    </div>
+                    {contestAdminContext ? (
+                      contestPanelNavItems.map(({ panel, label, Icon }) => (
+                        <button
+                          key={panel}
+                          type="button"
+                          title={label}
+                          aria-label={label}
+                          className={`side-menu__link${contestActivePanel === panel ? " side-menu__link--active" : ""}`}
+                          onClick={() => goToContestPanel(panel)}
+                        >
+                          <Icon size={16} />
+                          <span>{label}</span>
+                        </button>
+                      ))
+                    ) : (
+                      ([
+                        { panel: "overview", label: tClassroom("sideMenu.overview", "概要"), Icon: Dashboard },
+                        { panel: "announcements", label: tClassroom("sideMenu.announcements", "教室公告"), Icon: Bullhorn },
+                        { panel: "contests", label: tClassroom("sideMenu.contests", "競賽列表"), Icon: Trophy },
+                        { panel: "members", label: tClassroom("sideMenu.members", "教室成員"), Icon: UserMultiple },
+                        ...(canOpenClassroomSettings
+                          ? ([
+                              {
+                                panel: "settings" as const,
+                                label: tClassroom("sideMenu.settings", "教室設定"),
+                                Icon: Settings,
+                              },
+                            ] as const)
+                          : []),
+                      ] as { panel: ClassroomAdminPanelId; label: string; Icon: ComponentType<{ size?: number }> }[]).map(({ panel, label, Icon }) => (
+                        <button
+                          key={panel}
+                          type="button"
+                          title={label}
+                          aria-label={label}
+                          className={`side-menu__link${classroomActivePanel === panel ? " side-menu__link--active" : ""}`}
+                          onClick={() => goToPanel(panel)}
+                        >
+                          <Icon size={16} />
+                          <span>{label}</span>
+                        </button>
+                      ))
+                    )}
                   </div>
                 </>
-              )}
-            </>
-          )
-        )}
-        {contestAdminContext && (
-          <div className="side-menu__bottom">
-            <button
-              type="button"
-              title={contestHomeLabel}
-              aria-label={contestHomeLabel}
-              className="side-menu__link"
-              onClick={goToContestHome}
-            >
-              <Education size={16} />
-              <span>{contestHomeLabel}</span>
-            </button>
-          </div>
+              ) : (
+                /* Default classrooms list */
+                <>
+                  <div className="side-menu__section">
+                    <button
+                      type="button"
+                      title={homeLabel}
+                      aria-label={homeLabel}
+                      className={`side-menu__link${isActive("/dashboard") ? " side-menu__link--active" : ""}`}
+                      onClick={() => go("/dashboard")}
+                    >
+                      <Home size={16} />
+                      <span>{homeLabel}</span>
+                    </button>
+                    {isTeacherOrAdmin && (
+                      <button
+                        type="button"
+                        title={t("nav.chat", "Chat")}
+                        aria-label={t("nav.chat", "Chat")}
+                        className={`side-menu__link${isActive("/chat") ? " side-menu__link--active" : ""}`}
+                        onClick={() => go("/chat")}
+                      >
+                        <ChatIcon size={16} />
+                        <span>{t("nav.chat", "Chat")}</span>
+                      </button>
+                    )}
+                    {isTeacherOrAdmin && (
+                      <button
+                        type="button"
+                        title={t("nav.marketplace", "Marketplace")}
+                        aria-label={t("nav.marketplace", "Marketplace")}
+                        className={`side-menu__link${isActive("/marketplace") ? " side-menu__link--active" : ""}`}
+                        onClick={() => go("/marketplace")}
+                      >
+                        <Globe size={16} />
+                        <span>{t("nav.marketplace", "Marketplace")}</span>
+                      </button>
+                    )}
+                  </div>
+                  {classrooms.length > 0 && (
+                    <>
+                      <div className="side-menu__divider" />
+                      <div className="side-menu__section">
+                        <div className="side-menu__section-header">
+                          <span>{t("nav.classrooms")}</span>
+                        </div>
+                        <div className="side-menu__classroom-list">
+                          {classrooms.map((c) => {
+                            const isCurrent = c.id === classroomId;
+                            const Icon = getClassroomIcon(c.icon);
+                            const avatarInitial = getClassroomAvatarInitial(c.name);
+                            return (
+                              <button
+                                key={c.id}
+                                type="button"
+                                title={c.name}
+                                aria-label={c.name}
+                                className={`side-menu__classroom${isCurrent ? " side-menu__classroom--active" : ""}`}
+                                onClick={() => go(`/classrooms/${c.id}`)}
+                              >
+                                {compact ? (
+                                  <div className="side-menu__classroom-avatar" aria-hidden="true">
+                                    {avatarInitial}
+                                  </div>
+                                ) : (
+                                  <Icon size={16} />
+                                )}
+                                <span className="side-menu__classroom-name">{c.name}</span>
+                                {isCurrent && <Checkmark size={16} className="side-menu__classroom-check" />}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </>
+              )
+            )}
+            {contestAdminContext && (
+              <div className="side-menu__bottom">
+                <button
+                  type="button"
+                  title={contestHomeLabel}
+                  aria-label={contestHomeLabel}
+                  className="side-menu__link"
+                  onClick={goToContestHome}
+                >
+                  <Education size={16} />
+                  <span>{contestHomeLabel}</span>
+                </button>
+              </div>
+            )}
+          </>
         )}
       </nav>
     </>
diff --git a/frontend/src/features/app/components/SideMenuContestIdleSection.tsx b/frontend/src/features/app/components/SideMenuContestIdleSection.tsx
new file mode 100644
index 00000000..ed11633b
--- /dev/null
+++ b/frontend/src/features/app/components/SideMenuContestIdleSection.tsx
@@ -0,0 +1,35 @@
+import { Link, useLocation } from "react-router-dom";
+import { Home, ArrowLeft } from "@carbon/icons-react";
+
+interface Props {
+  classroomId: string;
+  contestId: string;
+  /** kept for API parity with the runtime section; styling is driven by the parent .side-menu--mini class */
+  compact?: boolean;
+}
+
+export const SideMenuContestIdleSection = ({ classroomId, contestId }: Props) => {
+  const { pathname } = useLocation();
+  const dashboardPath = `/classrooms/${classroomId}/contest/${contestId}`;
+  const isDashboard = pathname === dashboardPath;
+  const classroomPath = `/classrooms/${classroomId}`;
+
+  return (
+    <div className="side-menu__section">
+      <Link to={classroomPath} className="side-menu__link">
+        <ArrowLeft size={20} />
+        <span>返回教室</span>
+      </Link>
+      <Link
+        to={dashboardPath}
+        className={`side-menu__link${isDashboard ? " side-menu__link--active" : ""}`}
+        aria-current={isDashboard ? "page" : undefined}
+      >
+        <Home size={20} />
+        <span>競賽主頁</span>
+      </Link>
+    </div>
+  );
+};
+
+export default SideMenuContestIdleSection;
diff --git a/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx b/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
new file mode 100644
index 00000000..8992838e
--- /dev/null
+++ b/frontend/src/features/app/components/SideMenuContestRuntimeSection.tsx
@@ -0,0 +1,107 @@
+import { useNavigate } from "react-router-dom";
+import { Checkmark, CircleDash, IncompleteCancel } from "@carbon/icons-react";
+import type { ContestProblemSummary } from "@/core/entities/contest.entity";
+import type { SubmissionStatus } from "@/core/entities/submission.entity";
+import { ExamNavigator } from "@/features/contest/components/exam/ExamNavigator";
+import { useContestRuntimeNavigator } from "@/features/contest/contexts";
+
+interface Props {
+  classroomId: string;
+  contestId: string;
+  /** 已選的 problemId，用以高亮 */
+  activeProblemId?: string;
+  compact?: boolean;
+  problems: ContestProblemSummary[];
+}
+
+type ProblemStatusKind = "done" | "partial" | "untouched";
+
+const mapStatusKind = (status: SubmissionStatus | undefined): ProblemStatusKind => {
+  if (status === "AC" || status === "passed") return "done";
+  if (status === undefined) return "untouched";
+  return "partial";
+};
+
+const renderStatusIcon = (kind: ProblemStatusKind) => {
+  if (kind === "done") return <Checkmark size={16} aria-label="已完成" />;
+  if (kind === "partial") return <IncompleteCancel size={16} aria-label="進行中" />;
+  return <CircleDash size={16} aria-label="未作答" />;
+};
+
+export const SideMenuContestRuntimeSection = ({
+  classroomId,
+  contestId,
+  activeProblemId,
+  compact,
+  problems,
+}: Props) => {
+  const navigate = useNavigate();
+  const runtimeNavigator = useContestRuntimeNavigator();
+
+  const solvePath = `/classrooms/${classroomId}/contest/${contestId}/solve`;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
+      {runtimeNavigator ? (
+        <ExamNavigator
+          items={runtimeNavigator.items}
+          activeIndex={runtimeNavigator.activeIndex}
+          answeredIds={runtimeNavigator.answeredIds}
+          markedIds={runtimeNavigator.markedIds}
+          collapsed={compact}
+          overviewLabel={runtimeNavigator.overviewLabel}
+          onSelectOverview={runtimeNavigator.onSelectOverview}
+          onSelect={runtimeNavigator.onSelect}
+          hideHeader
+        />
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", minHeight: 0 }}>
+          {problems.length === 0 ? (
+            <p style={{ color: "var(--cds-text-secondary)", fontSize: "0.75rem" }}>
+              {compact ? "" : "尚無題目"}
+            </p>
+          ) : (
+            problems.map((p) => {
+              const isActive = p.problemId === activeProblemId;
+              const kind = mapStatusKind(p.userStatus);
+              const target = `${solvePath}/${p.problemId}`;
+              return (
+                <button
+                  key={p.problemId}
+                  type="button"
+                  onClick={() => navigate(target)}
+                  aria-current={isActive ? "page" : undefined}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                    padding: compact ? "0.5rem" : "0.5rem 0.75rem",
+                    borderRadius: "0.25rem",
+                    background: isActive ? "var(--cds-layer-accent)" : "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    textAlign: "left",
+                    width: "100%",
+                    color: "var(--cds-text-primary)",
+                  }}
+                >
+                  {renderStatusIcon(kind)}
+                  {!compact && (
+                    <>
+                      <span style={{ flexShrink: 0, fontWeight: 600 }}>{p.label}</span>
+                      <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                        {p.title}
+                      </span>
+                    </>
+                  )}
+                </button>
+              );
+            })
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SideMenuContestRuntimeSection;
diff --git a/frontend/src/features/app/components/UserMenu.scss b/frontend/src/features/app/components/UserMenu.scss
index d859de8a..653e799b 100644
--- a/frontend/src/features/app/components/UserMenu.scss
+++ b/frontend/src/features/app/components/UserMenu.scss
@@ -6,7 +6,8 @@
   display: flex;
   align-items: center;
   gap: layout.$spacing-03;
-  padding: 0 layout.$spacing-04;
+  padding: 0 layout.$spacing-03;
+  margin-right: 0;
   height: 100%;
   background: none;
   border: none;
@@ -45,7 +46,7 @@
   }
 
   @media (max-width: 672px) {
-    padding: 0 layout.$spacing-03;
+    padding: 0 layout.$spacing-02;
 
     &__text {
       display: none;
diff --git a/frontend/src/features/app/components/UserMenu.tsx b/frontend/src/features/app/components/UserMenu.tsx
index 53171791..c72e1771 100644
--- a/frontend/src/features/app/components/UserMenu.tsx
+++ b/frontend/src/features/app/components/UserMenu.tsx
@@ -3,13 +3,10 @@ import {
   HeaderGlobalAction,
   HeaderPanel,
   Modal,
-  TextInput,
-  InlineLoading,
 } from "@carbon/react";
 import {
   Login,
   Logout,
-  Edit,
   Code,
   Book,
   RecentlyViewed,
@@ -26,7 +23,7 @@ import { useTranslation } from "react-i18next";
 import { useUserPreferences } from "@/features/auth/hooks/useUserPreferences";
 import type { ContestDetail } from "@/core/entities/contest.entity";
 import { getClassroomContestDashboardPath } from "@/features/contest/domain/contestRoutePolicy";
-import { updateNickname } from "@/infrastructure/api/repositories";
+import { useContestRuntimeMode } from "@/features/contest/hooks";
 import { Avatar } from "@/shared/ui/avatar";
 import "./UserMenu.scss";
 
@@ -44,8 +41,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({
   onExpandedChange,
   contestMode = false,
   contest,
-  onContestRefresh,
-  settingsOnly = false,
+  settingsOnly,
 }) => {
   const navigate = useNavigate();
   const { user, logout } = useAuth();
@@ -55,17 +51,11 @@ export const UserMenu: React.FC<UserMenuProps> = ({
     useUserPreferences();
   const { open: openSettings } = useSettingsDialog();
 
+  const { isRuntime } = useContestRuntimeMode();
+  const effectiveSettingsOnly = settingsOnly ?? isRuntime;
+
   const [isExpandedInternal, setIsExpandedInternal] = useState(false);
   const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false);
-  const [isNicknameModalOpen, setIsNicknameModalOpen] = useState(false);
-  const [nickname, setNickname] = useState(contest?.myNickname || "");
-  const [nicknameLoading, setNicknameLoading] = useState(false);
-
-  useEffect(() => {
-    if (contest?.myNickname) {
-      setNickname(contest.myNickname);
-    }
-  }, [contest?.myNickname]);
 
   const isExpanded = isExpandedInternal && !otherPanelExpanded;
 
@@ -92,7 +82,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({
   }, [isExpanded, onExpandedChange, t]);
 
   const handleToggle = () => {
-    if (settingsOnly) {
+    if (effectiveSettingsOnly) {
       openSettings();
       return;
     }
@@ -120,27 +110,6 @@ export const UserMenu: React.FC<UserMenuProps> = ({
     window.location.assign("/dev/storybook/");
   };
 
-  const handleNicknameUpdate = async () => {
-    if (!contest) return;
-    setNicknameLoading(true);
-    try {
-      await updateNickname(contest.id, nickname);
-      onContestRefresh?.();
-      setIsNicknameModalOpen(false);
-    } catch (error) {
-      console.error("Failed to update nickname", error);
-      alert(tContest("avatar.updateFailed"));
-    } finally {
-      setNicknameLoading(false);
-    }
-  };
-
-  const canEditNickname =
-    contestMode &&
-    contest?.anonymousModeEnabled &&
-    (contest.examStatus !== "in_progress" ||
-      contest.currentUserRole === "admin");
-
   const getRoleLabel = (role: string | undefined) => {
     if (!role) return t("user.role.student");
     return t(`user.role.${role}`);
@@ -189,18 +158,6 @@ export const UserMenu: React.FC<UserMenuProps> = ({
             <span className="user-menu-role">{getRoleLabel(user.role)}</span>
           </div>
 
-          {/* Contest nickname */}
-          {contestMode && canEditNickname && (
-            <button
-              type="button"
-              className="user-menu-link"
-              onClick={() => setIsNicknameModalOpen(true)}
-            >
-              <Edit size={16} />
-              {tContest("avatar.editNickname")}
-            </button>
-          )}
-
           {contestMode && contest?.boundClassroomId && (
             <button
               type="button"
@@ -360,28 +317,6 @@ export const UserMenu: React.FC<UserMenuProps> = ({
         <p data-testid="user-menu-logout-message">{t("auth.logout.confirmMessage")}</p>
       </Modal>
 
-      {/* Nickname Modal */}
-      <Modal
-        open={isNicknameModalOpen}
-        modalHeading={tContest("avatar.editNickname")}
-        primaryButtonText={tContest("button.save")}
-        secondaryButtonText={tContest("common:button.cancel")}
-        onRequestClose={() => setIsNicknameModalOpen(false)}
-        onRequestSubmit={handleNicknameUpdate}
-        primaryButtonDisabled={nicknameLoading}
-      >
-        <TextInput
-          id="nickname-input"
-          labelText={tContest("avatar.nickname")}
-          value={nickname}
-          onChange={(e) => setNickname(e.target.value)}
-          maxLength={20}
-        />
-        {nicknameLoading && (
-          <InlineLoading description={tContest("avatar.saving")} />
-        )}
-      </Modal>
-
     </>
   );
 };
diff --git a/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss b/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
index 3ab60983..76039eae 100644
--- a/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
+++ b/frontend/src/features/app/components/workspace/WorkspaceTopNav.module.scss
@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-between;
   min-height: 3rem;
-  padding: 0 0.75rem;
+  padding: 0 0 0 0.75rem;
   border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
   background: var(--cds-layer);
   color: var(--cds-text-primary);
@@ -125,14 +125,101 @@
   justify-content: flex-end;
   flex-shrink: 0;
   height: 3rem;
+  padding-right: 0;
 }
 
 @media (max-width: 672px) {
   .root {
-    padding: 0 0.5rem;
+    padding: 0 0 0 0.5rem;
   }
 
   .context {
     font-size: 0.875rem;
   }
 }
+
+.runtimeTimer {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-variant-numeric: tabular-nums;
+  min-height: 3rem;
+  padding: 0 0.75rem;
+  border-left: 1px solid var(--cds-border-subtle-01);
+  color: var(--cds-text-primary);
+}
+
+.runtimeMonitoringMini {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 3rem;
+  block-size: 3rem;
+  padding: 0;
+  border: 0;
+  border-left: 1px solid var(--cds-border-subtle-01);
+  background: transparent;
+  color: var(--cds-icon-secondary);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--cds-layer-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus);
+    outline-offset: -2px;
+  }
+}
+
+.runtimeMonitoringNormal {
+  color: var(--cds-support-success);
+
+  svg {
+    animation: workspaceMonitoringPulse 2.8s ease-in-out infinite;
+    filter: drop-shadow(0 0 0 rgba(66, 190, 101, 0));
+  }
+}
+
+.runtimeMonitoringWarning {
+  color: var(--cds-support-warning);
+}
+
+.runtimeMonitoringCritical {
+  color: var(--cds-support-error);
+}
+
+.runtimeMonitoringCountdown {
+  position: absolute;
+  right: 0.25rem;
+  bottom: 0.25rem;
+  max-inline-size: 2.25rem;
+  overflow: hidden;
+  color: currentColor;
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@keyframes workspaceMonitoringPulse {
+  0%,
+  100% {
+    opacity: 0.76;
+    transform: scale(1);
+    filter: drop-shadow(0 0 0 rgba(66, 190, 101, 0));
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.08);
+    filter: drop-shadow(0 0 6px rgba(66, 190, 101, 0.52));
+  }
+}
+
+.contextLink:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
diff --git a/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx b/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
index f0833715..a6a63923 100644
--- a/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
+++ b/frontend/src/features/app/components/workspace/WorkspaceTopNav.tsx
@@ -1,14 +1,30 @@
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { IconButton } from "@carbon/react";
-import { ChevronDown, Education, Home, OpenPanelLeft, Settings } from "@carbon/icons-react";
+import {
+  ChevronDown,
+  Education,
+  Home,
+  Locked,
+  OpenPanelLeft,
+  Settings,
+  View,
+  WarningAltFilled,
+} from "@carbon/icons-react";
 import { useTranslation } from "react-i18next";
 import type { BoundContest, Classroom, ClassroomDetail } from "@/core/entities/classroom.entity";
 import { getClassroom, getClassrooms } from "@/infrastructure/api/repositories/classroom.repository";
 import { getClassroomIcon } from "@/features/classroom/constants/classroomIcons";
 import { getClassroomContestAdminPath, getClassroomContestDashboardPath } from "@/features/contest/domain/contestRoutePolicy";
+import { usePageHeaderActionsSlot } from "@/features/app/contexts/PageHeaderActionsContext";
 import { useWorkspace } from "@/features/app/contexts/WorkspaceContext";
 import { UserMenu } from "@/features/app/components/UserMenu";
+import { useContestRuntimeMode } from "@/features/contest/hooks";
+import { useContest } from "@/features/contest/contexts/ContestContext";
+import { useContestTimers } from "@/features/contest/hooks/useContestTimers";
+import { ExamModeMonitorModal } from "@/features/contest/components/modals/ExamModeMonitorModal";
+import { useExamMonitoringStatus } from "@/features/contest/contexts/ExamMonitoringStatusContext";
+import { TimeDisplay } from "@/shared/components/dashboard";
 import styles from "./WorkspaceTopNav.module.scss";
 
 type MenuKind = "classroom" | "contest" | "contestMode" | null;
@@ -37,6 +53,7 @@ interface WorkspaceTopNavProps {
 export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
   const { t } = useTranslation("common");
   const { left } = useWorkspace();
+  const pageHeaderActions = usePageHeaderActionsSlot();
   const location = useLocation();
   const navigate = useNavigate();
   const menuRef = useRef<HTMLDivElement>(null);
@@ -149,6 +166,9 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
     navigate(getClassroomContestAdminPath(classroomId, contestRouteId));
   }, [classroomId, contestRouteId, navigate]);
 
+  const { isRuntime } = useContestRuntimeMode();
+  const effectiveOpenMenu = isRuntime ? null : openMenu;
+
   return (
     <header className={styles.root}>
       <div className={styles.left}>
@@ -177,14 +197,15 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
                   type="button"
                   className={styles.contextLink}
                   aria-haspopup="menu"
-                  aria-expanded={openMenu === "classroom"}
+                  aria-expanded={effectiveOpenMenu === "classroom"}
                   onClick={() => setOpenMenu((menu) => menu === "classroom" ? null : "classroom")}
+                  disabled={isRuntime}
                 >
                   {createElement(getClassroomIcon(currentClassroom.icon), { size: 18 })}
                   <span>{currentClassroom.name}</span>
-                  <ChevronDown size={14} />
+                  {!isRuntime ? <ChevronDown size={14} /> : null}
                 </button>
-                {openMenu === "classroom" ? (
+                {effectiveOpenMenu === "classroom" ? (
                   <div className={styles.menu} role="menu">
                     {classrooms.map((classroom) => {
                       return (
@@ -214,16 +235,17 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
                   type="button"
                   className={styles.contextLink}
                   aria-haspopup="menu"
-                  aria-expanded={openMenu === "contest"}
+                  aria-expanded={effectiveOpenMenu === "contest"}
                   onClick={() => setOpenMenu((menu) => menu === "contest" ? null : "contest")}
+                  disabled={isRuntime}
                 >
                   <span>
                     {currentContest?.contestName ??
                       t("workspaceTopNav.contestFallback", "Contest")}
                   </span>
-                  <ChevronDown size={14} />
+                  {!isRuntime ? <ChevronDown size={14} /> : null}
                 </button>
-                {openMenu === "contest" ? (
+                {effectiveOpenMenu === "contest" ? (
                   <div className={styles.menu} role="menu">
                     {contests.map((contest) => (
                       <button
@@ -248,13 +270,14 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
                       type="button"
                       className={styles.contextLink}
                       aria-haspopup="menu"
-                      aria-expanded={openMenu === "contestMode"}
+                      aria-expanded={effectiveOpenMenu === "contestMode"}
                       onClick={() => setOpenMenu((menu) => menu === "contestMode" ? null : "contestMode")}
+                      disabled={isRuntime}
                     >
                       <span>{t("workspaceTopNav.adminConsole", "管理後台")}</span>
-                      <ChevronDown size={14} />
+                      {!isRuntime ? <ChevronDown size={14} /> : null}
                     </button>
-                    {openMenu === "contestMode" ? (
+                    {effectiveOpenMenu === "contestMode" ? (
                       <div className={styles.menu} role="menu">
                         <button
                           type="button"
@@ -289,8 +312,86 @@ export function WorkspaceTopNav({ showSidebarControl }: WorkspaceTopNavProps) {
       </div>
 
       <div className={styles.actions}>
-        <UserMenu />
+        {isRuntime && <RuntimeNavExtras />}
+        {pageHeaderActions}
+        {!isRuntime ? <UserMenu /> : null}
       </div>
     </header>
   );
 }
+
+function RuntimeNavExtras() {
+  const { t } = useTranslation("contest");
+  const [monitoringOpen, setMonitoringOpen] = useState(false);
+  const { contest, refreshContest } = useContest();
+  const monitoringReminder = useExamMonitoringStatus();
+  const { timeLeft, isCountdownToStart, unlockTimeLeft } = useContestTimers({
+    contest,
+    contestId: contest?.id,
+    refreshContest,
+  });
+
+  if (!contest) return null;
+
+  const monitoringLabel = monitoringReminder
+    ? t(`exam.monitoringReminder.${monitoringReminder.source}`, {
+        defaultValue: t("exam.monitoringIssueHint", "監控需處理"),
+      })
+    : contest.examStatus === "locked"
+      ? t("exam.locked", "已鎖定")
+      : contest.examStatus === "paused"
+        ? t("exam.paused", "已暫停")
+        : t("exam.monitoring", "監控中");
+  const MonitoringIcon = monitoringReminder || contest.examStatus === "paused"
+    ? WarningAltFilled
+    : contest.examStatus === "locked"
+      ? Locked
+      : View;
+  const monitoringToneClass =
+    monitoringReminder?.tone === "critical" || contest.examStatus === "locked"
+      ? styles.runtimeMonitoringCritical
+      : monitoringReminder || contest.examStatus === "paused"
+        ? styles.runtimeMonitoringWarning
+        : styles.runtimeMonitoringNormal;
+
+  return (
+    <>
+      {contest.cheatDetectionEnabled ? (
+        <button
+          type="button"
+          className={`${styles.runtimeMonitoringMini} ${monitoringToneClass}`}
+          onClick={() => setMonitoringOpen(true)}
+          aria-label={monitoringLabel}
+          title={[
+            monitoringLabel,
+            unlockTimeLeft ? unlockTimeLeft : null,
+            monitoringReminder?.countdownSeconds != null
+              ? `${monitoringReminder.countdownSeconds}s`
+              : null,
+          ].filter(Boolean).join(" ")}
+        >
+          <MonitoringIcon size={20} />
+          {monitoringReminder?.countdownSeconds != null ? (
+            <span className={styles.runtimeMonitoringCountdown}>
+              {monitoringReminder.countdownSeconds}s
+            </span>
+          ) : null}
+        </button>
+      ) : null}
+      <div className={styles.runtimeTimer}>
+        <TimeDisplay
+          variant="header"
+          value={
+            isCountdownToStart
+              ? t("answering.runtimeNav.startsIn", "{{time}} 後開始", { time: timeLeft })
+              : timeLeft
+          }
+        />
+      </div>
+      <ExamModeMonitorModal
+        open={monitoringOpen}
+        onRequestClose={() => setMonitoringOpen(false)}
+      />
+    </>
+  );
+}
diff --git a/frontend/src/features/contest/components/ContestScoreboard.tsx b/frontend/src/features/contest/components/ContestScoreboard.tsx
index c57c634b..8abf4531 100644
--- a/frontend/src/features/contest/components/ContestScoreboard.tsx
+++ b/frontend/src/features/contest/components/ContestScoreboard.tsx
@@ -38,7 +38,6 @@ export interface StandingRow {
     username: string;
   };
   displayName?: string;
-  nickname?: string;
   solved: number;
   total_score: number;
   time: number;
@@ -92,13 +91,12 @@ const ContestScoreboard: React.FC<ContestScoreboardProps> = ({
   const rows = standings.map((s, index) => {
     // Use rank + index for unique ID since multiple users could have same rank
     const rowId = `row_${s.rank}_${s.user?.id || index}`;
-    // Use displayName if available (for anonymous mode), fallback to username
+    // Use profile display name when available, fallback to username.
     const displayName = s.displayName || s.user?.username || "Unknown";
     const row: {
       id: string;
       rank: number;
       user: string;
-      nickname?: string;
       realUsername?: string;
       solved: number;
       total_score: number;
@@ -108,7 +106,6 @@ const ContestScoreboard: React.FC<ContestScoreboardProps> = ({
       id: rowId,
       rank: s.rank,
       user: displayName,
-      nickname: s.nickname,
       realUsername: s.user?.username,
       solved: s.solved || 0,
       total_score: s.total_score || 0,
diff --git a/frontend/src/features/contest/components/CountdownProgress.module.scss b/frontend/src/features/contest/components/CountdownProgress.module.scss
new file mode 100644
index 00000000..c655ff15
--- /dev/null
+++ b/frontend/src/features/contest/components/CountdownProgress.module.scss
@@ -0,0 +1,37 @@
+.root {
+  display: grid;
+  gap: 0.875rem;
+}
+
+.progressBar :global(.cds--progress-bar__track),
+.progressBar :global(.cds--progress-bar__bar) {
+  height: 0.5rem;
+}
+
+// Running shimmer: when the contest is in progress, the bar gets a
+// subtle moving highlight so the value feels alive even between
+// per-second ticks.
+.running :global(.cds--progress-bar__bar) {
+  position: relative;
+  overflow: hidden;
+}
+
+.running :global(.cds--progress-bar__bar)::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 0.35) 50%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  transform: translateX(-100%);
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
diff --git a/frontend/src/features/contest/components/CountdownProgress.tsx b/frontend/src/features/contest/components/CountdownProgress.tsx
new file mode 100644
index 00000000..2413e28e
--- /dev/null
+++ b/frontend/src/features/contest/components/CountdownProgress.tsx
@@ -0,0 +1,90 @@
+import { useState, type ReactNode } from "react";
+import { ProgressBar } from "@carbon/react";
+import { TimeDisplay } from "@/shared/components/dashboard";
+import { useInterval } from "@/shared/hooks/useInterval";
+import { formatCompactDuration } from "@/features/contest/components/studentDashboard/studentDashboardState";
+import styles from "./CountdownProgress.module.scss";
+
+export interface CountdownProgressProps {
+  startTime: string;
+  endTime: string;
+  /** Override the value shown when the contest is over. Default: "考試已結束". */
+  afterPhase?: { label: string; value: ReactNode };
+  /** Hide the progress bar (default: shown). */
+  hideProgress?: boolean;
+}
+
+type Phase = "before" | "during" | "after" | "unset";
+
+export function CountdownProgress({
+  startTime,
+  endTime,
+  afterPhase,
+  hideProgress = false,
+}: CountdownProgressProps) {
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const startMs = Date.parse(startTime);
+  const endMs = Date.parse(endTime);
+
+  const phase: Phase = !Number.isFinite(startMs) || !Number.isFinite(endMs)
+    ? "unset"
+    : nowMs < startMs
+      ? "before"
+      : nowMs >= endMs
+        ? "after"
+        : "during";
+
+  useInterval(
+    () => setNowMs(Date.now()),
+    phase === "during" || phase === "before" ? 1000 : null,
+  );
+
+  const display = (() => {
+    if (phase === "unset") {
+      return { label: "倒數計時", value: "未設定", percent: 0 };
+    }
+    if (phase === "before") {
+      return {
+        label: "距離開始",
+        value: formatCompactDuration(startMs - nowMs),
+        percent: 0,
+      };
+    }
+    if (phase === "during") {
+      const total = Math.max(1, endMs - startMs);
+      const elapsed = nowMs - startMs;
+      return {
+        label: "剩餘時間",
+        value: formatCompactDuration(endMs - nowMs),
+        percent: Math.round(Math.max(0, Math.min(100, (elapsed / total) * 100))),
+      };
+    }
+    return {
+      label: afterPhase?.label ?? "考試狀態",
+      value: afterPhase?.value ?? "考試已結束",
+      percent: 100,
+    };
+  })();
+
+  return (
+    <div className={styles.root}>
+      <TimeDisplay
+        variant="countdown"
+        label={display.label}
+        value={display.value}
+      />
+      {!hideProgress ? (
+        <ProgressBar
+          label="時間進度"
+          hideLabel
+          size="small"
+          value={display.percent}
+          status={phase === "after" ? "finished" : "active"}
+          className={`${styles.progressBar} ${
+            phase === "during" ? styles.running : ""
+          }`}
+        />
+      ) : null}
+    </div>
+  );
+}
diff --git a/frontend/src/features/contest/components/ExamModeWrapper.tsx b/frontend/src/features/contest/components/ExamModeWrapper.tsx
index 78d1650e..3a13700c 100644
--- a/frontend/src/features/contest/components/ExamModeWrapper.tsx
+++ b/frontend/src/features/contest/components/ExamModeWrapper.tsx
@@ -99,11 +99,13 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
   const { showToast } = useToast();
   const streamAdapterRef = useRef(createStreamAdapter());
   const { t } = useTranslation("contest");
+  const policyRequired =
+    cheatDetectionEnabled && (isExamMonitored || isMonitoredStatus(examStatus));
   const {
     config: anticheatConfig,
     loading: anticheatConfigLoading,
     refresh: refreshAnticheatConfig,
-  } = useContestAnticheatConfig(contestId);
+  } = useContestAnticheatConfig(policyRequired ? contestId : undefined);
   const anticheatEffective = anticheatConfig?.effective;
   const capability = detectAnticheatCapability();
   const monitoringPlan = resolveDeviceMonitoringPlan(
@@ -129,8 +131,6 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
   const screenModuleRole =
     monitoringPlan.sources.screenShare.role ?? "secondary";
   const webcamModuleRole = monitoringPlan.sources.webcam.role ?? "secondary";
-  const policyRequired =
-    cheatDetectionEnabled && (isExamMonitored || isMonitoredStatus(examStatus));
   const policyConfigMissing =
     policyRequired && !anticheatConfigLoading && !anticheatConfig;
   const policyDeviceUnavailable =
@@ -177,16 +177,20 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
   });
 
   const precheckPassed = contestId ? hasExamPrecheckPassed(contestId) : false;
+  const shouldMonitorActiveExam = isMonitoredStatus(examStatus);
   const screenCaptureEnabled =
     effectiveMonitoringEnabled &&
+    shouldMonitorActiveExam &&
     precheckPassed &&
     monitoringPlan.runtime.enableScreenShareCapture;
   const webcamCaptureEnabled =
     effectiveMonitoringEnabled &&
+    shouldMonitorActiveExam &&
     precheckPassed &&
     monitoringPlan.runtime.enableWebcamCapture;
   const viewportMonitorEnabled =
     effectiveMonitoringEnabled &&
+    shouldMonitorActiveExam &&
     precheckPassed &&
     monitoringPlan.runtime.enableViewportIntegrity;
   const hasSentScreenDegradedRef = useRef(false);
@@ -231,7 +235,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
     },
     [contestId, webcamModuleRole],
   );
-  const streamMonitorEnabled = effectiveMonitoringEnabled;
+  const streamMonitorEnabled = effectiveMonitoringEnabled && shouldMonitorActiveExam;
   const screenStreamMonitorEnabled =
     streamMonitorEnabled && monitoringPlan.runtime.monitorScreenShareStream;
   const webcamStreamMonitorEnabled =
@@ -239,6 +243,17 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
   const lockedFullscreenTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
     null,
   );
+  const isAnsweringPath = useCallback(() => {
+    const contestBasePath = classroomId
+      ? getClassroomContestDashboardPath(classroomId, contestId)
+      : null;
+    if (!contestBasePath) return false;
+    const normalizedPath = location.pathname.replace(/\/+$/, "");
+    return (
+      normalizedPath === `${contestBasePath}/solve` ||
+      normalizedPath.startsWith(`${contestBasePath}/solve/`)
+    );
+  }, [classroomId, contestId, location.pathname]);
 
   // When config refreshes and screen share is no longer required, discard any
   // lingering precheck/runtime handoff streams so they don't trigger "螢幕分享已中斷"
@@ -675,6 +690,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
 
   useEffect(() => {
     if (initialFullscreenCheckDone.current || !cheatDetectionEnabled) return;
+    if (!isAnsweringPath()) return;
     if (runtimeReauthActive) return;
 
     if (
@@ -697,6 +713,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
   }, [
     examStatus,
     cheatDetectionEnabled,
+    isAnsweringPath,
     isSubmittingFromFullscreenExit,
     effectiveRequiresFullscreen,
     runtimeReauthActive,
@@ -719,6 +736,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
       cheatDetectionEnabled &&
       examStatus === "locked" &&
       effectiveRequiresFullscreen &&
+      isAnsweringPath() &&
       !fullscreenAdapterRef.current.isActive()
     ) {
       if (lockedFullscreenTimerRef.current) {
@@ -738,6 +756,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
     effectiveRequiresFullscreen,
     forceStopCapture,
     forceStopWebcamCapture,
+    isAnsweringPath,
     runtimeReauthActive,
   ]);
 
@@ -745,7 +764,8 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
     const shouldMonitorFullscreen =
       cheatDetectionEnabled &&
       effectiveRequiresFullscreen &&
-      examStatus === "locked";
+      examStatus === "locked" &&
+      isAnsweringPath();
 
     if (!shouldMonitorFullscreen) return;
 
@@ -774,6 +794,7 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
     cheatDetectionEnabled,
     effectiveRequiresFullscreen,
     examStatus,
+    isAnsweringPath,
     isSubmittingFromFullscreenExit,
     runtimeReauthActive,
   ]);
@@ -869,18 +890,6 @@ const ExamModeWrapper: React.FC<ExamModeWrapperProps> = ({
     }
   }, [effectiveRequiresFullscreen]);
 
-  const isAnsweringPath = useCallback(() => {
-    const contestBasePath = classroomId
-      ? getClassroomContestDashboardPath(classroomId, contestId)
-      : null;
-    if (!contestBasePath) return false;
-    const normalizedPath = location.pathname.replace(/\/+$/, "");
-    return (
-      normalizedPath === `${contestBasePath}/solve` ||
-      normalizedPath.startsWith(`${contestBasePath}/solve/`)
-    );
-  }, [classroomId, contestId, location.pathname]);
-
   const shouldShowPolicyUnavailableScreen =
     policyUnavailable && isAnsweringPath();
   const shouldShowLockScreen =
diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
index e1e2b3b8..2544cdb0 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.module.scss
@@ -1,34 +1,15 @@
-.root {
-  display: grid;
-  grid-auto-rows: max-content;
-  align-content: start;
-  min-height: 0;
-}
-
 .card {
   display: grid;
   gap: 1rem;
   align-content: start;
-  min-height: 8rem;
   padding: 1.25rem;
-  border-bottom: 1px solid var(--cds-border-subtle);
 }
 
-.cardHeader {
-  display: grid;
-  gap: 0.375rem;
-}
-
-.cardHeader span {
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.cardHeader strong {
-  color: var(--cds-text-primary);
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.2;
+.cardActionButton {
+  justify-self: start;
+  width: fit-content;
+  min-width: 7.5rem;
+  justify-content: center;
 }
 
 .chartFrame {
@@ -111,4 +92,3 @@
   font-size: var(--cds-label-01-font-size, 0.75rem);
   font-weight: 500;
 }
-
diff --git a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
index 4d97cd27..0e077790 100644
--- a/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
+++ b/frontend/src/features/contest/components/admin/AdminInsightRail.tsx
@@ -6,22 +6,36 @@ import {
   MeterChart,
 } from "@carbon/charts-react";
 import "@carbon/charts-react/styles.css";
-import { ProgressBar, SkeletonPlaceholder, SkeletonText } from "@carbon/react";
+import { Button, ProgressBar, SkeletonPlaceholder, SkeletonText } from "@carbon/react";
 import type {
   DashboardChartSeries,
   DashboardInsightCard,
   DistributionItem,
 } from "@/features/contest/screens/admin/panels/adminOverviewDashboard.model";
 import { useTheme } from "@/shared/ui/theme/ThemeContext";
+import {
+  DashboardContainer,
+  KPIBlock,
+} from "@/shared/components/dashboard";
 import styles from "./AdminInsightRail.module.scss";
 
 interface AdminInsightRailProps {
   cards: DashboardInsightCard[];
   distribution?: DistributionItem[];
-  /** 僅在總覽右欄第一區塊設為 true，避免多個 rail 重複顯示「考試進度」（考生比例）卡片。 */
+  /** 僅在總覽右欄第一區塊設為 true，避免多個 rail 重複顯示考生分佈卡片。 */
   showDistribution?: boolean;
   loadingCardKeys?: string[];
   distributionLoading?: boolean;
+  gradingAction?: InsightCardAction;
+}
+
+export interface InsightCardAction {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  loadingLabel?: string;
+  kind?: "primary" | "secondary" | "tertiary" | "danger--tertiary";
 }
 
 const resolveCarbonChartTheme = (
@@ -145,8 +159,8 @@ const DistributionOverview = ({
 }) => {
   const { t } = useTranslation("contest");
   const title = t(
-    "adminOverview.widgets.examProgress",
-    "考試進度",
+    "adminOverview.widgets.studentDistribution",
+    "學生作答進度",
   );
   const visibleDistribution = distribution.filter(
     (item) => item.key !== "offline",
@@ -166,13 +180,13 @@ const DistributionOverview = ({
     scale[item.label] = DISTRIBUTION_TONE_COLOR[item.key];
     return scale;
   }, {});
-  return (
-    <section
-      className={`${styles.card} ${styles.distributionCard}`}
-      aria-busy={loading}
-      aria-label={title}
-    >
-      {loading ? (
+  if (loading) {
+    return (
+      <section
+        className={`${styles.card} ${styles.distributionCard}`}
+        aria-busy
+        aria-label={title}
+      >
         <div className={styles.distributionList}>
           {Array.from({ length: 4 }).map((_, index) => (
             <div key={index} className={styles.distributionItem}>
@@ -181,46 +195,48 @@ const DistributionOverview = ({
             </div>
           ))}
         </div>
+      </section>
+    );
+  }
+
+  return (
+    <KPIBlock
+      title={title}
+      value={`${completionPercent}%`}
+      ariaLabel={title}
+    >
+      {hasDistributionData ? (
+        <div className={styles.distributionChartFrame}>
+          <MeterChart
+            data={distributionChartData}
+            options={{
+              title: "",
+              height: "108px",
+              resizable: true,
+              theme,
+              meter: {
+                height: 8,
+                proportional: {
+                  unit: "人",
+                  breakdownFormatter: () =>
+                    `已交卷 ${submittedCount} / ${total} 人`,
+                  totalFormatter: (value) => `考生總數 ${value} 人`,
+                },
+              },
+              color: {
+                scale: chartColorScale,
+              },
+              legend: {
+                enabled: false,
+              },
+              toolbar: { enabled: false },
+            }}
+          />
+        </div>
       ) : (
-        <>
-          <div className={styles.cardHeader}>
-            <span>{title}</span>
-            <strong>{completionPercent}%</strong>
-          </div>
-          {hasDistributionData ? (
-            <div className={styles.distributionChartFrame}>
-              <MeterChart
-                data={distributionChartData}
-                options={{
-                  title: "",
-                  height: "108px",
-                  resizable: true,
-                  theme,
-                  meter: {
-                    height: 8,
-                    proportional: {
-                      unit: "人",
-                      breakdownFormatter: () =>
-                        `已交卷 ${submittedCount} / ${total} 人（完成率 ${completionPercent}%）`,
-                      totalFormatter: (value) => `考生總數 ${value} 人`,
-                    },
-                  },
-                  color: {
-                    scale: chartColorScale,
-                  },
-                  legend: {
-                    enabled: false,
-                  },
-                  toolbar: { enabled: false },
-                }}
-              />
-            </div>
-          ) : (
-            <div className={styles.emptyState}>尚無考生分佈資料</div>
-          )}
-        </>
+        <div className={styles.emptyState}>尚無考生分佈資料</div>
       )}
-    </section>
+    </KPIBlock>
   );
 };
 
@@ -230,6 +246,7 @@ export default function AdminInsightRail({
   showDistribution = false,
   loadingCardKeys = [],
   distributionLoading = false,
+  gradingAction,
 }: AdminInsightRailProps) {
   const { theme } = useTheme();
   const chartTheme = resolveCarbonChartTheme(theme);
@@ -243,7 +260,7 @@ export default function AdminInsightRail({
   const gradingCards = cards.filter((card) => card.key === "grading_progress");
 
   return (
-    <div className={styles.root}>
+    <DashboardContainer layout="stack" dividers="auto">
       {primaryCards.map((card) => (
         <InsightCard
           key={card.key}
@@ -265,9 +282,10 @@ export default function AdminInsightRail({
           card={card}
           chartTheme={chartTheme}
           loading={loadingKeys.has(card.key)}
+          action={gradingAction}
         />
       ))}
-    </div>
+    </DashboardContainer>
   );
 }
 
@@ -302,10 +320,12 @@ function InsightCard({
   card,
   chartTheme,
   loading,
+  action,
 }: {
   card: DashboardInsightCard;
   chartTheme: "white" | "g10" | "g90" | "g100";
   loading: boolean;
+  action?: InsightCardAction;
 }) {
   const isGradingCard = card.key === "grading_progress";
   const hasPriorityEventData =
@@ -314,15 +334,13 @@ function InsightCard({
       group.values.some((point) => point.value > 0),
     );
   return (
-    <section className={styles.card} aria-busy={loading}>
-      <div className={styles.cardHeader}>
-        <span>{card.title}</span>
-        {loading ? (
-          <SkeletonText heading width="5rem" />
-        ) : (
-          <strong>{card.value}</strong>
-        )}
-      </div>
+    <KPIBlock
+      title={card.title}
+      value={
+        loading ? <SkeletonText heading width="5rem" /> : card.value
+      }
+      ariaLabel={card.title}
+    >
       {loading ? (
         card.kind === "line" ? (
           <SkeletonPlaceholder className={styles.chartSkeleton} />
@@ -344,6 +362,16 @@ function InsightCard({
       ) : (
         <ProgressChart card={card} />
       )}
-    </section>
+      {isGradingCard && action ? (
+        <Button
+          kind={action.kind ?? "primary"}
+          onClick={action.onClick}
+          disabled={loading || action.disabled || action.loading}
+          className={styles.cardActionButton}
+        >
+          {action.loading ? action.loadingLabel ?? action.label : action.label}
+        </Button>
+      ) : null}
+    </KPIBlock>
   );
 }
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
index b7082b35..647e8869 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.module.scss
@@ -4,80 +4,16 @@
   align-content: start;
 }
 
-.rightOverviewColumn {
-  display: grid;
-  grid-auto-rows: max-content;
-  align-content: start;
-  min-height: 0;
-}
 
 .eventLogPanel {
   min-width: 0;
   border-top: 1px solid var(--cds-border-subtle);
 }
 
-.examStatusPanel {
-  display: grid;
-  border-bottom: 1px solid var(--cds-border-subtle);
-}
-
-.examStatusMatrix {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  border-bottom: 1px solid var(--cds-border-subtle);
-}
-
-.examStatusMetric {
-  display: grid;
-  gap: 0.375rem;
-  align-content: center;
-  min-height: 6.25rem;
-  padding: 1.25rem 1.5rem;
-  border-right: 1px solid var(--cds-border-subtle);
-}
-
-.examStatusMetric:last-child {
-  border-right: 0;
-}
-
-.examStatusMetric span,
-.examScheduleItem span {
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.examStatusMetric strong {
-  color: var(--cds-text-primary);
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.15;
-}
-
-.examProgressBlock {
-  display: grid;
-  gap: 0.875rem;
-  padding: 1.25rem 1.5rem 1.5rem;
-}
-
 .examProgressHeader {
   display: grid;
   gap: 0.5rem;
-}
-
-.examProgressTitle {
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.examProgressValue {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--cds-text-primary);
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.15;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  margin-bottom: 0.875rem;
 }
 
 .rightPanelProgressBar :global(.cds--progress-bar__track),
@@ -85,65 +21,10 @@
   height: 0.5rem;
 }
 
-.examScheduleGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  border-bottom: 1px solid var(--cds-border-subtle);
-}
-
-.examScheduleItem {
-  display: grid;
-  gap: 0.25rem;
-  align-content: center;
-  min-width: 0;
-  min-height: 5rem;
-  padding: 1.25rem 1.5rem;
-  border-right: 1px solid var(--cds-border-subtle);
-}
-
-.examScheduleItem:last-child {
-  border-right: 0;
-}
-
-.examScheduleItem strong {
-  overflow: visible;
-  color: var(--cds-text-primary);
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.15;
-  white-space: pre-line;
-}
-
-.panelHeader {
+.drilldownPanel {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
+  flex-direction: column;
   gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.panelHeader h3 {
-  margin: 0;
-  color: var(--cds-text-primary);
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.panelHeader p {
-  margin: 0.25rem 0 0;
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.panelGrid {
-  border: 1px solid var(--cds-border-subtle);
-}
-
-.drilldownTabPanel {
-  padding: 0;
-}
-
-.drilldownPanel {
   min-width: 0;
   padding: 1.25rem;
 }
@@ -152,54 +33,6 @@
   padding: 0;
 }
 
-.tabRow {
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  gap: 1rem;
-  border-bottom: 1px solid var(--cds-border-subtle);
-}
-
-.tabRow > :global(.cds--tabs) {
-  flex: 0 1 auto;
-  min-width: 0;
-}
-
-.tabRowToolbar {
-  display: flex;
-  flex: 0 1 auto;
-  align-items: stretch;
-  margin: 0 1rem;
-  max-width: 24rem;
-  width: 100%;
-  align-self: center;
-  border: 0;
-  background: transparent;
-}
-
-.tabRowToolbarActive {
-  border-color: transparent;
-}
-
-.tabRowSearch {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.tabRowSearch :global(.cds--search-input) {
-  border: none;
-  background: transparent;
-}
-
-.tabRowSearch :global(.cds--search-magnifier) {
-  inset-inline-start: 0.75rem;
-}
-
-.tabRowFilterMenu {
-  flex: 0 0 auto;
-  border-left: 0;
-}
-
 .emptyState {
   color: var(--cds-text-secondary);
 }
@@ -250,7 +83,6 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
-  margin: -0.25rem 0 1rem;
 }
 
 .participantCard {
@@ -325,9 +157,9 @@
   align-items: center;
   gap: 0.375rem;
   color: var(--cds-text-primary);
-  font-size: 1.25rem;
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
   font-weight: 600;
-  line-height: 1.2;
+  line-height: var(--cds-heading-03-line-height, 1.4);
 }
 
 .participantSingleMetric strong,
@@ -410,17 +242,6 @@
 }
 
 @media (max-width: 672px) {
-  .tabRow {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.5rem;
-  }
-
-  .tabRowToolbar {
-    margin: 0 1rem 0.5rem;
-    max-width: none;
-  }
-
   .participantDrawerBackdrop {
     display: none;
   }
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
index 14695a9c..5d00167e 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.test.tsx
@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { describe, expect, it, vi } from "vitest";
 import type { ContestParticipant } from "@/core/entities/contest.entity";
 import type { AdminOverviewDashboardData } from "@/features/contest/screens/admin/panels/adminOverviewDashboard.model";
+import type { InsightCardAction } from "./AdminInsightRail";
 import AdminOverviewCommandCenter from "./AdminOverviewCommandCenter";
 
 const participantDashboardState = vi.hoisted(() => ({
@@ -57,7 +58,21 @@ vi.mock("@/shared/contexts/ToastContext", () => ({
   useToast: () => ({ showToast: vi.fn() }),
 }));
 
+// Use a contest window that places "now" roughly in the middle so the
+// CountdownProgress component renders during-phase output deterministically.
+const COUNTDOWN_START = new Date(Date.now() - 60 * 60 * 1000).toISOString();
+const COUNTDOWN_END = new Date(Date.now() + 45 * 60 * 1000).toISOString();
+
 vi.mock("@/features/contest/contexts", () => ({
+  useContest: () => ({
+    contest: {
+      id: "contest-1",
+      name: "Mock Contest",
+      startTime: COUNTDOWN_START,
+      endTime: COUNTDOWN_END,
+    },
+    refreshContest: vi.fn(),
+  }),
   useContestAdmin: () => ({
     refreshAllAdminData: vi.fn(),
     refreshParticipants: vi.fn(),
@@ -186,7 +201,7 @@ const participants: ContestParticipant[] = [
   {
     userId: "1",
     username: "ming",
-    userDisplayName: "王小明",
+    displayName: "王小明",
     connectionStatus: "online",
     liveMonitoringOnline: true,
     score: 82,
@@ -198,7 +213,7 @@ const participants: ContestParticipant[] = [
   {
     userId: "2",
     username: "hua",
-    userDisplayName: "陳小華",
+    displayName: "陳小華",
     connectionStatus: "offline",
     score: 74,
     joinedAt: "2026-05-03T09:00:00+08:00",
@@ -217,12 +232,14 @@ describe("AdminOverviewCommandCenter", () => {
     adminLoading = false,
     gradingLoading = false,
     antiCheatEnabled = true,
+    gradingAction,
   }: {
     onOpenPanel?: (panel: string) => void;
     overrideData?: AdminOverviewDashboardData;
     adminLoading?: boolean;
     gradingLoading?: boolean;
     antiCheatEnabled?: boolean;
+    gradingAction?: InsightCardAction;
   } = {}) =>
     render(
       <AdminOverviewCommandCenter
@@ -234,7 +251,9 @@ describe("AdminOverviewCommandCenter", () => {
         onOpenPanel={onOpenPanel}
         participants={participants}
         primary={primary}
+        overviewInfo={{ contestTypeLabel: "考卷" }}
         questionStatsGallery={questionStatsGallery}
+        gradingAction={gradingAction}
       />,
     );
 
@@ -242,25 +261,40 @@ describe("AdminOverviewCommandCenter", () => {
     renderCommandCenter();
 
     expect(screen.getByText("競賽資訊")).toBeInTheDocument();
+    const contestInfo = screen.getByLabelText("競賽基本資訊");
+    expect(within(contestInfo).getByText("考卷題型")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("考卷")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("題目數量")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("12")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("開始時間")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("09:00")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("結束時間")).toBeInTheDocument();
+    expect(within(contestInfo).getByText("11:00")).toBeInTheDocument();
+    expect(
+      contestInfo.compareDocumentPosition(screen.getByText("考生列表")) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
     const examSummary = screen.getByLabelText("考試狀態摘要");
     expect(within(examSummary).getByText("考試人數")).toBeInTheDocument();
     expect(within(examSummary).getByText("2")).toBeInTheDocument();
     expect(within(examSummary).getByText("在線人數")).toBeInTheDocument();
     expect(within(examSummary).getByText("1")).toBeInTheDocument();
-    const examSchedule = within(examSummary).getByLabelText("考試時間");
-    expect(within(examSchedule).getByText("開始時間")).toBeInTheDocument();
-    expect(within(examSchedule).getByText("09:00")).toBeInTheDocument();
-    expect(within(examSchedule).getByText("結束時間")).toBeInTheDocument();
-    expect(within(examSchedule).getByText("11:00")).toBeInTheDocument();
-    expect(within(examSummary).getByText("倒數計時")).toBeInTheDocument();
-    expect(within(examSummary).getByText("剩餘 45:00")).toBeInTheDocument();
+    expect(within(examSummary).getByText("剩餘時間")).toBeInTheDocument();
     expect(screen.getAllByText("批改進度").length).toBeGreaterThan(0);
     expect(
       screen.getByRole("progressbar", { name: "時間進度" }),
-    ).toHaveAttribute("aria-valuenow", "62");
+    ).toBeInTheDocument();
     expect(screen.getAllByText("違規事件").length).toBeGreaterThan(0);
-    const distributionOverview = screen.getByLabelText("考試進度");
+    const distributionOverview = screen.getByLabelText("學生作答進度");
     expect(distributionOverview).toBeInTheDocument();
+    expect(
+      within(distributionOverview).getByTestId("proportional-meter-chart"),
+    ).toBeInTheDocument();
+    expect(
+      within(distributionOverview).queryByRole("progressbar", {
+        name: "作答進度",
+      }),
+    ).not.toBeInTheDocument();
     expect(
       within(distributionOverview).queryByText("離線"),
     ).not.toBeInTheDocument();
@@ -320,7 +354,7 @@ describe("AdminOverviewCommandCenter", () => {
   it("keeps only essential drilldown content in the left overview column", () => {
     renderCommandCenter();
 
-    expect(screen.getByLabelText("考試進度")).toBeInTheDocument();
+    expect(screen.getByLabelText("學生作答進度")).toBeInTheDocument();
     expect(screen.queryByText("auto_submit")).not.toBeInTheDocument();
     expect(screen.getByText("陳小華")).toBeInTheDocument();
     expect(screen.queryByText("競賽發布")).not.toBeInTheDocument();
@@ -333,6 +367,21 @@ describe("AdminOverviewCommandCenter", () => {
     expect(screen.queryByText("題目統計")).not.toBeInTheDocument();
   });
 
+  it("shows the publish results action under grading progress", async () => {
+    const onPublishResults = vi.fn();
+
+    renderCommandCenter({
+      gradingAction: {
+        label: "發布成績",
+        onClick: onPublishResults,
+      },
+    });
+
+    await userEvent.click(screen.getByRole("button", { name: "發布成績" }));
+
+    expect(onPublishResults).toHaveBeenCalledTimes(1);
+  });
+
   it("groups participants by status and switches the card metric", async () => {
     renderCommandCenter();
 
@@ -342,14 +391,14 @@ describe("AdminOverviewCommandCenter", () => {
     const lockedCard = screen.getByRole("button", { name: /王小明/ });
     expect(within(lockedCard).getByText("分數")).toBeInTheDocument();
     expect(within(lockedCard).getByText("82")).toBeInTheDocument();
-    expect(within(lockedCard).queryByText("違規")).not.toBeInTheDocument();
+    expect(within(lockedCard).queryByText("異常事件")).not.toBeInTheDocument();
     expect(within(lockedCard).getByText("@ming")).toBeInTheDocument();
     expect(within(lockedCard).getByText("在線")).toBeInTheDocument();
     const metricSwitch = screen.getByLabelText("考生卡片資料切換");
 
-    await userEvent.click(within(metricSwitch).getByText("違規"));
+    await userEvent.click(within(metricSwitch).getByText("異常事件"));
 
-    expect(within(lockedCard).getByText("違規")).toBeInTheDocument();
+    expect(within(lockedCard).getByText("異常事件")).toBeInTheDocument();
     expect(within(lockedCard).getByText("2")).toBeInTheDocument();
 
     await userEvent.click(within(metricSwitch).getByText("作答進度"));
@@ -427,7 +476,7 @@ describe("AdminOverviewCommandCenter", () => {
 
     expect(screen.getByLabelText("考生列表載入中")).toBeInTheDocument();
     expect(screen.getByLabelText("批改資料載入中")).toBeInTheDocument();
-    expect(screen.getByLabelText("考試進度")).toBeInTheDocument();
+    expect(screen.getByLabelText("學生作答進度")).toBeInTheDocument();
   });
 
   it("keeps generic panel entries out of the live dashboard", () => {
diff --git a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
index eda35555..cc138493 100644
--- a/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
+++ b/frontend/src/features/contest/components/admin/AdminOverviewCommandCenter.tsx
@@ -2,15 +2,8 @@ import {
   Button,
   OverflowMenu,
   OverflowMenuItem,
-  ProgressBar,
-  Search,
   SelectableTag,
   SkeletonText,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
 } from "@carbon/react";
 import {
   CheckmarkFilled,
@@ -44,6 +37,7 @@ import type {
 } from "@/core/entities/contest.entity";
 import AdminInsightRail, {
   PriorityEventsInsightCard,
+  type InsightCardAction,
 } from "@/features/contest/components/admin/AdminInsightRail";
 import AdminSegmentedDashboard from "@/features/contest/components/admin/AdminSegmentedDashboard";
 import ParticipantDashboardPane from "@/features/contest/components/participants/ParticipantDashboardPane";
@@ -53,7 +47,8 @@ import {
   EXAM_STATUS_LABELS,
   getExamStatusLabel,
 } from "@/features/contest/constants/examLabels";
-import { useContestAdmin } from "@/features/contest/contexts";
+import { useContest, useContestAdmin } from "@/features/contest/contexts";
+import { CountdownProgress } from "@/features/contest/components/CountdownProgress";
 import type { AdminPanelId } from "@/features/contest/modules/types";
 import useParticipantDashboard from "@/features/contest/screens/settings/participants/useParticipantDashboard";
 import ContestLogsScreen from "@/features/contest/screens/settings/ContestLogsScreen";
@@ -69,11 +64,24 @@ import {
 } from "@/infrastructure/api/repositories";
 import { useToast } from "@/shared/contexts/ToastContext";
 import { ConfirmModal, useConfirmModal } from "@/shared/ui/modal";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  DashboardToolbar,
+  MetricBlock,
+} from "@/shared/components/dashboard";
 import styles from "./AdminOverviewCommandCenter.module.scss";
 
 interface AdminOverviewCommandCenterProps {
   header?: ReactNode;
   data: AdminOverviewDashboardData;
+  overviewInfo?: {
+    contestTypeLabel: string;
+  };
   adminLoading?: boolean;
   gradingLoading?: boolean;
   contestId?: string;
@@ -85,14 +93,14 @@ interface AdminOverviewCommandCenterProps {
   primary: ReactNode;
   questionStatsGallery?: ReactNode;
   resultOverview?: ReactNode;
+  gradingAction?: InsightCardAction;
 }
 
 const isStudentParticipant = (participant: ContestParticipant) =>
   !participant.accountRole || participant.accountRole === "student";
 
-const displayName = (participant: ContestParticipant) =>
+const getProfileDisplayName = (participant: ContestParticipant) =>
   participant.displayName ||
-  participant.userDisplayName ||
   participant.username ||
   participant.userId;
 
@@ -152,11 +160,6 @@ const getParticipantStatusLabel = (participant: ContestParticipant) =>
   EXAM_STATUS_LABELS[participant.examStatus] ||
   participant.examStatus;
 
-const getStatusGroupLabel = (status: string) =>
-  getExamStatusLabel(status as ContestParticipant["examStatus"]) ||
-  EXAM_STATUS_LABELS[status as ContestParticipant["examStatus"]] ||
-  status;
-
 type ParticipantMetricKey =
   | "score"
   | "violations"
@@ -173,12 +176,25 @@ interface ParticipantMetricDisplay {
 
 const PARTICIPANT_METRIC_OPTIONS: Array<{
   key: ParticipantMetricKey;
-  label: string;
+  labelKey: string;
+  defaultLabel: string;
 }> = [
-  { key: "score", label: "分數" },
-  { key: "violations", label: "違規" },
-  { key: "answerProgress", label: "作答進度" },
-  { key: "gradingProgress", label: "批改進度" },
+  { key: "score", labelKey: "adminOverview.command.metric.score", defaultLabel: "分數" },
+  {
+    key: "violations",
+    labelKey: "adminOverview.command.metric.violations",
+    defaultLabel: "異常事件",
+  },
+  {
+    key: "answerProgress",
+    labelKey: "adminOverview.command.metric.answerProgress",
+    defaultLabel: "作答進度",
+  },
+  {
+    key: "gradingProgress",
+    labelKey: "adminOverview.command.metric.gradingProgress",
+    defaultLabel: "批改進度",
+  },
 ];
 
 const DATE_TIME_LABEL_REGEX = /^(\d{4}\/\d{2}\/\d{2})\s+(\d{2}:\d{2})$/;
@@ -212,66 +228,101 @@ type ParticipantStatusFilter =
 
 type FilterOption<TId extends string = string> = {
   id: TId;
-  label: string;
+  labelKey: string;
+  defaultLabel: string;
 };
 
 const PARTICIPANT_STATUS_FILTERS: FilterOption<ParticipantStatusFilter>[] = [
-  { id: "all", label: "全部狀態" },
-  { id: "needs_attention", label: "需要處理" },
-  { id: "in_progress", label: "作答中" },
-  { id: "submitted", label: "已交卷" },
-  { id: "not_started", label: "未開始" },
-  { id: "locked", label: "鎖定" },
-  { id: "paused", label: "暫停" },
+  { id: "all", labelKey: "adminOverview.command.filters.allStatuses", defaultLabel: "全部狀態" },
+  {
+    id: "needs_attention",
+    labelKey: "adminOverview.command.filters.needsAttention",
+    defaultLabel: "需要處理",
+  },
+  { id: "in_progress", labelKey: "examStatus.in_progress", defaultLabel: "作答中" },
+  { id: "submitted", labelKey: "examStatus.submitted", defaultLabel: "已交卷" },
+  { id: "not_started", labelKey: "examStatus.not_started", defaultLabel: "未開始" },
+  { id: "locked", labelKey: "examStatus.locked", defaultLabel: "鎖定" },
+  { id: "paused", labelKey: "examStatus.paused", defaultLabel: "暫停" },
 ];
 
 const QUESTION_KIND_FILTERS: FilterOption[] = [
-  { id: "all", label: "全部題型" },
-  { id: "single_choice", label: "單選題" },
-  { id: "multiple_choice", label: "多選題" },
-  { id: "true_false", label: "是非題" },
-  { id: "short_answer", label: "簡答題" },
-  { id: "essay", label: "申論題" },
+  { id: "all", labelKey: "adminOverview.command.filters.allQuestionTypes", defaultLabel: "全部題型" },
+  { id: "single_choice", labelKey: "common:questionType.label.single_choice", defaultLabel: "單選題" },
+  { id: "multiple_choice", labelKey: "common:questionType.label.multiple_choice", defaultLabel: "多選題" },
+  { id: "true_false", labelKey: "common:questionType.label.true_false", defaultLabel: "是非題" },
+  { id: "short_answer", labelKey: "common:questionType.label.short_answer", defaultLabel: "簡答題" },
+  { id: "essay", labelKey: "common:questionType.label.essay", defaultLabel: "申論題" },
 ];
 
-const getAnswerProgressMetric = (participant: ContestParticipant) => {
+type DashboardTranslate = (
+  key: string,
+  defaultValue: string,
+  values?: Record<string, string | number>,
+) => string;
+
+const getAnswerProgressMetric = (
+  participant: ContestParticipant,
+  tr: DashboardTranslate,
+) => {
   switch (participant.examStatus) {
     case "submitted":
-      return { value: "100%", detail: "已交卷" };
+      return { value: "100%", detail: tr("examStatus.submitted", "已交卷") };
     case "in_progress":
-      return { value: "進行中", detail: "作答中" };
+      return {
+        value: tr("adminOverview.command.metric.inProgress", "進行中"),
+        detail: tr("examStatus.in_progress", "作答中"),
+      };
     case "locked":
-      return { value: "中斷", detail: "已鎖定" };
+      return {
+        value: tr("adminOverview.command.metric.interrupted", "中斷"),
+        detail: tr("examStatus.locked", "已鎖定"),
+      };
     case "paused":
-      return { value: "暫停", detail: "已暫停" };
+      return {
+        value: tr("examStatus.paused", "暫停"),
+        detail: tr("adminOverview.command.metric.pausedDetail", "已暫停"),
+      };
     default:
-      return { value: "0%", detail: "未開始" };
+      return { value: "0%", detail: tr("examStatus.not_started", "未開始") };
   }
 };
 
-const getGradingProgressMetric = (participant: ContestParticipant) => {
+const getGradingProgressMetric = (
+  participant: ContestParticipant,
+  tr: DashboardTranslate,
+) => {
   if (participant.examStatus === "submitted") {
-    return { value: "已計分", detail: `${participant.score ?? 0} 分` };
+    return {
+      value: tr("adminOverview.command.metric.scored", "已計分"),
+      detail: tr("adminOverview.command.metric.scoreUnit", "{{score}} 分", {
+        score: participant.score ?? 0,
+      }),
+    };
   }
-  return { value: "未交卷", detail: getParticipantStatusLabel(participant) };
+  return {
+    value: tr("adminOverview.command.metric.notSubmitted", "未交卷"),
+    detail: getParticipantStatusLabel(participant),
+  };
 };
 
 const getParticipantMetric = (
   participant: ContestParticipant,
   metric: ParticipantMetricKey,
+  tr: DashboardTranslate,
 ): ParticipantMetricDisplay => {
   if (metric === "violations") {
     return {
-      label: "違規",
+      label: tr("adminOverview.command.metric.violations", "異常事件"),
       value: String(participant.violationCount ?? 0),
-      detail: "次",
+      detail: tr("adminOverview.command.metric.eventUnit", "次"),
       tone: (participant.violationCount ?? 0) > 0 ? "danger" : "neutral",
     };
   }
   if (metric === "answerProgress") {
     return {
-      label: "作答進度",
-      ...getAnswerProgressMetric(participant),
+      label: tr("adminOverview.command.metric.answerProgress", "作答進度"),
+      ...getAnswerProgressMetric(participant, tr),
       tone:
         participant.examStatus === "locked" ||
         participant.examStatus === "paused"
@@ -282,15 +333,15 @@ const getParticipantMetric = (
   }
   if (metric === "gradingProgress") {
     return {
-      label: "批改進度",
-      ...getGradingProgressMetric(participant),
+      label: tr("adminOverview.command.metric.gradingProgress", "批改進度"),
+      ...getGradingProgressMetric(participant, tr),
       tone: "neutral",
     };
   }
   return {
-    label: "分數",
+    label: tr("adminOverview.command.metric.score", "分數"),
     value: String(participant.score ?? 0),
-    detail: "分",
+    detail: tr("adminOverview.command.metric.pointUnit", "分"),
     tone: "neutral",
   };
 };
@@ -298,6 +349,7 @@ const getParticipantMetric = (
 export default function AdminOverviewCommandCenter({
   header,
   data,
+  overviewInfo,
   adminLoading = false,
   gradingLoading = false,
   contestId,
@@ -309,10 +361,28 @@ export default function AdminOverviewCommandCenter({
   primary,
   questionStatsGallery,
   resultOverview,
+  gradingAction,
 }: AdminOverviewCommandCenterProps) {
   const { t } = useTranslation("contest");
+  const tr = useCallback(
+    (
+      key: string,
+      defaultValue: string,
+      values?: Record<string, string | number>,
+    ) => {
+      const translated = values
+        ? t(key, { defaultValue, ...values })
+        : t(key, defaultValue);
+      if (typeof translated === "string") return translated;
+      return defaultValue.replace(/{{(\w+)}}/g, (_, name) =>
+        String(values?.[name] ?? ""),
+      );
+    },
+    [t],
+  );
   const { showToast } = useToast();
   const { confirm, modalProps: confirmModalProps } = useConfirmModal();
+  const { contest } = useContest();
   const { refreshAllAdminData, refreshParticipants, examEventsLoading } =
     useContestAdmin();
   const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
@@ -321,7 +391,8 @@ export default function AdminOverviewCommandCenter({
   const [participantSearch, setParticipantSearch] = useState("");
   const [participantStatusFilter, setParticipantStatusFilter] =
     useState<ParticipantStatusFilter>("all");
-  const [activePanelTab, setActivePanelTab] = useState(0);
+  const [activePanelTab, setActivePanelTab] =
+    useState<"participants" | "questionStats">("participants");
   const [questionStatsSearch, setQuestionStatsSearch] = useState("");
   const [questionStatsKindFilter, setQuestionStatsKindFilter] =
     useState<string>("all");
@@ -558,7 +629,10 @@ export default function AdminOverviewCommandCenter({
     .sort(
       (left, right) =>
         getParticipantSortScore(right) - getParticipantSortScore(left) ||
-        displayName(left).localeCompare(displayName(right), "zh-TW"),
+        getProfileDisplayName(left).localeCompare(
+          getProfileDisplayName(right),
+          "zh-TW",
+        ),
     );
   const filteredStudentParticipants = useMemo(() => {
     const normalizedQuery = participantSearch.trim().toLowerCase();
@@ -573,7 +647,7 @@ export default function AdminOverviewCommandCenter({
       }
       if (!normalizedQuery) return true;
       return [
-        displayName(participant),
+        getProfileDisplayName(participant),
         participant.username,
         participant.email,
         participant.lockReason,
@@ -606,14 +680,22 @@ export default function AdminOverviewCommandCenter({
       ? [
           {
             id: "needs_attention",
-            title: "需要處理",
+            title: tr(
+              "adminOverview.command.filters.needsAttention",
+              "需要處理",
+            ),
             participants: participantsNeedingAttention,
           },
         ]
       : []),
     ...statusGroupKeys.map((status) => ({
       id: status,
-      title: getStatusGroupLabel(status),
+      title: tr(
+        `examStatus.${status}`,
+        getExamStatusLabel(status as ContestParticipant["examStatus"]) ||
+          EXAM_STATUS_LABELS[status as ContestParticipant["examStatus"]] ||
+          status,
+      ),
       participants: normalParticipantsByStatus[status],
     })),
   ];
@@ -623,15 +705,19 @@ export default function AdminOverviewCommandCenter({
   ) => {
     setParticipantSearch(event.target.value);
   };
-  const isFilterActive = participantStatusFilter !== "all";
-  const isQuestionStatsFilterActive = questionStatsKindFilter !== "all";
   const participantMetricTags = (
-    <div className={styles.metricTagGroup} aria-label="考生卡片資料切換">
+    <div
+      className={styles.metricTagGroup}
+      aria-label={t(
+        "adminOverview.command.metricSwitcher",
+        "考生卡片資料切換",
+      )}
+    >
       {PARTICIPANT_METRIC_OPTIONS.map((option) => (
         <SelectableTag
           key={option.key}
           id={`participant-metric-${option.key}`}
-          text={option.label}
+          text={t(option.labelKey, option.defaultLabel)}
           selected={participantMetric === option.key}
           onChange={() => setParticipantMetric(option.key)}
           size="sm"
@@ -651,57 +737,74 @@ export default function AdminOverviewCommandCenter({
   const priorityEventsCard = insightCards.find(
     (card) => card.key === "priority_events",
   );
-  const examProgressPercent = Math.round(
-    Math.max(0, Math.min(100, data.timeline.progressPercent)),
-  );
-  const examProgressStatus =
-    examProgressPercent >= 100 ? "finished" : "active";
   const scheduleLabels = normalizeScheduleLabels(
     data.timeline.startDateTimeLabel,
     data.timeline.endDateTimeLabel,
   );
-  const examStatusSummary = (
-    <section className={styles.examStatusPanel} aria-label="考試狀態摘要">
-      <div className={styles.examStatusMatrix}>
-        <div className={styles.examStatusMetric}>
-          <span>考試人數</span>
-          <strong>{studentParticipants.length}</strong>
-        </div>
-        <div className={styles.examStatusMetric}>
-          <span>在線人數</span>
-          <strong>{liveStudentCount}</strong>
-        </div>
-      </div>
-      <div className={styles.examScheduleGrid} aria-label="考試時間">
-        <div className={styles.examScheduleItem}>
-          <span>開始時間</span>
-          <strong>{scheduleLabels.start}</strong>
-        </div>
-        <div className={styles.examScheduleItem}>
-          <span>結束時間</span>
-          <strong>{scheduleLabels.end}</strong>
-        </div>
-      </div>
-      <div className={styles.examProgressBlock}>
-        <div className={styles.examProgressHeader}>
-          <span className={styles.examProgressTitle}>倒數計時</span>
-          <strong className={styles.examProgressValue}>
-            {data.timeline.primaryTimeLabel}
-          </strong>
-        </div>
-        <ProgressBar
-          label={t(
-            "adminOverview.widgets.timelineProgress",
-            "時間進度",
-          )}
-          hideLabel
-          size="small"
-          value={examProgressPercent}
-          status={examProgressStatus}
-          className={styles.rightPanelProgressBar}
+  const contestInfoRow = (
+    <DashboardContainer
+      layout="grid"
+      columns={4}
+      dividers="auto"
+      ariaLabel={t("adminOverview.command.contestInfo", "競賽基本資訊")}
+    >
+      <DashboardBlock>
+        <MetricBlock
+          label={t("adminOverview.command.metrics.contestType", "考卷題型")}
+          value={overviewInfo?.contestTypeLabel ?? "—"}
+        />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock
+          label={t("adminOverview.command.metrics.questionCount", "題目數量")}
+          value={data.examStatus.workItemCount}
         />
-      </div>
-    </section>
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock
+          label={t("adminOverview.command.metrics.startTime", "開始時間")}
+          value={scheduleLabels.start}
+        />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock
+          label={t("adminOverview.command.metrics.endTime", "結束時間")}
+          value={scheduleLabels.end}
+        />
+      </DashboardBlock>
+    </DashboardContainer>
+  );
+  const examStatusSummary = (
+    <DashboardContainer
+      layout="stack"
+      dividers="auto"
+      ariaLabel={t("adminOverview.command.examStatusSummary", "考試狀態摘要")}
+    >
+      <DashboardContainer layout="grid" columns={2} dividers="auto">
+        <DashboardBlock>
+          <MetricBlock
+            label={t("adminOverview.command.metrics.examParticipants", "考試人數")}
+            value={studentParticipants.length}
+            size="lg"
+          />
+        </DashboardBlock>
+        <DashboardBlock>
+          <MetricBlock
+            label={t("adminOverview.command.metrics.onlineParticipants", "在線人數")}
+            value={liveStudentCount}
+            size="lg"
+          />
+        </DashboardBlock>
+      </DashboardContainer>
+      <DashboardBlock>
+        {contest ? (
+          <CountdownProgress
+            startTime={contest.startTime}
+            endTime={contest.endTime}
+          />
+        ) : null}
+      </DashboardBlock>
+    </DashboardContainer>
   );
   const selectedParticipant = selectedUserId
     ? participants.find((participant) => participant.userId === selectedUserId)
@@ -738,7 +841,10 @@ export default function AdminOverviewCommandCenter({
     />
   );
   const participantContent = adminLoading ? (
-    <div className={styles.participantGridSections} aria-label="考生列表載入中">
+    <div
+      className={styles.participantGridSections}
+      aria-label={t("adminOverview.command.participants.loading", "考生列表載入中")}
+    >
       {Array.from({ length: 8 }).map((_, index) => (
         <div className={styles.participantCard} key={index}>
           <SkeletonText heading width="60%" />
@@ -748,7 +854,9 @@ export default function AdminOverviewCommandCenter({
       ))}
     </div>
   ) : filteredStudentParticipants.length === 0 ? (
-    <div className={styles.emptyState}>目前沒有考生</div>
+    <div className={styles.emptyState}>
+      {t("adminOverview.command.participants.empty", "目前沒有考生")}
+    </div>
   ) : (
     <div className={styles.participantGridSections}>
       {participantGroups.map((group) => {
@@ -772,6 +880,7 @@ export default function AdminOverviewCommandCenter({
                 const metric = getParticipantMetric(
                   participant,
                   participantMetric,
+                  tr,
                 );
                 const MetricIcon = metric.icon;
                 return (
@@ -783,16 +892,22 @@ export default function AdminOverviewCommandCenter({
                   >
                     <div className={styles.participantCardHeader}>
                       <div className={styles.participantIdentity}>
-                        <strong>{displayName(participant)}</strong>
+                        <strong>{getProfileDisplayName(participant)}</strong>
                         <span>@{participant.username}</span>
                         <span className={styles.participantConnection}>
                           <span
                             className={
                               live ? styles.liveDot : styles.offlineDot
                             }
-                            aria-label={live ? "在線" : "離線"}
+                            aria-label={
+                              live
+                                ? t("adminOverview.command.connection.online", "在線")
+                                : t("adminOverview.command.connection.offline", "離線")
+                            }
                           />
-                          {live ? "在線" : "離線"}
+                          {live
+                            ? t("adminOverview.command.connection.online", "在線")
+                            : t("adminOverview.command.connection.offline", "離線")}
                         </span>
                       </div>
                       <div
@@ -819,53 +934,58 @@ export default function AdminOverviewCommandCenter({
   );
   const participantPanel = (
     <div className={styles.drilldownPanel}>
-      <div className={styles.panelHeader}>
-        <div>
-          <h3>考生列表</h3>
-          <p>依異常程度排序，快速掃描考生狀態。</p>
-        </div>
-      </div>
+      <BlockHeader
+        title={t("adminOverview.command.participants.title", "考生列表")}
+      />
       {participantMetricTags}
       {participantContent}
     </div>
   );
   const participantTabToolbar = (
-    <div
-      className={`${styles.tabRowToolbar} ${
-        isFilterActive ? styles.tabRowToolbarActive : ""
-      }`}
-    >
-      <Search
+    <DashboardToolbar>
+      <DashboardToolbar.Search
         id="overview-participants-search"
-        labelText="搜尋考生"
-        placeholder="搜尋姓名或使用者 ID..."
+        ariaLabel={t("adminOverview.command.participants.search", "搜尋考生")}
+        placeholder={t(
+          "adminOverview.command.participants.searchPlaceholder",
+          "搜尋顯示名稱或使用者名稱...",
+        )}
         value={participantSearch}
-        onChange={handleParticipantSearchChange}
+        onChange={(value) =>
+          handleParticipantSearchChange({
+            target: { value },
+          } as ChangeEvent<HTMLInputElement>)
+        }
         onClear={() => setParticipantSearch("")}
-        size="md"
-        className={styles.tabRowSearch}
       />
-      <OverflowMenu
-        renderIcon={Filter}
-        iconDescription="篩選狀態"
-        size="md"
-        flipped
-        className={styles.tabRowFilterMenu}
-        aria-label="篩選考生狀態"
-      >
-        {PARTICIPANT_STATUS_FILTERS.map((option) => (
-          <OverflowMenuItem
-            key={option.id}
-            itemText={
-              participantStatusFilter === option.id
-                ? `✓  ${option.label}`
-                : option.label
-            }
-            onClick={() => setParticipantStatusFilter(option.id)}
-          />
-        ))}
-      </OverflowMenu>
-    </div>
+      <DashboardToolbar.Filter>
+        <OverflowMenu
+          renderIcon={Filter}
+          iconDescription={t(
+            "adminOverview.command.participants.filterStatus",
+            "篩選狀態",
+          )}
+          size="md"
+          flipped
+          aria-label={t(
+            "adminOverview.command.participants.filterStatusAria",
+            "篩選考生狀態",
+          )}
+        >
+          {PARTICIPANT_STATUS_FILTERS.map((option) => (
+            <OverflowMenuItem
+              key={option.id}
+              itemText={
+                participantStatusFilter === option.id
+                  ? `✓  ${t(option.labelKey, option.defaultLabel)}`
+                  : t(option.labelKey, option.defaultLabel)
+              }
+              onClick={() => setParticipantStatusFilter(option.id)}
+            />
+          ))}
+        </OverflowMenu>
+      </DashboardToolbar.Filter>
+    </DashboardToolbar>
   );
   const questionStatsPanel = (
     <div className={`${styles.drilldownPanel} ${styles.drilldownPanelFlush}`}>
@@ -887,85 +1007,113 @@ export default function AdminOverviewCommandCenter({
             },
           )
         : questionStatsGallery ?? (
-        <div className={styles.emptyState}>目前沒有作答分佈資料</div>
+        <div className={styles.emptyState}>
+          {t(
+            "adminOverview.command.questionStats.empty",
+            "目前沒有作答分佈資料",
+          )}
+        </div>
       )}
     </div>
   );
   const questionStatsTabToolbar = (
-    <div
-      className={`${styles.tabRowToolbar} ${
-        isQuestionStatsFilterActive ? styles.tabRowToolbarActive : ""
-      }`}
-    >
-      <Search
+    <DashboardToolbar>
+      <DashboardToolbar.Search
         id="overview-question-stats-search"
-        labelText="搜尋題目"
-        placeholder="搜尋題號或題目..."
+        ariaLabel={t("adminOverview.command.questionStats.search", "搜尋題目")}
+        placeholder={t(
+          "adminOverview.command.questionStats.searchPlaceholder",
+          "搜尋題號或題目...",
+        )}
         value={questionStatsSearch}
-        onChange={(event) => setQuestionStatsSearch(event.target.value)}
+        onChange={setQuestionStatsSearch}
         onClear={() => setQuestionStatsSearch("")}
-        size="md"
-        className={styles.tabRowSearch}
       />
-      <OverflowMenu
-        renderIcon={Filter}
-        iconDescription="篩選題型"
-        size="md"
-        flipped
-        className={styles.tabRowFilterMenu}
-        aria-label="篩選題型"
-      >
-        {QUESTION_KIND_FILTERS.map((option) => (
-          <OverflowMenuItem
-            key={option.id}
-            itemText={
-              questionStatsKindFilter === option.id
-                ? `✓  ${option.label}`
-                : option.label
-            }
-            onClick={() => setQuestionStatsKindFilter(option.id)}
-          />
-        ))}
-      </OverflowMenu>
-    </div>
+      <DashboardToolbar.Filter>
+        <OverflowMenu
+          renderIcon={Filter}
+          iconDescription={t(
+            "adminOverview.command.questionStats.filterQuestionType",
+            "篩選題型",
+          )}
+          size="md"
+          flipped
+          aria-label={t(
+            "adminOverview.command.questionStats.filterQuestionTypeAria",
+            "篩選題型",
+          )}
+        >
+          {QUESTION_KIND_FILTERS.map((option) => (
+            <OverflowMenuItem
+              key={option.id}
+              itemText={
+                questionStatsKindFilter === option.id
+                  ? `✓  ${t(option.labelKey, option.defaultLabel)}`
+                  : t(option.labelKey, option.defaultLabel)
+              }
+              onClick={() => setQuestionStatsKindFilter(option.id)}
+            />
+          ))}
+        </OverflowMenu>
+      </DashboardToolbar.Filter>
+    </DashboardToolbar>
   );
   const drilldownPanel = (
-    <section className={styles.panelGrid} aria-label="總覽資料切換">
-      <Tabs
-        selectedIndex={activePanelTab}
-        onChange={({ selectedIndex }) => setActivePanelTab(selectedIndex)}
+    <DashboardBlock
+      padding="flush"
+      ariaLabel={t("adminOverview.command.drilldown.ariaLabel", "總覽資料切換")}
+    >
+      <DashboardTabs
+        activeId={activePanelTab}
+        onChange={(id) =>
+          setActivePanelTab(id as "participants" | "questionStats")
+        }
       >
-        <div className={styles.tabRow}>
-          <TabList aria-label="總覽資料切換">
-            <Tab>參與者</Tab>
-            <Tab>作答分佈</Tab>
-          </TabList>
-          {activePanelTab === 0 ? participantTabToolbar : questionStatsTabToolbar}
-        </div>
-        <TabPanels>
-          <TabPanel className={styles.drilldownTabPanel}>
-            {participantPanel}
-          </TabPanel>
-          <TabPanel className={styles.drilldownTabPanel}>
-            {questionStatsPanel}
-          </TabPanel>
-        </TabPanels>
-      </Tabs>
-    </section>
+        <DashboardTabBar
+          ariaLabel={t("adminOverview.command.drilldown.ariaLabel", "總覽資料切換")}
+          tabs={[
+            {
+              id: "participants",
+              label: t("adminOverview.command.drilldown.participants", "參與者"),
+            },
+            {
+              id: "questionStats",
+              label: t("adminOverview.command.drilldown.questionStats", "作答分佈"),
+            },
+          ]}
+          toolbar={
+            activePanelTab === "participants"
+              ? participantTabToolbar
+              : questionStatsTabToolbar
+          }
+        />
+        <DashboardTabPanel tabId="participants">
+          {participantPanel}
+        </DashboardTabPanel>
+        <DashboardTabPanel tabId="questionStats">
+          {questionStatsPanel}
+        </DashboardTabPanel>
+      </DashboardTabs>
+    </DashboardBlock>
   );
   return (
     <>
       <AdminSegmentedDashboard
-        ariaLabel="教師管理總覽"
+        ariaLabel={t("adminOverview.command.ariaLabel", "教師管理總覽")}
+        tabListAriaLabel={t(
+          "adminOverview.command.tabsAriaLabel",
+          "教師管理總覽分頁",
+        )}
         header={header}
         primary={
           <div className={styles.leftOverviewColumn}>
+            {contestInfoRow}
             {primary}
             {drilldownPanel}
           </div>
         }
         side={
-          <div className={styles.rightOverviewColumn}>
+          <DashboardContainer layout="stack" dividers="auto">
             {examStatusSummary}
             <AdminInsightRail
               cards={[]}
@@ -976,6 +1124,7 @@ export default function AdminOverviewCommandCenter({
             <AdminInsightRail
               cards={gradingInsightCards}
               loadingCardKeys={gradingLoading ? ["grading_progress"] : []}
+              gradingAction={gradingAction}
             />
             {resultOverview}
             <AdminInsightRail
@@ -986,14 +1135,17 @@ export default function AdminOverviewCommandCenter({
                   : []),
               ]}
             />
-            <section className={styles.eventLogPanel} aria-label="事件紀錄">
+            <section
+              className={styles.eventLogPanel}
+              aria-label={t("adminOverview.command.eventLog", "事件紀錄")}
+            >
               <PriorityEventsInsightCard
                 card={priorityEventsCard}
                 loading={adminLoading || examEventsLoading}
               />
               <ContestLogsScreen embedded />
             </section>
-          </div>
+          </DashboardContainer>
         }
       />
       <AnimatePresence>
@@ -1008,7 +1160,10 @@ export default function AdminOverviewCommandCenter({
             <motion.button
               type="button"
               className={styles.participantDrawerBackdrop}
-              aria-label="關閉學生詳細資訊背景"
+              aria-label={t(
+                "adminOverview.command.drawer.closeBackdrop",
+                "關閉學生詳細資訊背景",
+              )}
               onClick={() => setSelectedUserId(null)}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
@@ -1019,19 +1174,25 @@ export default function AdminOverviewCommandCenter({
               className={styles.participantDrawer}
               role="dialog"
               aria-modal="true"
-              aria-label="學生詳細資訊"
+              aria-label={t(
+                "adminOverview.command.drawer.ariaLabel",
+                "學生詳細資訊",
+              )}
               initial={{ x: 24, opacity: 0 }}
               animate={{ x: 0, opacity: 1 }}
               exit={{ x: 24, opacity: 0 }}
               transition={{ duration: 0.2, ease: "easeOut" }}
             >
               <div className={styles.participantDrawerToolbar}>
-                <h3>學生詳細資訊</h3>
+                <h3>{t("adminOverview.command.drawer.title", "學生詳細資訊")}</h3>
                 <Button
                   kind="ghost"
                   hasIconOnly
                   renderIcon={Close}
-                  iconDescription="關閉學生詳細資訊"
+                  iconDescription={t(
+                    "adminOverview.command.drawer.close",
+                    "關閉學生詳細資訊",
+                  )}
                   onClick={() => setSelectedUserId(null)}
                 />
               </div>
diff --git a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss
index ddbeafcf..b668d6ee 100644
--- a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss
+++ b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.module.scss
@@ -1,24 +1,3 @@
-.panelHeader {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.panelHeader h3 {
-  margin: 0;
-  color: var(--cds-text-primary);
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.panelHeader p {
-  margin: 0.25rem 0 0;
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
 .checklist {
   display: grid;
   gap: 0;
@@ -116,31 +95,14 @@
   font-weight: 600;
 }
 
-.entryGrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0;
-  border: 1px solid var(--cds-border-subtle);
-}
-
 .entryButton {
   width: 100%;
   max-width: none;
   min-height: 5.5rem;
   border: 0;
-  border-right: 1px solid var(--cds-border-subtle);
-  border-bottom: 1px solid var(--cds-border-subtle);
   text-align: left;
 }
 
-.entryButton:nth-child(2n) {
-  border-right: 0;
-}
-
-.entryButton:nth-last-child(-n + 2) {
-  border-bottom: 0;
-}
-
 .entryText {
   display: grid;
   gap: 0.125rem;
@@ -154,19 +116,7 @@
 }
 
 @media (max-width: 672px) {
-  .checklistItem,
-  .entryGrid {
+  .checklistItem {
     grid-template-columns: 1fr;
   }
-
-  .entryButton,
-  .entryButton:nth-child(2n),
-  .entryButton:nth-last-child(-n + 2) {
-    border-right: 0;
-    border-bottom: 1px solid var(--cds-border-subtle);
-  }
-
-  .entryButton:last-child {
-    border-bottom: 0;
-  }
 }
diff --git a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
index a9a6272f..4a57e617 100644
--- a/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
+++ b/frontend/src/features/contest/components/admin/AdminPreparationDashboard.tsx
@@ -16,6 +16,10 @@ import type {
   AdminPreparationDashboardData,
   PreparationReadinessState,
 } from "@/features/contest/screens/admin/panels/adminOverviewDashboard.model";
+import {
+  BlockHeader,
+  DashboardContainer,
+} from "@/shared/components/dashboard";
 import styles from "./AdminPreparationDashboard.module.scss";
 
 interface AdminPreparationDashboardProps {
@@ -96,6 +100,10 @@ export default function AdminPreparationDashboard({
   return (
     <AdminSegmentedDashboard
       ariaLabel={t("adminPreparationDashboard.ariaLabel", "準備與成績儀表板")}
+      tabListAriaLabel={t(
+        "adminPreparationDashboard.tabs.ariaLabel",
+        "準備與成績分頁",
+      )}
       primary={primary}
       side={<AdminInsightRail cards={data.insightCards} />}
       tabs={[
@@ -104,23 +112,17 @@ export default function AdminPreparationDashboard({
           label: t("adminPreparationDashboard.tabs.readiness", "準備狀態"),
           content: (
             <>
-              <div className={styles.panelHeader}>
-                <div>
-                  <h3>
-                    {t(
-                      "adminPreparationDashboard.readiness.title",
-                      "準備狀態",
-                    )}
-                  </h3>
-                  <p>
-                    {t(
-                      "adminPreparationDashboard.readiness.description",
-                      "非考試時段優先確認能否順利開考與收尾。",
-                    )}
-                  </p>
-                </div>
-                <TaskComplete size={18} />
-              </div>
+              <BlockHeader
+                title={t(
+                  "adminPreparationDashboard.readiness.title",
+                  "準備狀態",
+                )}
+                description={t(
+                  "adminPreparationDashboard.readiness.description",
+                  "非考試時段優先確認能否順利開考與收尾。",
+                )}
+                actions={<TaskComplete size={18} />}
+              />
               <ul className={styles.checklist}>
                 {data.checklistItems.map((item) => (
                   <li key={item.key} className={styles.checklistItem}>
@@ -143,23 +145,17 @@ export default function AdminPreparationDashboard({
           label: t("adminPreparationDashboard.tabs.grading", "批改與成績"),
           content: (
             <div className={styles.gradingPanel}>
-              <div className={styles.panelHeader}>
-                <div>
-                  <h3>
-                    {t(
-                      "adminPreparationDashboard.grading.title",
-                      "批改與成績",
-                    )}
-                  </h3>
-                  <p>
-                    {t(
-                      "adminPreparationDashboard.grading.description",
-                      "考後查看批改剩餘量與成績發布狀態。",
-                    )}
-                  </p>
-                </div>
-                <ChartBar size={18} />
-              </div>
+              <BlockHeader
+                title={t(
+                  "adminPreparationDashboard.grading.title",
+                  "批改與成績",
+                )}
+                description={t(
+                  "adminPreparationDashboard.grading.description",
+                  "考後查看批改剩餘量與成績發布狀態。",
+                )}
+                actions={<ChartBar size={18} />}
+              />
               <div
                 className={styles.progressTrack}
                 role="progressbar"
@@ -218,7 +214,12 @@ export default function AdminPreparationDashboard({
           key: "entries",
           label: t("adminPreparationDashboard.tabs.entries", "管理入口"),
           content: (
-            <div className={styles.entryGrid}>
+            <DashboardContainer
+              layout="grid"
+              columns={2}
+              bordered
+              dividers="auto"
+            >
               {panelEntries.map((entry) => {
                 const Icon = entry.icon;
                 return (
@@ -236,7 +237,7 @@ export default function AdminPreparationDashboard({
                   </Button>
                 );
               })}
-            </div>
+            </DashboardContainer>
           ),
         },
       ]}
diff --git a/frontend/src/features/contest/components/admin/AdminSegmentedDashboard.tsx b/frontend/src/features/contest/components/admin/AdminSegmentedDashboard.tsx
index 5d5fbf9b..d993f01e 100644
--- a/frontend/src/features/contest/components/admin/AdminSegmentedDashboard.tsx
+++ b/frontend/src/features/contest/components/admin/AdminSegmentedDashboard.tsx
@@ -10,6 +10,7 @@ export interface AdminSegmentedDashboardTab {
 
 interface AdminSegmentedDashboardProps {
   ariaLabel: string;
+  tabListAriaLabel?: string;
   header?: ReactNode;
   primary: ReactNode;
   side: ReactNode;
@@ -18,6 +19,7 @@ interface AdminSegmentedDashboardProps {
 
 export default function AdminSegmentedDashboard({
   ariaLabel,
+  tabListAriaLabel,
   header,
   primary,
   side,
@@ -33,7 +35,7 @@ export default function AdminSegmentedDashboard({
       {tabs && tabs.length > 0 ? (
         <div className={styles.tabsPanel}>
           <Tabs>
-            <TabList aria-label={`${ariaLabel} 分頁`}>
+            <TabList aria-label={tabListAriaLabel ?? ariaLabel}>
               {tabs.map((tab) => (
                 <Tab key={tab.key}>{tab.label}</Tab>
               ))}
diff --git a/frontend/src/features/contest/components/admin/DraftChecklistPanel.module.scss b/frontend/src/features/contest/components/admin/DraftChecklistPanel.module.scss
index 62532882..a03fc0ab 100644
--- a/frontend/src/features/contest/components/admin/DraftChecklistPanel.module.scss
+++ b/frontend/src/features/contest/components/admin/DraftChecklistPanel.module.scss
@@ -5,24 +5,6 @@
   margin-bottom: 1rem;
 }
 
-.header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.subtitle {
-  margin: 0;
-  color: var(--cds-text-secondary);
-  font-size: 0.875rem;
-}
-
 .checkList {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/features/contest/components/admin/DraftChecklistPanel.tsx b/frontend/src/features/contest/components/admin/DraftChecklistPanel.tsx
index 74593d82..739ee353 100644
--- a/frontend/src/features/contest/components/admin/DraftChecklistPanel.tsx
+++ b/frontend/src/features/contest/components/admin/DraftChecklistPanel.tsx
@@ -7,6 +7,7 @@ import {
 } from "@carbon/react";
 import { useTranslation } from "react-i18next";
 import type { ContestDetail } from "@/core/entities/contest.entity";
+import { BlockHeader } from "@/shared/components/dashboard";
 import styles from "./DraftChecklistPanel.module.scss";
 
 type ChecklistStatus = "done" | "suggest" | "missing";
@@ -130,34 +131,32 @@ export default function DraftChecklistPanel({
 
   return (
     <Tile className={styles.panel}>
-      <div className={styles.header}>
-        <h3 className={styles.title}>
-          {t("adminOverview.draftChecklist.title", "發布前 Checklist")}
-        </h3>
-        <p className={styles.subtitle}>
-          {t(
-            "adminOverview.draftChecklist.subtitle",
-            "發布不會被阻擋；以下項目可協助你在發布前把競賽設定更完整",
-          )}
-        </p>
-        <Button
-          kind="primary"
-          size="sm"
-          disabled={publishLoading}
-          onClick={() => {
-            void (async () => {
-              setPublishLoading(true);
-              try {
-                await onPublishContest();
-              } finally {
-                setPublishLoading(false);
-              }
-            })();
-          }}
-        >
-          {t("adminOverview.actions.publishContest", "發布競賽")}
-        </Button>
-      </div>
+      <BlockHeader
+        title={t("adminOverview.draftChecklist.title", "發布前 Checklist")}
+        description={t(
+          "adminOverview.draftChecklist.subtitle",
+          "發布不會被阻擋；以下項目可協助你在發布前把競賽設定更完整",
+        )}
+        actions={
+          <Button
+            kind="primary"
+            size="sm"
+            disabled={publishLoading}
+            onClick={() => {
+              void (async () => {
+                setPublishLoading(true);
+                try {
+                  await onPublishContest();
+                } finally {
+                  setPublishLoading(false);
+                }
+              })();
+            }}
+          >
+            {t("adminOverview.actions.publishContest", "發布競賽")}
+          </Button>
+        }
+      />
 
       {loading && (
         <InlineNotification
diff --git a/frontend/src/features/contest/components/admin/OverviewActionWidgets.module.scss b/frontend/src/features/contest/components/admin/OverviewActionWidgets.module.scss
index 0aae5898..9c64ac13 100644
--- a/frontend/src/features/contest/components/admin/OverviewActionWidgets.module.scss
+++ b/frontend/src/features/contest/components/admin/OverviewActionWidgets.module.scss
@@ -11,19 +11,6 @@
   gap: 0.75rem;
 }
 
-.title {
-  margin: 0;
-  font-size: var(--cds-body-02-font-size, 1rem);
-  font-weight: 600;
-  color: var(--cds-text-primary);
-}
-
-.subtitle {
-  margin: 0;
-  font-size: var(--cds-label-01-font-size, 0.75rem);
-  color: var(--cds-text-secondary);
-}
-
 .grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -48,14 +35,6 @@
   color: var(--cds-text-secondary);
 }
 
-.widgetTitle {
-  margin: 0;
-  font-size: var(--cds-label-01-font-size, 0.75rem);
-  font-weight: 500;
-  line-height: 1.2;
-  color: var(--cds-text-primary);
-}
-
 .widgetUnit {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: 400;
diff --git a/frontend/src/features/contest/components/admin/OverviewActionWidgets.tsx b/frontend/src/features/contest/components/admin/OverviewActionWidgets.tsx
index 3ace7879..a9d97e09 100644
--- a/frontend/src/features/contest/components/admin/OverviewActionWidgets.tsx
+++ b/frontend/src/features/contest/components/admin/OverviewActionWidgets.tsx
@@ -23,6 +23,7 @@ import {
   calculateContestTimeProgressAt,
   formatDuration,
 } from "./overviewMetrics.utils";
+import { BlockHeader, SectionTitle } from "@/shared/components/dashboard";
 import styles from "./OverviewActionWidgets.module.scss";
 
 interface OverviewActionWidgetsProps {
@@ -208,8 +209,13 @@ export default function OverviewActionWidgets({
     return (
       <section className={styles.section}>
         <div className={styles.header}>
-          <h3 className={styles.title}>{t("adminOverview.widgets.title", "控制台")}</h3>
-          <p className={styles.subtitle}>{t("adminOverview.widgets.subtitle", "快速進入設定、題目與狀態操作")}</p>
+          <BlockHeader
+            title={t("adminOverview.widgets.title", "控制台")}
+            description={t(
+              "adminOverview.widgets.subtitle",
+              "快速進入設定、題目與狀態操作",
+            )}
+          />
         </div>
         <div className={styles.grid}>
           {Array.from({ length: 4 }).map((_, i) => (
@@ -246,8 +252,13 @@ export default function OverviewActionWidgets({
   return (
     <section className={styles.section}>
       <div className={styles.header}>
-        <h3 className={styles.title}>{t("adminOverview.widgets.title", "控制台")}</h3>
-        <p className={styles.subtitle}>{t("adminOverview.widgets.subtitle", "快速進入設定、題目與狀態操作")}</p>
+        <BlockHeader
+          title={t("adminOverview.widgets.title", "控制台")}
+          description={t(
+            "adminOverview.widgets.subtitle",
+            "快速進入設定、題目與狀態操作",
+          )}
+        />
       </div>
 
       <div className={styles.grid}>
@@ -353,7 +364,7 @@ export default function OverviewActionWidgets({
           <div className={styles.progressHeader}>
             <div className={styles.progressTitleRow}>
               <Time size={16} className={styles.widgetIcon} />
-              <h3 className={styles.widgetTitle}>{t("adminOverview.widgets.examProgress", "考試進度")}</h3>
+              <SectionTitle as="h3">{t("adminOverview.widgets.examProgress", "考試進度")}</SectionTitle>
             </div>
             <span className={styles.progressPercent}>
               {!hasSchedule
diff --git a/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.module.scss b/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.module.scss
index cfceed4f..ae23095e 100644
--- a/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.module.scss
+++ b/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.module.scss
@@ -5,13 +5,6 @@
   gap: 0.75rem;
 }
 
-.title {
-  margin: 0;
-  font-size: var(--cds-body-02-font-size, 1rem);
-  font-weight: 600;
-  color: var(--cds-text-primary);
-}
-
 .statsGrid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
diff --git a/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.tsx b/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.tsx
index a00f4e13..01a6c14a 100644
--- a/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.tsx
+++ b/frontend/src/features/contest/components/admin/OverviewEventSummaryPanel.tsx
@@ -9,6 +9,7 @@ import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import type { ExamEvent } from "@/core/entities/contest.entity";
 import { getEventPriority } from "@/features/contest/constants/eventTaxonomy";
+import { SectionTitle } from "@/shared/components/dashboard";
 import styles from "./OverviewEventSummaryPanel.module.scss";
 
 interface OverviewEventSummaryPanelProps {
@@ -71,9 +72,9 @@ export default function OverviewEventSummaryPanel({
   if (loading) {
     return (
       <section className={styles.section}>
-        <h3 className={styles.title}>
+        <SectionTitle as="h3">
           {t("adminOverview.events.title", "事件摘要")}
-        </h3>
+        </SectionTitle>
         <div className={styles.statsGrid}>
           {Array.from({ length: 4 }).map((_, i) => (
             <Tile key={i} className={styles.statTile}>
@@ -94,9 +95,9 @@ export default function OverviewEventSummaryPanel({
 
   return (
     <section className={styles.section}>
-      <h3 className={styles.title}>
+      <SectionTitle as="h3">
         {t("adminOverview.events.title", "事件摘要")}
-      </h3>
+      </SectionTitle>
 
       <div className={styles.statsGrid}>
         {[
diff --git a/frontend/src/features/contest/components/admin/OverviewInsightsPanel.module.scss b/frontend/src/features/contest/components/admin/OverviewInsightsPanel.module.scss
index eeb4d3b1..353f3609 100644
--- a/frontend/src/features/contest/components/admin/OverviewInsightsPanel.module.scss
+++ b/frontend/src/features/contest/components/admin/OverviewInsightsPanel.module.scss
@@ -21,13 +21,6 @@
   }
 }
 
-.title {
-  margin: 0;
-  font-size: var(--cds-body-02-font-size, 1rem);
-  font-weight: 600;
-  color: var(--cds-text-primary);
-}
-
 .tile {
   border: 1px solid var(--cds-border-subtle);
   padding: 0.875rem;
diff --git a/frontend/src/features/contest/components/admin/OverviewInsightsPanel.tsx b/frontend/src/features/contest/components/admin/OverviewInsightsPanel.tsx
index 03538c1b..d2343a6d 100644
--- a/frontend/src/features/contest/components/admin/OverviewInsightsPanel.tsx
+++ b/frontend/src/features/contest/components/admin/OverviewInsightsPanel.tsx
@@ -10,6 +10,7 @@ import {
   formatDuration,
   calculateContestTimeProgressAt,
 } from "./overviewMetrics.utils";
+import { SectionTitle } from "@/shared/components/dashboard";
 import styles from "./OverviewInsightsPanel.module.scss";
 
 interface OverviewInsightsPanelProps {
@@ -130,9 +131,9 @@ export default function OverviewInsightsPanel({
   if (loading) {
     return (
       <aside className={styles.panel}>
-        <h3 className={styles.title}>
+        <SectionTitle as="h3">
           {t("adminOverview.sidebar.title", "狀態與入口")}
-        </h3>
+        </SectionTitle>
         {Array.from({ length: 3 }).map((_, i) => (
           <Tile key={i} className={styles.tile}>
             <SkeletonText width="50%" />
@@ -147,9 +148,9 @@ export default function OverviewInsightsPanel({
 
   return (
     <aside className={styles.panel}>
-      <h3 className={styles.title}>
+      <SectionTitle as="h3">
         {t("adminOverview.sidebar.title", "狀態與入口")}
-      </h3>
+      </SectionTitle>
 
       <Tile className={styles.tile}>
         <div className={styles.tileHeader}>
diff --git a/frontend/src/features/contest/components/admin/StudentStatusBreakdown.module.scss b/frontend/src/features/contest/components/admin/StudentStatusBreakdown.module.scss
index 96787f63..84f86641 100644
--- a/frontend/src/features/contest/components/admin/StudentStatusBreakdown.module.scss
+++ b/frontend/src/features/contest/components/admin/StudentStatusBreakdown.module.scss
@@ -10,13 +10,6 @@
   justify-content: space-between;
 }
 
-.title {
-  margin: 0;
-  font-size: var(--cds-body-02-font-size, 1rem);
-  font-weight: 600;
-  color: var(--cds-text-primary);
-}
-
 .grid {
   --status-columns: 4;
   display: flex;
diff --git a/frontend/src/features/contest/components/admin/StudentStatusBreakdown.tsx b/frontend/src/features/contest/components/admin/StudentStatusBreakdown.tsx
index 10772d1d..78037fdc 100644
--- a/frontend/src/features/contest/components/admin/StudentStatusBreakdown.tsx
+++ b/frontend/src/features/contest/components/admin/StudentStatusBreakdown.tsx
@@ -7,6 +7,7 @@ import {
 } from "@carbon/icons-react";
 import { useTranslation } from "react-i18next";
 import type { ParticipantStatusKpi } from "@/features/contest/screens/admin/participantStatusKpi";
+import { SectionTitle } from "@/shared/components/dashboard";
 import styles from "./StudentStatusBreakdown.module.scss";
 
 interface StudentStatusBreakdownProps {
@@ -32,7 +33,7 @@ export default function StudentStatusBreakdown({
   return (
     <div className={styles.section}>
       <div className={styles.header}>
-        <h3 className={styles.title}>{t("studentStatus.title", "學生狀態分佈")}</h3>
+        <SectionTitle as="h3">{t("studentStatus.title", "學生狀態分佈")}</SectionTitle>
       </div>
 
       <div className={styles.grid}>
diff --git a/frontend/src/features/contest/components/admin/examEditor/hooks/useExamAutoSave.ts b/frontend/src/features/contest/components/admin/examEditor/hooks/useExamAutoSave.ts
index c05c0232..fb2ec230 100644
--- a/frontend/src/features/contest/components/admin/examEditor/hooks/useExamAutoSave.ts
+++ b/frontend/src/features/contest/components/admin/examEditor/hooks/useExamAutoSave.ts
@@ -46,7 +46,6 @@ const FIELD_NAME_MAP: Record<string, keyof ContestUpdatePayload> = {
   warningTimeoutSeconds: "warningTimeoutSeconds",
   screenShareRecoveryGraceMs: "screenShareRecoveryGraceMs",
   scoreboardVisibleDuringContest: "scoreboardVisibleDuringContest",
-  anonymousModeEnabled: "anonymousModeEnabled",
   maxCheatWarnings: "maxCheatWarnings",
   allowMultipleJoins: "allowMultipleJoins",
   allowAutoUnlock: "allowAutoUnlock",
diff --git a/frontend/src/features/contest/components/admin/settings/ContestSettingsModal.stories.tsx b/frontend/src/features/contest/components/admin/settings/ContestSettingsModal.stories.tsx
index 079950ed..82cb23fd 100644
--- a/frontend/src/features/contest/components/admin/settings/ContestSettingsModal.stories.tsx
+++ b/frontend/src/features/contest/components/admin/settings/ContestSettingsModal.stories.tsx
@@ -31,7 +31,6 @@ function useFormState() {
     warningTimeoutSeconds: mockContest.warningTimeoutSeconds,
     screenShareRecoveryGraceMs: mockContest.screenShareRecoveryGraceMs,
     scoreboardVisibleDuringContest: mockContest.scoreboardVisibleDuringContest,
-    anonymousModeEnabled: mockContest.anonymousModeEnabled,
     allowMultipleJoins: mockContest.allowMultipleJoins,
     maxCheatWarnings: mockContest.maxCheatWarnings,
     allowAutoUnlock: mockContest.allowAutoUnlock,
@@ -188,7 +187,7 @@ export const Display: Story = {
   parameters: {
     docs: {
       description: {
-        story: "顯示設定 panel：排行榜可見性、匿名模式。",
+        story: "顯示設定 panel：排行榜可見性。",
       },
     },
   },
diff --git a/frontend/src/features/contest/components/admin/settings/DisplaySettingsPanel.tsx b/frontend/src/features/contest/components/admin/settings/DisplaySettingsPanel.tsx
index 4d63f360..04aee1df 100644
--- a/frontend/src/features/contest/components/admin/settings/DisplaySettingsPanel.tsx
+++ b/frontend/src/features/contest/components/admin/settings/DisplaySettingsPanel.tsx
@@ -32,22 +32,6 @@ export default function DisplaySettingsPanel({
         />
       </ActionRow>
 
-      <ActionRow
-        label={t("settings.anonymousMode")}
-        description={t("settings.anonymousModeHelp")}
-        saveState={getState("anonymousModeEnabled")}
-        onRetry={() => onRetry("anonymousModeEnabled")}
-      >
-        <Toggle
-          id="settings-anonymous"
-          labelText=""
-          hideLabel
-          labelA={tc("toggle.off")}
-          labelB={tc("toggle.on")}
-          toggled={(form.anonymousModeEnabled as boolean) ?? false}
-          onToggle={(checked) => onChange("anonymousModeEnabled", checked)}
-        />
-      </ActionRow>
     </Section>
   );
 }
diff --git a/frontend/src/features/contest/components/admin/statistics/ContestResultDashboardPanel.tsx b/frontend/src/features/contest/components/admin/statistics/ContestResultDashboardPanel.tsx
index b6b1a7e1..881ab790 100644
--- a/frontend/src/features/contest/components/admin/statistics/ContestResultDashboardPanel.tsx
+++ b/frontend/src/features/contest/components/admin/statistics/ContestResultDashboardPanel.tsx
@@ -930,7 +930,6 @@ function OptionDistributionList({
     participants: Array<{
       participantId: number;
       username: string;
-      nickname: string | null;
       displayName: string;
     }>;
   }>;
@@ -1330,7 +1329,6 @@ function formatAnswerContent(
 type ObjectiveParticipantRow = {
   participantId: number;
   username: string;
-  nickname: string | null;
   displayName: string;
   isOmitted: boolean;
   selectedOptions: string[];
diff --git a/frontend/src/features/contest/components/admin/statistics/QuestionStatisticsDetail.tsx b/frontend/src/features/contest/components/admin/statistics/QuestionStatisticsDetail.tsx
index 8610514a..c4e33e4c 100644
--- a/frontend/src/features/contest/components/admin/statistics/QuestionStatisticsDetail.tsx
+++ b/frontend/src/features/contest/components/admin/statistics/QuestionStatisticsDetail.tsx
@@ -86,7 +86,7 @@ export default function QuestionStatisticsDetail({
             {(stat.subjectiveEntries ?? []).map((entry, idx) => (
               <AccordionItem
                 key={idx}
-                title={`${entry.studentNickname} — ${
+                title={`${entry.studentDisplayName} — ${
                   entry.score !== null
                     ? t("statistics.scoreUnit", "{{score}} 分", {
                         score: entry.score,
diff --git a/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.mock.ts b/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.mock.ts
index 21d69174..e2cbb6f5 100644
--- a/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.mock.ts
+++ b/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.mock.ts
@@ -57,7 +57,6 @@ interface BaseQuestionDetailMock {
   responses: Array<{
     participantId: number;
     username: string;
-    nickname: string | null;
     displayName: string;
     score: number | null;
     gradedAt: string | null;
@@ -77,7 +76,6 @@ export type QuestionDetailMock =
         participants: Array<{
           participantId: number;
           username: string;
-          nickname: string | null;
           displayName: string;
         }>;
       }>;
@@ -85,7 +83,6 @@ export type QuestionDetailMock =
       omittedParticipants?: Array<{
         participantId: number;
         username: string;
-        nickname: string | null;
         displayName: string;
       }>;
     })
@@ -246,21 +243,21 @@ export function createContestResultDashboardMock(
       kind: "single_choice",
       scoreBands: makeScoreBands([1, 2, 5, 8, 12, 20], 2),
       responses: [
-        { participantId: 1, username: "amy", nickname: "Amy", displayName: "Amy", score: 10, gradedAt: "2026-04-01T01:00:00.000Z", feedback: "", answer: { selected: "B" } },
-        { participantId: 2, username: "ben", nickname: null, displayName: "ben", score: 0, gradedAt: "2026-04-01T01:01:00.000Z", feedback: "", answer: { selected: "A" } },
+        { participantId: 1, username: "amy", displayName: "Amy", score: 10, gradedAt: "2026-04-01T01:00:00.000Z", feedback: "", answer: { selected: "B" } },
+        { participantId: 2, username: "ben", displayName: "ben", score: 0, gradedAt: "2026-04-01T01:01:00.000Z", feedback: "", answer: { selected: "A" } },
       ],
       optionDistribution: [
-        { label: "A. 編譯器在執行期做最佳化", count: 6, percent: 13, isCorrect: false, participants: [{ participantId: 2, username: "ben", nickname: null, displayName: "ben" }] },
-        { label: "B. 變數作用域由區塊決定", count: 24, percent: 50, isCorrect: true, participants: [{ participantId: 1, username: "amy", nickname: "Amy", displayName: "Amy" }] },
+        { label: "A. 編譯器在執行期做最佳化", count: 6, percent: 13, isCorrect: false, participants: [{ participantId: 2, username: "ben", displayName: "ben" }] },
+        { label: "B. 變數作用域由區塊決定", count: 24, percent: 50, isCorrect: true, participants: [{ participantId: 1, username: "amy", displayName: "Amy" }] },
         { label: "C. 遞迴一定比迴圈慢", count: 14, percent: 29, isCorrect: false, participants: [] },
         { label: "D. 陣列長度可在執行期改變", count: 2, percent: 4, isCorrect: false, participants: [] },
       ],
       omittedCount: 4,
       omittedParticipants: [
-        { participantId: 101, username: "amy", nickname: "Amy", displayName: "Amy" },
-        { participantId: 102, username: "ben", nickname: null, displayName: "ben" },
-        { participantId: 103, username: "carol", nickname: "Carol", displayName: "Carol" },
-        { participantId: 104, username: "derek", nickname: null, displayName: "derek" },
+        { participantId: 101, username: "amy", displayName: "Amy" },
+        { participantId: 102, username: "ben", displayName: "ben" },
+        { participantId: 103, username: "carol", displayName: "Carol" },
+        { participantId: 104, username: "derek", displayName: "derek" },
       ],
     },
     q2: {
@@ -268,8 +265,8 @@ export function createContestResultDashboardMock(
       kind: "essay",
       scoreBands: makeScoreBands([5, 8, 14, 11, 9], 3),
       responses: [
-        { participantId: 11, username: "amy", nickname: "Amy", displayName: "Amy", score: 12, gradedAt: "2026-04-01T01:10:00.000Z", feedback: "", answer: { text: "程序有獨立位址空間；執行緒共享資源。" } },
-        { participantId: 12, username: "ben", nickname: null, displayName: "ben", score: null, gradedAt: null, feedback: "", answer: { text: "待批改作答內容。" } },
+        { participantId: 11, username: "amy", displayName: "Amy", score: 12, gradedAt: "2026-04-01T01:10:00.000Z", feedback: "", answer: { text: "程序有獨立位址空間；執行緒共享資源。" } },
+        { participantId: 12, username: "ben", displayName: "ben", score: null, gradedAt: null, feedback: "", answer: { text: "待批改作答內容。" } },
       ],
       gradingProgress: { graded: 29, total: 47 },
     },
@@ -278,7 +275,7 @@ export function createContestResultDashboardMock(
       kind: "short_answer",
       scoreBands: makeScoreBands([3, 7, 14, 16, 7], 2),
       responses: [
-        { participantId: 21, username: "carol", nickname: "Carol", displayName: "Carol", score: 8, gradedAt: "2026-04-01T01:20:00.000Z", feedback: "", answer: { text: "O(n log n)" } },
+        { participantId: 21, username: "carol", displayName: "Carol", score: 8, gradedAt: "2026-04-01T01:20:00.000Z", feedback: "", answer: { text: "O(n log n)" } },
       ],
       gradingProgress: { graded: 47, total: 47 },
     },
@@ -287,17 +284,17 @@ export function createContestResultDashboardMock(
       kind: "multiple_choice",
       scoreBands: makeScoreBands([6, 5, 10, 16, 12], 3),
       responses: [
-        { participantId: 31, username: "eva", nickname: "Eva", displayName: "Eva", score: 15, gradedAt: "2026-04-01T01:30:00.000Z", feedback: "", answer: { selected: ["A", "B", "D"] } },
+        { participantId: 31, username: "eva", displayName: "Eva", score: 15, gradedAt: "2026-04-01T01:30:00.000Z", feedback: "", answer: { selected: ["A", "B", "D"] } },
       ],
       optionDistribution: [
-        { label: "A. Stack 適合 DFS", count: 34, percent: 69, isCorrect: true, participants: [{ participantId: 31, username: "eva", nickname: "Eva", displayName: "Eva" }] },
-        { label: "B. Queue 適合 BFS", count: 33, percent: 67, isCorrect: true, participants: [{ participantId: 31, username: "eva", nickname: "Eva", displayName: "Eva" }] },
+        { label: "A. Stack 適合 DFS", count: 34, percent: 69, isCorrect: true, participants: [{ participantId: 31, username: "eva", displayName: "Eva" }] },
+        { label: "B. Queue 適合 BFS", count: 33, percent: 67, isCorrect: true, participants: [{ participantId: 31, username: "eva", displayName: "Eva" }] },
         { label: "C. HashMap 保持排序", count: 21, percent: 43, isCorrect: false, participants: [] },
-        { label: "D. Heap 可維護極值", count: 30, percent: 61, isCorrect: true, participants: [{ participantId: 31, username: "eva", nickname: "Eva", displayName: "Eva" }] },
+        { label: "D. Heap 可維護極值", count: 30, percent: 61, isCorrect: true, participants: [{ participantId: 31, username: "eva", displayName: "Eva" }] },
       ],
       omittedCount: 1,
       omittedParticipants: [
-        { participantId: 105, username: "eva", nickname: "Eva", displayName: "Eva" },
+        { participantId: 105, username: "eva", displayName: "Eva" },
       ],
     },
     q5: {
@@ -305,7 +302,7 @@ export function createContestResultDashboardMock(
       kind: "essay",
       scoreBands: makeScoreBands([2, 4, 10, 16, 16], 3),
       responses: [
-        { participantId: 41, username: "fred", nickname: null, displayName: "fred", score: 14, gradedAt: "2026-04-01T01:40:00.000Z", feedback: "", answer: { text: "避免 circular wait。" } },
+        { participantId: 41, username: "fred", displayName: "fred", score: 14, gradedAt: "2026-04-01T01:40:00.000Z", feedback: "", answer: { text: "避免 circular wait。" } },
       ],
       gradingProgress: { graded: 48, total: 48 },
     },
@@ -314,16 +311,16 @@ export function createContestResultDashboardMock(
       kind: "true_false",
       scoreBands: makeScoreBands([7, 0, 0, 13, 28], 1),
       responses: [
-        { participantId: 51, username: "gina", nickname: "Gina", displayName: "Gina", score: 5, gradedAt: "2026-04-01T01:50:00.000Z", feedback: "", answer: { selected: true } },
+        { participantId: 51, username: "gina", displayName: "Gina", score: 5, gradedAt: "2026-04-01T01:50:00.000Z", feedback: "", answer: { selected: true } },
       ],
       optionDistribution: [
-        { label: "A. True", count: 31, percent: 65, isCorrect: true, participants: [{ participantId: 51, username: "gina", nickname: "Gina", displayName: "Gina" }] },
+        { label: "A. True", count: 31, percent: 65, isCorrect: true, participants: [{ participantId: 51, username: "gina", displayName: "Gina" }] },
         { label: "B. False", count: 17, percent: 35, isCorrect: false, participants: [] },
       ],
       omittedCount: 2,
       omittedParticipants: [
-        { participantId: 106, username: "harry", nickname: null, displayName: "harry" },
-        { participantId: 107, username: "iris", nickname: "Iris", displayName: "Iris" },
+        { participantId: 106, username: "harry", displayName: "harry" },
+        { participantId: 107, username: "iris", displayName: "Iris" },
       ],
     },
     q7: {
@@ -331,7 +328,7 @@ export function createContestResultDashboardMock(
       kind: "essay",
       scoreBands: makeScoreBands([2, 5, 9, 8, 4], 3),
       responses: [
-        { participantId: 61, username: "jack", nickname: null, displayName: "jack", score: 13, gradedAt: "2026-04-01T02:00:00.000Z", feedback: "", answer: { text: "說明 CAP 與補償。" } },
+        { participantId: 61, username: "jack", displayName: "jack", score: 13, gradedAt: "2026-04-01T02:00:00.000Z", feedback: "", answer: { text: "說明 CAP 與補償。" } },
       ],
       gradingProgress: { graded: 28, total: 47 },
     },
@@ -340,7 +337,7 @@ export function createContestResultDashboardMock(
       kind: "short_answer",
       scoreBands: makeScoreBands([10, 8, 7, 11, 9], 2),
       responses: [
-        { participantId: 71, username: "kate", nickname: "Kate", displayName: "Kate", score: 6, gradedAt: "2026-04-01T02:10:00.000Z", feedback: "", answer: { text: "page replacement 會在 page fault 後觸發。" } },
+        { participantId: 71, username: "kate", displayName: "Kate", score: 6, gradedAt: "2026-04-01T02:10:00.000Z", feedback: "", answer: { text: "page replacement 會在 page fault 後觸發。" } },
       ],
       gradingProgress: { graded: 33, total: 45 },
     },
diff --git a/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.transform.ts b/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.transform.ts
index 7bc7526f..d0c21f3e 100644
--- a/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.transform.ts
+++ b/frontend/src/features/contest/components/admin/statistics/contestResultDashboard.transform.ts
@@ -79,8 +79,8 @@ export function transformToDashboardData(input: TransformInput): DashboardMockDa
       const responses = answers.map((answer) => ({
         participantId: answer.participant_user_id,
         username: answer.participant_username,
-        nickname: answer.participant_nickname || null,
-        displayName: answer.participant_nickname || answer.participant_username,
+        displayName:
+          answer.participant_display_name || answer.participant_username,
         score: answer.score,
         gradedAt: answer.graded_at,
         feedback: answer.feedback || "",
diff --git a/frontend/src/features/contest/components/admin/statistics/useContestResultDashboard.ts b/frontend/src/features/contest/components/admin/statistics/useContestResultDashboard.ts
index 80cdadcb..d437f4dd 100644
--- a/frontend/src/features/contest/components/admin/statistics/useContestResultDashboard.ts
+++ b/frontend/src/features/contest/components/admin/statistics/useContestResultDashboard.ts
@@ -210,7 +210,6 @@ function mapQuestionDetail(
       responses: dto.responses.map((response) => ({
         participantId: response.participant_id,
         username: response.username,
-        nickname: response.nickname,
         displayName: response.display_name,
         score: response.score,
         gradedAt: response.graded_at,
@@ -225,7 +224,6 @@ function mapQuestionDetail(
         participants: (item.participants ?? []).map((participant) => ({
           participantId: participant.participant_id,
           username: participant.username,
-          nickname: participant.nickname,
           displayName: participant.display_name,
         })),
       })),
@@ -233,7 +231,6 @@ function mapQuestionDetail(
       omittedParticipants: (dto.omitted_participants ?? []).map((item) => ({
         participantId: item.participant_id,
         username: item.username,
-        nickname: item.nickname,
         displayName: item.display_name,
       })),
     };
@@ -246,7 +243,6 @@ function mapQuestionDetail(
     responses: dto.responses.map((response) => ({
       participantId: response.participant_id,
       username: response.username,
-      nickname: response.nickname,
       displayName: response.display_name,
       score: response.score,
       gradedAt: response.graded_at,
diff --git a/frontend/src/features/contest/components/admin/statistics/useExamStatistics.test.ts b/frontend/src/features/contest/components/admin/statistics/useExamStatistics.test.ts
index 6f9ae25c..91e64cba 100644
--- a/frontend/src/features/contest/components/admin/statistics/useExamStatistics.test.ts
+++ b/frontend/src/features/contest/components/admin/statistics/useExamStatistics.test.ts
@@ -18,7 +18,7 @@ function buildAnswerRow(partial: Partial<GradingAnswerRow> = {}): GradingAnswerR
     id: partial.id ?? "a-1",
     studentId: partial.studentId ?? "u-1",
     studentUsername: partial.studentUsername ?? "student",
-    studentNickname: partial.studentNickname ?? "Student",
+    studentDisplayName: partial.studentDisplayName ?? "Student",
     questionId: partial.questionId ?? "q-1",
     questionIndex: partial.questionIndex ?? 1,
     questionPrompt: partial.questionPrompt ?? "Question 1",
diff --git a/frontend/src/features/contest/components/admin/statistics/useExamStatistics.ts b/frontend/src/features/contest/components/admin/statistics/useExamStatistics.ts
index a17919e5..3f50b0be 100644
--- a/frontend/src/features/contest/components/admin/statistics/useExamStatistics.ts
+++ b/frontend/src/features/contest/components/admin/statistics/useExamStatistics.ts
@@ -15,7 +15,7 @@ export interface OptionStat {
 }
 
 export interface SubjectiveEntry {
-  studentNickname: string;
+  studentDisplayName: string;
   studentUsername: string;
   answerText: string;
   score: number | null;
@@ -62,7 +62,7 @@ export function useExamStatistics() {
         optionDistribution = buildOptionDistribution(answers);
       } else {
         subjectiveEntries = answers.map((a) => ({
-          studentNickname: a.studentNickname ?? "",
+          studentDisplayName: a.studentDisplayName ?? "",
           studentUsername: a.studentUsername ?? "",
           answerText: extractAnswerText(a),
           score: a.score,
diff --git a/frontend/src/features/contest/components/exam/AnswerDisplay.module.scss b/frontend/src/features/contest/components/exam/AnswerDisplay.module.scss
index ff447d6d..8da5c279 100644
--- a/frontend/src/features/contest/components/exam/AnswerDisplay.module.scss
+++ b/frontend/src/features/contest/components/exam/AnswerDisplay.module.scss
@@ -59,6 +59,24 @@
   line-height: 1.4;
 }
 
+.optionLabel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  min-width: 0;
+}
+
+.selectedIcon {
+  flex-shrink: 0;
+  color: var(--cds-link-primary);
+}
+
+.optionSelected {
+  border-color: var(--cds-link-primary);
+}
+
 .optionSelectedCorrect {
   background: color-mix(in srgb, var(--cds-support-success) 10%, transparent);
   border-color: var(--cds-support-success);
diff --git a/frontend/src/features/contest/components/exam/AnswerDisplay.tsx b/frontend/src/features/contest/components/exam/AnswerDisplay.tsx
index eb3bb8c7..4030644f 100644
--- a/frontend/src/features/contest/components/exam/AnswerDisplay.tsx
+++ b/frontend/src/features/contest/components/exam/AnswerDisplay.tsx
@@ -1,4 +1,4 @@
-import { Checkmark } from "@carbon/icons-react";
+import { Checkmark, DotMark } from "@carbon/icons-react";
 import { useTranslation } from "react-i18next";
 
 import type { ExamQuestionType } from "@/core/entities/contest.entity";
@@ -13,6 +13,7 @@ export interface AnswerDisplayProps {
   options: string[];
   correctAnswer: unknown;
   explanation?: string | null;
+  showCorrectness?: boolean;
 }
 
 function isSelected(answerContent: Record<string, unknown>, idx: number): boolean {
@@ -60,6 +61,7 @@ const AnswerDisplay: React.FC<AnswerDisplayProps> = ({
   options,
   correctAnswer,
   explanation,
+  showCorrectness = true,
 }) => {
   const { t } = useTranslation("contest");
   const subjective = isSubjectiveType(questionType);
@@ -115,27 +117,35 @@ const AnswerDisplay: React.FC<AnswerDisplayProps> = ({
       <div className={styles.optionsList}>
         {effectiveOptions.map((opt, i) => {
           const selected = isSelected(answerContent, i);
-          const correct = isCorrect(correctAnswer, i);
+          const correct = showCorrectness && isCorrect(correctAnswer, i);
           const classNames = [
             styles.optionItem,
-            selected && correct ? styles.optionSelectedCorrect : "",
-            selected && !correct ? styles.optionSelectedWrong : "",
-            !selected && correct ? styles.optionCorrect : "",
+            selected && !showCorrectness ? styles.optionSelected : "",
+            selected && showCorrectness && correct ? styles.optionSelectedCorrect : "",
+            selected && showCorrectness && !correct ? styles.optionSelectedWrong : "",
+            !selected && showCorrectness && correct ? styles.optionCorrect : "",
           ]
             .filter(Boolean)
             .join(" ");
 
           return (
             <div key={i} className={classNames}>
-              <span>
-                {String.fromCharCode(65 + i)}. {opt}
+              <span className={styles.optionLabel}>
+                <span>{String.fromCharCode(65 + i)}. {opt}</span>
+                {selected ? (
+                  <DotMark
+                    size={16}
+                    className={styles.selectedIcon}
+                    aria-label="Your answer"
+                  />
+                ) : null}
               </span>
               {correct && <Checkmark size={16} className={styles.correctIcon} />}
             </div>
           );
         })}
       </div>
-      {correctAnswer != null && (
+      {showCorrectness && correctAnswer != null && (
         <div className={styles.correctSummary}>
           <span className={styles.correctLabel}>
             {t("grading.correctAnswer", "正確答案")}:
diff --git a/frontend/src/features/contest/components/exam/ExamNavigator.module.scss b/frontend/src/features/contest/components/exam/ExamNavigator.module.scss
index b2f06169..4ff592af 100644
--- a/frontend/src/features/contest/components/exam/ExamNavigator.module.scss
+++ b/frontend/src/features/contest/components/exam/ExamNavigator.module.scss
@@ -5,33 +5,195 @@
 .navigator {
   display: flex;
   flex-direction: column;
-  width: 200px;
-  min-width: 200px;
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+  border-right: 0;
+  background: var(--cds-background);
+  flex: 1;
+  min-height: 0;
 }
 
-/* Numbered badge for each question */
-.itemNumber {
+.navigatorMini {
+  width: 3rem;
+  min-width: 3rem;
+  max-width: 3rem;
+}
+
+.miniScrollArea {
+  position: relative;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  scrollbar-color: transparent transparent;
+
+  &:hover,
+  &:focus-within {
+    scrollbar-width: thin;
+    scrollbar-color: var(--cds-border-strong-01) transparent;
+  }
+
+  &::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb,
+  &:focus-within::-webkit-scrollbar-thumb {
+    background: var(--cds-border-strong-01);
+  }
+
+  &:hover::-webkit-scrollbar,
+  &:focus-within::-webkit-scrollbar {
+    width: 0.35rem;
+    height: 0;
+  }
+}
+
+.panel {
+  background: var(--cds-background);
+}
+
+.panelHeader,
+.panelFooter {
+  background: var(--cds-background);
+}
+
+.navigatorMini .panelFooter {
+  justify-content: center;
+  min-height: 3rem;
+  padding: 0;
+}
+
+.panelToggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 0;
+  background: transparent;
+  color: var(--cds-icon-primary);
+  cursor: pointer;
+}
+
+.panelToggle:hover {
+  background: var(--cds-layer-hover);
+}
+
+.panelToggle:focus-visible {
+  outline: 2px solid var(--cds-focus);
+  outline-offset: -2px;
+}
+
+.overviewItem {
+  min-height: 3.5rem;
+  border-left: 4px solid transparent;
+  background: var(--cds-background);
+}
+
+.overviewTitle {
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  font-weight: 500;
+}
+
+.miniOverviewItem,
+.miniItem {
+  width: 3rem;
+  max-width: 3rem;
+  box-sizing: border-box;
+  height: 3rem;
+  min-height: 3rem;
+  max-height: 3rem;
+  border-left: 4px solid transparent;
+  background: var(--cds-background);
+}
+
+.miniItem {
   @include type.type-style("label-01");
+
   font-weight: 600;
-  color: var(--cds-text-primary);
-  width: 24px;
-  height: 24px;
+}
+
+.miniItemUnanswered {
+  border-left-color: var(--cds-border-strong-01);
+}
+
+.miniItemAnswered {
+  border-left-color: var(--cds-support-success);
+}
+
+.miniItemMarked {
+  border-left-color: var(--cds-support-warning);
+}
+
+.miniItemActive {
+  background-color: color-mix(in srgb, var(--cds-layer-selected-01, var(--cds-layer-accent-01)) 56%, transparent);
+}
+
+.item {
+  border-left: 4px solid var(--cds-border-subtle-01);
+  min-height: 4.75rem;
+  max-height: 4.75rem;
+  padding-top: layout.$spacing-03;
+  padding-bottom: layout.$spacing-03;
+  background: var(--cds-background);
+}
+
+.itemUnanswered {
+  border-left-color: var(--cds-border-strong-01);
+}
+
+.itemAnswered {
+  border-left-color: var(--cds-support-success);
+}
+
+.itemMarked {
+  border-left-color: var(--cds-support-warning);
+}
+
+.itemActive {
+  background-color: color-mix(in srgb, var(--cds-layer-selected-01, var(--cds-layer-accent-01)) 56%, transparent);
+
+  &:hover {
+    background-color: color-mix(in srgb, var(--cds-layer-selected-hover-01) 68%, transparent);
+  }
+}
+
+.itemMeta {
   display: flex;
   align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: var(--cds-layer-02);
-  flex-shrink: 0;
+  gap: layout.$spacing-01;
 }
 
-.itemNumberAnswered {
-  background-color: var(--cds-support-success);
-  color: var(--cds-text-on-color);
+.itemMetaDivider {
+  color: var(--cds-text-placeholder);
 }
 
-/* Marked-for-review tint */
-.itemMarked {
-  background-color: rgba(255, 214, 0, 0.15);
+.itemPrompt {
+  @include type.type-style("body-compact-01");
+
+  display: -webkit-box;
+  overflow: hidden;
+  font-weight: 400;
+  line-height: 1.4;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.itemActive .itemPrompt {
+  font-weight: 600;
 }
 
 /* Footer text */
diff --git a/frontend/src/features/contest/components/exam/ExamNavigator.tsx b/frontend/src/features/contest/components/exam/ExamNavigator.tsx
index 0e2be191..af86a2e5 100644
--- a/frontend/src/features/contest/components/exam/ExamNavigator.tsx
+++ b/frontend/src/features/contest/components/exam/ExamNavigator.tsx
@@ -1,12 +1,12 @@
 import { type FC, memo, useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import type { ExamItem } from "../../types/exam.types";
+import { Home, SidePanelClose, SidePanelOpen } from "@carbon/icons-react";
 import {
   ListPanel,
   ListHeader,
   ListFooter,
   ListItem,
-  ListItemLeading,
   ListItemContent,
   ListItemTitle,
   ListItemMeta,
@@ -19,6 +19,11 @@ interface ExamNavigatorProps {
   answeredIds: Set<string>;
   markedIds?: Set<string>;
   onSelect: (index: number) => void;
+  collapsed?: boolean;
+  overviewLabel?: string;
+  onSelectOverview?: () => void;
+  onToggleCollapse?: () => void;
+  hideHeader?: boolean;
 }
 
 export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
@@ -27,6 +32,11 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
   answeredIds,
   markedIds,
   onSelect,
+  collapsed = false,
+  overviewLabel,
+  onSelectOverview,
+  onToggleCollapse,
+  hideHeader = false,
 }) => {
   const { t } = useTranslation("contest");
   const answeredCount = items.filter((item) => {
@@ -38,18 +48,97 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
   const itemRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
 
   useEffect(() => {
+    if (collapsed) return;
     const el = itemRefs.current.get(activeIndex);
     if (el) {
       el.scrollIntoView({ block: "nearest", behavior: "smooth" });
     }
-  }, [activeIndex]);
+  }, [activeIndex, collapsed]);
+
+  if (collapsed) {
+    return (
+      <nav className={`${styles.navigator} ${styles.navigatorMini}`}>
+        <ListPanel
+          className={styles.panel}
+          scrollAreaClassName={styles.miniScrollArea}
+          footer={
+            onToggleCollapse ? (
+              <ListFooter className={styles.panelFooter}>
+                <button
+                  type="button"
+                  className={styles.panelToggle}
+                  onClick={onToggleCollapse}
+                  aria-label={t("answering.navigation.showList")}
+                  title={t("answering.navigation.showList")}
+                >
+                  <SidePanelClose size={20} />
+                </button>
+              </ListFooter>
+            ) : null
+          }
+        >
+          {onSelectOverview && (
+            <ListItem
+              size="compact"
+              onClick={onSelectOverview}
+              className={styles.miniOverviewItem}
+            >
+              <Home size={18} />
+            </ListItem>
+          )}
+          {items.map((item, index) => {
+            const id = item.kind === "coding" ? item.data.id : item.data.id;
+            const isActive = index === activeIndex;
+            const isAnswered = answeredIds.has(id);
+            const isMarked = markedIds?.has(id) ?? false;
+            const itemClassName = [
+              styles.miniItem,
+              isAnswered ? styles.miniItemAnswered : styles.miniItemUnanswered,
+              isMarked ? styles.miniItemMarked : "",
+              isActive ? styles.miniItemActive : "",
+            ].filter(Boolean).join(" ");
+
+            return (
+              <ListItem
+                key={id}
+                size="compact"
+                onClick={() => onSelect(index)}
+                className={itemClassName}
+              >
+                Q{index + 1}
+              </ListItem>
+            );
+          })}
+        </ListPanel>
+      </nav>
+    );
+  }
 
   return (
     <nav className={styles.navigator}>
       <ListPanel
-        header={<ListHeader title={t("answering.navigation.questionList")} />}
+        className={styles.panel}
+        header={!hideHeader ? (
+          <ListHeader
+            title={t("answering.navigation.questionList")}
+            className={styles.panelHeader}
+            action={
+              onToggleCollapse ? (
+                <button
+                  type="button"
+                  className={styles.panelToggle}
+                  onClick={onToggleCollapse}
+                  aria-label={t("answering.navigation.hideList")}
+                  title={t("answering.navigation.hideList")}
+                >
+                  <SidePanelOpen size={20} />
+                </button>
+              ) : null
+            }
+          />
+        ) : null}
         footer={
-          <ListFooter>
+          <ListFooter className={styles.panelFooter}>
             <span className={styles.summaryText}>
               {t("answering.navigation.answeredProgress", { answered: answeredCount, total: items.length })}
             </span>
@@ -61,6 +150,19 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
           </ListFooter>
         }
       >
+        {onSelectOverview && (
+          <ListItem onClick={onSelectOverview} className={styles.overviewItem}>
+            <ListItemContent>
+              <ListItemTitle className={styles.overviewTitle}>
+                <Home size={18} />
+                <span>
+                  {overviewLabel ??
+                    t("contestShell.backToContestHome", "返回競賽主頁")}
+                </span>
+              </ListItemTitle>
+            </ListItemContent>
+          </ListItem>
+        )}
         {items.map((item, index) => {
           const id = item.kind === "coding" ? item.data.id : item.data.id;
           const isActive = index === activeIndex;
@@ -75,33 +177,38 @@ export const ExamNavigator: FC<ExamNavigatorProps> = memo(({
           const title =
             item.kind === "coding"
               ? `${item.data.label}. ${item.data.title}`
-              : item.data.prompt.slice(0, 30) + (item.data.prompt.length > 30 ? "…" : "");
+              : item.data.prompt.slice(0, 72) + (item.data.prompt.length > 72 ? "…" : "");
+          const itemClassName = [
+            styles.item,
+            isAnswered ? styles.itemAnswered : styles.itemUnanswered,
+            isMarked ? styles.itemMarked : "",
+            isActive ? styles.itemActive : "",
+          ].filter(Boolean).join(" ");
 
           return (
             <ListItem
               key={id}
-              active={isActive}
               onClick={() => onSelect(index)}
-              className={isMarked ? styles.itemMarked : undefined}
+              className={itemClassName}
             >
-              <ListItemLeading>
-                <span
-                  ref={(el) => {
-                    // Attach ref to parent button via leading span for scroll-into-view
-                    if (el?.parentElement?.parentElement) {
-                      itemRefs.current.set(index, el.parentElement.parentElement as HTMLButtonElement);
-                    } else {
-                      itemRefs.current.delete(index);
-                    }
-                  }}
-                  className={`${styles.itemNumber} ${isAnswered ? styles.itemNumberAnswered : ""}`}
-                >
-                  {index + 1}
-                </span>
-              </ListItemLeading>
               <ListItemContent>
-                <ListItemMeta>{typeLabel}</ListItemMeta>
-                <ListItemTitle>{title}</ListItemTitle>
+                <ListItemMeta className={styles.itemMeta}>
+                  <span
+                    ref={(el) => {
+                      const button = el?.closest("button");
+                      if (button) {
+                        itemRefs.current.set(index, button as HTMLButtonElement);
+                      } else {
+                        itemRefs.current.delete(index);
+                      }
+                    }}
+                  >
+                    Q{index + 1}
+                  </span>
+                  <span className={styles.itemMetaDivider}>·</span>
+                  <span>{typeLabel}</span>
+                </ListItemMeta>
+                <ListItemTitle className={styles.itemPrompt}>{title}</ListItemTitle>
               </ListItemContent>
             </ListItem>
           );
diff --git a/frontend/src/features/contest/components/exam/ExamStatusBadge.module.scss b/frontend/src/features/contest/components/exam/ExamStatusBadge.module.scss
new file mode 100644
index 00000000..0f0270e5
--- /dev/null
+++ b/frontend/src/features/contest/components/exam/ExamStatusBadge.module.scss
@@ -0,0 +1,48 @@
+.examStatusBase {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  height: 100%;
+  padding: 0 1rem;
+  font-weight: bold;
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  cursor: help;
+}
+
+.examStatusLocked {
+  composes: examStatusBase;
+  background-color: color-mix(in srgb, var(--cds-support-error) 12%, transparent);
+  color: var(--cds-support-error);
+}
+
+.examStatusPaused {
+  composes: examStatusBase;
+  background-color: color-mix(in srgb, var(--cds-support-warning) 15%, transparent);
+  color: var(--cds-support-warning);
+}
+
+.examStatusInProgress {
+  composes: examStatusBase;
+  background-color: color-mix(in srgb, var(--cds-support-success) 12%, transparent);
+  color: var(--cds-support-success);
+  cursor: pointer;
+}
+
+.examStatusWarning {
+  composes: examStatusBase;
+  background-color: color-mix(in srgb, var(--cds-support-warning) 15%, transparent);
+  color: var(--cds-support-warning);
+  cursor: pointer;
+}
+
+.examStatusCritical {
+  composes: examStatusBase;
+  background-color: color-mix(in srgb, var(--cds-support-error) 12%, transparent);
+  color: var(--cds-support-error);
+  cursor: pointer;
+}
+
+.examTimeDisplay {
+  font-family: var(--cds-code-font-family, monospace);
+  margin-left: 0.5rem;
+}
diff --git a/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx b/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx
index b0ba6273..4bf59d2d 100644
--- a/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx
+++ b/frontend/src/features/contest/components/exam/ExamStatusBadge.tsx
@@ -2,7 +2,7 @@ import type { ExamStatusType } from "@/core/entities/contest.entity";
 import { View, Locked, WarningAltFilled } from "@carbon/icons-react";
 import { useExamMonitoringStatus } from "@/features/contest/contexts/ExamMonitoringStatusContext";
 import { useTranslation } from "react-i18next";
-import styles from "../layout/ContestLayout.module.scss";
+import styles from "./ExamStatusBadge.module.scss";
 
 interface ExamStatusBadgeProps {
   examStatus?: ExamStatusType;
@@ -12,6 +12,7 @@ interface ExamStatusBadgeProps {
   lockReason?: string;
   autoUnlockAt?: string | null;
   onClick?: () => void;
+  hideWhenNormal?: boolean;
 }
 
 const ExamStatusBadge: React.FC<ExamStatusBadgeProps> = ({
@@ -22,6 +23,7 @@ const ExamStatusBadge: React.FC<ExamStatusBadgeProps> = ({
   lockReason,
   autoUnlockAt,
   onClick,
+  hideWhenNormal = false,
 }) => {
   const { t } = useTranslation("contest");
   const monitoringReminder = useExamMonitoringStatus();
@@ -73,6 +75,8 @@ const ExamStatusBadge: React.FC<ExamStatusBadgeProps> = ({
   }
 
   if (examStatus === "in_progress") {
+    if (hideWhenNormal && !monitoringReminder) return null;
+
     const reminderLabel = monitoringReminder
       ? getMonitoringReminderLabel(monitoringReminder.source)
       : t("exam.monitoring");
diff --git a/frontend/src/features/contest/components/exam/PaperExamCore.tsx b/frontend/src/features/contest/components/exam/PaperExamCore.tsx
index c2864aa2..85139ff1 100644
--- a/frontend/src/features/contest/components/exam/PaperExamCore.tsx
+++ b/frontend/src/features/contest/components/exam/PaperExamCore.tsx
@@ -6,9 +6,9 @@ import {
   ArrowRight,
   CenterToFit,
   ListBulleted,
-  List,
 } from "@carbon/icons-react";
 import { ExamNavigator } from "./ExamNavigator";
+import { useRegisterContestRuntimeNavigator } from "@/features/contest/contexts";
 import type { ExamItem, ExamViewMode } from "../../types/exam.types";
 
 function useScrollDirection(ref: React.RefObject<HTMLElement | null>) {
@@ -42,8 +42,12 @@ interface PaperExamCoreProps {
   items: ExamItem[];
   answeredIds: Set<string>;
   markedIds?: Set<string>;
-  toolbarLeft: React.ReactNode;
+  toolbarLeft?: React.ReactNode;
   toolbarCenter?: React.ReactNode;
+  showToolbar?: boolean;
+  externalNavigator?: boolean;
+  overviewLabel?: string;
+  onSelectOverview?: () => void;
   renderItem: (item: ExamItem, index: number, mode: ExamViewMode) => React.ReactNode;
   styles: Record<string, string>;
   syncIndex?: number | null;
@@ -56,6 +60,10 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
   markedIds,
   toolbarLeft,
   toolbarCenter,
+  showToolbar = true,
+  externalNavigator = false,
+  overviewLabel,
+  onSelectOverview,
   renderItem,
   styles,
   syncIndex,
@@ -71,7 +79,7 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
   const [viewMode, setViewMode] = useState<ExamViewMode>("single");
   const [activeIndex, setActiveIndex] = useState(0);
   const [allModeActiveIndex, setAllModeActiveIndex] = useState(0);
-  const [navVisible, setNavVisible] = useState(true);
+  const [navCollapsed, setNavCollapsed] = useState(false);
   const [slideDir, setSlideDir] = useState<"left" | "right">("right");
   const [animating, setAnimating] = useState(false);
 
@@ -161,6 +169,41 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
     }
   }, []);
 
+  const navigatorState = useMemo(
+    () =>
+      externalNavigator
+        ? {
+            items,
+            activeIndex:
+              effectiveViewMode === "single"
+                ? effectiveActiveIndex
+                : effectiveAllModeActiveIndex,
+            answeredIds,
+            markedIds,
+            overviewLabel,
+            onSelect:
+              effectiveViewMode === "single"
+                ? handleSetActiveIndex
+                : handleScrollToItem,
+            onSelectOverview,
+          }
+        : null,
+    [
+      answeredIds,
+      effectiveActiveIndex,
+      effectiveAllModeActiveIndex,
+      effectiveViewMode,
+      externalNavigator,
+      handleScrollToItem,
+      handleSetActiveIndex,
+      items,
+      markedIds,
+      onSelectOverview,
+      overviewLabel,
+    ],
+  );
+  useRegisterContestRuntimeNavigator(navigatorState);
+
   const renderSingleMode = () => {
     const item = items[effectiveActiveIndex];
     if (!item) return null;
@@ -228,10 +271,12 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
 
   return (
     <div className={styles.container}>
-      <div className={`${styles.toolbar} ${toolbarVisible ? "" : styles.toolbarHidden}`}>
-        <div className={styles.toolbarLeft}>{toolbarLeft}</div>
-        <div className={styles.toolbarCenter}>{toolbarCenter}</div>
-      </div>
+      {showToolbar && (
+        <div className={`${styles.toolbar} ${toolbarVisible ? "" : styles.toolbarHidden}`}>
+          <div className={styles.toolbarLeft}>{toolbarLeft}</div>
+          <div className={styles.toolbarCenter}>{toolbarCenter}</div>
+        </div>
+      )}
 
       <div className={styles.modeSwitcher}>
         {VIEW_MODES.map((m) => (
@@ -248,24 +293,21 @@ export const PaperExamCore: React.FC<PaperExamCoreProps> = ({
       </div>
 
       <div className={styles.body}>
-        <div className={`${styles.navWrapper} ${navVisible ? "" : styles.navWrapperHidden}`}>
-          {navVisible && (
+        {!externalNavigator && (
+          <div className={`${styles.navWrapper} ${navCollapsed ? styles.navWrapperCollapsed : ""}`}>
             <ExamNavigator
               items={items}
               activeIndex={effectiveViewMode === "single" ? effectiveActiveIndex : effectiveAllModeActiveIndex}
               answeredIds={answeredIds}
               markedIds={markedIds}
+              collapsed={navCollapsed}
+              overviewLabel={overviewLabel}
+              onSelectOverview={onSelectOverview}
+              onToggleCollapse={() => setNavCollapsed((collapsed) => !collapsed)}
               onSelect={effectiveViewMode === "single" ? handleSetActiveIndex : handleScrollToItem}
             />
-          )}
-          <button
-            className={styles.navToggle}
-            onClick={() => setNavVisible((v) => !v)}
-            aria-label={navVisible ? t("answering.navigation.hideList") : t("answering.navigation.showList")}
-          >
-            <List size={20} />
-          </button>
-        </div>
+          </div>
+        )}
 
         {effectiveViewMode === "single" ? renderSingleMode() : renderAllMode()}
       </div>
diff --git a/frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss b/frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss
new file mode 100644
index 00000000..5633f13c
--- /dev/null
+++ b/frontend/src/features/contest/components/exam/PaperQuestionReportCard.module.scss
@@ -0,0 +1,56 @@
+.root {
+  padding: 0;
+  border-bottom: 1px solid var(--cds-border-subtle);
+  background: transparent;
+}
+
+.root:last-child {
+  border-bottom: 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  align-items: flex-start;
+}
+
+.title {
+  color: var(--cds-text-primary);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: 600;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.meta {
+  margin-top: 0.25rem;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  line-height: 1.2;
+}
+
+.body {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.feedbackLabel {
+  margin-bottom: 0.25rem;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  line-height: 1.2;
+}
+
+.warningTag {
+  color: var(--cds-text-primary);
+  background: color-mix(in srgb, var(--cds-support-warning) 22%, transparent);
+}
+
+@media (max-width: 672px) {
+  .header {
+    display: grid;
+  }
+}
diff --git a/frontend/src/features/contest/components/exam/PaperQuestionReportCard.tsx b/frontend/src/features/contest/components/exam/PaperQuestionReportCard.tsx
new file mode 100644
index 00000000..e7e37401
--- /dev/null
+++ b/frontend/src/features/contest/components/exam/PaperQuestionReportCard.tsx
@@ -0,0 +1,109 @@
+import { Tag } from "@carbon/react";
+
+import type { ExamQuestionType } from "@/core/entities/contest.entity";
+import AnswerDisplay from "@/features/contest/components/exam/AnswerDisplay";
+import MarkdownRenderer from "@/shared/ui/markdown/MarkdownRenderer";
+
+import styles from "./PaperQuestionReportCard.module.scss";
+
+type StatusTone =
+  | "red"
+  | "magenta"
+  | "purple"
+  | "blue"
+  | "cyan"
+  | "teal"
+  | "green"
+  | "gray"
+  | "cool-gray"
+  | "warm-gray"
+  | "high-contrast"
+  | "outline";
+
+interface PaperQuestionReportCardProps {
+  questionId: string;
+  index: number;
+  questionType: ExamQuestionType;
+  typeLabel: string;
+  prompt: string;
+  options: string[];
+  answer: Record<string, unknown>;
+  statusLabel: string;
+  statusTone: StatusTone;
+  statusEmphasis?: "warning";
+  showGrading?: boolean;
+  score?: number | null;
+  maxScore: number;
+  gradedByUsername?: string | null;
+  feedback?: string | null;
+  correctAnswer?: unknown;
+  explanation?: string | null;
+}
+
+export default function PaperQuestionReportCard({
+  index,
+  questionType,
+  typeLabel,
+  prompt,
+  options,
+  answer,
+  statusLabel,
+  statusTone,
+  statusEmphasis,
+  showGrading = false,
+  score,
+  maxScore,
+  gradedByUsername,
+  feedback,
+  correctAnswer,
+  explanation,
+}: PaperQuestionReportCardProps) {
+  return (
+    <article className={styles.root}>
+      <div className={styles.header}>
+        <div>
+          <div className={styles.title}>
+            Q{index} · {typeLabel}
+          </div>
+          {showGrading ? (
+            <div className={styles.meta}>
+              {score ?? "-"} / {maxScore}
+              {gradedByUsername ? ` · ${gradedByUsername}` : ""}
+            </div>
+          ) : null}
+        </div>
+        <Tag
+          type={statusTone}
+          className={statusEmphasis === "warning" ? styles.warningTag : undefined}
+        >
+          {statusLabel}
+        </Tag>
+      </div>
+      <div className={styles.body}>
+        <div className={styles.markdownBlock}>
+          <MarkdownRenderer enableMath enableHighlight>
+            {prompt}
+          </MarkdownRenderer>
+        </div>
+        <AnswerDisplay
+          questionType={questionType}
+          answerContent={answer}
+          options={options}
+          correctAnswer={showGrading ? correctAnswer : undefined}
+          explanation={showGrading ? explanation : null}
+          showCorrectness={showGrading}
+        />
+        {showGrading && feedback?.trim() ? (
+          <div>
+            <div className={styles.feedbackLabel}>批改評語</div>
+            <div className={styles.feedbackBlock}>
+              <MarkdownRenderer enableMath enableHighlight>
+                {feedback}
+              </MarkdownRenderer>
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </article>
+  );
+}
diff --git a/frontend/src/features/contest/components/index.ts b/frontend/src/features/contest/components/index.ts
index dcf3d139..3270d434 100644
--- a/frontend/src/features/contest/components/index.ts
+++ b/frontend/src/features/contest/components/index.ts
@@ -1,5 +1,4 @@
 // Layout Components
-export { default as ContestLayout } from "./layout/ContestLayout";
 export { default as ContestHero } from "./layout/ContestHero";
 export { default as ContestTabs } from "./layout/ContestTabs";
 export { default as ContestExitModal } from "./layout/ContestExitModal";
diff --git a/frontend/src/features/contest/components/layout/ContestExitModal.tsx b/frontend/src/features/contest/components/layout/ContestExitModal.tsx
index 16608a87..5f4671be 100644
--- a/frontend/src/features/contest/components/layout/ContestExitModal.tsx
+++ b/frontend/src/features/contest/components/layout/ContestExitModal.tsx
@@ -48,7 +48,7 @@ const ContestExitModal: React.FC<ContestExitModalProps> = ({
     }
 
     // Student - Not joined
-    if (!contest?.hasJoined && !contest?.isRegistered) {
+    if (!contest?.hasJoined) {
       return t("exitModal.studentNotJoined");
     }
 
diff --git a/frontend/src/features/contest/components/layout/ContestHero.module.scss b/frontend/src/features/contest/components/layout/ContestHero.module.scss
index 6676682c..2788f831 100644
--- a/frontend/src/features/contest/components/layout/ContestHero.module.scss
+++ b/frontend/src/features/contest/components/layout/ContestHero.module.scss
@@ -14,16 +14,6 @@
   color: var(--cds-text-secondary);
 }
 
-// ─── Metadata ───────────────────────────────────────────────
-.timeLabel {
-  margin-bottom: layout.$spacing-02;
-}
-
-.timeValue {
-  color: var(--cds-text-primary);
-  font-weight: 600;
-}
-
 // ─── Action rows ────────────────────────────────────────────
 .actionRow {
   display: flex;
diff --git a/frontend/src/features/contest/components/layout/ContestHero.tsx b/frontend/src/features/contest/components/layout/ContestHero.tsx
index cb7bc6fc..23a44117 100644
--- a/frontend/src/features/contest/components/layout/ContestHero.tsx
+++ b/frontend/src/features/contest/components/layout/ContestHero.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { Button, Modal, TextInput, Select, SelectItem } from "@carbon/react";
+import { Button, Modal, Select, SelectItem } from "@carbon/react";
 import {
   PlayFilled,
   Flag,
@@ -20,8 +20,9 @@ import {
 } from "@/core/entities/contest.entity";
 import { HeroBase } from "@/shared/layout/HeroBase";
 import { KpiCard } from "@/shared/ui/dataCard";
-import { updateNickname, downloadMyReport } from "@/infrastructure/api/repositories";
+import { downloadMyReport } from "@/infrastructure/api/repositories";
 import { useInterval } from "@/shared/hooks/useInterval";
+import { MetricBlock } from "@/shared/components/dashboard";
 import styles from "./ContestHero.module.scss";
 
 const MinimalProgressBar = ({
@@ -56,7 +57,6 @@ interface ContestHeroProps {
   onEndExam?: () => void;
   onGoToAnswering?: () => void;
   onTabChange?: (tab: string) => void;
-  onRefreshContest?: () => Promise<void>;
   maxWidth?: string;
 }
 
@@ -66,7 +66,6 @@ const ContestHero: React.FC<ContestHeroProps> = ({
   onStartExam,
   onEndExam,
   onGoToAnswering,
-  onRefreshContest,
   maxWidth,
 }) => {
   const { t } = useTranslation("contest");
@@ -75,11 +74,6 @@ const ContestHero: React.FC<ContestHeroProps> = ({
   const [progress, setProgress] = useState(0);
   const [showEndConfirm, setShowEndConfirm] = useState(false);
 
-  // Update Nickname States
-  const [showUpdateNicknameModal, setShowUpdateNicknameModal] = useState(false);
-  const [newNickname, setNewNickname] = useState("");
-  const [isUpdatingNickname, setIsUpdatingNickname] = useState(false);
-
   // Report download state
   const [reportDownloading, setReportDownloading] = useState(false);
   const [showReportModal, setShowReportModal] = useState(false);
@@ -183,14 +177,8 @@ const ContestHero: React.FC<ContestHeroProps> = ({
 
   const metadata = (
     <>
-      <div>
-        <div className={styles.timeLabel}>{t("startTime")}</div>
-        <div className={styles.timeValue}>{formatDate(startTime)}</div>
-      </div>
-      <div>
-        <div className={styles.timeLabel}>{t("endTime")}</div>
-        <div className={styles.timeValue}>{formatDate(endTime)}</div>
-      </div>
+      <MetricBlock label={t("startTime")} value={formatDate(startTime)} />
+      <MetricBlock label={t("endTime")} value={formatDate(endTime)} />
     </>
   );
 
@@ -234,7 +222,7 @@ const ContestHero: React.FC<ContestHeroProps> = ({
     // Check if contest has ended (time-based)
     if (isEnded) {
       const hasSubmitted = contest.examStatus === "submitted" &&
-        (contest.hasJoined || contest.isRegistered);
+        contest.hasJoined;
       if (hasSubmitted) {
         return (
           <Button
@@ -399,50 +387,6 @@ const ContestHero: React.FC<ContestHeroProps> = ({
         </div>
       </Modal>
 
-      {/* Update Nickname Modal */}
-      <Modal
-        open={showUpdateNicknameModal}
-        modalHeading={t("hero.updateNickname")}
-        primaryButtonText={
-          isUpdatingNickname ? t("hero.updating") : t("hero.confirmUpdate")
-        }
-        secondaryButtonText={tc("button.cancel")}
-        onRequestClose={() => setShowUpdateNicknameModal(false)}
-        onRequestSubmit={async () => {
-          if (!contest) return;
-          setIsUpdatingNickname(true);
-          try {
-            await updateNickname(contest.id, newNickname);
-            setShowUpdateNicknameModal(false);
-            if (onRefreshContest) {
-              await onRefreshContest();
-            } else {
-              // Fallback if no refresh function provided (shouldn't happen in updated layout)
-              console.warn("No refresh function provided");
-            }
-          } catch (error) {
-            console.error("Failed to update nickname", error);
-            const message =
-              error instanceof Error ? error.message : t("hero.updateFailed");
-            showError(message);
-          } finally {
-            setIsUpdatingNickname(false);
-          }
-        }}
-        primaryButtonDisabled={isUpdatingNickname}
-      >
-        <div className={styles.modalSpacing}>
-          <p className={styles.modalSpacing}>{t("hero.nicknameHint")}</p>
-          <TextInput
-            id="update-nickname"
-            labelText={t("hero.nicknameLabel")}
-            placeholder={t("hero.nicknamePlaceholder")}
-            value={newNickname}
-            onChange={(e) => setNewNickname(e.target.value)}
-          />
-        </div>
-      </Modal>
-
       {/* Report Download Modal */}
       <Modal
         open={showReportModal}
diff --git a/frontend/src/features/contest/components/layout/ContestLayout.module.scss b/frontend/src/features/contest/components/layout/ContestLayout.module.scss
deleted file mode 100644
index cefc75de..00000000
--- a/frontend/src/features/contest/components/layout/ContestLayout.module.scss
+++ /dev/null
@@ -1,247 +0,0 @@
-// ContestLayout styles
-
-.root {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-// Loading state
-.loadingContainer {
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-}
-
-.loadingContent {
-  text-align: center;
-}
-
-.spinner {
-  width: 48px;
-  height: 48px;
-  border: 4px solid var(--cds-border-subtle);
-  border-top-color: var(--cds-link-primary);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 1rem;
-}
-
-.loadingText {
-  color: var(--cds-text-secondary);
-}
-
-// Main content area
-.mainContent {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.contentWrapper {
-  margin-top: 3rem;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-color: var(--cds-background);
-}
-
-.scrollableContent {
-  overflow: auto;
-  flex: 1;
-}
-
-// Header brand with embedded breadcrumb
-.headerBrand {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.75rem;
-  min-width: 0;
-}
-
-.solveBackButton {
-  border-right: 1px solid var(--cds-border-subtle);
-}
-
-.headerBrandLink {
-  color: var(--cds-text-primary);
-  text-decoration: none;
-  font-size: 0.875rem;
-  font-weight: 600;
-  white-space: nowrap;
-
-  &:hover {
-    color: var(--cds-link-primary-hover);
-  }
-}
-
-// Carbon Breadcrumb inside header
-.breadcrumb {
-  display: inline-flex;
-  align-items: center;
-  margin: 0;
-
-  :global(.cds--breadcrumb-item) {
-    margin-right: 0;
-  }
-
-  :global(.cds--link) {
-    color: var(--cds-text-secondary);
-    font-size: 0.875rem;
-    text-decoration: none;
-
-    &:hover {
-      color: var(--cds-link-primary-hover);
-    }
-  }
-
-  :global(.cds--breadcrumb-item--current) {
-    color: var(--cds-text-primary);
-    font-size: 0.875rem;
-  }
-}
-
-// Header navigation items
-.headerTimerDisplay {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  height: 100%;
-  padding: 0 1rem;
-  color: var(--cds-text-primary);
-  font-family: var(--cds-code-font-family, monospace);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.headerScoreDisplay {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  height: 100%;
-  padding: 0 1rem;
-  color: var(--cds-text-primary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-  font-weight: 600;
-}
-
-.scoreLabel {
-  color: var(--cds-text-secondary);
-}
-
-.scoreValue {
-  font-family: var(--cds-code-font-family, monospace);
-
-  &.hasScore {
-    color: var(--cds-support-success);
-  }
-}
-
-.scoreDivider {
-  color: var(--cds-text-secondary);
-}
-
-.totalScore {
-  font-family: var(--cds-code-font-family, monospace);
-}
-
-// Exam status indicators
-.examStatusBase {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  height: 100%;
-  padding: 0 1rem;
-  font-weight: bold;
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-  cursor: help;
-}
-
-.examStatusLocked {
-  composes: examStatusBase;
-  background-color: color-mix(in srgb, var(--cds-support-error) 12%, transparent);
-  color: var(--cds-support-error);
-}
-
-.examStatusPaused {
-  composes: examStatusBase;
-  background-color: color-mix(in srgb, var(--cds-support-warning) 15%, transparent);
-  color: var(--cds-support-warning);
-}
-
-.examStatusInProgress {
-  composes: examStatusBase;
-  background-color: color-mix(in srgb, var(--cds-support-success) 12%, transparent);
-  color: var(--cds-support-success);
-  cursor: pointer;
-}
-
-.examStatusWarning {
-  composes: examStatusBase;
-  background-color: color-mix(in srgb, var(--cds-support-warning) 15%, transparent);
-  color: var(--cds-support-warning);
-  cursor: pointer;
-}
-
-.examStatusCritical {
-  composes: examStatusBase;
-  background-color: color-mix(in srgb, var(--cds-support-error) 12%, transparent);
-  color: var(--cds-support-error);
-  cursor: pointer;
-}
-
-.examTimeDisplay {
-  font-family: var(--cds-code-font-family, monospace);
-  margin-left: 0.5rem;
-}
-
-// Exit button
-.exitButton {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-// Refresh icon animation
-.refreshing {
-  animation: spin 1s linear infinite;
-}
-
-// Shared animation
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// ── Mobile adjustments ──
-@media (max-width: 900px) {
-  .headerBrand {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .breadcrumb {
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .breadcrumb :global(.cds--breadcrumb-item--current) {
-    display: block;
-    max-width: 8rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .headerActions {
-    display: none !important;
-  }
-}
diff --git a/frontend/src/features/contest/components/layout/ContestLayout.tsx b/frontend/src/features/contest/components/layout/ContestLayout.tsx
deleted file mode 100644
index a7c57772..00000000
--- a/frontend/src/features/contest/components/layout/ContestLayout.tsx
+++ /dev/null
@@ -1,413 +0,0 @@
-import { useState } from "react";
-import { Link, Outlet, useParams } from "react-router-dom";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Header,
-  HeaderGlobalBar,
-  HeaderGlobalAction,
-  Modal,
-  HeaderNavigation,
-} from "@carbon/react";
-import {
-  Maximize,
-  Minimize,
-  Time,
-  Renew,
-  Dashboard,
-  ChevronLeft,
-} from "@carbon/icons-react";
-import { useTranslation } from "react-i18next";
-import ExamModeWrapper from "@/features/contest/components/ExamModeWrapper";
-import ContestPreRegistrationScreen from "@/features/contest/screens/ContestPreRegistrationScreen";
-import ContestHero from "@/features/contest/components/layout/ContestHero";
-import ContestTabs from "@/features/contest/components/layout/ContestTabs";
-import { ContentPage } from "@/shared/layout/ContentPage";
-import { ContestProvider } from "@/features/contest/contexts/ContestContext";
-import { ExamModeMonitorModal } from "@/features/contest/components/modals/ExamModeMonitorModal";
-import ExamStatusBadge from "@/features/contest/components/exam/ExamStatusBadge";
-import { useContestTimers } from "@/features/contest/hooks/useContestTimers";
-import { useContestExamActions } from "@/features/contest/hooks/useContestExamActions";
-import { useContestLayoutState } from "@/features/contest/hooks/useContestLayoutState";
-import {
-  getClassroomContestDashboardPath,
-  getClassroomContestSolvePath,
-} from "@/features/contest/domain/contestRoutePolicy";
-import ExamSubmissionProgressModal from "@/features/contest/components/exam/ExamSubmissionProgressModal";
-import { SideMenu } from "@/features/app/components/SideMenu";
-import { SideMenuToggle } from "@/features/app/components/SideMenuToggle";
-import { UserMenu } from "@/features/app/components/UserMenu";
-import styles from "./ContestLayout.module.scss";
-
-const ContestLayout = () => {
-  const { classroomId } = useParams<{ classroomId?: string }>();
-  const {
-    contestId,
-    contest,
-    contestLoading,
-    contestNotFound,
-    isFullscreen,
-    isRefreshing,
-    isSolvePage,
-    isPaperExamPage,
-    hasEnded,
-    isUpcoming,
-    isAdmin,
-    userScore,
-    totalMaxScore,
-    scoreboardData,
-    refreshContest,
-    navigate,
-  } = useContestLayoutState();
-
-  const boundClassroomId = classroomId || contest?.boundClassroomId || undefined;
-  const { t } = useTranslation("contest");
-  const { t: tc } = useTranslation("common");
-  const dashboardPath =
-    boundClassroomId && contestId
-      ? getClassroomContestDashboardPath(boundClassroomId, contestId)
-      : "/dashboard";
-  const adminPath =
-    boundClassroomId && contestId
-      ? `${dashboardPath}/admin`
-      : "/dashboard";
-
-  const [sideMenuOpen, setSideMenuOpen] = useState(false);
-  const [monitoringModalOpen, setMonitoringModalOpen] = useState(false);
-  const [errorModalOpen, setErrorModalOpen] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-  const lockContestMenu =
-    !!contest?.cheatDetectionEnabled && contest.examStatus === "in_progress";
-
-  const { timeLeft, isCountdownToStart, unlockTimeLeft } = useContestTimers({
-    contest,
-    contestId,
-    refreshContest,
-  });
-
-  const showError = (msg: string) => {
-    setErrorMessage(msg);
-    setErrorModalOpen(true);
-  };
-
-  const handleGoToAnswering = () => {
-    if (!contestId || !contest) return;
-    navigate(
-      boundClassroomId
-        ? getClassroomContestSolvePath(boundClassroomId, contestId)
-        : "/dashboard",
-    );
-  };
-
-  const {
-    handleJoin,
-    handleStartExam,
-    handleEndExam,
-    toggleFullscreen,
-    submissionProgress,
-  } = useContestExamActions({
-    contest,
-    contestId,
-    hasEnded,
-    refreshContest,
-    navigate,
-    messages: {
-      joinError: t("error.joinFailed"),
-      startError: t("error.startExamFailed"),
-      endError: t("error.endExamFailed"),
-      exitError: t("error.exitFailed"),
-    },
-    onError: showError,
-  });
-
-  if (contestLoading) {
-    return (
-      <div className={styles.loadingContainer}>
-        <div className={styles.loadingContent}>
-          <div className={styles.spinner} />
-          <p className={styles.loadingText}>{tc("message.loading")}</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (contestNotFound) {
-    return null;
-  }
-
-  const renderExamStatus = () => (
-    <ExamStatusBadge
-      examStatus={contest?.examStatus}
-      cheatDetectionEnabled={contest?.cheatDetectionEnabled}
-      timeLeft={timeLeft}
-      unlockTimeLeft={unlockTimeLeft}
-      lockReason={contest?.lockReason}
-      autoUnlockAt={contest?.autoUnlockAt}
-      onClick={() => setMonitoringModalOpen(true)}
-    />
-  );
-
-  const renderContestBreadcrumb = () => {
-    const contestName = contest?.name || t("mode");
-    const answeringLabel = t("dashboard.answerLabel", "作答");
-    const showAnsweringBreadcrumb =
-      lockContestMenu || (isSolvePage && contest?.contestType === "coding");
-
-    if (showAnsweringBreadcrumb) {
-      return (
-        <Breadcrumb noTrailingSlash className={styles.breadcrumb}>
-          <BreadcrumbItem>{contestName}</BreadcrumbItem>
-          <BreadcrumbItem isCurrentPage>{answeringLabel}</BreadcrumbItem>
-        </Breadcrumb>
-      );
-    }
-
-    if (boundClassroomId) {
-      return (
-        <Breadcrumb noTrailingSlash className={styles.breadcrumb}>
-          <BreadcrumbItem>
-            <Link to="/dashboard">{tc("nav.dashboard")}</Link>
-          </BreadcrumbItem>
-          <BreadcrumbItem>
-            <Link to={`/classrooms/${boundClassroomId}`}>
-              {tc("nav.classrooms", "教室")}
-            </Link>
-          </BreadcrumbItem>
-          <BreadcrumbItem isCurrentPage>{contestName}</BreadcrumbItem>
-        </Breadcrumb>
-      );
-    }
-
-    return (
-      <Breadcrumb noTrailingSlash className={styles.breadcrumb}>
-        <BreadcrumbItem>
-          <Link to="/dashboard">{tc("nav.dashboard")}</Link>
-        </BreadcrumbItem>
-        <BreadcrumbItem isCurrentPage>{contestName}</BreadcrumbItem>
-      </Breadcrumb>
-    );
-  };
-
-  const renderMainContent = () => {
-    const outletContent = (
-      <ContestProvider initialContest={contest} initialScoreboardData={scoreboardData} onRefresh={refreshContest}>
-        <Outlet context={{ refreshContest }} />
-      </ContestProvider>
-    );
-
-    if (isPaperExamPage) {
-      return outletContent;
-    }
-
-    if (isUpcoming && contest) {
-      return (
-        <div className={styles.scrollableContent}>
-          <ContestPreRegistrationScreen
-            contest={contest}
-            onJoin={handleJoin}
-            isAdmin={isAdmin}
-            onOpenAdminPanel={
-              isAdmin ? () => navigate(adminPath) : undefined
-            }
-          />
-        </div>
-      );
-    }
-
-    if (contest && !contest.hasJoined) {
-      return (
-        <div className={styles.scrollableContent}>
-          <ContestPreRegistrationScreen
-            contest={contest}
-            onJoin={handleJoin}
-            isAdmin={isAdmin}
-            onOpenAdminPanel={
-              isAdmin ? () => navigate(adminPath) : undefined
-            }
-          />
-        </div>
-      );
-    }
-
-    if (isSolvePage) {
-      return outletContent;
-    }
-
-    return (
-      <ContentPage
-        hero={
-          <ContestHero
-            contest={contest}
-            onStartExam={handleStartExam}
-            onEndExam={handleEndExam}
-            onGoToAnswering={handleGoToAnswering}
-            onRefreshContest={refreshContest}
-            maxWidth="1056px"
-          />
-        }
-        stickyHeader={
-            contest ? <ContestTabs contest={contest} maxWidth="1056px" /> : undefined
-        }
-      >
-        {outletContent}
-      </ContentPage>
-    );
-  };
-
-  const examModeProps = {
-    contestId: contestId || "",
-    cheatDetectionEnabled: !!contest?.cheatDetectionEnabled,
-    isExamMonitored: !!contest?.isExamMonitored,
-    requiresFullscreen: !!contest?.requiresFullscreen,
-    hasEnded,
-    lockReason: contest?.lockReason,
-    examStatus: contest?.examStatus,
-    onRefresh: refreshContest,
-  };
-
-  const showContestTimer =
-    contest &&
-    (!contest.cheatDetectionEnabled ||
-      contest.examStatus === "not_started" ||
-      contest.examStatus === "submitted");
-
-  const showScoreDisplay =
-    isSolvePage && contest?.problems && contest.problems.length > 0;
-  const hideSolveNavExtras = isSolvePage && contest?.contestType === "coding";
-  const showContestMenuToggle = !hideSolveNavExtras && !lockContestMenu;
-  const effectiveSideMenuOpen = showContestMenuToggle && sideMenuOpen;
-
-  return (
-    <ExamModeWrapper {...examModeProps}>
-      {isPaperExamPage ? (
-        renderMainContent()
-      ) : (
-        <div className={styles.root}>
-          <Header aria-label={t("header.contestPlatform")}>
-            {showContestMenuToggle ? (
-              <SideMenuToggle
-                isOpen={effectiveSideMenuOpen}
-                onClick={() => setSideMenuOpen((o) => !o)}
-              />
-            ) : hideSolveNavExtras ? (
-              <button
-                type="button"
-                className={`side-menu-toggle ${styles.solveBackButton}`}
-                aria-label={t("adminLayout.header.backToHome", "返回競賽主頁")}
-                title={t("adminLayout.header.backToHome", "返回競賽主頁")}
-                onClick={() => navigate(dashboardPath)}
-              >
-                <ChevronLeft size={20} />
-              </button>
-            ) : null}
-            <div className={styles.headerBrand}>
-              <Link to="/dashboard" className={styles.headerBrandLink}>
-                {tc("header.prefix")}
-              </Link>
-              {renderContestBreadcrumb()}
-            </div>
-
-            <HeaderNavigation aria-label={tc("header.contestNavigation")}>
-              {showContestTimer && !boundClassroomId && (
-                <div className={styles.headerTimerDisplay}>
-                  <Time size={16} />
-                  <span>
-                    {isCountdownToStart
-                      ? t("timeToStart", { time: timeLeft })
-                      : timeLeft}
-                  </span>
-                </div>
-              )}
-
-              {showScoreDisplay && (
-                <div className={styles.headerScoreDisplay}>
-                  <span className={styles.scoreLabel}>{t("overview.scoreLabel")}</span>
-                  <span
-                    className={`${styles.scoreValue} ${userScore > 0 ? styles.hasScore : ""}`}
-                  >
-                    {userScore}
-                  </span>
-                  <span className={styles.scoreDivider}>/</span>
-                  <span className={styles.totalScore}>{totalMaxScore}</span>
-                </div>
-              )}
-            </HeaderNavigation>
-
-            <HeaderGlobalBar>
-              {renderExamStatus()}
-
-              {isAdmin && (
-                <HeaderGlobalAction
-                  aria-label={t("preRegistration.openAdminPanel", "前往管理後台")}
-                  tooltipAlignment="center"
-                  onClick={() => navigate(adminPath)}
-                >
-                  <Dashboard size={20} />
-                </HeaderGlobalAction>
-              )}
-
-              <HeaderGlobalAction
-                aria-label={isRefreshing ? t('action.refreshing') : t("refresh")}
-                tooltipAlignment="center"
-                onClick={isRefreshing ? undefined : refreshContest}
-                className={styles.headerActions}
-              >
-                <Renew size={20} className={isRefreshing ? styles.refreshing : undefined} />
-              </HeaderGlobalAction>
-
-              <HeaderGlobalAction
-                aria-label={isFullscreen ? t("exitFullscreen") : t("enterFullscreen")}
-                tooltipAlignment="center"
-                onClick={toggleFullscreen}
-                className={styles.headerActions}
-              >
-                {isFullscreen ? <Minimize size={20} /> : <Maximize size={20} />}
-              </HeaderGlobalAction>
-
-              <UserMenu
-                contestMode
-                contest={contest}
-                onContestRefresh={refreshContest}
-                settingsOnly={lockContestMenu}
-              />
-            </HeaderGlobalBar>
-
-            {showContestMenuToggle ? (
-              <SideMenu
-                isOpen={effectiveSideMenuOpen}
-                onClose={() => setSideMenuOpen(false)}
-              />
-            ) : null}
-          </Header>
-
-          <ExamModeMonitorModal
-            open={monitoringModalOpen}
-            onRequestClose={() => setMonitoringModalOpen(false)}
-          />
-
-          <div className={styles.mainContent}>
-            <div className={styles.contentWrapper}>
-              {renderMainContent()}
-            </div>
-          </div>
-
-          <ExamSubmissionProgressModal
-            state={submissionProgress.state}
-            onRequestClose={submissionProgress.close}
-          />
-
-          <Modal
-            open={errorModalOpen}
-            modalHeading={tc("message.error")}
-            passiveModal
-            onRequestClose={() => setErrorModalOpen(false)}
-          >
-            <p>{errorMessage}</p>
-          </Modal>
-        </div>
-      )}
-    </ExamModeWrapper>
-  );
-};
-
-export default ContestLayout;
diff --git a/frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx b/frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx
new file mode 100644
index 00000000..08394545
--- /dev/null
+++ b/frontend/src/features/contest/components/layout/ContestWorkspaceLayout.tsx
@@ -0,0 +1,177 @@
+import { useState } from "react";
+import { Outlet, useParams } from "react-router-dom";
+import { InlineLoading, Modal } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+
+import { ContestProvider } from "@/features/contest/contexts/ContestContext";
+import { ContestRuntimeNavigatorProvider } from "@/features/contest/contexts/ContestRuntimeNavigatorContext";
+import ExamModeWrapper from "@/features/contest/components/ExamModeWrapper";
+import ExamSubmissionProgressModal from "@/features/contest/components/exam/ExamSubmissionProgressModal";
+import { useContestExamActions } from "@/features/contest/hooks/useContestExamActions";
+import { useContestLayoutState } from "@/features/contest/hooks/useContestLayoutState";
+import {
+  getClassroomContestPrecheckPath,
+  getClassroomContestSolvePath,
+  shouldRouteToPrecheck,
+} from "@/features/contest/domain/contestRoutePolicy";
+import { hasExamPrecheckPassed } from "@/features/contest/screens/paperExam/hooks";
+
+const PROTECTED_EXAM_STATUSES = new Set([
+  "in_progress",
+  "paused",
+  "locked",
+  "submitted",
+]);
+
+const ContestWorkspaceLayout = () => {
+  const { classroomId } = useParams<{ classroomId?: string }>();
+  const { t } = useTranslation("contest");
+  const { t: tc } = useTranslation("common");
+  const {
+    contestId,
+    contest,
+    contestLoading,
+    contestNotFound,
+    hasEnded,
+    isAdmin,
+    scoreboardData,
+    refreshContest,
+    navigate,
+  } = useContestLayoutState();
+
+  const [errorModalOpen, setErrorModalOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  const boundClassroomId = classroomId || contest?.boundClassroomId || undefined;
+  const precheckPath =
+    boundClassroomId && contestId
+      ? getClassroomContestPrecheckPath(boundClassroomId, contestId)
+      : "/dashboard";
+  const answeringPath =
+    boundClassroomId && contestId
+      ? getClassroomContestSolvePath(boundClassroomId, contestId)
+      : "/dashboard";
+  const adminPath =
+    boundClassroomId && contestId
+      ? `/classrooms/${boundClassroomId}/contest/${contestId}/admin`
+      : "/dashboard";
+
+  const showError = (msg: string) => {
+    setErrorMessage(msg);
+    setErrorModalOpen(true);
+  };
+
+  const handleGoToAnswering = () => {
+    if (!contestId || !contest) return;
+    if (
+      boundClassroomId &&
+      shouldRouteToPrecheck({
+        contest,
+        precheckPassed: hasExamPrecheckPassed(contest.id),
+      })
+    ) {
+      navigate(precheckPath);
+      return;
+    }
+    navigate(answeringPath);
+  };
+
+  const {
+    handleJoin,
+    handleStartExam,
+    handleEndExam,
+    submissionProgress,
+  } = useContestExamActions({
+    contest,
+    contestId,
+    hasEnded,
+    refreshContest,
+    navigate,
+    messages: {
+      joinError: t("error.joinFailed"),
+      startError: t("error.startExamFailed"),
+      endError: t("error.endExamFailed"),
+      exitError: t("error.exitFailed"),
+    },
+    onError: showError,
+  });
+
+  const outlet = (
+    <Outlet
+      context={{
+        refreshContest,
+        onJoin: handleJoin,
+        onStartExam: handleStartExam,
+        onEndExam: handleEndExam,
+        onGoToAnswering: handleGoToAnswering,
+        onOpenAdminPanel: isAdmin ? () => navigate(adminPath) : undefined,
+        isAdmin,
+      }}
+    />
+  );
+
+  const shouldProtectContestSurface =
+    !!contestId &&
+    !!contest &&
+    !!contest.hasJoined &&
+    !!contest.cheatDetectionEnabled &&
+    !!contest.examStatus &&
+    PROTECTED_EXAM_STATUSES.has(contest.examStatus);
+
+  const contestSurface = shouldProtectContestSurface ? (
+    <ExamModeWrapper
+      contestId={contestId || ""}
+      cheatDetectionEnabled={!!contest?.cheatDetectionEnabled}
+      isExamMonitored={!!contest?.isExamMonitored}
+      requiresFullscreen={!!contest?.requiresFullscreen}
+      hasEnded={hasEnded}
+      lockReason={contest?.lockReason}
+      examStatus={contest?.examStatus}
+      onRefresh={refreshContest}
+    >
+      {outlet}
+    </ExamModeWrapper>
+  ) : (
+    outlet
+  );
+
+  if (contestLoading) {
+    return (
+      <div style={{ padding: "2rem" }}>
+        <InlineLoading description={tc("message.loading")} />
+      </div>
+    );
+  }
+
+  if (contestNotFound) {
+    return null;
+  }
+
+  return (
+    <ContestProvider
+      initialContest={contest}
+      initialScoreboardData={scoreboardData}
+      onRefresh={refreshContest}
+    >
+      <ContestRuntimeNavigatorProvider>
+        {contestSurface}
+      </ContestRuntimeNavigatorProvider>
+
+      <ExamSubmissionProgressModal
+        state={submissionProgress.state}
+        onRequestClose={submissionProgress.close}
+      />
+
+      <Modal
+        open={errorModalOpen}
+        modalHeading={tc("message.error")}
+        passiveModal
+        onRequestClose={() => setErrorModalOpen(false)}
+      >
+        <p>{errorMessage}</p>
+      </Modal>
+    </ContestProvider>
+  );
+};
+
+export default ContestWorkspaceLayout;
diff --git a/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx b/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
new file mode 100644
index 00000000..e5e97e86
--- /dev/null
+++ b/frontend/src/features/contest/components/layout/RuntimeRouteWrapper.tsx
@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import type { ReactNode } from 'react';
+import { Modal } from '@carbon/react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+import { isContestEnded } from '@/core/entities/contest.entity';
+import { useDisablePanel } from '@/features/app/contexts/useDisablePanel';
+import ExamSubmissionProgressModal from '@/features/contest/components/exam/ExamSubmissionProgressModal';
+import { useContest } from '@/features/contest/contexts/ContestContext';
+import { useContestExamActions } from '@/features/contest/hooks/useContestExamActions';
+
+interface Props {
+  children: ReactNode;
+}
+
+export const RuntimeRouteWrapper = ({ children }: Props) => {
+  const { t } = useTranslation('contest');
+  const { t: tc } = useTranslation('common');
+  const { contestId } = useParams<{ contestId?: string }>();
+  const navigate = useNavigate();
+  const { contest, loading, refreshContest } = useContest();
+  const hasEnded = !!contest && isContestEnded(contest);
+
+  const [errorOpen, setErrorOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  // Closes right-side AI chat panel for the lifetime of this wrapper
+  useDisablePanel('right');
+
+  const showError = (msg: string) => {
+    setErrorMessage(msg);
+    setErrorOpen(true);
+  };
+
+  const examActions = useContestExamActions({
+    contest,
+    contestId,
+    hasEnded,
+    refreshContest,
+    navigate,
+    messages: {
+      joinError: t('error.joinFailed'),
+      startError: t('error.startExamFailed'),
+      endError: t('error.endExamFailed'),
+      exitError: t('error.exitFailed'),
+    },
+    onError: showError,
+  });
+
+  // Guard: don't render runtime content until contest is loaded. The contest
+  // surface wrapper owns ExamModeWrapper so dashboard and solve share one
+  // monitoring lifecycle.
+  if (loading || !contest) return null;
+
+  return (
+    <>
+      {children}
+
+      <ExamSubmissionProgressModal
+        state={examActions.submissionProgress.state}
+        onRequestClose={examActions.submissionProgress.close}
+      />
+
+      <Modal
+        open={errorOpen}
+        modalHeading={tc('message.error')}
+        passiveModal
+        onRequestClose={() => setErrorOpen(false)}
+      >
+        <p>{errorMessage}</p>
+      </Modal>
+    </>
+  );
+};
+
+export default RuntimeRouteWrapper;
diff --git a/frontend/src/features/contest/components/modals/ContestRegistrationModal.tsx b/frontend/src/features/contest/components/modals/ContestRegistrationModal.tsx
index 2b381751..1a31b777 100644
--- a/frontend/src/features/contest/components/modals/ContestRegistrationModal.tsx
+++ b/frontend/src/features/contest/components/modals/ContestRegistrationModal.tsx
@@ -8,12 +8,12 @@ export interface ContestRegistrationModalProps {
   open: boolean;
   contest: ContestDetail;
   onClose: () => void;
-  onSubmit: (data: { nickname?: string; password?: string }) => void;
+  onSubmit: (data: { password?: string }) => void;
 }
 
 /**
  * 競賽報名確認 Modal
- * 支援私有競賽密碼輸入、匿名模式暱稱設定
+ * 支援私有競賽密碼輸入
  */
 export const ContestRegistrationModal: React.FC<ContestRegistrationModalProps> = ({
   open,
@@ -23,23 +23,17 @@ export const ContestRegistrationModal: React.FC<ContestRegistrationModalProps> =
 }) => {
   const { t } = useTranslation("contest");
   const requiresPassword = contest.requiresPassword ?? contest.visibility === "private";
-  const [nickname, setNickname] = useState("");
   const [password, setPassword] = useState("");
 
   const handleSubmit = () => {
     onSubmit({
-      nickname: nickname || undefined,
       password: password || undefined,
     });
-    // Reset form
-    setNickname("");
     setPassword("");
   };
 
   const handleClose = () => {
     onClose();
-    // Reset form
-    setNickname("");
     setPassword("");
   };
 
@@ -73,37 +67,6 @@ export const ContestRegistrationModal: React.FC<ContestRegistrationModalProps> =
           </div>
         )}
 
-        {/* Anonymous mode nickname input */}
-        {contest.anonymousModeEnabled && (
-          <div>
-            <p style={{ marginBottom: "0.5rem", color: "var(--cds-text-secondary)" }}>
-              {t(
-                "registration.anonymousHint",
-                "本競賽已啟用匿名模式，您可以設定一個暱稱。排行榜和提交列表將顯示您的暱稱而非真實帳號。",
-              )}
-            </p>
-            <TextInput
-              id="registration-nickname"
-              labelText={t("registration.nicknameLabel", "暱稱 (選填)")}
-              placeholder={t("registration.nicknamePlaceholder", "留空則使用預設帳號名稱")}
-              value={nickname}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setNickname(e.target.value)
-              }
-              maxLength={50}
-            />
-            <p
-              style={{
-                fontSize: "0.875rem",
-                color: "var(--cds-text-secondary)",
-                marginTop: "0.5rem",
-              }}
-            >
-              {t("registration.nicknameHint", "您可以在報名後隨時修改暱稱。")}
-            </p>
-          </div>
-        )}
-
         {/* Exam mode warning */}
         {contest.cheatDetectionEnabled && (
           <InlineNotification
diff --git a/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx b/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx
index b2ed1308..1e0ef878 100644
--- a/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx
+++ b/frontend/src/features/contest/components/participants/ParticipantDashboardPane.tsx
@@ -43,14 +43,13 @@ import type {
   ParticipantDashboardDetail,
   ParticipantDashboardStatus,
 } from "@/core/entities/contest.entity";
-import AnswerDisplay from "@/features/contest/components/exam/AnswerDisplay";
 import PaperQuestionOverviewTable from "@/features/contest/components/exam/PaperQuestionOverviewTable";
+import PaperQuestionReportCard from "@/features/contest/components/exam/PaperQuestionReportCard";
 import ContestLogsScreen from "@/features/contest/screens/settings/ContestLogsScreen";
 import { questionTypeLabel } from "@/features/contest/screens/settings/grading/gradingTypes";
 import { useContestSubmissions } from "@/features/contest/hooks/useContestSubmissions";
 import { OverviewDataCards } from "@/shared/ui/dataCard";
 import ContainerCard from "@/shared/layout/ContainerCard";
-import MarkdownRenderer from "@/shared/ui/markdown/MarkdownRenderer";
 import { useTheme } from "@/shared/ui/theme/ThemeContext";
 
 import styles from "./ContestParticipantsDashboard.module.scss";
@@ -403,10 +402,7 @@ const ParticipantDashboardPane: React.FC<ParticipantDashboardPaneProps> = ({
                       <div className={styles.profileIdentity}>
                         <div className={styles.profileNameRow}>
                           <span className={styles.primaryText}>
-                            {participant.userDisplayName ||
-                              participant.displayName ||
-                              participant.nickname ||
-                              participant.username}
+                            {participant.displayName || participant.username}
                           </span>
                           <Tag
                             size="sm"
@@ -530,13 +526,13 @@ const ParticipantDashboardPane: React.FC<ParticipantDashboardPaneProps> = ({
                         {[
                           {
                             icon: UserMultiple,
-                            label: t("dashboard.username", "使用者"),
+                            label: t("dashboard.username", "使用者名稱"),
                             value: participant.username || "-",
                           },
                           {
                             icon: UserMultiple,
                             label: t("dashboard.displayName", "顯示名稱"),
-                            value: participant.userDisplayName || "-",
+                            value: participant.displayName || "-",
                           },
                           {
                             icon: UserMultiple,
@@ -653,57 +649,28 @@ const ParticipantDashboardPane: React.FC<ParticipantDashboardPaneProps> = ({
                     </h5>
                     <div className={styles.questionList}>
                       {paperReport.questionDetails.map((row) => (
-                        <div
+                        <PaperQuestionReportCard
                           key={row.questionId}
-                          className={styles.questionItem}
-                        >
-                          <div className={styles.questionHeader}>
-                            <div>
-                              <div className={styles.primaryText}>
-                                Q{row.index} ·{" "}
-                                {t(
-                                  `common:questionType.label.${row.questionType}`,
-                                  questionTypeLabel[row.questionType],
-                                )}
-                              </div>
-                              <div className={styles.secondaryText}>
-                                {row.score ?? "-"} / {row.maxScore}
-                                {row.gradedByUsername
-                                  ? ` • ${row.gradedByUsername}`
-                                  : ""}
-                              </div>
-                            </div>
-                            <Tag type={toTagType(row.status)}>
-                              {row.status.label}
-                            </Tag>
-                          </div>
-                          <div className={styles.questionBody}>
-                            <div className={styles.markdownBlock}>
-                              <MarkdownRenderer enableMath enableHighlight>
-                                {row.prompt}
-                              </MarkdownRenderer>
-                            </div>
-                            <AnswerDisplay
-                              questionType={row.questionType}
-                              answerContent={row.answer}
-                              options={row.options}
-                              correctAnswer={row.correctAnswer}
-                              explanation={row.explanation}
-                            />
-                            {row.feedback ? (
-                              <div>
-                                <div className={styles.secondaryText}>
-                                  {t("dashboard.feedback", "批改評語")}
-                                </div>
-                                <div className={styles.markdownBlock}>
-                                  <MarkdownRenderer enableMath enableHighlight>
-                                    {row.feedback}
-                                  </MarkdownRenderer>
-                                </div>
-                              </div>
-                            ) : null}
-                          </div>
-                        </div>
+                          questionId={row.questionId}
+                          index={row.index}
+                          questionType={row.questionType}
+                          typeLabel={t(
+                            `common:questionType.label.${row.questionType}`,
+                            questionTypeLabel[row.questionType],
+                          )}
+                          prompt={row.prompt}
+                          options={row.options}
+                          answer={row.answer}
+                          statusLabel={row.status.label}
+                          statusTone={toTagType(row.status)}
+                          showGrading
+                          score={row.score}
+                          maxScore={row.maxScore}
+                          gradedByUsername={row.gradedByUsername}
+                          feedback={row.feedback}
+                          correctAnswer={row.correctAnswer}
+                          explanation={row.explanation}
+                        />
                       ))}
                     </div>
                   </div>
diff --git a/frontend/src/features/contest/components/participants/ParticipantOperationsPane.tsx b/frontend/src/features/contest/components/participants/ParticipantOperationsPane.tsx
index 95aa88ce..4297ef26 100644
--- a/frontend/src/features/contest/components/participants/ParticipantOperationsPane.tsx
+++ b/frontend/src/features/contest/components/participants/ParticipantOperationsPane.tsx
@@ -47,10 +47,8 @@ interface ParticipantOperationsPaneProps {
   showViolationKpi?: boolean;
 }
 
-const getParticipantDisplayName = (participant: ContestParticipant) =>
-  participant.userDisplayName ||
+const getProfileDisplayName = (participant: ContestParticipant) =>
   participant.displayName ||
-  participant.nickname ||
   participant.username;
 
 const formatClockTime = (value?: string | null) => {
@@ -127,7 +125,7 @@ const ParticipantOperationsPane = ({
   }
 
   const participant = dashboard.participant;
-  const displayName = getParticipantDisplayName(participant);
+  const profileDisplayName = getProfileDisplayName(participant);
   const primaryAction = dashboard.actions.canUnlock
     ? {
         label: t("participants.actions.unlock", "解除鎖定"),
@@ -238,7 +236,9 @@ const ParticipantOperationsPane = ({
         <div className={styles.operationsHeroTop}>
           <div className={styles.operationsIdentity}>
             <div className={styles.operationsTitleRow}>
-              <h2 className={styles.operationsTitle}>{displayName}</h2>
+              <h2 className={styles.operationsTitle}>
+                {profileDisplayName}
+              </h2>
             </div>
             <p className={styles.operationsSubtitle}>@{participant.username}</p>
           </div>
diff --git a/frontend/src/features/contest/components/participants/ParticipantsListPane.test.tsx b/frontend/src/features/contest/components/participants/ParticipantsListPane.test.tsx
index 8f3f4459..121d9da8 100644
--- a/frontend/src/features/contest/components/participants/ParticipantsListPane.test.tsx
+++ b/frontend/src/features/contest/components/participants/ParticipantsListPane.test.tsx
@@ -27,7 +27,6 @@ const participant: ContestParticipant = {
   userId: "1",
   username: "student1",
   displayName: "Student One",
-  userDisplayName: "Real Name",
   accountRole: "student",
   authProvider: "google",
   score: 90,
@@ -50,7 +49,9 @@ describe("ParticipantsListPane", () => {
     );
 
     expect(screen.getByText("顯示 1 / 3 位")).toBeInTheDocument();
-    fireEvent.click(screen.getByText("Real Name"));
+    expect(screen.getByText("Student One")).toBeInTheDocument();
+    expect(screen.getByText("@student1")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Student One"));
     expect(onSelect).toHaveBeenCalledWith("1");
   });
 
@@ -65,7 +66,7 @@ describe("ParticipantsListPane", () => {
       />,
     );
 
-    expect(screen.queryByText("顯示名稱 Real Name")).not.toBeInTheDocument();
+    expect(screen.queryByText("顯示名稱 Student One")).not.toBeInTheDocument();
     expect(screen.queryByText("身份 student")).not.toBeInTheDocument();
     expect(screen.queryByText("註冊身份 SSO")).not.toBeInTheDocument();
   });
diff --git a/frontend/src/features/contest/components/participants/ParticipantsListPane.tsx b/frontend/src/features/contest/components/participants/ParticipantsListPane.tsx
index 6032d908..b218f8f6 100644
--- a/frontend/src/features/contest/components/participants/ParticipantsListPane.tsx
+++ b/frontend/src/features/contest/components/participants/ParticipantsListPane.tsx
@@ -29,10 +29,8 @@ interface ParticipantsListPaneProps {
   onSelect: (userId: string) => void;
 }
 
-const getParticipantDisplayName = (participant: ContestParticipant) =>
-  participant.userDisplayName ||
+const getProfileDisplayName = (participant: ContestParticipant) =>
   participant.displayName ||
-  participant.nickname ||
   participant.username;
 
 const NEEDS_ATTENTION_STATUSES = new Set(["locked", "paused"]);
@@ -113,7 +111,7 @@ const ParticipantsListPane: React.FC<ParticipantsListPaneProps> = ({
             <div className={styles.gridCardHeader}>
               <div className={styles.gridCardIdentity}>
                 <ListItemTitle className={styles.gridCardName}>
-                  {getParticipantDisplayName(participant)}
+                  {getProfileDisplayName(participant)}
                 </ListItemTitle>
                 <ListItemMeta className={styles.gridCardUsername}>
                   @{participant.username}
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
new file mode 100644
index 00000000..335e843d
--- /dev/null
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboard.module.scss
@@ -0,0 +1,170 @@
+// 此 module 只保留 student dashboard 內部 list / chart / tab content 的局部樣式。
+// 頁面層級 layout、title、metric、time 已改用 @/shared/components/dashboard 元件。
+
+.tagRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+}
+
+.tabPanel {
+  padding: 0;
+}
+
+.tabContent {
+  display: grid;
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+.actionStack,
+.modalStack {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.progressTrack {
+  position: relative;
+  block-size: 0.5rem;
+  margin-top: 0.75rem;
+  overflow: hidden;
+  background: var(--cds-layer-accent-01);
+}
+
+.progressFill {
+  block-size: 100%;
+  min-inline-size: 0;
+  background: var(--cds-support-success);
+}
+
+.scoreDistributionChart {
+  min-height: 11.25rem;
+  margin-top: 0.75rem;
+  overflow: hidden;
+}
+
+.chartSkeleton {
+  width: 100%;
+  height: 11.25rem;
+}
+
+.rulesContent {
+  color: var(--cds-text-primary);
+}
+
+.announcementList {
+  display: grid;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.announcementItem {
+  display: grid;
+  gap: 0.75rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--cds-border-subtle);
+}
+
+.announcementItem:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+
+.announcementMeta {
+  flex: 0 0 auto;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.announcementContent {
+  color: var(--cds-text-primary);
+}
+
+.warningIcon {
+  color: var(--cds-support-warning);
+}
+
+.successIcon {
+  color: var(--cds-support-success);
+}
+
+.recordMeta,
+.emptyText {
+  color: var(--cds-text-secondary);
+}
+
+.recordMeta {
+  margin-top: 0.25rem;
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+}
+
+.recordTitle {
+  color: var(--cds-text-primary);
+  font-size: var(--cds-body-compact-02-font-size, 1rem);
+  font-weight: 600;
+  line-height: var(--cds-body-compact-02-line-height, 1.375);
+}
+
+.recordScore {
+  color: var(--cds-text-primary);
+  font-family: var(--cds-code-font-family, monospace);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.problemReportList {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.problemReportItem {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem;
+  border: 1px solid var(--cds-border-subtle);
+}
+
+.problemReportMeta {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.questionList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.errorText {
+  margin: 1rem 0 0;
+  color: var(--cds-text-error);
+}
+
+.emptyText {
+  margin: 0;
+}
+
+@media (max-width: 672px) {
+  .tabContent {
+    padding: 1rem;
+  }
+
+  .problemReportItem {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .problemReportMeta {
+    justify-content: flex-start;
+  }
+
+  .recordScore {
+    white-space: normal;
+  }
+}
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
new file mode 100644
index 00000000..8bfa3274
--- /dev/null
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.test.tsx
@@ -0,0 +1,464 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { ChangeEventHandler, ReactNode } from "react";
+import type {
+  ContestDetail,
+} from "@/core/entities/contest.entity";
+import { getExamQuestions } from "@/infrastructure/api/repositories/examQuestions.repository";
+import {
+  getExamResults,
+  getMyExamAnswers,
+} from "@/infrastructure/api/repositories/examAnswers.repository";
+import { getExamDashboardSummary } from "@/infrastructure/api/repositories/exam.repository";
+import { getContestAnnouncements } from "@/infrastructure/api/repositories/contestAnnouncements.repository";
+import StudentContestDashboard from "./StudentContestDashboardView";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (_key: string, fallback?: string) => fallback ?? _key,
+  }),
+  initReactI18next: {
+    type: "3rdParty",
+    init: () => {},
+  },
+}));
+
+vi.mock("@carbon/react", () => ({
+  Button: ({
+    children,
+    disabled,
+    onClick,
+  }: {
+    children: ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+  }) => (
+    <button type="button" disabled={disabled} onClick={onClick}>
+      {children}
+    </button>
+  ),
+  InlineNotification: ({
+    title,
+    subtitle,
+  }: {
+    title: ReactNode;
+    subtitle: ReactNode;
+  }) => (
+    <div>
+      <span>{title}</span>
+      <span>{subtitle}</span>
+    </div>
+  ),
+  Modal: ({
+    open,
+    children,
+  }: {
+    open: boolean;
+    children: ReactNode;
+  }) => (open ? <div role="dialog">{children}</div> : null),
+  Select: ({
+    children,
+    value,
+    onChange,
+  }: {
+    children: ReactNode;
+    value: string;
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+  }) => (
+    <select value={value} onChange={onChange}>
+      {children}
+    </select>
+  ),
+  SelectItem: ({ value, text }: { value: string; text: string }) => (
+    <option value={value}>{text}</option>
+  ),
+  ProgressBar: ({ value }: { value: number }) => (
+    <div data-testid="progress-bar" data-value={value} />
+  ),
+  SkeletonPlaceholder: () => <div data-testid="skeleton-placeholder" />,
+  Tab: ({ children }: { children: ReactNode }) => (
+    <button type="button">{children}</button>
+  ),
+  TabList: ({
+    children,
+    ...props
+  }: {
+    children: ReactNode;
+    "aria-label"?: string;
+  }) => (
+    <div role="tablist" aria-label={props["aria-label"]}>
+      {children}
+    </div>
+  ),
+  TabPanel: ({ children }: { children: ReactNode }) => (
+    <div role="tabpanel">{children}</div>
+  ),
+  TabPanels: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Tabs: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Tag: ({ children }: { children: ReactNode }) => <span>{children}</span>,
+  TextInput: () => <input aria-label="text input" />,
+}));
+
+vi.mock("@carbon/charts-react", () => ({
+  LollipopChart: () => <div data-testid="score-distribution-chart" />,
+}));
+
+vi.mock("@/shared/ui/theme/ThemeContext", () => ({
+  useTheme: () => ({ theme: "white" }),
+}));
+
+vi.mock("@carbon/icons-react", () => {
+  const Icon = () => <span aria-hidden="true" />;
+  return {
+    Checkmark: Icon,
+    Document: Icon,
+    Flag: Icon,
+    Launch: Icon,
+    Login: Icon,
+    Play: Icon,
+    Renew: Icon,
+    Time: Icon,
+    WarningAlt: Icon,
+  };
+});
+
+vi.mock("@/shared/ui/markdown/MarkdownRenderer", () => ({
+  default: ({ children }: { children: string }) => <div>{children}</div>,
+}));
+
+vi.mock("@/features/contest/components/modals/ContestRegistrationModal", () => ({
+  ContestRegistrationModal: ({ open }: { open: boolean }) =>
+    open ? <div>registration modal</div> : null,
+}));
+
+vi.mock("@/infrastructure/api/repositories", () => ({
+  downloadMyReport: vi.fn(),
+}));
+
+vi.mock("@/infrastructure/api/repositories/examQuestions.repository", () => ({
+  getExamQuestions: vi.fn(async () => []),
+}));
+
+vi.mock("@/infrastructure/api/repositories/examAnswers.repository", () => ({
+  getExamResults: vi.fn(async () => []),
+  getMyExamAnswers: vi.fn(async () => []),
+}));
+
+vi.mock("@/infrastructure/api/repositories/exam.repository", () => ({
+  getExamDashboardSummary: vi.fn(async () => ({
+    contest: {
+      id: "contest-1",
+      name: "測試競賽",
+      course: "",
+      contest_type: "paper_exam",
+      participant_count: 2,
+      completed_count: 2,
+      results_published: true,
+    },
+    summary: {
+      average_score: 75,
+      median_score: 75,
+      max_total_score: 100,
+    },
+    score_distribution: [
+      { range_label: "0-9%", count: 0 },
+      { range_label: "10-19%", count: 0 },
+      { range_label: "20-29%", count: 0 },
+      { range_label: "30-39%", count: 0 },
+      { range_label: "40-49%", count: 0 },
+      { range_label: "50-59%", count: 1 },
+      { range_label: "60-69%", count: 0 },
+      { range_label: "70-79%", count: 1 },
+      { range_label: "80-89%", count: 0 },
+      { range_label: "90-100%", count: 0 },
+    ],
+    questions: [],
+  })),
+}));
+
+vi.mock("@/infrastructure/api/repositories/contestAnnouncements.repository", () => ({
+  getContestAnnouncements: vi.fn(() => new Promise(() => {})),
+}));
+
+const createContest = (
+  overrides: Partial<ContestDetail> = {},
+): ContestDetail =>
+  ({
+    id: "contest-1",
+    name: "測試競賽",
+    description: "競賽說明",
+    startTime: "2099-05-05T10:00:00.000Z",
+    endTime: "2099-05-05T12:00:00.000Z",
+    status: "published",
+    visibility: "public",
+    hasJoined: true,
+    isRegistered: true,
+    contestType: "coding",
+    deliveryMode: "exam",
+    countsTowardGrade: true,
+    cheatDetectionEnabled: false,
+    scoreboardVisibleDuringContest: false,
+    allowMultipleJoins: false,
+    maxCheatWarnings: 3,
+    allowAutoUnlock: false,
+    autoUnlockMinutes: 0,
+    resultsPublished: false,
+    examQuestionsCount: 0,
+    isExamMonitored: false,
+    requiresFullscreen: false,
+    canSubmitExam: true,
+    examStatus: "not_started",
+    permissions: {
+      canSwitchView: true,
+      canEditContest: false,
+      canToggleStatus: false,
+      canDeleteContest: false,
+      canPublishProblems: false,
+      canViewAllSubmissions: false,
+      canViewFullScoreboard: false,
+      canManageClarifications: false,
+    },
+    problems: [
+      {
+        id: "binding-1",
+        problemId: "problem-1",
+        label: "A",
+        title: "Two Sum",
+        score: 50,
+        maxScore: 50,
+      },
+    ],
+    rules: "規則",
+    ...overrides,
+  }) as ContestDetail;
+
+const renderDashboard = (
+  contest: ContestDetail,
+) =>
+  render(
+    <StudentContestDashboard
+      contest={contest}
+    />,
+  );
+
+describe("StudentContestDashboard", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders pre-exam join state inside the dashboard", () => {
+    renderDashboard(
+      createContest({
+        hasJoined: false,
+        isRegistered: false,
+      }),
+    );
+
+    expect(screen.getByRole("main", { name: "學生競賽首頁" })).toBeInTheDocument();
+    expect(screen.getByText("總時長")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /加入競賽/ })).toBeInTheDocument();
+  });
+
+  // 公告 block 暫時於 view 中隱藏（SHOW_ANNOUNCEMENTS=false），啟用時恢復此測試
+  it.skip("renders contest announcements above the tabs", async () => {
+    vi.mocked(getContestAnnouncements).mockResolvedValueOnce([
+      {
+        id: "ann-1",
+        title: "考試公告",
+        content: "請準時進入考場",
+        created_at: "2099-05-05T09:00:00.000Z",
+        updated_at: "2099-05-05T09:00:00.000Z",
+        created_by: { username: "teacher" },
+      },
+    ]);
+
+    renderDashboard(createContest());
+
+    expect(await screen.findByText("考試公告")).toBeInTheDocument();
+    expect(screen.getByText("請準時進入考場")).toBeInTheDocument();
+    expect(screen.getByRole("tablist", { name: "競賽資訊切換" })).toBeInTheDocument();
+  });
+
+  it("does not show answer records before the participant starts", () => {
+    renderDashboard(createContest());
+
+    expect(screen.getByText("總時長")).toBeInTheDocument();
+    expect(screen.getByText("尚無作答紀錄。")).toBeInTheDocument();
+    expect(screen.queryByText("Two Sum")).not.toBeInTheDocument();
+  });
+
+  it("renders in-exam progress and answering action", () => {
+    renderDashboard(
+      createContest({
+        startTime: "2000-05-05T10:00:00.000Z",
+        endTime: "2099-05-05T12:00:00.000Z",
+        examStatus: "in_progress",
+        problems: [
+          {
+            id: "binding-1",
+            problemId: "problem-1",
+            label: "A",
+            title: "Two Sum",
+            score: 50,
+            maxScore: 50,
+            userStatus: "AC",
+          },
+        ],
+      }),
+    );
+
+    expect(screen.getByText("總時長")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /回到作答/ })).toBeInTheDocument();
+    expect(screen.getByText("100%")).toBeInTheDocument();
+    expect(screen.queryByText("已完成")).not.toBeInTheDocument();
+    expect(screen.queryByText("已嘗試")).not.toBeInTheDocument();
+  });
+
+  it("renders in-exam paper progress from autosaved answers", async () => {
+    vi.mocked(getExamQuestions).mockResolvedValueOnce([
+      {
+        id: "question-1",
+        contestId: "contest-1",
+        questionType: "short_answer",
+        prompt: "Explain",
+        options: [],
+        explanation: "",
+        score: 10,
+        order: 1,
+        createdAt: "2000-05-05T10:00:00.000Z",
+        updatedAt: "2000-05-05T10:00:00.000Z",
+      },
+      {
+        id: "question-2",
+        contestId: "contest-1",
+        questionType: "single_choice",
+        prompt: "Choose",
+        options: ["A", "B"],
+        explanation: "",
+        score: 5,
+        order: 2,
+        createdAt: "2000-05-05T10:00:00.000Z",
+        updatedAt: "2000-05-05T10:00:00.000Z",
+      },
+    ]);
+    vi.mocked(getMyExamAnswers).mockResolvedValueOnce([
+      {
+        id: "answer-1",
+        questionId: "question-1",
+        answer: { text: "draft answer" },
+        createdAt: "2000-05-05T10:10:00.000Z",
+        updatedAt: "2000-05-05T10:10:00.000Z",
+      },
+    ]);
+
+    renderDashboard(
+      createContest({
+        contestType: "paper_exam",
+        startTime: "2000-05-05T10:00:00.000Z",
+        endTime: "2099-05-05T12:00:00.000Z",
+        examStatus: "in_progress",
+        examQuestionsCount: 2,
+        problems: [],
+      }),
+    );
+
+    expect(await screen.findByText("目前作答狀況")).toBeInTheDocument();
+    expect(await screen.findByText("50%")).toBeInTheDocument();
+    expect(screen.queryByText("已完成")).not.toBeInTheDocument();
+    expect(screen.queryByText("已嘗試")).not.toBeInTheDocument();
+    expect(screen.getByText("已作答")).toBeInTheDocument();
+    expect(screen.getByText("未作答")).toBeInTheDocument();
+    expect(screen.getByText("draft answer")).toBeInTheDocument();
+    expect(getMyExamAnswers).toHaveBeenCalledWith("contest-1");
+    expect(getExamResults).not.toHaveBeenCalled();
+  });
+
+  it("renders post-exam answer report and score distribution", async () => {
+    renderDashboard(
+      createContest({
+        contestType: "paper_exam",
+        startTime: "2000-05-05T10:00:00.000Z",
+        endTime: "2000-05-05T12:00:00.000Z",
+        examStatus: "submitted",
+        resultsPublished: true,
+        problems: [],
+      }),
+    );
+
+    expect(screen.getByText("考試成績")).toBeInTheDocument();
+    expect(screen.queryByText("成績單與分數分佈")).not.toBeInTheDocument();
+    expect(screen.queryByText("作答狀態")).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /下載成績單/ })).toBeInTheDocument();
+    expect(await screen.findByText("成績分布")).toBeInTheDocument();
+    expect(screen.getByText("平均 75.0 / 100")).toBeInTheDocument();
+    expect(screen.getByTestId("score-distribution-chart")).toBeInTheDocument();
+    expect(getExamDashboardSummary).toHaveBeenCalledWith("contest-1");
+  });
+
+  it("shows rejoin action after submission when multiple joins are allowed", () => {
+    renderDashboard(
+      createContest({
+        startTime: "2000-05-05T10:00:00.000Z",
+        endTime: "2099-05-05T12:00:00.000Z",
+        examStatus: "submitted",
+        allowMultipleJoins: true,
+      }),
+    );
+
+    expect(screen.getByRole("button", { name: /下載作答證明/ })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /重新加入/ })).toBeInTheDocument();
+  });
+
+  it("renders published paper exam score from answer results", async () => {
+    vi.mocked(getExamQuestions).mockResolvedValueOnce([
+      {
+        id: "question-1",
+        contestId: "contest-1",
+        questionType: "short_answer",
+        prompt: "Explain",
+        options: [],
+        explanation: "",
+        score: 10,
+        order: 1,
+        createdAt: "2000-05-05T10:00:00.000Z",
+        updatedAt: "2000-05-05T10:00:00.000Z",
+      },
+    ]);
+    vi.mocked(getExamResults).mockResolvedValueOnce([
+      {
+        id: "answer-1",
+        questionId: "question-1",
+        answer: { text: "answer" },
+        createdAt: "2000-05-05T10:10:00.000Z",
+        updatedAt: "2000-05-05T10:10:00.000Z",
+        isCorrect: null,
+        score: 8,
+        feedback: "Good",
+        gradedByUsername: "teacher",
+        gradedAt: "2000-05-05T11:00:00.000Z",
+      },
+    ]);
+
+    renderDashboard(
+      createContest({
+        contestType: "paper_exam",
+        startTime: "2000-05-05T10:00:00.000Z",
+        endTime: "2000-05-05T12:00:00.000Z",
+        examStatus: "submitted",
+        resultsPublished: true,
+        examQuestionsCount: 1,
+        problems: [],
+      }),
+    );
+
+    expect(await screen.findAllByText("8 / 10")).not.toHaveLength(0);
+    expect(screen.getByText("考試成績")).toBeInTheDocument();
+    expect(screen.getByText("Good")).toBeInTheDocument();
+    expect(screen.getByText("作答紀錄與成績")).toBeInTheDocument();
+    expect(screen.queryByText("相關頁面")).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
new file mode 100644
index 00000000..bf51212c
--- /dev/null
+++ b/frontend/src/features/contest/components/studentDashboard/StudentContestDashboardView.tsx
@@ -0,0 +1,1169 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { ScaleTypes } from "@carbon/charts";
+import { LollipopChart } from "@carbon/charts-react";
+import "@carbon/charts-react/styles.css";
+import {
+  Button,
+  InlineNotification,
+  Modal,
+  Select,
+  SelectItem,
+  SkeletonPlaceholder,
+  Tag,
+} from "@carbon/react";
+import {
+  Checkmark,
+  Document,
+  Flag,
+  Launch,
+  Login,
+  Play,
+  Renew,
+  Time,
+  WarningAlt,
+} from "@carbon/icons-react";
+import { useTranslation } from "react-i18next";
+
+import type {
+  ContestAnnouncement,
+  ContestDetail,
+  ExamQuestion,
+  ExamQuestionType,
+} from "@/core/entities/contest.entity";
+import {
+  getContestState,
+  getContestStateColor,
+  getContestStateLabel,
+} from "@/core/entities/contest.entity";
+import { downloadMyReport } from "@/infrastructure/api/repositories";
+import { getContestAnnouncements } from "@/infrastructure/api/repositories/contestAnnouncements.repository";
+import {
+  getExamDashboardSummary,
+  type ExamDashboardSummaryDto,
+} from "@/infrastructure/api/repositories/exam.repository";
+import { mapContestAnnouncementDto } from "@/infrastructure/mappers/contest.mapper";
+import { getExamQuestions } from "@/infrastructure/api/repositories/examQuestions.repository";
+import {
+  getExamResults,
+  getMyExamAnswers,
+  type ExamAnswer,
+  type ExamAnswerDetail,
+} from "@/infrastructure/api/repositories/examAnswers.repository";
+import MarkdownRenderer from "@/shared/ui/markdown/MarkdownRenderer";
+import { useTheme } from "@/shared/ui/theme/ThemeContext";
+import { formatDate } from "@/shared/utils/format";
+import { useInterval } from "@/shared/hooks/useInterval";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardPage,
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  KPIBlock,
+  MetricBlock,
+} from "@/shared/components/dashboard";
+import { CountdownProgress } from "@/features/contest/components/CountdownProgress";
+import { ContestRegistrationModal } from "@/features/contest/components/modals/ContestRegistrationModal";
+import PaperQuestionReportCard from "@/features/contest/components/exam/PaperQuestionReportCard";
+import { getMarkedQuestionIds } from "@/features/contest/screens/paperExam/hooks";
+import {
+  buildCodingProgressSummary,
+  formatCompactDuration,
+  resolveStudentContestPhase,
+} from "./studentDashboardState";
+import styles from "./StudentContestDashboard.module.scss";
+
+interface StudentContestDashboardProps {
+  contest: ContestDetail;
+  onJoin?: (data?: { password?: string }) => void;
+  onStartExam?: () => void;
+  onEndExam?: () => void;
+  onGoToAnswering?: () => void;
+  onOpenAdminPanel?: () => void;
+  onRefreshContest?: () => Promise<void>;
+  isAdmin?: boolean;
+}
+
+interface PaperExamDashboardData {
+  loading: boolean;
+  error: string | null;
+  questions: ExamQuestion[];
+  answers: ExamAnswer[];
+  results: ExamAnswerDetail[];
+}
+
+const EMPTY_PAPER_DATA: PaperExamDashboardData = {
+  loading: false,
+  error: null,
+  questions: [],
+  answers: [],
+  results: [],
+};
+
+const isParticipant = (contest: ContestDetail): boolean =>
+  contest.hasJoined;
+
+const QUESTION_TYPE_LABEL: Record<string, string> = {
+  true_false: "是非題",
+  single_choice: "單選題",
+  multiple_choice: "多選題",
+  short_answer: "簡答題",
+  essay: "申論題",
+};
+
+const PASSING_SCORE_THRESHOLD_PERCENT = 60;
+
+// 公告 block 暫時隱藏（資料拉取與渲染邏輯保留，flip 為 true 即可恢復）
+const SHOW_ANNOUNCEMENTS = false;
+
+const resolveCarbonChartTheme = (
+  theme: string,
+): "white" | "g10" | "g90" | "g100" => {
+  switch (theme) {
+    case "g10":
+    case "g90":
+    case "g100":
+    case "white":
+      return theme;
+    default:
+      return "white";
+  }
+};
+
+const getBucketUpperPercent = (label: string): number | null => {
+  const values = label.match(/\d+(?:\.\d+)?/g)?.map(Number) ?? [];
+  if (values.length === 0) return null;
+  return Math.max(...values);
+};
+
+const isFailingScoreBucket = (label: string) => {
+  const upperPercent = getBucketUpperPercent(label);
+  return (
+    upperPercent !== null && upperPercent < PASSING_SCORE_THRESHOLD_PERCENT
+  );
+};
+
+const buildPaperProgressSummary = (
+  questions: ExamQuestion[],
+  answers: Array<Pick<ExamAnswer, "questionId"> & Partial<Pick<ExamAnswerDetail, "score">>>,
+  resultsPublished: boolean,
+) => {
+  const resultQuestionIds = new Set(answers.map((answer) => answer.questionId));
+  const completedItems = questions.filter((question) =>
+    resultQuestionIds.has(String(question.id)),
+  ).length;
+  const totalScore = resultsPublished
+    ? answers.reduce((sum, answer) => sum + (answer.score ?? 0), 0)
+    : null;
+  const maxScore = questions.reduce(
+    (sum, question) => sum + (question.score ?? 0),
+    0,
+  );
+  return {
+    totalItems: questions.length,
+    completedItems,
+    attemptedItems: completedItems,
+    totalScore,
+    maxScore,
+  };
+};
+
+export default function StudentContestDashboard({
+  contest,
+  onJoin,
+  onStartExam,
+  onEndExam,
+  onGoToAnswering,
+  onOpenAdminPanel,
+  onRefreshContest,
+  isAdmin = false,
+}: StudentContestDashboardProps) {
+  const { t } = useTranslation("contest");
+  const { t: tc } = useTranslation("common");
+  const { theme } = useTheme();
+  const tr = useCallback(
+    (
+      key: string,
+      defaultValue: string,
+      values?: Record<string, string | number>,
+    ) => {
+      const translated = values
+        ? t(key, { defaultValue, ...values })
+        : t(key, defaultValue);
+      if (typeof translated === "string") return translated;
+      return defaultValue.replace(/{{(\w+)}}/g, (_, name) =>
+        String(values?.[name] ?? ""),
+      );
+    },
+    [t],
+  );
+  const [nowMs, setNowMs] = useState(() => Date.now());
+  const [infoTab, setInfoTab] = useState<"rules" | "records">("rules");
+  const [showRegisterModal, setShowRegisterModal] = useState(false);
+  const [showEndConfirm, setShowEndConfirm] = useState(false);
+  const [showReportModal, setShowReportModal] = useState(false);
+  const [reportLanguage, setReportLanguage] = useState("zh-TW");
+  const [reportDownloading, setReportDownloading] = useState(false);
+  const [reportError, setReportError] = useState<string | null>(null);
+  const [paperData, setPaperData] =
+    useState<PaperExamDashboardData>(EMPTY_PAPER_DATA);
+  const [scoreSummary, setScoreSummary] =
+    useState<ExamDashboardSummaryDto | null>(null);
+  const [scoreSummaryLoading, setScoreSummaryLoading] = useState(false);
+  const [scoreSummaryError, setScoreSummaryError] = useState<string | null>(null);
+  const [announcements, setAnnouncements] = useState<ContestAnnouncement[]>([]);
+  const [announcementsLoading, setAnnouncementsLoading] = useState(true);
+  const [announcementsError, setAnnouncementsError] = useState<string | null>(null);
+  const [paperReloadKey, setPaperReloadKey] = useState(0);
+  const [markedQuestionIds, setMarkedQuestionIds] = useState<Set<string>>(
+    () => getMarkedQuestionIds(contest.id),
+  );
+
+  const phase = resolveStudentContestPhase(contest, nowMs);
+  const participant = isParticipant(contest);
+  const requiresPassword =
+    contest.requiresPassword ?? contest.visibility === "private";
+  const contestState = getContestState({
+    status: contest.status,
+    startTime: contest.startTime,
+    endTime: contest.endTime,
+  });
+  const examStatus = contest.examStatus ?? "not_started";
+  const hasAnswerRecord =
+    contest.resultsPublished ||
+    examStatus !== "not_started" ||
+    !!contest.hasStarted ||
+    !!contest.startedAt ||
+    !!contest.submittedAt ||
+    contest.problems.some((problem) => !!problem.userStatus);
+  const shouldLoadPaperData =
+    contest.contestType === "paper_exam" &&
+    participant &&
+    hasAnswerRecord &&
+    phase !== "before";
+
+  useInterval(() => setNowMs(Date.now()), phase !== "after" ? 1000 : null);
+
+  useEffect(() => {
+    if (!shouldLoadPaperData) {
+      setPaperData(EMPTY_PAPER_DATA);
+      setMarkedQuestionIds(getMarkedQuestionIds(contest.id));
+      return;
+    }
+
+    let cancelled = false;
+    setPaperData((previous) => ({ ...previous, loading: true, error: null }));
+    setMarkedQuestionIds(getMarkedQuestionIds(contest.id));
+    const load = async () => {
+      const [questionsResult, answersResult] =
+        await Promise.allSettled([
+          getExamQuestions(contest.id),
+          contest.resultsPublished
+            ? getExamResults(contest.id)
+            : getMyExamAnswers(contest.id),
+        ]);
+      if (cancelled) return;
+
+      const questions =
+        questionsResult.status === "fulfilled"
+          ? questionsResult.value.slice().sort((a, b) => a.order - b.order)
+          : [];
+      const answers =
+        answersResult.status === "fulfilled" && !contest.resultsPublished
+          ? answersResult.value as ExamAnswer[]
+          : [];
+      const results =
+        answersResult.status === "fulfilled" && contest.resultsPublished
+          ? answersResult.value as ExamAnswerDetail[]
+          : [];
+
+      setPaperData({
+        loading: false,
+        error:
+          questionsResult.status === "rejected"
+            ? tr(
+                "studentDashboard.errors.questionsLoadFailed",
+                "題目資料暫時無法載入",
+              )
+            : null,
+        questions,
+        answers,
+        results,
+      });
+      setMarkedQuestionIds(getMarkedQuestionIds(contest.id));
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    contest.contestType,
+    contest.id,
+    contest.resultsPublished,
+    paperReloadKey,
+    shouldLoadPaperData,
+  ]);
+
+  useEffect(() => {
+    if (!contest.id) {
+      setAnnouncements([]);
+      return;
+    }
+
+    let cancelled = false;
+    setAnnouncementsLoading(true);
+    setAnnouncementsError(null);
+    void (async () => {
+      try {
+        const data = await getContestAnnouncements(contest.id);
+        if (cancelled) return;
+        setAnnouncements(data.map(mapContestAnnouncementDto));
+      } catch (error) {
+        if (cancelled) return;
+        setAnnouncements([]);
+        setAnnouncementsError(
+          error instanceof Error
+            ? error.message
+            : tr(
+                "studentDashboard.errors.announcementsLoadFailed",
+                "公告暫時無法載入",
+              ),
+        );
+      } finally {
+        if (!cancelled) setAnnouncementsLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [contest.id, paperReloadKey]);
+
+  useEffect(() => {
+    if (
+      contest.contestType !== "paper_exam" ||
+      !participant ||
+      !contest.resultsPublished
+    ) {
+      setScoreSummary(null);
+      setScoreSummaryLoading(false);
+      setScoreSummaryError(null);
+      return;
+    }
+
+    let cancelled = false;
+    setScoreSummaryLoading(true);
+    setScoreSummaryError(null);
+    void (async () => {
+      try {
+        const summary = await getExamDashboardSummary(contest.id);
+        if (cancelled) return;
+        setScoreSummary(summary);
+      } catch (error) {
+        if (cancelled) return;
+        setScoreSummary(null);
+        setScoreSummaryError(
+          error instanceof Error
+            ? error.message
+            : tr(
+                "studentDashboard.errors.scoreDistributionLoadFailed",
+                "成績分布暫時無法載入",
+              ),
+        );
+      } finally {
+        if (!cancelled) setScoreSummaryLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    contest.contestType,
+    contest.id,
+    contest.resultsPublished,
+    participant,
+    paperReloadKey,
+  ]);
+
+  const progressSummary = useMemo(() => {
+    if (contest.contestType === "paper_exam") {
+      return buildPaperProgressSummary(
+        paperData.questions,
+        contest.resultsPublished ? paperData.results : paperData.answers,
+        contest.resultsPublished,
+      );
+    }
+    return buildCodingProgressSummary(contest);
+  }, [contest, paperData]);
+
+  const progressPercent =
+    progressSummary.totalItems > 0
+      ? Math.round(
+          (progressSummary.completedItems / progressSummary.totalItems) * 100,
+        )
+      : 0;
+
+  const canRegister = contest.status === "published" && contestState !== "ended";
+  const canStartExam =
+    participant &&
+    contest.status === "published" &&
+    phase === "during" &&
+    examStatus === "not_started";
+  const canResumeExam = participant && examStatus === "paused";
+  const canGoToAnswering = participant && examStatus === "in_progress";
+  const canSubmitExam = participant && examStatus === "in_progress";
+  const canRestartSubmittedExam =
+    participant &&
+    contest.status === "published" &&
+    contestState !== "ended" &&
+    examStatus === "submitted" &&
+    contest.allowMultipleJoins;
+  const scoreDisplay = contest.resultsPublished
+    ? progressSummary.totalScore === null
+      ? t("studentDashboard.results.published", "成績已發布")
+      : `${progressSummary.totalScore} / ${progressSummary.maxScore}`
+    : t("studentDashboard.results.unpublished", "尚未發布");
+  const afterPhaseValue =
+    contest.contestType === "paper_exam" && paperData.loading
+      ? t("studentDashboard.loading", "載入中...")
+      : scoreDisplay;
+  const reportDownloadLabel = contest.resultsPublished
+    ? t("studentDashboard.actions.downloadReport", "下載成績單")
+    : t("studentDashboard.actions.downloadProof", "下載作答證明");
+  const startMs = Date.parse(contest.startTime);
+  const endMs = Date.parse(contest.endTime);
+  const durationDisplay =
+    Number.isFinite(startMs) && Number.isFinite(endMs)
+      ? formatCompactDuration(endMs - startMs)
+      : "-";
+  const chartTheme = resolveCarbonChartTheme(theme);
+  const scoreDistributionData = useMemo(
+    () =>
+      scoreSummary
+        ? scoreSummary.score_distribution.map((bucket) => ({
+            group: bucket.range_label,
+            value: bucket.count,
+          }))
+        : [],
+    [scoreSummary],
+  );
+  const hasScoreDistributionData = scoreDistributionData.some(
+    (item) => item.value > 0,
+  );
+  const scoreDistributionOptions = useMemo(
+    () => ({
+      title: "",
+      height: "180px",
+      theme: chartTheme,
+      toolbar: { enabled: false },
+      legend: { enabled: false },
+      axes: {
+        left: {
+          mapsTo: "group",
+          scaleType: ScaleTypes.LABELS,
+          visible: false,
+        },
+        bottom: {
+          mapsTo: "value",
+          scaleType: ScaleTypes.LINEAR,
+          visible: false,
+        },
+      },
+      grid: {
+        x: { enabled: false },
+        y: { enabled: false },
+      },
+      color: {
+        scale: (scoreSummary?.score_distribution ?? []).reduce<
+          Record<string, string>
+        >((acc, bucket) => {
+          acc[bucket.range_label] = isFailingScoreBucket(bucket.range_label)
+            ? "var(--cds-support-error)"
+            : "var(--cds-link-primary)";
+          return acc;
+        }, {}),
+      },
+    }),
+    [chartTheme, scoreSummary?.score_distribution],
+  );
+
+  const handleRegisterSubmit = (data: { password?: string }) => {
+    setShowRegisterModal(false);
+    onJoin?.(data);
+  };
+
+  const handleDownloadReport = async () => {
+    setReportError(null);
+    setReportDownloading(true);
+    try {
+      await downloadMyReport(contest.id, reportLanguage);
+      setShowReportModal(false);
+    } catch (error) {
+      setReportError(error instanceof Error ? error.message : t("report.failed"));
+    } finally {
+      setReportDownloading(false);
+    }
+  };
+
+  const renderPrimaryAction = () => {
+    if (!participant && phase !== "after") {
+      return (
+        <Button
+          renderIcon={Login}
+          disabled={!canRegister}
+          onClick={() => setShowRegisterModal(true)}
+        >
+          {canRegister
+            ? t("studentDashboard.actions.join", "加入競賽")
+            : t("studentDashboard.actions.joinUnavailable", "目前不可加入")}
+        </Button>
+      );
+    }
+    if (canStartExam || canResumeExam) {
+      return (
+        <Button renderIcon={Play} onClick={onStartExam}>
+          {canResumeExam
+            ? t("studentDashboard.actions.resume", "恢復作答")
+            : t("studentDashboard.actions.start", "開始作答")}
+        </Button>
+      );
+    }
+    if (canGoToAnswering) {
+      return (
+        <Button renderIcon={Launch} onClick={onGoToAnswering}>
+          {t("studentDashboard.actions.backToAnswering", "回到作答")}
+        </Button>
+      );
+    }
+    if (examStatus === "submitted") {
+      return (
+        <>
+          <Button
+            kind="tertiary"
+            renderIcon={Document}
+            onClick={() => setShowReportModal(true)}
+          >
+            {reportDownloadLabel}
+          </Button>
+          {canRestartSubmittedExam ? (
+            <Button renderIcon={Play} onClick={onStartExam}>
+              {t("studentDashboard.actions.rejoin", "重新加入")}
+            </Button>
+          ) : null}
+        </>
+      );
+    }
+    return (
+      <Button kind="secondary" disabled renderIcon={Time}>
+        {phase === "before"
+          ? t("studentDashboard.actions.waitingStart", "等待開始")
+          : t("studentDashboard.actions.unavailable", "不可作答")}
+      </Button>
+    );
+  };
+
+  const renderCodingRecords = () => {
+    if (!hasAnswerRecord) {
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.empty.noAnswerRecords", "尚無作答紀錄。")}
+        </p>
+      );
+    }
+
+    const problems = contest.problems.map((problem, index) => ({
+      id: problem.id,
+      label: problem.label || String(index + 1),
+      problemId: problem.problemId,
+      title: problem.title,
+      order: problem.order ?? index,
+      score: problem.maxScore ?? problem.score ?? 0,
+      userStatus: problem.userStatus,
+    }));
+
+    if (!problems.length) {
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.empty.noQuestions", "尚無題目資料。")}
+        </p>
+      );
+    }
+
+    return (
+      <div className={styles.problemReportList}>
+        {problems.map((problem) => {
+          const statusText =
+            problem.userStatus ??
+            t("studentDashboard.records.notSubmitted", "尚未提交");
+          return (
+            <div className={styles.problemReportItem} key={problem.id}>
+              <div>
+                <div className={styles.recordTitle}>
+                  {problem.label}. {problem.title || "Untitled"}
+                </div>
+                <div className={styles.recordMeta}>
+                  {tr("studentDashboard.records.fullScore", "滿分 {{score}}", {
+                    score: problem.score ?? 0,
+                  })}
+                </div>
+              </div>
+              <div className={styles.problemReportMeta}>
+                <Tag type={problem.userStatus === "AC" ? "green" : "cool-gray"}>
+                  {statusText}
+                </Tag>
+                <span className={styles.recordScore}>
+                  {contest.resultsPublished
+                    ? t("studentDashboard.results.published", "成績已發布")
+                    : t("studentDashboard.results.pendingPublish", "待發布")}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderPaperRecords = () => {
+    if (!hasAnswerRecord || phase === "before") {
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.empty.noAnswerRecords", "尚無作答紀錄。")}
+        </p>
+      );
+    }
+    if (paperData.loading) {
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.loadingAnswers", "載入作答資料中...")}
+        </p>
+      );
+    }
+    if (paperData.error) return <p className={styles.errorText}>{paperData.error}</p>;
+    if (!paperData.questions.length) {
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.empty.noQuestions", "尚無題目資料。")}
+        </p>
+      );
+    }
+
+    const resultMap = new Map(
+      paperData.results.map((result) => [String(result.questionId), result]),
+    );
+    const answerMap = new Map(
+      paperData.answers.map((answer) => [String(answer.questionId), answer]),
+    );
+
+    return (
+      <div className={styles.questionList}>
+        {paperData.questions.map((question, index) => {
+          const result = resultMap.get(String(question.id));
+          const answer = answerMap.get(String(question.id));
+          const marked = markedQuestionIds.has(String(question.id));
+          const answerPayload = result?.answer ?? answer?.answer;
+          const answered = !!answerPayload;
+          const questionType = (
+            result?.questionType ??
+            result?.questionSnapshot?.questionType ??
+            question.questionType
+          ) as ExamQuestionType;
+          const maxScore =
+            question.score ?? result?.maxScore ?? result?.questionSnapshot?.score ?? 0;
+          const status =
+            marked
+              ? {
+                  label: t("studentDashboard.answerStatus.marked", "已標記"),
+                  tone: "warm-gray" as const,
+                  emphasis: "warning" as const,
+                }
+              : !answered
+              ? {
+                  label: t("studentDashboard.answerStatus.unanswered", "未作答"),
+                  tone: "warm-gray" as const,
+                }
+              : !contest.resultsPublished
+                ? {
+                    label: t("studentDashboard.answerStatus.answered", "已作答"),
+                    tone: "cool-gray" as const,
+                  }
+                : result?.isCorrect === true
+                  ? {
+                      label: t("studentDashboard.answerStatus.correct", "正確"),
+                      tone: "green" as const,
+                    }
+                  : result?.isCorrect === false
+                    ? (result?.score ?? 0) > 0
+                      ? {
+                          label: t(
+                            "studentDashboard.answerStatus.partial",
+                            "部分得分",
+                          ),
+                          tone: "cyan" as const,
+                        }
+                      : {
+                          label: t(
+                            "studentDashboard.answerStatus.noScore",
+                            "未得分",
+                          ),
+                          tone: "red" as const,
+                        }
+                    : {
+                        label: result?.gradedAt
+                          ? t("studentDashboard.answerStatus.graded", "已批改")
+                          : t("studentDashboard.answerStatus.pendingGrading", "待批改"),
+                        tone: "warm-gray" as const,
+                      };
+          const prompt =
+            result?.questionPrompt ??
+            result?.questionSnapshot?.prompt ??
+            question.prompt;
+
+          return (
+            <PaperQuestionReportCard
+              key={question.id}
+              questionId={String(question.id)}
+              index={index + 1}
+              questionType={questionType}
+              typeLabel={t(
+                `common:questionType.label.${questionType}`,
+                QUESTION_TYPE_LABEL[questionType] ?? questionType,
+              )}
+              prompt={prompt}
+              options={question.options}
+              answer={answerPayload ?? {}}
+              statusLabel={status.label}
+              statusTone={status.tone}
+              statusEmphasis={status.emphasis}
+              showGrading={contest.resultsPublished}
+              score={result?.score}
+              maxScore={maxScore}
+              gradedByUsername={result?.gradedByUsername}
+              feedback={result?.feedback}
+              correctAnswer={
+                result?.questionSnapshot?.correctAnswer ?? question.correctAnswer
+              }
+              explanation={
+                result?.questionExplanation ??
+                result?.questionSnapshot?.explanation ??
+                question.explanation
+              }
+            />
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderAnnouncements = () => {
+    if (announcementsLoading) {
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.announcements.loading", "載入公告中...")}
+        </p>
+      );
+    }
+    if (announcementsError) {
+      return <p className={styles.errorText}>{announcementsError}</p>;
+    }
+    if (!announcements.length) {
+      return (
+        <p className={styles.emptyText}>
+          {t("studentDashboard.announcements.empty", "目前沒有公告。")}
+        </p>
+      );
+    }
+
+    return (
+      <div className={styles.announcementList}>
+        {announcements.map((announcement) => (
+          <article className={styles.announcementItem} key={announcement.id}>
+            <BlockHeader
+              title={announcement.title}
+              actions={
+                announcement.createdAt ? (
+                  <span className={styles.announcementMeta}>
+                    {formatDate(announcement.createdAt, { includeSeconds: false })}
+                  </span>
+                ) : null
+              }
+            />
+            <div className={styles.announcementContent}>
+              <MarkdownRenderer>{announcement.content}</MarkdownRenderer>
+            </div>
+          </article>
+        ))}
+      </div>
+    );
+  };
+
+  const tagRow = (
+    <div className={styles.tagRow}>
+      <Tag type={getContestStateColor(contestState)}>
+        {t(
+          `studentDashboard.contestState.${contestState}`,
+          getContestStateLabel(contestState),
+        )}
+      </Tag>
+      <Tag type={participant ? "green" : "gray"}>
+        {participant
+          ? t("studentDashboard.joinStatus.joined", "已加入")
+          : t("studentDashboard.joinStatus.notJoined", "未加入")}
+      </Tag>
+      {contest.cheatDetectionEnabled ? (
+        <Tag type="red">
+          {t("studentDashboard.monitoring.enabled", "監控中")}
+        </Tag>
+      ) : null}
+    </div>
+  );
+
+  return (
+    <DashboardPage
+      ariaLabel={t("studentDashboard.ariaLabel", "學生競賽首頁")}
+      fullBleed
+    >
+      <DashboardContainer
+        layout="split"
+        proportions="main-aside"
+        dividers="auto"
+      >
+        <DashboardContainer
+          layout="stack"
+          dividers="auto"
+          ariaLabel={t("studentDashboard.mainContent", "競賽主要內容")}
+        >
+          <DashboardBlock>
+            <BlockHeader
+              titleSize="page"
+              title={contest.name}
+              description={tagRow}
+              actions={
+                <Button
+                  kind="ghost"
+                  renderIcon={Renew}
+                  onClick={() => {
+                    setPaperReloadKey((value) => value + 1);
+                    void onRefreshContest?.();
+                  }}
+                >
+                  {t("studentDashboard.actions.refresh", "重新整理")}
+                </Button>
+              }
+            />
+          </DashboardBlock>
+
+          <DashboardContainer
+            layout="grid"
+            columns={3}
+            dividers="auto"
+            ariaLabel={t("studentDashboard.infoLabel", "競賽資訊")}
+          >
+            <DashboardBlock>
+              <MetricBlock
+                label={t("studentDashboard.metrics.startTime", "開始時間")}
+                value={formatDate(contest.startTime, { includeSeconds: false })}
+              />
+            </DashboardBlock>
+            <DashboardBlock>
+              <MetricBlock
+                label={t("studentDashboard.metrics.endTime", "截止時間")}
+                value={formatDate(contest.endTime, { includeSeconds: false })}
+              />
+            </DashboardBlock>
+            <DashboardBlock>
+              <MetricBlock
+                label={t("studentDashboard.metrics.duration", "總時長")}
+                value={durationDisplay}
+              />
+            </DashboardBlock>
+          </DashboardContainer>
+
+          {SHOW_ANNOUNCEMENTS ? (
+            <DashboardBlock>
+              <BlockHeader
+                title={t("studentDashboard.announcements.title", "公告")}
+              />
+              {renderAnnouncements()}
+            </DashboardBlock>
+          ) : null}
+
+          <DashboardBlock padding="flush">
+            <DashboardTabs
+              activeId={infoTab}
+              onChange={(id) => setInfoTab(id as "rules" | "records")}
+            >
+              <DashboardTabBar
+                ariaLabel={t("studentDashboard.tabs.ariaLabel", "競賽資訊切換")}
+                tabs={[
+                  {
+                    id: "rules",
+                    label: t("studentDashboard.tabs.rules", "規則說明"),
+                  },
+                  {
+                    id: "records",
+                    label: t("studentDashboard.tabs.records", "作答紀錄"),
+                  },
+                ]}
+              />
+              <DashboardTabPanel tabId="rules">
+                <div className={styles.tabContent}>
+                  <BlockHeader
+                    titleAs="h3"
+                    title={t("studentDashboard.rules.title", "規則說明")}
+                    description={
+                      requiresPassword
+                        ? t(
+                            "studentDashboard.rules.requiresPassword",
+                            "此競賽需要密碼。",
+                          )
+                        : t(
+                            "studentDashboard.rules.noPassword",
+                            "此競賽不需要密碼。",
+                          )
+                    }
+                    actions={
+                      contest.cheatDetectionEnabled ? (
+                        <WarningAlt size={20} className={styles.warningIcon} />
+                      ) : (
+                        <Checkmark size={20} className={styles.successIcon} />
+                      )
+                    }
+                  />
+                  {contest.cheatDetectionEnabled ? (
+                    <InlineNotification
+                      kind="warning"
+                      lowContrast
+                      hideCloseButton
+                      title={t(
+                        "studentDashboard.monitoring.title",
+                        "已啟用監控",
+                      )}
+                      subtitle={t(
+                        "studentDashboard.monitoring.subtitle",
+                        "進入作答後會啟用全螢幕、分頁切換與裝置監控。",
+                      )}
+                    />
+                  ) : null}
+                  {contest.description ? (
+                    <div className={styles.rulesContent}>
+                      <MarkdownRenderer>{contest.description}</MarkdownRenderer>
+                    </div>
+                  ) : null}
+                  {contest.rules ? (
+                    <div className={styles.rulesContent}>
+                      <MarkdownRenderer>{contest.rules}</MarkdownRenderer>
+                    </div>
+                  ) : (
+                    <p className={styles.emptyText}>
+                      {t("studentDashboard.rules.empty", "沒有額外規則。")}
+                    </p>
+                  )}
+                </div>
+              </DashboardTabPanel>
+              <DashboardTabPanel tabId="records">
+                <div className={styles.tabContent}>
+                  <BlockHeader
+                    titleAs="h3"
+                    title={
+                      phase === "during"
+                        ? t("studentDashboard.records.currentStatus", "目前作答狀況")
+                        : phase === "after" && contest.resultsPublished
+                          ? t(
+                              "studentDashboard.records.withResults",
+                              "作答紀錄與成績",
+                            )
+                          : t("studentDashboard.records.title", "作答紀錄")
+                    }
+                  />
+                  {contest.contestType === "paper_exam"
+                    ? renderPaperRecords()
+                    : renderCodingRecords()}
+                </div>
+              </DashboardTabPanel>
+            </DashboardTabs>
+          </DashboardBlock>
+        </DashboardContainer>
+
+        <DashboardContainer
+          layout="stack"
+          dividers="auto"
+          ariaLabel={t("studentDashboard.summary.ariaLabel", "競賽摘要")}
+        >
+          <DashboardBlock>
+            <CountdownProgress
+              startTime={contest.startTime}
+              endTime={contest.endTime}
+              afterPhase={
+                contest.resultsPublished
+                  ? {
+                      label: t("studentDashboard.summary.examResult", "考試成績"),
+                      value: afterPhaseValue,
+                    }
+                  : {
+                      label: t("studentDashboard.summary.examStatus", "考試狀態"),
+                      value: t(
+                        "studentDashboard.results.waitingPublish",
+                        "等待成績發布",
+                      ),
+                    }
+              }
+            />
+          </DashboardBlock>
+
+          <KPIBlock
+            title={t("studentDashboard.summary.completionRate", "完成率")}
+            value={`${progressPercent}%`}
+          >
+            <div className={styles.progressTrack} aria-hidden="true">
+              <div
+                className={styles.progressFill}
+                style={{ inlineSize: `${progressPercent}%` }}
+              />
+            </div>
+          </KPIBlock>
+
+          {contest.resultsPublished && contest.contestType === "paper_exam" ? (
+            <KPIBlock
+              title={t("studentDashboard.summary.scoreDistribution", "成績分布")}
+              value={
+                scoreSummary
+                  ? tr(
+                      "studentDashboard.summary.averageScore",
+                      "平均 {{average}} / {{max}}",
+                      {
+                        average: scoreSummary.summary.average_score.toFixed(1),
+                        max: scoreSummary.summary.max_total_score,
+                      },
+                    )
+                  : "—"
+              }
+            >
+              <div className={styles.scoreDistributionChart}>
+                {scoreSummaryLoading ? (
+                  <SkeletonPlaceholder className={styles.chartSkeleton} />
+                ) : scoreSummaryError ? (
+                  <p className={styles.emptyText}>{scoreSummaryError}</p>
+                ) : hasScoreDistributionData ? (
+                  <LollipopChart
+                    data={scoreDistributionData}
+                    options={scoreDistributionOptions}
+                  />
+                ) : (
+                  <p className={styles.emptyText}>
+                    {t(
+                      "studentDashboard.empty.noScoreDistribution",
+                      "尚無成績分布資料。",
+                    )}
+                  </p>
+                )}
+              </div>
+            </KPIBlock>
+          ) : null}
+
+          <DashboardBlock>
+            <div className={styles.actionStack}>
+              {renderPrimaryAction()}
+              {canSubmitExam ? (
+                <Button
+                  kind="danger--tertiary"
+                  renderIcon={Flag}
+                  onClick={() => setShowEndConfirm(true)}
+                >
+                  {t("studentDashboard.actions.submit", "交卷")}
+                </Button>
+              ) : null}
+              {isAdmin && onOpenAdminPanel ? (
+                <Button kind="ghost" renderIcon={Launch} onClick={onOpenAdminPanel}>
+                  {t("studentDashboard.actions.adminPanel", "管理後台")}
+                </Button>
+              ) : null}
+            </div>
+          </DashboardBlock>
+        </DashboardContainer>
+      </DashboardContainer>
+
+      <ContestRegistrationModal
+        open={showRegisterModal}
+        contest={contest}
+        onClose={() => setShowRegisterModal(false)}
+        onSubmit={handleRegisterSubmit}
+      />
+
+      <Modal
+        open={showEndConfirm}
+        modalHeading={t("studentDashboard.submitConfirm.heading", "確認交卷")}
+        primaryButtonText={t("studentDashboard.submitConfirm.confirm", "確認交卷")}
+        secondaryButtonText={tc("button.cancel")}
+        danger
+        onRequestSubmit={() => {
+          setShowEndConfirm(false);
+          onEndExam?.();
+        }}
+        onRequestClose={() => setShowEndConfirm(false)}
+      >
+        <p>
+          {t(
+            "studentDashboard.submitConfirm.body",
+            "交卷後將無法繼續修改答案。",
+          )}
+        </p>
+      </Modal>
+
+      <Modal
+        open={showReportModal}
+        modalHeading={reportDownloadLabel}
+        primaryButtonText={
+          reportDownloading
+            ? t("studentDashboard.report.preparing", "準備中")
+            : t("studentDashboard.report.download", "下載")
+        }
+        secondaryButtonText={tc("button.cancel")}
+        primaryButtonDisabled={reportDownloading}
+        onRequestSubmit={handleDownloadReport}
+        onRequestClose={() => {
+          if (!reportDownloading) setShowReportModal(false);
+        }}
+        size="xs"
+      >
+        <div className={styles.modalStack}>
+          <Select
+            id="student-contest-report-language"
+            labelText={t("studentDashboard.report.language", "報告語言")}
+            value={reportLanguage}
+            onChange={(event) => setReportLanguage(event.target.value)}
+          >
+            <SelectItem
+              value="zh-TW"
+              text={t("studentDashboard.report.languages.zhTW", "繁體中文")}
+            />
+            <SelectItem
+              value="en"
+              text={t("studentDashboard.report.languages.en", "English")}
+            />
+            <SelectItem
+              value="ja"
+              text={t("studentDashboard.report.languages.ja", "日本語")}
+            />
+            <SelectItem
+              value="ko"
+              text={t("studentDashboard.report.languages.ko", "한국어")}
+            />
+          </Select>
+          {reportError ? (
+            <InlineNotification
+              kind="error"
+              lowContrast
+              hideCloseButton
+              title={t("studentDashboard.report.failedTitle", "下載失敗")}
+              subtitle={reportError}
+            />
+          ) : null}
+        </div>
+      </Modal>
+    </DashboardPage>
+  );
+}
diff --git a/frontend/src/features/contest/components/studentDashboard/studentDashboardState.test.ts b/frontend/src/features/contest/components/studentDashboard/studentDashboardState.test.ts
new file mode 100644
index 00000000..72bed97c
--- /dev/null
+++ b/frontend/src/features/contest/components/studentDashboard/studentDashboardState.test.ts
@@ -0,0 +1,113 @@
+import { describe, expect, it } from "vitest";
+import type {
+  ContestDetail,
+  ScoreboardData,
+} from "@/core/entities/contest.entity";
+import {
+  findCurrentUserScoreboardRow,
+  resolveStudentContestPhase,
+} from "./studentDashboardState";
+
+const createContest = (
+  overrides: Partial<ContestDetail> = {},
+): ContestDetail =>
+  ({
+    id: "contest-1",
+    name: "Contest",
+    description: "",
+    startTime: "2026-05-05T10:00:00.000Z",
+    endTime: "2026-05-05T12:00:00.000Z",
+    status: "published",
+    visibility: "public",
+    hasJoined: true,
+    isRegistered: true,
+    contestType: "coding",
+    deliveryMode: "exam",
+    countsTowardGrade: true,
+    cheatDetectionEnabled: false,
+    scoreboardVisibleDuringContest: false,
+    allowMultipleJoins: false,
+    maxCheatWarnings: 3,
+    allowAutoUnlock: false,
+    autoUnlockMinutes: 0,
+    resultsPublished: false,
+    examQuestionsCount: 0,
+    isExamMonitored: false,
+    requiresFullscreen: false,
+    canSubmitExam: true,
+    examStatus: "not_started",
+    permissions: {
+      canSwitchView: true,
+      canEditContest: false,
+      canToggleStatus: false,
+      canDeleteContest: false,
+      canPublishProblems: false,
+      canViewAllSubmissions: false,
+      canViewFullScoreboard: false,
+      canManageClarifications: false,
+    },
+    problems: [],
+    ...overrides,
+  }) as ContestDetail;
+
+describe("studentDashboardState", () => {
+  it("resolves before, during, and after phases", () => {
+    expect(
+      resolveStudentContestPhase(
+        createContest(),
+        Date.parse("2026-05-05T09:00:00.000Z"),
+      ),
+    ).toBe("before");
+
+    expect(
+      resolveStudentContestPhase(
+        createContest({ examStatus: "in_progress" }),
+        Date.parse("2026-05-05T09:00:00.000Z"),
+      ),
+    ).toBe("during");
+
+    expect(
+      resolveStudentContestPhase(
+        createContest({ examStatus: "submitted" }),
+        Date.parse("2026-05-05T09:00:00.000Z"),
+      ),
+    ).toBe("after");
+  });
+
+  it("matches scoreboard rows by user id before display name fallback", () => {
+    const scoreboardData: ScoreboardData = {
+      contestId: "contest-1",
+      contestName: "Contest",
+      problems: [],
+      rows: [
+        {
+          userId: "2",
+          displayName: "same-name",
+          solvedCount: 0,
+          totalScore: 0,
+          penalty: 0,
+          rank: 2,
+          problems: {},
+        },
+        {
+          userId: "1",
+          displayName: "different-name",
+          solvedCount: 1,
+          totalScore: 100,
+          penalty: 0,
+          rank: 1,
+          problems: {},
+        },
+      ],
+    };
+
+    const row = findCurrentUserScoreboardRow(scoreboardData, {
+      id: 1,
+      username: "same-name",
+      role: "student",
+    });
+
+    expect(row?.userId).toBe("1");
+  });
+
+});
diff --git a/frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts b/frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts
new file mode 100644
index 00000000..f7579206
--- /dev/null
+++ b/frontend/src/features/contest/components/studentDashboard/studentDashboardState.ts
@@ -0,0 +1,110 @@
+import type {
+  ContestDetail,
+  ExamStatusType,
+  ScoreboardData,
+  ScoreboardRow,
+} from "@/core/entities/contest.entity";
+import type { User } from "@/core/entities/auth.entity";
+import { getContestState } from "@/core/entities/contest.entity";
+
+export type StudentContestPhase = "before" | "during" | "after";
+
+const ACTIVE_EXAM_STATUSES = new Set<ExamStatusType>([
+  "in_progress",
+  "paused",
+  "locked",
+]);
+
+export const resolveStudentContestPhase = (
+  contest: ContestDetail,
+  nowMs: number = Date.now(),
+): StudentContestPhase => {
+  if (contest.examStatus === "submitted") return "after";
+  if (ACTIVE_EXAM_STATUSES.has(contest.examStatus ?? "not_started")) {
+    return "during";
+  }
+
+  const contestState = getContestState({
+    status: contest.status,
+    startTime: contest.startTime,
+    endTime: contest.endTime,
+  }, nowMs);
+  if (contestState === "ended") return "after";
+  if (contestState === "running") return "during";
+
+  const startMs = Date.parse(contest.startTime);
+  if (Number.isFinite(startMs) && nowMs >= startMs) return "during";
+  return "before";
+};
+
+export const findCurrentUserScoreboardRow = (
+  scoreboardData: ScoreboardData | null | undefined,
+  currentUser: User | null | undefined,
+): ScoreboardRow | null => {
+  if (!scoreboardData?.rows?.length || !currentUser) return null;
+
+  const userId = String(currentUser.id);
+  const directMatch = scoreboardData.rows.find(
+    (row) => String(row.userId) === userId,
+  );
+  if (directMatch) return directMatch;
+
+  const nameCandidates = new Set(
+    [
+      currentUser.username,
+      currentUser.profile?.display_name,
+      currentUser.email,
+    ]
+      .filter(Boolean)
+      .map((value) => String(value)),
+  );
+  return (
+    scoreboardData.rows.find((row) => nameCandidates.has(row.displayName)) ??
+    null
+  );
+};
+
+export interface StudentProgressSummary {
+  totalItems: number;
+  completedItems: number;
+  attemptedItems: number;
+  totalScore: number | null;
+  maxScore: number;
+}
+
+export const buildCodingProgressSummary = (
+  contest: ContestDetail,
+): StudentProgressSummary => {
+  const totalItems = contest.problems?.length || 0;
+  const maxScore =
+    contest.problems?.reduce(
+      (sum, problem) => sum + (problem.maxScore ?? problem.score ?? 0),
+      0,
+    ) ||
+    0;
+  const completedItems = contest.problems.filter(
+    (problem) => problem.userStatus === "AC",
+  ).length;
+  const attemptedItems = contest.problems.filter(
+    (problem) => !!problem.userStatus,
+  ).length;
+  return {
+    totalItems,
+    completedItems,
+    attemptedItems,
+    totalScore: null,
+    maxScore,
+  };
+};
+
+export const formatCompactDuration = (milliseconds: number): string => {
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (days > 0) return `${days}d ${hours}h ${minutes}m`;
+  if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+  return `${minutes}m ${seconds}s`;
+};
diff --git a/frontend/src/features/contest/contexts/ContestRuntimeNavigatorContext.tsx b/frontend/src/features/contest/contexts/ContestRuntimeNavigatorContext.tsx
new file mode 100644
index 00000000..86b78091
--- /dev/null
+++ b/frontend/src/features/contest/contexts/ContestRuntimeNavigatorContext.tsx
@@ -0,0 +1,29 @@
+import {
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+
+import {
+  ContestRuntimeNavigatorContext,
+  type ContestRuntimeNavigatorState,
+} from "./contestRuntimeNavigatorStore";
+
+export function ContestRuntimeNavigatorProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [navigator, setNavigator] =
+    useState<ContestRuntimeNavigatorState | null>(null);
+  const value = useMemo(
+    () => ({ navigator, setNavigator }),
+    [navigator],
+  );
+
+  return (
+    <ContestRuntimeNavigatorContext.Provider value={value}>
+      {children}
+    </ContestRuntimeNavigatorContext.Provider>
+  );
+}
diff --git a/frontend/src/features/contest/contexts/contestRuntimeNavigatorStore.ts b/frontend/src/features/contest/contexts/contestRuntimeNavigatorStore.ts
new file mode 100644
index 00000000..956f4407
--- /dev/null
+++ b/frontend/src/features/contest/contexts/contestRuntimeNavigatorStore.ts
@@ -0,0 +1,21 @@
+import { createContext } from "react";
+
+import type { ExamItem } from "@/features/contest/types/exam.types";
+
+export interface ContestRuntimeNavigatorState {
+  items: ExamItem[];
+  activeIndex: number;
+  answeredIds: Set<string>;
+  markedIds?: Set<string>;
+  overviewLabel?: string;
+  onSelect: (index: number) => void;
+  onSelectOverview?: () => void;
+}
+
+export interface ContestRuntimeNavigatorContextValue {
+  navigator: ContestRuntimeNavigatorState | null;
+  setNavigator: (state: ContestRuntimeNavigatorState | null) => void;
+}
+
+export const ContestRuntimeNavigatorContext =
+  createContext<ContestRuntimeNavigatorContextValue | null>(null);
diff --git a/frontend/src/features/contest/contexts/index.ts b/frontend/src/features/contest/contexts/index.ts
index 8293a50c..b4ad1a41 100644
--- a/frontend/src/features/contest/contexts/index.ts
+++ b/frontend/src/features/contest/contexts/index.ts
@@ -1,4 +1,15 @@
 export { ContestProvider, useContest } from "./ContestContext";
+export { useOptionalContest } from "./useOptionalContest";
+export {
+  ContestRuntimeNavigatorProvider,
+} from "./ContestRuntimeNavigatorContext";
+export {
+  useContestRuntimeNavigator,
+  useRegisterContestRuntimeNavigator,
+} from "./useContestRuntimeNavigator";
+export type {
+  ContestRuntimeNavigatorState,
+} from "./contestRuntimeNavigatorStore";
 export type { default as ContestContext } from "./ContestContext";
 export { ContestAdminProvider, useContestAdmin } from "./ContestAdminContext";
 export {
diff --git a/frontend/src/features/contest/contexts/useContestRuntimeNavigator.ts b/frontend/src/features/contest/contexts/useContestRuntimeNavigator.ts
new file mode 100644
index 00000000..ac41a5d7
--- /dev/null
+++ b/frontend/src/features/contest/contexts/useContestRuntimeNavigator.ts
@@ -0,0 +1,27 @@
+import { useContext, useEffect } from "react";
+
+import {
+  ContestRuntimeNavigatorContext,
+  type ContestRuntimeNavigatorState,
+} from "./contestRuntimeNavigatorStore";
+
+export function useContestRuntimeNavigator() {
+  return useContext(ContestRuntimeNavigatorContext)?.navigator ?? null;
+}
+
+export function useRegisterContestRuntimeNavigator(
+  state: ContestRuntimeNavigatorState | null,
+) {
+  const ctx = useContext(ContestRuntimeNavigatorContext);
+  const setNavigator = ctx?.setNavigator;
+
+  useEffect(() => {
+    if (!setNavigator) return;
+    setNavigator(state);
+  }, [setNavigator, state]);
+
+  useEffect(() => {
+    if (!setNavigator) return;
+    return () => setNavigator(null);
+  }, [setNavigator]);
+}
diff --git a/frontend/src/features/contest/contexts/useOptionalContest.ts b/frontend/src/features/contest/contexts/useOptionalContest.ts
new file mode 100644
index 00000000..d94cd9b7
--- /dev/null
+++ b/frontend/src/features/contest/contexts/useOptionalContest.ts
@@ -0,0 +1,5 @@
+import { useContext } from "react";
+
+import ContestContext from "./ContestContext";
+
+export const useOptionalContest = () => useContext(ContestContext) ?? null;
diff --git a/frontend/src/features/contest/domain/contestRuntimePolicy.test.ts b/frontend/src/features/contest/domain/contestRuntimePolicy.test.ts
index 33a9fec8..ce62a295 100644
--- a/frontend/src/features/contest/domain/contestRuntimePolicy.test.ts
+++ b/frontend/src/features/contest/domain/contestRuntimePolicy.test.ts
@@ -85,6 +85,7 @@ describe("contestRuntimePolicy", () => {
   it("recognizes contest participation", () => {
     expect(isContestParticipant(createContest({ hasJoined: false, isRegistered: false }))).toBe(false);
     expect(isContestParticipant(createContest({ hasJoined: true, isRegistered: false }))).toBe(true);
+    expect(isContestParticipant(createContest({ hasJoined: false, isRegistered: true }))).toBe(false);
   });
 
   it("treats submitted/locked/paused/in_progress as started exam", () => {
diff --git a/frontend/src/features/contest/domain/contestRuntimePolicy.ts b/frontend/src/features/contest/domain/contestRuntimePolicy.ts
index 6bb13780..737dc270 100644
--- a/frontend/src/features/contest/domain/contestRuntimePolicy.ts
+++ b/frontend/src/features/contest/domain/contestRuntimePolicy.ts
@@ -1,14 +1,13 @@
 import type { ContestDetail, ContestStatus, ContestType, ExamStatusType } from "@/core/entities/contest.entity";
 
 type ContestTypeTarget = Pick<ContestDetail, "contestType"> | null | undefined;
-type ParticipantTarget = Pick<ContestDetail, "hasJoined" | "isRegistered"> | null | undefined;
+type ParticipantTarget = Pick<ContestDetail, "hasJoined"> | null | undefined;
 type ExamStatusTarget = Pick<ContestDetail, "examStatus"> | null | undefined;
 type TabTarget =
   | Pick<
       ContestDetail,
       | "contestType"
       | "hasJoined"
-      | "isRegistered"
       | "examStatus"
       | "endTime"
       | "cheatDetectionEnabled"
@@ -54,7 +53,7 @@ const isExamStatusIn = (
 ): boolean => (status ? allowed.has(status) : false);
 
 export const isContestParticipant = (contest: ParticipantTarget): boolean =>
-  !!(contest?.hasJoined || contest?.isRegistered);
+  !!contest?.hasJoined;
 
 export const hasStartedExam = (contest: ExamStatusTarget): boolean =>
   !!contest && isExamStatusIn(contest.examStatus, EXAM_STARTED_STATUSES);
diff --git a/frontend/src/features/contest/hooks/index.ts b/frontend/src/features/contest/hooks/index.ts
index 064a57b6..a0fb0602 100644
--- a/frontend/src/features/contest/hooks/index.ts
+++ b/frontend/src/features/contest/hooks/index.ts
@@ -2,5 +2,7 @@ export { useClarifications } from "./useClarifications";
 export { useContestExamActions } from "./useContestExamActions";
 export { useContestNavigationGuard } from "./useContestNavigationGuard";
 export { useContestProblemSelection } from "./useContestProblemSelection";
+export { useContestRuntimeMode } from "./useContestRuntimeMode";
+export type { ContestRuntimeMode } from "./useContestRuntimeMode";
 export { useContestSubmissions } from "./useContestSubmissions";
 export { useContestTimers } from "./useContestTimers";
diff --git a/frontend/src/features/contest/hooks/useContestExamActions.ts b/frontend/src/features/contest/hooks/useContestExamActions.ts
index 20b837db..739cefb8 100644
--- a/frontend/src/features/contest/hooks/useContestExamActions.ts
+++ b/frontend/src/features/contest/hooks/useContestExamActions.ts
@@ -99,13 +99,12 @@ export const useContestExamActions = ({
   }, []);
 
   const handleJoin = useCallback(
-    async (data?: { nickname?: string; password?: string }) => {
+    async (data?: { password?: string }) => {
       if (!contest) return;
 
       const result = await joinContestUseCase({
         contestId: contest.id,
         password: data?.password,
-        nickname: data?.nickname,
       });
 
       if (result.success) {
diff --git a/frontend/src/features/contest/hooks/useContestRuntimeMode.test.tsx b/frontend/src/features/contest/hooks/useContestRuntimeMode.test.tsx
new file mode 100644
index 00000000..f62ae639
--- /dev/null
+++ b/frontend/src/features/contest/hooks/useContestRuntimeMode.test.tsx
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { useContestRuntimeMode } from './useContestRuntimeMode';
+
+const wrap = (initialPath: string) => {
+  const Wrapper = ({ children }: { children: React.ReactNode }) => (
+    <MemoryRouter initialEntries={[initialPath]}>{children}</MemoryRouter>
+  );
+  return Wrapper;
+};
+
+describe('useContestRuntimeMode', () => {
+  it.each([
+    ['/classrooms/c1/contest/x1/solve', true],
+    ['/classrooms/c1/contest/x1/solve/p1', true],
+    ['/classrooms/c1/contest/x1', false],
+    ['/classrooms/c1/contest/x1/admin', false],
+    ['/dashboard', false],
+    ['/classrooms/c1', false],
+  ])('returns isRuntime=%s for %s', (path, expected) => {
+    const { result } = renderHook(() => useContestRuntimeMode(), {
+      wrapper: wrap(path),
+    });
+    expect(result.current.isRuntime).toBe(expected);
+  });
+});
diff --git a/frontend/src/features/contest/hooks/useContestRuntimeMode.ts b/frontend/src/features/contest/hooks/useContestRuntimeMode.ts
new file mode 100644
index 00000000..7a1ba925
--- /dev/null
+++ b/frontend/src/features/contest/hooks/useContestRuntimeMode.ts
@@ -0,0 +1,12 @@
+import { useLocation } from 'react-router-dom';
+
+const RUNTIME_REGEX = /^\/classrooms\/[^/]+\/contest\/[^/]+\/solve(?:\/|$)/;
+
+export interface ContestRuntimeMode {
+  isRuntime: boolean;
+}
+
+export const useContestRuntimeMode = (): ContestRuntimeMode => {
+  const { pathname } = useLocation();
+  return { isRuntime: RUNTIME_REGEX.test(pathname) };
+};
diff --git a/frontend/src/features/contest/hooks/useScreenShareMonitoring.test.ts b/frontend/src/features/contest/hooks/useScreenShareMonitoring.test.ts
index 9b4266c7..673e873f 100644
--- a/frontend/src/features/contest/hooks/useScreenShareMonitoring.test.ts
+++ b/frontend/src/features/contest/hooks/useScreenShareMonitoring.test.ts
@@ -273,7 +273,7 @@ describe("useScreenShareMonitoring", () => {
     expect(result.current.reauth.inProgress).toBe(false);
   });
 
-  it("unmount clears reauth state", () => {
+  it("keeps reauth state across runtime unmounts", () => {
     const config = makeConfig();
     const { result, unmount } = renderHook(() =>
       useScreenShareMonitoring(config),
@@ -286,12 +286,14 @@ describe("useScreenShareMonitoring", () => {
 
     unmount();
 
-    // After unmount, runtimeReauth entry should be cleared
-    // Verify by mounting a fresh hook and checking initial state is clean
+    // Route changes can unmount the runtime wrapper while the student is still
+    // inside the active contest surface. The re-share countdown must survive so
+    // dashboard/answering remounts can keep prompting recovery.
     const { result: result2 } = renderHook(() =>
       useScreenShareMonitoring(config),
     );
-    expect(result2.current.reauth.active).toBe(false);
+    expect(result2.current.reauth.active).toBe(true);
+    expect(result2.current.reauth.inProgress).toBe(true);
   });
 
   it("reauth.remainingSeconds is non-null while countdown is active", () => {
diff --git a/frontend/src/features/contest/hooks/useScreenShareMonitoring.ts b/frontend/src/features/contest/hooks/useScreenShareMonitoring.ts
index 72785334..95d529fb 100644
--- a/frontend/src/features/contest/hooks/useScreenShareMonitoring.ts
+++ b/frontend/src/features/contest/hooks/useScreenShareMonitoring.ts
@@ -175,12 +175,11 @@ export function useScreenShareMonitoring({
     }
   }, [contestId, examSubmitted, monitoringDisabled]);
 
-  // Always clear on unmount
-  useEffect(() => {
-    return () => {
-      clearRuntimeScreenShareReauth(contestIdRef.current);
-    };
-  }, []);
+  // Do not clear on unmount: the monitored contest surface can remount while
+  // the exam is still active (for example solve <-> dashboard). The recovery
+  // countdown must survive that transition so the next mount keeps prompting
+  // the student to re-share. Terminal cleanup is handled by examSubmitted /
+  // monitoringDisabled and by explicit exam action cleanup.
 
   return {
     onStreamLost,
diff --git a/frontend/src/features/contest/index.ts b/frontend/src/features/contest/index.ts
index 90235aad..3efa48ff 100644
--- a/frontend/src/features/contest/index.ts
+++ b/frontend/src/features/contest/index.ts
@@ -4,9 +4,10 @@
 // (e.g., "@/features/contest/contexts") instead of this barrel.
 
 export {
-  classroomContestDetailRoutes,
+  classroomContestRouteChildren,
   classroomContestAdminRoute,
   classroomExamPreviewRoute,
   classroomExamPrecheckRoute,
   classroomPracticeRoute,
 } from "./routes";
+export { default as ContestWorkspaceLayout } from "./components/layout/ContestWorkspaceLayout";
diff --git a/frontend/src/features/contest/routes.tsx b/frontend/src/features/contest/routes.tsx
index 5ad8d2df..bd0f0bb4 100644
--- a/frontend/src/features/contest/routes.tsx
+++ b/frontend/src/features/contest/routes.tsx
@@ -1,6 +1,6 @@
 import { lazy, Suspense } from "react";
 import { Route } from "react-router";
-import ContestLayout from "./components/layout/ContestLayout";
+import RuntimeRouteWrapper from "./components/layout/RuntimeRouteWrapper";
 import { ContestProvider } from "./contexts/ContestContext";
 import ContestDashboardScreen from "./screens/ContestDashboardScreen";
 import ContestSolveScreen from "./screens/ContestSolveScreen";
@@ -13,14 +13,30 @@ const ExamPrecheckScreen = lazy(() => import("./screens/paperExam/ExamPrecheckSc
 // ── Classroom-scoped contest routes (/classrooms/:classroomId/contest/:contestId) ──
 
 /**
- * Classroom Contest Detail 路由（需在 RequireAuth 內使用，有獨立 Layout）
+ * Classroom Contest 主路由 children（dashboard + runtime 共用同一條 layout 軌道）。
+ * App.tsx 會把這段放在 ContestWorkspaceLayout -> MainLayout 之下，讓 WorkspaceShell
+ * 的 top nav / side menu 也能讀到 ContestProvider。
  */
-export const classroomContestDetailRoutes = (
-  <Route path="/classrooms/:classroomId/contest/:contestId" element={<ContestLayout />}>
+export const classroomContestRouteChildren = (
+  <>
     <Route index element={<ContestDashboardScreen />} />
-    <Route path="solve" element={<ContestSolveScreen />} />
-    <Route path="solve/:problemId" element={<ContestSolveScreen />} />
-  </Route>
+    <Route
+      path="solve"
+      element={
+        <RuntimeRouteWrapper>
+          <ContestSolveScreen />
+        </RuntimeRouteWrapper>
+      }
+    />
+    <Route
+      path="solve/:problemId"
+      element={
+        <RuntimeRouteWrapper>
+          <ContestSolveScreen />
+        </RuntimeRouteWrapper>
+      }
+    />
+  </>
 );
 
 /**
diff --git a/frontend/src/features/contest/screens/ContestDashboardScreen.tsx b/frontend/src/features/contest/screens/ContestDashboardScreen.tsx
index 8e5e4ddc..5bc8b47c 100644
--- a/frontend/src/features/contest/screens/ContestDashboardScreen.tsx
+++ b/frontend/src/features/contest/screens/ContestDashboardScreen.tsx
@@ -1,46 +1,28 @@
-import { useState, useEffect, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { useSearchParams } from "react-router-dom";
-import { Modal, SkeletonText, Grid, Column, Tile } from "@carbon/react";
+import { useEffect } from "react";
+import { useSearchParams, useOutletContext } from "react-router-dom";
+import { SkeletonText, Grid, Column, Tile } from "@carbon/react";
 
-import type { ScoreboardRow } from "@/core/entities/contest.entity";
-import { useAuth } from "@/features/auth/contexts/AuthContext";
 import { SubmissionDetailModal } from "@/features/submissions/components";
 import { useContest } from "@/features/contest/contexts/ContestContext";
 
-import {
-  type ContestTabKey,
-} from "@/features/contest/tabConfig";
-import { getContestTypeModule } from "@/features/contest/modules/registry";
-import { resolveStudentTabRenderer } from "@/features/contest/modules/StudentTabRendererRegistry";
+import StudentContestDashboard from "@/features/contest/components/studentDashboard/StudentContestDashboardView";
+
+interface ContestDashboardOutletContext {
+  refreshContest?: () => Promise<void>;
+  onJoin?: (data?: { password?: string }) => void;
+  onStartExam?: () => void;
+  onEndExam?: () => void;
+  onGoToAnswering?: () => void;
+  onOpenAdminPanel?: () => void;
+  isAdmin?: boolean;
+}
 
 const ContestDashboard = () => {
-  const { t } = useTranslation('contest');
-  const { t: tc } = useTranslation('common');
   const [searchParams, setSearchParams] = useSearchParams();
+  const outletContext = useOutletContext<ContestDashboardOutletContext | null>();
 
-  // Use contest and standings from context
-  const { contest, loading, scoreboardData } = useContest();
-  const { user: currentUser } = useAuth();
-
-  // Personal stats state
-  const [myRank, setMyRank] = useState<ScoreboardRow | null>(null);
-  const [lockModalOpen, setLockModalOpen] = useState(false);
-
-  // Find my rank from context standings
-  useEffect(() => {
-    const timerId = setTimeout(() => {
-      if (!currentUser) {
-        setMyRank(null);
-        return;
-      }
-      const myEntry = scoreboardData?.rows?.find(
-        (s) => s.displayName === currentUser.username
-      );
-      setMyRank(myEntry || null);
-    }, 0);
-    return () => clearTimeout(timerId);
-  }, [currentUser, scoreboardData]);
+  // Use contest from context; student dashboard intentionally avoids standings.
+  const { contest, loading } = useContest();
 
   const handleSubmissionClose = () => {
     setSearchParams((prev) => {
@@ -50,36 +32,17 @@ const ContestDashboard = () => {
     });
   };
 
-  const selectedTabParam = searchParams.get("tab") || "overview";
   const selectedSubmissionId = searchParams.get("submissionId");
-  const contestModule = useMemo(
-    () => getContestTypeModule(contest?.contestType),
-    [contest?.contestType],
-  );
-  const availableTabs = useMemo(
-    () => contestModule.student.getTabs(contest),
-    [contest, contestModule],
-  );
-
-  const availableTabKeys = useMemo(
-    () => availableTabs.map((tab) => tab.key),
-    [availableTabs]
-  );
-
-  const selectedTabKey = availableTabKeys.includes(selectedTabParam as ContestTabKey)
-    ? selectedTabParam
-    : availableTabKeys[0];
-  const selectedTab = availableTabs.find((tab) => tab.key === selectedTabKey) ?? availableTabs[0];
 
   useEffect(() => {
     if (!contest) return;
-    if (selectedTabParam === selectedTabKey) return;
+    if (!searchParams.has("tab")) return;
     setSearchParams((prev) => {
       const next = new URLSearchParams(prev);
-      next.set("tab", selectedTabKey);
+      next.delete("tab");
       return next;
     });
-  }, [contest, selectedTabKey, selectedTabParam, setSearchParams]);
+  }, [contest, searchParams, setSearchParams]);
 
   // Skeleton loading component
   const renderSkeleton = () => (
@@ -118,23 +81,19 @@ const ContestDashboard = () => {
 
   // Guard against null contest
   if (!contest) return renderSkeleton();
-  if (!selectedTab) return null;
-
-  const renderTabContent = () => {
-    const render = resolveStudentTabRenderer(
-      contestModule,
-      selectedTab.contentKind,
-    );
-    return render({
-      contest,
-      myRank,
-      maxWidth: "1056px",
-    });
-  };
 
   return (
     <>
-      {renderTabContent()}
+      <StudentContestDashboard
+        contest={contest}
+        onJoin={outletContext?.onJoin}
+        onStartExam={outletContext?.onStartExam}
+        onEndExam={outletContext?.onEndExam}
+        onGoToAnswering={outletContext?.onGoToAnswering}
+        onOpenAdminPanel={outletContext?.onOpenAdminPanel}
+        onRefreshContest={outletContext?.refreshContest}
+        isAdmin={outletContext?.isAdmin}
+      />
 
       {/* Submission Detail Modal */}
       {selectedSubmissionId && (
@@ -144,18 +103,6 @@ const ContestDashboard = () => {
           onClose={handleSubmissionClose}
         />
       )}
-
-      {/* Lock Modal */}
-      <Modal
-        open={lockModalOpen}
-        modalHeading={t('exam.answerLocked')}
-        primaryButtonText={tc('button.confirm')}
-        onRequestClose={() => setLockModalOpen(false)}
-        onRequestSubmit={() => setLockModalOpen(false)}
-        size="sm"
-      >
-        <p>{t('exam.contactProctorToUnlock')}</p>
-      </Modal>
     </>
   );
 };
diff --git a/frontend/src/features/contest/screens/ContestPreRegistrationScreen.tsx b/frontend/src/features/contest/screens/ContestPreRegistrationScreen.tsx
index 5375de2f..71c35846 100644
--- a/frontend/src/features/contest/screens/ContestPreRegistrationScreen.tsx
+++ b/frontend/src/features/contest/screens/ContestPreRegistrationScreen.tsx
@@ -20,7 +20,7 @@ import styles from "./ContestPreRegistrationScreen.module.scss";
 interface ContestPreRegistrationScreenProps {
   contest: ContestDetail;
   loading?: boolean;
-  onJoin?: (data?: { nickname?: string; password?: string }) => void;
+  onJoin?: (data?: { password?: string }) => void;
   isAdmin?: boolean;
   onOpenAdminPanel?: () => void;
 }
@@ -136,7 +136,7 @@ const ContestPreRegistrationScreen: React.FC<ContestPreRegistrationScreenProps>
     setShowRegisterModal(true);
   };
 
-  const handleRegisterSubmit = (data: { nickname?: string; password?: string }) => {
+  const handleRegisterSubmit = (data: { password?: string }) => {
     setShowRegisterModal(false);
     onJoin?.(data);
   };
@@ -228,18 +228,6 @@ const ContestPreRegistrationScreen: React.FC<ContestPreRegistrationScreenProps>
             />
           )}
 
-          {contest.anonymousModeEnabled && (
-            <InlineNotification
-              kind="info"
-              title={t("preRegistration.anonymousTitle", "匿名模式")}
-              subtitle={t(
-                "hero.anonymousModeHint",
-                "本競賽已啟用匿名模式，您可以設定一個暱稱。排行榜和提交列表將顯示您的暱稱而非真實帳號。"
-              )}
-              lowContrast
-              hideCloseButton
-            />
-          )}
         </div>
 
         {contest.rules && (
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminContestSettingsScreen.tsx b/frontend/src/features/contest/screens/admin/panels/AdminContestSettingsScreen.tsx
index 4e4025d9..ce4fcb4a 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminContestSettingsScreen.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminContestSettingsScreen.tsx
@@ -249,7 +249,6 @@ const ContestSettingsOverlay = ({ open, onClose }: ContestSettingsOverlayProps)
       warningTimeoutSeconds: contest.warningTimeoutSeconds ?? 20,
       screenShareRecoveryGraceMs: contest.screenShareRecoveryGraceMs ?? 30_000,
       scoreboardVisibleDuringContest: contest.scoreboardVisibleDuringContest ?? false,
-      anonymousModeEnabled: contest.anonymousModeEnabled ?? false,
       allowMultipleJoins: contest.allowMultipleJoins ?? false,
       maxCheatWarnings: contest.maxCheatWarnings ?? 0,
       allowAutoUnlock: contest.allowAutoUnlock ?? false,
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
index eede3886..4d295642 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.module.scss
@@ -15,95 +15,27 @@
   padding: 0;
 }
 
-.contestHeader {
+.overviewHeader {
   display: flex;
+  min-height: 3rem;
+  min-width: 0;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  min-height: 4.5rem;
-  padding: 0.875rem 1rem;
-}
-
-.dashboardTitleBlock {
-  display: grid;
-  gap: 0.5rem;
-  min-width: 0;
-}
-
-.dashboardTitleRow {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  align-items: center;
+  padding-inline: 1rem;
 }
 
-.dashboardTitleRow h2 {
+.overviewHeaderTitle {
   margin: 0;
-  overflow-wrap: anywhere;
   color: var(--cds-text-primary);
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.25;
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: var(--cds-heading-compact-02-font-weight, 600);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
 }
 
-.dashboardDescription {
-  max-width: 52rem;
-  margin: 0;
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.headerActions {
+.overviewHeaderActions {
   display: inline-flex;
-  align-items: center;
-  gap: 0.125rem;
   flex: 0 0 auto;
-}
-
-@media (max-width: 900px) {
-  .contestHeader {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .headerActions {
-    align-self: flex-end;
-  }
-}
-
-.publishSummary {
-  display: grid;
-  gap: 0.75rem;
-}
-
-.publishSummaryIntro {
-  margin: 0;
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-}
-
-.publishSummaryGrid {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.publishSummaryItem {
-  display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.5rem 0.625rem;
-  border: 1px solid var(--cds-border-subtle);
-  border-radius: 0.375rem;
-}
-
-.publishSummaryLabel {
-  color: var(--cds-text-secondary);
-  font-size: var(--cds-label-01-font-size, 0.75rem);
-}
-
-.publishSummaryValue {
-  color: var(--cds-text-primary);
-  font-weight: 600;
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  gap: 0.25rem;
 }
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.test.tsx b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.test.tsx
index f621343f..0265325e 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.test.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.test.tsx
@@ -156,6 +156,8 @@ describe("AdminOverviewScreen", () => {
     renderScreen("/contest/contest-1/admin?panel=overview&view=live");
 
     expect(screen.getByTestId("live-dashboard")).toBeInTheDocument();
+    expect(screen.getByText("Overview")).toBeInTheDocument();
+    expect(screen.queryByText("演算法期中考")).not.toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "重新整理" }),
     ).toBeInTheDocument();
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
index 2e0866c2..4a539299 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminOverviewScreen.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Button, Tag } from "@carbon/react";
+import { Button } from "@carbon/react";
 import {
   Download,
   Launch,
@@ -25,51 +25,32 @@ import type {
   AdminPanelProps,
 } from "@/features/contest/modules/types";
 import { useGradingData } from "@/features/contest/screens/settings/grading";
-import { addContestParticipant } from "@/infrastructure/api/repositories";
+import { addContestParticipant, updateContest } from "@/infrastructure/api/repositories";
 import { exportContestResults } from "@/infrastructure/api/repositories/contestExports.repository";
 import { useToast } from "@/shared/contexts/ToastContext";
-import { buildAdminOverviewDashboard } from "./adminOverviewDashboard.model";
+import {
+  buildAdminOverviewDashboard,
+  type DashboardText,
+} from "./adminOverviewDashboard.model";
 import styles from "./AdminOverviewScreen.module.scss";
 
-type ContestStatusDisplay = {
-  label: string;
-  type: "gray" | "cool-gray" | "green";
-};
-
-const useContestStatusDisplay = () => {
-  const { t } = useTranslation("contest");
-  return useCallback(
-    (status: string): ContestStatusDisplay => {
-      if (status === "draft")
-        return {
-          label: t("adminOverview.screen.contestStatus.draft", "草稿"),
-          type: "gray",
-        };
-      if (
-        status === "archived" ||
-        status === "ended" ||
-        status === "completed" ||
-        status === "success"
-      )
-        return {
-          label: t("adminOverview.screen.contestStatus.archived", "已封存"),
-          type: "green",
-        };
-      return {
-        label: t("adminOverview.screen.contestStatus.published", "已發布"),
-        type: "green",
-      };
-    },
-    [t],
-  );
-};
-
 export default function AdminOverviewScreen({
   onOpenSettings,
 }: AdminPanelProps) {
   const { t } = useTranslation("contest");
+  const tr = useCallback<DashboardText>(
+    (key, defaultValue, values) => {
+      const translated = values
+        ? t(key, { defaultValue, ...values })
+        : t(key, defaultValue);
+      if (typeof translated === "string") return translated;
+      return defaultValue.replace(/{{(\w+)}}/g, (_, name) =>
+        String(values?.[name] ?? ""),
+      );
+    },
+    [t],
+  );
   const { showToast } = useToast();
-  const contestStatusDisplay = useContestStatusDisplay();
   const { contest, refreshContest } = useContest();
   const {
     participants,
@@ -82,6 +63,7 @@ export default function AdminOverviewScreen({
   const [, setSearchParams] = useSearchParams();
   const [refreshing, setRefreshing] = useState(false);
   const [exporting, setExporting] = useState(false);
+  const [publishingResults, setPublishingResults] = useState(false);
   const [resultRefreshKey, setResultRefreshKey] = useState(0);
   const [addParticipantOpen, setAddParticipantOpen] = useState(false);
   const classroomBound = Boolean(contest?.isClassroomBound);
@@ -140,8 +122,9 @@ export default function AdminOverviewScreen({
       examEvents,
       overviewMetrics,
       gradingStats: globalStats,
+      tr,
     });
-  }, [contest, participants, examEvents, overviewMetrics, globalStats]);
+  }, [contest, participants, examEvents, overviewMetrics, globalStats, tr]);
 
   const openPanel = useCallback(
     (panel: AdminPanelId) => {
@@ -197,13 +180,52 @@ export default function AdminOverviewScreen({
     }
   }, [contest?.id, exporting, showToast, t]);
 
+  const handleToggleResultsPublished = useCallback(async () => {
+    if (!contest?.id || publishingResults) return;
+    const nextPublished = !contest.resultsPublished;
+    setPublishingResults(true);
+    try {
+      await updateContest(contest.id, { resultsPublished: nextPublished });
+      await Promise.all([refreshContest(), refreshAllAdminData()]);
+      setResultRefreshKey((current) => current + 1);
+      showToast({
+        kind: "success",
+        title: t("common.success", "成功"),
+        subtitle: nextPublished
+          ? t("adminOverview.actions.publishResultsSuccess", "成績已發布")
+          : t("adminOverview.actions.revokeResultsSuccess", "已撤回成績發布"),
+      });
+    } catch (error) {
+      const message =
+        error instanceof Error
+          ? error.message
+          : nextPublished
+            ? t("adminOverview.actions.publishResultsFailed", "發布失敗")
+            : t("adminOverview.actions.revokeResultsFailed", "撤回失敗");
+      showToast({
+        kind: "error",
+        title: t("common.error", "錯誤"),
+        subtitle: message,
+      });
+    } finally {
+      setPublishingResults(false);
+    }
+  }, [
+    contest?.id,
+    contest?.resultsPublished,
+    publishingResults,
+    refreshAllAdminData,
+    refreshContest,
+    showToast,
+    t,
+  ]);
+
   useEffect(() => {
     return registerPanelRefresh("overview", handleRefresh);
   }, [handleRefresh, registerPanelRefresh]);
 
   if (!contest) return null;
 
-  const status = contestStatusDisplay(contest.status ?? "draft");
   const contestHomePath = contest.boundClassroomId
     ? `/classrooms/${contest.boundClassroomId}/contest/${contest.id}`
     : null;
@@ -213,84 +235,77 @@ export default function AdminOverviewScreen({
       : t("adminOverview.screen.contestType.coding", "Coding Test");
   const renderContestHeader = () => (
     <section
-      className={styles.contestHeader}
+      className={styles.overviewHeader}
       aria-label={t("adminOverview.screen.contestInfoLabel", "競賽資訊")}
     >
-      <div className={styles.dashboardTitleBlock}>
-        <div className={styles.dashboardTitleRow}>
-          <h2>{contest.name}</h2>
-          <Tag type={status.type} size="sm">
-            {status.label}
-          </Tag>
-          <Tag type="cool-gray" size="sm">
-            {contestTypeLabel}
-          </Tag>
-        </div>
-        {contest.description ? (
-          <p className={styles.dashboardDescription}>{contest.description}</p>
-        ) : null}
-      </div>
-      <div className={styles.headerActions}>
-        <Button
-          kind="ghost"
-          hasIconOnly
-          renderIcon={Settings}
-          iconDescription={t(
-            "adminOverview.screen.actions.settings",
-            "競賽設定",
-          )}
-          onClick={openSettings}
-        />
-        <Button
-          kind="ghost"
-          hasIconOnly
-          renderIcon={Launch}
-          iconDescription={t(
-            "adminOverview.screen.actions.contestHome",
-            "競賽主頁",
-          )}
-          disabled={!contestHomePath}
-          onClick={() => {
-            if (!contestHomePath) return;
-            window.open(contestHomePath, "_blank", "noopener,noreferrer");
-          }}
-        />
-        {classroomBound ? null : (
-          <Button
-            kind="ghost"
-            hasIconOnly
-            renderIcon={UserFollow}
-            iconDescription={t(
-              "adminOverview.screen.actions.addParticipant",
-              "新增參賽者",
+      <h2 className={styles.overviewHeaderTitle}>
+        {t("adminOverview.screen.title", "Overview")}
+      </h2>
+      <div className={styles.overviewHeaderActions}>
+        {
+          <>
+            <Button
+              kind="ghost"
+              hasIconOnly
+              renderIcon={Settings}
+              iconDescription={t(
+                "adminOverview.screen.actions.settings",
+                "競賽設定",
+              )}
+              onClick={openSettings}
+            />
+            <Button
+              kind="ghost"
+              hasIconOnly
+              renderIcon={Launch}
+              iconDescription={t(
+                "adminOverview.screen.actions.contestHome",
+                "競賽主頁",
+              )}
+              disabled={!contestHomePath}
+              onClick={() => {
+                if (!contestHomePath) return;
+                window.open(contestHomePath, "_blank", "noopener,noreferrer");
+              }}
+            />
+            {classroomBound ? null : (
+              <Button
+                kind="ghost"
+                hasIconOnly
+                renderIcon={UserFollow}
+                iconDescription={t(
+                  "adminOverview.screen.actions.addParticipant",
+                  "新增參賽者",
+                )}
+                onClick={() => setAddParticipantOpen(true)}
+              />
             )}
-            onClick={() => setAddParticipantOpen(true)}
-          />
-        )}
-        <Button
-          kind="ghost"
-          hasIconOnly
-          renderIcon={Renew}
-          iconDescription={
-            refreshing
-              ? t("adminOverview.screen.actions.refreshing", "重新整理中")
-              : t("adminOverview.screen.actions.refresh", "重新整理")
-          }
-          disabled={refreshing}
-          onClick={() => void handleRefresh()}
-        />
-        <Button
-          kind="ghost"
-          hasIconOnly
-          renderIcon={Download}
-          iconDescription={
-            exporting
-              ? t("adminOverview.screen.actions.exporting", "匯出中")
-              : t("adminOverview.screen.actions.export", "匯出成績")
-          }
-          disabled={exporting || !contest.id}
-          onClick={() => void handleExport()}
-        />
+            <Button
+              kind="ghost"
+              hasIconOnly
+              renderIcon={Renew}
+              iconDescription={
+                refreshing
+                  ? t("adminOverview.screen.actions.refreshing", "重新整理中")
+                  : t("adminOverview.screen.actions.refresh", "重新整理")
+              }
+              disabled={refreshing}
+              onClick={() => void handleRefresh()}
+            />
+            <Button
+              kind="ghost"
+              hasIconOnly
+              renderIcon={Download}
+              iconDescription={
+                exporting
+                  ? t("adminOverview.screen.actions.exporting", "匯出中")
+                  : t("adminOverview.screen.actions.export", "匯出成績")
+              }
+              disabled={exporting || !contest.id}
+              onClick={() => void handleExport()}
+            />
+          </>
+        }
       </div>
     </section>
   );
@@ -311,6 +326,19 @@ export default function AdminOverviewScreen({
             onOpenPanel={openPanel}
             participants={participants}
             primary={null}
+            overviewInfo={{
+              contestTypeLabel,
+            }}
+            gradingAction={{
+              label: contest.resultsPublished
+                ? t("adminOverview.actions.revokeResults", "撤回發布")
+                : t("adminOverview.actions.publishResults", "發布成績"),
+              loadingLabel: t("action.processing", "處理中..."),
+              onClick: () => void handleToggleResultsPublished(),
+              disabled: !contest.id,
+              loading: publishingResults,
+              kind: contest.resultsPublished ? "danger--tertiary" : "primary",
+            }}
             resultOverview={
               <AdminExamResultOverview
                 contest={contest}
diff --git a/frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx b/frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx
index 629f15ae..ae2f2d7e 100644
--- a/frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx
+++ b/frontend/src/features/contest/screens/admin/panels/AdminProctoringPanel.tsx
@@ -80,9 +80,7 @@ const inferSourceModule = (publisher: RealtimeSfuPublisherDto): LiveSource => {
 };
 
 const getParticipantDisplayName = (participant: ContestParticipant) =>
-  participant.userDisplayName ||
   participant.displayName ||
-  participant.nickname ||
   participant.username;
 
 const isParticipantLive = (participant: ContestParticipant) =>
@@ -123,9 +121,7 @@ const isContestInExamWindow = (contest: ContestDetail | null | undefined, now: n
 const getParticipantSearchText = (participant: ContestParticipant) =>
   [
     participant.username,
-    participant.userDisplayName,
     participant.displayName,
-    participant.nickname,
     participant.email,
     participant.examStatus,
   ]
diff --git a/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.test.ts b/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.test.ts
index f53794cd..737d907f 100644
--- a/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.test.ts
+++ b/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.test.ts
@@ -63,7 +63,7 @@ const participant = (
   ({
     userId,
     username: `student-${userId}`,
-    userDisplayName: `學生 ${userId}`,
+    displayName: `學生 ${userId}`,
     accountRole: "student",
     connectionStatus: "online",
     score: 0,
diff --git a/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts b/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts
index dbe8b090..0918ac0c 100644
--- a/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts
+++ b/frontend/src/features/contest/screens/admin/panels/adminOverviewDashboard.model.ts
@@ -11,6 +11,23 @@ import {
   formatDuration,
 } from "@/features/contest/components/admin/overviewMetrics.utils";
 
+export type DashboardText = (
+  key: string,
+  defaultValue: string,
+  values?: Record<string, string | number>,
+) => string;
+
+const interpolateDashboardText = (
+  defaultValue: string,
+  values?: Record<string, string | number>,
+) =>
+  defaultValue.replace(/{{(\w+)}}/g, (_, name) =>
+    String(values?.[name] ?? ""),
+  );
+
+const defaultDashboardText: DashboardText = (_key, defaultValue, values) =>
+  interpolateDashboardText(defaultValue, values);
+
 export type OverviewKpiKey =
   | "online"
   | "started"
@@ -180,9 +197,8 @@ const studentParticipants = (participants: ContestParticipant[]) =>
       !participant.accountRole || participant.accountRole === "student",
   );
 
-const displayName = (participant: ContestParticipant) =>
+const getProfileDisplayName = (participant: ContestParticipant) =>
   participant.displayName ||
-  participant.userDisplayName ||
   participant.username ||
   participant.userId;
 
@@ -244,10 +260,15 @@ const formatScheduleDateTime = (
   return dateTime === "-" ? dateTime : dateTime.replace(" ", "\n");
 };
 
-const formatWindow = (contest: ContestDetail) => {
+const formatWindow = (
+  contest: ContestDetail,
+  tr: DashboardText = defaultDashboardText,
+) => {
   const start = formatTime(contest.startTime);
   const end = formatTime(contest.endTime);
-  if (start === "-" || end === "-") return "未設定";
+  if (start === "-" || end === "-") {
+    return tr("adminOverview.model.common.unset", "未設定");
+  }
   return `${start}-${end}`;
 };
 
@@ -257,15 +278,17 @@ const buildTimelineSummary = ({
   contest,
   now,
   progressPercent,
+  tr = defaultDashboardText,
 }: {
   contest: ContestDetail;
   now: Date;
   progressPercent?: number;
+  tr?: DashboardText;
 }): DashboardTimelineSummary => {
   const start = Date.parse(contest.startTime);
   const end = Date.parse(contest.endTime);
   const nowMs = now.getTime();
-  const timeWindowLabel = formatWindow(contest);
+  const timeWindowLabel = formatWindow(contest, tr);
   const startDateKey = formatDateKey(contest.startTime);
   const endDateKey = formatDateKey(contest.endTime);
   const isCrossDay = Boolean(
@@ -276,8 +299,8 @@ const buildTimelineSummary = ({
 
   if (!Number.isFinite(start) || !Number.isFinite(end) || end <= start) {
     return {
-      phaseLabel: "時間未設定",
-      primaryTimeLabel: "未設定",
+      phaseLabel: tr("adminOverview.model.timeline.timeUnset", "時間未設定"),
+      primaryTimeLabel: tr("adminOverview.model.common.unset", "未設定"),
       timeWindowLabel,
       startDateTimeLabel,
       endDateTimeLabel,
@@ -287,8 +310,12 @@ const buildTimelineSummary = ({
 
   if (nowMs < start) {
     return {
-      phaseLabel: "尚未開始",
-      primaryTimeLabel: `距離開始 ${formatDuration((start - nowMs) / 1000)}`,
+      phaseLabel: tr("adminOverview.model.timeline.notStarted", "尚未開始"),
+      primaryTimeLabel: tr(
+        "adminOverview.model.timeline.startsIn",
+        "距離開始 {{time}}",
+        { time: formatDuration((start - nowMs) / 1000) },
+      ),
       timeWindowLabel,
       startDateTimeLabel,
       endDateTimeLabel,
@@ -298,8 +325,11 @@ const buildTimelineSummary = ({
 
   if (nowMs >= end) {
     return {
-      phaseLabel: "已結束",
-      primaryTimeLabel: "考試已結束",
+      phaseLabel: tr("adminOverview.model.timeline.ended", "已結束"),
+      primaryTimeLabel: tr(
+        "adminOverview.model.timeline.examEnded",
+        "考試已結束",
+      ),
       timeWindowLabel,
       startDateTimeLabel,
       endDateTimeLabel,
@@ -310,8 +340,10 @@ const buildTimelineSummary = ({
   const resolvedProgress =
     progressPercent ?? ((nowMs - start) / Math.max(1, end - start)) * 100;
   return {
-    phaseLabel: "進行中",
-    primaryTimeLabel: `剩餘 ${formatDuration((end - nowMs) / 1000)}`,
+    phaseLabel: tr("adminOverview.model.timeline.running", "進行中"),
+    primaryTimeLabel: tr("adminOverview.model.timeline.remaining", "剩餘 {{time}}", {
+      time: formatDuration((end - nowMs) / 1000),
+    }),
     timeWindowLabel,
     startDateTimeLabel,
     endDateTimeLabel,
@@ -333,13 +365,19 @@ const getWorkItemCount = (contest: ContestDetail) =>
 const percentage = (value: number, total: number) =>
   total <= 0 ? 0 : Math.round((value / total) * 100);
 
-const buildProgressSeries = (percent: number): DashboardChartSeries[] => [
+const buildProgressSeries = (
+  percent: number,
+  tr: DashboardText = defaultDashboardText,
+): DashboardChartSeries[] => [
   {
     key: "progress",
-    label: "進度",
+    label: tr("adminOverview.model.progress.label", "進度"),
     values: [
-      { label: "開始", value: 0 },
-      { label: "目前", value: clampPercent(percent) },
+      { label: tr("adminOverview.model.progress.start", "開始"), value: 0 },
+      {
+        label: tr("adminOverview.model.progress.current", "目前"),
+        value: clampPercent(percent),
+      },
     ],
   },
 ];
@@ -363,10 +401,12 @@ export const getTeacherAttentionRows = ({
   participants,
   examEvents,
   limit = 5,
+  tr = defaultDashboardText,
 }: {
   participants: ContestParticipant[];
   examEvents: ExamEvent[];
   limit?: number;
+  tr?: DashboardText;
 }): TeacherAttentionRow[] => {
   const latest = latestEventByUser(
     examEvents.filter((event) => event.eventType !== "heartbeat"),
@@ -381,7 +421,7 @@ export const getTeacherAttentionRows = ({
     const common = {
       id: participant.userId,
       userId: participant.userId,
-      studentName: displayName(participant),
+      studentName: getProfileDisplayName(participant),
       timeLabel: formatTime(
         latestEvent?.timestamp ||
           participantTimestamps.lockedAt ||
@@ -393,8 +433,10 @@ export const getTeacherAttentionRows = ({
       rows.push({
         ...common,
         kind: "locked",
-        statusLabel: "鎖定",
-        eventLabel: participant.lockReason || "考試已鎖定",
+        statusLabel: tr("adminOverview.model.status.locked", "鎖定"),
+        eventLabel:
+          participant.lockReason ||
+          tr("adminOverview.model.attention.examLocked", "考試已鎖定"),
         panelTarget: "participants",
       });
       continue;
@@ -404,10 +446,14 @@ export const getTeacherAttentionRows = ({
       rows.push({
         ...common,
         kind: "violation",
-        statusLabel: "違規",
+        statusLabel: tr("adminOverview.model.status.anomaly", "異常"),
         eventLabel: latestEvent
           ? latestEvent.eventType
-          : `${participant.violationCount} 次違規`,
+          : tr(
+              "adminOverview.model.attention.anomalyCount",
+              "{{count}} 次異常",
+              { count: participant.violationCount ?? 0 },
+            ),
         panelTarget: "logs",
       });
       continue;
@@ -417,8 +463,11 @@ export const getTeacherAttentionRows = ({
       rows.push({
         ...common,
         kind: "offline",
-        statusLabel: "離線",
-        eventLabel: "連線中斷",
+        statusLabel: tr("adminOverview.model.status.offline", "離線"),
+        eventLabel: tr(
+          "adminOverview.model.attention.connectionInterrupted",
+          "連線中斷",
+        ),
         panelTarget: "participants",
       });
       continue;
@@ -428,8 +477,11 @@ export const getTeacherAttentionRows = ({
       rows.push({
         ...common,
         kind: "not_started",
-        statusLabel: "未開始",
-        eventLabel: "尚未進入考試",
+        statusLabel: tr("adminOverview.model.status.notStarted", "未開始"),
+        eventLabel: tr(
+          "adminOverview.model.attention.notEntered",
+          "尚未進入考試",
+        ),
         panelTarget: "participants",
       });
     }
@@ -447,6 +499,7 @@ export const getTeacherAttentionRows = ({
 
 const buildDistribution = (
   participants: ContestParticipant[],
+  tr: DashboardText = defaultDashboardText,
 ): DistributionItem[] => {
   const students = studentParticipants(participants);
   const total = students.length;
@@ -456,29 +509,29 @@ const buildDistribution = (
   const items = [
     {
       key: "in_progress" as const,
-      label: "作答中",
+      label: tr("adminOverview.model.status.inProgress", "作答中"),
       value: count((p) => p.examStatus === "in_progress"),
     },
     {
       key: "not_started" as const,
-      label: "未開始",
+      label: tr("adminOverview.model.status.notStarted", "未開始"),
       value: count((p) => p.examStatus === "not_started"),
     },
     {
       key: "submitted" as const,
-      label: "已交卷",
+      label: tr("adminOverview.model.status.submitted", "已交卷"),
       value: count((p) => p.examStatus === "submitted"),
     },
     {
       key: "locked" as const,
-      label: "鎖定",
+      label: tr("adminOverview.model.status.locked", "鎖定"),
       value: count(
         (p) => p.examStatus === "locked" || p.examStatus === "paused",
       ),
     },
     {
       key: "offline" as const,
-      label: "離線",
+      label: tr("adminOverview.model.status.offline", "離線"),
       value: count((p) => p.connectionStatus === "offline"),
     },
   ];
@@ -507,6 +560,7 @@ const buildRecentEvents = (examEvents: ExamEvent[]): RecentExamEventItem[] =>
 
 const buildPriorityEventSeries = (
   examEvents: ExamEvent[],
+  tr: DashboardText = defaultDashboardText,
 ): DashboardChartSeries[] => {
   const priorityEvents = examEvents
     .filter((event) => {
@@ -518,7 +572,10 @@ const buildPriorityEventSeries = (
     new Set(priorityEvents.map((event) => formatTime(event.timestamp))),
   ).slice(-8);
 
-  const safeLabels = bucketLabels.length > 0 ? bucketLabels : ["目前"];
+  const safeLabels =
+    bucketLabels.length > 0
+      ? bucketLabels
+      : [tr("adminOverview.model.progress.current", "目前")];
   const countFor = (priority: number, label: string) =>
     priorityEvents.filter(
       (event) =>
@@ -559,11 +616,13 @@ const buildInsightCards = ({
   gradingLabel,
   examProgressPercent,
   examEvents,
+  tr = defaultDashboardText,
 }: {
   gradingPercent: number;
   gradingLabel: string;
   examProgressPercent: number;
   examEvents: ExamEvent[];
+  tr?: DashboardText;
 }): DashboardInsightCard[] => {
   const priorityTotal = examEvents.filter((event) => {
     const priority = getEventPriority(event.eventType);
@@ -573,26 +632,26 @@ const buildInsightCards = ({
   return [
     {
       key: "grading_progress",
-      title: "批改進度",
+      title: tr("adminOverview.model.insights.gradingProgress", "批改進度"),
       value: gradingLabel,
       kind: "progress",
       progressPercent: gradingPercent,
-      series: buildProgressSeries(gradingPercent),
+      series: buildProgressSeries(gradingPercent, tr),
     },
     {
       key: "exam_progress",
-      title: "考試進度",
+      title: tr("adminOverview.model.insights.examProgress", "考試進度"),
       value: `${Math.round(clampPercent(examProgressPercent))}%`,
       kind: "progress",
       progressPercent: examProgressPercent,
-      series: buildProgressSeries(examProgressPercent),
+      series: buildProgressSeries(examProgressPercent, tr),
     },
     {
       key: "priority_events",
-      title: "違規事件",
+      title: tr("adminOverview.model.insights.priorityEvents", "異常事件"),
       value: String(priorityTotal),
       kind: "line",
-      series: buildPriorityEventSeries(examEvents),
+      series: buildPriorityEventSeries(examEvents, tr),
     },
   ];
 };
@@ -604,6 +663,7 @@ export const buildAdminOverviewDashboard = ({
   overviewMetrics,
   gradingStats,
   now = new Date(),
+  tr = defaultDashboardText,
 }: {
   contest: ContestDetail;
   participants: ContestParticipant[];
@@ -611,6 +671,7 @@ export const buildAdminOverviewDashboard = ({
   overviewMetrics: ContestOverviewMetrics | null;
   gradingStats?: GlobalStats;
   now?: Date;
+  tr?: DashboardText;
 }): AdminOverviewDashboardData => {
   const students = studentParticipants(participants);
   const total = Math.max(students.length, contest.participantCount || 0);
@@ -632,6 +693,7 @@ export const buildAdminOverviewDashboard = ({
     participants,
     examEvents,
     limit: 5,
+    tr,
   });
   const liveTimeProgress =
     overviewMetrics?.timeProgress ||
@@ -640,38 +702,41 @@ export const buildAdminOverviewDashboard = ({
   const totalAnswers = gradingStats?.totalAnswers ?? 0;
   const gradingPercent =
     totalAnswers > 0 ? Math.round((gradedAnswers / totalAnswers) * 100) : 0;
-  const gradingLabel = totalAnswers > 0 ? `${gradingPercent}%` : "尚無批改資料";
+  const gradingLabel =
+    totalAnswers > 0
+      ? `${gradingPercent}%`
+      : tr("adminOverview.model.grading.noData", "尚無批改資料");
   const workItemCount = getWorkItemCount(contest);
 
   return {
     kpis: [
       {
         key: "online",
-        label: "在線考生",
+        label: tr("adminOverview.model.kpi.onlineStudents", "在線考生"),
         value: `${overviewMetrics?.onlineNow ?? 0} / ${total}`,
         tone: "neutral",
       },
       {
         key: "started",
-        label: "已開始",
+        label: tr("adminOverview.model.kpi.started", "已開始"),
         value: String(started),
         tone: "neutral",
       },
       {
         key: "submitted",
-        label: "已交卷",
+        label: tr("adminOverview.model.status.submitted", "已交卷"),
         value: String(submitted),
         tone: "neutral",
       },
       {
         key: "locked",
-        label: "鎖定",
+        label: tr("adminOverview.model.status.locked", "鎖定"),
         value: String(locked),
         tone: locked > 0 ? "danger" : "neutral",
       },
       {
         key: "attention",
-        label: "待處理事件",
+        label: tr("adminOverview.model.kpi.pendingEvents", "待處理事件"),
         value: String(attentionRows.length),
         tone: attentionRows.length > 0 ? "warning" : "neutral",
       },
@@ -680,35 +745,36 @@ export const buildAdminOverviewDashboard = ({
       contest,
       now,
       progressPercent: liveTimeProgress.progressPercent,
+      tr,
     }),
     railItems: [
       {
         key: "online",
-        label: "在線",
+        label: tr("adminOverview.model.status.online", "在線"),
         value: `${overviewMetrics?.onlineNow ?? 0} / ${total}`,
         tone: "neutral",
       },
       {
         key: "in_progress",
-        label: "作答中",
+        label: tr("adminOverview.model.status.inProgress", "作答中"),
         value: String(inProgress),
         tone: "neutral",
       },
       {
         key: "not_started",
-        label: "未開始",
+        label: tr("adminOverview.model.status.notStarted", "未開始"),
         value: String(notStarted),
         tone: notStarted > 0 ? "warning" : "neutral",
       },
       {
         key: "submitted",
-        label: "已交卷",
+        label: tr("adminOverview.model.status.submitted", "已交卷"),
         value: String(submitted),
         tone: "neutral",
       },
       {
         key: "locked_offline",
-        label: "鎖定 / 離線",
+        label: tr("adminOverview.model.status.lockedOffline", "鎖定 / 離線"),
         value: `${locked} / ${offline}`,
         tone: locked > 0 || offline > 0 ? "danger" : "neutral",
       },
@@ -718,44 +784,68 @@ export const buildAdminOverviewDashboard = ({
       gradingLabel,
       examProgressPercent: liveTimeProgress.progressPercent,
       examEvents,
+      tr,
     }),
     attentionRows,
-    distribution: buildDistribution(participants),
+    distribution: buildDistribution(participants, tr),
     examStatus: {
-      timeWindowLabel: formatWindow(contest),
+      timeWindowLabel: formatWindow(contest, tr),
       remainingLabel: liveTimeProgress.isEnded
-        ? "已結束"
+        ? tr("adminOverview.model.timeline.ended", "已結束")
         : formatDuration(liveTimeProgress.remainingSeconds),
       timeProgressPercent: liveTimeProgress.progressPercent,
-      resultsLabel: contest.resultsPublished ? "已發布" : "未發布",
+      resultsLabel: contest.resultsPublished
+        ? tr("adminOverview.model.results.published", "已發布")
+        : tr("adminOverview.model.results.unpublished", "未發布"),
       gradingLabel,
       workItemLabel:
-        contest.contestType === "paper_exam" ? "考卷題目" : "程式題目",
+        contest.contestType === "paper_exam"
+          ? tr("adminOverview.model.workItems.paperExam", "考卷題目")
+          : tr("adminOverview.model.workItems.coding", "程式題目"),
       workItemCount,
     },
     recentEvents: buildRecentEvents(examEvents),
     nextActions: [
       {
         key: "attention",
-        title: "處理異常",
+        title: tr("adminOverview.model.nextActions.attention.title", "處理異常"),
         description:
           attentionRows.length > 0
-            ? `${attentionRows.length} 位考生需要確認`
-            : "目前沒有待處理異常",
+            ? tr(
+                "adminOverview.model.nextActions.attention.hasItems",
+                "{{count}} 位考生需要確認",
+                { count: attentionRows.length },
+              )
+            : tr(
+                "adminOverview.model.nextActions.attention.empty",
+                "目前沒有待處理異常",
+              ),
         panelTarget: "participants",
         disabled: attentionRows.length === 0,
       },
       {
         key: "grading",
-        title: "前往批改",
+        title: tr("adminOverview.model.nextActions.grading.title", "前往批改"),
         description:
-          totalAnswers > 0 ? `已批改 ${gradingPercent}%` : "考後可開始批改",
+          totalAnswers > 0
+            ? tr("adminOverview.model.nextActions.grading.progress", "已批改 {{percent}}%", {
+                percent: gradingPercent,
+              })
+            : tr(
+                "adminOverview.model.nextActions.grading.afterExam",
+                "考後可開始批改",
+              ),
         panelTarget: "grading",
       },
       {
         key: "results",
-        title: "發布成績",
-        description: contest.resultsPublished ? "成績已發布" : "確認批改後發布",
+        title: tr("adminOverview.model.nextActions.results.title", "發布成績"),
+        description: contest.resultsPublished
+          ? tr("adminOverview.model.results.published", "成績已發布")
+          : tr(
+              "adminOverview.model.nextActions.results.readyToPublish",
+              "確認批改後發布",
+            ),
         panelTarget: "grading",
         disabled: contest.resultsPublished,
       },
@@ -763,16 +853,30 @@ export const buildAdminOverviewDashboard = ({
   };
 };
 
-const contestStatusLabel = (status: ContestDetail["status"]) => {
-  if (status === "draft") return "草稿";
-  if (status === "archived") return "已封存";
-  return "已發布";
+const contestStatusLabel = (
+  status: ContestDetail["status"],
+  tr: DashboardText = defaultDashboardText,
+) => {
+  if (status === "draft") {
+    return tr("adminOverview.model.contestStatus.draft", "草稿");
+  }
+  if (status === "archived") {
+    return tr("adminOverview.model.contestStatus.archived", "已封存");
+  }
+  return tr("adminOverview.model.contestStatus.published", "已發布");
 };
 
-const readinessLabel = (status: PreparationReadinessState) => {
-  if (status === "done") return "完成";
-  if (status === "missing") return "缺少";
-  return "待確認";
+const readinessLabel = (
+  status: PreparationReadinessState,
+  tr: DashboardText = defaultDashboardText,
+) => {
+  if (status === "done") {
+    return tr("adminOverview.model.readiness.done", "完成");
+  }
+  if (status === "missing") {
+    return tr("adminOverview.model.readiness.missing", "缺少");
+  }
+  return tr("adminOverview.model.readiness.warning", "待確認");
 };
 
 export const buildAdminPreparationDashboard = ({
@@ -780,11 +884,13 @@ export const buildAdminPreparationDashboard = ({
   participants,
   gradingStats,
   now = new Date(),
+  tr = defaultDashboardText,
 }: {
   contest: ContestDetail;
   participants: ContestParticipant[];
   gradingStats?: GlobalStats;
   now?: Date;
+  tr?: DashboardText;
 }): AdminPreparationDashboardData => {
   const students = studentParticipants(participants);
   const participantTotal = Math.max(
@@ -799,69 +905,108 @@ export const buildAdminPreparationDashboard = ({
   const ungradedAnswers =
     gradingStats?.ungradedAnswers ?? Math.max(totalAnswers - gradedAnswers, 0);
   const gradingPercent = percentage(gradedAnswers, totalAnswers);
-  const gradingLabel = totalAnswers > 0 ? `${gradingPercent}%` : "尚無資料";
+  const gradingLabel =
+    totalAnswers > 0
+      ? `${gradingPercent}%`
+      : tr("adminOverview.model.common.noData", "尚無資料");
   const workItemLabel =
-    contest.contestType === "paper_exam" ? "考卷題目" : "程式題目";
+    contest.contestType === "paper_exam"
+      ? tr("adminOverview.model.workItems.paperExam", "考卷題目")
+      : tr("adminOverview.model.workItems.coding", "程式題目");
   const publishState: PreparationReadinessState =
     contest.status === "published" ? "done" : "warning";
 
   const checklistItems: PreparationChecklistItem[] = [
     {
       key: "publish",
-      label: "競賽發布",
+      label: tr("adminOverview.model.preparation.publish", "競賽發布"),
       status: publishState,
-      statusLabel: readinessLabel(publishState),
+      statusLabel: readinessLabel(publishState, tr),
       description:
         contest.status === "published"
-          ? "參賽者可依權限進入競賽"
-          : `目前狀態：${contestStatusLabel(contest.status)}`,
+          ? tr(
+              "adminOverview.model.preparation.publishedDescription",
+              "參賽者可依權限進入競賽",
+            )
+          : tr(
+              "adminOverview.model.preparation.currentStatus",
+              "目前狀態：{{status}}",
+              { status: contestStatusLabel(contest.status, tr) },
+            ),
     },
     {
       key: "work_items",
       label: workItemLabel,
       status: workItemCount > 0 ? "done" : "missing",
-      statusLabel: readinessLabel(workItemCount > 0 ? "done" : "missing"),
+      statusLabel: readinessLabel(workItemCount > 0 ? "done" : "missing", tr),
       description:
         workItemCount > 0
-          ? `已設定 ${workItemCount} 題`
-          : "尚未建立可作答的題目",
+          ? tr("adminOverview.model.preparation.workItemsReady", "已設定 {{count}} 題", {
+              count: workItemCount,
+            })
+          : tr(
+              "adminOverview.model.preparation.workItemsMissing",
+              "尚未建立可作答的題目",
+            ),
     },
     {
       key: "schedule",
-      label: "考試時段",
+      label: tr("adminOverview.model.preparation.schedule", "考試時段"),
       status: scheduleReady ? "done" : "missing",
-      statusLabel: readinessLabel(scheduleReady ? "done" : "missing"),
+      statusLabel: readinessLabel(scheduleReady ? "done" : "missing", tr),
       description: scheduleReady
-        ? formatWindow(contest)
-        : "開始與結束時間未完整設定",
+        ? formatWindow(contest, tr)
+        : tr(
+            "adminOverview.model.preparation.scheduleMissing",
+            "開始與結束時間未完整設定",
+          ),
     },
     {
       key: "participants",
-      label: "參賽者名單",
+      label: tr("adminOverview.model.preparation.participantList", "參賽者名單"),
       status: participantTotal > 0 ? "done" : "warning",
-      statusLabel: readinessLabel(participantTotal > 0 ? "done" : "warning"),
+      statusLabel: readinessLabel(participantTotal > 0 ? "done" : "warning", tr),
       description:
         participantTotal > 0
-          ? `${participantTotal} 位參賽者`
-          : "尚未看到參賽者資料",
+          ? tr(
+              "adminOverview.model.preparation.participantCount",
+              "{{count}} 位參賽者",
+              { count: participantTotal },
+            )
+          : tr(
+              "adminOverview.model.preparation.participantsMissing",
+              "尚未看到參賽者資料",
+            ),
     },
     {
       key: "rules",
-      label: "作答規則",
+      label: tr("adminOverview.model.preparation.rules", "作答規則"),
       status: hasRules ? "done" : "warning",
-      statusLabel: readinessLabel(hasRules ? "done" : "warning"),
-      description: hasRules ? "已填寫規則說明" : "可補上考試規則與注意事項",
+      statusLabel: readinessLabel(hasRules ? "done" : "warning", tr),
+      description: hasRules
+        ? tr("adminOverview.model.preparation.rulesReady", "已填寫規則說明")
+        : tr(
+            "adminOverview.model.preparation.rulesMissing",
+            "可補上考試規則與注意事項",
+          ),
     },
     {
       key: "anti_cheat",
-      label: "防作弊設定",
+      label: tr("adminOverview.model.preparation.antiCheat", "防作弊設定"),
       status: contest.cheatDetectionEnabled ? "done" : "warning",
       statusLabel: readinessLabel(
         contest.cheatDetectionEnabled ? "done" : "warning",
+        tr,
       ),
       description: contest.cheatDetectionEnabled
-        ? "防作弊監控已啟用"
-        : "可依考試需求啟用",
+        ? tr(
+            "adminOverview.model.preparation.antiCheatEnabled",
+            "防作弊監控已啟用",
+          )
+        : tr(
+            "adminOverview.model.preparation.antiCheatOptional",
+            "可依考試需求啟用",
+          ),
     },
   ];
 
@@ -869,12 +1014,13 @@ export const buildAdminPreparationDashboard = ({
     timeline: buildTimelineSummary({
       contest,
       now,
+      tr,
     }),
     railItems: [
       {
         key: "status",
-        label: "競賽狀態",
-        value: contestStatusLabel(contest.status),
+        label: tr("adminOverview.model.summary.status", "競賽狀態"),
+        value: contestStatusLabel(contest.status, tr),
         tone: contest.status === "published" ? "neutral" : "warning",
       },
       {
@@ -885,77 +1031,106 @@ export const buildAdminPreparationDashboard = ({
       },
       {
         key: "participants",
-        label: "參賽者",
+        label: tr("adminOverview.model.summary.participants", "參賽者"),
         value: String(participantTotal),
         tone: participantTotal > 0 ? "neutral" : "warning",
       },
       {
         key: "anti_cheat",
-        label: "防作弊",
-        value: contest.cheatDetectionEnabled ? "已啟用" : "未啟用",
+        label: tr("adminOverview.model.summary.antiCheat", "防作弊"),
+        value: contest.cheatDetectionEnabled
+          ? tr("adminOverview.model.common.enabled", "已啟用")
+          : tr("adminOverview.model.common.disabled", "未啟用"),
         tone: contest.cheatDetectionEnabled ? "neutral" : "warning",
       },
       {
         key: "results",
-        label: "成績",
-        value: contest.resultsPublished ? "已發布" : "未發布",
+        label: tr("adminOverview.model.summary.results", "成績"),
+        value: contest.resultsPublished
+          ? tr("adminOverview.model.results.published", "已發布")
+          : tr("adminOverview.model.results.unpublished", "未發布"),
         tone: contest.resultsPublished ? "neutral" : "warning",
       },
     ],
     insightCards: buildInsightCards({
       gradingPercent,
       gradingLabel,
-      examProgressPercent: buildTimelineSummary({ contest, now })
+      examProgressPercent: buildTimelineSummary({ contest, now, tr })
         .progressPercent,
       examEvents: [],
+      tr,
     }),
     summaryItems: [
       {
         key: "status",
-        label: "競賽狀態",
-        value: contestStatusLabel(contest.status),
+        label: tr("adminOverview.model.summary.status", "競賽狀態"),
+        value: contestStatusLabel(contest.status, tr),
         description:
-          contest.status === "published" ? "已開放給參賽者" : "尚未正式開放",
+          contest.status === "published"
+            ? tr("adminOverview.model.summary.statusOpen", "已開放給參賽者")
+            : tr("adminOverview.model.summary.statusClosed", "尚未正式開放"),
         tone: contest.status === "published" ? "neutral" : "warning",
       },
       {
         key: "schedule",
-        label: "考試時段",
-        value: formatWindow(contest),
-        description: scheduleReady ? "時間設定完整" : "需要補齊時間",
+        label: tr("adminOverview.model.preparation.schedule", "考試時段"),
+        value: formatWindow(contest, tr),
+        description: scheduleReady
+          ? tr("adminOverview.model.summary.scheduleReady", "時間設定完整")
+          : tr("adminOverview.model.summary.scheduleMissing", "需要補齊時間"),
         tone: scheduleReady ? "neutral" : "danger",
       },
       {
         key: "work_items",
         label: workItemLabel,
         value: String(workItemCount),
-        description: workItemCount > 0 ? "內容已建立" : "尚未建立內容",
+        description:
+          workItemCount > 0
+            ? tr("adminOverview.model.summary.workItemsReady", "內容已建立")
+            : tr("adminOverview.model.summary.workItemsMissing", "尚未建立內容"),
         tone: workItemCount > 0 ? "neutral" : "danger",
       },
       {
         key: "participants",
-        label: "參賽者",
+        label: tr("adminOverview.model.summary.participants", "參賽者"),
         value: String(participantTotal),
-        description: participantTotal > 0 ? "名單可供管理" : "尚無參賽者資料",
+        description:
+          participantTotal > 0
+            ? tr("adminOverview.model.summary.participantsReady", "名單可供管理")
+            : tr(
+                "adminOverview.model.summary.participantsMissing",
+                "尚無參賽者資料",
+              ),
         tone: participantTotal > 0 ? "neutral" : "warning",
       },
       {
         key: "grading",
-        label: "批改進度",
+        label: tr("adminOverview.model.insights.gradingProgress", "批改進度"),
         value: gradingLabel,
         description:
           totalAnswers > 0
-            ? `${gradedAnswers} / ${totalAnswers} 份`
-            : "考後才會產生批改資料",
+            ? tr("adminOverview.model.summary.gradingCount", "{{graded}} / {{total}} 份", {
+                graded: gradedAnswers,
+                total: totalAnswers,
+              })
+            : tr(
+                "adminOverview.model.summary.gradingAfterExam",
+                "考後才會產生批改資料",
+              ),
         tone: ungradedAnswers > 0 ? "warning" : "neutral",
       },
       {
         key: "results",
-        label: "成績",
-        value: contest.resultsPublished ? "已發布" : "未發布",
+        label: tr("adminOverview.model.summary.results", "成績"),
+        value: contest.resultsPublished
+          ? tr("adminOverview.model.results.published", "已發布")
+          : tr("adminOverview.model.results.unpublished", "未發布"),
         description: contest.resultsPublished
-          ? "參賽者可查看"
-          : "確認批改後發布",
+          ? tr("adminOverview.model.summary.resultsVisible", "參賽者可查看")
+          : tr(
+              "adminOverview.model.nextActions.results.readyToPublish",
+              "確認批改後發布",
+            ),
         tone: contest.resultsPublished ? "neutral" : "warning",
       },
     ],
@@ -968,8 +1143,10 @@ export const buildAdminPreparationDashboard = ({
       progressLabel:
         totalAnswers > 0
           ? `${gradedAnswers} / ${totalAnswers}`
-          : "尚無作答資料",
-      resultsLabel: contest.resultsPublished ? "已發布" : "未發布",
+          : tr("adminOverview.model.grading.noAnswers", "尚無作答資料"),
+      resultsLabel: contest.resultsPublished
+        ? tr("adminOverview.model.results.published", "已發布")
+        : tr("adminOverview.model.results.unpublished", "未發布"),
       resultsTone: contest.resultsPublished ? "neutral" : "warning",
     },
   };
diff --git a/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss b/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss
index 3d58d8ee..fcb9a091 100644
--- a/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss
+++ b/frontend/src/features/contest/screens/paperExam/PaperExamAnswering.module.scss
@@ -13,6 +13,24 @@
 .toolbarLeft :global(.cds--btn),
 .toolbarCenter :global(.cds--btn) { @include exam.exam-toolbar-btn-height; }
 
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  height: 100%;
+}
+
+.headerSubmitButton {
+  min-height: 3rem;
+  height: 3rem;
+}
+
+.headerSaveStatus {
+  @include type.type-style("label-01");
+  color: var(--cds-text-helper);
+  white-space: nowrap;
+}
+
 .timer           { @include exam.exam-timer; }
 .timerText       { @include exam.exam-timer-text; }
 
@@ -38,17 +56,32 @@
 .slideInLeft     { @include exam.exam-slide-in-left; }
 
 .body            { @include exam.exam-body; }
-.navWrapper      { @include exam.exam-nav-wrapper; }
+.navWrapper {
+  @include exam.exam-nav-wrapper;
+
+  width: clamp(17rem, 22vw, 22rem);
+}
+.navWrapperCollapsed { width: 3rem; }
 .navWrapperHidden { @include exam.exam-nav-wrapper-hidden; }
 .navToggle       { @include exam.exam-nav-toggle; }
 
-.singleContent   { @include exam.exam-single-content; }
+.singleContent {
+  @include exam.exam-single-content;
+
+  border-left: 1px solid var(--cds-border-subtle-01);
+}
+
 .questionArea    { @include exam.exam-question-area; }
 .questionInner   { @include exam.exam-question-inner; }
 .navButtons      { @include exam.exam-nav-buttons; }
 .navInfo         { @include exam.exam-nav-info; }
 
-.allContent      { @include exam.exam-all-content; }
+.allContent {
+  @include exam.exam-all-content;
+
+  border-left: 1px solid var(--cds-border-subtle-01);
+}
+
 .allSpacer       { @include exam.exam-all-spacer; }
 .allItem         { @include exam.exam-all-item; }
 .allItemDimmed   { @include exam.exam-all-item-dimmed; }
diff --git a/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx b/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
index 1c385e33..a4781c06 100644
--- a/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
+++ b/frontend/src/features/contest/screens/paperExam/PaperExamAnsweringScreen.tsx
@@ -14,7 +14,6 @@ import {
   CheckmarkFilled,
   FlagFilled,
 } from "@carbon/icons-react";
-import ExamStatusBadge from "@/features/contest/components/exam/ExamStatusBadge";
 import { usePaperExamFlow } from "./usePaperExamFlow";
 import { useInterval } from "@/shared/hooks/useInterval";
 import { ExamQuestionCard } from "../../components/exam/ExamQuestionCard";
@@ -24,6 +23,8 @@ import {
   usePaperExamAutoSave,
   usePaperExamQuestions,
   usePaperExamSaveOnLeave,
+  getMarkedQuestionIds,
+  saveMarkedQuestionIds,
   hasExamPrecheckPassed,
   syncExamPrecheckGateByStatus,
 } from "./hooks";
@@ -45,6 +46,8 @@ import { recordExamEventWithForcedCapture } from "@/features/contest/anticheat/f
 import { exitFullscreen, isFullscreen } from "@/core/usecases/exam";
 import { clearExamCaptureSessionId } from "@/shared/state/examCaptureSessionStore";
 import { stopCaptureForContest } from "@/features/contest/anticheat/captureLifecycle";
+import { usePageHeaderActions } from "@/features/app/contexts/PageHeaderActionsContext";
+import { useContestRuntimeMode } from "@/features/contest/hooks";
 import {
   buildExamEntryDeviceMetadata,
   detectAnticheatCapability,
@@ -111,6 +114,8 @@ const PaperExamAnsweringScreen: React.FC = () => {
     [monitoringPlan]
   );
   const submitProgress = useExamSubmissionProgress();
+  const setPageHeaderActions = usePageHeaderActions();
+  const { isRuntime } = useContestRuntimeMode();
 
   const { items, answers, setAnswers, answeredIds, loadingQuestions } =
     usePaperExamQuestions(contestId);
@@ -124,7 +129,12 @@ const PaperExamAnsweringScreen: React.FC = () => {
     setAnswers,
   });
 
-  const [markedIds, setMarkedIds] = useState<Set<string>>(new Set());
+  const [markedIds, setMarkedIds] = useState<Set<string>>(() =>
+    getMarkedQuestionIds(contestId),
+  );
+  useEffect(() => {
+    setMarkedIds(getMarkedQuestionIds(contestId));
+  }, [contestId]);
   const toggleMark = useCallback((id: string) => {
     setMarkedIds((prev) => {
       const next = new Set(prev);
@@ -133,9 +143,10 @@ const PaperExamAnsweringScreen: React.FC = () => {
       } else {
         next.add(id);
       }
+      saveMarkedQuestionIds(contestId, next);
       return next;
     });
-  }, []);
+  }, [contestId]);
 
   const isInProgress = contest?.examStatus === "in_progress";
   const isSubmitted = contest?.examStatus === "submitted";
@@ -349,6 +360,52 @@ const PaperExamAnsweringScreen: React.FC = () => {
     setShowSubmitReview(true);
   }, [flushAll]);
 
+  const shouldUseHeaderActions =
+    isRuntime && !autoSubmitted && !isSubmitted && !loadingQuestions && items.length > 0;
+
+  useEffect(() => {
+    if (!shouldUseHeaderActions) {
+      setPageHeaderActions(null);
+      return;
+    }
+
+    setPageHeaderActions(
+      <div className={styles.headerActions}>
+        {saveStatus !== "idle" ? (
+          <span
+            className={`${styles.headerSaveStatus} ${
+              saveStatus === "error" ? styles.saveStatusError : ""
+            }`}
+          >
+            {saveStatusLabel}
+          </span>
+        ) : null}
+        <Button
+          kind="primary"
+          className={styles.headerSubmitButton}
+          data-testid="paper-exam-open-submit-review-btn"
+          renderIcon={SendFilled}
+          onClick={openSubmitReview}
+          disabled={!isInProgress}
+        >
+          {t("answering.submit.button")}
+        </Button>
+      </div>,
+    );
+
+    return () => {
+      setPageHeaderActions(null);
+    };
+  }, [
+    saveStatus,
+    saveStatusLabel,
+    isInProgress,
+    openSubmitReview,
+    setPageHeaderActions,
+    shouldUseHeaderActions,
+    t,
+  ]);
+
   const handleSubmitExam = useCallback(async () => {
     if (!contestId || isSubmittingExam) return;
     setIsSubmittingExam(true);
@@ -411,6 +468,10 @@ const PaperExamAnsweringScreen: React.FC = () => {
         syncIndex={syncIndex}
         renderItem={renderItem}
         onActiveIndexChange={handleActiveIndexChange}
+        showToolbar={!isRuntime}
+        externalNavigator={isRuntime}
+        overviewLabel={t("contestShell.backToContestHome", "返回競賽主頁")}
+        onSelectOverview={() => dashboardPath && navigate(dashboardPath)}
         toolbarLeft={(
           <>
             <Button
@@ -431,13 +492,6 @@ const PaperExamAnsweringScreen: React.FC = () => {
                 {saveStatusLabel}
               </span>
             )}
-            <ExamStatusBadge
-              examStatus={contest?.examStatus}
-              cheatDetectionEnabled={contest?.cheatDetectionEnabled}
-              timeLeft={countdown.display}
-              lockReason={contest?.lockReason}
-              autoUnlockAt={contest?.autoUnlockAt}
-            />
             <Button
               kind="primary"
               data-testid="paper-exam-open-submit-review-btn"
diff --git a/frontend/src/features/contest/screens/paperExam/hooks/index.ts b/frontend/src/features/contest/screens/paperExam/hooks/index.ts
index 09b4bd33..194d3493 100644
--- a/frontend/src/features/contest/screens/paperExam/hooks/index.ts
+++ b/frontend/src/features/contest/screens/paperExam/hooks/index.ts
@@ -5,6 +5,10 @@ export { useAnticheatWebcamCapture } from "./useAnticheatWebcamCapture";
 export { usePaperExamQuestions } from "./usePaperExamQuestions";
 export { usePaperExamAutoSave } from "./usePaperExamAutoSave";
 export { usePaperExamSaveOnLeave, type SaveStatus } from "./usePaperExamSaveOnLeave";
+export {
+  getMarkedQuestionIds,
+  saveMarkedQuestionIds,
+} from "./markedQuestionStorage";
 export {
   hasExamPrecheckPassed,
   markExamPrecheckPassed,
diff --git a/frontend/src/features/contest/screens/paperExam/hooks/markedQuestionStorage.ts b/frontend/src/features/contest/screens/paperExam/hooks/markedQuestionStorage.ts
new file mode 100644
index 00000000..39a4797f
--- /dev/null
+++ b/frontend/src/features/contest/screens/paperExam/hooks/markedQuestionStorage.ts
@@ -0,0 +1,33 @@
+const MARKED_PREFIX = "qjudge.exam.marked";
+
+const keyForContest = (contestId: string) => `${MARKED_PREFIX}.${contestId}`;
+
+export const getMarkedQuestionIds = (contestId: string | undefined): Set<string> => {
+  if (!contestId) return new Set();
+  try {
+    const raw = localStorage.getItem(keyForContest(contestId));
+    if (!raw) return new Set();
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed)
+      ? new Set(parsed.filter((item) => typeof item === "string"))
+      : new Set();
+  } catch {
+    return new Set();
+  }
+};
+
+export const saveMarkedQuestionIds = (
+  contestId: string | undefined,
+  ids: Set<string>,
+): void => {
+  if (!contestId) return;
+  try {
+    if (ids.size === 0) {
+      localStorage.removeItem(keyForContest(contestId));
+      return;
+    }
+    localStorage.setItem(keyForContest(contestId), JSON.stringify([...ids]));
+  } catch {
+    // localStorage can be unavailable; marking is a UI aid only.
+  }
+};
diff --git a/frontend/src/features/contest/screens/paperExam/usePaperExamFlow.ts b/frontend/src/features/contest/screens/paperExam/usePaperExamFlow.ts
index 9e25ef04..50d1a4f5 100644
--- a/frontend/src/features/contest/screens/paperExam/usePaperExamFlow.ts
+++ b/frontend/src/features/contest/screens/paperExam/usePaperExamFlow.ts
@@ -45,7 +45,7 @@ export const usePaperExamFlow = () => {
 
   const clearError = () => setError(null);
 
-  const register = async (data?: { nickname?: string; password?: string }) => {
+  const register = async (data?: { password?: string }) => {
     const id = guardContestId();
     setLoading(true);
     setError(null);
diff --git a/frontend/src/features/contest/screens/settings/ContestExamGradingScreen.tsx b/frontend/src/features/contest/screens/settings/ContestExamGradingScreen.tsx
index 270187f3..c940fd10 100644
--- a/frontend/src/features/contest/screens/settings/ContestExamGradingScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/ContestExamGradingScreen.tsx
@@ -433,7 +433,6 @@ const ContestExamGradingScreen: React.FC = () => {
                       username: row.displayName,
                     },
                     displayName: row.displayName,
-                    nickname: row.nickname,
                     solved: row.solvedCount,
                     total_score: row.totalScore,
                     time: row.penalty,
diff --git a/frontend/src/features/contest/screens/settings/ContestLogsScreen.tsx b/frontend/src/features/contest/screens/settings/ContestLogsScreen.tsx
index b1840b2a..9689ce9d 100644
--- a/frontend/src/features/contest/screens/settings/ContestLogsScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/ContestLogsScreen.tsx
@@ -33,6 +33,11 @@ import EventIncidentCard from "@/features/contest/components/admin/EventIncident
 import IncidentCard from "@/features/contest/components/admin/IncidentCard";
 import { getIncidentEvidenceFrameCount } from "@/features/contest/components/admin/incidentEvidence";
 import { useContestAnticheatConfig } from "@/features/contest/hooks/useContestAnticheatConfig";
+import {
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+} from "@/shared/components/dashboard";
 import styles from "./ContestLogsScreen.module.scss";
 
 const CATEGORY_FILTER_OPTIONS = [
@@ -754,34 +759,35 @@ const ContestLogsScreen: React.FC<ContestLogsScreenProps> = ({
 
         <div className={styles.feedSection}>
           {embedded ? (
-            <Tabs
-              selectedIndex={activeTab}
-              onChange={({ selectedIndex }) => setActiveTab(selectedIndex)}
+            <DashboardTabs
+              activeId={activeTab === 0 ? "violations" : "exam"}
+              onChange={(id) => setActiveTab(id === "violations" ? 0 : 1)}
             >
-              <div className={styles.embeddedFeedHeader}>
-                <TabList aria-label="事件紀錄切換">
-                  <Tab>違規事件</Tab>
-                  <Tab>考試事件</Tab>
-                </TabList>
-                <Button
-                  kind="ghost"
-                  renderIcon={Renew}
-                  onClick={() => {
-                    void handleRefresh();
-                  }}
-                  hasIconOnly
-                  iconDescription={t("action.refresh", "重新整理")}
-                  disabled={
-                    isRefreshing || isRefreshPending || antiCheatConfigLoading
-                  }
-                  size="sm"
-                />
-              </div>
-              <TabPanels>
-                <TabPanel>{feedPanel(0)}</TabPanel>
-                <TabPanel>{feedPanel(1)}</TabPanel>
-              </TabPanels>
-            </Tabs>
+              <DashboardTabBar
+                ariaLabel="事件紀錄切換"
+                tabs={[
+                  { id: "violations", label: "違規事件" },
+                  { id: "exam", label: "考試事件" },
+                ]}
+                toolbar={
+                  <Button
+                    kind="ghost"
+                    renderIcon={Renew}
+                    onClick={() => {
+                      void handleRefresh();
+                    }}
+                    hasIconOnly
+                    iconDescription={t("action.refresh", "重新整理")}
+                    disabled={
+                      isRefreshing || isRefreshPending || antiCheatConfigLoading
+                    }
+                    size="sm"
+                  />
+                }
+              />
+              <DashboardTabPanel tabId="violations">{feedPanel(0)}</DashboardTabPanel>
+              <DashboardTabPanel tabId="exam">{feedPanel(1)}</DashboardTabPanel>
+            </DashboardTabs>
           ) : (
             <>
               <div className={styles.feedHeader}>
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingByQuestionTabScreen.tsx b/frontend/src/features/contest/screens/settings/grading/GradingByQuestionTabScreen.tsx
index 5e2ce3f0..0e758ca9 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingByQuestionTabScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingByQuestionTabScreen.tsx
@@ -36,7 +36,6 @@ interface GradingByQuestionTabScreenProps {
   students: {
     studentId: string;
     username: string;
-    nickname: string;
     displayName?: string;
   }[];
   onGrade: (answerId: string, score: number, feedback: string) => void;
@@ -124,7 +123,7 @@ export default function GradingByQuestionTabScreen({
         id: `absent-${s.studentId}-${activeQuestionId}`,
         studentId: s.studentId,
         studentUsername: s.username,
-        studentNickname: s.displayName || s.nickname || s.username,
+        studentDisplayName: s.displayName || s.username,
         questionId: activeQuestionId,
         questionIndex: qInfo?.questionIndex ?? 0,
         questionPrompt: qInfo?.prompt ?? "",
@@ -151,7 +150,7 @@ export default function GradingByQuestionTabScreen({
       rows = rows.filter(
         (r) =>
           r.studentUsername.toLowerCase().includes(q) ||
-          r.studentNickname.toLowerCase().includes(q)
+          r.studentDisplayName.toLowerCase().includes(q)
       );
     }
 
@@ -315,7 +314,7 @@ export default function GradingByQuestionTabScreen({
                 className={isAbsent ? styles.absentItem : undefined}
               >
                 <ListItemContent>
-                  <ListItemTitle>{a.studentNickname}</ListItemTitle>
+                  <ListItemTitle>{a.studentDisplayName}</ListItemTitle>
                   <ListItemMeta>{a.studentUsername}</ListItemMeta>
                 </ListItemContent>
                 <ListItemTrailing>
@@ -383,7 +382,7 @@ export default function GradingByQuestionTabScreen({
           selectedQuestion ? `Q${selectedQuestion.questionIndex}` : "—"
         }
         studentLabel={
-          selectedAnswer?.studentNickname ?? t("grading.noSelection", "未選擇")
+          selectedAnswer?.studentDisplayName ?? t("grading.noSelection", "未選擇")
         }
         questionContent={sidebarContent}
         studentContent={middlePaneContent}
@@ -405,7 +404,7 @@ export default function GradingByQuestionTabScreen({
             ? `Q${selectedQuestion.questionIndex}`
             : t("grading.question", "題目"),
           secondary: selectedAnswer
-            ? `${selectedAnswer.studentNickname} (${selectedAnswer.studentUsername})`
+            ? `${selectedAnswer.studentDisplayName} (${selectedAnswer.studentUsername})`
             : undefined,
         }}
       />
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingByStudentTabScreen.tsx b/frontend/src/features/contest/screens/settings/grading/GradingByStudentTabScreen.tsx
index 1533867d..ea04c519 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingByStudentTabScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingByStudentTabScreen.tsx
@@ -35,7 +35,7 @@ import mini from "./GradingMini.module.scss";
 interface StudentSummary {
   studentId: string;
   username: string;
-  nickname: string;
+  displayName: string;
   totalScore: number;
   maxPossible: number;
   gradedCount: number;
@@ -48,7 +48,6 @@ interface GradingByStudentTabScreenProps {
   students: {
     studentId: string;
     username: string;
-    nickname: string;
     displayName?: string;
   }[];
   onGrade: (answerId: string, score: number, feedback: string) => void;
@@ -91,7 +90,7 @@ export default function GradingByStudentTabScreen({
       return {
         studentId: s.studentId,
         username: s.username,
-        nickname: s.nickname,
+        displayName: s.displayName || s.username,
         totalScore,
         maxPossible,
         gradedCount,
@@ -106,7 +105,7 @@ export default function GradingByStudentTabScreen({
     return studentSummaries.filter(
       (s) =>
         s.username.toLowerCase().includes(q) ||
-        s.nickname.toLowerCase().includes(q)
+        s.displayName.toLowerCase().includes(q)
     );
   }, [studentSummaries, searchQuery]);
   const activeSelectedStudentId = useMemo(() => {
@@ -141,7 +140,7 @@ export default function GradingByStudentTabScreen({
           id: `absent-${activeSelectedStudentId}-${question.questionId}`,
           studentId: activeSelectedStudentId,
           studentUsername: activeStudent?.username ?? "",
-          studentNickname: activeStudent?.nickname ?? "",
+          studentDisplayName: activeStudent?.displayName ?? "",
           questionId: question.questionId,
           questionIndex: question.questionIndex,
           questionPrompt: question.prompt,
@@ -265,8 +264,8 @@ export default function GradingByStudentTabScreen({
             onClick={() => handleStudentSelect(s.studentId)}
           >
             <ListItemContent>
-              <ListItemTitle>{s.nickname || s.username}</ListItemTitle>
-              {s.nickname && s.nickname !== s.username && (
+              <ListItemTitle>{s.displayName || s.username}</ListItemTitle>
+              {s.displayName && s.displayName !== s.username && (
                 <ListItemMeta>{s.username}</ListItemMeta>
               )}
             </ListItemContent>
@@ -448,7 +447,7 @@ export default function GradingByStudentTabScreen({
             hasNextStudent={hasNextStudent}
             contextPath={{
               primary: selectedStudentSummary
-                ? `${selectedStudentSummary.nickname} (${selectedStudentSummary.username})`
+                ? `${selectedStudentSummary.displayName} (${selectedStudentSummary.username})`
                 : t("grading.student", "學生"),
               secondary: currentAnswer
                 ? `Q${currentAnswer.questionIndex}`
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingCardViewOnly.tsx b/frontend/src/features/contest/screens/settings/grading/GradingCardViewOnly.tsx
index 2af10ebf..ab885d77 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingCardViewOnly.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingCardViewOnly.tsx
@@ -50,10 +50,10 @@ const GradingCardViewOnly: React.FC<GradingCardViewOnlyProps> = ({
 
   const user = useMemo(
     () =>
-      row.studentNickname === row.studentUsername
-        ? row.studentNickname
-        : `${row.studentNickname} (${row.studentUsername})`,
-    [row.studentNickname, row.studentUsername],
+      row.studentDisplayName === row.studentUsername
+        ? row.studentDisplayName
+        : `${row.studentDisplayName} (${row.studentUsername})`,
+    [row.studentDisplayName, row.studentUsername],
   );
 
   const answerText = useMemo(() => stringifyAnswer(row.answerContent), [row.answerContent]);
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.test.tsx b/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.test.tsx
index b20bd213..0f4d4984 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.test.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.test.tsx
@@ -50,8 +50,8 @@ const questionProgress: QuestionProgress[] = [
 ];
 
 const students = [
-  { studentId: "s-1", username: "u1", nickname: "Student A" },
-  { studentId: "s-2", username: "u2", nickname: "Student B" },
+  { studentId: "s-1", username: "u1", displayName: "Student A" },
+  { studentId: "s-2", username: "u2", displayName: "Student B" },
 ];
 
 const answersByQuestion = new Map<string, GradingAnswerRow[]>([
@@ -62,7 +62,7 @@ const answersByQuestion = new Map<string, GradingAnswerRow[]>([
         id: "a-1",
         studentId: "s-1",
         studentUsername: "u1",
-        studentNickname: "Student A",
+        studentDisplayName: "Student A",
         questionId: "q-1",
         questionIndex: 1,
         questionPrompt: "Question 1",
@@ -81,7 +81,7 @@ const answersByQuestion = new Map<string, GradingAnswerRow[]>([
         id: "a-2",
         studentId: "s-2",
         studentUsername: "u2",
-        studentNickname: "Student B",
+        studentDisplayName: "Student B",
         questionId: "q-1",
         questionIndex: 1,
         questionPrompt: "Question 1",
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.tsx b/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.tsx
index 0cf7e90b..78027e47 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingMatrixViewScreen.tsx
@@ -8,7 +8,6 @@ interface GradingMatrixViewScreenProps {
   students: {
     studentId: string;
     username: string;
-    nickname: string;
     displayName?: string;
   }[];
   answersByQuestion: Map<string, GradingAnswerRow[]>;
@@ -221,7 +220,6 @@ export default function GradingMatrixViewScreen({
             const username = (student.username && student.username.trim()) || student.studentId;
             const displayNameCandidate =
               (student.displayName && student.displayName.trim()) ||
-              (student.nickname && student.nickname.trim()) ||
               "";
             const displayName =
               displayNameCandidate && displayNameCandidate !== username
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.test.tsx b/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.test.tsx
index f1f3aa40..92b3b351 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.test.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.test.tsx
@@ -39,7 +39,7 @@ const answer: GradingAnswerRow = {
   id: "a-1",
   studentId: "s-1",
   studentUsername: "student1",
-  studentNickname: "Student One",
+  studentDisplayName: "Student One",
   questionId: "q-1",
   questionIndex: 1,
   questionPrompt: "Question prompt",
diff --git a/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.tsx b/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.tsx
index 23241b87..fa75bc16 100644
--- a/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.tsx
+++ b/frontend/src/features/contest/screens/settings/grading/GradingSplitPanelScreen.tsx
@@ -355,9 +355,9 @@ export default function GradingSplitPanelScreen({
           transition={{ layout: { duration: 0.18, ease: "easeOut" } }}
         >
           <span className={styles.studentLine}>
-            {answer.studentNickname === answer.studentUsername
-              ? answer.studentNickname
-              : `${answer.studentNickname} (${answer.studentUsername})`}
+            {answer.studentDisplayName === answer.studentUsername
+              ? answer.studentDisplayName
+              : `${answer.studentDisplayName} (${answer.studentUsername})`}
           </span>
 
           <div className={styles.questionPrompt}>
diff --git a/frontend/src/features/contest/screens/settings/grading/buildGradingRows.ts b/frontend/src/features/contest/screens/settings/grading/buildGradingRows.ts
index 6c5ec27e..5fa8705f 100644
--- a/frontend/src/features/contest/screens/settings/grading/buildGradingRows.ts
+++ b/frontend/src/features/contest/screens/settings/grading/buildGradingRows.ts
@@ -13,7 +13,7 @@ import type { GradingAnswerRow, QuestionType } from "./gradingTypes";
 export function buildGradingRows(
   allAnswers: ExamAnswerGrading[],
   questions: ExamQuestion[],
-  participantMap?: Map<string, { username: string; nickname: string }>,
+  participantMap?: Map<string, { username: string; displayName: string }>,
 ): GradingAnswerRow[] {
   const questionsMap = new Map<string, ExamQuestion>();
   questions.forEach((q, i) =>
@@ -32,13 +32,13 @@ export function buildGradingRows(
     const studentId = a.participantUserId;
     const student = participantMap?.get(studentId);
     const studentUsername = student?.username ?? "unknown";
-    const studentNickname = student?.nickname ?? studentUsername;
+    const studentDisplayName = student?.displayName ?? studentUsername;
 
     return {
       id: a.id,
       studentId,
       studentUsername,
-      studentNickname,
+      studentDisplayName,
       questionId: a.questionId,
       questionIndex: qIdx + 1,
       questionPrompt: q?.prompt ?? "",
diff --git a/frontend/src/features/contest/screens/settings/grading/gradingTypes.ts b/frontend/src/features/contest/screens/settings/grading/gradingTypes.ts
index b4b6a30c..e1e65157 100644
--- a/frontend/src/features/contest/screens/settings/grading/gradingTypes.ts
+++ b/frontend/src/features/contest/screens/settings/grading/gradingTypes.ts
@@ -23,7 +23,7 @@ export interface GradingAnswerRow {
   id: string;
   studentId: string;
   studentUsername: string;
-  studentNickname: string;
+  studentDisplayName: string;
   questionId: string;
   questionIndex: number; // 1-based
   questionPrompt: string;
diff --git a/frontend/src/features/contest/screens/settings/grading/objectiveRegrade.test.ts b/frontend/src/features/contest/screens/settings/grading/objectiveRegrade.test.ts
index 0b32136d..e337c023 100644
--- a/frontend/src/features/contest/screens/settings/grading/objectiveRegrade.test.ts
+++ b/frontend/src/features/contest/screens/settings/grading/objectiveRegrade.test.ts
@@ -6,7 +6,7 @@ const buildRow = (partial: Partial<GradingAnswerRow>): GradingAnswerRow => ({
   id: partial.id ?? "a1",
   studentId: partial.studentId ?? "u1",
   studentUsername: partial.studentUsername ?? "student",
-  studentNickname: partial.studentNickname ?? "student",
+  studentDisplayName: partial.studentDisplayName ?? "student",
   questionId: partial.questionId ?? "q1",
   questionIndex: partial.questionIndex ?? 1,
   questionPrompt: partial.questionPrompt ?? "prompt",
diff --git a/frontend/src/features/contest/screens/settings/grading/useAiGradingScreenData.ts b/frontend/src/features/contest/screens/settings/grading/useAiGradingScreenData.ts
index f5320c80..e7c0c30b 100644
--- a/frontend/src/features/contest/screens/settings/grading/useAiGradingScreenData.ts
+++ b/frontend/src/features/contest/screens/settings/grading/useAiGradingScreenData.ts
@@ -52,11 +52,11 @@ export function useAiGradingScreenData(
   const contestAdminContext = useContext(ContestAdminContext);
 
   const participantMap = useMemo(() => {
-    const map = new Map<string, { username: string; nickname: string }>();
+    const map = new Map<string, { username: string; displayName: string }>();
     for (const p of contestAdminContext?.participants ?? []) {
       map.set(String(p.userId), {
         username: p.username,
-        nickname: p.nickname ?? p.displayName ?? p.username,
+        displayName: p.displayName ?? p.username,
       });
     }
     return map;
diff --git a/frontend/src/features/contest/screens/settings/grading/useGradingData.ts b/frontend/src/features/contest/screens/settings/grading/useGradingData.ts
index b26bd900..dc90b4ec 100644
--- a/frontend/src/features/contest/screens/settings/grading/useGradingData.ts
+++ b/frontend/src/features/contest/screens/settings/grading/useGradingData.ts
@@ -154,11 +154,11 @@ export function useGradingData(options: UseGradingDataOptions = {}) {
 
   // Build participant map
   const participantMap = useMemo(() => {
-    const map = new Map<string, { username: string; nickname: string }>();
+    const map = new Map<string, { username: string; displayName: string }>();
     for (const p of participants) {
       map.set(String(p.userId), {
         username: p.username,
-        nickname: p.nickname ?? p.displayName ?? p.username,
+        displayName: p.displayName ?? p.username,
       });
     }
     return map;
@@ -222,8 +222,8 @@ export function useGradingData(options: UseGradingDataOptions = {}) {
             id: `coding-${submission.id}`,
             studentId: submission.userId,
             studentUsername: student?.username ?? submission.username ?? "unknown",
-            studentNickname:
-              student?.nickname ??
+            studentDisplayName:
+              student?.displayName ??
               submission.username ??
               "unknown",
             questionId: canonicalProblemId,
@@ -297,9 +297,9 @@ export function useGradingData(options: UseGradingDataOptions = {}) {
               id: `coding-standing-${studentId}-${canonicalProblemId}`,
               studentId,
               studentUsername:
-                student?.username || standingRow.displayName || standingRow.nickname || "unknown",
-              studentNickname:
-                student?.nickname || standingRow.displayName || standingRow.nickname || "unknown",
+                student?.username || standingRow.displayName || "unknown",
+              studentDisplayName:
+                student?.displayName || standingRow.displayName || "unknown",
               questionId: canonicalProblemId,
               questionIndex: problemMeta?.index ?? 0,
               questionPrompt: problemMeta?.title ?? canonicalProblemId,
@@ -498,16 +498,14 @@ export function useGradingData(options: UseGradingDataOptions = {}) {
     // Start from all participants
     const map = new Map<
       string,
-      { studentId: string; username: string; nickname: string; displayName?: string; accountRole?: string }
+      { studentId: string; username: string; displayName?: string; accountRole?: string }
     >();
     for (const p of participants) {
       const id = String(p.userId);
       map.set(id, {
         studentId: id,
         username: p.username,
-        nickname: p.nickname ?? p.displayName ?? p.username,
-        displayName:
-          p.userDisplayName ?? p.displayName ?? p.nickname ?? p.username,
+        displayName: p.displayName ?? p.username,
         accountRole: p.accountRole,
       });
     }
@@ -517,8 +515,7 @@ export function useGradingData(options: UseGradingDataOptions = {}) {
         map.set(a.studentId, {
           studentId: a.studentId,
           username: a.studentUsername,
-          nickname: a.studentNickname,
-          displayName: a.studentNickname || a.studentUsername,
+          displayName: a.studentDisplayName || a.studentUsername,
         });
       }
     }
diff --git a/frontend/src/i18n/locales/en/contest.json b/frontend/src/i18n/locales/en/contest.json
index f2567a85..590839c9 100644
--- a/frontend/src/i18n/locales/en/contest.json
+++ b/frontend/src/i18n/locales/en/contest.json
@@ -62,6 +62,70 @@
       "strictModeEnableSuccess": "Anti-cheat monitoring enabled",
       "updateFailed": "Update failed"
     },
+    "command": {
+      "ariaLabel": "Teacher admin overview",
+      "connection": {
+        "offline": "Offline",
+        "online": "Online"
+      },
+      "drawer": {
+        "ariaLabel": "Student details",
+        "close": "Close student details",
+        "closeBackdrop": "Close student details backdrop",
+        "title": "Student details"
+      },
+      "drilldown": {
+        "ariaLabel": "Overview data tabs",
+        "participants": "Participants",
+        "questionStats": "Answer distribution"
+      },
+      "eventLog": "Event log",
+      "examStatusSummary": "Exam status summary",
+      "examTime": "Exam time",
+      "filters": {
+        "allQuestionTypes": "All question types",
+        "allStatuses": "All statuses",
+        "needsAttention": "Needs attention"
+      },
+      "metric": {
+        "answerProgress": "Answer progress",
+        "eventUnit": "events",
+        "gradingProgress": "Grading progress",
+        "inProgress": "In progress",
+        "interrupted": "Interrupted",
+        "notSubmitted": "Not submitted",
+        "pausedDetail": "Paused",
+        "pointUnit": "pts",
+        "score": "Score",
+        "scoreUnit": "{{score}} pts",
+        "scored": "Scored",
+        "violations": "Anomaly events"
+      },
+      "metricSwitcher": "Student card metric switcher",
+      "metrics": {
+        "endTime": "End time",
+        "examParticipants": "Exam participants",
+        "onlineParticipants": "Online participants",
+        "startTime": "Start time"
+      },
+      "participants": {
+        "empty": "No students yet",
+        "filterStatus": "Filter status",
+        "filterStatusAria": "Filter student status",
+        "loading": "Loading student list",
+        "search": "Search students",
+        "searchPlaceholder": "Search display name or username...",
+        "title": "Student list"
+      },
+      "questionStats": {
+        "empty": "No answer distribution data yet",
+        "filterQuestionType": "Filter question type",
+        "filterQuestionTypeAria": "Filter question type",
+        "search": "Search questions",
+        "searchPlaceholder": "Search question number or prompt..."
+      },
+      "tabsAriaLabel": "Teacher admin overview tabs"
+    },
     "events": {
       "critical": "High-risk events",
       "empty": "No events yet",
@@ -91,6 +155,127 @@
       "problemUnit": "problems",
       "time": "Time Progress"
     },
+    "model": {
+      "attention": {
+        "anomalyCount": "{{count}} anomalies",
+        "connectionInterrupted": "Connection interrupted",
+        "examLocked": "Exam locked",
+        "notEntered": "Has not entered the exam"
+      },
+      "common": {
+        "disabled": "Disabled",
+        "enabled": "Enabled",
+        "noData": "No data yet",
+        "unset": "Not set"
+      },
+      "contestStatus": {
+        "archived": "Archived",
+        "draft": "Draft",
+        "published": "Published"
+      },
+      "grading": {
+        "noAnswers": "No answer data yet",
+        "noData": "No grading data yet"
+      },
+      "insights": {
+        "examProgress": "Exam progress",
+        "gradingProgress": "Grading progress",
+        "priorityEvents": "Anomaly events"
+      },
+      "kpi": {
+        "onlineStudents": "Online students",
+        "pendingEvents": "Pending events",
+        "started": "Started"
+      },
+      "nextActions": {
+        "attention": {
+          "empty": "No pending anomalies",
+          "hasItems": "{{count}} students need review",
+          "title": "Review anomalies"
+        },
+        "grading": {
+          "afterExam": "Grading can start after the exam",
+          "progress": "{{percent}}% graded",
+          "title": "Open grading"
+        },
+        "results": {
+          "readyToPublish": "Publish after reviewing grading",
+          "title": "Publish results"
+        }
+      },
+      "preparation": {
+        "antiCheat": "Anti-cheat settings",
+        "antiCheatEnabled": "Anti-cheat monitoring enabled",
+        "antiCheatOptional": "Enable if required for this exam",
+        "currentStatus": "Current status: {{status}}",
+        "participantCount": "{{count}} participants",
+        "participantList": "Participant roster",
+        "participantsMissing": "No participant data yet",
+        "publish": "Contest publish",
+        "publishedDescription": "Participants can enter according to permissions",
+        "rules": "Answer rules",
+        "rulesMissing": "Add exam rules and notes",
+        "rulesReady": "Rules are filled in",
+        "schedule": "Exam window",
+        "scheduleMissing": "Start and end times are incomplete",
+        "workItemsMissing": "No answerable questions yet",
+        "workItemsReady": "{{count}} questions set"
+      },
+      "progress": {
+        "current": "Now",
+        "label": "Progress",
+        "start": "Start"
+      },
+      "readiness": {
+        "done": "Done",
+        "missing": "Missing",
+        "warning": "Review"
+      },
+      "results": {
+        "published": "Published",
+        "unpublished": "Unpublished"
+      },
+      "status": {
+        "anomaly": "Anomaly",
+        "inProgress": "Answering",
+        "locked": "Locked",
+        "lockedOffline": "Locked / Offline",
+        "notStarted": "Not started",
+        "offline": "Offline",
+        "online": "Online",
+        "submitted": "Submitted"
+      },
+      "summary": {
+        "antiCheat": "Anti-cheat",
+        "gradingAfterExam": "Grading data appears after the exam",
+        "gradingCount": "{{graded}} / {{total}} answers",
+        "participants": "Participants",
+        "participantsMissing": "No participant data yet",
+        "participantsReady": "Roster ready to manage",
+        "results": "Results",
+        "resultsVisible": "Visible to participants",
+        "scheduleMissing": "Schedule needs completion",
+        "scheduleReady": "Schedule is complete",
+        "status": "Contest status",
+        "statusClosed": "Not officially open yet",
+        "statusOpen": "Open to participants",
+        "workItemsMissing": "Content not created yet",
+        "workItemsReady": "Content created"
+      },
+      "timeline": {
+        "ended": "Ended",
+        "examEnded": "Exam ended",
+        "notStarted": "Not started",
+        "remaining": "{{time}} remaining",
+        "running": "In progress",
+        "startsIn": "Starts in {{time}}",
+        "timeUnset": "Time not set"
+      },
+      "workItems": {
+        "coding": "Coding problems",
+        "paperExam": "Paper exam questions"
+      }
+    },
     "screen": {
       "actions": {
         "addParticipant": "Add participant",
@@ -144,7 +329,6 @@
       "disabled": "Disabled",
       "enabled": "Enabled",
       "examProgress": "Exam progress",
-      "timelineProgress": "Time progress",
       "goEventPanel": "Go to event panel",
       "goParticipantList": "Open participant list",
       "goProblemManagement": "Go to problem management",
@@ -159,6 +343,7 @@
       "status": "Contest status",
       "strictExamMode": "Anti-cheat monitoring",
       "subtitle": "Quick access to settings, questions, and status actions",
+      "timelineProgress": "Time progress",
       "title": "Command Center",
       "violationCount": "Anomaly events",
       "violationCountAria": "Anomaly events, go to event panel"
@@ -197,6 +382,7 @@
       "title": "Readiness"
     },
     "tabs": {
+      "ariaLabel": "Preparation and grading tabs",
       "entries": "Management entries",
       "grading": "Grading & results",
       "readiness": "Readiness"
@@ -1576,6 +1762,124 @@
     "ungraded": "Ungraded",
     "viewSubmissionSamples": "View submission samples"
   },
+  "studentDashboard": {
+    "actions": {
+      "adminPanel": "Admin dashboard",
+      "backToAnswering": "Back to answering",
+      "downloadProof": "Download answer proof",
+      "downloadReport": "Download score report",
+      "join": "Join contest",
+      "joinUnavailable": "Joining unavailable",
+      "refresh": "Refresh",
+      "rejoin": "Join again",
+      "resume": "Resume answering",
+      "start": "Start answering",
+      "submit": "Submit",
+      "unavailable": "Answering unavailable",
+      "waitingStart": "Waiting to start"
+    },
+    "announcements": {
+      "empty": "No announcements yet.",
+      "loading": "Loading announcements...",
+      "title": "Announcements"
+    },
+    "answerStatus": {
+      "answered": "Answered",
+      "correct": "Correct",
+      "graded": "Graded",
+      "marked": "Marked",
+      "noScore": "No credit",
+      "partial": "Partial credit",
+      "pendingGrading": "Pending grading",
+      "unanswered": "Unanswered"
+    },
+    "ariaLabel": "Student contest home",
+    "contestState": {
+      "archived": "Archived",
+      "draft": "Draft",
+      "ended": "Ended",
+      "running": "In progress",
+      "unknown": "Unknown",
+      "upcoming": "Upcoming"
+    },
+    "empty": {
+      "noAnswerRecords": "No answer records yet.",
+      "noQuestions": "No question data yet.",
+      "noScoreDistribution": "No score distribution data yet."
+    },
+    "errors": {
+      "announcementsLoadFailed": "Announcements are temporarily unavailable",
+      "questionsLoadFailed": "Question data is temporarily unavailable",
+      "scoreDistributionLoadFailed": "Score distribution is temporarily unavailable"
+    },
+    "infoLabel": "Contest information",
+    "joinStatus": {
+      "joined": "Joined",
+      "notJoined": "Not joined"
+    },
+    "loading": "Loading...",
+    "loadingAnswers": "Loading answers...",
+    "mainContent": "Contest main content",
+    "metrics": {
+      "duration": "Duration",
+      "endTime": "End time",
+      "startTime": "Start time"
+    },
+    "monitoring": {
+      "enabled": "Monitoring",
+      "subtitle": "Fullscreen, tab switching, and device monitoring will start after entering the exam.",
+      "title": "Monitoring enabled"
+    },
+    "records": {
+      "currentStatus": "Current answer status",
+      "fullScore": "Full score {{score}}",
+      "notSubmitted": "Not submitted",
+      "title": "Answer records",
+      "withResults": "Answer records and results"
+    },
+    "report": {
+      "download": "Download",
+      "failedTitle": "Download failed",
+      "language": "Report language",
+      "languages": {
+        "en": "English",
+        "ja": "日本語",
+        "ko": "한국어",
+        "zhTW": "繁體中文"
+      },
+      "preparing": "Preparing"
+    },
+    "results": {
+      "pendingPublish": "Pending publish",
+      "published": "Results published",
+      "unpublished": "Not published yet",
+      "waitingPublish": "Waiting for results"
+    },
+    "rules": {
+      "empty": "No additional rules.",
+      "noPassword": "This contest does not require a password.",
+      "requiresPassword": "This contest requires a password.",
+      "title": "Rules"
+    },
+    "submitConfirm": {
+      "body": "You will not be able to change answers after submitting.",
+      "confirm": "Submit",
+      "heading": "Confirm submission"
+    },
+    "summary": {
+      "ariaLabel": "Contest summary",
+      "averageScore": "Average {{average}} / {{max}}",
+      "completionRate": "Completion rate",
+      "examResult": "Exam result",
+      "examStatus": "Exam status",
+      "scoreDistribution": "Score distribution"
+    },
+    "tabs": {
+      "ariaLabel": "Contest information tabs",
+      "records": "Answer records",
+      "rules": "Rules"
+    }
+  },
   "studentStatus": {
     "pausedLocked": "Paused / Locked",
     "personCount": "{{count}}",
diff --git a/frontend/src/i18n/locales/ja/contest.json b/frontend/src/i18n/locales/ja/contest.json
index e1582092..d2d3577d 100644
--- a/frontend/src/i18n/locales/ja/contest.json
+++ b/frontend/src/i18n/locales/ja/contest.json
@@ -62,6 +62,70 @@
       "strictModeEnableSuccess": "不正対策監視を有効にしました",
       "updateFailed": "更新に失敗しました"
     },
+    "command": {
+      "ariaLabel": "教師管理概要",
+      "connection": {
+        "offline": "オフライン",
+        "online": "オンライン"
+      },
+      "drawer": {
+        "ariaLabel": "学生詳細",
+        "close": "学生詳細を閉じる",
+        "closeBackdrop": "学生詳細背景を閉じる",
+        "title": "学生詳細"
+      },
+      "drilldown": {
+        "ariaLabel": "概要データ切替",
+        "participants": "参加者",
+        "questionStats": "回答分布"
+      },
+      "eventLog": "イベント記録",
+      "examStatusSummary": "試験状態サマリー",
+      "examTime": "試験時間",
+      "filters": {
+        "allQuestionTypes": "すべての問題形式",
+        "allStatuses": "すべての状態",
+        "needsAttention": "対応が必要"
+      },
+      "metric": {
+        "answerProgress": "回答進捗",
+        "eventUnit": "件",
+        "gradingProgress": "採点進捗",
+        "inProgress": "進行中",
+        "interrupted": "中断",
+        "notSubmitted": "未提出",
+        "pausedDetail": "一時停止中",
+        "pointUnit": "点",
+        "score": "点数",
+        "scoreUnit": "{{score}} 点",
+        "scored": "採点済み",
+        "violations": "異常イベント"
+      },
+      "metricSwitcher": "学生カード指標切替",
+      "metrics": {
+        "endTime": "終了時間",
+        "examParticipants": "受験者数",
+        "onlineParticipants": "オンライン人数",
+        "startTime": "開始時間"
+      },
+      "participants": {
+        "empty": "学生はいません",
+        "filterStatus": "状態で絞り込み",
+        "filterStatusAria": "学生状態で絞り込み",
+        "loading": "学生一覧を読み込み中",
+        "search": "学生を検索",
+        "searchPlaceholder": "表示名またはユーザー名を検索...",
+        "title": "学生一覧"
+      },
+      "questionStats": {
+        "empty": "回答分布データはまだありません",
+        "filterQuestionType": "問題形式で絞り込み",
+        "filterQuestionTypeAria": "問題形式で絞り込み",
+        "search": "問題を検索",
+        "searchPlaceholder": "問題番号または内容を検索..."
+      },
+      "tabsAriaLabel": "教師管理概要タブ"
+    },
     "events": {
       "critical": "高リスクイベント",
       "empty": "現在イベントはありません",
@@ -91,6 +155,127 @@
       "problemUnit": "問",
       "time": "時間進捗"
     },
+    "model": {
+      "attention": {
+        "anomalyCount": "{{count}} 件の異常",
+        "connectionInterrupted": "接続が中断されました",
+        "examLocked": "試験がロックされています",
+        "notEntered": "まだ試験に入っていません"
+      },
+      "common": {
+        "disabled": "無効",
+        "enabled": "有効",
+        "noData": "データなし",
+        "unset": "未設定"
+      },
+      "contestStatus": {
+        "archived": "アーカイブ済み",
+        "draft": "下書き",
+        "published": "公開済み"
+      },
+      "grading": {
+        "noAnswers": "回答データはまだありません",
+        "noData": "採点データはまだありません"
+      },
+      "insights": {
+        "examProgress": "試験進捗",
+        "gradingProgress": "採点進捗",
+        "priorityEvents": "異常イベント"
+      },
+      "kpi": {
+        "onlineStudents": "オンライン学生",
+        "pendingEvents": "未対応イベント",
+        "started": "開始済み"
+      },
+      "nextActions": {
+        "attention": {
+          "empty": "未対応の異常はありません",
+          "hasItems": "{{count}} 名の学生を確認してください",
+          "title": "異常を確認"
+        },
+        "grading": {
+          "afterExam": "試験後に採点できます",
+          "progress": "{{percent}}% 採点済み",
+          "title": "採点へ"
+        },
+        "results": {
+          "readyToPublish": "採点確認後に公開",
+          "title": "成績を公開"
+        }
+      },
+      "preparation": {
+        "antiCheat": "不正対策設定",
+        "antiCheatEnabled": "不正対策監視は有効です",
+        "antiCheatOptional": "試験要件に応じて有効化できます",
+        "currentStatus": "現在の状態：{{status}}",
+        "participantCount": "{{count}} 名の参加者",
+        "participantList": "参加者名簿",
+        "participantsMissing": "参加者データがまだありません",
+        "publish": "コンテスト公開",
+        "publishedDescription": "参加者は権限に応じて入れます",
+        "rules": "回答ルール",
+        "rulesMissing": "試験ルールと注意事項を追加できます",
+        "rulesReady": "ルール説明は入力済みです",
+        "schedule": "試験時間帯",
+        "scheduleMissing": "開始・終了時間が未設定です",
+        "workItemsMissing": "回答可能な問題がまだありません",
+        "workItemsReady": "{{count}} 問設定済み"
+      },
+      "progress": {
+        "current": "現在",
+        "label": "進捗",
+        "start": "開始"
+      },
+      "readiness": {
+        "done": "完了",
+        "missing": "不足",
+        "warning": "確認待ち"
+      },
+      "results": {
+        "published": "公開済み",
+        "unpublished": "未公開"
+      },
+      "status": {
+        "anomaly": "異常",
+        "inProgress": "回答中",
+        "locked": "ロック",
+        "lockedOffline": "ロック / オフライン",
+        "notStarted": "未開始",
+        "offline": "オフライン",
+        "online": "オンライン",
+        "submitted": "提出済み"
+      },
+      "summary": {
+        "antiCheat": "不正対策",
+        "gradingAfterExam": "採点データは試験後に生成されます",
+        "gradingCount": "{{graded}} / {{total}} 件",
+        "participants": "参加者",
+        "participantsMissing": "参加者データがまだありません",
+        "participantsReady": "名簿を管理できます",
+        "results": "成績",
+        "resultsVisible": "参加者が閲覧できます",
+        "scheduleMissing": "時間設定の補完が必要です",
+        "scheduleReady": "時間設定は完了しています",
+        "status": "コンテスト状態",
+        "statusClosed": "まだ正式公開されていません",
+        "statusOpen": "参加者に公開済み",
+        "workItemsMissing": "内容はまだ作成されていません",
+        "workItemsReady": "内容は作成済みです"
+      },
+      "timeline": {
+        "ended": "終了",
+        "examEnded": "試験は終了しました",
+        "notStarted": "開始前",
+        "remaining": "残り {{time}}",
+        "running": "進行中",
+        "startsIn": "開始まで {{time}}",
+        "timeUnset": "時間未設定"
+      },
+      "workItems": {
+        "coding": "プログラミング問題",
+        "paperExam": "試験問題"
+      }
+    },
     "screen": {
       "actions": {
         "addParticipant": "受験者を追加",
@@ -144,7 +329,6 @@
       "disabled": "無効",
       "enabled": "有効",
       "examProgress": "試験進捗",
-      "timelineProgress": "時間進捗",
       "goEventPanel": "イベントパネルへ移動",
       "goParticipantList": "参加者リストを開く",
       "goProblemManagement": "問題管理へ移動",
@@ -159,6 +343,7 @@
       "status": "コンテスト状態",
       "strictExamMode": "不正対策監視",
       "subtitle": "設定、問題、状態操作へすばやくアクセス",
+      "timelineProgress": "時間進捗",
       "title": "コマンドセンター",
       "violationCount": "異常イベント数",
       "violationCountAria": "異常イベント数、イベントパネルへ移動"
@@ -197,6 +382,7 @@
       "title": "準備狀態"
     },
     "tabs": {
+      "ariaLabel": "準備と採点タブ",
       "entries": "管理入口",
       "grading": "批改與成績",
       "readiness": "準備狀態"
@@ -1576,6 +1762,124 @@
     "ungraded": "未採点",
     "viewSubmissionSamples": "提出サンプルを見る"
   },
+  "studentDashboard": {
+    "actions": {
+      "adminPanel": "管理ダッシュボード",
+      "backToAnswering": "回答に戻る",
+      "downloadProof": "回答証明をダウンロード",
+      "downloadReport": "成績レポートをダウンロード",
+      "join": "コンテストに参加",
+      "joinUnavailable": "現在参加できません",
+      "refresh": "更新",
+      "rejoin": "再参加",
+      "resume": "回答を再開",
+      "start": "回答を開始",
+      "submit": "提出",
+      "unavailable": "回答できません",
+      "waitingStart": "開始待ち"
+    },
+    "announcements": {
+      "empty": "現在お知らせはありません。",
+      "loading": "お知らせを読み込み中...",
+      "title": "お知らせ"
+    },
+    "answerStatus": {
+      "answered": "回答済み",
+      "correct": "正解",
+      "graded": "採点済み",
+      "marked": "マーク済み",
+      "noScore": "得点なし",
+      "partial": "部分点",
+      "pendingGrading": "採点待ち",
+      "unanswered": "未回答"
+    },
+    "ariaLabel": "学生コンテストホーム",
+    "contestState": {
+      "archived": "アーカイブ済み",
+      "draft": "下書き",
+      "ended": "終了",
+      "running": "進行中",
+      "unknown": "不明",
+      "upcoming": "開始前"
+    },
+    "empty": {
+      "noAnswerRecords": "回答記録はまだありません。",
+      "noQuestions": "問題データはまだありません。",
+      "noScoreDistribution": "得点分布データはまだありません。"
+    },
+    "errors": {
+      "announcementsLoadFailed": "お知らせを一時的に読み込めません",
+      "questionsLoadFailed": "問題データを一時的に読み込めません",
+      "scoreDistributionLoadFailed": "得点分布を一時的に読み込めません"
+    },
+    "infoLabel": "コンテスト情報",
+    "joinStatus": {
+      "joined": "参加済み",
+      "notJoined": "未参加"
+    },
+    "loading": "読み込み中...",
+    "loadingAnswers": "回答データを読み込み中...",
+    "mainContent": "コンテストのメイン内容",
+    "metrics": {
+      "duration": "総時間",
+      "endTime": "終了時間",
+      "startTime": "開始時間"
+    },
+    "monitoring": {
+      "enabled": "監視中",
+      "subtitle": "試験に入ると、全画面・タブ切替・デバイス監視が有効になります。",
+      "title": "監視が有効です"
+    },
+    "records": {
+      "currentStatus": "現在の回答状況",
+      "fullScore": "満点 {{score}}",
+      "notSubmitted": "未提出",
+      "title": "回答記録",
+      "withResults": "回答記録と成績"
+    },
+    "report": {
+      "download": "ダウンロード",
+      "failedTitle": "ダウンロード失敗",
+      "language": "レポート言語",
+      "languages": {
+        "en": "English",
+        "ja": "日本語",
+        "ko": "한국어",
+        "zhTW": "繁體中文"
+      },
+      "preparing": "準備中"
+    },
+    "results": {
+      "pendingPublish": "公開待ち",
+      "published": "成績公開済み",
+      "unpublished": "未公開",
+      "waitingPublish": "成績公開待ち"
+    },
+    "rules": {
+      "empty": "追加ルールはありません。",
+      "noPassword": "このコンテストにはパスワードは不要です。",
+      "requiresPassword": "このコンテストにはパスワードが必要です。",
+      "title": "ルール"
+    },
+    "submitConfirm": {
+      "body": "提出後は回答を変更できません。",
+      "confirm": "提出する",
+      "heading": "提出確認"
+    },
+    "summary": {
+      "ariaLabel": "コンテスト概要",
+      "averageScore": "平均 {{average}} / {{max}}",
+      "completionRate": "完了率",
+      "examResult": "試験成績",
+      "examStatus": "試験状態",
+      "scoreDistribution": "得点分布"
+    },
+    "tabs": {
+      "ariaLabel": "コンテスト情報タブ",
+      "records": "回答記録",
+      "rules": "ルール"
+    }
+  },
   "studentStatus": {
     "pausedLocked": "一時停止 / ロック",
     "personCount": "{{count}} 名",
diff --git a/frontend/src/i18n/locales/ko/contest.json b/frontend/src/i18n/locales/ko/contest.json
index 96a03262..54c13057 100644
--- a/frontend/src/i18n/locales/ko/contest.json
+++ b/frontend/src/i18n/locales/ko/contest.json
@@ -62,6 +62,70 @@
       "strictModeEnableSuccess": "부정행위 방지 감독이 활성화되었습니다",
       "updateFailed": "업데이트 실패"
     },
+    "command": {
+      "ariaLabel": "교사 관리 개요",
+      "connection": {
+        "offline": "오프라인",
+        "online": "온라인"
+      },
+      "drawer": {
+        "ariaLabel": "학생 상세 정보",
+        "close": "학생 상세 정보 닫기",
+        "closeBackdrop": "학생 상세 배경 닫기",
+        "title": "학생 상세 정보"
+      },
+      "drilldown": {
+        "ariaLabel": "개요 데이터 전환",
+        "participants": "참가자",
+        "questionStats": "답안 분포"
+      },
+      "eventLog": "이벤트 기록",
+      "examStatusSummary": "시험 상태 요약",
+      "examTime": "시험 시간",
+      "filters": {
+        "allQuestionTypes": "전체 문항 유형",
+        "allStatuses": "전체 상태",
+        "needsAttention": "처리 필요"
+      },
+      "metric": {
+        "answerProgress": "답안 진행률",
+        "eventUnit": "회",
+        "gradingProgress": "채점 진행률",
+        "inProgress": "진행 중",
+        "interrupted": "중단됨",
+        "notSubmitted": "미제출",
+        "pausedDetail": "일시 중지됨",
+        "pointUnit": "점",
+        "score": "점수",
+        "scoreUnit": "{{score}} 점",
+        "scored": "점수 반영됨",
+        "violations": "이상 이벤트"
+      },
+      "metricSwitcher": "학생 카드 지표 전환",
+      "metrics": {
+        "endTime": "종료 시간",
+        "examParticipants": "응시 인원",
+        "onlineParticipants": "온라인 인원",
+        "startTime": "시작 시간"
+      },
+      "participants": {
+        "empty": "현재 학생이 없습니다",
+        "filterStatus": "상태 필터",
+        "filterStatusAria": "학생 상태 필터",
+        "loading": "학생 목록을 불러오는 중",
+        "search": "학생 검색",
+        "searchPlaceholder": "표시 이름 또는 사용자 이름 검색...",
+        "title": "학생 목록"
+      },
+      "questionStats": {
+        "empty": "아직 답안 분포 데이터가 없습니다",
+        "filterQuestionType": "문항 유형 필터",
+        "filterQuestionTypeAria": "문항 유형 필터",
+        "search": "문항 검색",
+        "searchPlaceholder": "문항 번호 또는 내용을 검색..."
+      },
+      "tabsAriaLabel": "교사 관리 개요 탭"
+    },
     "events": {
       "critical": "고위험 이벤트",
       "empty": "현재 이벤트가 없습니다",
@@ -91,6 +155,127 @@
       "problemUnit": "문제",
       "time": "시간 진행"
     },
+    "model": {
+      "attention": {
+        "anomalyCount": "이상 {{count}}회",
+        "connectionInterrupted": "연결이 끊어졌습니다",
+        "examLocked": "시험이 잠겼습니다",
+        "notEntered": "아직 시험에 입장하지 않았습니다"
+      },
+      "common": {
+        "disabled": "비활성화됨",
+        "enabled": "활성화됨",
+        "noData": "아직 데이터 없음",
+        "unset": "미설정"
+      },
+      "contestStatus": {
+        "archived": "보관됨",
+        "draft": "초안",
+        "published": "공개됨"
+      },
+      "grading": {
+        "noAnswers": "아직 답안 데이터 없음",
+        "noData": "아직 채점 데이터 없음"
+      },
+      "insights": {
+        "examProgress": "시험 진행률",
+        "gradingProgress": "채점 진행률",
+        "priorityEvents": "이상 이벤트"
+      },
+      "kpi": {
+        "onlineStudents": "온라인 학생",
+        "pendingEvents": "처리 대기 이벤트",
+        "started": "시작됨"
+      },
+      "nextActions": {
+        "attention": {
+          "empty": "처리 대기 이상 없음",
+          "hasItems": "학생 {{count}}명 확인 필요",
+          "title": "이상 확인"
+        },
+        "grading": {
+          "afterExam": "시험 후 채점을 시작할 수 있습니다",
+          "progress": "{{percent}}% 채점됨",
+          "title": "채점으로 이동"
+        },
+        "results": {
+          "readyToPublish": "채점 확인 후 공개",
+          "title": "성적 공개"
+        }
+      },
+      "preparation": {
+        "antiCheat": "부정행위 방지 설정",
+        "antiCheatEnabled": "부정행위 방지 모니터링이 활성화되었습니다",
+        "antiCheatOptional": "시험 요구에 따라 활성화할 수 있습니다",
+        "currentStatus": "현재 상태: {{status}}",
+        "participantCount": "참가자 {{count}}명",
+        "participantList": "참가자 명단",
+        "participantsMissing": "아직 참가자 데이터가 없습니다",
+        "publish": "대회 공개",
+        "publishedDescription": "참가자는 권한에 따라 대회에 들어갈 수 있습니다",
+        "rules": "답안 규칙",
+        "rulesMissing": "시험 규칙과 유의사항을 추가할 수 있습니다",
+        "rulesReady": "규칙 안내가 입력되었습니다",
+        "schedule": "시험 시간대",
+        "scheduleMissing": "시작 및 종료 시간이 완전하지 않습니다",
+        "workItemsMissing": "아직 답안 작성 가능한 문항이 없습니다",
+        "workItemsReady": "{{count}}개 문항 설정됨"
+      },
+      "progress": {
+        "current": "현재",
+        "label": "진행률",
+        "start": "시작"
+      },
+      "readiness": {
+        "done": "완료",
+        "missing": "누락",
+        "warning": "확인 필요"
+      },
+      "results": {
+        "published": "공개됨",
+        "unpublished": "미공개"
+      },
+      "status": {
+        "anomaly": "이상",
+        "inProgress": "답안 작성 중",
+        "locked": "잠김",
+        "lockedOffline": "잠김 / 오프라인",
+        "notStarted": "미시작",
+        "offline": "오프라인",
+        "online": "온라인",
+        "submitted": "제출됨"
+      },
+      "summary": {
+        "antiCheat": "부정행위 방지",
+        "gradingAfterExam": "시험 후 채점 데이터가 생성됩니다",
+        "gradingCount": "{{graded}} / {{total}}건",
+        "participants": "참가자",
+        "participantsMissing": "아직 참가자 데이터가 없습니다",
+        "participantsReady": "명단 관리 가능",
+        "results": "성적",
+        "resultsVisible": "참가자가 볼 수 있습니다",
+        "scheduleMissing": "시간 설정 보완 필요",
+        "scheduleReady": "시간 설정 완료",
+        "status": "대회 상태",
+        "statusClosed": "아직 공식 공개되지 않음",
+        "statusOpen": "참가자에게 공개됨",
+        "workItemsMissing": "아직 내용이 생성되지 않음",
+        "workItemsReady": "내용이 생성됨"
+      },
+      "timeline": {
+        "ended": "종료됨",
+        "examEnded": "시험이 종료되었습니다",
+        "notStarted": "시작 전",
+        "remaining": "{{time}} 남음",
+        "running": "진행 중",
+        "startsIn": "{{time}} 후 시작",
+        "timeUnset": "시간 미설정"
+      },
+      "workItems": {
+        "coding": "코딩 문제",
+        "paperExam": "시험 문항"
+      }
+    },
     "screen": {
       "actions": {
         "addParticipant": "참가자 추가",
@@ -144,7 +329,6 @@
       "disabled": "비활성화",
       "enabled": "활성화",
       "examProgress": "시험 진행률",
-      "timelineProgress": "시간 진행",
       "goEventPanel": "이벤트 패널로 이동",
       "goParticipantList": "참가자 목록 열기",
       "goProblemManagement": "문제 관리로 이동",
@@ -159,6 +343,7 @@
       "status": "경진대회 상태",
       "strictExamMode": "부정행위 방지 감독",
       "subtitle": "설정, 문제, 상태 작업으로 빠르게 이동",
+      "timelineProgress": "시간 진행",
       "title": "명령 센터",
       "violationCount": "이상 이벤트 수",
       "violationCountAria": "이상 이벤트 수, 이벤트 패널로 이동"
@@ -197,6 +382,7 @@
       "title": "準備狀態"
     },
     "tabs": {
+      "ariaLabel": "준비 및 채점 탭",
       "entries": "管理入口",
       "grading": "批改與成績",
       "readiness": "準備狀態"
@@ -1576,6 +1762,124 @@
     "ungraded": "미채점",
     "viewSubmissionSamples": "제출 샘플 보기"
   },
+  "studentDashboard": {
+    "actions": {
+      "adminPanel": "관리 대시보드",
+      "backToAnswering": "답안 화면으로 돌아가기",
+      "downloadProof": "답안 증명 다운로드",
+      "downloadReport": "성적표 다운로드",
+      "join": "대회 참가",
+      "joinUnavailable": "현재 참가할 수 없음",
+      "refresh": "새로고침",
+      "rejoin": "다시 참가",
+      "resume": "답안 작성 재개",
+      "start": "답안 작성 시작",
+      "submit": "제출",
+      "unavailable": "답안 작성 불가",
+      "waitingStart": "시작 대기"
+    },
+    "announcements": {
+      "empty": "현재 공지사항이 없습니다.",
+      "loading": "공지사항을 불러오는 중...",
+      "title": "공지사항"
+    },
+    "answerStatus": {
+      "answered": "답변됨",
+      "correct": "정답",
+      "graded": "채점됨",
+      "marked": "표시됨",
+      "noScore": "점수 없음",
+      "partial": "부분 점수",
+      "pendingGrading": "채점 대기",
+      "unanswered": "미답변"
+    },
+    "ariaLabel": "학생 대회 홈",
+    "contestState": {
+      "archived": "보관됨",
+      "draft": "초안",
+      "ended": "종료됨",
+      "running": "진행 중",
+      "unknown": "알 수 없음",
+      "upcoming": "시작 예정"
+    },
+    "empty": {
+      "noAnswerRecords": "아직 답안 기록이 없습니다.",
+      "noQuestions": "아직 문항 데이터가 없습니다.",
+      "noScoreDistribution": "아직 점수 분포 데이터가 없습니다."
+    },
+    "errors": {
+      "announcementsLoadFailed": "공지사항을 일시적으로 불러올 수 없습니다",
+      "questionsLoadFailed": "문항 데이터를 일시적으로 불러올 수 없습니다",
+      "scoreDistributionLoadFailed": "점수 분포를 일시적으로 불러올 수 없습니다"
+    },
+    "infoLabel": "대회 정보",
+    "joinStatus": {
+      "joined": "참가됨",
+      "notJoined": "미참가"
+    },
+    "loading": "불러오는 중...",
+    "loadingAnswers": "답안 데이터를 불러오는 중...",
+    "mainContent": "대회 주요 내용",
+    "metrics": {
+      "duration": "총 시간",
+      "endTime": "종료 시간",
+      "startTime": "시작 시간"
+    },
+    "monitoring": {
+      "enabled": "모니터링 중",
+      "subtitle": "시험에 들어가면 전체 화면, 탭 전환 및 장치 모니터링이 활성화됩니다.",
+      "title": "모니터링이 활성화됨"
+    },
+    "records": {
+      "currentStatus": "현재 답안 상태",
+      "fullScore": "만점 {{score}}",
+      "notSubmitted": "미제출",
+      "title": "답안 기록",
+      "withResults": "답안 기록 및 성적"
+    },
+    "report": {
+      "download": "다운로드",
+      "failedTitle": "다운로드 실패",
+      "language": "보고서 언어",
+      "languages": {
+        "en": "English",
+        "ja": "日本語",
+        "ko": "한국어",
+        "zhTW": "繁體中文"
+      },
+      "preparing": "준비 중"
+    },
+    "results": {
+      "pendingPublish": "공개 대기",
+      "published": "성적 공개됨",
+      "unpublished": "아직 공개되지 않음",
+      "waitingPublish": "성적 공개 대기"
+    },
+    "rules": {
+      "empty": "추가 규칙이 없습니다.",
+      "noPassword": "이 대회는 비밀번호가 필요하지 않습니다.",
+      "requiresPassword": "이 대회는 비밀번호가 필요합니다.",
+      "title": "규칙 안내"
+    },
+    "submitConfirm": {
+      "body": "제출 후에는 답안을 수정할 수 없습니다.",
+      "confirm": "제출 확인",
+      "heading": "제출 확인"
+    },
+    "summary": {
+      "ariaLabel": "대회 요약",
+      "averageScore": "평균 {{average}} / {{max}}",
+      "completionRate": "완료율",
+      "examResult": "시험 성적",
+      "examStatus": "시험 상태",
+      "scoreDistribution": "점수 분포"
+    },
+    "tabs": {
+      "ariaLabel": "대회 정보 전환",
+      "records": "답안 기록",
+      "rules": "규칙 안내"
+    }
+  },
   "studentStatus": {
     "pausedLocked": "일시 정지 / 잠금",
     "personCount": "{{count}}명",
diff --git a/frontend/src/i18n/locales/zh-TW/contest.json b/frontend/src/i18n/locales/zh-TW/contest.json
index 4f351817..4e4ad275 100644
--- a/frontend/src/i18n/locales/zh-TW/contest.json
+++ b/frontend/src/i18n/locales/zh-TW/contest.json
@@ -62,6 +62,70 @@
       "strictModeEnableSuccess": "已啟用防作弊監控",
       "updateFailed": "更新失敗"
     },
+    "command": {
+      "ariaLabel": "教師管理總覽",
+      "connection": {
+        "offline": "離線",
+        "online": "在線"
+      },
+      "drawer": {
+        "ariaLabel": "學生詳細資訊",
+        "close": "關閉學生詳細資訊",
+        "closeBackdrop": "關閉學生詳細資訊背景",
+        "title": "學生詳細資訊"
+      },
+      "drilldown": {
+        "ariaLabel": "總覽資料切換",
+        "participants": "參與者",
+        "questionStats": "作答分佈"
+      },
+      "eventLog": "事件紀錄",
+      "examStatusSummary": "考試狀態摘要",
+      "examTime": "考試時間",
+      "filters": {
+        "allQuestionTypes": "全部題型",
+        "allStatuses": "全部狀態",
+        "needsAttention": "需要處理"
+      },
+      "metric": {
+        "answerProgress": "作答進度",
+        "eventUnit": "次",
+        "gradingProgress": "批改進度",
+        "inProgress": "進行中",
+        "interrupted": "中斷",
+        "notSubmitted": "未交卷",
+        "pausedDetail": "已暫停",
+        "pointUnit": "分",
+        "score": "分數",
+        "scoreUnit": "{{score}} 分",
+        "scored": "已計分",
+        "violations": "異常事件"
+      },
+      "metricSwitcher": "考生卡片資料切換",
+      "metrics": {
+        "endTime": "結束時間",
+        "examParticipants": "考試人數",
+        "onlineParticipants": "在線人數",
+        "startTime": "開始時間"
+      },
+      "participants": {
+        "empty": "目前沒有考生",
+        "filterStatus": "篩選狀態",
+        "filterStatusAria": "篩選考生狀態",
+        "loading": "考生列表載入中",
+        "search": "搜尋考生",
+        "searchPlaceholder": "搜尋顯示名稱或使用者名稱...",
+        "title": "考生列表"
+      },
+      "questionStats": {
+        "empty": "目前沒有作答分佈資料",
+        "filterQuestionType": "篩選題型",
+        "filterQuestionTypeAria": "篩選題型",
+        "search": "搜尋題目",
+        "searchPlaceholder": "搜尋題號或題目..."
+      },
+      "tabsAriaLabel": "教師管理總覽分頁"
+    },
     "events": {
       "critical": "高風險事件",
       "empty": "目前沒有事件",
@@ -91,6 +155,127 @@
       "problemUnit": "題",
       "time": "時間進度"
     },
+    "model": {
+      "attention": {
+        "anomalyCount": "{{count}} 次異常",
+        "connectionInterrupted": "連線中斷",
+        "examLocked": "考試已鎖定",
+        "notEntered": "尚未進入考試"
+      },
+      "common": {
+        "disabled": "未啟用",
+        "enabled": "已啟用",
+        "noData": "尚無資料",
+        "unset": "未設定"
+      },
+      "contestStatus": {
+        "archived": "已封存",
+        "draft": "草稿",
+        "published": "已發布"
+      },
+      "grading": {
+        "noAnswers": "尚無作答資料",
+        "noData": "尚無批改資料"
+      },
+      "insights": {
+        "examProgress": "考試進度",
+        "gradingProgress": "批改進度",
+        "priorityEvents": "異常事件"
+      },
+      "kpi": {
+        "onlineStudents": "在線考生",
+        "pendingEvents": "待處理事件",
+        "started": "已開始"
+      },
+      "nextActions": {
+        "attention": {
+          "empty": "目前沒有待處理異常",
+          "hasItems": "{{count}} 位考生需要確認",
+          "title": "處理異常"
+        },
+        "grading": {
+          "afterExam": "考後可開始批改",
+          "progress": "已批改 {{percent}}%",
+          "title": "前往批改"
+        },
+        "results": {
+          "readyToPublish": "確認批改後發布",
+          "title": "發布成績"
+        }
+      },
+      "preparation": {
+        "antiCheat": "防作弊設定",
+        "antiCheatEnabled": "防作弊監控已啟用",
+        "antiCheatOptional": "可依考試需求啟用",
+        "currentStatus": "目前狀態：{{status}}",
+        "participantCount": "{{count}} 位參賽者",
+        "participantList": "參賽者名單",
+        "participantsMissing": "尚未看到參賽者資料",
+        "publish": "競賽發布",
+        "publishedDescription": "參賽者可依權限進入競賽",
+        "rules": "作答規則",
+        "rulesMissing": "可補上考試規則與注意事項",
+        "rulesReady": "已填寫規則說明",
+        "schedule": "考試時段",
+        "scheduleMissing": "開始與結束時間未完整設定",
+        "workItemsMissing": "尚未建立可作答的題目",
+        "workItemsReady": "已設定 {{count}} 題"
+      },
+      "progress": {
+        "current": "目前",
+        "label": "進度",
+        "start": "開始"
+      },
+      "readiness": {
+        "done": "完成",
+        "missing": "缺少",
+        "warning": "待確認"
+      },
+      "results": {
+        "published": "已發布",
+        "unpublished": "未發布"
+      },
+      "status": {
+        "anomaly": "異常",
+        "inProgress": "作答中",
+        "locked": "鎖定",
+        "lockedOffline": "鎖定 / 離線",
+        "notStarted": "未開始",
+        "offline": "離線",
+        "online": "在線",
+        "submitted": "已交卷"
+      },
+      "summary": {
+        "antiCheat": "防作弊",
+        "gradingAfterExam": "考後才會產生批改資料",
+        "gradingCount": "{{graded}} / {{total}} 份",
+        "participants": "參賽者",
+        "participantsMissing": "尚無參賽者資料",
+        "participantsReady": "名單可供管理",
+        "results": "成績",
+        "resultsVisible": "參賽者可查看",
+        "scheduleMissing": "需要補齊時間",
+        "scheduleReady": "時間設定完整",
+        "status": "競賽狀態",
+        "statusClosed": "尚未正式開放",
+        "statusOpen": "已開放給參賽者",
+        "workItemsMissing": "尚未建立內容",
+        "workItemsReady": "內容已建立"
+      },
+      "timeline": {
+        "ended": "已結束",
+        "examEnded": "考試已結束",
+        "notStarted": "尚未開始",
+        "remaining": "剩餘 {{time}}",
+        "running": "進行中",
+        "startsIn": "距離開始 {{time}}",
+        "timeUnset": "時間未設定"
+      },
+      "workItems": {
+        "coding": "程式題目",
+        "paperExam": "考卷題目"
+      }
+    },
     "screen": {
       "actions": {
         "addParticipant": "新增參賽者",
@@ -144,7 +329,6 @@
       "disabled": "未啟用",
       "enabled": "已啟用",
       "examProgress": "考試進度",
-      "timelineProgress": "時間進度",
       "goEventPanel": "前往事件面板",
       "goParticipantList": "進入參賽者列表",
       "goProblemManagement": "前往題目管理",
@@ -159,6 +343,7 @@
       "status": "競賽狀態",
       "strictExamMode": "防作弊監控",
       "subtitle": "快速進入設定、題目與狀態操作",
+      "timelineProgress": "時間進度",
       "title": "控制台",
       "violationCount": "異常事件數",
       "violationCountAria": "異常事件數 前往事件面板"
@@ -197,6 +382,7 @@
       "title": "準備狀態"
     },
     "tabs": {
+      "ariaLabel": "準備與成績分頁",
       "entries": "管理入口",
       "grading": "批改與成績",
       "readiness": "準備狀態"
@@ -1576,6 +1762,124 @@
     "ungraded": "未批改",
     "viewSubmissionSamples": "查看提交樣本"
   },
+  "studentDashboard": {
+    "actions": {
+      "adminPanel": "管理後台",
+      "backToAnswering": "回到作答",
+      "downloadProof": "下載作答證明",
+      "downloadReport": "下載成績單",
+      "join": "加入競賽",
+      "joinUnavailable": "目前不可加入",
+      "refresh": "重新整理",
+      "rejoin": "重新加入",
+      "resume": "恢復作答",
+      "start": "開始作答",
+      "submit": "交卷",
+      "unavailable": "不可作答",
+      "waitingStart": "等待開始"
+    },
+    "announcements": {
+      "empty": "目前沒有公告。",
+      "loading": "載入公告中...",
+      "title": "公告"
+    },
+    "answerStatus": {
+      "answered": "已作答",
+      "correct": "正確",
+      "graded": "已批改",
+      "marked": "已標記",
+      "noScore": "未得分",
+      "partial": "部分得分",
+      "pendingGrading": "待批改",
+      "unanswered": "未作答"
+    },
+    "ariaLabel": "學生競賽首頁",
+    "contestState": {
+      "archived": "已封存",
+      "draft": "草稿",
+      "ended": "已結束",
+      "running": "進行中",
+      "unknown": "未知",
+      "upcoming": "即將開始"
+    },
+    "empty": {
+      "noAnswerRecords": "尚無作答紀錄。",
+      "noQuestions": "尚無題目資料。",
+      "noScoreDistribution": "尚無成績分布資料。"
+    },
+    "errors": {
+      "announcementsLoadFailed": "公告暫時無法載入",
+      "questionsLoadFailed": "題目資料暫時無法載入",
+      "scoreDistributionLoadFailed": "成績分布暫時無法載入"
+    },
+    "infoLabel": "競賽資訊",
+    "joinStatus": {
+      "joined": "已加入",
+      "notJoined": "未加入"
+    },
+    "loading": "載入中...",
+    "loadingAnswers": "載入作答資料中...",
+    "mainContent": "競賽主要內容",
+    "metrics": {
+      "duration": "總時長",
+      "endTime": "截止時間",
+      "startTime": "開始時間"
+    },
+    "monitoring": {
+      "enabled": "監控中",
+      "subtitle": "進入作答後會啟用全螢幕、分頁切換與裝置監控。",
+      "title": "已啟用監控"
+    },
+    "records": {
+      "currentStatus": "目前作答狀況",
+      "fullScore": "滿分 {{score}}",
+      "notSubmitted": "尚未提交",
+      "title": "作答紀錄",
+      "withResults": "作答紀錄與成績"
+    },
+    "report": {
+      "download": "下載",
+      "failedTitle": "下載失敗",
+      "language": "報告語言",
+      "languages": {
+        "en": "English",
+        "ja": "日本語",
+        "ko": "한국어",
+        "zhTW": "繁體中文"
+      },
+      "preparing": "準備中"
+    },
+    "results": {
+      "pendingPublish": "待發布",
+      "published": "成績已發布",
+      "unpublished": "尚未發布",
+      "waitingPublish": "等待成績發布"
+    },
+    "rules": {
+      "empty": "沒有額外規則。",
+      "noPassword": "此競賽不需要密碼。",
+      "requiresPassword": "此競賽需要密碼。",
+      "title": "規則說明"
+    },
+    "submitConfirm": {
+      "body": "交卷後將無法繼續修改答案。",
+      "confirm": "確認交卷",
+      "heading": "確認交卷"
+    },
+    "summary": {
+      "ariaLabel": "競賽摘要",
+      "averageScore": "平均 {{average}} / {{max}}",
+      "completionRate": "完成率",
+      "examResult": "考試成績",
+      "examStatus": "考試狀態",
+      "scoreDistribution": "成績分布"
+    },
+    "tabs": {
+      "ariaLabel": "競賽資訊切換",
+      "records": "作答紀錄",
+      "rules": "規則說明"
+    }
+  },
   "studentStatus": {
     "pausedLocked": "已暫停 / 已鎖定",
     "personCount": "{{count}} 人",
diff --git a/frontend/src/infrastructure/api/dto/contest.dto.ts b/frontend/src/infrastructure/api/dto/contest.dto.ts
index 0474618b..554fae63 100644
--- a/frontend/src/infrastructure/api/dto/contest.dto.ts
+++ b/frontend/src/infrastructure/api/dto/contest.dto.ts
@@ -107,7 +107,6 @@ export interface ContestDetailDto extends ContestDto {
   warning_timeout_seconds?: number;
   screen_share_recovery_grace_ms?: number;
   scoreboard_visible_during_contest?: boolean;
-  anonymous_mode_enabled?: boolean;
   allow_multiple_joins?: boolean;
   max_cheat_warnings?: number;
   allow_auto_unlock?: boolean;
@@ -118,7 +117,6 @@ export interface ContestDetailDto extends ContestDto {
   question_edit_lock_trigger?: "coding_submission" | "exam_answer" | null;
   is_exam_questions_frozen?: boolean;
   exam_questions_count?: number;
-  my_nickname?: string;
   has_started?: boolean;
   started_at?: string;
   left_at?: string;
@@ -175,7 +173,6 @@ export interface ContestParticipantDto {
       display_name?: string;
     };
   };
-  user_display_name?: string;
   account_role?: string;
   auth_provider?: string;
   connection_status?: "offline" | "online" | "live";
@@ -190,7 +187,6 @@ export interface ContestParticipantDto {
   lock_reason?: string;
   violation_count?: number;
   submit_reason?: string;
-  nickname?: string;
   display_name?: string;
   started_at?: string;
   left_at?: string;
@@ -297,7 +293,6 @@ export interface ScoreboardRowDto {
   user?: { id?: number | string; username?: string };
   user_id?: number | string;
   display_name?: string;
-  nickname?: string;
   solved?: number;
   solved_count?: number;
   total_score?: number;
diff --git a/frontend/src/infrastructure/api/repositories/contest.repository.ts b/frontend/src/infrastructure/api/repositories/contest.repository.ts
index c21a748b..c9bb8680 100644
--- a/frontend/src/infrastructure/api/repositories/contest.repository.ts
+++ b/frontend/src/infrastructure/api/repositories/contest.repository.ts
@@ -84,7 +84,7 @@ export const toggleStatus = async (
 
 export const registerContest = async (
   id: string,
-  data?: { password?: string; nickname?: string }
+  data?: { password?: string }
 ): Promise<void> => {
   await requestJson<void>(
     httpClient.post(`/api/v1/contests/${id}/register/`, data),
diff --git a/frontend/src/infrastructure/api/repositories/contestParticipants.repository.ts b/frontend/src/infrastructure/api/repositories/contestParticipants.repository.ts
index e26b8c4f..cdeeb5aa 100644
--- a/frontend/src/infrastructure/api/repositories/contestParticipants.repository.ts
+++ b/frontend/src/infrastructure/api/repositories/contestParticipants.repository.ts
@@ -35,18 +35,6 @@ export const unlockParticipant = async (
   );
 };
 
-export const updateNickname = async (
-  contestId: string,
-  nickname: string
-): Promise<any> => {
-  return requestJson<any>(
-    httpClient.post(`/api/v1/contests/${contestId}/update_nickname/`, {
-      nickname,
-    }),
-    "Failed to update nickname"
-  );
-};
-
 export const updateParticipant = async (
   contestId: string,
   userId: number,
diff --git a/frontend/src/infrastructure/api/repositories/exam.repository.ts b/frontend/src/infrastructure/api/repositories/exam.repository.ts
index 43c13c95..af9941af 100644
--- a/frontend/src/infrastructure/api/repositories/exam.repository.ts
+++ b/frontend/src/infrastructure/api/repositories/exam.repository.ts
@@ -62,7 +62,7 @@ export interface ExamAnswerDto {
   graded_at: string | null;
   participant_user_id: number;
   participant_username: string;
-  participant_nickname: string;
+  participant_display_name: string;
   created_at: string;
   updated_at: string;
 }
@@ -119,7 +119,6 @@ export interface ExamDashboardQuestionDetailDto {
   responses: Array<{
     participant_id: number;
     username: string;
-    nickname: string | null;
     display_name: string;
     score: number | null;
     graded_at: string | null;
@@ -134,7 +133,6 @@ export interface ExamDashboardQuestionDetailDto {
     participants: Array<{
       participant_id: number;
       username: string;
-      nickname: string | null;
       display_name: string;
     }>;
   }>;
@@ -142,7 +140,6 @@ export interface ExamDashboardQuestionDetailDto {
   omitted_participants?: Array<{
     participant_id: number;
     username: string;
-    nickname: string | null;
     display_name: string;
   }>;
   grading_progress?: {
diff --git a/frontend/src/infrastructure/api/repositories/examAnswers.repository.ts b/frontend/src/infrastructure/api/repositories/examAnswers.repository.ts
index ce018aff..258a1e7b 100644
--- a/frontend/src/infrastructure/api/repositories/examAnswers.repository.ts
+++ b/frontend/src/infrastructure/api/repositories/examAnswers.repository.ts
@@ -34,7 +34,7 @@ export interface ExamAnswerDetailDto extends ExamAnswerDto {
   question_snapshot?: QuestionSnapshotDto | null;
   participant_user_id?: number;
   participant_username?: string;
-  participant_nickname?: string;
+  participant_display_name?: string;
 }
 
 export interface ExamAnswer {
@@ -68,7 +68,7 @@ export interface ExamAnswerDetail extends ExamAnswer {
   questionSnapshot?: QuestionSnapshot | null;
   participantUserId?: string;
   participantUsername?: string;
-  participantNickname?: string;
+  participantDisplayName?: string;
 }
 
 /**
@@ -159,7 +159,7 @@ const mapAnswerDetailDto = (dto: ExamAnswerDetailDto): ExamAnswerDetail => ({
     : null,
   participantUserId: dto.participant_user_id != null ? String(dto.participant_user_id) : undefined,
   participantUsername: dto.participant_username,
-  participantNickname: dto.participant_nickname,
+  participantDisplayName: dto.participant_display_name,
 });
 
 // ── Student API ──
diff --git a/frontend/src/infrastructure/mappers/contest.mapper.test.ts b/frontend/src/infrastructure/mappers/contest.mapper.test.ts
index 6628014a..f77bc3d2 100644
--- a/frontend/src/infrastructure/mappers/contest.mapper.test.ts
+++ b/frontend/src/infrastructure/mappers/contest.mapper.test.ts
@@ -3,10 +3,28 @@ import {
   mapContestAnticheatConfigDto,
   mapContestDetailDto,
   mapContestOverviewMetricsDto,
+  mapContestParticipantDto,
   mapContestUpdateRequestToDto,
 } from "./contest.mapper";
 
 describe("contest mapper", () => {
+  describe("mapContestParticipantDto", () => {
+    it("maps participant display name from profile display_name", () => {
+      const result = mapContestParticipantDto({
+        user_id: 1,
+        username: "student1",
+        display_name: "Student One",
+        score: 0,
+        joined_at: "2026-05-03T08:50:00+08:00",
+        exam_status: "not_started",
+        violation_count: 0,
+      });
+
+      expect(result.displayName).toBe("Student One");
+      expect(result.username).toBe("student1");
+    });
+  });
+
   describe("mapContestOverviewMetricsDto", () => {
     it("maps overview metrics payload with heartbeat and time progress", () => {
       const dto = {
diff --git a/frontend/src/infrastructure/mappers/contest.mapper.ts b/frontend/src/infrastructure/mappers/contest.mapper.ts
index 1211f241..aaf466ee 100644
--- a/frontend/src/infrastructure/mappers/contest.mapper.ts
+++ b/frontend/src/infrastructure/mappers/contest.mapper.ts
@@ -122,7 +122,6 @@ export function mapContestDetailDto(dto: ContestDetailDto): ContestDetail {
         ? dto.screen_share_recovery_grace_ms
         : 30_000,
     scoreboardVisibleDuringContest: !!dto.scoreboard_visible_during_contest,
-    anonymousModeEnabled: !!dto.anonymous_mode_enabled,
 
     allowMultipleJoins: !!dto.allow_multiple_joins,
     maxCheatWarnings: dto.max_cheat_warnings || 0,
@@ -136,7 +135,6 @@ export function mapContestDetailDto(dto: ContestDetailDto): ContestDetail {
       dto.question_edit_locked ?? dto.is_exam_questions_frozen
     ),
     examQuestionsCount: dto.exam_questions_count ?? 0,
-    myNickname: dto.my_nickname,
 
     hasStarted: !!dto.has_started,
     startedAt: dto.started_at,
@@ -684,8 +682,7 @@ export function mapContestParticipantDto(
     userId: dto.user_id?.toString() || "",
     username: dto.username || "",
     email: dto.user?.email,
-    userDisplayName:
-      dto.user_display_name || dto.user?.profile?.display_name || "",
+    displayName: dto.display_name || dto.user?.profile?.display_name || "",
     accountRole: dto.account_role || dto.user?.role || "",
     authProvider: dto.auth_provider || dto.user?.auth_provider || "",
     connectionStatus:
@@ -706,8 +703,6 @@ export function mapContestParticipantDto(
     lockReason: dto.lock_reason,
     violationCount: dto.violation_count || 0,
     submitReason: dto.submit_reason,
-    nickname: dto.nickname,
-    displayName: dto.display_name,
   };
 }
 
@@ -953,8 +948,7 @@ export function mapScoreboardDto(dto: ScoreboardDto): ScoreboardData {
           rank: s.rank || 0,
           user: s.user || { id: 0, username: "Unknown" },
           userId: s.user?.id?.toString() || "",
-          displayName: s.display_name || s.nickname || s.user?.username || "",
-          nickname: s.nickname,
+          displayName: s.display_name || s.user?.username || "",
           solvedCount: s.solved || s.solved_count || 0,
           totalScore: s.total_score || 0,
           penalty: s.time || 0,
@@ -1159,7 +1153,6 @@ export function mapContestUpdateRequestToDto(
     warning_timeout_seconds: request.warningTimeoutSeconds,
     screen_share_recovery_grace_ms: request.screenShareRecoveryGraceMs,
     scoreboard_visible_during_contest: request.scoreboardVisibleDuringContest,
-    anonymous_mode_enabled: request.anonymousModeEnabled,
     allow_multiple_joins: request.allowMultipleJoins,
     max_cheat_warnings: request.maxCheatWarnings,
     allow_auto_unlock: request.allowAutoUnlock,
diff --git a/frontend/src/shared/components/dashboard/BlockHeader.module.scss b/frontend/src/shared/components/dashboard/BlockHeader.module.scss
new file mode 100644
index 00000000..d05c4156
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/BlockHeader.module.scss
@@ -0,0 +1,27 @@
+.root {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.text {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.description {
+  margin: 0;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+}
+
+.actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 0 0 auto;
+}
diff --git a/frontend/src/shared/components/dashboard/BlockHeader.tsx b/frontend/src/shared/components/dashboard/BlockHeader.tsx
new file mode 100644
index 00000000..f7d59ae8
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/BlockHeader.tsx
@@ -0,0 +1,31 @@
+import type { ElementType, ReactNode } from "react";
+import { PageTitle } from "./typography/PageTitle";
+import { SectionTitle } from "./typography/SectionTitle";
+import styles from "./BlockHeader.module.scss";
+
+export interface BlockHeaderProps {
+  title: ReactNode;
+  titleAs?: ElementType;
+  titleSize?: "page" | "section";
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+export function BlockHeader({
+  title,
+  titleAs,
+  titleSize = "section",
+  description,
+  actions,
+}: BlockHeaderProps) {
+  const TitleComp = titleSize === "page" ? PageTitle : SectionTitle;
+  return (
+    <header className={styles.root}>
+      <div className={styles.text}>
+        <TitleComp as={titleAs}>{title}</TitleComp>
+        {description && <div className={styles.description}>{description}</div>}
+      </div>
+      {actions && <div className={styles.actions}>{actions}</div>}
+    </header>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardBlock.module.scss b/frontend/src/shared/components/dashboard/DashboardBlock.module.scss
new file mode 100644
index 00000000..9b776ddd
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardBlock.module.scss
@@ -0,0 +1,23 @@
+.root {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.paddingDefault {
+  padding: 1.25rem 1.5rem;
+}
+
+.paddingCompact {
+  padding: 0.75rem 1rem;
+}
+
+.paddingFlush {
+  padding: 0;
+}
+
+@media (max-width: 672px) {
+  .paddingDefault {
+    padding: 1rem;
+  }
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardBlock.tsx b/frontend/src/shared/components/dashboard/DashboardBlock.tsx
new file mode 100644
index 00000000..adf5d39a
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardBlock.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import styles from "./DashboardBlock.module.scss";
+
+type Padding = "default" | "compact" | "flush";
+
+export interface DashboardBlockProps {
+  padding?: Padding;
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+const PAD: Record<Padding, string> = {
+  default: styles.paddingDefault,
+  compact: styles.paddingCompact,
+  flush: styles.paddingFlush,
+};
+
+export function DashboardBlock({
+  padding = "default",
+  children,
+  ariaLabel,
+}: DashboardBlockProps) {
+  return (
+    <section
+      className={`${styles.root} ${PAD[padding]}`}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </section>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardContainer.module.scss b/frontend/src/shared/components/dashboard/DashboardContainer.module.scss
new file mode 100644
index 00000000..7e0e22ad
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardContainer.module.scss
@@ -0,0 +1,119 @@
+.root {
+  display: flex;
+  min-width: 0;
+}
+
+.bordered {
+  border: 1px solid var(--cds-border-subtle);
+}
+
+.stack {
+  flex-direction: column;
+}
+
+.stack.dividers > *:not(:last-child) {
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+.split {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.split > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+// proportions: main-aside (主內容 fluid + 右側 18-22rem 側欄)
+.split.proportionsMainAside > *:first-child {
+  flex: 1 1 0;
+}
+
+.split.proportionsMainAside > *:last-child {
+  flex: 0 0 auto;
+  width: clamp(18rem, 24%, 22rem);
+}
+
+// proportions: aside-main (左側 sidebar + 主內容 fluid)
+.split.proportionsAsideMain > *:first-child {
+  flex: 0 0 auto;
+  width: clamp(18rem, 24%, 22rem);
+}
+
+.split.proportionsAsideMain > *:last-child {
+  flex: 1 1 0;
+}
+
+.split.dividers > *:not(:last-child) {
+  border-right: 1px solid var(--cds-border-subtle);
+}
+
+@media (max-width: 1056px) {
+  .split {
+    flex-direction: column;
+  }
+
+  .split > *,
+  .split.proportionsMainAside > *,
+  .split.proportionsAsideMain > * {
+    flex: 1 1 auto;
+    width: auto;
+  }
+
+  .split.dividers > *:not(:last-child) {
+    border-right: 0;
+    border-bottom: 1px solid var(--cds-border-subtle);
+  }
+}
+
+.grid {
+  display: grid;
+}
+
+.gridCols2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.gridCols3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.gridCols4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.gridColsAuto {
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+}
+
+.grid.dividers > * {
+  border-right: 1px solid var(--cds-border-subtle);
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+.grid.dividers.gridCols2 > *:nth-child(2n) {
+  border-right: 0;
+}
+
+.grid.dividers.gridCols3 > *:nth-child(3n) {
+  border-right: 0;
+}
+
+.grid.dividers.gridCols4 > *:nth-child(4n) {
+  border-right: 0;
+}
+
+.grid.dividers > *:last-child {
+  border-right: 0;
+}
+
+@media (max-width: 672px) {
+  .grid:not(.gridColsAuto) {
+    grid-template-columns: 1fr;
+  }
+
+  .grid.dividers:not(.gridColsAuto) > * {
+    border-right: 0;
+  }
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardContainer.tsx b/frontend/src/shared/components/dashboard/DashboardContainer.tsx
new file mode 100644
index 00000000..1ad6cb9f
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardContainer.tsx
@@ -0,0 +1,56 @@
+import type { ReactNode } from "react";
+import styles from "./DashboardContainer.module.scss";
+
+type Layout = "stack" | "split" | "grid";
+type Columns = 2 | 3 | 4 | "auto";
+type Proportions = "equal" | "main-aside" | "aside-main";
+
+export interface DashboardContainerProps {
+  layout: Layout;
+  columns?: Columns;
+  proportions?: Proportions;
+  dividers?: "auto" | "none";
+  bordered?: boolean;
+  children: ReactNode;
+  ariaLabel?: string;
+}
+
+const COLS_CLASS: Record<Columns, string> = {
+  2: styles.gridCols2,
+  3: styles.gridCols3,
+  4: styles.gridCols4,
+  auto: styles.gridColsAuto,
+};
+
+const PROPORTIONS_CLASS: Record<Exclude<Proportions, "equal">, string> = {
+  "main-aside": styles.proportionsMainAside,
+  "aside-main": styles.proportionsAsideMain,
+};
+
+export function DashboardContainer({
+  layout,
+  columns,
+  proportions = "equal",
+  dividers = "none",
+  bordered = false,
+  children,
+  ariaLabel,
+}: DashboardContainerProps) {
+  const classes = [
+    styles.root,
+    styles[layout],
+    dividers === "auto" && styles.dividers,
+    bordered && styles.bordered,
+    layout === "grid" && columns && COLS_CLASS[columns],
+    layout === "split" &&
+      proportions !== "equal" &&
+      PROPORTIONS_CLASS[proportions],
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={classes} aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardPage.module.scss b/frontend/src/shared/components/dashboard/DashboardPage.module.scss
new file mode 100644
index 00000000..980a6c14
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardPage.module.scss
@@ -0,0 +1,38 @@
+.root {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.inner {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  max-width: 1180px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.inner > * {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.fullBleed {
+  max-width: none;
+  padding: 0;
+}
+
+@media (max-width: 672px) {
+  .inner {
+    padding: 0.75rem;
+  }
+
+  .fullBleed {
+    padding: 0;
+  }
+}
diff --git a/frontend/src/shared/components/dashboard/DashboardPage.tsx b/frontend/src/shared/components/dashboard/DashboardPage.tsx
new file mode 100644
index 00000000..63b55941
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/DashboardPage.tsx
@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import styles from "./DashboardPage.module.scss";
+
+export interface DashboardPageProps {
+  children: ReactNode;
+  ariaLabel?: string;
+  fullBleed?: boolean;
+}
+
+export function DashboardPage({
+  children,
+  ariaLabel,
+  fullBleed = false,
+}: DashboardPageProps) {
+  const innerClassName = fullBleed
+    ? `${styles.inner} ${styles.fullBleed}`
+    : styles.inner;
+  return (
+    <main className={styles.root} aria-label={ariaLabel}>
+      <div className={innerClassName}>{children}</div>
+    </main>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/KPIBlock.module.scss b/frontend/src/shared/components/dashboard/KPIBlock.module.scss
new file mode 100644
index 00000000..ca12d8df
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/KPIBlock.module.scss
@@ -0,0 +1,7 @@
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  margin-top: 0.875rem;
+  min-width: 0;
+}
diff --git a/frontend/src/shared/components/dashboard/KPIBlock.tsx b/frontend/src/shared/components/dashboard/KPIBlock.tsx
new file mode 100644
index 00000000..54453f84
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/KPIBlock.tsx
@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+import { DashboardBlock } from "./DashboardBlock";
+import { MetricBlock } from "./typography/MetricBlock";
+import styles from "./KPIBlock.module.scss";
+
+export interface KPIBlockProps {
+  /** Small section label rendered above the value. */
+  title: ReactNode;
+  /** Highlighted KPI value (e.g. "126 人", "78%", "0.0 / 103"). */
+  value: ReactNode;
+  /** Optional inline icon / badge rendered next to the value. */
+  trailing?: ReactNode;
+  /** Value size. Defaults to "lg" for KPI emphasis. */
+  size?: "default" | "lg";
+  /** Align label + value to start (default) or end. */
+  align?: "start" | "end";
+  /** Inherit DashboardBlock padding contract. */
+  padding?: "default" | "compact" | "flush";
+  /** Visualization slot — chart, progress bar, list, etc. */
+  children?: ReactNode;
+  ariaLabel?: string;
+}
+
+export function KPIBlock({
+  title,
+  value,
+  trailing,
+  size = "lg",
+  align = "start",
+  padding = "default",
+  children,
+  ariaLabel,
+}: KPIBlockProps) {
+  const resolvedAriaLabel =
+    ariaLabel ?? (typeof title === "string" ? title : undefined);
+  return (
+    <DashboardBlock padding={padding} ariaLabel={resolvedAriaLabel}>
+      <MetricBlock
+        label={title}
+        value={value}
+        size={size}
+        align={align}
+        trailing={trailing}
+      />
+      {children ? <div className={styles.body}>{children}</div> : null}
+    </DashboardBlock>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/index.ts b/frontend/src/shared/components/dashboard/index.ts
new file mode 100644
index 00000000..6543e018
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/index.ts
@@ -0,0 +1,10 @@
+export * from "./typography";
+export * from "./tabs";
+export { DashboardPage, type DashboardPageProps } from "./DashboardPage";
+export {
+  DashboardContainer,
+  type DashboardContainerProps,
+} from "./DashboardContainer";
+export { DashboardBlock, type DashboardBlockProps } from "./DashboardBlock";
+export { BlockHeader, type BlockHeaderProps } from "./BlockHeader";
+export { KPIBlock, type KPIBlockProps } from "./KPIBlock";
diff --git a/frontend/src/shared/components/dashboard/structure.stories.tsx b/frontend/src/shared/components/dashboard/structure.stories.tsx
new file mode 100644
index 00000000..b96676b4
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/structure.stories.tsx
@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Add } from "@carbon/icons-react";
+import { Button } from "@carbon/react";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardPage,
+  KPIBlock,
+  MetricBlock,
+} from "./index";
+
+const meta: Meta = {
+  title: "Dashboard/Structure",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const SplitWithStackInside: Story = {
+  render: () => (
+    <DashboardPage ariaLabel="demo">
+      <DashboardContainer layout="split" bordered dividers="auto">
+        <DashboardContainer layout="stack" dividers="auto">
+          <DashboardBlock>
+            <BlockHeader
+              titleSize="page"
+              title="2026 春季程式競賽"
+              description="練習用儀表板示範"
+              actions={
+                <Button size="sm" renderIcon={Add}>
+                  新增
+                </Button>
+              }
+            />
+          </DashboardBlock>
+          <DashboardContainer layout="grid" columns={3} dividers="auto">
+            <DashboardBlock>
+              <MetricBlock label="題目" value={12} />
+            </DashboardBlock>
+            <DashboardBlock>
+              <MetricBlock label="參賽" value={42} />
+            </DashboardBlock>
+            <DashboardBlock>
+              <MetricBlock label="完成率" value="78%" />
+            </DashboardBlock>
+          </DashboardContainer>
+        </DashboardContainer>
+        <DashboardContainer layout="stack" dividers="auto">
+          <DashboardBlock>
+            <BlockHeader title="統計" description="近 24 小時" />
+          </DashboardBlock>
+          <DashboardBlock>內容</DashboardBlock>
+        </DashboardContainer>
+      </DashboardContainer>
+    </DashboardPage>
+  ),
+};
+
+export const KPIBlocks: Story = {
+  render: () => (
+    <DashboardContainer layout="stack" bordered dividers="auto">
+      <KPIBlock title="考生分佈總覽" value="126 人">
+        <div
+          style={{
+            height: 8,
+            background: "var(--cds-layer-accent-01)",
+            position: "relative",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              width: "36%",
+              height: "100%",
+              background: "var(--cds-support-success)",
+            }}
+          />
+        </div>
+      </KPIBlock>
+      <KPIBlock title="完成率" value="78%">
+        <div
+          style={{
+            height: 8,
+            background: "var(--cds-layer-accent-01)",
+            overflow: "hidden",
+          }}
+        >
+          <div
+            style={{
+              width: "78%",
+              height: "100%",
+              background: "var(--cds-interactive)",
+            }}
+          />
+        </div>
+      </KPIBlock>
+      <KPIBlock title="分數分布" value="0.0 / 103" />
+      <KPIBlock title="違規事件" value={3} />
+    </DashboardContainer>
+  ),
+};
+
+export const Grid2x2Matrix: Story = {
+  render: () => (
+    <DashboardContainer layout="grid" columns={2} bordered dividers="auto">
+      <DashboardBlock>
+        <MetricBlock label="A" value="1" size="lg" />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock label="B" value="2" size="lg" />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock label="C" value="3" size="lg" />
+      </DashboardBlock>
+      <DashboardBlock>
+        <MetricBlock label="D" value="4" size="lg" />
+      </DashboardBlock>
+    </DashboardContainer>
+  ),
+};
diff --git a/frontend/src/shared/components/dashboard/structure.test.tsx b/frontend/src/shared/components/dashboard/structure.test.tsx
new file mode 100644
index 00000000..2c146118
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/structure.test.tsx
@@ -0,0 +1,119 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  BlockHeader,
+  DashboardBlock,
+  DashboardContainer,
+  DashboardPage,
+  KPIBlock,
+} from "./index";
+
+describe("DashboardPage", () => {
+  it("renders children inside main with aria-label", () => {
+    render(<DashboardPage ariaLabel="page">x</DashboardPage>);
+    expect(screen.getByRole("main", { name: "page" })).toHaveTextContent("x");
+  });
+});
+
+describe("DashboardContainer", () => {
+  it("renders children for stack layout", () => {
+    render(
+      <DashboardContainer layout="stack">
+        <div>a</div>
+        <div>b</div>
+      </DashboardContainer>,
+    );
+    expect(screen.getByText("a")).toBeInTheDocument();
+    expect(screen.getByText("b")).toBeInTheDocument();
+  });
+
+  it("renders children for split layout", () => {
+    render(
+      <DashboardContainer layout="split" dividers="auto" bordered>
+        <div>l</div>
+        <div>r</div>
+      </DashboardContainer>,
+    );
+    expect(screen.getByText("l")).toBeInTheDocument();
+    expect(screen.getByText("r")).toBeInTheDocument();
+  });
+
+  it("renders children for grid layout with columns", () => {
+    render(
+      <DashboardContainer layout="grid" columns={3} dividers="auto">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+      </DashboardContainer>,
+    );
+    expect(screen.getByText("1")).toBeInTheDocument();
+    expect(screen.getByText("3")).toBeInTheDocument();
+  });
+});
+
+describe("DashboardBlock", () => {
+  it("renders as accessible section", () => {
+    render(<DashboardBlock ariaLabel="block">body</DashboardBlock>);
+    expect(screen.getByRole("region", { name: "block" })).toHaveTextContent(
+      "body",
+    );
+  });
+});
+
+describe("BlockHeader", () => {
+  it("renders title and description", () => {
+    render(<BlockHeader title="Hello" description="desc" />);
+    expect(screen.getByRole("heading", { name: "Hello" })).toBeInTheDocument();
+    expect(screen.getByText("desc")).toBeInTheDocument();
+  });
+
+  it("renders actions slot", () => {
+    render(
+      <BlockHeader title="t" actions={<button data-testid="a">A</button>} />,
+    );
+    expect(screen.getByTestId("a")).toBeInTheDocument();
+  });
+
+  it("uses h1 when titleSize=page", () => {
+    render(<BlockHeader title="X" titleSize="page" />);
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+  });
+
+  it("uses h2 by default", () => {
+    render(<BlockHeader title="X" />);
+    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
+  });
+});
+
+describe("KPIBlock", () => {
+  it("renders title and value", () => {
+    render(<KPIBlock title="考生分佈總覽" value="126 人" />);
+    expect(screen.getByText("考生分佈總覽")).toBeInTheDocument();
+    expect(screen.getByText("126 人")).toBeInTheDocument();
+  });
+
+  it("renders visualization child", () => {
+    render(
+      <KPIBlock title="完成率" value="78%">
+        <div data-testid="chart">chart</div>
+      </KPIBlock>,
+    );
+    expect(screen.getByTestId("chart")).toBeInTheDocument();
+  });
+
+  it("derives aria-label from string title", () => {
+    render(<KPIBlock title="違規事件" value={3} />);
+    expect(
+      screen.getByRole("region", { name: "違規事件" }),
+    ).toBeInTheDocument();
+  });
+
+  it("respects explicit aria-label", () => {
+    render(
+      <KPIBlock title="x" value="y" ariaLabel="custom">
+        body
+      </KPIBlock>,
+    );
+    expect(screen.getByRole("region", { name: "custom" })).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss
new file mode 100644
index 00000000..bff577c0
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.module.scss
@@ -0,0 +1,43 @@
+.root {
+  display: flex;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: 1px solid var(--cds-border-subtle);
+}
+
+// padding="default" — keep the tab strip from hugging the block edge.
+// Mirrors the inline padding used by DashboardBlock padding="default".
+.padded {
+  padding-inline: 1rem;
+}
+
+.tabs {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.toolbar {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 1 auto;
+  align-self: center;
+  max-width: 24rem;
+  width: 100%;
+}
+
+@media (max-width: 672px) {
+  .root {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .padded {
+    padding-block-end: 0.5rem;
+  }
+
+  .toolbar {
+    max-width: none;
+  }
+}
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
new file mode 100644
index 00000000..43b9d952
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabBar.tsx
@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+import { Tab, TabList, Tabs } from "@carbon/react";
+import { useDashboardTabs } from "./DashboardTabs";
+import styles from "./DashboardTabBar.module.scss";
+
+export interface TabDef {
+  id: string;
+  label: ReactNode;
+  badge?: ReactNode;
+}
+
+export interface DashboardTabBarProps {
+  tabs: TabDef[];
+  toolbar?: ReactNode;
+  ariaLabel?: string;
+  /**
+   * Inline padding around the tab strip.
+   * - "default" (recommended): adds 1rem inline padding so the tabs
+   *   sit a little inset from the block edge.
+   * - "flush": no padding; for cases where the bar already sits inside
+   *   a container that handles inset itself.
+   */
+  padding?: "default" | "flush";
+}
+
+export function DashboardTabBar({
+  tabs,
+  toolbar,
+  ariaLabel = "dashboard tabs",
+  padding = "default",
+}: DashboardTabBarProps) {
+  const { activeId, onChange } = useDashboardTabs();
+  const selectedIndex = Math.max(
+    0,
+    tabs.findIndex((t) => t.id === activeId),
+  );
+  const rootClass =
+    padding === "flush"
+      ? styles.root
+      : `${styles.root} ${styles.padded}`;
+  return (
+    <div className={rootClass}>
+      <div className={styles.tabs}>
+        <Tabs
+          selectedIndex={selectedIndex}
+          onChange={({ selectedIndex }: { selectedIndex: number }) => {
+            const next = tabs[selectedIndex];
+            if (next) onChange(next.id);
+          }}
+        >
+          <TabList aria-label={ariaLabel}>
+            {tabs.map((t) => (
+              <Tab key={t.id}>
+                {t.label}
+                {t.badge !== undefined && <> ({t.badge})</>}
+              </Tab>
+            ))}
+          </TabList>
+        </Tabs>
+      </div>
+      {toolbar && <div className={styles.toolbar}>{toolbar}</div>}
+    </div>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx
new file mode 100644
index 00000000..22622bd8
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabPanel.tsx
@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+import { useDashboardTabs } from "./DashboardTabs";
+
+export interface DashboardTabPanelProps {
+  tabId: string;
+  children: ReactNode;
+}
+
+export function DashboardTabPanel({ tabId, children }: DashboardTabPanelProps) {
+  const { activeId } = useDashboardTabs();
+  const active = activeId === tabId;
+  return (
+    <div role="tabpanel" hidden={!active}>
+      {children}
+    </div>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardTabs.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardTabs.tsx
new file mode 100644
index 00000000..5b9def87
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardTabs.tsx
@@ -0,0 +1,33 @@
+import { createContext, useContext, type ReactNode } from "react";
+
+interface Ctx {
+  activeId: string;
+  onChange: (id: string) => void;
+}
+const TabsCtx = createContext<Ctx | null>(null);
+
+export interface DashboardTabsProps {
+  activeId: string;
+  onChange: (id: string) => void;
+  children: ReactNode;
+}
+
+export function DashboardTabs({
+  activeId,
+  onChange,
+  children,
+}: DashboardTabsProps) {
+  return (
+    <TabsCtx.Provider value={{ activeId, onChange }}>
+      {children}
+    </TabsCtx.Provider>
+  );
+}
+
+export function useDashboardTabs(): Ctx {
+  const ctx = useContext(TabsCtx);
+  if (!ctx) {
+    throw new Error("DashboardTabs context missing");
+  }
+  return ctx;
+}
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.module.scss b/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.module.scss
new file mode 100644
index 00000000..43e03b77
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.module.scss
@@ -0,0 +1,27 @@
+.root {
+  display: inline-flex;
+  align-items: stretch;
+  width: 100%;
+  gap: 0;
+  border: 0;
+  background: transparent;
+}
+
+.search {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.search :global(.cds--search-input) {
+  border: none;
+  background: transparent;
+}
+
+.search :global(.cds--search-magnifier) {
+  inset-inline-start: 0.75rem;
+}
+
+.filterMenu {
+  flex: 0 0 auto;
+  border-left: 0;
+}
diff --git a/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx b/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx
new file mode 100644
index 00000000..a441cc85
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/DashboardToolbar.tsx
@@ -0,0 +1,57 @@
+import type { ChangeEvent, ReactNode } from "react";
+import { Search } from "@carbon/react";
+import styles from "./DashboardToolbar.module.scss";
+
+export interface DashboardToolbarProps {
+  children: ReactNode;
+}
+
+function Root({ children }: DashboardToolbarProps) {
+  return <div className={styles.root}>{children}</div>;
+}
+
+interface ToolbarSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  onClear?: () => void;
+  placeholder?: string;
+  ariaLabel?: string;
+  id?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+function ToolbarSearch({
+  value,
+  onChange,
+  onClear,
+  placeholder,
+  ariaLabel,
+  id,
+  size = "md",
+}: ToolbarSearchProps) {
+  return (
+    <div className={styles.search}>
+      <Search
+        id={id}
+        size={size}
+        labelText={ariaLabel ?? placeholder ?? "search"}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
+        onClear={onClear}
+      />
+    </div>
+  );
+}
+
+interface ToolbarFilterSlotProps {
+  children: ReactNode;
+}
+function ToolbarFilter({ children }: ToolbarFilterSlotProps) {
+  return <div className={styles.filterMenu}>{children}</div>;
+}
+
+export const DashboardToolbar = Object.assign(Root, {
+  Search: ToolbarSearch,
+  Filter: ToolbarFilter,
+});
diff --git a/frontend/src/shared/components/dashboard/tabs/index.ts b/frontend/src/shared/components/dashboard/tabs/index.ts
new file mode 100644
index 00000000..c32a7f1d
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/index.ts
@@ -0,0 +1,11 @@
+export { DashboardTabs, type DashboardTabsProps } from "./DashboardTabs";
+export {
+  DashboardTabBar,
+  type DashboardTabBarProps,
+  type TabDef,
+} from "./DashboardTabBar";
+export {
+  DashboardTabPanel,
+  type DashboardTabPanelProps,
+} from "./DashboardTabPanel";
+export { DashboardToolbar, type DashboardToolbarProps } from "./DashboardToolbar";
diff --git a/frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx b/frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx
new file mode 100644
index 00000000..6f057179
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/tabs.stories.tsx
@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  DashboardBlock,
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  DashboardToolbar,
+} from "../index";
+
+const meta: Meta = {
+  title: "Dashboard/Tabs",
+  parameters: { layout: "padded" },
+};
+export default meta;
+type Story = StoryObj;
+
+function TabsWithToolbarStory() {
+  const [active, setActive] = useState("all");
+  const [q, setQ] = useState("");
+  return (
+    <DashboardBlock padding="flush">
+      <DashboardTabs activeId={active} onChange={setActive}>
+        <DashboardTabBar
+          tabs={[
+            { id: "all", label: "全部" },
+            { id: "active", label: "進行中", badge: 12 },
+            { id: "done", label: "已結束" },
+          ]}
+          toolbar={
+            <DashboardToolbar>
+              <DashboardToolbar.Search
+                value={q}
+                onChange={setQ}
+                placeholder="搜尋學生"
+              />
+            </DashboardToolbar>
+          }
+        />
+        <DashboardTabPanel tabId="all">
+          <div style={{ padding: "1rem" }}>全部內容</div>
+        </DashboardTabPanel>
+        <DashboardTabPanel tabId="active">
+          <div style={{ padding: "1rem" }}>進行中</div>
+        </DashboardTabPanel>
+        <DashboardTabPanel tabId="done">
+          <div style={{ padding: "1rem" }}>已結束</div>
+        </DashboardTabPanel>
+      </DashboardTabs>
+    </DashboardBlock>
+  );
+}
+
+export const TabsWithToolbar: Story = {
+  render: () => <TabsWithToolbarStory />,
+};
diff --git a/frontend/src/shared/components/dashboard/tabs/tabs.test.tsx b/frontend/src/shared/components/dashboard/tabs/tabs.test.tsx
new file mode 100644
index 00000000..94a1785f
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/tabs/tabs.test.tsx
@@ -0,0 +1,62 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import {
+  DashboardTabBar,
+  DashboardTabPanel,
+  DashboardTabs,
+  DashboardToolbar,
+} from "./index";
+
+function renderTabs(active: string, onChange = vi.fn()) {
+  render(
+    <DashboardTabs activeId={active} onChange={onChange}>
+      <DashboardTabBar
+        tabs={[
+          { id: "a", label: "A" },
+          { id: "b", label: "B" },
+        ]}
+        toolbar={
+          <DashboardToolbar>
+            <DashboardToolbar.Search
+              value=""
+              onChange={() => undefined}
+              placeholder="search"
+            />
+          </DashboardToolbar>
+        }
+      />
+      <DashboardTabPanel tabId="a">PANEL_A</DashboardTabPanel>
+      <DashboardTabPanel tabId="b">PANEL_B</DashboardTabPanel>
+    </DashboardTabs>,
+  );
+  return { onChange };
+}
+
+describe("Dashboard tabs", () => {
+  it("hides inactive panel", () => {
+    renderTabs("a");
+    const panelA = screen.getByText("PANEL_A");
+    const panelB = screen.getByText("PANEL_B");
+    expect(panelA.closest('[role="tabpanel"]')).not.toHaveAttribute("hidden");
+    expect(panelB.closest('[role="tabpanel"]')).toHaveAttribute("hidden");
+  });
+
+  it("renders toolbar slot", () => {
+    renderTabs("a");
+    expect(screen.getByPlaceholderText("search")).toBeInTheDocument();
+  });
+
+  it("fires onChange when clicking another tab", () => {
+    const { onChange } = renderTabs("a");
+    fireEvent.click(screen.getByRole("tab", { name: "B" }));
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+
+  it("switches active panel when active id changes", () => {
+    renderTabs("b");
+    const panelA = screen.getByText("PANEL_A");
+    const panelB = screen.getByText("PANEL_B");
+    expect(panelA.closest('[role="tabpanel"]')).toHaveAttribute("hidden");
+    expect(panelB.closest('[role="tabpanel"]')).not.toHaveAttribute("hidden");
+  });
+});
diff --git a/frontend/src/shared/components/dashboard/typography/MetricBlock.module.scss b/frontend/src/shared/components/dashboard/typography/MetricBlock.module.scss
new file mode 100644
index 00000000..25d20250
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/MetricBlock.module.scss
@@ -0,0 +1,37 @@
+.root {
+  display: grid;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.alignEnd {
+  justify-items: end;
+  text-align: end;
+}
+
+.label {
+  margin: 0;
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: 400;
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-weight: 600;
+}
+
+.valueDefault {
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+}
+
+.valueLg {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+}
diff --git a/frontend/src/shared/components/dashboard/typography/MetricBlock.tsx b/frontend/src/shared/components/dashboard/typography/MetricBlock.tsx
new file mode 100644
index 00000000..bc9ed1cf
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/MetricBlock.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import styles from "./MetricBlock.module.scss";
+
+export interface MetricBlockProps {
+  label: ReactNode;
+  value: ReactNode;
+  size?: "default" | "lg";
+  align?: "start" | "end";
+  trailing?: ReactNode;
+}
+
+export function MetricBlock({
+  label,
+  value,
+  size = "default",
+  align = "start",
+  trailing,
+}: MetricBlockProps) {
+  const valueClass = size === "lg" ? styles.valueLg : styles.valueDefault;
+  const rootClass = [styles.root, align === "end" && styles.alignEnd]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={rootClass}>
+      <span className={styles.label}>{label}</span>
+      <strong className={`${styles.value} ${valueClass}`}>
+        {value}
+        {trailing}
+      </strong>
+    </div>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/typography/PageTitle.module.scss b/frontend/src/shared/components/dashboard/typography/PageTitle.module.scss
new file mode 100644
index 00000000..8ee0157f
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/PageTitle.module.scss
@@ -0,0 +1,7 @@
+.root {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-04-font-size, 1.75rem);
+  font-weight: 400;
+  line-height: var(--cds-heading-04-line-height, 1.28572);
+}
diff --git a/frontend/src/shared/components/dashboard/typography/PageTitle.tsx b/frontend/src/shared/components/dashboard/typography/PageTitle.tsx
new file mode 100644
index 00000000..1ec382f9
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/PageTitle.tsx
@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import styles from "./PageTitle.module.scss";
+
+type Props<E extends ElementType> = {
+  as?: E;
+  children: ReactNode;
+} & Omit<
+  ComponentPropsWithoutRef<E>,
+  "as" | "children" | "className" | "style"
+>;
+
+export function PageTitle<E extends ElementType = "h1">({
+  as,
+  children,
+  ...rest
+}: Props<E>) {
+  const Tag = (as ?? "h1") as ElementType;
+  return (
+    <Tag className={styles.root} {...rest}>
+      {children}
+    </Tag>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/typography/SectionTitle.module.scss b/frontend/src/shared/components/dashboard/typography/SectionTitle.module.scss
new file mode 100644
index 00000000..4f05fec0
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/SectionTitle.module.scss
@@ -0,0 +1,7 @@
+.root {
+  margin: 0;
+  color: var(--cds-text-primary);
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+}
diff --git a/frontend/src/shared/components/dashboard/typography/SectionTitle.tsx b/frontend/src/shared/components/dashboard/typography/SectionTitle.tsx
new file mode 100644
index 00000000..6b089669
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/SectionTitle.tsx
@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+import styles from "./SectionTitle.module.scss";
+
+type Props<E extends ElementType> = {
+  as?: E;
+  children: ReactNode;
+} & Omit<
+  ComponentPropsWithoutRef<E>,
+  "as" | "children" | "className" | "style"
+>;
+
+export function SectionTitle<E extends ElementType = "h2">({
+  as,
+  children,
+  ...rest
+}: Props<E>) {
+  const Tag = (as ?? "h2") as ElementType;
+  return (
+    <Tag className={styles.root} {...rest}>
+      {children}
+    </Tag>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/typography/TimeDisplay.module.scss b/frontend/src/shared/components/dashboard/typography/TimeDisplay.module.scss
new file mode 100644
index 00000000..0937c6ba
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/TimeDisplay.module.scss
@@ -0,0 +1,29 @@
+.root {
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.label {
+  color: var(--cds-text-secondary);
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: 400;
+  line-height: var(--cds-label-01-line-height, 1.33333);
+}
+
+.value {
+  color: var(--cds-text-primary);
+  font-family: var(--cds-code-font-family, monospace);
+}
+
+.countdown {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: 600;
+  line-height: var(--cds-heading-03-line-height, 1.4);
+}
+
+.header {
+  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
+  font-weight: 400;
+  line-height: var(--cds-body-compact-01-line-height, 1.28572);
+}
diff --git a/frontend/src/shared/components/dashboard/typography/TimeDisplay.tsx b/frontend/src/shared/components/dashboard/typography/TimeDisplay.tsx
new file mode 100644
index 00000000..c6045ff1
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/TimeDisplay.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import styles from "./TimeDisplay.module.scss";
+
+export interface TimeDisplayProps {
+  value: ReactNode;
+  variant?: "countdown" | "header";
+  label?: ReactNode;
+}
+
+export function TimeDisplay({
+  value,
+  variant = "countdown",
+  label,
+}: TimeDisplayProps) {
+  const valueClass = variant === "header" ? styles.header : styles.countdown;
+  return (
+    <span className={styles.root}>
+      {label && <span className={styles.label}>{label}</span>}
+      <span className={`${styles.value} ${valueClass}`}>{value}</span>
+    </span>
+  );
+}
diff --git a/frontend/src/shared/components/dashboard/typography/index.ts b/frontend/src/shared/components/dashboard/typography/index.ts
new file mode 100644
index 00000000..b093402a
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/index.ts
@@ -0,0 +1,4 @@
+export { PageTitle } from "./PageTitle";
+export { SectionTitle } from "./SectionTitle";
+export { MetricBlock, type MetricBlockProps } from "./MetricBlock";
+export { TimeDisplay, type TimeDisplayProps } from "./TimeDisplay";
diff --git a/frontend/src/shared/components/dashboard/typography/typography.stories.tsx b/frontend/src/shared/components/dashboard/typography/typography.stories.tsx
new file mode 100644
index 00000000..7256536e
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/typography.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ArrowUp } from "@carbon/icons-react";
+import {
+  MetricBlock,
+  PageTitle,
+  SectionTitle,
+  TimeDisplay,
+} from "./index";
+
+const meta: Meta = {
+  title: "Dashboard/Typography",
+  parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Headings: Story = {
+  render: () => (
+    <div style={{ display: "grid", gap: "1rem" }}>
+      <PageTitle>2026 春季程式競賽</PageTitle>
+      <SectionTitle>參賽進度</SectionTitle>
+    </div>
+  ),
+};
+
+export const Metrics: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "2rem" }}>
+      <MetricBlock label="題目數量" value={12} />
+      <MetricBlock label="參賽人數" value={42} size="lg" />
+      <MetricBlock
+        label="完成率"
+        value="78%"
+        size="lg"
+        trailing={<ArrowUp size={16} />}
+      />
+      <MetricBlock label="剩餘" value="04:12" align="end" />
+    </div>
+  ),
+};
+
+export const Times: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "2rem", alignItems: "center" }}>
+      <TimeDisplay variant="countdown" value="01:23:45" label="剩餘時間" />
+      <TimeDisplay variant="header" value="14:05" />
+    </div>
+  ),
+};
diff --git a/frontend/src/shared/components/dashboard/typography/typography.test.tsx b/frontend/src/shared/components/dashboard/typography/typography.test.tsx
new file mode 100644
index 00000000..549bfb1b
--- /dev/null
+++ b/frontend/src/shared/components/dashboard/typography/typography.test.tsx
@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import {
+  MetricBlock,
+  PageTitle,
+  SectionTitle,
+  TimeDisplay,
+} from "./index";
+
+describe("PageTitle", () => {
+  it("defaults to h1", () => {
+    render(<PageTitle>Hello</PageTitle>);
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Hello");
+  });
+
+  it("respects as prop", () => {
+    render(<PageTitle as="h2">Hello</PageTitle>);
+    expect(screen.getByRole("heading", { level: 2 })).toBeInTheDocument();
+  });
+});
+
+describe("SectionTitle", () => {
+  it("defaults to h2", () => {
+    render(<SectionTitle>Section</SectionTitle>);
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent("Section");
+  });
+
+  it("respects as prop", () => {
+    render(<SectionTitle as="h3">S</SectionTitle>);
+    expect(screen.getByRole("heading", { level: 3 })).toBeInTheDocument();
+  });
+});
+
+describe("MetricBlock", () => {
+  it("renders label and value", () => {
+    render(<MetricBlock label="參賽人數" value={42} />);
+    expect(screen.getByText("參賽人數")).toBeInTheDocument();
+    expect(screen.getByText("42")).toBeInTheDocument();
+  });
+
+  it("renders trailing slot", () => {
+    render(
+      <MetricBlock
+        label="x"
+        value="y"
+        trailing={<span data-testid="trail">T</span>}
+      />,
+    );
+    expect(screen.getByTestId("trail")).toBeInTheDocument();
+  });
+});
+
+describe("TimeDisplay", () => {
+  it("renders value", () => {
+    render(<TimeDisplay value="01:23:45" />);
+    expect(screen.getByText("01:23:45")).toBeInTheDocument();
+  });
+
+  it("renders optional label", () => {
+    render(<TimeDisplay value="01:23:45" label="剩餘時間" />);
+    expect(screen.getByText("剩餘時間")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/shared/mocks/contest.mock.ts b/frontend/src/shared/mocks/contest.mock.ts
index 85730178..a614f844 100644
--- a/frontend/src/shared/mocks/contest.mock.ts
+++ b/frontend/src/shared/mocks/contest.mock.ts
@@ -54,7 +54,6 @@ export const createMockContest = (
   warningTimeoutSeconds: 20,
   screenShareRecoveryGraceMs: 30000,
   scoreboardVisibleDuringContest: false,
-  anonymousModeEnabled: false,
   allowMultipleJoins: false,
   maxCheatWarnings: 3,
   allowAutoUnlock: true,
diff --git a/frontend/src/shared/ui/list/ListPanel.module.scss b/frontend/src/shared/ui/list/ListPanel.module.scss
index 95fa7e7d..32744630 100644
--- a/frontend/src/shared/ui/list/ListPanel.module.scss
+++ b/frontend/src/shared/ui/list/ListPanel.module.scss
@@ -15,6 +15,7 @@
   flex: 1;
   min-height: 0;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 // ─── Header ─────────────────────────────────────────────────
@@ -93,10 +94,15 @@
 
 // Compact / mini variant
 .itemCompact {
+  box-sizing: border-box;
   height: 2.5rem;
   min-height: 2.5rem;
   max-height: 2.5rem;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
   padding: 0;
+  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/shared/ui/list/ListPanel.tsx b/frontend/src/shared/ui/list/ListPanel.tsx
index b1e3e07f..d0a61f56 100644
--- a/frontend/src/shared/ui/list/ListPanel.tsx
+++ b/frontend/src/shared/ui/list/ListPanel.tsx
@@ -11,15 +11,17 @@ export const ListPanel = ({
   header,
   footer,
   className,
+  scrollAreaClassName,
 }: {
   children: ReactNode;
   header?: ReactNode;
   footer?: ReactNode;
   className?: string;
+  scrollAreaClassName?: string;
 }) => (
   <div className={cx(styles.panel, className)}>
     {header}
-    <div className={styles.scrollArea}>{children}</div>
+    <div className={cx(styles.scrollArea, scrollAreaClassName)}>{children}</div>
     {footer}
   </div>
 );