diff --git a/assets/css/bootstrap/_map_overrides.scss b/assets/css/bootstrap/_map_overrides.scss
index 4a1172e0a..348a7e630 100644
--- a/assets/css/bootstrap/_map_overrides.scss
+++ b/assets/css/bootstrap/_map_overrides.scss
@@ -10,8 +10,11 @@ $theme-colors: (
   "light": new_tokens.$gray-50,
   "dark": new_tokens.$gray-900,
   "missed-stop": semantic.$missed-stop,
+  "active-detour": semantic.$active-detour,
 );
 
+$table-variants: $theme-colors;
+
 $utilities: (
   // Shorthand for specifying utility classes `top-0 start-0 bottom-0 end-0`
   "inset":
diff --git a/assets/css/color/_definitions.scss b/assets/css/color/_definitions.scss
index a6210290f..479ff942e 100644
--- a/assets/css/color/_definitions.scss
+++ b/assets/css/color/_definitions.scss
@@ -33,6 +33,7 @@ $active-detour: new_tokens.$lemon-100;
   --color-service-alert: #{$service-alert};
   --color-light: #{$light};
   --color-dark: #{$dark};
+  --color-active-detour: #{$active-detour};
 }
 // #endregion Theme Colors
 
diff --git a/assets/src/components/detoursTable.tsx b/assets/src/components/detoursTable.tsx
index ccd9198dc..f8fe3d982 100644
--- a/assets/src/components/detoursTable.tsx
+++ b/assets/src/components/detoursTable.tsx
@@ -42,6 +42,7 @@ export const DetoursTable = ({
   <Table
     hover={!!data}
     className={joinClasses([...classNames, "c-detours-table"])}
+    variant={status === DetourStatus.Active ? "active-detour" : ""}
   >
     <thead className="u-hide-for-mobile">
       <tr>
diff --git a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
index 18eed3274..002428b95 100644
--- a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`DetourListPage renders detour list page 1`] = `
         </span>
       </div>
       <table
-        class="mb-5 c-detours-table table table-hover"
+        class="mb-5 c-detours-table table table-active-detour table-hover"
       >
         <thead
           class="u-hide-for-mobile"
diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
index e8a857b88..941bf8268 100644
--- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
         </span>
       </div>
       <table
-        class="mb-5 c-detours-table table table-hover"
+        class="mb-5 c-detours-table table table-active-detour table-hover"
       >
         <thead
           class="u-hide-for-mobile"