diff --git a/templates/index.html b/templates/index.html
index 0b29b3a..7363a73 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,22 +2,40 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Sport Attendance Sheet</title>
     <style>
         body { font-family: Arial, sans-serif; margin: 2em; }
-        table { border-collapse: collapse; width: 100%; margin-bottom: 1em; }
+        .table-container { width: 100%; overflow-x: auto; }
+        table { border-collapse: collapse; width: 100%; min-width: 700px; margin-bottom: 1em; }
         th, td { border: 1px solid #ccc; padding: 0.5em; text-align: center; }
         th { background: #f0f0f0; }
         .clickable { cursor: pointer; background: #e7f7e7; }
         .yes { background: #b6e7b6; font-weight: bold; }
         input[type="text"] { width: 90%; }
         #add-date { margin-top: 1em; }
-        .name-col { width: 140px; min-width: 140px; max-width: 140px; }
+        .name-col { width: 140px; min-width: 100px; max-width: 180px; }
+        @media (max-width: 900px) {
+            body { margin: 1em; }
+            .name-col { width: 110px; min-width: 80px; max-width: 140px; font-size: 0.95em; }
+            th, td { padding: 0.3em; }
+            table { min-width: 600px; }
+        }
+        @media (max-width: 600px) {
+            body { margin: 0.5em; }
+            h1 { font-size: 1.2em; }
+            .name-col { width: 90px; min-width: 70px; max-width: 110px; font-size: 0.9em; }
+            th, td { padding: 0.2em; font-size: 0.9em; }
+            table { min-width: 400px; }
+        }
+    </style>
     </style>
 </head>
 <body>
     <h1>Sport Attendance Sheet</h1>
-    <div id="attendance-table"></div>
+    <div class="table-container">
+        <div id="attendance-table"></div>
+    </div>
     <button id="add-date">Add Date</button>
     <script src="/static/app.js"></script>
 </body>
