diff --git a/index.html b/index.html
index 42a79df..bee4095 100644
--- a/index.html
+++ b/index.html
@@ -11,45 +11,27 @@
 </head>
 
 <body>
+  <header class="bd-header bg-primary py-3 d-flex align-items-stretch border-bottom border-dark">
+  <div class="container-fluid d-flex align-items-center">
+    <h1 class="d-flex align-items-center fs-4 text-white mb-0" id="counter">
+      Next refresh in 60
+    </h1>
+  </div>
+</header>
 
-<div class="container bg-primary text-white padding-3" id="counter">
-  <h2 id="refresh_counter_text">Next refresh in 60</h2>
-</div>
+  <div class="container" >
+    <h2>Events Happening Now</h2>
+    <div class="row" id="happeningNow">
+    </div>
+  </div>
 
-<div class="container" id="happeningNow">
-  <h2>Events Happening Now</h2>
-  <table class="table table-bordered" id="now">
-    <thead>
-      <tr>
-        <th scope="col">Name</th>
-        <th scope="col">Venue</th>
-        <th scope="col">Video Team Needed</th>
-        <th scope="col">Privacy</th>
-        <th scope="col">Comments</th>
-        <th scope="col">Ends In</th>
-      </tr>
-    </thead>
+  <hr />
 
-    <tbody></tbody>
-  </table>
-</div>
+  <div class="container" >
+    <h2>Events Happening Next</h2>
+    <div class="row" id="happeningNext">
+    </div>
+  </div>
 
-<div class="container" id="happeningNext">
-  <h2>Events Happening Next</h2>
-  <table class="table table-bordered" id="next">
-    <thead>
-      <tr>
-        <th scope="col">Name</th>
-        <th scope="col">Venue</th>
-        <th scope="col">Video Team Needed</th>
-        <th scope="col">Privacy</th>
-        <th scope="col">Comments</th>
-        <th scope="col">Starts In</th>
-      </tr>
-    </thead>
-
-    <tbody></tbody>
-  </table>
-</div>
 </body>
 </html>
diff --git a/plugin-api.js b/plugin-api.js
index db2238a..7b65781 100644
--- a/plugin-api.js
+++ b/plugin-api.js
@@ -52,8 +52,8 @@ grist.onRecords(function (records) {
 
   console.log(eventsOnNext);
 
-  populateTable("now", eventsOnNow);
-  populateTable("next", eventsOnNext);
+  populateList("happeningNow", eventsOnNow);
+  populateList("happeningNext", eventsOnNext);
 
   window.setInterval(() => handleCountdown(), 1000);
 });
@@ -110,57 +110,79 @@ function convertTimeToString(time) {
   return hours + ":" + minutes;
 }
 
-function populateTable(elementName, items) {
+function populateList(elementName, items) {
   for (const i of items) {
-    const tableRow = document.createElement("tr");
+    const col = document.createElement("div");
+    col.setAttribute("class", "col-sm-12 col-bg-12")
 
-    tableRow.setAttribute("id", i.id);
+    const card = document.createElement("div");
+    card.setAttribute("class", "card m-3")
 
-    var name = document.createElement("td");
-    var venue = document.createElement("td");
-    var videoNeeded = document.createElement("td");
-    var privacy = document.createElement("td");
-    var comments = document.createElement("td");
-    var startsIn = document.createElement("td");
+    const cardHeader = document.createElement("div");
+    cardHeader.setAttribute("class", "card-header")
+    cardHeader.innerHTML = i.name;
+
+    const list = document.createElement("ul");
+    list.setAttribute("class", "list-group list-group-flush")
+
+    list.setAttribute("id", i.id);
+
+    var venue = document.createElement("ul");
+    var videoNeeded = document.createElement("ul");
+    var privacy = document.createElement("ul");
+    var comments = document.createElement("ul");
+    var startsIn = document.createElement("ul");
+
+    venue.setAttribute("class", "list-group-item");
+    videoNeeded.setAttribute("class", "list-group-item");
+    privacy.setAttribute("class", "list-group-item");
+    comments.setAttribute("class", "list-group-item");
+    startsIn.setAttribute("class", "list-group-item");
 
     startsIn.setAttribute("id", i.id + "_time");
 
-    name.innerHTML = i.name;
-    venue.innerHTML = i.venue;
-    videoNeeded.innerHTML = i.videoNeeded;
-    privacy.innerHTML = i.privacy;
-    comments.innerHTML = i.comments;
-    startsIn.innerHTML = convertTimeToString(i.timeUntilStart());
+    venue.innerHTML = "Venue: " + i.venue;
+    videoNeeded.innerHTML = "Video Team Present: " + i.videoNeeded;
+    privacy.innerHTML = "Privacy: " + i.privacy;
+    comments.innerHTML = "Comment: " + i.comments;
+    startsIn.innerHTML = "Starts In: " + convertTimeToString(i.timeUntilStart()) + "(" + i.startTime.toLocaleString("en-GB", { timeZone: "UTC" }) + ")";
 
-    tableRow.appendChild(name);
-    tableRow.appendChild(venue);
-    tableRow.appendChild(videoNeeded);
-    tableRow.appendChild(privacy);
-    tableRow.appendChild(comments);
-    tableRow.appendChild(startsIn);
+    list.appendChild(venue);
+    list.appendChild(videoNeeded);
+    list.appendChild(privacy);
+    if (i.comments) {
+      list.appendChild(comments);
+    }
+    list.appendChild(startsIn);
 
     // Colour in any rows
     if (i.privacy != "public") {
-      privacy.innerHTML = makeTextBold(privacy.innerHTML);
-
       if (i.privacy == "none") {
-        tableRow.setAttribute("class", "table-danger");
+        privacy.setAttribute("class", "list-group-item bg-danger")
+        privacy.innerHTML = makeTextBold("Privacy: Do not record!");
       } else if (i.privacy == "review") {
-        tableRow.setAttribute("class", "table-warning");
+        privacy.setAttribute("class", "list-group-item bg-warning")
+        privacy.innerHTML = makeTextBold(privacy.innerHTML);
       }
     }
 
-    if (i.comments != "") {
+    if (i.comments) {
+      comments.setAttribute("class", "list-group-item bg-info");
+      console.log(i.comments);
       comments.innerHTML = makeTextBold(comments.innerHTML);
-      tableRow.setAttribute("class", "table-danger");
     }
 
     if (i.videoNeeded == true) {
+      videoNeeded.setAttribute("class", "list-group-item bg-warning");
       videoNeeded.innerHTML = makeTextBold(videoNeeded.innerHTML);
-      tableRow.setAttribute("class", "table-danger");
     }
 
-    document.getElementById(elementName).getElementsByTagName("tbody")[0].append(tableRow);
+    card.appendChild(cardHeader);
+    card.appendChild(list);
+
+    col.append(card);
+
+    document.getElementById(elementName).appendChild(col);
   }
 }
 
@@ -185,9 +207,9 @@ function handleCountdown() {
   countdown--;
   if (countdown == 0) {
     countdown = MAX_COUNTDOWN;
-    refreshTables();
+    window.reload();
   }
 
-  let counterElement = document.getElementById("refresh_counter_text");
+  let counterElement = document.getElementById("counter");
   counterElement.innerHTML = "Next refresh in " + countdown;
 }
