diff --git a/assets/css/_circle_x_icon.scss b/assets/css/_circle_x_icon.scss
index ddad8cc7c4..4f529e978c 100644
--- a/assets/css/_circle_x_icon.scss
+++ b/assets/css/_circle_x_icon.scss
@@ -3,8 +3,6 @@
   width: 0.75rem;
   height: 0.75rem;
 
-  color: $color-gray-600;
-
   &__path {
     fill: currentColor;
     .c-circle-x-icon-container:hover & {
diff --git a/assets/css/_date_time_picker.scss b/assets/css/_date_time_picker.scss
new file mode 100644
index 0000000000..c36e64bf97
--- /dev/null
+++ b/assets/css/_date_time_picker.scss
@@ -0,0 +1,70 @@
+@use "./color/tokens_2024" as tokens;
+
+.flatpickr-calendar {
+  .flatpickr-current-month {
+    .flatpickr-monthDropdown-months {
+      // fix bug in flatpickr where year overflows
+      display: inline-block !important;
+      font-weight: 600;
+      font-size: 1.25rem;
+    }
+
+    input.cur-year {
+      color: tokens.$gray-700;
+      font-weight: 600;
+      font-size: 1.25rem;
+    }
+  }
+
+  .flatpickr-prev-month,
+  .flatpickr-next-month {
+    svg {
+      fill: tokens.$gray-900;
+    }
+
+    &:hover svg {
+      fill: tokens.$eggplant-500 !important;
+    }
+  }
+
+  .flatpickr-day {
+    color: tokens.$black;
+
+    &.today {
+      border: unset;
+    }
+
+    &:hover,
+    &.today:hover {
+      color: tokens.$black;
+      background-color: tokens.$gray-300;
+      border-color: tokens.$gray-300;
+    }
+
+    &.prevMonthDay,
+    &.nextMonthDay {
+      &:not(.flatpickr-disabled):not(.selected) {
+        color: tokens.$gray-500;
+      }
+    }
+
+    &.disabled {
+      color: tokens.$gray-300;
+    }
+
+    &.selected,
+    &.selected.prevMonthDay,
+    &.selected.nextMonthDay,
+    &.selected.today {
+      color: tokens.$white;
+      background-color: tokens.$eggplant-500;
+      border-color: tokens.$eggplant-500;
+
+      &:hover {
+        color: tokens.$white;
+        background-color: tokens.$eggplant-300;
+        border-color: tokens.$eggplant-300;
+      }
+    }
+  }
+}
diff --git a/assets/css/_filter_accordion.scss b/assets/css/_filter_accordion.scss
index d57d15acec..f81667405d 100644
--- a/assets/css/_filter_accordion.scss
+++ b/assets/css/_filter_accordion.scss
@@ -1,5 +1,10 @@
 .c-filter-accordion {
-  @extend .c-garage-filter;
+  @include filter-input;
+  padding: unset;
+
+  &__header {
+    @include filter-placeholder;
+  }
 
   // Visible when collapsed
   &__toggle-button {
diff --git a/assets/css/_garage_filter.scss b/assets/css/_garage_filter.scss
index aeb72e5e8a..723c24ed9a 100644
--- a/assets/css/_garage_filter.scss
+++ b/assets/css/_garage_filter.scss
@@ -1,19 +1,12 @@
-.c-garage-filter {
-  @include font-small;
-  font-weight: 400;
-  color: $color-gray-600;
-  background: $white;
-  border: 1px solid $color-gray-400;
-  border-radius: 6px;
+@use "./color/tokens_2024" as tokens;
 
-  &:hover {
-    border: 1px solid $color-eggplant-400;
-  }
+.c-garage-filter {
+  @include filter-input;
+  padding: unset;
+}
 
-  &:focus-within {
-    border: 1px solid $color-eggplant-500;
-    box-shadow: 0px 0px 0px 2px rgba(170, 78, 242, 0.17);
-  }
+.c-garage-filter__header {
+  @include filter-placeholder;
 }
 
 .c-garage-filter__show-hide-button {
@@ -51,6 +44,8 @@
 }
 
 .c-garage-filter__garages {
+  @include font-small;
+  font-weight: 400;
   margin: 0;
   padding: 1rem;
   display: flex;
diff --git a/assets/css/_route_filter.scss b/assets/css/_route_filter.scss
deleted file mode 100644
index 224d2b3f0d..0000000000
--- a/assets/css/_route_filter.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.c-route-filter__text {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.c-route-filter__input {
-  @include filter-input;
-}
-
-.c-route-filter__clear {
-  @include filter-clear;
-  right: 1rem;
-  top: 0.6875rem;
-}
diff --git a/assets/css/_search_form.scss b/assets/css/_search_form.scss
index 8a47fad552..442980a6ee 100644
--- a/assets/css/_search_form.scss
+++ b/assets/css/_search_form.scss
@@ -27,60 +27,6 @@
   position: relative;
 }
 
-.c-search-form__search-input-container {
-  // Use bootstrap control as base for now
-  @extend .form-control;
-
-  // fill control defined valid area
-  height: 100%;
-  // Make space for `input-controls`
-  padding-right: calc(2.25rem * 2);
-  // Ignore bootstrap padding due to `input-controls`
-  padding-block: 0;
-
-  border-color: $color-gray-400;
-
-  &:focus,
-  &:focus-within,
-  &:active {
-    border: 1px solid $color-eggplant-500;
-    box-shadow: 0px 0px 0px 2px #aa4ef22b;
-    color: $color-gray-800;
-  }
-}
-
-.c-search-form__input {
-  // Align self within parent boundaries
-  width: 100%;
-  height: 100%;
-
-  // Match font size from the Route Picker Search
-  @include font-small;
-
-  // Remove default displays
-  border: none;
-}
-
-// #region Search Input Buttons
-.c-search-form__input-controls {
-  @include filter-input-controls;
-}
-
-.c-search-form__clear {
-  @include button-icon(0.875rem);
-
-  // Reserve space around icon in flex container
-  flex: 0;
-
-  height: 100%;
-  aspect-ratio: 1/1;
-}
-
-.c-search-form__submit {
-  @include filter-submit;
-}
-// #endregion Search Input Buttons
-
 // #region Autocomplete Control
 // Hide the autocomplete control by default
 .c-search-form__autocomplete-container {
@@ -96,7 +42,7 @@
 
   // -- Visually join the bottom of the input bar with autocomplete by squaring
   //    off the bottom
-  .c-search-form__search-input-container {
+  .c-search-form__input {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
diff --git a/assets/css/_ui_kit.scss b/assets/css/_ui_kit.scss
index b82cc8d1d0..7f68c07b5c 100644
--- a/assets/css/_ui_kit.scss
+++ b/assets/css/_ui_kit.scss
@@ -379,35 +379,32 @@ $color-tooltip-background: #333333;
   font-weight: 400;
 }
 
-@mixin filter-input {
-  @include font-small;
-  line-height: 1;
-  border: 1px solid $color-gray-400;
-  border-radius: 6px;
-  padding: 0.625rem 1rem;
-  color: $color-gray-700;
-  font-weight: 400;
+@mixin filter-placeholder {
+  color: new_tokens.$gray-700;
+}
 
-  &::placeholder {
-    opacity: 1;
-    color: $color-gray-600;
-  }
+@mixin filter-border {
+  border-color: new_tokens.$gray-400;
 
   &:hover {
-    border: 1px solid $color-eggplant-400;
+    border-color: new_tokens.$eggplant-500;
+    box-shadow: 0 0 0 4px rgba(new_tokens.$eggplant-500, 0.25);
   }
 
-  &:focus {
-    border: 1px solid $color-eggplant-500;
-    box-shadow: 0px 0px 0px 2px rgba(170, 78, 242, 0.17);
-    color: $color-gray-800;
-
-    &::placeholder {
-      color: $color-gray-700;
-    }
+  &::placeholder {
+    @include filter-placeholder;
   }
 }
 
+@mixin filter-input {
+  @extend .form-control;
+
+  padding-right: 64px;
+  text-overflow: ellipsis;
+
+  @include filter-border;
+}
+
 @mixin filter-input-controls {
   position: absolute;
   // Stick to right side of box, do not intercept mouse events to the text input
@@ -420,57 +417,20 @@ $color-tooltip-background: #333333;
   display: flex;
   flex-flow: row nowrap;
   justify-content: end;
-}
-
-@mixin filter-clear {
-  @include button-transparent;
-  @include button-icon(0.875rem);
-  position: absolute;
-  display: flex;
-  width: 0.875rem;
-  height: 0.875rem;
-  color: $color-gray-600;
-
-  &:hover {
-    color: $color-gray-400;
-  }
-
-  &:focus-within {
-    color: $color-gray-700;
-  }
-}
-
-@mixin filter-submit {
-  span > svg {
-    fill: currentColor;
-
-    display: block;
-    height: 1rem;
-    aspect-ratio: 1/1;
-  }
-
-  display: flex;
-
-  justify-content: center;
-  align-items: center;
 
-  height: 100%;
-  aspect-ratio: 1/1;
-
-  color: $color-eggplant-700;
-  border-radius: 0.375rem;
+  button {
+    @include button-icon(16px);
+    color: new_tokens.$gray-800;
+    min-width: 32px;
 
-  &[disabled] {
-    color: $color-gray-700;
-  }
-
-  &:focus {
-    border: 1px solid $color-eggplant-500;
-    box-shadow: 0px 0px 0px 2px rgba(170, 78, 242, 0.17);
-  }
+    &:hover,
+    &:focus {
+      color: var(--bs-primary);
+    }
 
-  &:hover svg {
-    color: $color-eggplant-500;
+    span svg {
+      stroke: none;
+    }
   }
 }
 
@@ -520,11 +480,6 @@ select {
   background-repeat: no-repeat, repeat;
   background-position: right 0.7em top 50%, 0 0;
   background-size: 0.65em auto, 100%;
-
-  &:focus,
-  &:hover {
-    color: $color-secondary-dark;
-  }
 }
 
 // #endregion
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 97ec13c452..e80ad7e49e 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -41,6 +41,7 @@ $vpp-location-padding: 1rem;
 @import "crowding";
 @import "cutout_overlay";
 @import "data_status_banner";
+@import "date_time_picker";
 @import "detour_list_page";
 @import "detours/detour_map";
 @import "detours/detour_modal";
@@ -102,7 +103,6 @@ $vpp-location-padding: 1rem;
 @import "properties_panel/tab_panels";
 @import "properties_panel/vehicle_properties_panel";
 @import "recent_searches";
-@import "route_filter";
 @import "route_ladder";
 @import "route_ladders";
 @import "route_picker";
diff --git a/assets/css/bootstrap/_extra_bespoke.scss b/assets/css/bootstrap/_extra_bespoke.scss
index d04ccf64ff..4cef2ccaf2 100644
--- a/assets/css/bootstrap/_extra_bespoke.scss
+++ b/assets/css/bootstrap/_extra_bespoke.scss
@@ -12,3 +12,24 @@
   --bs-btn-active-color: #{new_tokens.$lemon-800};
   --bs-btn-active-border-color: #{new_tokens.$lemon-700};
 }
+
+.input-group-filter {
+  position: relative;
+  display: flex;
+
+  input {
+    @include filter-input;
+
+    & + div {
+      @include filter-input-controls;
+    }
+  }
+}
+
+.select-filter {
+  @include filter-border;
+
+  &:has(option[value="all"]:checked) {
+    @include filter-placeholder;
+  }
+}
diff --git a/assets/css/detours/_detour_table.scss b/assets/css/detours/_detour_table.scss
index 0f1cace9c7..794b8e0741 100644
--- a/assets/css/detours/_detour_table.scss
+++ b/assets/css/detours/_detour_table.scss
@@ -21,21 +21,14 @@ $table-border-radius: 0.5rem;
   .search-header {
     th {
       background: tokens.$eggplant-50;
-    }
-
-    &__select {
-      width: 33%;
 
       label {
         @include filter-label;
       }
 
-      select {
-        width: 80%;
-
-        @include media-breakpoint-down(lg) {
-          width: 100%;
-        }
+      &.c-detours-table__col-sm {
+        width: 15%;
+        min-width: 150px;
       }
     }
   }
@@ -110,68 +103,3 @@ $table-border-radius: 0.5rem;
 .c-detours-table__route-info-direction {
   color: tokens.$gray-600;
 }
-
-.c-detour-list-filter__text {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  width: 80%;
-  margin-top: 0.5rem;
-}
-
-.c-detour-list-filter__label {
-  @include filter-label;
-}
-
-.c-detour-list-filter__input-container {
-  height: 100%;
-  padding-block: 0;
-  width: 100%;
-  border-color: $color-gray-400;
-  border-radius: 6px;
-
-  &:hover {
-    border-color: tokens.$eggplant-400;
-    outline: 0;
-    box-shadow: 0 0 0 0.25rem rgba(109, 57, 172, 0.25);
-    border-right: none;
-  }
-
-  &:focus,
-  &:focus-within,
-  &:active {
-    border-color: tokens.$eggplant-400;
-    outline: 0;
-    box-shadow: 0 0 0 0.25rem rgba(109, 57, 172, 0.25);
-    border-right: none;
-  }
-}
-
-.c-detour-list-filter__input {
-  @include filter-input;
-  height: 2.375rem;
-  box-sizing: border-box;
-  border-radius: 6px;
-  font-size: 1rem;
-  width: 100%;
-
-  &::placeholder {
-    opacity: 1;
-    color: $color-gray-600;
-  }
-}
-
-.c-detour-list-filter__input-controls {
-  @include filter-input-controls;
-}
-
-.c-detour-list-filter__clear {
-  @include filter-clear;
-  right: 2.5rem;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.c-detour-list-filter__submit {
-  @include filter-submit;
-}
diff --git a/assets/package-lock.json b/assets/package-lock.json
index d58c881f47..882373238d 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -18,6 +18,7 @@
         "@xstate/react": "^4.1.1",
         "bootstrap": "^5.3.2",
         "core-js": "^3.28.0",
+        "flatpickr": "^4.6.13",
         "identity-obj-proxy": "^3.0.0",
         "leaflet": "^1.9.3",
         "leaflet-defaulticon-compatibility": "^0.1.1",
@@ -12111,6 +12112,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/flatpickr": {
+      "version": "4.6.13",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
+      "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw=="
+    },
     "node_modules/flatted": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
diff --git a/assets/package.json b/assets/package.json
index fc09ae8490..e8d5a60fc0 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -35,6 +35,7 @@
     "@xstate/react": "^4.1.1",
     "bootstrap": "^5.3.2",
     "core-js": "^3.28.0",
+    "flatpickr": "^4.6.13",
     "identity-obj-proxy": "^3.0.0",
     "leaflet": "^1.9.3",
     "leaflet-defaulticon-compatibility": "^0.1.1",
diff --git a/assets/src/components/dateTimePicker.tsx b/assets/src/components/dateTimePicker.tsx
new file mode 100644
index 0000000000..8b5da11817
--- /dev/null
+++ b/assets/src/components/dateTimePicker.tsx
@@ -0,0 +1,71 @@
+import React, { useRef, useEffect } from "react"
+import flatpickr from "flatpickr"
+import { Options } from "flatpickr/dist/types/options"
+
+import "flatpickr/dist/flatpickr.css"
+import { Calendar } from "../helpers/bsIcons"
+import { CircleXIcon } from "./circleXIcon"
+
+interface Props {
+  value: Date[]
+  options: Options
+  className?: string
+}
+
+export const DateTimePicker = ({
+  value,
+  options,
+  className,
+  ...props
+}: Props) => {
+  const inputRef = useRef<HTMLDivElement | null>(null)
+  const fpRef = useRef<flatpickr.Instance | null>(null)
+
+  useEffect(() => {
+    if (inputRef.current) {
+      fpRef.current = flatpickr(inputRef.current, {
+        altInput: true,
+        altFormat: "D, M j, Y",
+        wrap: true,
+        mode: "multiple",
+        ...options,
+      })
+    }
+
+    return () => {
+      if (fpRef.current) {
+        fpRef.current.destroy()
+        fpRef.current = null
+      }
+    }
+    // needed to prevent the flatpickr instance from being recreated on rerender
+    // as a react wrapper, we don't want to list out all their possible configuration options here
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    if (fpRef.current) {
+      fpRef.current.setDate(value)
+    }
+  }, [value])
+
+  return (
+    <div className={`input-group-filter ${className || ""}`} ref={inputRef}>
+      <input type="text" data-input placeholder="Select date" {...props} />
+      <div className="">
+        {fpRef.current && fpRef.current.selectedDates.length > 0 && (
+          <button onClick={() => fpRef.current && fpRef.current.clear()}>
+            <span>
+              <CircleXIcon />
+            </span>
+          </button>
+        )}
+        <button data-toggle>
+          <span>
+            <Calendar />
+          </span>
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/assets/src/components/detourListPage.tsx b/assets/src/components/detourListPage.tsx
index 2cd4a925e3..4a9fbb4261 100644
--- a/assets/src/components/detourListPage.tsx
+++ b/assets/src/components/detourListPage.tsx
@@ -79,42 +79,52 @@ export const DetourListPage = () => {
       )}
       {activeDetours && draftDetours && pastDetours ? (
         <>
-          <Title
-            title="Active detours"
-            icon={GlobeAmericas}
-            visibility="All Skate users"
-            classNames={["d-flex"]}
-          />
           <DetoursTable
             data={activeDetours}
             status={DetourStatus.Active}
             onOpenDetour={onOpenDetour}
             classNames={["mb-5"]}
+            title={
+              <Title
+                title="Active detours"
+                icon={GlobeAmericas}
+                visibility="All Skate users"
+                classNames={["d-flex"]}
+              />
+            }
           />
+          {/* options
+            1. move title into DetourTable
+            2. add Button here, onClick={clearDetour} ... requires value exposed ... 
+          */}
           {userInTestGroup(TestGroups.DetoursPilot) && (
             <>
-              <Title
-                title="Draft detours"
-                icon={LockFill}
-                visibility="Only you"
-                classNames={["u-hide-for-mobile", "d-md-flex"]}
-              />
               <DetoursTable
                 data={draftDetours}
                 status={DetourStatus.Draft}
                 onOpenDetour={onOpenDetour}
+                title={
+                  <Title
+                    title="Draft detours"
+                    icon={LockFill}
+                    visibility="Only you"
+                    classNames={["u-hide-for-mobile", "d-md-flex"]}
+                  />
+                }
                 classNames={["mb-5", "u-hide-for-mobile"]}
               />
-              <Title
-                title="Closed detours"
-                icon={PeopleFill}
-                visibility="Dispatchers and supervisors"
-                classNames={["u-hide-for-mobile", "d-md-flex"]}
-              />
               <DetoursTable
                 data={pastDetours}
                 status={DetourStatus.Closed}
                 onOpenDetour={onOpenDetour}
+                title={
+                  <Title
+                    title="Closed detours"
+                    icon={PeopleFill}
+                    visibility="Dispatchers and supervisors"
+                    classNames={["u-hide-for-mobile", "d-md-flex"]}
+                  />
+                }
                 routeId={routeId}
                 setRouteId={setRouteId}
                 routes={routes}
diff --git a/assets/src/components/detours/activateDetourModal.tsx b/assets/src/components/detours/activateDetourModal.tsx
index eba4a2a009..883d93653a 100644
--- a/assets/src/components/detours/activateDetourModal.tsx
+++ b/assets/src/components/detours/activateDetourModal.tsx
@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from "react"
 import { Button, Form, Modal } from "react-bootstrap"
 import { StepperBar } from "../stepperBar"
+import detourReasons from "../../data/detourReasons"
 
 export const possibleDurations = [
   "1 hour",
@@ -15,28 +16,6 @@ export const possibleDurations = [
   "Until further notice",
 ]
 
-const possibleReasons = [
-  "Accident",
-  "Construction",
-  "Demonstration",
-  "Disabled bus",
-  "Drawbridge being raised",
-  "Electrical work",
-  "Fire",
-  "Hazmat condition",
-  "Holiday",
-  "Hurricane",
-  "Maintenance",
-  "Medical emergency",
-  "Parade",
-  "Police activity",
-  "Snow",
-  "Special event",
-  "Tie replacement",
-  "Traffic",
-  "Weather",
-]
-
 interface SurroundingModalProps extends PropsWithChildren {
   onCancel: () => void
   onNext?: () => void
@@ -149,7 +128,7 @@ const SelectingReason = ({
     <StepperBar totalSteps={3} currentStep={2} />
     <StepSubtitle>Step 2 of 3 - Select reason for detour</StepSubtitle>
     <Form>
-      {possibleReasons.map((reason) => (
+      {detourReasons.map((reason) => (
         <Form.Check
           className="mb-2"
           onChange={() => {
diff --git a/assets/src/components/detoursTable.tsx b/assets/src/components/detoursTable.tsx
index 85b8776fdc..0278c7be53 100644
--- a/assets/src/components/detoursTable.tsx
+++ b/assets/src/components/detoursTable.tsx
@@ -1,12 +1,14 @@
-import React, { useState, useEffect } from "react"
+import React, { useState, useEffect, useMemo } from "react"
 import { Table, Form, Button } from "react-bootstrap"
 import { XSquare } from "../helpers/bsIcons"
 import { RoutePill } from "./routePill"
+import { DateTimePicker } from "./dateTimePicker"
 import { useCurrentTime } from "../hooks/useCurrentTime"
 import {
   timeAgoLabel,
   timeAgoLabelFromDate,
   dateFromEpochSeconds,
+  isSameDay,
 } from "../util/dateTime"
 import { SimpleDetour } from "../models/detoursList"
 import { EmptyDetourTableIcon } from "../helpers/skateIcons"
@@ -15,11 +17,13 @@ import { Route } from "../schedule"
 import { CircleXIcon } from "./circleXIcon"
 import { SearchIcon } from "../helpers/icon"
 import { fullStoryEvent } from "../helpers/fullStory"
+import detourReasons from "../data/detourReasons"
 
 interface DetoursTableProps {
   data: SimpleDetour[]
   onOpenDetour: (detourId: number) => void
   status: DetourStatus
+  title: React.ReactNode
   routes?: Route[] | null
   routeId?: string
   setRouteId?: (routeId: string) => void
@@ -59,6 +63,7 @@ export const DetoursTable = ({
   data,
   onOpenDetour,
   status,
+  title,
   routes,
   routeId,
   setRouteId = () => {},
@@ -66,6 +71,9 @@ export const DetoursTable = ({
 }: DetoursTableProps) => {
   const [filter, setFilter] = useState("")
   const [debouncedFilter, setDebouncedFilter] = useState(filter)
+  const [dates, setDates] = useState<Date[]>([])
+  const [reason, setReason] = useState<string>("all")
+  const hasFilters = routes && status === DetourStatus.Closed
 
   useEffect(() => {
     const handler = setTimeout(() => {
@@ -80,134 +88,187 @@ export const DetoursTable = ({
   const resetInputs = () => {
     setRouteId("all")
     setFilter("")
+    setDates([])
+    setReason("all")
   }
 
-  const filteredData = data.filter((detour) =>
-    detour.intersection.toLowerCase().includes(debouncedFilter.toLowerCase())
-  )
+  const filteredData = useMemo(() => {
+    let result = data
+
+    if (debouncedFilter !== "") {
+      result = result.filter((detour) =>
+        detour.intersection
+          .toLowerCase()
+          .includes(debouncedFilter.toLowerCase())
+      )
+    }
+
+    if (dates.length > 0) {
+      result = result.filter((detour) => {
+        const updatedDate = dateFromEpochSeconds(detour.updatedAt)
+        return dates.some((date) => isSameDay(date, updatedDate))
+      })
+    }
+
+    if (reason !== "all") {
+      result = result.filter(
+        (detour) => reason.toLowerCase() === detour.reason?.toLowerCase()
+      )
+    }
+
+    return result
+  }, [data, debouncedFilter, dates, reason])
 
   return (
-    <Table
-      hover={!!filteredData.length}
-      className={joinClasses([...classNames, "c-detours-table"])}
-      variant={status === DetourStatus.Active ? "active-detour" : ""}
-    >
-      <thead className="u-hide-for-mobile">
-        {routes && status === DetourStatus.Closed && (
-          <tr className="search-header">
-            <th className="search-header__select px-3 py-3">
-              <Form.Label htmlFor="route-name">Route</Form.Label>
-              <Form.Select
-                id="route-name"
-                className="mt-2"
-                value={routeId}
-                onChange={(changeEvent) => {
-                  setRouteId(changeEvent.target.value)
-                }}
-              >
-                <option key="" value="all">
-                  Please select route
-                </option>
-                {routes?.map((route: Route) => (
-                  <option key={route.id} value={route.id}>
-                    {route.name}
-                  </option>
-                ))}
-              </Form.Select>
-            </th>
-            <th className="px-3 py-3">
-              <div className="c-detour-list-filter">
-                <label
-                  className="c-detour-list-filter__label"
-                  htmlFor="intersection-filter"
+    <>
+      <div className="d-flex flex-row justify-content-between align-items-start">
+        {title}
+        {hasFilters && (
+          <Button
+            className="icon-link u-hide-for-mobile"
+            variant="outline-primary"
+            data-fs-element="Reset detour search"
+            type="button"
+            title="Clear Search"
+            onClick={resetInputs}
+          >
+            <XSquare />
+            Clear
+          </Button>
+        )}
+      </div>
+      <Table
+        hover={!!filteredData.length}
+        className={joinClasses([...classNames, "c-detours-table"])}
+        variant={status === DetourStatus.Active ? "active-detour" : ""}
+      >
+        <thead className="u-hide-for-mobile">
+          {hasFilters && (
+            <tr className="search-header">
+              <th className="px-3 py-3">
+                <Form.Label htmlFor="route-name">Route</Form.Label>
+                <Form.Select
+                  id="route-name"
+                  className="select-filter mt-2"
+                  value={routeId}
+                  onChange={(changeEvent) => {
+                    setRouteId(changeEvent.target.value)
+                  }}
                 >
+                  <option key="" value="all">
+                    Select route
+                  </option>
+                  {routes?.map((route: Route) => (
+                    <option key={route.id} value={route.id}>
+                      {route.name}
+                    </option>
+                  ))}
+                </Form.Select>
+              </th>
+              <th className="px-3 py-3">
+                <label htmlFor="intersection-filter">
                   Starting intersection
                 </label>
-                <div className="c-detour-list-filter__text">
-                  <div className="c-detour-list-filter__input-container">
-                    <input
-                      id="intersection-filter"
-                      type="text"
-                      placeholder="Search..."
-                      value={filter}
-                      onBlur={() =>
-                        fullStoryEvent("Detour Intersection Filter Used", {})
-                      }
-                      onChange={(e) => setFilter(e.target.value)}
-                      className="c-detour-list-filter__input"
-                    />
-                  </div>
-                  <div className="c-detour-list-filter__input-controls">
+                <div className="input-group-filter mt-2">
+                  <input
+                    id="intersection-filter"
+                    type="text"
+                    placeholder="Search..."
+                    value={filter}
+                    onBlur={() =>
+                      fullStoryEvent("Detour Intersection Filter Used", {})
+                    }
+                    onChange={(e) => setFilter(e.target.value)}
+                  />
+                  <div>
                     {filter.length > 0 && (
-                      <button
-                        className="c-detour-list-filter__clear"
-                        onClick={() => setFilter("")}
-                        title="Clear"
-                      >
-                        <CircleXIcon />
+                      <button onClick={() => setFilter("")} title="Clear">
+                        <span>
+                          <CircleXIcon />
+                        </span>
                       </button>
                     )}
                     <button
                       type="submit"
                       title="Submit"
-                      className="c-detour-list-filter__submit"
                       onClick={setDebouncedFilter.bind(null, filter)}
                       disabled={filter.length === 0}
                     >
-                      <SearchIcon />
+                      <span>
+                        <SearchIcon />
+                      </span>
                     </button>
                   </div>
                 </div>
-              </div>
+              </th>
+              <th className="px-3 py-3 c-detours-table__col-sm">
+                <Form.Label htmlFor="reason-name">Reason</Form.Label>
+                <Form.Select
+                  id="route-name"
+                  className="select-filter mt-2"
+                  value={reason}
+                  onChange={(e) => {
+                    setReason(e.target.value)
+                  }}
+                >
+                  <option key="" value="all">
+                    Select reason
+                  </option>
+                  {detourReasons.map((reason) => (
+                    <option key={reason} value={reason}>
+                      {reason}
+                    </option>
+                  ))}
+                </Form.Select>
+              </th>
+              <th className="px-3 py-3 c-detours-table__col-sm">
+                <div>
+                  <label htmlFor="date-filter">Date</label>
+                  <DateTimePicker
+                    className="mt-2"
+                    value={dates}
+                    options={{
+                      maxDate: "today",
+                      onChange: setDates,
+                    }}
+                  />
+                </div>
+              </th>
+            </tr>
+          )}
+          <tr>
+            <th className="px-3 py-4">Route and direction</th>
+            <th className="px-3 py-4 u-hide-for-mobile">
+              Starting Intersection
             </th>
-            <th
-              className="px-3 py-3 text-end"
-              colSpan={columnCount(status) - 2}
-            >
-              <Button
-                className="icon-link"
-                variant="outline-primary"
-                data-fs-element="Reset detour search"
-                type="button"
-                title="Clear Search"
-                onClick={resetInputs}
-              >
-                <XSquare />
-                Clear
-              </Button>
+            {hasReasonColumn(status) && (
+              <th className="px-3 py-4 u-hide-for-mobile">Reason</th>
+            )}
+            <th className="px-3 py-4 u-hide-for-mobile">
+              {timestampLabelFromStatus(status)}
             </th>
+            {status === DetourStatus.Active && (
+              <th className="px-3 py-4 u-hide-for-mobile">Est. Duration</th>
+            )}
           </tr>
-        )}
-        <tr>
-          <th className="px-3 py-4">Route and direction</th>
-          <th className="px-3 py-4 u-hide-for-mobile">Starting Intersection</th>
-          <th className="px-3 py-4 u-hide-for-mobile">
-            {timestampLabelFromStatus(status)}
-          </th>
-          {status === DetourStatus.Active && (
-            <th className="px-3 py-4 u-hide-for-mobile">Est. Duration</th>
+        </thead>
+        <tbody>
+          {filteredData.length ? (
+            <PopulatedDetourRows
+              status={status}
+              data={filteredData}
+              onOpenDetour={onOpenDetour}
+            />
+          ) : (
+            <tr aria-hidden>
+              <td colSpan={columnCount(status)} className="p-3 p-md-4">
+                <EmptyDetourContent message={`No ${status} detours.`} />
+              </td>
+            </tr>
           )}
-          {hasReasonColumn(status) && (
-            <th className="px-3 py-4 u-hide-for-mobile">Reason</th>
-          )}
-        </tr>
-      </thead>
-      <tbody>
-        {filteredData.length ? (
-          <PopulatedDetourRows
-            status={status}
-            data={filteredData}
-            onOpenDetour={onOpenDetour}
-          />
-        ) : (
-          <tr aria-hidden>
-            <td colSpan={columnCount(status)} className="p-3 p-md-4">
-              <EmptyDetourContent message={`No ${status} detours.`} />
-            </td>
-          </tr>
-        )}
-      </tbody>
-    </Table>
+        </tbody>
+      </Table>
+    </>
   )
 }
 
@@ -255,6 +316,11 @@ const PopulatedDetourRows = ({
           <td className="align-middle p-3 u-hide-for-mobile">
             {detour.intersection}
           </td>
+          {hasReasonColumn(status) && (
+            <td className="align-middle p-3 u-hide-for-mobile">
+              {detour.reason}
+            </td>
+          )}
           <td className="align-middle p-3 u-hide-for-mobile">
             {status === DetourStatus.Active && detour.activatedAt ? (
               <>
@@ -274,11 +340,6 @@ const PopulatedDetourRows = ({
               {detour.estimatedDuration}
             </td>
           )}
-          {hasReasonColumn(status) && (
-            <td className="align-middle p-3 u-hide-for-mobile">
-              {detour.reason}
-            </td>
-          )}
         </tr>
       ))}
     </>
diff --git a/assets/src/components/searchForm.tsx b/assets/src/components/searchForm.tsx
index f3b05d7f67..9a568e194d 100644
--- a/assets/src/components/searchForm.tsx
+++ b/assets/src/components/searchForm.tsx
@@ -299,7 +299,7 @@ export const Combobox = ({
           }
         }}
       >
-        <div className="c-search-form__search-input-container">
+        <div className="input-group-filter">
           <input
             className="c-search-form__input"
             placeholder="Search"
@@ -318,53 +318,55 @@ export const Combobox = ({
             ref={formSearchInput}
             onFocus={() => setAutocompleteEnabled(true)}
           />
-        </div>
-        <div
-          className="c-search-form__input-controls"
-          role="presentation"
-          onKeyDown={(e) => {
-            // Allow buttons to be pressed by space bar by preventing the parent
-            // keydown handler
-            if (e.key === " ") {
-              e.stopPropagation()
-            }
-          }}
-        >
-          <button
-            hidden={inputText.length === 0}
-            className="c-search-form__clear c-circle-x-icon-container"
-            type="button"
-            title="Clear Search"
-            onClick={(e) => {
-              e.stopPropagation()
-              onClear?.(e)
+          <div
+            role="presentation"
+            onKeyDown={(e) => {
+              // Allow buttons to be pressed by space bar by preventing the parent
+              // keydown handler
+              if (e.key === " ") {
+                e.stopPropagation()
+              }
             }}
           >
-            <CircleXIcon />
-          </button>
-          {comboboxType == "map_search" && (
-            <button
-              type="submit"
-              title="Submit"
-              className="c-search-form__submit"
-              onClick={onSubmit}
-              // TODO(design): add error states instead of using `disabled`
-              disabled={!isValidSearchText(inputText)}
-            >
-              <SearchIcon />
-            </button>
-          )}
-          {comboboxType == "select" && (
             <button
+              hidden={inputText.length === 0}
               type="button"
-              // TODO: rename this class (follow-up PR)
-              className="c-search-form__submit"
-              onClick={onSubmit}
+              title="Clear Search"
+              onClick={(e) => {
+                e.stopPropagation()
+                onClear?.(e)
+              }}
             >
-              <ChevronDown />
+              <span>
+                <CircleXIcon />
+              </span>
             </button>
-          )}
+            {comboboxType == "map_search" && (
+              <button
+                type="submit"
+                title="Submit"
+                onClick={onSubmit}
+                // TODO(design): add error states instead of using `disabled`
+                disabled={!isValidSearchText(inputText)}
+              >
+                <span>
+                  <SearchIcon />
+                </span>
+              </button>
+            )}
+            {comboboxType == "select" && (
+              <button
+                type="button"
+                // TODO: rename this class (follow-up PR)
+                className="c-search-form__submit"
+                onClick={onSubmit}
+              >
+                <ChevronDown />
+              </button>
+            )}
+          </div>
         </div>
+
         <div
           className="c-search-form__autocomplete-container"
           hidden={!autocompleteVisible}
diff --git a/assets/src/data/detourReasons.ts b/assets/src/data/detourReasons.ts
new file mode 100644
index 0000000000..23ad36304a
--- /dev/null
+++ b/assets/src/data/detourReasons.ts
@@ -0,0 +1,23 @@
+const detourReasons = [
+  "Accident",
+  "Construction",
+  "Demonstration",
+  "Disabled bus",
+  "Drawbridge being raised",
+  "Electrical work",
+  "Fire",
+  "Hazmat condition",
+  "Holiday",
+  "Hurricane",
+  "Maintenance",
+  "Medical emergency",
+  "Parade",
+  "Police activity",
+  "Snow",
+  "Special event",
+  "Tie replacement",
+  "Traffic",
+  "Weather",
+]
+
+export default detourReasons
diff --git a/assets/src/helpers/bsIcons.tsx b/assets/src/helpers/bsIcons.tsx
index 99b56ed1f0..43303fff44 100644
--- a/assets/src/helpers/bsIcons.tsx
+++ b/assets/src/helpers/bsIcons.tsx
@@ -165,6 +165,25 @@ export const Brush = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/calendar3/
+ */
+export const Calendar = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-calendar3"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z" />
+    <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/card-checklist/
  */
diff --git a/assets/src/hooks/useRouteFilter.tsx b/assets/src/hooks/useRouteFilter.tsx
index 5a0d71ed44..52fd1f7b13 100644
--- a/assets/src/hooks/useRouteFilter.tsx
+++ b/assets/src/hooks/useRouteFilter.tsx
@@ -46,24 +46,20 @@ export const RouteFilter = ({
   }
 
   return (
-    <div className="c-route-filter">
-      <div className="c-route-filter__text">
-        <input
-          className="c-route-filter__input"
-          type="text"
-          value={filterText}
-          placeholder="Search routes"
-          onChange={(event) => handleTextInput(event)}
-          onKeyDown={blurOnEnter}
-        />
-
+    <div className="input-group-filter">
+      <input
+        type="text"
+        value={filterText}
+        placeholder="Search routes"
+        onChange={(event) => handleTextInput(event)}
+        onKeyDown={blurOnEnter}
+      />
+      <div>
         {filterText.length > 0 ? (
-          <button
-            className="c-route-filter__clear"
-            onClick={clearTextInput}
-            title="Clear"
-          >
-            <CircleXIcon />
+          <button onClick={clearTextInput} title="Clear">
+            <span>
+              <CircleXIcon />
+            </span>
           </button>
         ) : null}
       </div>
diff --git a/assets/src/util/dateTime.ts b/assets/src/util/dateTime.ts
index 3d44183335..dd3ee4e1ac 100644
--- a/assets/src/util/dateTime.ts
+++ b/assets/src/util/dateTime.ts
@@ -129,3 +129,6 @@ export const timeAgoLabelFromDate = (start: Date, end: Date) => {
   const second = 1000
   return timeAgoLabel(end.getTime() / second, start.getTime() / second)
 }
+
+export const isSameDay = (first: Date, second: Date) =>
+  first.toDateString() === second.toDateString()
diff --git a/assets/tests/components/__snapshots__/app.test.tsx.snap b/assets/tests/components/__snapshots__/app.test.tsx.snap
index dd9a9e4730..3fe6dfaf66 100644
--- a/assets/tests/components/__snapshots__/app.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/app.test.tsx.snap
@@ -319,18 +319,14 @@ exports[`App renders 1`] = `
                 class="c-route-picker u-hideable"
               >
                 <div
-                  class="c-route-filter"
+                  class="input-group-filter"
                 >
-                  <div
-                    class="c-route-filter__text"
-                  >
-                    <input
-                      class="c-route-filter__input"
-                      placeholder="Search routes"
-                      type="text"
-                      value=""
-                    />
-                  </div>
+                  <input
+                    placeholder="Search routes"
+                    type="text"
+                    value=""
+                  />
+                  <div />
                 </div>
                 <div
                   class="c-garage-filter"
diff --git a/assets/tests/components/__snapshots__/appStateWrapper.test.tsx.snap b/assets/tests/components/__snapshots__/appStateWrapper.test.tsx.snap
index 8b0099cb42..1bf116aff8 100644
--- a/assets/tests/components/__snapshots__/appStateWrapper.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/appStateWrapper.test.tsx.snap
@@ -319,18 +319,14 @@ exports[`renders 1`] = `
                 class="c-route-picker u-hideable"
               >
                 <div
-                  class="c-route-filter"
+                  class="input-group-filter"
                 >
-                  <div
-                    class="c-route-filter__text"
-                  >
-                    <input
-                      class="c-route-filter__input"
-                      placeholder="Search routes"
-                      type="text"
-                      value=""
-                    />
-                  </div>
+                  <input
+                    placeholder="Search routes"
+                    type="text"
+                    value=""
+                  />
+                  <div />
                 </div>
                 <div
                   class="c-garage-filter"
diff --git a/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap b/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap
index f1f7b1725d..77a0aed1f3 100644
--- a/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap
@@ -40,18 +40,14 @@ exports[`LadderPage renders the empty state 1`] = `
         class="c-route-picker u-hideable"
       >
         <div
-          class="c-route-filter"
+          class="input-group-filter"
         >
-          <div
-            class="c-route-filter__text"
-          >
-            <input
-              class="c-route-filter__input"
-              placeholder="Search routes"
-              type="text"
-              value=""
-            />
-          </div>
+          <input
+            placeholder="Search routes"
+            type="text"
+            value=""
+          />
+          <div />
         </div>
         <div
           class="c-garage-filter"
@@ -156,18 +152,14 @@ exports[`LadderPage renders with alerts 1`] = `
         class="c-route-picker u-hideable"
       >
         <div
-          class="c-route-filter"
+          class="input-group-filter"
         >
-          <div
-            class="c-route-filter__text"
-          >
-            <input
-              class="c-route-filter__input"
-              placeholder="Search routes"
-              type="text"
-              value=""
-            />
-          </div>
+          <input
+            placeholder="Search routes"
+            type="text"
+            value=""
+          />
+          <div />
         </div>
         <div
           class="c-garage-filter"
@@ -444,18 +436,14 @@ exports[`LadderPage renders with route tabs 1`] = `
         class="c-route-picker u-hideable"
       >
         <div
-          class="c-route-filter"
+          class="input-group-filter"
         >
-          <div
-            class="c-route-filter__text"
-          >
-            <input
-              class="c-route-filter__input"
-              placeholder="Search routes"
-              type="text"
-              value=""
-            />
-          </div>
+          <input
+            placeholder="Search routes"
+            type="text"
+            value=""
+          />
+          <div />
         </div>
         <div
           class="c-garage-filter"
@@ -685,18 +673,14 @@ exports[`LadderPage renders with selectedRoutes in different order than routes d
         class="c-route-picker u-hideable"
       >
         <div
-          class="c-route-filter"
+          class="input-group-filter"
         >
-          <div
-            class="c-route-filter__text"
-          >
-            <input
-              class="c-route-filter__input"
-              placeholder="Search routes"
-              type="text"
-              value=""
-            />
-          </div>
+          <input
+            placeholder="Search routes"
+            type="text"
+            value=""
+          />
+          <div />
         </div>
         <div
           class="c-garage-filter"
@@ -946,18 +930,14 @@ exports[`LadderPage renders with timepoints 1`] = `
         class="c-route-picker u-hideable"
       >
         <div
-          class="c-route-filter"
+          class="input-group-filter"
         >
-          <div
-            class="c-route-filter__text"
-          >
-            <input
-              class="c-route-filter__input"
-              placeholder="Search routes"
-              type="text"
-              value=""
-            />
-          </div>
+          <input
+            placeholder="Search routes"
+            type="text"
+            value=""
+          />
+          <div />
         </div>
         <div
           class="c-garage-filter"
diff --git a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
index 51880cd997..5ed5b2b3cf 100644
--- a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<MapPage /> Snapshot renders the empty state 1`] = `
             role="presentation"
           >
             <div
-              class="c-search-form__search-input-container"
+              class="input-group-filter"
             >
               <input
                 aria-controls=":rk:"
@@ -44,50 +44,51 @@ exports[`<MapPage /> Snapshot renders the empty state 1`] = `
                 type="text"
                 value=""
               />
-            </div>
-            <div
-              class="c-search-form__input-controls"
-              role="presentation"
-            >
-              <button
-                class="c-search-form__clear c-circle-x-icon-container"
-                hidden=""
-                title="Clear Search"
-                type="button"
+              <div
+                role="presentation"
               >
-                <svg
-                  class="c-circle-x-icon"
-                  viewBox="0 0 48 48"
-                  xmlns="http://www.w3.org/2000/svg"
+                <button
+                  hidden=""
+                  title="Clear Search"
+                  type="button"
                 >
-                  <circle
-                    class="c-circle-x-icon__focus-circle"
-                    cx="50%"
-                    cy="50%"
-                    r="75%"
-                  />
-                  <circle
-                    class="c-circle-x-icon__white-fill"
-                    cx="50%"
-                    cy="50%"
-                    r="75%"
-                  />
-                  <path
-                    class="c-circle-x-icon__path"
-                    d="m24 .05a24 24 0 1 0 24 23.95 24 24 0 0 0 -24-23.95zm13.19 32.54a3.33 3.33 0 1 1 -4.73 4.69l-8.46-8.57-8.57 8.48a3.33 3.33 0 1 1 -4.69-4.73l8.55-8.46-8.48-8.57a3.33 3.33 0 1 1 4.73-4.69l8.46 8.55 8.57-8.48a3.33 3.33 0 0 1 2.35-1 3.35 3.35 0 0 1 3.33 3.35 3.33 3.33 0 0 1 -1 2.35l-8.54 8.49z"
-                  />
-                </svg>
-              </button>
-              <button
-                class="c-search-form__submit"
-                disabled=""
-                title="Submit"
-                type="submit"
-              >
-                <span>
-                  <svg />
-                </span>
-              </button>
+                  <span>
+                    <svg
+                      class="c-circle-x-icon"
+                      viewBox="0 0 48 48"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle
+                        class="c-circle-x-icon__focus-circle"
+                        cx="50%"
+                        cy="50%"
+                        r="75%"
+                      />
+                      <circle
+                        class="c-circle-x-icon__white-fill"
+                        cx="50%"
+                        cy="50%"
+                        r="75%"
+                      />
+                      <path
+                        class="c-circle-x-icon__path"
+                        d="m24 .05a24 24 0 1 0 24 23.95 24 24 0 0 0 -24-23.95zm13.19 32.54a3.33 3.33 0 1 1 -4.73 4.69l-8.46-8.57-8.57 8.48a3.33 3.33 0 1 1 -4.69-4.73l8.55-8.46-8.48-8.57a3.33 3.33 0 1 1 4.73-4.69l8.46 8.55 8.57-8.48a3.33 3.33 0 0 1 2.35-1 3.35 3.35 0 0 1 3.33 3.35 3.33 3.33 0 0 1 -1 2.35l-8.54 8.49z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <button
+                  disabled=""
+                  title="Submit"
+                  type="submit"
+                >
+                  <span>
+                    <span>
+                      <svg />
+                    </span>
+                  </span>
+                </button>
+              </div>
             </div>
             <div
               class="c-search-form__autocomplete-container"
@@ -617,7 +618,7 @@ exports[`<MapPage /> Snapshot renders the null state 1`] = `
             role="presentation"
           >
             <div
-              class="c-search-form__search-input-container"
+              class="input-group-filter"
             >
               <input
                 aria-controls=":r0:"
@@ -630,50 +631,51 @@ exports[`<MapPage /> Snapshot renders the null state 1`] = `
                 type="text"
                 value=""
               />
-            </div>
-            <div
-              class="c-search-form__input-controls"
-              role="presentation"
-            >
-              <button
-                class="c-search-form__clear c-circle-x-icon-container"
-                hidden=""
-                title="Clear Search"
-                type="button"
+              <div
+                role="presentation"
               >
-                <svg
-                  class="c-circle-x-icon"
-                  viewBox="0 0 48 48"
-                  xmlns="http://www.w3.org/2000/svg"
+                <button
+                  hidden=""
+                  title="Clear Search"
+                  type="button"
                 >
-                  <circle
-                    class="c-circle-x-icon__focus-circle"
-                    cx="50%"
-                    cy="50%"
-                    r="75%"
-                  />
-                  <circle
-                    class="c-circle-x-icon__white-fill"
-                    cx="50%"
-                    cy="50%"
-                    r="75%"
-                  />
-                  <path
-                    class="c-circle-x-icon__path"
-                    d="m24 .05a24 24 0 1 0 24 23.95 24 24 0 0 0 -24-23.95zm13.19 32.54a3.33 3.33 0 1 1 -4.73 4.69l-8.46-8.57-8.57 8.48a3.33 3.33 0 1 1 -4.69-4.73l8.55-8.46-8.48-8.57a3.33 3.33 0 1 1 4.73-4.69l8.46 8.55 8.57-8.48a3.33 3.33 0 0 1 2.35-1 3.35 3.35 0 0 1 3.33 3.35 3.33 3.33 0 0 1 -1 2.35l-8.54 8.49z"
-                  />
-                </svg>
-              </button>
-              <button
-                class="c-search-form__submit"
-                disabled=""
-                title="Submit"
-                type="submit"
-              >
-                <span>
-                  <svg />
-                </span>
-              </button>
+                  <span>
+                    <svg
+                      class="c-circle-x-icon"
+                      viewBox="0 0 48 48"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <circle
+                        class="c-circle-x-icon__focus-circle"
+                        cx="50%"
+                        cy="50%"
+                        r="75%"
+                      />
+                      <circle
+                        class="c-circle-x-icon__white-fill"
+                        cx="50%"
+                        cy="50%"
+                        r="75%"
+                      />
+                      <path
+                        class="c-circle-x-icon__path"
+                        d="m24 .05a24 24 0 1 0 24 23.95 24 24 0 0 0 -24-23.95zm13.19 32.54a3.33 3.33 0 1 1 -4.73 4.69l-8.46-8.57-8.57 8.48a3.33 3.33 0 1 1 -4.69-4.73l8.55-8.46-8.48-8.57a3.33 3.33 0 1 1 4.73-4.69l8.46 8.55 8.57-8.48a3.33 3.33 0 0 1 2.35-1 3.35 3.35 0 0 1 3.33 3.35 3.33 3.33 0 0 1 -1 2.35l-8.54 8.49z"
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <button
+                  disabled=""
+                  title="Submit"
+                  type="submit"
+                >
+                  <span>
+                    <span>
+                      <svg />
+                    </span>
+                  </span>
+                </button>
+              </div>
             </div>
             <div
               class="c-search-form__autocomplete-container"
diff --git a/assets/tests/components/__snapshots__/routePicker.test.tsx.snap b/assets/tests/components/__snapshots__/routePicker.test.tsx.snap
index c6f819e357..4a65f6d533 100644
--- a/assets/tests/components/__snapshots__/routePicker.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/routePicker.test.tsx.snap
@@ -5,20 +5,16 @@ exports[`RoutePicker renders a list of routes and presets toggle 1`] = `
   className="c-route-picker u-hideable"
 >
   <div
-    className="c-route-filter"
+    className="input-group-filter"
   >
-    <div
-      className="c-route-filter__text"
-    >
-      <input
-        className="c-route-filter__input"
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        placeholder="Search routes"
-        type="text"
-        value=""
-      />
-    </div>
+    <input
+      onChange={[Function]}
+      onKeyDown={[Function]}
+      placeholder="Search routes"
+      type="text"
+      value=""
+    />
+    <div />
   </div>
   <div
     className="c-garage-filter"
@@ -136,20 +132,16 @@ exports[`RoutePicker renders a loading/empty state 1`] = `
   className="c-route-picker u-hideable"
 >
   <div
-    className="c-route-filter"
+    className="input-group-filter"
   >
-    <div
-      className="c-route-filter__text"
-    >
-      <input
-        className="c-route-filter__input"
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        placeholder="Search routes"
-        type="text"
-        value=""
-      />
-    </div>
+    <input
+      onChange={[Function]}
+      onKeyDown={[Function]}
+      placeholder="Search routes"
+      type="text"
+      value=""
+    />
+    <div />
   </div>
   <div
     className="c-garage-filter"
diff --git a/assets/tests/components/__snapshots__/searchForm.test.tsx.snap b/assets/tests/components/__snapshots__/searchForm.test.tsx.snap
index 35f4866402..d0e1bdbd0d 100644
--- a/assets/tests/components/__snapshots__/searchForm.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/searchForm.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`Combobox renders 1`] = `
     role="presentation"
   >
     <div
-      className="c-search-form__search-input-container"
+      className="input-group-filter"
     >
       <input
         aria-controls=":r0:"
@@ -28,57 +28,58 @@ exports[`Combobox renders 1`] = `
         type="text"
         value=""
       />
-    </div>
-    <div
-      className="c-search-form__input-controls"
-      onKeyDown={[Function]}
-      role="presentation"
-    >
-      <button
-        className="c-search-form__clear c-circle-x-icon-container"
-        hidden={true}
-        onClick={[Function]}
-        title="Clear Search"
-        type="button"
+      <div
+        onKeyDown={[Function]}
+        role="presentation"
       >
-        <svg
-          className="c-circle-x-icon"
-          viewBox="0 0 48 48"
-          xmlns="http://www.w3.org/2000/svg"
+        <button
+          hidden={true}
+          onClick={[Function]}
+          title="Clear Search"
+          type="button"
         >
-          <circle
-            className="c-circle-x-icon__focus-circle"
-            cx="50%"
-            cy="50%"
-            r="75%"
-          />
-          <circle
-            className="c-circle-x-icon__white-fill"
-            cx="50%"
-            cy="50%"
-            r="75%"
-          />
-          <path
-            className="c-circle-x-icon__path"
-            d="m24 .05a24 24 0 1 0 24 23.95 24 24 0 0 0 -24-23.95zm13.19 32.54a3.33 3.33 0 1 1 -4.73 4.69l-8.46-8.57-8.57 8.48a3.33 3.33 0 1 1 -4.69-4.73l8.55-8.46-8.48-8.57a3.33 3.33 0 1 1 4.73-4.69l8.46 8.55 8.57-8.48a3.33 3.33 0 0 1 2.35-1 3.35 3.35 0 0 1 3.33 3.35 3.33 3.33 0 0 1 -1 2.35l-8.54 8.49z"
-          />
-        </svg>
-      </button>
-      <button
-        className="c-search-form__submit"
-        disabled={true}
-        onClick={[Function]}
-        title="Submit"
-        type="submit"
-      >
-        <span
-          dangerouslySetInnerHTML={
-            {
-              "__html": "<svg/>",
-            }
-          }
-        />
-      </button>
+          <span>
+            <svg
+              className="c-circle-x-icon"
+              viewBox="0 0 48 48"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                className="c-circle-x-icon__focus-circle"
+                cx="50%"
+                cy="50%"
+                r="75%"
+              />
+              <circle
+                className="c-circle-x-icon__white-fill"
+                cx="50%"
+                cy="50%"
+                r="75%"
+              />
+              <path
+                className="c-circle-x-icon__path"
+                d="m24 .05a24 24 0 1 0 24 23.95 24 24 0 0 0 -24-23.95zm13.19 32.54a3.33 3.33 0 1 1 -4.73 4.69l-8.46-8.57-8.57 8.48a3.33 3.33 0 1 1 -4.69-4.73l8.55-8.46-8.48-8.57a3.33 3.33 0 1 1 4.73-4.69l8.46 8.55 8.57-8.48a3.33 3.33 0 0 1 2.35-1 3.35 3.35 0 0 1 3.33 3.35 3.33 3.33 0 0 1 -1 2.35l-8.54 8.49z"
+              />
+            </svg>
+          </span>
+        </button>
+        <button
+          disabled={true}
+          onClick={[Function]}
+          title="Submit"
+          type="submit"
+        >
+          <span>
+            <span
+              dangerouslySetInnerHTML={
+                {
+                  "__html": "<svg/>",
+                }
+              }
+            />
+          </span>
+        </button>
+      </div>
     </div>
     <div
       className="c-search-form__autocomplete-container"
diff --git a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
index 1eab3518c9..b8f100abed 100644
--- a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
@@ -7,31 +7,35 @@ exports[`DetourListPage orders active detour list by updatedAt value 1`] = `
       class="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white"
     >
       <div
-        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="d-flex flex-row justify-content-between align-items-start"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        <div
+          class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
         >
-          Active detours
-        </h2>
-        <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
-          />
-        </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
-        >
-          All Skate users
-        </span>
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Active detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            All Skate users
+          </span>
+        </div>
       </div>
       <table
         class="mb-5 c-detours-table table table-active-detour table-hover"
@@ -53,17 +57,17 @@ exports[`DetourListPage orders active detour list by updatedAt value 1`] = `
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Last published
+              Reason
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Est. Duration
+              Last published
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Reason
+              Est. Duration
             </th>
           </tr>
         </thead>
@@ -101,6 +105,9 @@ exports[`DetourListPage orders active detour list by updatedAt value 1`] = `
             >
               Street A7 & Avenue B7
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -114,9 +121,6 @@ exports[`DetourListPage orders active detour list by updatedAt value 1`] = `
                 23 hours ago
               </div>
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
           <tr>
             <td
@@ -151,6 +155,9 @@ exports[`DetourListPage orders active detour list by updatedAt value 1`] = `
             >
               Street A6 & Avenue B6
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -164,9 +171,6 @@ exports[`DetourListPage orders active detour list by updatedAt value 1`] = `
                 Aug 26, 2024
               </div>
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
           <tr>
             <td
@@ -201,6 +205,9 @@ exports[`DetourListPage orders active detour list by updatedAt value 1`] = `
             >
               Street A5 & Avenue B5
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -214,9 +221,6 @@ exports[`DetourListPage orders active detour list by updatedAt value 1`] = `
                 Aug 27, 2024
               </div>
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
         </tbody>
       </table>
@@ -259,31 +263,35 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
         </span>
       </button>
       <div
-        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="d-flex flex-row justify-content-between align-items-start"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
-        >
-          Active detours
-        </h2>
-        <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
-          />
-        </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
+        <div
+          class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
         >
-          All Skate users
-        </span>
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Active detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            All Skate users
+          </span>
+        </div>
       </div>
       <table
         class="mb-5 c-detours-table table table-active-detour table-hover"
@@ -305,17 +313,17 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Last published
+              Reason
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Est. Duration
+              Last published
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Reason
+              Est. Duration
             </th>
           </tr>
         </thead>
@@ -353,6 +361,9 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             >
               Street A1 & Avenue B1
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -365,9 +376,6 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             >
               2 hours
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
           <tr>
             <td
@@ -402,6 +410,9 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             >
               Street A2 & Avenue B2
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -414,38 +425,39 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             >
               2 hours
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
         </tbody>
       </table>
       <div
-        class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="d-flex flex-row justify-content-between align-items-start"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        <div
+          class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
         >
-          Draft detours
-        </h2>
-        <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
-          />
-        </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
-        >
-          Only you
-        </span>
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Draft detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            Only you
+          </span>
+        </div>
       </div>
       <table
         class="mb-5 u-hide-for-mobile c-detours-table table"
@@ -517,31 +529,59 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
         </tbody>
       </table>
       <div
-        class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="d-flex flex-row justify-content-between align-items-start"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        <div
+          class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
         >
-          Closed detours
-        </h2>
-        <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
-          />
-        </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Closed detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            Dispatchers and supervisors
+          </span>
+        </div>
+        <button
+          class="icon-link u-hide-for-mobile btn btn-outline-primary"
+          data-fs-element="Reset detour search"
+          title="Clear Search"
+          type="button"
         >
-          Dispatchers and supervisors
-        </span>
+          <svg
+            aria-hidden="true"
+            class="bi bi-x-square"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"
+            />
+            <path
+              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
+            />
+          </svg>
+          Clear
+        </button>
       </div>
       <table
         class="u-hide-for-mobile c-detours-table table table-hover"
@@ -553,7 +593,7 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             class="search-header"
           >
             <th
-              class="search-header__select px-3 py-3"
+              class="px-3 py-3"
             >
               <label
                 class="form-label"
@@ -562,13 +602,13 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
                 Route
               </label>
               <select
-                class="mt-2 form-select"
+                class="select-filter mt-2 form-select"
                 id="route-name"
               >
                 <option
                   value="all"
                 >
-                  Please select route
+                  Select route
                 </option>
                 <option
                   value="route1"
@@ -585,75 +625,205 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             <th
               class="px-3 py-3"
             >
+              <label
+                for="intersection-filter"
+              >
+                Starting intersection
+              </label>
               <div
-                class="c-detour-list-filter"
+                class="input-group-filter mt-2"
               >
+                <input
+                  id="intersection-filter"
+                  placeholder="Search..."
+                  type="text"
+                  value=""
+                />
+                <div>
+                  <button
+                    disabled=""
+                    title="Submit"
+                    type="submit"
+                  >
+                    <span>
+                      <span>
+                        <svg />
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </th>
+            <th
+              class="px-3 py-3 c-detours-table__col-sm"
+            >
+              <label
+                class="form-label"
+                for="reason-name"
+              >
+                Reason
+              </label>
+              <select
+                class="select-filter mt-2 form-select"
+                id="route-name"
+              >
+                <option
+                  value="all"
+                >
+                  Select reason
+                </option>
+                <option
+                  value="Accident"
+                >
+                  Accident
+                </option>
+                <option
+                  value="Construction"
+                >
+                  Construction
+                </option>
+                <option
+                  value="Demonstration"
+                >
+                  Demonstration
+                </option>
+                <option
+                  value="Disabled bus"
+                >
+                  Disabled bus
+                </option>
+                <option
+                  value="Drawbridge being raised"
+                >
+                  Drawbridge being raised
+                </option>
+                <option
+                  value="Electrical work"
+                >
+                  Electrical work
+                </option>
+                <option
+                  value="Fire"
+                >
+                  Fire
+                </option>
+                <option
+                  value="Hazmat condition"
+                >
+                  Hazmat condition
+                </option>
+                <option
+                  value="Holiday"
+                >
+                  Holiday
+                </option>
+                <option
+                  value="Hurricane"
+                >
+                  Hurricane
+                </option>
+                <option
+                  value="Maintenance"
+                >
+                  Maintenance
+                </option>
+                <option
+                  value="Medical emergency"
+                >
+                  Medical emergency
+                </option>
+                <option
+                  value="Parade"
+                >
+                  Parade
+                </option>
+                <option
+                  value="Police activity"
+                >
+                  Police activity
+                </option>
+                <option
+                  value="Snow"
+                >
+                  Snow
+                </option>
+                <option
+                  value="Special event"
+                >
+                  Special event
+                </option>
+                <option
+                  value="Tie replacement"
+                >
+                  Tie replacement
+                </option>
+                <option
+                  value="Traffic"
+                >
+                  Traffic
+                </option>
+                <option
+                  value="Weather"
+                >
+                  Weather
+                </option>
+              </select>
+            </th>
+            <th
+              class="px-3 py-3 c-detours-table__col-sm"
+            >
+              <div>
                 <label
-                  class="c-detour-list-filter__label"
-                  for="intersection-filter"
+                  for="date-filter"
                 >
-                  Starting intersection
+                  Date
                 </label>
                 <div
-                  class="c-detour-list-filter__text"
+                  class="input-group-filter mt-2"
                 >
+                  <input
+                    class="flatpickr-input"
+                    data-input="true"
+                    placeholder="Select date"
+                    type="hidden"
+                    value=""
+                  />
+                  <input
+                    class=" form-control input"
+                    placeholder="Select date"
+                    readonly="readonly"
+                    tabindex="0"
+                    type="text"
+                  />
                   <div
-                    class="c-detour-list-filter__input-container"
-                  >
-                    <input
-                      class="c-detour-list-filter__input"
-                      id="intersection-filter"
-                      placeholder="Search..."
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                  <div
-                    class="c-detour-list-filter__input-controls"
+                    class=""
                   >
                     <button
-                      class="c-detour-list-filter__submit"
-                      disabled=""
-                      title="Submit"
-                      type="submit"
+                      data-toggle="true"
                     >
                       <span>
-                        <svg />
+                        <svg
+                          aria-hidden="true"
+                          class="bi bi-calendar3"
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z"
+                          />
+                          <path
+                            d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+                          />
+                        </svg>
                       </span>
                     </button>
                   </div>
                 </div>
               </div>
             </th>
-            <th
-              class="px-3 py-3 text-end"
-              colspan="2"
-            >
-              <button
-                class="icon-link btn btn-outline-primary"
-                data-fs-element="Reset detour search"
-                title="Clear Search"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="bi bi-x-square"
-                  fill="currentColor"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"
-                  />
-                  <path
-                    d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
-                  />
-                </svg>
-                Clear
-              </button>
-            </th>
           </tr>
           <tr>
             <th
@@ -669,12 +839,12 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Last used
+              Reason
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Reason
+              Last used
             </th>
           </tr>
         </thead>
@@ -712,54 +882,535 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
             >
               Street A1 & Avenue B1
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
               Aug 28, 2024
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
         </tbody>
       </table>
     </div>
   </div>
-</body>
-`;
-
-exports[`DetourListPage renders limited detour list page for non-dispatchers 1`] = `
-<body>
-  <div>
+  <div
+    class="flatpickr-calendar animate"
+    tabindex="-1"
+  >
     <div
-      class="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white"
+      class="flatpickr-months"
     >
+      <span
+        class="flatpickr-prev-month"
+      >
+        <svg
+          version="1.1"
+          viewBox="0 0 17 17"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <g />
+          <path
+            d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"
+          />
+        </svg>
+      </span>
       <div
-        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="flatpickr-month"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        <div
+          class="flatpickr-current-month"
         >
-          Active detours
-        </h2>
+          <select
+            aria-label="Month"
+            class="flatpickr-monthDropdown-months"
+            tabindex="-1"
+          >
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="0"
+            >
+              January
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="1"
+            >
+              February
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="2"
+            >
+              March
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="3"
+            >
+              April
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="4"
+            >
+              May
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="5"
+            >
+              June
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="6"
+            >
+              July
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="7"
+            >
+              August
+            </option>
+          </select>
+          <div
+            class="numInputWrapper"
+          >
+            <input
+              aria-label="Year"
+              class="numInput cur-year"
+              max="2024"
+              tabindex="-1"
+              type="number"
+            />
+            <span
+              class="arrowUp"
+            />
+            <span
+              class="arrowDown"
+            />
+          </div>
+        </div>
+      </div>
+      <span
+        class="flatpickr-next-month flatpickr-disabled"
+      >
         <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
+          version="1.1"
+          viewBox="0 0 17 17"
           xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
         >
+          <g />
           <path
-            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
+            d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"
           />
         </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
+      </span>
+    </div>
+    <div
+      class="flatpickr-innerContainer"
+    >
+      <div
+        class="flatpickr-rContainer"
+      >
+        <div
+          class="flatpickr-weekdays"
         >
-          All Skate users
-        </span>
+          <div
+            class="flatpickr-weekdaycontainer"
+          >
+            
+      
+            <span
+              class="flatpickr-weekday"
+            >
+              
+        Sun
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Mon
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Tue
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Wed
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Thu
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Fri
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Sat
+      
+            </span>
+            
+      
+          </div>
+        </div>
+        <div
+          class="flatpickr-days"
+          tabindex="-1"
+        >
+          <div
+            class="dayContainer"
+          >
+            <span
+              aria-label="July 28, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              28
+            </span>
+            <span
+              aria-label="July 29, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              29
+            </span>
+            <span
+              aria-label="July 30, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              30
+            </span>
+            <span
+              aria-label="July 31, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              31
+            </span>
+            <span
+              aria-label="August 1, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              1
+            </span>
+            <span
+              aria-label="August 2, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              2
+            </span>
+            <span
+              aria-label="August 3, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              3
+            </span>
+            <span
+              aria-label="August 4, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              4
+            </span>
+            <span
+              aria-label="August 5, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              5
+            </span>
+            <span
+              aria-label="August 6, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              6
+            </span>
+            <span
+              aria-label="August 7, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              7
+            </span>
+            <span
+              aria-label="August 8, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              8
+            </span>
+            <span
+              aria-label="August 9, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              9
+            </span>
+            <span
+              aria-label="August 10, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              10
+            </span>
+            <span
+              aria-label="August 11, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              11
+            </span>
+            <span
+              aria-label="August 12, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              12
+            </span>
+            <span
+              aria-label="August 13, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              13
+            </span>
+            <span
+              aria-label="August 14, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              14
+            </span>
+            <span
+              aria-label="August 15, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              15
+            </span>
+            <span
+              aria-label="August 16, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              16
+            </span>
+            <span
+              aria-label="August 17, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              17
+            </span>
+            <span
+              aria-label="August 18, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              18
+            </span>
+            <span
+              aria-label="August 19, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              19
+            </span>
+            <span
+              aria-label="August 20, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              20
+            </span>
+            <span
+              aria-label="August 21, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              21
+            </span>
+            <span
+              aria-label="August 22, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              22
+            </span>
+            <span
+              aria-label="August 23, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              23
+            </span>
+            <span
+              aria-label="August 24, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              24
+            </span>
+            <span
+              aria-label="August 25, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              25
+            </span>
+            <span
+              aria-label="August 26, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              26
+            </span>
+            <span
+              aria-label="August 27, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              27
+            </span>
+            <span
+              aria-label="August 28, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              28
+            </span>
+            <span
+              aria-label="August 29, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              29
+            </span>
+            <span
+              aria-label="August 30, 2024"
+              class="flatpickr-day flatpickr-disabled"
+            >
+              30
+            </span>
+            <span
+              aria-label="August 31, 2024"
+              class="flatpickr-day flatpickr-disabled"
+            >
+              31
+            </span>
+            <span
+              aria-label="September 1, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              1
+            </span>
+            <span
+              aria-label="September 2, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              2
+            </span>
+            <span
+              aria-label="September 3, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              3
+            </span>
+            <span
+              aria-label="September 4, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              4
+            </span>
+            <span
+              aria-label="September 5, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              5
+            </span>
+            <span
+              aria-label="September 6, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              6
+            </span>
+            <span
+              aria-label="September 7, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              7
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`DetourListPage renders limited detour list page for non-dispatchers 1`] = `
+<body>
+  <div>
+    <div
+      class="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white"
+    >
+      <div
+        class="d-flex flex-row justify-content-between align-items-start"
+      >
+        <div
+          class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        >
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Active detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            All Skate users
+          </span>
+        </div>
       </div>
       <table
         class="mb-5 c-detours-table table table-active-detour table-hover"
@@ -781,17 +1432,17 @@ exports[`DetourListPage renders limited detour list page for non-dispatchers 1`]
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Last published
+              Reason
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Est. Duration
+              Last published
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Reason
+              Est. Duration
             </th>
           </tr>
         </thead>
@@ -829,6 +1480,9 @@ exports[`DetourListPage renders limited detour list page for non-dispatchers 1`]
             >
               Street A3 & Avenue B3
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -841,9 +1495,6 @@ exports[`DetourListPage renders limited detour list page for non-dispatchers 1`]
             >
               2 hours
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
           <tr>
             <td
@@ -878,6 +1529,9 @@ exports[`DetourListPage renders limited detour list page for non-dispatchers 1`]
             >
               Street A4 & Avenue B4
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -890,9 +1544,6 @@ exports[`DetourListPage renders limited detour list page for non-dispatchers 1`]
             >
               2 hours
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
         </tbody>
       </table>
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 3961e280ea..1e0743b547 100644
--- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -37,31 +37,35 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
         </span>
       </button>
       <div
-        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="d-flex flex-row justify-content-between align-items-start"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
-        >
-          Active detours
-        </h2>
-        <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
-          />
-        </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
+        <div
+          class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
         >
-          All Skate users
-        </span>
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Active detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            All Skate users
+          </span>
+        </div>
       </div>
       <table
         class="mb-5 c-detours-table table table-active-detour table-hover"
@@ -83,17 +87,17 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Last published
+              Reason
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Est. Duration
+              Last published
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Reason
+              Est. Duration
             </th>
           </tr>
         </thead>
@@ -131,6 +135,9 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             >
               Street A5 & Avenue B5
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -143,9 +150,6 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             >
               2 hours
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
           <tr>
             <td
@@ -180,6 +184,9 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             >
               Street A6 & Avenue B6
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -192,38 +199,39 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             >
               2 hours
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
         </tbody>
       </table>
       <div
-        class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="d-flex flex-row justify-content-between align-items-start"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
-        >
-          Draft detours
-        </h2>
-        <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
-          />
-        </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
+        <div
+          class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
         >
-          Only you
-        </span>
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Draft detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            Only you
+          </span>
+        </div>
       </div>
       <table
         class="mb-5 u-hide-for-mobile c-detours-table table"
@@ -295,31 +303,59 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
         </tbody>
       </table>
       <div
-        class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="d-flex flex-row justify-content-between align-items-start"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
-        >
-          Closed detours
-        </h2>
-        <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
         >
-          <path
-            d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
-          />
-        </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Closed detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            Dispatchers and supervisors
+          </span>
+        </div>
+        <button
+          class="icon-link u-hide-for-mobile btn btn-outline-primary"
+          data-fs-element="Reset detour search"
+          title="Clear Search"
+          type="button"
         >
-          Dispatchers and supervisors
-        </span>
+          <svg
+            aria-hidden="true"
+            class="bi bi-x-square"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"
+            />
+            <path
+              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
+            />
+          </svg>
+          Clear
+        </button>
       </div>
       <table
         class="u-hide-for-mobile c-detours-table table table-hover"
@@ -331,7 +367,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             class="search-header"
           >
             <th
-              class="search-header__select px-3 py-3"
+              class="px-3 py-3"
             >
               <label
                 class="form-label"
@@ -340,13 +376,13 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
                 Route
               </label>
               <select
-                class="mt-2 form-select"
+                class="select-filter mt-2 form-select"
                 id="route-name"
               >
                 <option
                   value="all"
                 >
-                  Please select route
+                  Select route
                 </option>
                 <option
                   value="route4"
@@ -363,75 +399,205 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             <th
               class="px-3 py-3"
             >
+              <label
+                for="intersection-filter"
+              >
+                Starting intersection
+              </label>
               <div
-                class="c-detour-list-filter"
+                class="input-group-filter mt-2"
+              >
+                <input
+                  id="intersection-filter"
+                  placeholder="Search..."
+                  type="text"
+                  value=""
+                />
+                <div>
+                  <button
+                    disabled=""
+                    title="Submit"
+                    type="submit"
+                  >
+                    <span>
+                      <span>
+                        <svg />
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </th>
+            <th
+              class="px-3 py-3 c-detours-table__col-sm"
+            >
+              <label
+                class="form-label"
+                for="reason-name"
+              >
+                Reason
+              </label>
+              <select
+                class="select-filter mt-2 form-select"
+                id="route-name"
               >
+                <option
+                  value="all"
+                >
+                  Select reason
+                </option>
+                <option
+                  value="Accident"
+                >
+                  Accident
+                </option>
+                <option
+                  value="Construction"
+                >
+                  Construction
+                </option>
+                <option
+                  value="Demonstration"
+                >
+                  Demonstration
+                </option>
+                <option
+                  value="Disabled bus"
+                >
+                  Disabled bus
+                </option>
+                <option
+                  value="Drawbridge being raised"
+                >
+                  Drawbridge being raised
+                </option>
+                <option
+                  value="Electrical work"
+                >
+                  Electrical work
+                </option>
+                <option
+                  value="Fire"
+                >
+                  Fire
+                </option>
+                <option
+                  value="Hazmat condition"
+                >
+                  Hazmat condition
+                </option>
+                <option
+                  value="Holiday"
+                >
+                  Holiday
+                </option>
+                <option
+                  value="Hurricane"
+                >
+                  Hurricane
+                </option>
+                <option
+                  value="Maintenance"
+                >
+                  Maintenance
+                </option>
+                <option
+                  value="Medical emergency"
+                >
+                  Medical emergency
+                </option>
+                <option
+                  value="Parade"
+                >
+                  Parade
+                </option>
+                <option
+                  value="Police activity"
+                >
+                  Police activity
+                </option>
+                <option
+                  value="Snow"
+                >
+                  Snow
+                </option>
+                <option
+                  value="Special event"
+                >
+                  Special event
+                </option>
+                <option
+                  value="Tie replacement"
+                >
+                  Tie replacement
+                </option>
+                <option
+                  value="Traffic"
+                >
+                  Traffic
+                </option>
+                <option
+                  value="Weather"
+                >
+                  Weather
+                </option>
+              </select>
+            </th>
+            <th
+              class="px-3 py-3 c-detours-table__col-sm"
+            >
+              <div>
                 <label
-                  class="c-detour-list-filter__label"
-                  for="intersection-filter"
+                  for="date-filter"
                 >
-                  Starting intersection
+                  Date
                 </label>
                 <div
-                  class="c-detour-list-filter__text"
+                  class="input-group-filter mt-2"
                 >
+                  <input
+                    class="flatpickr-input"
+                    data-input="true"
+                    placeholder="Select date"
+                    type="hidden"
+                    value=""
+                  />
+                  <input
+                    class=" form-control input"
+                    placeholder="Select date"
+                    readonly="readonly"
+                    tabindex="0"
+                    type="text"
+                  />
                   <div
-                    class="c-detour-list-filter__input-container"
-                  >
-                    <input
-                      class="c-detour-list-filter__input"
-                      id="intersection-filter"
-                      placeholder="Search..."
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                  <div
-                    class="c-detour-list-filter__input-controls"
+                    class=""
                   >
                     <button
-                      class="c-detour-list-filter__submit"
-                      disabled=""
-                      title="Submit"
-                      type="submit"
+                      data-toggle="true"
                     >
                       <span>
-                        <svg />
+                        <svg
+                          aria-hidden="true"
+                          class="bi bi-calendar3"
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z"
+                          />
+                          <path
+                            d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+                          />
+                        </svg>
                       </span>
                     </button>
                   </div>
                 </div>
               </div>
             </th>
-            <th
-              class="px-3 py-3 text-end"
-              colspan="2"
-            >
-              <button
-                class="icon-link btn btn-outline-primary"
-                data-fs-element="Reset detour search"
-                title="Clear Search"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="bi bi-x-square"
-                  fill="currentColor"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"
-                  />
-                  <path
-                    d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
-                  />
-                </svg>
-                Clear
-              </button>
-            </th>
           </tr>
           <tr>
             <th
@@ -447,12 +613,12 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Last used
+              Reason
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Reason
+              Last used
             </th>
           </tr>
         </thead>
@@ -490,61 +656,538 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             >
               Street A3 & Avenue B3
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
               Aug 28, 2024
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
         </tbody>
       </table>
     </div>
   </div>
-  <div />
   <div
-    class="c-detour-modal__transition-appear c-detour-modal__transition-appear-active"
+    class="flatpickr-calendar animate"
+    tabindex="-1"
   >
     <div
-      aria-modal="true"
-      class="c-detour-modal"
-      role="dialog"
-      tabindex="-1"
+      class="flatpickr-months"
     >
-      <article
-        class="l-diversion-page l-diversion-page--mobile h-100 border-box inherit-box"
-        data-fs-element="Detours"
+      <span
+        class="flatpickr-prev-month"
       >
-        <header
-          class="l-diversion-page__header border-bottom text-bg-light"
+        <svg
+          version="1.1"
+          viewBox="0 0 17 17"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
         >
-          <div
-            class="flex-grow-1 fw-semibold text-center"
-          >
-            Detours
-          </div>
-          <button
-            aria-label="Close"
-            class="btn-close p-4"
-            type="button"
+          <g />
+          <path
+            d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"
           />
-        </header>
+        </svg>
+      </span>
+      <div
+        class="flatpickr-month"
+      >
         <div
-          class="l-diversion-page__panel text-bg-light"
+          class="flatpickr-current-month"
         >
+          <select
+            aria-label="Month"
+            class="flatpickr-monthDropdown-months"
+            tabindex="-1"
+          >
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="0"
+            >
+              January
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="1"
+            >
+              February
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="2"
+            >
+              March
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="3"
+            >
+              April
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="4"
+            >
+              May
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="5"
+            >
+              June
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="6"
+            >
+              July
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="7"
+            >
+              August
+            </option>
+          </select>
           <div
-            class="c-drawer c-drawer--visible"
+            class="numInputWrapper"
           >
-            <button
-              class="c-drawer-tab c-drawer-tab__tab-button"
-              title="Collapse"
-            >
-              <span>
-                <svg />
-              </span>
-            </button>
+            <input
+              aria-label="Year"
+              class="numInput cur-year"
+              max="2024"
+              tabindex="-1"
+              type="number"
+            />
+            <span
+              class="arrowUp"
+            />
+            <span
+              class="arrowDown"
+            />
+          </div>
+        </div>
+      </div>
+      <span
+        class="flatpickr-next-month flatpickr-disabled"
+      >
+        <svg
+          version="1.1"
+          viewBox="0 0 17 17"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <g />
+          <path
+            d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="flatpickr-innerContainer"
+    >
+      <div
+        class="flatpickr-rContainer"
+      >
+        <div
+          class="flatpickr-weekdays"
+        >
+          <div
+            class="flatpickr-weekdaycontainer"
+          >
+            
+      
+            <span
+              class="flatpickr-weekday"
+            >
+              
+        Sun
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Mon
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Tue
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Wed
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Thu
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Fri
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Sat
+      
+            </span>
+            
+      
+          </div>
+        </div>
+        <div
+          class="flatpickr-days"
+          tabindex="-1"
+        >
+          <div
+            class="dayContainer"
+          >
+            <span
+              aria-label="July 28, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              28
+            </span>
+            <span
+              aria-label="July 29, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              29
+            </span>
+            <span
+              aria-label="July 30, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              30
+            </span>
+            <span
+              aria-label="July 31, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              31
+            </span>
+            <span
+              aria-label="August 1, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              1
+            </span>
+            <span
+              aria-label="August 2, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              2
+            </span>
+            <span
+              aria-label="August 3, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              3
+            </span>
+            <span
+              aria-label="August 4, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              4
+            </span>
+            <span
+              aria-label="August 5, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              5
+            </span>
+            <span
+              aria-label="August 6, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              6
+            </span>
+            <span
+              aria-label="August 7, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              7
+            </span>
+            <span
+              aria-label="August 8, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              8
+            </span>
+            <span
+              aria-label="August 9, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              9
+            </span>
+            <span
+              aria-label="August 10, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              10
+            </span>
+            <span
+              aria-label="August 11, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              11
+            </span>
+            <span
+              aria-label="August 12, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              12
+            </span>
+            <span
+              aria-label="August 13, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              13
+            </span>
+            <span
+              aria-label="August 14, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              14
+            </span>
+            <span
+              aria-label="August 15, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              15
+            </span>
+            <span
+              aria-label="August 16, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              16
+            </span>
+            <span
+              aria-label="August 17, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              17
+            </span>
+            <span
+              aria-label="August 18, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              18
+            </span>
+            <span
+              aria-label="August 19, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              19
+            </span>
+            <span
+              aria-label="August 20, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              20
+            </span>
+            <span
+              aria-label="August 21, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              21
+            </span>
+            <span
+              aria-label="August 22, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              22
+            </span>
+            <span
+              aria-label="August 23, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              23
+            </span>
+            <span
+              aria-label="August 24, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              24
+            </span>
+            <span
+              aria-label="August 25, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              25
+            </span>
+            <span
+              aria-label="August 26, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              26
+            </span>
+            <span
+              aria-label="August 27, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              27
+            </span>
+            <span
+              aria-label="August 28, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              28
+            </span>
+            <span
+              aria-label="August 29, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              29
+            </span>
+            <span
+              aria-label="August 30, 2024"
+              class="flatpickr-day flatpickr-disabled"
+            >
+              30
+            </span>
+            <span
+              aria-label="August 31, 2024"
+              class="flatpickr-day flatpickr-disabled"
+            >
+              31
+            </span>
+            <span
+              aria-label="September 1, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              1
+            </span>
+            <span
+              aria-label="September 2, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              2
+            </span>
+            <span
+              aria-label="September 3, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              3
+            </span>
+            <span
+              aria-label="September 4, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              4
+            </span>
+            <span
+              aria-label="September 5, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              5
+            </span>
+            <span
+              aria-label="September 6, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              6
+            </span>
+            <span
+              aria-label="September 7, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              7
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div />
+  <div
+    class="c-detour-modal__transition-appear c-detour-modal__transition-appear-active"
+  >
+    <div
+      aria-modal="true"
+      class="c-detour-modal"
+      role="dialog"
+      tabindex="-1"
+    >
+      <article
+        class="l-diversion-page l-diversion-page--mobile h-100 border-box inherit-box"
+        data-fs-element="Detours"
+      >
+        <header
+          class="l-diversion-page__header border-bottom text-bg-light"
+        >
+          <div
+            class="flex-grow-1 fw-semibold text-center"
+          >
+            Detours
+          </div>
+          <button
+            aria-label="Close"
+            class="btn-close p-4"
+            type="button"
+          />
+        </header>
+        <div
+          class="l-diversion-page__panel text-bg-light"
+        >
+          <div
+            class="c-drawer c-drawer--visible"
+          >
+            <button
+              class="c-drawer-tab c-drawer-tab__tab-button"
+              title="Collapse"
+            >
+              <span>
+                <svg />
+              </span>
+            </button>
             <article
               class="l-diversion-page-panel border-end c-diversion-panel"
             >
@@ -1102,31 +1745,35 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
         </span>
       </button>
       <div
-        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="d-flex flex-row justify-content-between align-items-start"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
-        >
-          Active detours
-        </h2>
-        <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
-          />
-        </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
+        <div
+          class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
         >
-          All Skate users
-        </span>
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Active detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            All Skate users
+          </span>
+        </div>
       </div>
       <table
         class="mb-5 c-detours-table table table-active-detour table-hover"
@@ -1148,17 +1795,17 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Last published
+              Reason
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Est. Duration
+              Last published
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Reason
+              Est. Duration
             </th>
           </tr>
         </thead>
@@ -1196,6 +1843,9 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             >
               Street A3 & Avenue B3
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -1208,9 +1858,6 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             >
               2 hours
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
           <tr>
             <td
@@ -1245,6 +1892,9 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             >
               Street A4 & Avenue B4
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
@@ -1257,38 +1907,39 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             >
               2 hours
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
         </tbody>
       </table>
       <div
-        class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="d-flex flex-row justify-content-between align-items-start"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
-        >
-          Draft detours
-        </h2>
-        <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
-          />
-        </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
+        <div
+          class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
         >
-          Only you
-        </span>
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Draft detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            Only you
+          </span>
+        </div>
       </div>
       <table
         class="mb-5 u-hide-for-mobile c-detours-table table"
@@ -1360,31 +2011,59 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
         </tbody>
       </table>
       <div
-        class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+        class="d-flex flex-row justify-content-between align-items-start"
       >
-        <h2
-          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
-        >
-          Closed detours
-        </h2>
-        <svg
-          aria-hidden="true"
-          class="c-detour-list-page__header-icon my-auto me-1"
-          fill="currentColor"
-          height="16"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
+        <div
+          class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
         >
-          <path
-            d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
-          />
-        </svg>
-        <span
-          class="c-detour-list-page__header-visibility my-auto"
+          <h2
+            class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+          >
+            Closed detours
+          </h2>
+          <svg
+            aria-hidden="true"
+            class="c-detour-list-page__header-icon my-auto me-1"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
+            />
+          </svg>
+          <span
+            class="c-detour-list-page__header-visibility my-auto"
+          >
+            Dispatchers and supervisors
+          </span>
+        </div>
+        <button
+          class="icon-link u-hide-for-mobile btn btn-outline-primary"
+          data-fs-element="Reset detour search"
+          title="Clear Search"
+          type="button"
         >
-          Dispatchers and supervisors
-        </span>
+          <svg
+            aria-hidden="true"
+            class="bi bi-x-square"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"
+            />
+            <path
+              d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
+            />
+          </svg>
+          Clear
+        </button>
       </div>
       <table
         class="u-hide-for-mobile c-detours-table table table-hover"
@@ -1396,7 +2075,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             class="search-header"
           >
             <th
-              class="search-header__select px-3 py-3"
+              class="px-3 py-3"
             >
               <label
                 class="form-label"
@@ -1405,13 +2084,13 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                 Route
               </label>
               <select
-                class="mt-2 form-select"
+                class="select-filter mt-2 form-select"
                 id="route-name"
               >
                 <option
                   value="all"
                 >
-                  Please select route
+                  Select route
                 </option>
                 <option
                   value="route1"
@@ -1428,75 +2107,205 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             <th
               class="px-3 py-3"
             >
+              <label
+                for="intersection-filter"
+              >
+                Starting intersection
+              </label>
               <div
-                class="c-detour-list-filter"
+                class="input-group-filter mt-2"
+              >
+                <input
+                  id="intersection-filter"
+                  placeholder="Search..."
+                  type="text"
+                  value=""
+                />
+                <div>
+                  <button
+                    disabled=""
+                    title="Submit"
+                    type="submit"
+                  >
+                    <span>
+                      <span>
+                        <svg />
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </th>
+            <th
+              class="px-3 py-3 c-detours-table__col-sm"
+            >
+              <label
+                class="form-label"
+                for="reason-name"
+              >
+                Reason
+              </label>
+              <select
+                class="select-filter mt-2 form-select"
+                id="route-name"
               >
+                <option
+                  value="all"
+                >
+                  Select reason
+                </option>
+                <option
+                  value="Accident"
+                >
+                  Accident
+                </option>
+                <option
+                  value="Construction"
+                >
+                  Construction
+                </option>
+                <option
+                  value="Demonstration"
+                >
+                  Demonstration
+                </option>
+                <option
+                  value="Disabled bus"
+                >
+                  Disabled bus
+                </option>
+                <option
+                  value="Drawbridge being raised"
+                >
+                  Drawbridge being raised
+                </option>
+                <option
+                  value="Electrical work"
+                >
+                  Electrical work
+                </option>
+                <option
+                  value="Fire"
+                >
+                  Fire
+                </option>
+                <option
+                  value="Hazmat condition"
+                >
+                  Hazmat condition
+                </option>
+                <option
+                  value="Holiday"
+                >
+                  Holiday
+                </option>
+                <option
+                  value="Hurricane"
+                >
+                  Hurricane
+                </option>
+                <option
+                  value="Maintenance"
+                >
+                  Maintenance
+                </option>
+                <option
+                  value="Medical emergency"
+                >
+                  Medical emergency
+                </option>
+                <option
+                  value="Parade"
+                >
+                  Parade
+                </option>
+                <option
+                  value="Police activity"
+                >
+                  Police activity
+                </option>
+                <option
+                  value="Snow"
+                >
+                  Snow
+                </option>
+                <option
+                  value="Special event"
+                >
+                  Special event
+                </option>
+                <option
+                  value="Tie replacement"
+                >
+                  Tie replacement
+                </option>
+                <option
+                  value="Traffic"
+                >
+                  Traffic
+                </option>
+                <option
+                  value="Weather"
+                >
+                  Weather
+                </option>
+              </select>
+            </th>
+            <th
+              class="px-3 py-3 c-detours-table__col-sm"
+            >
+              <div>
                 <label
-                  class="c-detour-list-filter__label"
-                  for="intersection-filter"
+                  for="date-filter"
                 >
-                  Starting intersection
+                  Date
                 </label>
                 <div
-                  class="c-detour-list-filter__text"
+                  class="input-group-filter mt-2"
                 >
+                  <input
+                    class="flatpickr-input"
+                    data-input="true"
+                    placeholder="Select date"
+                    type="hidden"
+                    value=""
+                  />
+                  <input
+                    class=" form-control input"
+                    placeholder="Select date"
+                    readonly="readonly"
+                    tabindex="0"
+                    type="text"
+                  />
                   <div
-                    class="c-detour-list-filter__input-container"
-                  >
-                    <input
-                      class="c-detour-list-filter__input"
-                      id="intersection-filter"
-                      placeholder="Search..."
-                      type="text"
-                      value=""
-                    />
-                  </div>
-                  <div
-                    class="c-detour-list-filter__input-controls"
+                    class=""
                   >
                     <button
-                      class="c-detour-list-filter__submit"
-                      disabled=""
-                      title="Submit"
-                      type="submit"
+                      data-toggle="true"
                     >
                       <span>
-                        <svg />
+                        <svg
+                          aria-hidden="true"
+                          class="bi bi-calendar3"
+                          fill="currentColor"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z"
+                          />
+                          <path
+                            d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2"
+                          />
+                        </svg>
                       </span>
                     </button>
                   </div>
                 </div>
               </div>
             </th>
-            <th
-              class="px-3 py-3 text-end"
-              colspan="2"
-            >
-              <button
-                class="icon-link btn btn-outline-primary"
-                data-fs-element="Reset detour search"
-                title="Clear Search"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="bi bi-x-square"
-                  fill="currentColor"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"
-                  />
-                  <path
-                    d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
-                  />
-                </svg>
-                Clear
-              </button>
-            </th>
           </tr>
           <tr>
             <th
@@ -1512,12 +2321,12 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Last used
+              Reason
             </th>
             <th
               class="px-3 py-4 u-hide-for-mobile"
             >
-              Reason
+              Last used
             </th>
           </tr>
         </thead>
@@ -1555,19 +2364,496 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             >
               Street A2 & Avenue B2
             </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            />
             <td
               class="align-middle p-3 u-hide-for-mobile"
             >
               Aug 28, 2024
             </td>
-            <td
-              class="align-middle p-3 u-hide-for-mobile"
-            />
           </tr>
         </tbody>
       </table>
     </div>
   </div>
+  <div
+    class="flatpickr-calendar animate"
+    tabindex="-1"
+  >
+    <div
+      class="flatpickr-months"
+    >
+      <span
+        class="flatpickr-prev-month"
+      >
+        <svg
+          version="1.1"
+          viewBox="0 0 17 17"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <g />
+          <path
+            d="M5.207 8.471l7.146 7.147-0.707 0.707-7.853-7.854 7.854-7.853 0.707 0.707-7.147 7.146z"
+          />
+        </svg>
+      </span>
+      <div
+        class="flatpickr-month"
+      >
+        <div
+          class="flatpickr-current-month"
+        >
+          <select
+            aria-label="Month"
+            class="flatpickr-monthDropdown-months"
+            tabindex="-1"
+          >
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="0"
+            >
+              January
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="1"
+            >
+              February
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="2"
+            >
+              March
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="3"
+            >
+              April
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="4"
+            >
+              May
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="5"
+            >
+              June
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="6"
+            >
+              July
+            </option>
+            <option
+              class="flatpickr-monthDropdown-month"
+              tabindex="-1"
+              value="7"
+            >
+              August
+            </option>
+          </select>
+          <div
+            class="numInputWrapper"
+          >
+            <input
+              aria-label="Year"
+              class="numInput cur-year"
+              max="2024"
+              tabindex="-1"
+              type="number"
+            />
+            <span
+              class="arrowUp"
+            />
+            <span
+              class="arrowDown"
+            />
+          </div>
+        </div>
+      </div>
+      <span
+        class="flatpickr-next-month flatpickr-disabled"
+      >
+        <svg
+          version="1.1"
+          viewBox="0 0 17 17"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <g />
+          <path
+            d="M13.207 8.472l-7.854 7.854-0.707-0.707 7.146-7.146-7.146-7.148 0.707-0.707 7.854 7.854z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="flatpickr-innerContainer"
+    >
+      <div
+        class="flatpickr-rContainer"
+      >
+        <div
+          class="flatpickr-weekdays"
+        >
+          <div
+            class="flatpickr-weekdaycontainer"
+          >
+            
+      
+            <span
+              class="flatpickr-weekday"
+            >
+              
+        Sun
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Mon
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Tue
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Wed
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Thu
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Fri
+            </span>
+            <span
+              class="flatpickr-weekday"
+            >
+              Sat
+      
+            </span>
+            
+      
+          </div>
+        </div>
+        <div
+          class="flatpickr-days"
+          tabindex="-1"
+        >
+          <div
+            class="dayContainer"
+          >
+            <span
+              aria-label="July 28, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              28
+            </span>
+            <span
+              aria-label="July 29, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              29
+            </span>
+            <span
+              aria-label="July 30, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              30
+            </span>
+            <span
+              aria-label="July 31, 2024"
+              class="flatpickr-day prevMonthDay"
+              tabindex="-1"
+            >
+              31
+            </span>
+            <span
+              aria-label="August 1, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              1
+            </span>
+            <span
+              aria-label="August 2, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              2
+            </span>
+            <span
+              aria-label="August 3, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              3
+            </span>
+            <span
+              aria-label="August 4, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              4
+            </span>
+            <span
+              aria-label="August 5, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              5
+            </span>
+            <span
+              aria-label="August 6, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              6
+            </span>
+            <span
+              aria-label="August 7, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              7
+            </span>
+            <span
+              aria-label="August 8, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              8
+            </span>
+            <span
+              aria-label="August 9, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              9
+            </span>
+            <span
+              aria-label="August 10, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              10
+            </span>
+            <span
+              aria-label="August 11, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              11
+            </span>
+            <span
+              aria-label="August 12, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              12
+            </span>
+            <span
+              aria-label="August 13, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              13
+            </span>
+            <span
+              aria-label="August 14, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              14
+            </span>
+            <span
+              aria-label="August 15, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              15
+            </span>
+            <span
+              aria-label="August 16, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              16
+            </span>
+            <span
+              aria-label="August 17, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              17
+            </span>
+            <span
+              aria-label="August 18, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              18
+            </span>
+            <span
+              aria-label="August 19, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              19
+            </span>
+            <span
+              aria-label="August 20, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              20
+            </span>
+            <span
+              aria-label="August 21, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              21
+            </span>
+            <span
+              aria-label="August 22, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              22
+            </span>
+            <span
+              aria-label="August 23, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              23
+            </span>
+            <span
+              aria-label="August 24, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              24
+            </span>
+            <span
+              aria-label="August 25, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              25
+            </span>
+            <span
+              aria-label="August 26, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              26
+            </span>
+            <span
+              aria-label="August 27, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              27
+            </span>
+            <span
+              aria-label="August 28, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              28
+            </span>
+            <span
+              aria-label="August 29, 2024"
+              class="flatpickr-day"
+              tabindex="-1"
+            >
+              29
+            </span>
+            <span
+              aria-label="August 30, 2024"
+              class="flatpickr-day flatpickr-disabled"
+            >
+              30
+            </span>
+            <span
+              aria-label="August 31, 2024"
+              class="flatpickr-day flatpickr-disabled"
+            >
+              31
+            </span>
+            <span
+              aria-label="September 1, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              1
+            </span>
+            <span
+              aria-label="September 2, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              2
+            </span>
+            <span
+              aria-label="September 3, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              3
+            </span>
+            <span
+              aria-label="September 4, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              4
+            </span>
+            <span
+              aria-label="September 5, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              5
+            </span>
+            <span
+              aria-label="September 6, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              6
+            </span>
+            <span
+              aria-label="September 7, 2024"
+              class="flatpickr-day nextMonthDay flatpickr-disabled"
+            >
+              7
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <div />
   <div
     class="c-detour-modal__transition-appear c-detour-modal__transition-appear-active"