diff --git a/Groceries/Items/Index.cshtml b/Groceries/Items/Index.cshtml
index fe1d851..47e1a97 100644
--- a/Groceries/Items/Index.cshtml
+++ b/Groceries/Items/Index.cshtml
@@ -26,11 +26,11 @@
         <table>
             <thead>
                 <tr>
-                    <th scope="col" class="table__header">Brand</th>
-                    <th scope="col" class="table__header" style="width: 100%">Name</th>
-                    <th scope="col" class="table__header">Last Purchased</th>
-                    <th scope="col" class="table__header">Barcode</th>
-                    @*<th scope="col" class="table__header"></th>*@
+                    <th scope="col" class="table__header table__header--shaded">Brand</th>
+                    <th scope="col" class="table__header table__header--shaded" style="width: 100%">Name</th>
+                    <th scope="col" class="table__header table__header--shaded">Last Purchased</th>
+                    <th scope="col" class="table__header table__header--shaded">Barcode</th>
+                    @*<th scope="col" class="table__header table__header--shaded"></th>*@
                 </tr>
             </thead>
             <tbody>
diff --git a/Groceries/Stores/Index.cshtml b/Groceries/Stores/Index.cshtml
index 924ec2a..86ae0df 100644
--- a/Groceries/Stores/Index.cshtml
+++ b/Groceries/Stores/Index.cshtml
@@ -27,10 +27,10 @@
         <table>
             <thead>
                 <tr>
-                    <th scope="col" class="table__header">Retailer</th>
-                    <th scope="col" class="table__header" style="width: 100%">Name</th>
-                    <th scope="col" class="table__header">Transactions</th>
-                    <th scope="col" class="table__header"></th>
+                    <th scope="col" class="table__header table__header--shaded">Retailer</th>
+                    <th scope="col" class="table__header table__header--shaded" style="width: 100%">Name</th>
+                    <th scope="col" class="table__header table__header--shaded">Transactions</th>
+                    <th scope="col" class="table__header table__header--shaded"></th>
                 </tr>
             </thead>
             <tbody>
diff --git a/Groceries/Transactions/Index.cshtml b/Groceries/Transactions/Index.cshtml
index 6f6338c..69ca099 100644
--- a/Groceries/Transactions/Index.cshtml
+++ b/Groceries/Transactions/Index.cshtml
@@ -43,23 +43,23 @@
     <table>
         <thead>
             <tr>
-                <th scope="col" class="table__header table__header--sortable">
+                <th scope="col" class="table__header table__header--shaded table__header--sortable">
                     <a asp-route-sort="@(GetNextSortDir("date") != null ? "date" : "")" asp-route-dir="@GetNextSortDir("date")" asp-route-page="1" data-dir="@GetSortDir("date")">
                         Date
                     </a>
                 </th>
-                <th scope="col" class="table__header" style="width: 100%">Store</th>
-                <th scope="col" class="table__header table__header--sortable">
+                <th scope="col" class="table__header table__header--shaded" style="width: 100%">Store</th>
+                <th scope="col" class="table__header table__header--shaded table__header--sortable">
                     <a asp-route-sort="@(GetNextSortDir("items") != null ? "items" : "")" asp-route-dir="@GetNextSortDir("items")" asp-route-page="1" data-dir="@GetSortDir("items")">
                         Items
                     </a>
                 </th>
-                <th scope="col" class="table__header table__header--sortable">
+                <th scope="col" class="table__header table__header--shaded table__header--sortable">
                     <a asp-route-sort="@(GetNextSortDir("amount") != null ? "amount" : "")" asp-route-dir="@GetNextSortDir("amount")" asp-route-page="1" data-dir="@GetSortDir("amount")">
                         Amount
                     </a>
                 </th>
-                @*<th scope="col" class="table__header"></th>*@
+                @*<th scope="col" class="table__header table__header--shaded"></th>*@
             </tr>
         </thead>
         <tbody>
diff --git a/Groceries/Transactions/NewTransactionItems.cshtml b/Groceries/Transactions/NewTransactionItems.cshtml
index eef4a34..b5675cb 100644
--- a/Groceries/Transactions/NewTransactionItems.cshtml
+++ b/Groceries/Transactions/NewTransactionItems.cshtml
@@ -20,37 +20,63 @@
 
 <h1>New Transaction</h1>
 
-<div>@Model.CreatedAt.ToShortDateString() @Model.CreatedAt.ToLongTimeString() &ndash; @store</div>
+<div class="form-field">@Model.CreatedAt.ToShortDateString() @Model.CreatedAt.ToLongTimeString() &ndash; @store</div>
 
 <form method="post" asp-action="NewTransactionItems">
