diff --git a/app/views/attendance_tracker/_lecture_status_icons.html.erb b/app/views/attendance_tracker/_lecture_status_icons.html.erb
new file mode 100644
index 0000000..a3233c4
--- /dev/null
+++ b/app/views/attendance_tracker/_lecture_status_icons.html.erb
@@ -0,0 +1,47 @@
+<div class="flex flex-row gap-2">
+  <% prep_icon_class = if lecture.prepared?
+                         'text-green-700'
+                       else
+                         'text-slate-300'
+                       end %>
+  <i class="fa fa-hourglass-start <%= prep_icon_class %>"></i>
+
+  <% if lecture.attended? %>
+    <% if lecture.entirely_attended_in_person? %>
+      <i class="fa fa-chalkboard-user text-green-700"></i>
+    <% else %>
+      <i class="fa fa-video text-green-700"></i>
+    <% end %>
+  <% elsif lecture.is_live? %>
+    <i class="fa fa-video text-blue-700"></i>
+  <% elsif lecture.start_time.past? %>
+    <i class="fa fa-times text-red-700"></i>
+  <% else %>
+    <div class="flex-grow"></div>
+  <% end %>
+
+  <% reviewed_icon_class = if lecture.start_time.future?
+                             'invisible'
+                           elsif lecture.reviewed?
+                             'text-green-700'
+                           else
+                             'text-slate-300'
+                           end %>
+  <i class="fa fa-hourglass-end <%= reviewed_icon_class %>"></i>
+</div>
+
+<template data-popover-target="content">
+  <% unless lecture.tracked_time_entries.empty? %>
+    <div class="absolute p-1 w-max whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white   text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none" data-popover-target="card">
+      <div>
+        Preparation: <%= humanise_duration(lecture.total_preparation_time) %>
+      </div>
+      <div>
+        In lecture: <%= humanise_duration(lecture.total_attendance_time) %>
+      </div>
+      <div>
+        Review: <%= humanise_duration(lecture.total_review_time) %>
+      </div>
+    </div>
+  <% end %>
+</template>
\ No newline at end of file
diff --git a/app/views/attendance_tracker/today.html.erb b/app/views/attendance_tracker/today.html.erb
index acaf600..96f5e5f 100644
--- a/app/views/attendance_tracker/today.html.erb
+++ b/app/views/attendance_tracker/today.html.erb
@@ -5,81 +5,34 @@
     <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
       <div class="inline-block py-2 align-middle px-6 lg:px-8 w-full">
         <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
-          <table class="divide-y divide-gray-300 w-full">
-            <thead class="bg-gray-50">
-            <tr>
-              <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Course</th>
-              <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Lecture</th>
-              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Status</th>
-              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Action</th>
-              <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"></th>
-            </tr>
-            </thead>
+          <div class="divide-y divide-gray-300 w-full">
+            <div class="flex py-3.5 justify-between bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6">
+              <div>Course</div>
+              <div>Lecture</div>
+              <div>Status</div>
+              <div>Action</div>
+            </div>
 
-            <tbody class="divide-y divide-gray-200 bg-white">
             <% @lectures.each do |lecture| %>
-              <tr class="<%= class_names({
-                                           'lecture-future': lecture.start_time.future?,
-                                           'bg-green-100': lecture.attended?,
-                                         }) %>">
-                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+              <% status_classes = class_names({
+                                                'lecture-future': lecture.start_time.future?,
+                                                'bg-green-100': lecture.attended?,
+                                              }) %>
+
+              <div class="<%= status_classes %> py-4 flex justify-between divide-y divide-gray-200 bg-white items-center">
+                <div class="whitespace-nowrap text-sm font-medium text-gray-900 sm:pl-6">
                   <%= lecture.course.title %>
-                </td>
-                <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
+                </div>
+
+                <div class="whitespace-nowrap text-sm font-medium text-gray-900 sm:pl-6">
                   <%= lecture.title %>
-                </td>
+                </div>
 
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
-                  <div class="flex flex-row gap-2">
-                    <% prep_icon_class = if lecture.prepared?
-                                           'text-green-700'
-                                         else
-                                           'text-slate-300'
-                                         end %>
-                    <i class="fa fa-hourglass-start <%= prep_icon_class %>"></i>
+                <div class="whitespace-nowrap text-sm font-medium text-gray-900 sm:pl-6" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
+                  <%= render partial: 'lecture_status_icons', locals: { lecture: } %>
+                </div>
 
