diff --git a/frontend/styles/header.css b/frontend/styles/header.css
index 3b96b45..a9c90d0 100644
--- a/frontend/styles/header.css
+++ b/frontend/styles/header.css
@@ -152,6 +152,20 @@
 
     white-space: nowrap;
 
+<<<<<<< codex/reduce-header-height-for-better-ux-d99l1w
+    flex: 1 1 auto;
+
+    min-width: 0;
+
+}
+
+.subtitle-row {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    min-width: 0;
+=======
+>>>>>>> dev
 }
 
 
@@ -162,7 +176,7 @@
 
     display: flex;
 
-    align-items: center;
+    align-items: flex-end;
 
     gap: 10px;
 
@@ -185,6 +199,19 @@
 .header-status-badge {
     display: none;
     align-items: center;
+<<<<<<< codex/reduce-header-height-for-better-ux-d99l1w
+    min-height: 18px;
+    padding: 1px 6px;
+    border: 1px solid var(--color-warning-muted);
+    border-radius: var(--radius-pill);
+    color: var(--color-warning);
+    background: color-mix(in srgb, var(--color-warning-muted) 40%, transparent);
+    font-size: 10px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    flex-shrink: 0;
+=======
     min-height: 24px;
     padding: 2px 8px;
     border: 1px solid var(--color-warning-muted);
@@ -195,6 +222,7 @@
     font-weight: 500;
     line-height: 1.2;
     white-space: nowrap;
+>>>>>>> dev
 }
 
 body.read-only-mode .header-status-badge {
@@ -220,6 +248,8 @@ body.read-only-mode .header-status-badge {
 
     border-right: 1px solid var(--color-border-subtle);
 
+    align-items: flex-end;
+
 }
 
 
@@ -248,7 +278,9 @@ body.read-only-mode .header-status-badge {
 
     font-weight: 500;
 
-    color: var(--color-text-secondary);
+    color: var(--color-text-muted);
+
+    opacity: 0.78;
 
     font-variant-numeric: tabular-nums;
 
diff --git a/public/index.html b/public/index.html
index 2acd0dd..4b57e2e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
     </noscript>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>
     <script src="/theme-init.js"></script>
-    <link rel="stylesheet" href="/dist/main-CYN_M65J.css" id="vite-css">
+    <link rel="stylesheet" href="/dist/main-D-IViaAQ.css" id="vite-css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico">
 </head>
 
@@ -70,7 +70,10 @@ <h2>中大壢中成績分析平台</h2>
                     </div>
                     <div class="logo-text header-title-group">
                         <h1>成績分析平台</h1>
-                        <p class="subtitle" id="examTitle">--</p>
+                        <div class="subtitle-row">
+                            <p class="subtitle" id="examTitle">--</p>
+                            <span class="header-status-badge" id="headerStatusBadge" aria-live="polite"></span>
+                        </div>
                     </div>
                 </div>
                 <div class="data-time-box">
@@ -525,7 +528,7 @@ <h3 class="section-title">
         </footer>
     </div>
 
-    <script type="module" src="/dist/main-AkA2Ib98.js"></script>
+    <script type="module" src="/dist/main-eCe3WGCp.js"></script>
 </body>
 
 </html>