diff --git a/src/views/AttendanceRecordView.vue b/src/views/AttendanceRecordView.vue
index 49f0dc8..55eb00d 100644
--- a/src/views/AttendanceRecordView.vue
+++ b/src/views/AttendanceRecordView.vue
@@ -47,46 +47,48 @@
         <button @click="fetchRecords" class="button-primary">Filter Records</button>
       </div>
 
-      <table>
-        <thead>
-          <tr>
-            <th>Event</th>
-            <th>Timestamp</th>
-            <th>Location Name</th>
-            <th>Coordinates</th>
-            <th>Notes</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-if="!records.length">
-            <td colspan="5" style="text-align: center; padding: 2rem">
-              No records found for this period.
-            </td>
-          </tr>
-          <tr v-for="record in records" :key="record.id">
-            <td>
-              <span class="event-type" :class="record.event_type">{{
-                record.event_type.replace('_', ' ')
-              }}</span>
-            </td>
-            <td>{{ new Date(record.timestamp).toLocaleString() }}</td>
-            <td>{{ record.qrCodeUsedName }}</td>
-            <td>
-              <a
-                v-if="record.latitude && record.longitude"
-                :href="`https://www.google.com/maps?q=${record.latitude},${record.longitude}`"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="map-link"
-              >
-                Show on map
-              </a>
-              <span v-else>N/A</span>
-            </td>
-            <td>{{ record.notes || 'N/A' }}</td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="table-responsive">
+        <table>
+          <thead>
+            <tr>
+              <th>Event</th>
+              <th>Timestamp</th>
+              <th>Location Name</th>
+              <th>Coordinates</th>
+              <th>Notes</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="!records.length">
+              <td colspan="5" style="text-align: center; padding: 2rem">
+                No records found for this period.
+              </td>
+            </tr>
+            <tr v-for="record in records" :key="record.id">
+              <td>
+                <span class="event-type" :class="record.event_type">{{
+                  record.event_type.replace('_', ' ')
+                }}</span>
+              </td>
+              <td>{{ new Date(record.timestamp).toLocaleString() }}</td>
+              <td>{{ record.qrCodeUsedName }}</td>
+              <td>
+                <a
+                  v-if="record.latitude && record.longitude"
+                  :href="`https://www.google.com/maps?q=${record.latitude},${record.longitude}`"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="map-link"
+                >
+                  Show on map
+                </a>
+                <span v-else>N/A</span>
+              </td>
+              <td>{{ record.notes || 'N/A' }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   </div>
 </template>
@@ -224,8 +226,8 @@ onMounted(() => {
 }
 /* New styles for manual entry card */
 .manual-entry-card {
-  background-color: #f9f9f9;
-  border: 1px solid #e0e0e0;
+  background-color: var(--c-bg-secondary); /* Use theme variable */
+  border: 1px solid var(--c-border); /* Use theme variable */
   border-radius: 8px;
   padding: 1rem 1.5rem;
   margin-bottom: 1.5rem;
@@ -233,10 +235,11 @@ onMounted(() => {
 .manual-entry-header {
   margin-top: 0;
   margin-bottom: 0.25rem;
+  color: var(--c-text-primary); /* Ensure text color adapts */
 }
 .manual-entry-desc {
   font-size: 0.9rem;
-  color: #666;
+  color: var(--c-text-secondary); /* Ensure text color adapts */
   margin-top: 0;
   margin-bottom: 1rem;
 }
@@ -252,7 +255,7 @@ onMounted(() => {
   align-items: flex-end;
   margin-bottom: 1.5rem;
   padding-top: 1rem;
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--c-border); /* Use theme variable */
 }
 .form-group {
   display: flex;
@@ -281,4 +284,45 @@ onMounted(() => {
 .map-link:hover {
   color: var(--c-primary-dark);
 }
+
+/* Added responsive table container */
+.table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
+}
+
+/* Responsive styles */
+@media (max-width: 768px) {
+  .attendance-container {
+    max-width: 100%;
+    padding: 0 1rem; /* Add horizontal padding for smaller screens */
+  }
+
+  .manual-entry-form,
+  .filters {
+    flex-direction: column; /* Stack items vertically */
+    align-items: stretch; /* Stretch items to full width */
+  }
+
+  .manual-entry-form .form-group,
+  .filters .form-group {
+    width: 100%; /* Make form groups take full width */
+  }
+
+  .manual-entry-form button,
+  .filters button {
+    width: 100%; /* Make buttons take full width */
+    margin-top: 0.5rem; /* Add some space above buttons when stacked */
+  }
+
+  /* Adjust table font size for smaller screens if needed */
+  table {
+    font-size: 0.9rem;
+  }
+
+  th,
+  td {
+    padding: 8px 10px; /* Reduce padding for table cells */
+  }
+}
 </style>