diff --git a/app/views/attendance_tracker/_course_table.erb b/app/views/attendance_tracker/_course_table.erb
index caa233a..a144479 100644
--- a/app/views/attendance_tracker/_course_table.erb
+++ b/app/views/attendance_tracker/_course_table.erb
@@ -1,42 +1,27 @@
 <div class="divide-y divide-gray-300 w-full">
-  <div class="py-3.5 justify-between bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-4">
+  <div class="py-3.5 justify-between bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-5">
     <div>Lecture</div>
+    <div>Date</div>
     <div>Status</div>
     <div>Action</div>
     <div>Recording</div>
   </div>
 
   <% course.lectures.sort_by(&:start_time).group_by(&:week_number).each do |(week_number, lectures)| %>
-    <div class="py-3.5 bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 grid grid-cols-4">
+    <div class="py-3.5 bg-gray-50 text-left text-sm font-semibold text-gray-900 px-6 flex flex-row justify-between">
       Week <%= week_number %>
+
+      <div>
+        <% total_for_week = lectures.sum { |lecture| lecture.total_overall_time }.seconds %>
+        <%# TODO: Improve this figure, atm it is for lectures in week, not time spent in week (ie
+                             prepping for lecture next week will count in next week not current week) %>
+        <% if total_for_week > 0 %>
+          (Total <%= humanise_duration(lectures.sum { |lecture| lecture.total_overall_time }.seconds) %>
+          )
+        <% end %>
+      </div>
     </div>
 
-    <% lectures.each do |lecture| %>
-      <% status_classes = class_names({
-                                        'lecture-future': lecture.start_time.future?,
-                                        'bg-purple-100': lecture == @current_lecture,
-                                        'bg-green-100': lecture.attended?,
-                                      }) %>
-
-      <div class="<%= status_classes %> px-6 py-4 flex justify-between items-center grid grid-cols-4">
-        <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-          <%= lecture.title %>
-        </div>
-
-        <div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
-          <%= render partial: 'lecture_status_icons', locals: { lecture: } %>
-        </div>
-
-        <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-          <%= render partial: 'lecture_action', locals: { lecture: } %>
-        </div>
-
-        <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-          <% if lecture.recording %>
-            <%= link_to "Open recording", lecture.recording&.recording_url %>
-          <% end %>
-        </div>
-      </div>
-    <% end %>
+    <%= render lectures, { div: true } %>
   <% end %>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views/attendance_tracker/course_focus.html.erb b/app/views/attendance_tracker/course_focus.html.erb
index 737bed4..6afe7f6 100644
--- a/app/views/attendance_tracker/course_focus.html.erb
+++ b/app/views/attendance_tracker/course_focus.html.erb
@@ -8,14 +8,6 @@
   <% end %>
 </div>
 
-<div class="flex flex-col gap-4">
-  <div class="mt-8 flow-root">
-    <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">
-          <%= render partial: 'course_table', locals: { course: @course, current_lecture: @current_lecture } %>
-        </div>
-      </div>
-    </div>
-  </div>
+<div class="mx-10 mt-4 shadow ring-1 ring-black ring-opacity-5 rounded-lg">
+  <%= render partial: 'course_table', locals: { course: @course, current_lecture: @current_lecture } %>
 </div>
diff --git a/app/views/attendance_tracker/overview.erb b/app/views/attendance_tracker/overview.erb
index 048bc38..5464086 100644
--- a/app/views/attendance_tracker/overview.erb
+++ b/app/views/attendance_tracker/overview.erb
@@ -2,13 +2,21 @@
   <h1 class="text-3xl font-medium">Overview</h1>
 </div>
 
-<div class="grid grid-cols-2 gap-2">
+<div class="flex flex-row flex-wrap gap-4 justify-around">
   <% @courses.each do |course| %>
-    <div class="mt-4 py-2">
-      <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 rounded-lg">
-        <div class="divide-y divide-gray-300 w-full">
-          <%= render partial: 'course_table', locals: { course: course } %>
-        </div>
+    <div class="min-w-[350px] sm:min-w-[500px] flex-grow max-w-lg">
+      <div class="flex flex-row gap-2 items-center">
+        <h1 class="text-xl font-medium"><%= course.title %></h1>
+
+        <% if course.homepage.present? %>
+          <a class="align-middle" href="<%= course.homepage %>">
+            <i class="fa fa-link text-blue-600"></i>
+          </a>
+        <% end %>
+      </div>
+
+      <div class="mt-4 shadow ring-1 ring-black ring-opacity-5 rounded-lg">
+        <%= render partial: 'course_table', locals: { course: course, current_lecture: @current_lecture } %>
       </div>
     </div>
   <% end %>
diff --git a/app/views/attendance_tracker/today.html.erb b/app/views/attendance_tracker/today.html.erb
index 894c501..1fa3a0f 100644
--- a/app/views/attendance_tracker/today.html.erb
+++ b/app/views/attendance_tracker/today.html.erb
@@ -27,11 +27,11 @@
           </div>
 
           <div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
-            <%= render partial: 'lecture_status_icons', locals: { lecture: } %>
+            <%= render partial: 'lectures/lecture_status_icons', locals: { lecture: } %>
           </div>
 
           <div class="whitespace-nowrap text-sm font-medium text-gray-900">
-            <%= render partial: 'lecture_action', locals: { lecture: } %>
+            <%= render partial: 'lectures/lecture_action', locals: { lecture: } %>
           </div>
         </div>
       <% end %>
