diff --git a/WebApp/Components/Features/MeetingSchedule/History.razor b/WebApp/Components/Features/MeetingSchedule/History.razor
index 6d34354..dfb54fb 100644
--- a/WebApp/Components/Features/MeetingSchedule/History.razor
+++ b/WebApp/Components/Features/MeetingSchedule/History.razor
@@ -35,103 +35,99 @@
         <MudStack Spacing="3">
             @if (_meetingHistories.Any())
             {
-                <MudPaper Elevation="1" Class="pa-3" Style="overflow-x: auto;">
-                    <MudTable Items="_meetingHistories"
-                             Hover="true"
-                             Striped="true"
-                             Dense="true"
-                             Breakpoint="Breakpoint.Sm">
-                        <ColGroup>
-                            <col style="width: 100px;" />
-                            <col style="width: 50px;" />
-                            @foreach (var team in _allTeams)
+                <MudPaper Elevation="1" Class="pa-3" Style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
+                    <table class="history-grid-table" style="min-width: max-content; width: 100%; border-collapse: collapse;">
+                        <colgroup>
+                            <col style="width: 72px;" />
+                            <col style="width: 40px;" />
+                            @for (var c = 0; c < _allTeams.Count; c++)
                             {
-                                <col style="width: 40px;" />
+                                <col style="width: 28px;" />
                             }
-                        </ColGroup>
-                        <HeaderContent>
-                            <MudTh Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
-                                <MudText Typo="Typo.caption" Style="writing-mode: vertical-rl; text-orientation: mixed;">
-                                    Date
-                                </MudText>
-                            </MudTh>
-                            <MudTh Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
-                                <MudText Typo="Typo.caption">Actions</MudText>
-                            </MudTh>
+                        </colgroup>
+                        <thead>
+                            <tr>
+                                <th class="history-cell history-cell-date">
+                                    <span class="mud-typography mud-typography-caption">Date</span>
+                                </th>
+                                <th class="history-cell history-cell-actions">
+                                    <span class="mud-typography mud-typography-caption" style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">Actions</span>
+                                </th>
+                                @{
+                                    var teamIndex = 0;
+                                }
+                                @foreach (var team in _allTeams)
+                                {
+                                    var isEven = teamIndex % 2 == 0;
+                                    var colClass = isEven ? "history-cell history-cell-col-even" : "history-cell history-cell-col-odd";
+                                    <th class="@colClass">
+                                        <span class="mud-typography mud-typography-caption" style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">@team.ToString()</span>
+                                    </th>
+                                    teamIndex++;
+                                }
+                            </tr>
+                            <tr>
+                                <th class="history-cell history-cell-date  history-cell-times-met">Times Met</th>
+                                <th class="history-cell history-cell-actions "></th>
+                                @{
+                                    var summaryTeamIndex = 0;
+                                }
+                                @foreach (var team in _allTeams)
+                                {
+                                    var timesMet = GetTimesMetForTeam(team);
+                                    var isEven = summaryTeamIndex % 2 == 0;
+                                    var colClass = isEven ? "history-cell history-cell-col-even history-cell-times-met" : "history-cell history-cell-col-odd history-cell-times-met";
+                                    <th class="@colClass">@timesMet</th>
+                                    summaryTeamIndex++;
+                                }
+                            </tr>
+                        </thead>
+                        <tbody>
                             @{
-                                var teamIndex = 0;
+                                var rowIndex = 0;
                             }
-                            @foreach (var team in _allTeams)
+                            @foreach (var history in _meetingHistories)
                             {
-                                var isEven = teamIndex % 2 == 0;
-                                var bgColor = isEven ? "background-color: var(--mud-palette-background-grey);" : "";
-                                var headerStyle = $"padding: 4px 2px; border-right: 1px solid var(--mud-palette-divider); {bgColor}";
-                                <MudTh Style="@headerStyle">
-                                    <MudText Typo="Typo.caption" Style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">
-                                        @team.ToString()
-                                    </MudText>
-                                </MudTh>
-                                teamIndex++;
-                            }
-                        </HeaderContent>
-                        <RowTemplate>
-                            <MudTd Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
-                                <MudButton Variant="Variant.Text"
-                                          Color="Color.Primary"
-                                          Size="Size.Small"
-                                          OnClick="@(() => ViewMeetingDetails(context))"
-                                          Style="text-transform: none; padding: 2px 4px;">
-                                    @context.MeetingDate.ToString("MM/dd/yy")
-                                </MudButton>
-                            </MudTd>
-                            <MudTd Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);">
-                                <MudTooltip Text="Load into Planner">
-                                    <MudIconButton Icon="@Icons.Material.Filled.Upload"
-                                                  Size="Size.Small"
-                                                  Color="Color.Secondary"
-                                                  OnClick="@(() => LoadMeetingIntoPlanner(context))"
-                                                  Variant="Variant.Text" />
-                                </MudTooltip>
-                            </MudTd>
-                            @{
                                 var rowTeamIndex = 0;
-                            }
-                            @foreach (var team in _allTeams)
-                            {
-                                var met = TeamMetOnDate(context, team);
-                                var isEven = rowTeamIndex % 2 == 0;
-                                var bgColor = isEven ? "background-color: var(--mud-palette-background-grey);" : "";
-                                var cellStyle = $"padding: 4px 2px; border-right: 1px solid var(--mud-palette-divider); {bgColor}";
-                                <MudTd Align="Align.Center" Style="@cellStyle">
-                                    @if (met)
+                                var rowClass = rowIndex % 2 == 0 ? "history-row-even" : "history-row-odd";
+                                <tr class="@rowClass">
+                                    <td class="history-cell history-cell-date ">
+                                        <MudButton Variant="Variant.Text"
+                                                  Color="Color.Primary"
+                                                  Size="Size.Small"
+                                                  OnClick="@(() => ViewMeetingDetails(history))"
+                                                  Style="text-transform: none; padding: 0 2px; min-width: unset;">
+                                            @history.MeetingDate.ToString("MM/dd/yy")
+                                        </MudButton>
+                                    </td>
+                                    <td class="history-cell history-cell-actions">
+                                        <MudTooltip Text="Load into Planner">
+                                            <MudIconButton Icon="@Icons.Material.Filled.Upload"
+                                                          Size="Size.Small"
+                                                          Color="Color.Secondary"
+                                                          OnClick="@(() => LoadMeetingIntoPlanner(history))"
+                                                          Variant="Variant.Text"
+                                                          Style="padding: 2px;" />
+                                        </MudTooltip>
+                                    </td>
+                                    @foreach (var team in _allTeams)
                                     {
-                                        <MudText Typo="Typo.body1" Style="font-weight: bold;">×</MudText>
+                                        var met = TeamMetOnDate(history, team);
+                                        var isEven = rowTeamIndex % 2 == 0;
+                                        var colClass = isEven ? "history-cell history-cell-col-even" : "history-cell history-cell-col-odd";
+                                        <td class="@colClass">
+                                            @if (met)
+                                            {
+                                                <span class="mud-typography mud-typography-body1" style="font-weight: bold;">×</span>
+                                            }
+                                        </td>
+                                        rowTeamIndex++;
                                     }
-                                </MudTd>
-                                rowTeamIndex++;
+                                </tr>
+                                rowIndex++;
                             }
