diff --git a/templates/history.html b/templates/history.html
index 443a40e..1fac80e 100644
--- a/templates/history.html
+++ b/templates/history.html
@@ -1,63 +1,63 @@
 {% extends "main.html" %} {% block title %} Audit Log {% endblock %} {% block
 content %}
 
-<h1>Audit Log (Coming soon)</h1>
+<h1 class="mb-4 text-4xl font-extrabold uppercase">Audit Log (Coming soon)</h1>
 
-<section class="container mb-4">
+<section class="mb-4">
   <form
     action="/history"
     hx-get="/history"
     hx-trigger="change"
     hx-target="#items"
   >
-    <div class="row">
-      <div class="col-sm-2">
-        <label for="start-date" class="form-label">Start Date</label>
+    <div class="flex between">
+      <div class="px-2">
+        <label for="start-date" class="block">Start Date</label>
         <input
           type="date"
           id="start-date"
           name="start-date"
           value="{{ start_date }}"
-          class="form-control"
+          class="block"
         />
       </div>
-      <div class="col-sm-2">
-        <label for="start-time" class="form-label">Start Time</label>
+      <div class="px-2">
+        <label for="start-time" class="block">Start Time</label>
         <input
           type="time"
           id="start-time"
           name="start-time"
           value="{{ start_time }}"
-          class="form-control"
+          class="block"
         />
-        <small class="form-text">Timezone {{ time_zone }}</small>
+        <small class="block text-sm">Timezone {{ time_zone }}</small>
       </div>
-      <div class="col-sm-2">
-        <label for="end-date" class="form-label">End Date</label>
+      <div class="px-2">
+        <label for="end-date" class="block">End Date</label>
         <input
           type="date"
           id="end-date"
           name="end-date"
           value="{{ end_date }}"
-          class="form-control"
+          class="block"
         />
       </div>
-      <div class="col-sm-2">
+      <div class="px-2">
         <label for="end-time" class="form-label">End Time</label>
         <input
           type="time"
           id="end-time"
           name="end-time"
           value="{{ end_time }}"
-          class="form-control"
+          class="block"
         />
-        <small class="form-text">Timezone {{ time_zone }}</small>
+        <small class="text-sm block">Timezone {{ time_zone }}</small>
       </div>
     </div>
   </form>
 </section>
 
-<section id="items" class="container">
+<section id="items" class="mb-4">
   {% include "history_item_fragment.html" %}
 </section>
 
diff --git a/templates/history_item_fragment.html b/templates/history_item_fragment.html
index d771160..4597f5c 100644
--- a/templates/history_item_fragment.html
+++ b/templates/history_item_fragment.html
@@ -1,20 +1,29 @@
-<div class="card">
-  <ul class="list-group list-group-flush">
-    {% for item in items %}
-    <li class="list-group-item">
-      <div class="row">
-        <p class="col">{{ item.create_date }}</p>
-        <p class="col">{{ item.item_name }}</p>
-        <p class="col">{{ item.user_name }}</p>
-        <p class="col">
-          {% match item.item_type %} {% when
-          HistoryItemEntry::PositiveAdjustment with (entry) %} {{ entry.amount
-          }} @ {{ entry.unit_value }} {% when
-          HistoryItemEntry::NegativeAdjustment with (entry) %} {{ entry.amount
-          }} {{ entry.reason }} {% endmatch %}
-        </p>
-      </div>
-    </li>
-    {% endfor %}
-  </ul>
-</div>
+<table class="table-auto">
+  <thead>
+    <tr class="mb-2">
+      <th>Date</th>
+      <th>Item</th>
+      <th>User</th>
+      <th>Desc</th>
+    </tr>
+  </thead>
+  <tbody>
+  {% for item in items %}
+  <tr class="mb-2">
+    <td class="px-2">{{ item.create_date }}</td>
+    <td class="px-2">{{ item.item_name }}</td>
+    <td class="px-2">{{ item.user_name }}</td>
+    <td class="px-2">
+      {% match item.item_type %}
+      {% when HistoryItemEntry::PositiveAdjustment with (entry) %}
+      {{ entry.amount }} @ {{ entry.unit_value }}
+      {% when HistoryItemEntry::NegativeAdjustment with (entry) %}
+      {{ entry.amount }} {{ entry.reason }}
+      {% endmatch %}
+    </td>
+  </tr>
+  {% endfor %}
+
+  </tbody>
+</table>
+
diff --git a/templates/main.html b/templates/main.html
index bf90441..0037871 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -18,7 +18,7 @@
   <body
     class="min-h-screen bg-slate-100 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100"
   >
-    <header class="mx-auto mb-4 bg-space-cadet font-sans">
+    <header class="top-0 w-full mb-4 bg-space-cadet font-sans">
       <nav
         class="mx-auto flex max-w-7xl justify-between gap-2 px-2 py-4 sm:px-6 lg:px-8"
       >
@@ -65,7 +65,7 @@
       </nav>
     </header>
     <main
-      class="mx-auto bg-slate-100 px-1 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100"
+      class="relative mx-auto max-w-[68.75rem] w-[95vw] bg-slate-100 px-1 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100"
     >
       {% block content %}
       <p>Content Missing</p>