diff --git a/app/assets/stylesheets/emails.scss b/app/assets/stylesheets/emails.scss
index 05d265c..5ee78eb 100644
--- a/app/assets/stylesheets/emails.scss
+++ b/app/assets/stylesheets/emails.scss
@@ -5,26 +5,31 @@
 .email_attribute_server {
   background-color: cyan;
   padding: 1px 2px;
+  color: #666666;
 }
 .email_attribute_organisation {
   background-color: yellow;
   padding: 1px 2px;
+  color: #666666;
 }
 .email_attribute_issue {
   background-color: orange;
   padding: 1px 2px;
+  color: #666666;
 }
 .email_attribute_cron {
   background-color: #cdcdcd;
   padding: 1px 2px;
+  color: #666666;
 }
 .email_attribute_mailing_list {
   background-color: #99ff00;
   padding: 1px 2px;
+  color: #666666;
 }
 .email_attribute_junk {
   background-color: #222222;
-  color: #cccccc;
+  color: #666666;
   padding: 1px 2px;
 }
 
diff --git a/app/views/emails/_list.html.erb b/app/views/emails/_list.html.erb
index d9b386f..61f874e 100644
--- a/app/views/emails/_list.html.erb
+++ b/app/views/emails/_list.html.erb
@@ -1,37 +1,40 @@
-<table>
-  <thead>
-    <tr>
-      <th>Date</th>
-      <th>Subject</th>
-      <th>Metadata</th>
-      <th colspan="3"></th>
-    </tr>
-  </thead>
 
-  <tbody class="text-sm">
-    <% emails.each do |email| %>
-      <%= render partial: "list_row", object: email, as: :email %>
-    <% end %>
-  </tbody>
-</table>
+<div class="shadow overflow-auto border-b border-gray-200 rounded-lg">
+  <table class="min-w-full divide-y divide-gray-200">
+    <thead class="bg-gray-50">
+      <tr>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Metadata</th>
+        <th scope="col" class="relative px-6 py-3"><span class="sr-only">Show, Edit, Destroy</span></th>
+      </tr>
+    </thead>
 
-<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
-  <div class="flex-1 flex justify-between sm:hidden">
-    <%= link_to_previous_page @emails, 'Previous page', class: "ml-3 paginate-page paginate-page-single" %>
-    <%= link_to_next_page @emails, 'Next Page', class: "paginate-page paginate-page-single" %>
-  </div>
-  <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
-    <div>
-      <p class="text-sm text-gray-700">
-        Showing
-        <span class="font-medium"><%= @emails.offset_value + 1 %></span>
-        to
-        <span class="font-medium"><%= @emails.offset_value + (@emails.respond_to?(:records) ? @emails.records : @emails.to_a).size %></span>
-        of
-        <span class="font-medium"><%= @emails.total_count %></span>
-        results
-      </p>
+    <tbody class="text-sm bg-white divide-y divide-gray-200">
+      <% emails.each do |email| %>
+        <%= render partial: "list_row", object: email, as: :email %>
+      <% end %>
+    </tbody>
+  </table>
+
+  <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
+    <div class="flex-1 flex justify-between sm:hidden">
+      <%= link_to_previous_page @emails, 'Previous page', class: "ml-3 paginate-page paginate-page-single" %>
+      <%= link_to_next_page @emails, 'Next Page', class: "paginate-page paginate-page-single" %>
+    </div>
+    <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+      <div>
+        <p class="text-sm text-gray-700">
+          Showing
+          <span class="font-medium"><%= @emails.offset_value + 1 %></span>
+          to
+          <span class="font-medium"><%= @emails.offset_value + (@emails.respond_to?(:records) ? @emails.records : @emails.to_a).size %></span>
+          of
+          <span class="font-medium"><%= @emails.total_count %></span>
+          results
+        </p>
+      </div>
+      <%= paginate @emails %>
     </div>
-    <%= paginate @emails %>
   </div>
 </div>
diff --git a/app/views/emails/_list_row.html.erb b/app/views/emails/_list_row.html.erb
index 24c1e12..a4fd09b 100644
--- a/app/views/emails/_list_row.html.erb
+++ b/app/views/emails/_list_row.html.erb
@@ -1,24 +1,26 @@
-<tr>
-  <td><%= email.date.strftime("%Y-%m-%d %H:%M") %></td>
-  <td><%= email.subject %></td>
-  <td>
+<tr class="<%= cycle('bg-white', 'bg-gray-50', :name => 'zebra') %>">
+  <td class="px-6 py-4 whitespace-nowrap"><%= email.date.strftime("%Y-%m-%d %H:%M") %></td>
+  <td class="px-6 py-4"><%= email.subject %></td>
+  <td class="px-2 py-1 space-x-1">
     <% email.organisations.each do |organisation| %>