diff --git a/app/views/lectures/_lecture.html.erb b/app/views/lectures/_lecture.html.erb
index dc743ac..295fbbb 100644
--- a/app/views/lectures/_lecture.html.erb
+++ b/app/views/lectures/_lecture.html.erb
@@ -1,63 +1,109 @@
-<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">
-    <%= lecture.title %>
+<% if local_assigns[:div] %>
+  <% status_classes = class_names({
+                                    'lecture-future': lecture.start_time.future?,
+                                    'bg-purple-100': lecture == @current_lecture,
+                                    'bg-green-100': lecture.attended?,
+                                  }) %>
 
-    <% if lecture.online %>
-      <i class="fa fa-solid fa-globe text-gray-500"></i>
-    <% end %>
-  </td>
+  <div class="<%= status_classes %> px-6 py-4 flex justify-between items-center grid grid-cols-5">
+    <div class="whitespace-nowrap text-sm font-medium text-gray-900">
+      <%= lecture.title %>
 
-  <td
-    class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
-    data-controller="popover"
-    data-action="mouseenter->popover#show mouseleave->popover#hide"
-  >
-    <%= lecture.start_time.to_fs(:dmy) %>
+      <% if lecture.online %>
+        <i class="fa fa-solid fa-globe text-gray-500"></i>
+      <% end %>
+    </div>
 
-    <template data-popover-target="content">
-      <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">
-        <%= lecture.start_time.to_fs(:time) %> &dash; <%= lecture.end_time.to_fs(:time) %>
-      </div>
-    </template>
-  </td>
+    <div
+      class="whitespace-nowrap text-sm text-gray-500"
+      data-controller="popover"
+      data-action="mouseenter->popover#show mouseleave->popover#hide"
+    >
+      <%= lecture.start_time.to_fs(:dmy) %>
 
-  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
-    <%= render partial: 'lecture_status_icons', locals: { lecture: } %>
-  </td>
+      <template data-popover-target="content">
+        <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">
+          <%= lecture.start_time.to_fs(:time) %> &dash; <%= lecture.end_time.to_fs(:time) %>
+        </div>
+      </template>
+    </div>
 
-  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-    <% joinable_time = lecture.start_time - 5.minutes %>
-    <% if joinable_time.future? %>
-      <%= button_to "Prepare",
-                    lecture_start_preparation_path(id: lecture.id),
-                    class: 'action-button'
-      %>
-    <% elsif joinable_time.past? && !lecture.attended? %>
-      <% start_label = if lecture.is_live? then
-                         "Join"
-                       else
-                         "Start"
-                       end %>
-      <%= button_to start_label,
-                    lectures_start_path(id: lecture.id),
-                    class: 'action-button'
-      %>
-    <% else %>
-      <div class="flex justify-center">
-        <%= button_to "Review",
-                      lecture_start_review_path(id: lecture.id),
+    <div class="whitespace-nowrap text-sm font-medium text-gray-900" data-controller="popover" data-action="mouseenter->popover#show mouseleave->popover#hide">
+      <%= render partial: 'lectures/lecture_status_icons', locals: { lecture: } %>
+    </div>
+
+    <div class="whitespace-nowrap text-sm font-medium text-gray-900">
+      <%= render partial: 'lectures/lecture_action', locals: { lecture: } %>
+    </div>
+
+    <div class="whitespace-nowrap text-sm font-medium text-gray-900">
+      <% if lecture.recording %>
+        <%= link_to "Open recording", lecture.recording&.recording_url %>
+      <% end %>
+    </div>
+  </div>
+<% else %>
+  <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">
+      <%= lecture.title %>
+
+      <% if lecture.online %>
+        <i class="fa fa-solid fa-globe text-gray-500"></i>
+      <% end %>
+    </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"
+    >
+      <%= lecture.start_time.to_fs(:dmy) %>
+
+      <template data-popover-target="content">
+        <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">
+          <%= lecture.start_time.to_fs(:time) %> &dash; <%= lecture.end_time.to_fs(:time) %>
+        </div>
+      </template>
+    </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">
+      <%= render partial: 'lectures/lecture_status_icons', locals: { lecture: } %>
+    </td>
+
+    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+      <% joinable_time = lecture.start_time - 5.minutes %>
+      <% if joinable_time.future? %>
+        <%= button_to "Prepare",
+                      lecture_start_preparation_path(id: lecture.id),
                       class: 'action-button'
         %>
-      </div>
-    <% end %>
-  </td>
+      <% elsif joinable_time.past? && !lecture.attended? %>
+        <% start_label = if lecture.is_live? then
+                           "Join"
+                         else
+                           "Start"
+                         end %>
+        <%= button_to start_label,
+                      lectures_start_path(id: lecture.id),
+                      class: 'action-button'
+        %>
+      <% else %>
+        <div class="flex justify-center">
+          <%= button_to "Review",
+                        lecture_start_review_path(id: lecture.id),
+                        class: 'action-button'
+          %>
+        </div>
+      <% end %>
+    </td>
 
-  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
-    <% if lecture.recording %>
-      <%= link_to "Open recording", lecture.recording&.recording_url %>
-    <% end %>
-  </td>
-</tr>
+    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
+      <% if lecture.recording %>
+        <%= link_to "Open recording", lecture.recording&.recording_url %>
+      <% end %>
+    </td>
+  </tr>
+<% end %>
diff --git a/app/views/attendance_tracker/_lecture_action.html.erb b/app/views/lectures/_lecture_action.html.erb
similarity index 100%
rename from app/views/attendance_tracker/_lecture_action.html.erb
rename to app/views/lectures/_lecture_action.html.erb
diff --git a/app/views/attendance_tracker/_lecture_status_icons.html.erb b/app/views/lectures/_lecture_status_icons.html.erb
similarity index 100%
rename from app/views/attendance_tracker/_lecture_status_icons.html.erb
rename to app/views/lectures/_lecture_status_icons.html.erb