diff --git a/views/checkin-result.ejs b/views/checkin-result.ejs
index 5ac5a82..e5f2360 100644
--- a/views/checkin-result.ejs
+++ b/views/checkin-result.ejs
@@ -12,11 +12,16 @@
       background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
       min-height: 100vh;
       display: flex;
-      align-items: center;
-      justify-content: center;
+      flex-direction: column;
       padding: 20px;
       color: #333;
     }
+    .checkin-main {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
     .card {
       background: #fff;
       border-radius: 12px;
@@ -45,14 +50,21 @@
     .card.success h1 { color: #27ae60; }
     .card.error .icon { color: #e74c3c; }
     .card.error h1 { color: #e74c3c; }
+    .app-footer {
+      width: 100%;
+      text-align: center;
+      color: rgba(255, 255, 255, 0.95);
+    }
   </style>
 </head>
 <body>
-  <div class="card <%= success ? 'success' : 'error' %>">
-    <div class="icon" aria-hidden="true"><%= success ? '✓' : '!' %></div>
-    <h1><%= title %></h1>
-    <p class="message"><%= message %></p>
-  </div>
+  <main class="checkin-main">
+    <div class="card <%= success ? 'success' : 'error' %>">
+      <div class="icon" aria-hidden="true"><%= success ? '✓' : '!' %></div>
+      <h1><%= title %></h1>
+      <p class="message"><%= message %></p>
+    </div>
+  </main>
   <%- include('footer') %>
 </body>
 </html>
