diff --git a/static/css/cheesy-arena.css b/static/css/cheesy-arena.css
index 65754b0e..66aa3191 100644
--- a/static/css/cheesy-arena.css
+++ b/static/css/cheesy-arena.css
@@ -27,11 +27,23 @@
 .blue-text {
   color: #00f;
 }
-.card-red {
-  background-color: #422;
+.bg-red {
+  background-color: #422 !important;
 }
-.card-blue {
-  background-color: #192945;
+.bg-dark-red {
+  background-color: #311 !important;
+}
+.bg-blue {
+  background-color: #192945 !important;
+}
+.bg-dark-blue {
+  background-color: #113 !important;
+}
+.bg-yellow {
+  background-color: #442 !important;
+}
+.bg-green {
+  background-color: #132 !important;
 }
 .col-no-padding {
   padding-left: 0;
@@ -117,9 +129,6 @@ input[data-changed="true"], select[data-changed="true"] {
   height: 610px;
   overflow-y: auto;
 }
-.match-list table {
-  border-collapse: separate;
-}
 .match-list th {
   position: sticky;
   top: 0;
diff --git a/templates/edit_match_result.html b/templates/edit_match_result.html
index 96222fa7..84472350 100644
--- a/templates/edit_match_result.html
+++ b/templates/edit_match_result.html
@@ -7,16 +7,16 @@
 {{define "title"}}Edit Match Results{{end}}
 {{define "body"}}
 <div class="row">
-  <div class="well">
-    <form class="form-horizontal" method="POST">
+  <div class="card card-body bg-body-tertiary">
+    <form method="POST">
       <fieldset>
         <legend>Edit {{.Match.LongName}} Results</legend>
         <div id="redScore"></div>
         <div id="blueScore"></div>
-        <div class="row form-group">
+        <div class="row">
           <div class="text-center col-lg-12">
-            <a href="/match_review"><button type="button" class="btn btn-default">Cancel</button></a>
-            <button type="submit" class="btn btn-info">Save</button>
+            <a href="/match_review"><button type="button" class="btn btn-secondary">Cancel</button></a>
+            <button type="submit" class="btn btn-primary">Save</button>
           </div>
         </div>
       </fieldset>
@@ -24,41 +24,37 @@
   </div>
 </div>
 <div id="scoreTemplate" style="display: none;">
-  <div class="well well-{{"{{alliance}}"}}">
+  <div class="card card-body bg-{{"{{alliance}}"}} mb-3">
     <fieldset>
       <legend>Autonomous</legend>
       <b>Mobility</b>
-      <div class="form-group">
-        <div class="row">
-          {{range $i := seq 3}}
-            <div class="col-lg-2">
-              <label class="col-lg-8 control-label">Team {{"{{team"}}{{$i}}{{"}}"}}</label>
-              <input type="checkbox" class="input-sm" name="{{"{{alliance}}"}}MobilityStatuses{{$i}}">
-            </div>
-          {{end}}
-        </div>
-      </div>
-      <b>Charge Station Docking</b>
-      <div class="form-group">
-        <div class="row">
-          {{range $i := seq 3}}
+      <div class="row mb-3">
+        {{range $i := seq 3}}
           <div class="col-lg-2">
-            <label class="col-lg-8 control-label">Team {{"{{team"}}{{$i}}{{"}}"}}</label>
-            <input type="checkbox" class="input-sm" name="{{"{{alliance}}"}}AutoDockStatuses{{$i}}">
+            <label class="control-label">Team {{"{{team"}}{{$i}}{{"}}"}}</label>
+            <input type="checkbox" class="ms-3" name="{{"{{alliance}}"}}MobilityStatuses{{$i}}">
           </div>
-          {{end}}
+        {{end}}
+      </div>
+      <b>Charge Station Docking</b>
+      <div class="row mb-3">
+        {{range $i := seq 3}}
+        <div class="col-lg-2">
+          <label class="control-label">Team {{"{{team"}}{{$i}}{{"}}"}}</label>
+          <input type="checkbox" class="ms-3" name="{{"{{alliance}}"}}AutoDockStatuses{{$i}}">
         </div>
-        <div class="row">
-          <div class="col-lg-4 col-lg-offset-1">
-            <label class="col-lg-8 control-label">Charge Station Is Level?</label>
-            <input type="checkbox" class="input-sm" name="{{"{{alliance}}"}}AutoChargeStationLevel">
-          </div>
+        {{end}}
+      </div>
+      <div class="row mb-3">
+        <div class="col-lg-4 col-lg-offset-1">
+          <label class="control-label">Charge Station Is Level?</label>
+          <input type="checkbox" class="ms-3" name="{{"{{alliance}}"}}AutoChargeStationLevel">
         </div>
       </div>
     </fieldset>
     <fieldset>
       <legend>Grid</legend>
-      <div class="row">
+      <div class="row text-center">
         <div class="col-lg-1"></div>
         {{range $i := seq 9}}
         <label class="col-lg-1 control-label">{{$i}}</label>
@@ -71,24 +67,25 @@
     </fieldset>
     <fieldset>
       <legend>Endgame</legend>
-      <div class="form-group">
+      <div class="mb-3">
         {{range $i := seq 3}}
-          <div class="row">
-            <label class="col-lg-1 col-lg-offset-1 control-label">Team {{"{{team"}}{{$i}}{{"}}"}}</label>
-            <div class="radio col-lg-1">
-              <input type="radio" name="{{"{{alliance}}"}}EndgameStatuses{{$i}}" value="0">None
+          <div class="row mb-2">
+            <div class="col-lg-1"></div>
+            <label class="col-lg-1 control-label">Team {{"{{team"}}{{$i}}{{"}}"}}</label>
+            <div class="col-lg-1">
+              <input type="radio" name="{{"{{alliance}}"}}EndgameStatuses{{$i}}" value="0"> None
             </div>
-            <div class="radio col-lg-1">
-              <input type="radio" name="{{"{{alliance}}"}}EndgameStatuses{{$i}}" value="1">Parked
+            <div class="col-lg-1">
+              <input type="radio" name="{{"{{alliance}}"}}EndgameStatuses{{$i}}" value="1"> Parked
             </div>
-            <div class="radio col-lg-1">
-              <input type="radio" name="{{"{{alliance}}"}}EndgameStatuses{{$i}}" value="2">Docked
+            <div class="col-lg-1">
+              <input type="radio" name="{{"{{alliance}}"}}EndgameStatuses{{$i}}" value="2"> Docked
             </div>
           </div>
         {{end}}
-        <div class="col-lg-4 col-lg-offset-1">
-          <label class="col-lg-8 control-label">Charge Station Is Level?</label>
-          <input type="checkbox" class="input-sm" name="{{"{{alliance}}"}}EndgameChargeStationLevel">
+        <div class="mt-3">
+          <label class="control-label">Charge Station Is Level?</label>
+          <input type="checkbox" class="ms-3" name="{{"{{alliance}}"}}EndgameChargeStationLevel">
         </div>
       </div>
     </fieldset>
@@ -97,41 +94,42 @@
       {{"{{#each score.Fouls}}"}}
         <input type="hidden" class="input-sm" name="{{"{{../alliance}}"}}Foul{{"{{@index}}"}}Index"
           value="{{"{{@index}}"}}">
-        <div class="well well-sm well-dark{{"{{../alliance}}"}}">
-          <button type="button" class="close" onclick="deleteFoul('{{"{{../alliance}}"}}', {{"{{@index}}"}});">
-            ×
+        <div class="card card-body bg-dark-{{"{{../alliance}}"}} mb-2">
+          <button type="button" class="btn-close" onclick="deleteFoul('{{"{{../alliance}}"}}', {{"{{@index}}"}});">
           </button>
           <br />
-          <div class="form-group">
+          <div class="row mb-3">
             <label class="col-lg-2 control-label">Is Technical?</label>
             <div class="col-lg-3">
               <input type="checkbox" class="input-sm" name="{{"{{../alliance}}"}}Foul{{"{{@index}}"}}IsTechnical">
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-3">
             <label class="col-lg-2 control-label">Team</label>
             <div class="col-lg-8">
-              <div class="radio col-lg-2">
-                <label>
-                  <input type="radio" name="{{"{{../alliance}}"}}Foul{{"{{@index}}"}}Team" value="{{"{{../team1}}"}}">
-                  {{"{{../team1}}"}}
-                 </label>
-              </div>
-              <div class="radio col-lg-2">
-                <label>
-                  <input type="radio" name="{{"{{../alliance}}"}}Foul{{"{{@index}}"}}Team" value="{{"{{../team2}}"}}">
-                  {{"{{../team2}}"}}
-                </label>
-              </div>
-              <div class="radio col-lg-2">
-                <label>
-                  <input type="radio" name="{{"{{../alliance}}"}}Foul{{"{{@index}}"}}Team" value="{{"{{../team3}}"}}">
-                  {{"{{../team3}}"}}
-                </label>
+              <div class="row">
+                <div class="col-lg-2">
+                  <label>
+                    <input type="radio" name="{{"{{../alliance}}"}}Foul{{"{{@index}}"}}Team" value="{{"{{../team1}}"}}">
+                    Team {{"{{../team1}}"}}
+                   </label>
+                </div>
+                <div class="col-lg-2">
+                  <label>
+                    <input type="radio" name="{{"{{../alliance}}"}}Foul{{"{{@index}}"}}Team" value="{{"{{../team2}}"}}">
+                    Team {{"{{../team2}}"}}
+                  </label>
+                </div>
+                <div class="col-lg-2">
+                  <label>
+                    <input type="radio" name="{{"{{../alliance}}"}}Foul{{"{{@index}}"}}Team" value="{{"{{../team3}}"}}">
+                    Team {{"{{../team3}}"}}
+                  </label>
+                </div>
               </div>
             </div>
           </div>
-          <div class="form-group">
+          <div class="row mb-3">
             <label class="col-lg-2 control-label">Rule</label>
             <div class="col-lg-9">
               <select class="form-control" name="{{"{{../alliance}}"}}Foul{{"{{@index}}"}}RuleId">
@@ -146,7 +144,7 @@
           </div>
         </div>
       {{"{{/each}}"}}
-      <button type="button" class="btn btn-default btn-sm" onclick="addFoul('{{"{{alliance}}"}}');">
+      <button type="button" class="btn btn-secondary btn-sm" onclick="addFoul('{{"{{alliance}}"}}');">
         Add Foul
       </button>
       <br /><br />
@@ -154,26 +152,28 @@
     <fieldset>
       <legend>Cards</legend>
       {{range $i := seq 3}}
-        <div class="form-group">
+        <div class="row mb-3">
           <label class="col-lg-2 control-label">Team {{"{{team"}}{{$i}}{{"}}"}}</label>
           <div class="col-lg-8">
-            <div class="radio col-lg-2">
-              <label>
-                <input type="radio" name="{{"{{alliance}}"}}Team{{"{{team"}}{{$i}}{{"}}"}}Card" value="" checked>
-                None
-              </label>
-            </div>
-            <div class="radio col-lg-2">
-              <label>
-                <input type="radio" name="{{"{{alliance}}"}}Team{{"{{team"}}{{$i}}{{"}}"}}Card" value="yellow">
-                Yellow
-              </label>
-            </div>
-            <div class="radio col-lg-2">
-              <label>
-                <input type="radio" name="{{"{{alliance}}"}}Team{{"{{team"}}{{$i}}{{"}}"}}Card" value="red">
-                Red
-              </label>
+            <div class="row">
+              <div class="col-lg-2">
+                <label>
+                  <input type="radio" name="{{"{{alliance}}"}}Team{{"{{team"}}{{$i}}{{"}}"}}Card" value="" checked>
+                  None
+                </label>
+              </div>
+              <div class="col-lg-2">
+                <label>
+                  <input type="radio" name="{{"{{alliance}}"}}Team{{"{{team"}}{{$i}}{{"}}"}}Card" value="yellow">
+                  Yellow
+                </label>
+              </div>
+              <div class="col-lg-2">
+                <label>
+                  <input type="radio" name="{{"{{alliance}}"}}Team{{"{{team"}}{{$i}}{{"}}"}}Card" value="red">
+                  Red
+                </label>
+              </div>
             </div>
           </div>
         </div>
diff --git a/templates/match_play.html b/templates/match_play.html
index 75b652d4..8ea635f0 100644
--- a/templates/match_play.html
+++ b/templates/match_play.html
@@ -14,11 +14,11 @@
         style="text-transform: uppercase;">&nbsp;</div>
       <div id="matchState" class="col-lg-3 card card-body bg-body-tertiary">&nbsp;</div>
       <div id="matchTime" class="col-lg-2 card card-body bg-body-tertiary">&nbsp;</div>
-      <div id="redScore" class="col-lg-2 card card-body card-red">&nbsp;</div>
-      <div id="blueScore" class="col-lg-2 card card-body card-blue">&nbsp;</div>
+      <div id="redScore" class="col-lg-2 card card-body bg-red">&nbsp;</div>
+      <div id="blueScore" class="col-lg-2 card card-body bg-blue">&nbsp;</div>
     </div>
     <div class="row text-center">
-      <div class="col-lg-6 card card-body card-blue mb-2">
+      <div class="col-lg-6 card card-body bg-blue mb-2">
         <div class="row mb-3">
           <div class="col-lg-4">Blue Teams</div>
           <div class="col-lg-2" data-bs-toggle="tooltip" title="Driver Station Status">DS</div>
@@ -31,7 +31,7 @@
         {{template "matchPlayTeam" dict "color" "B" "position" 3}}
         <div id="playoffBlueAllianceInfo"></div>
       </div>
-      <div class="col-lg-6 card card-body card-red mb-2">
+      <div class="col-lg-6 card card-body bg-red mb-2">
         <div class="row mb-3">
           <div class="col-lg-4">Red Teams</div>
           <div class="col-lg-2" data-bs-toggle="tooltip" title="Driver Station Status">DS</div>
diff --git a/templates/match_play_match_load.html b/templates/match_play_match_load.html
index d1127b4f..6097a987 100644
--- a/templates/match_play_match_load.html
+++ b/templates/match_play_match_load.html
@@ -30,10 +30,10 @@
       </thead>
       <tbody>
         {{range $match := $matches}}
-        <tr class="{{$match.ColorClass}}">
-          <td>{{$match.ShortName}}</td>
-          <td>{{$match.Time}}</td>
-          <td class="nowrap">
+        <tr>
+          <td class="bg-{{$match.ColorClass}}">{{$match.ShortName}}</td>
+          <td class="bg-{{$match.ColorClass}}">{{$match.Time}}</td>
+          <td class="bg-{{$match.ColorClass}} nowrap">
             <b class="btn btn-primary btn-sm" onclick="loadMatch({{$match.Id}});">Load</b>
             {{if ne $match.Status matchScheduled}}
               <b class="btn btn-primary btn-sm" onclick="showResult({{$match.Id}});">Show Result</b>
diff --git a/templates/match_review.html b/templates/match_review.html
index e79e6ef5..774fc5c6 100644
--- a/templates/match_review.html
+++ b/templates/match_review.html
@@ -7,15 +7,22 @@
 {{define "title"}}Match Review{{end}}
 {{define "body"}}
 <div class="row">
-  <ul class="nav nav-tabs" style="margin-bottom: 15px;">
-    <li{{if eq .CurrentMatchType practiceMatch }} class="active"{{end}}>
-      <a href="#Practice" data-toggle="tab">Practice</a>
+  <ul class="nav nav-tabs">
+    <li>
+      <a href="#Practice" class="nav-link{{if eq .CurrentMatchType practiceMatch }} active{{end}}" data-bs-toggle="tab">
+        Practice
+      </a>
     </li>
-    <li{{if eq .CurrentMatchType qualificationMatch }} class="active"{{end}}>
-      <a href="#Qualification" data-toggle="tab">Qualification</a>
+    <li>
+      <a href="#Qualification" class="nav-link{{if eq .CurrentMatchType qualificationMatch }} active{{end}}"
+        data-bs-toggle="tab">
+        Qualification
+      </a>
     </li>
-    <li{{if eq .CurrentMatchType playoffMatch }} class="active"{{end}}>
-      <a href="#Playoff" data-toggle="tab">Playoff</a>
+    <li>
+      <a href="#Playoff" class="nav-link{{if eq .CurrentMatchType playoffMatch }} active{{end}}" data-bs-toggle="tab">
+        Playoff
+      </a>
     </li>
   </ul>
   <div class="tab-content">
@@ -35,19 +42,19 @@
           </thead>
           <tbody>
             {{range $match := $matches}}
-              <tr class="{{$match.ColorClass}}">
-                <td>{{$match.ShortName}}</td>
-                <td>{{$match.Time}}</td>
-                <td class="text-center red-text">
+              <tr>
+                <td class="bg-{{$match.ColorClass}}">{{$match.ShortName}}</td>
+                <td class="bg-{{$match.ColorClass}}">{{$match.Time}}</td>
+                <td class="bg-{{$match.ColorClass}} text-center red-text">
                   {{index $match.RedTeams 0}}, {{index $match.RedTeams 1}}, {{index $match.RedTeams 2}}
                 </td>
-                <td class="text-center blue-text">
+                <td class="bg-{{$match.ColorClass}} text-center blue-text">
                   {{index $match.BlueTeams 0}}, {{index $match.BlueTeams 1}}, {{index $match.BlueTeams 2}}
                 </td>
-                <td class="text-center red-text">{{if $match.IsComplete}}{{$match.RedScore}}{{end}}</td>
-                <td class="text-center blue-text">{{if $match.IsComplete}}{{$match.BlueScore}}{{end}}</td>
-                <td class="text-center nowrap">
-                  <a href="/match_review/{{$match.Id}}/edit"><b class="btn btn-info btn-xs">Edit</b></a>
+                <td class="bg-{{$match.ColorClass}} text-center red-text">{{if $match.IsComplete}}{{$match.RedScore}}{{end}}</td>
+                <td class="bg-{{$match.ColorClass}} text-center blue-text">{{if $match.IsComplete}}{{$match.BlueScore}}{{end}}</td>
+                <td class="bg-{{$match.ColorClass}} text-center nowrap">
+                  <a href="/match_review/{{$match.Id}}/edit"><b class="btn btn-primary btn-sm">Edit</b></a>
                 </td>
               </tr>
             {{end}}
diff --git a/web/match_play.go b/web/match_play.go
index 2ae762ad..546ced68 100644
--- a/web/match_play.go
+++ b/web/match_play.go
@@ -528,16 +528,16 @@ func (web *Web) buildMatchPlayList(matchType model.MatchType) (MatchPlayList, er
 		matchPlayList[i].Status = match.Status
 		switch match.Status {
 		case game.RedWonMatch:
-			matchPlayList[i].ColorClass = "danger"
+			matchPlayList[i].ColorClass = "red"
 		case game.BlueWonMatch:
-			matchPlayList[i].ColorClass = "info"
+			matchPlayList[i].ColorClass = "blue"
 		case game.TieMatch:
-			matchPlayList[i].ColorClass = "warning"
+			matchPlayList[i].ColorClass = "yellow"
 		default:
 			matchPlayList[i].ColorClass = ""
 		}
 		if web.arena.CurrentMatch != nil && matchPlayList[i].Id == web.arena.CurrentMatch.Id {
-			matchPlayList[i].ColorClass = "success"
+			matchPlayList[i].ColorClass = "green"
 		}
 	}
 
diff --git a/web/match_review.go b/web/match_review.go
index 3ad6a140..ca265767 100644
--- a/web/match_review.go
+++ b/web/match_review.go
@@ -200,13 +200,13 @@ func (web *Web) buildMatchReviewList(matchType model.MatchType) ([]MatchReviewLi
 		}
 		switch match.Status {
 		case game.RedWonMatch:
-			matchReviewList[i].ColorClass = "danger"
+			matchReviewList[i].ColorClass = "red"
 			matchReviewList[i].IsComplete = true
 		case game.BlueWonMatch:
-			matchReviewList[i].ColorClass = "info"
+			matchReviewList[i].ColorClass = "blue"
 			matchReviewList[i].IsComplete = true
 		case game.TieMatch:
-			matchReviewList[i].ColorClass = "warning"
+			matchReviewList[i].ColorClass = "yellow"
 			matchReviewList[i].IsComplete = true
 		default:
 			matchReviewList[i].ColorClass = ""