diff --git a/app/frontend/stylesheets/application.tailwind.css b/app/frontend/stylesheets/application.tailwind.css
index 5032fec7e..b1732c447 100644
--- a/app/frontend/stylesheets/application.tailwind.css
+++ b/app/frontend/stylesheets/application.tailwind.css
@@ -255,6 +255,49 @@ textarea.comment-truncated:focus {
   color: white !important;
 }
 
+/* Responsive table: Kevin Powell card-based approach for small screens */
+@media (max-width: 767px) {
+  .responsive-table thead {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  .responsive-table tbody {
+    display: block;
+  }
+
+  .responsive-table tr {
+    display: block;
+    border-bottom: 2px solid #e5e7eb;
+    padding: 0.75rem 0;
+    margin-bottom: 0.5rem;
+  }
+
+  .responsive-table td {
+    display: grid;
+    grid-template-columns: 8rem 1fr;
+    gap: 0.5rem;
+    padding: 0.35rem 1rem;
+    text-align: left;
+    border: none;
+  }
+
+  .responsive-table td::before {
+    content: attr(data-label);
+    font-weight: 600;
+    font-size: 0.75rem;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+}
+
 /* Turbo progress bar */
 .turbo-progress-bar {
   height: 7px;
diff --git a/app/views/admin/ahoy_activities/index.html.erb b/app/views/admin/ahoy_activities/index.html.erb
index 40f817eb7..83fda3398 100644
--- a/app/views/admin/ahoy_activities/index.html.erb
+++ b/app/views/admin/ahoy_activities/index.html.erb
@@ -113,8 +113,8 @@
       </div>
 
       <!-- Events Table -->
-      <div class="bg-white border border-gray-200 rounded-xl shadow-sm">
-        <table class="min-w-full divide-y divide-gray-200 text-sm">
+      <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-x-auto">
+        <table class="responsive-table min-w-full divide-y divide-gray-200 text-sm">
           <thead class="bg-gray-50 text-gray-600 uppercase tracking-wider text-xs">
           <tr>
             <th class="px-4 py-3 text-left rounded-tl-xl">Time</th>
@@ -129,19 +129,19 @@
           <tbody class="divide-y divide-gray-100">
           <% @events.each do |event| %>
             <tr class="hover:bg-gray-50 transition">
-              <td class="px-4 py-3 whitespace-nowrap text-gray-500">
+              <td data-label="Time" class="px-4 py-3 whitespace-nowrap text-gray-500">
                 <%= event.time.in_time_zone.strftime("%Y-%m-%d %H:%M %Z") %>
               </td>
 
-              <td class="px-4 py-3 font-medium text-gray-900">
+              <td data-label="Event" class="px-4 py-3 font-medium text-gray-900">
                 <%= event.name %>
               </td>
 
-              <td class="px-4 py-3 text-gray-500">
+              <td data-label="Resource" class="px-4 py-3 text-gray-500">
                 <%= event.properties["resource_title"].presence || "—" %>
               </td>
 
-              <td class="px-4 py-3 text-gray-600">
+              <td data-label="User" class="px-4 py-3 text-gray-600">
                 <% if event.user %>
                   <%= link_to event.user.full_name,
                               user_path(event.user),
@@ -151,11 +151,11 @@
                 <% end %>
               </td>
 
-              <td class="px-4 py-3 text-gray-500">
+              <td data-label="Visit ID" class="px-4 py-3 text-gray-500">
                 <%= event.visit_id %>
               </td>
 
-              <td class="px-4 py-3 text-gray-500 relative group">
+              <td data-label="Properties" class="px-4 py-3 text-gray-500 relative group">
                 <% if event.properties.present? && event.properties.any? %>
                   <%= link_to admin_activities_event_path(event),
                               class: "cursor-default text-indigo-600 text-xs font-medium bg-indigo-50 px-2 py-0.5 rounded hover:bg-indigo-100" do %>