-                        </RowTemplate>
-                        <FooterContent>
-                            <MudTd Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider); font-weight: bold;">
-                                Times Met
-                            </MudTd>
-                            <MudTd Style="padding: 4px 8px; border-right: 2px solid var(--mud-palette-divider);"></MudTd>
-                            @{
-                                var footerTeamIndex = 0;
-                            }
-                            @foreach (var team in _allTeams)
-                            {
-                                var timesMet = GetTimesMetForTeam(team);
-                                var isEven = footerTeamIndex % 2 == 0;
-                                var bgColor = isEven ? "background-color: var(--mud-palette-background-grey);" : "";
-                                var footerCellStyle = $"padding: 4px 2px; border-right: 1px solid var(--mud-palette-divider); {bgColor}";
-                                <MudTd Align="Align.Center" Style="@footerCellStyle">
-                                    <MudText Typo="Typo.body2" Style="font-weight: bold;">@timesMet</MudText>
-                                </MudTd>
-                                footerTeamIndex++;
-                            }
-                        </FooterContent>
-                    </MudTable>
+                        </tbody>
+                    </table>
                 </MudPaper>
             }
             else
@@ -142,6 +138,58 @@
     }
 </MudPaper>
 
+<style>
+    .history-grid-table {
+        --history-border: 1px solid var(--mud-palette-divider);
+        --history-shade: var(--mud-palette-background-grey);
+    }
+    .history-grid-table th,
+    .history-grid-table td {
+        padding: 2px 4px;
+        border-right: var(--history-border);
+        border-bottom: var(--history-border);
+        vertical-align: middle;
+    }
+    .history-grid-table thead th {
+        border-top: var(--history-border);
+        background-color: var(--mud-palette-surface);
+    }
+    .history-grid-table thead .history-cell-col-odd {
+        background-color: var(--mud-palette-surface);
+    }
+    .history-grid-table thead th:first-child,
+    .history-grid-table tbody td:first-child {
+        border-left: var(--history-border);
+    }
+    .history-grid-table .history-cell-date {
+        padding: 2px 4px;
+        text-align: left;
+        min-width: 72px;
+    }
+    .history-grid-table .history-cell-actions {
+        padding: 2px;
+        text-align: center;
+        min-width: 40px;
+    }
+    .history-grid-table thead .history-cell-col-even {
+        background-color: var(--history-shade);
+    }
+    .history-grid-table .history-cell-times-met {
+        font-weight: bold;
+        background-color: var(--history-shade);
+    }
+    .history-grid-table tbody .history-row-odd td {
+        background-color: var(--history-shade);
+    }
+    .history-grid-table tbody .history-row-even td.history-cell-col-even,
+    .history-grid-table tbody .history-row-odd td.history-cell-col-even {
+        background-color: var(--history-shade);
+    }
+    .history-grid-table tbody .history-row-odd td.history-cell-col-odd {
+        background-color: var(--history-shade);
+    }
+</style>
+
 @code {
     private List<TeamMeetingHistory> _meetingHistories = [];
     private List<Team> _allTeams = [];