-      <span class="email_attribute_organisation"><%= organisation %></span>
+      <span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_organisation"><%= organisation %></span>
     <% end if email.organisations %>
     <% email.servers.each do |server| %>
-      <span class="email_attribute_server"><%= server %></span>
+      <span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_server"><%= server %></span>
     <% end if email.servers %>
     <% if email.cron? %>
-      <span class="email_attribute_cron">cron</span>
+      <span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_cron">cron</span>
     <% end %>
     <% if email.mailing_list? %>
-      <span class="email_attribute_mailing_list">list</span>
+      <span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_mailing_list">list</span>
     <% end %>
     <% if email.junk? %>
-      <span class="email_attribute_junk">junk</span>
+      <span class="flex px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_junk">junk</span>
     <% end %>
   </td>
-  <td><%= link_to 'Show', email, "data-turbo-frame": "_top" %></td>
-  <td><%= link_to 'Edit', edit_email_path(email), "data-turbo-frame": "_top" %></td>
-  <td><%= link_to 'Destroy', email, method: :delete, data: { confirm: 'Are you sure?' }, "data-turbo-frame": "_top" %></td>
+  <td class="px-2 py-1">
+    <%= link_to 'Show', email, "data-turbo-frame": "_top", class: "flex" %>
+    <%= link_to 'Edit', edit_email_path(email), "data-turbo-frame": "_top", class: "flex" %>
+    <%= link_to 'Destroy', email, method: :delete, data: { confirm: 'Are you sure?' }, "data-turbo-frame": "_top", class: "flex" %>
+  </td>
 </tr>
diff --git a/app/views/filters/index.html.erb b/app/views/filters/index.html.erb
index 43e9c40..e880396 100644
--- a/app/views/filters/index.html.erb
+++ b/app/views/filters/index.html.erb
@@ -4,31 +4,51 @@
 
 <p id="notice"><%= notice %></p>
 
-<table>
-  <thead>
-    <tr>
-      <th>Description</th>
-      <th>Enabled</th>
-      <th>Operator</th>
-      <th>Inverted</th>
-      <th colspan="3"></th>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% @filters.each do |filter| %>
+<div class="shadow overflow-hidden border-b border-gray-200 rounded-lg">
+  <table class="min-w-full divide-y divide-gray-200">
+    <thead class="bg-gray-50">
       <tr>
-        <td><%= filter.description %></td>
-        <td><%= filter.enabled %></td>
-        <td><%= filter.operator %></td>
-        <td><%= filter.inverted %></td>
-        <td><%= link_to 'Show', filter %></td>
-        <td><%= link_to 'Edit', edit_filter_path(filter) %></td>
-        <td><%= link_to 'Destroy', filter, method: :delete, data: { confirm: 'Are you sure?' } %></td>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Enabled</th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Operator</th>
+        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Inverted</th>
+        <th scope="col" class="relative px-6 py-3"><span class="sr-only">Show, Edit, Destroy</span></th>
       </tr>
-    <% end %>
-  </tbody>
-</table>
+    </thead>
+
+    <tbody class="bg-white divide-y divide-gray-200">
+      <% @filters.each do |filter| %>
+        <tr class="<%= cycle('bg-white', 'bg-gray-50', :name => 'zebra') %>">
+          <td class="px-6 py-4 whitespace-nowrap">
+            <%= filter.description %>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <% if filter.enabled? %>
+              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                <%= filter.enabled %>
+              </span>
+            <% else %>
+              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
+                <%= filter.enabled %>
+              </span>
+            <% end %>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <%= filter.operator %>
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap">
+            <%= filter.inverted %>
+          </td>
+          <td>
+            <%= link_to 'Show', filter %>
+            <%= link_to 'Edit', edit_filter_path(filter) %>
+            <%= link_to 'Destroy', filter, method: :delete, data: { confirm: 'Are you sure?' } %>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
 
 <br>
 
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index dd9dbe8..b32734e 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -114,7 +114,7 @@
         </div>
       </header>
       <main>
-        <div class="max-w-7xl mt-6 mx-auto py-6 sm:px-6 lg:px-8 bg-white shadow">
+        <div class="max-w-7xl my-6 mx-auto py-6 sm:px-6 lg:px-8 bg-white shadow">
           <%= yield %>
         </div>
       </main>