-    <div class="card">
+    <div class="card form-field">
         <div class="card__header row">
             <h2 class="row__fill">Items</h2>
             <a class="button button--primary" asp-action="NewTransactionItem" autofocus data-turbo-frame="modal">New item</a>
         </div>
 
-        <div class="card__content">
-            <ul>
-                @foreach (var item in Model.Items)
-                {
-                    <li class="row">
-                        <span class="row__fill">@items.Single(i => i.Id == item.ItemId).Name</span>
-                        <span>@item.Price.ToString("c")</span>
-                        <span>@item.Quantity</span>
-                        <span>@((item.Price * item.Quantity).ToString("c"))</span>
-                        <a class="link" asp-action="EditTransactionItem" asp-route-id="@item.ItemId" data-turbo-frame="modal">Edit</a>
-                    </li>
-                }
-            </ul>
-        </div>
-
-        <div class="card__footer">
-            Total: @Model.Items.Sum(item => item.Price * item.Quantity).ToString("c")
+        <div class="card__content card__content--table">
+            <table>
+                <thead>
+                    <tr>
+                        <th scope="col" class="table__header" style="width: 100%">Name</th>
+                        <th scope="col" class="table__header">Price</th>
+                        <th scope="col" class="table__header"><abbr title="Quantity">Qty</abbr></th>
+                        <th scope="col" class="table__header">Amount</th>
+                        <th scope="col" class="table__header"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach (var item in Model.Items)
+                    {
+                        <tr>
+                            <td class="table__cell table__cell--compact">
+                                @items.Single(i => i.Id == item.ItemId).Name
+                            </td>
+                            <td class="table__cell table__cell--compact table__cell--numeric">
+                                @item.Price.ToString("c")
+                            </td>
+                            <td class="table__cell table__cell--compact table__cell--numeric">
+                                @item.Quantity
+                            </td>
+                            <td class="table__cell table__cell--compact table__cell--numeric">
+                                @((item.Price * item.Quantity).ToString("c"))
+                            </td>
+                            <td class="table__cell table__cell--compact">
+                                <a class="link" asp-action="EditTransactionItem" asp-route-id="@item.ItemId" data-turbo-frame="modal">Edit</a>
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+                <tfoot>
+                    <tr>
+                        <td class="table__cell table__cell--compact table__cell--total" colspan="3">Total</td>
+                        <td class="table__cell table__cell--compact table__cell--numeric table__cell--total">
+                            @Model.Items.Sum(item => item.Price * item.Quantity).ToString("c")
+                        </td>
+                        <td class="table__cell table__cell--compact"></td>
+                    </tr>
+                </tfoot>
+            </table>
         </div>
     </div>
 
     <div class="row">
-        <button class="button button--primary" type="submit">Save</button>
+        <button class="button button--primary" type="submit" @(Model.Items.Count == 0 ? "disabled" : "")>Save</button>
         <a class="button" asp-action="Index">Cancel</a>
     </div>
 </form>
diff --git a/Groceries/wwwroot/css/main.css b/Groceries/wwwroot/css/main.css
index 6e161f1..ef383a5 100644
--- a/Groceries/wwwroot/css/main.css
+++ b/Groceries/wwwroot/css/main.css
@@ -301,6 +301,11 @@ html:has(.modal[open]) {
     margin: 1.5rem;
 }
 
+.card__content--table {
+    border-top: 1px solid rgb(229, 231, 235);
+    margin: -1px 0 0 0;
+}
+
 .card__header {
     border-bottom: 1px solid rgb(243, 244, 246);
     padding: 1.25rem 1.5rem;
@@ -324,13 +329,12 @@ html:has(.modal[open]) {
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
 }
 
-.table table {
+.table table, .card__content--table table {
     min-width: 100%;
     border-collapse: collapse;
 }
 
 .table__header {
-    background-color: rgb(249, 250, 251);
     color: rgb(107, 114, 128);
     font-size: 0.75rem;
     font-weight: 500;
@@ -342,6 +346,10 @@ html:has(.modal[open]) {
     white-space: nowrap;
 }
 
+.table__header--shaded {
+    background-color: rgb(249, 250, 251);
+}
+
 .table__header--sortable a {
     color: inherit;
     text-decoration: none;
@@ -373,6 +381,11 @@ html:has(.modal[open]) {
     white-space: nowrap;
 }
 
+.table__cell--compact {
+    line-height: 1rem;
+    padding-block: 0.75rem;
+}
+
 .table__cell--icon {
     font-size: 1.25rem;
 }
@@ -381,6 +394,11 @@ html:has(.modal[open]) {
     text-align: end;
 }
 
+.table__cell--total {
+    font-weight: 600;
+    text-transform: uppercase;
+}
+
 .table__paginator {
     display: flex;
     justify-content: space-between;