diff --git a/app/assets/stylesheets/emails.scss b/app/assets/stylesheets/emails.scss
index 5ee78eb..089c57b 100644
--- a/app/assets/stylesheets/emails.scss
+++ b/app/assets/stylesheets/emails.scss
@@ -1,38 +1,3 @@
 // Place all the styles related to the emails controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
-
-.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: #666666;
-  padding: 1px 2px;
-}
-
-.email_content th {
-  text-align: left;
-}
diff --git a/app/views/emails/_email.html.erb b/app/views/emails/_email.html.erb
index a1c616b..0d861a2 100644
--- a/app/views/emails/_email.html.erb
+++ b/app/views/emails/_email.html.erb
@@ -6,66 +6,66 @@
     <table class="w-full rounded-t-lg bg-gray-50 border-b border-gray-200   email_content">
       <tbody class="email_main_headers divide-y divide-gray-100" data-email-target="headersMain">
         <tr>
-          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+          <th scope="row" class="email-header-name">Date</th>
           <td class="text-sm"><%= email.date %></td>
         </tr>
         <tr>
-          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From</th>
+          <th scope="row" class="email-header-name">From</th>
           <td class="text-sm"><%= email.from.join(', ') %></td>
         </tr>
         <tr>
-          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">To</th>
+          <th scope="row" class="email-header-name">To</th>
           <td class="text-sm"><%= email.to.join(', ') %></td>
         </tr>
         <tr>
-          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Delivered-To</th>
+          <th scope="row" class="email-header-name">Delivered-To</th>
           <td class="text-sm"><%= email.delivered_to.join(', ') %></td>
         </tr>
         <tr>
-          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
+          <th scope="row" class="email-header-name">Subject</th>
           <td class="text-sm"><%= email.subject %></td>
         </tr>
         <% if email.organisations.present? %>
           <tr>
-            <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clients</th>
+            <th scope="row" class="email-header-name">Clients</th>
             <td class="text-sm">
               <% email.organisations.presence.each do |organisation| %>
-                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_organisation"><%= organisation %></span>
+                <span class="pill pill-organisation"><%= organisation %></span>
               <% end %>
             </td>
           </tr>
         <% end %>
         <% if email.servers.present? %>
           <tr>
-            <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Servers</th>
+            <th scope="row" class="email-header-name">Servers</th>
             <td class="text-sm">
               <% email.servers.presence.each do |server| %>
-                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_server"><%= server %></span>
+                <span class="pill pill-server"><%= server %></span>
               <% end %>
             </td>
           </tr>
         <% end %>
         <% if email.issues.present? %>
           <tr>
-            <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Issues</th>
+            <th scope="row" class="email-header-name">Issues</th>
             <td class="text-sm">
               <% email.issues.presence.each do |issue| %>
-                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_issue"><%= issue %></span>
+                <span class="pill pill-issue"><%= issue %></span>
               <% end %>
             </td>
           </tr>
         <% end %>
         <tr>
-          <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From Cron</th>
+          <th scope="row" class="email-header-name">From Cron</th>
           <td class="text-sm">
-            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full <%= email.cron? ? "email_attribute_cron" : "" %>"><%= email.cron? ? "Yes" : "No" %></span>
+            <span class="pill <%= email.cron? ? "pill-cron" : "" %>"><%= email.cron? ? "Yes" : "No" %></span>
           </td>
         </tr>
       </tbody>
       <tbody class="email_additional_headers divide-y divide-gray-100 hidden" data-email-target="headersAll">
         <% email.headers.each do |header| %>
           <tr>
-            <th scope="row" class="w-56 px-4 py-2 align-top text-left text-xs font-medium text-gray-500 uppercase tracking-wider"><%= header["name"] %></th>
+            <th scope="row" class="email-header-name"><%= header["name"] %></th>
             <td class="text-sm"><%= header["value"] %></td>
           </tr>
         <% end %>
diff --git a/app/views/emails/_list.html.erb b/app/views/emails/_list.html.erb
index 0e5f0e6..4e796b2 100644
--- a/app/views/emails/_list.html.erb
+++ b/app/views/emails/_list.html.erb
@@ -3,11 +3,11 @@
   <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">From</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>
+        <th scope="col" class="px-2 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+        <th scope="col" class="px-2 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">From</th>
+        <th scope="col" class="px-2 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
+        <th scope="col" class="px-2 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Metadata</th>
+        <th scope="col" class="relative px-2 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"><span class="sr-only">Actions</span></th>
       </tr>
     </thead>
 
diff --git a/app/views/emails/_list_row.html.erb b/app/views/emails/_list_row.html.erb
index 674c31e..f8b4d89 100644
--- a/app/views/emails/_list_row.html.erb
+++ b/app/views/emails/_list_row.html.erb
@@ -1,25 +1,25 @@
 <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"><%= link_to email.from.join(', '), email, "data-turbo-frame": "_top" %></td>
-  <td class="px-6 py-4"><%= link_to email.subject, email, "data-turbo-frame": "_top" %></td>
+  <td class=" whitespace-nowrap"><%= link_to email.date.strftime("%Y-%m-%d %H:%M"), email, "data-turbo-frame": "_top", class: "block p-2" %></td>
+  <td class=""><%= link_to email.from.join(', '), email, "data-turbo-frame": "_top", class: "block p-2" %></td>
+  <td class=""><%= link_to email.subject, email, "data-turbo-frame": "_top", class: "block p-2" %></td>
   <td class="px-2 py-1 space-y-1 space-x-1">
     <% email.organisations.each do |organisation| %>
-      <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_organisation"><%= organisation %></span>
+      <span class="pill pill-organisation"><%= organisation %></span>
     <% end if email.organisations %>
     <% email.servers.each do |server| %>
-      <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_server"><%= server %></span>
+      <span class="pill pill-server"><%= server %></span>
     <% end if email.servers %>
     <% if email.cron? %>
-      <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_cron">cron</span>
+      <span class="pill pill-cron">cron</span>
     <% end %>
     <% if email.mailing_list? %>
-      <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_mailing_list">list</span>
+      <span class="pill pill-list">list</span>
     <% end %>
     <% if email.junk? %>
-      <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full email_attribute_junk">junk</span>
+      <span class="pill pill-junk">junk</span>
     <% end %>
   </td>
-  <td class="px-2 py-1">
+  <td class="flex-1 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" %>