diff --git a/docs/player_gm_ux_redesign_plan.md b/docs/player_gm_ux_redesign_plan.md
index 0e2bcfe..7ee27e4 100644
--- a/docs/player_gm_ux_redesign_plan.md
+++ b/docs/player_gm_ux_redesign_plan.md
@@ -516,6 +516,10 @@ Acceptance criteria:
 
 ### Phase 2: Clean up critical table browsing
 
+Status:
+
+- implemented in the web app on March 15, 2026
+
 Scope:
 
 - reframe tables page around reading and selecting outcomes
diff --git a/src/RolemasterDb.App/Components/Pages/Tables.razor b/src/RolemasterDb.App/Components/Pages/Tables.razor
index 2f41cab..715158b 100644
--- a/src/RolemasterDb.App/Components/Pages/Tables.razor
+++ b/src/RolemasterDb.App/Components/Pages/Tables.razor
@@ -9,31 +9,35 @@
 <PageTitle>Critical Tables</PageTitle>
 
 <section class="panel tables-page">
-    <div class="table-selector">
-        <label for="critical-table-select">Critical table</label>
-        <select
-            id="critical-table-select"
-            class="input-shell"
-            value="@selectedTableSlug"
-            @onchange="HandleTableChanged"
-            disabled="@IsTableSelectionDisabled">
-            @if (referenceData is null)
-            {
-                <option value="">Loading tables...</option>
-            }
-            else
-            {
-                @foreach (var table in referenceData.CriticalTables)
+    <div class="table-browser-toolbar">
+        <div class="table-selector">
+            <label for="critical-table-select">Table</label>
+            <select
+                id="critical-table-select"
+                class="input-shell"
+                value="@selectedTableSlug"
+                @onchange="HandleTableChanged"
+                disabled="@IsTableSelectionDisabled">
+                @if (referenceData is null)
                 {
-                    <option value="@table.Key">@table.Label</option>
+                    <option value="">Loading tables...</option>
                 }
-            }
-        </select>
+                else
+                {
+                    @foreach (var table in referenceData.CriticalTables)
+                    {
+                        <option value="@table.Key">@table.Label</option>
+                    }
+                }
+            </select>
+        </div>
+
+        <p class="table-browser-toolbar-copy">Choose a table, then read from the roll band on the left across to the result you need.</p>
     </div>
 
     @if (referenceData is null)
     {
-        <p class="muted">Loading reference data...</p>
+        <p class="muted">Loading table list...</p>
     }
     else if (!referenceData.CriticalTables.Any())
     {
@@ -53,9 +57,17 @@
     }
     else if (tableDetail is { } detail)
     {
+        var readingHint = detail.Groups.Count > 0
+            ? "Find the roll band on the left, then read across to the group and severity you need."
+            : "Find the roll band on the left, then read across to the severity you need.";
+
         <div class="table-shell">
-            <header>
-                <h2 class="panel-title">@detail.DisplayName</h2>
+            <header class="table-browser-header">
+                <div>
+                    <h2 class="panel-title">@detail.DisplayName</h2>
+                    <p class="table-browser-reading-hint">@readingHint</p>
+                </div>
+                <p class="table-browser-edit-hint">Click any filled result to correct it.</p>
             </header>
 
             <div class="table-scroll">
@@ -168,7 +180,10 @@
             @if (legendEntries.Count > 0)
             {
                 <div class="critical-legend">
-                    <h4>Affix legend</h4>
+                    <div class="critical-legend-header">
+                        <h4>Reading help</h4>
+                        <p class="muted">These symbols show the effects attached to a result at a glance.</p>
+                    </div>
                     <div class="legend-grid">
                         @foreach (var entry in legendEntries)
                         {
diff --git a/src/RolemasterDb.App/Components/Shared/CompactCriticalCell.razor b/src/RolemasterDb.App/Components/Shared/CompactCriticalCell.razor
index fbc1b0c..b8fd06f 100644
--- a/src/RolemasterDb.App/Components/Shared/CompactCriticalCell.razor
+++ b/src/RolemasterDb.App/Components/Shared/CompactCriticalCell.razor
@@ -7,22 +7,27 @@
         <p class="critical-cell-description">@Description</p>
     }
 
-    <AffixBadgeList Effects="Effects" />
-
-    @if (Branches?.Count > 0)
+    @if ((Effects?.Count ?? 0) > 0 || (Branches?.Count ?? 0) > 0)
     {
-        <div class="critical-branch-stack">
-            @foreach (var branch in Branches)
+        <div class="critical-cell-footer">
+            <AffixBadgeList Effects="Effects" />
+
+            @if (Branches?.Count > 0)
             {
-                <div class="critical-branch-card">
-                    <span class="critical-branch-condition">
-                        @branch.ConditionText
-                    </span>
-                    @if (!string.IsNullOrWhiteSpace(branch.Description))
+                <div class="critical-branch-stack">
+                    @foreach (var branch in Branches)
                     {
-                        <p class="critical-branch-description">@branch.Description</p>
+                        <div class="critical-branch-card">
+                            <span class="critical-branch-condition">
+                                @branch.ConditionText
+                            </span>
+                            @if (!string.IsNullOrWhiteSpace(branch.Description))
+                            {
+                                <p class="critical-branch-description">@branch.Description</p>
+                            }
+                            <AffixBadgeList Effects="branch.Effects" />
+                        </div>
                     }
-                    <AffixBadgeList Effects="branch.Effects" />
                 </div>
             }
         </div>
diff --git a/src/RolemasterDb.App/wwwroot/app.css b/src/RolemasterDb.App/wwwroot/app.css
index 130e326..57ce110 100644
--- a/src/RolemasterDb.App/wwwroot/app.css
+++ b/src/RolemasterDb.App/wwwroot/app.css
@@ -269,19 +269,27 @@ textarea {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
+    min-height: 100%;
+}
+
+.critical-cell-footer {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
 }
 
 .critical-cell-description {
     margin: 0;
     color: #2c1a10;
-    font-size: 1.2rem;
+    font-size: 1rem;
+    line-height: 1.4;
 }
 
 .critical-branch-stack {
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
-    margin-top: 0.65rem;
 }
 
 .critical-branch-card {
@@ -302,6 +310,7 @@ textarea {
 .critical-branch-description {
     margin: 0.3rem 0 0.45rem;
     font-size: 0.85rem;
+    line-height: 1.35;
     color: #3b2a21;
 }
 
@@ -462,12 +471,24 @@ textarea {
     gap: 1rem;
 }
 
+.table-browser-toolbar {
+    display: grid;
+    gap: 0.85rem;
+}
+
 .table-selector {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
 }
 
+.table-browser-toolbar-copy,
+.table-browser-reading-hint,
+.table-browser-edit-hint {
+    margin: 0;
+    color: var(--ink-soft);
+}
+
 .table-shell {
     border-radius: 20px;
     padding: 1.2rem;
@@ -476,11 +497,20 @@ textarea {
     box-shadow: 0 18px 30px rgba(41, 22, 11, 0.08);
 }
 
-.table-shell header {
+.table-browser-header {
     display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-    margin-bottom: 0.85rem;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.table-browser-reading-hint {
+    margin-top: 0.2rem;
+}
+
+.table-browser-edit-hint {
+    white-space: nowrap;
 }
 
 .table-shell .table-scroll {
@@ -490,13 +520,13 @@ textarea {
 .critical-table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
 }
 
 .critical-table th,
 .critical-table td {
     border: 1px solid rgba(127, 96, 55, 0.2);
-    padding: 0.45rem;
+    padding: 0.35rem;
     vertical-align: top;
 }
 
@@ -505,12 +535,13 @@ textarea {
     text-transform: uppercase;
     text-align: center;
     vertical-align: middle;
+    letter-spacing: 0.08em;
 }
 
 .critical-table td {
     background: rgba(255, 255, 255, 0.85);
-    min-width: 180px;
-    max-width: 260px;
+    min-width: 190px;
+    max-width: 250px;
     padding: 0;
 }
 
@@ -534,29 +565,37 @@ textarea {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    padding: 0.45rem;
+    padding: 0.55rem;
     box-sizing: border-box;
 }
 
 .critical-table .roll-band-header {
-    width: 120px;
+    width: 96px;
     background: rgba(255, 247, 230, 0.52);
-    font-size: 1.5rem;
+    font-size: 1rem;
     text-align: center;
     vertical-align: middle;
 }
 
 .critical-table thead th {
-    font-size: 1.5rem;
+    font-size: 0.9rem;
 }
 
-.critical-table td .affix-badge-list {
-    margin-top: auto;
+.critical-table thead .roll-band-header {
+    font-size: 0.8rem;
+}
+
+.critical-table-cell.is-editable:hover .critical-cell-description,
+.critical-table-cell.is-editable:focus-visible .critical-cell-description {
+    color: #8f5a2f;
 }
 
 .empty-cell {
     color: #a08464;
     font-style: italic;
+    display: block;
+    padding: 1rem 0.75rem;
+    text-align: center;
 }
 
 .critical-legend {
@@ -567,6 +606,15 @@ textarea {
     border: 1px solid rgba(127, 96, 55, 0.2);
 }
 
+.critical-legend-header {
+    display: grid;
+    gap: 0.2rem;
+}
+
+.critical-legend-header h4 {
+    margin: 0;
+}
+
 .legend-grid {
     display: grid;
     gap: 0.65rem;
@@ -736,6 +784,14 @@ textarea {
         width: 100%;
     }
 
+    .table-browser-header {
+        flex-direction: column;
+    }
+
+    .table-browser-edit-hint {
+        white-space: normal;
+    }
+
     .critical-editor-header,
     .critical-editor-footer {
         flex-direction: column;