-                    <% if lecture.attended? %>
-                      <% if lecture.entirely_attended_in_person? %>
-                        <i class="fa fa-chalkboard-user text-green-700"></i>
-                      <% else %>
-                        <i class="fa fa-video text-green-700"></i>
-                      <% end %>
-                    <% elsif lecture.is_live? %>
-                      <i class="fa fa-video text-blue-700"></i>
-                    <% elsif lecture.start_time.past? %>
-                      <i class="fa fa-times text-red-700"></i>
-                    <% else %>
-                      <div class="flex-grow"></div>
-                    <% end %>
-
-                    <% reviewed_icon_class = if lecture.start_time.future?
-                                               'invisible'
-                                             elsif lecture.reviewed?
-                                               'text-green-700'
-                                             else
-                                               'text-slate-300'
-                                             end %>
-                    <i class="fa fa-hourglass-end <%= reviewed_icon_class %>"></i>
-                  </div>
-
-                  <template data-popover-target="content">
-                    <% unless lecture.tracked_time_entries.empty? %>
-                      <div class="absolute p-1 w-max whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white   text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none" data-popover-target="card">
-                        <div>
-                          Preparation: <%= humanise_duration(lecture.total_preparation_time) %>
-                        </div>
-                        <div>
-                          In lecture: <%= humanise_duration(lecture.total_attendance_time) %>
-                        </div>
-                        <div>
-                          Review: <%= humanise_duration(lecture.total_review_time) %>
-                        </div>
-                      </div>
-                    <% end %>
-                  </template>
-                </td>
-
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                <div class="whitespace-nowrap text-sm font-medium text-gray-900 sm:pl-6">
                   <% joinable_time = lecture.start_time - 5.minutes %>
                   <% if joinable_time.future? %>
                     <%= button_to "Prepare",
@@ -104,17 +57,16 @@
                       %>
                     </div>
                   <% end %>
-                </td>
+                </div>
 
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+                <div class="whitespace-nowrap text-sm font-medium text-gray-900 sm:pl-6">
                   <% if lecture.recording %>
                     <%= link_to "Open recording", lecture.recording&.recording_url %>
                   <% end %>
-                </td>
-              </tr>
+                </div>
+              </div>
             <% end %>
-            </tbody>
-          </table>
+          </div>
         </div>
       </div>
     </div>
diff --git a/app/views/lectures/_lecture.html.erb b/app/views/lectures/_lecture.html.erb
index 67b1597..9a303f0 100644
--- a/app/views/lectures/_lecture.html.erb
+++ b/app/views/lectures/_lecture.html.erb
@@ -10,53 +10,7 @@
   </td>
 
   <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
-    <div class="flex flex-row gap-2">
-      <% prep_icon_class = if lecture.prepared?
-                             'text-green-700'
-                           else
-                             'text-slate-300'
-                           end %>
-      <i class="fa fa-hourglass-start <%= prep_icon_class %>"></i>
-
-      <% if lecture.attended? %>
-        <% if lecture.entirely_attended_in_person? %>
-          <i class="fa fa-chalkboard-user text-green-700"></i>
-        <% else %>
-          <i class="fa fa-video text-green-700"></i>
-        <% end %>
-      <% elsif lecture.is_live? %>
-        <i class="fa fa-video text-blue-700"></i>
-      <% elsif lecture.start_time.past? %>
-        <i class="fa fa-times text-red-700"></i>
-      <% else %>
-        <div class="flex-grow"></div>
-      <% end %>
-
-      <% reviewed_icon_class = if lecture.start_time.future?
-                                 'invisible'
-                               elsif lecture.reviewed?
-                                 'text-green-700'
-                               else
-                                 'text-slate-300'
-                               end %>
-      <i class="fa fa-hourglass-end <%= reviewed_icon_class %>"></i>
-    </div>
-
-    <template data-popover-target="content">
-      <% unless lecture.tracked_time_entries.empty? %>
-        <div class="absolute p-1 w-max whitespace-normal break-words rounded-lg border border-blue-gray-50 bg-white   text-blue-gray-500 shadow-lg shadow-blue-gray-500/10 focus:outline-none" data-popover-target="card">
-          <div>
-            Preparation: <%= humanise_duration(lecture.total_preparation_time) %>
-          </div>
-          <div>
-            In lecture: <%= humanise_duration(lecture.total_attendance_time) %>
-          </div>
-          <div>
-            Review: <%= humanise_duration(lecture.total_review_time) %>
-          </div>
-        </div>
-      <% end %>
-    </template>
+    <%= render partial: 'lecture_status_icons', locals: { lecture: } %>
   </td>
 
   <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">