diff --git a/assets/src/components/detours/changeDurationModal.tsx b/assets/src/components/detours/changeDurationModal.tsx
index 519003de4..280e5dd49 100644
--- a/assets/src/components/detours/changeDurationModal.tsx
+++ b/assets/src/components/detours/changeDurationModal.tsx
@@ -15,7 +15,10 @@ const ChangingDuration = ({
     <span className="mb-4">
       <span className="fw-bold">Previous time length</span>{" "}
       <span>(estimate)</span>
-      <p className="mt-2" data-testid="change-detour-duration-previous-time">
+      <p
+        className="mt-2 mb-4"
+        data-testid="change-detour-duration-previous-time"
+      >
         {selectedDuration}
       </p>
     </span>
diff --git a/assets/src/components/detoursTable.tsx b/assets/src/components/detoursTable.tsx
index b95cb47f9..2480a0353 100644
--- a/assets/src/components/detoursTable.tsx
+++ b/assets/src/components/detoursTable.tsx
@@ -8,7 +8,7 @@ import { EmptyDetourTableIcon } from "../helpers/skateIcons"
 import { joinClasses } from "../helpers/dom"
 
 interface DetoursTableProps {
-  data: SimpleDetour[] | undefined
+  data: SimpleDetour[]
   onOpenDetour: (detourId: number) => void
   status: DetourStatus
   classNames?: string[]
@@ -40,7 +40,7 @@ export const DetoursTable = ({
   classNames = [],
 }: DetoursTableProps) => (
   <Table
-    hover={!!data}
+    hover={!!data.length}
     className={joinClasses([...classNames, "c-detours-table"])}
     variant={status === DetourStatus.Active ? "active-detour" : ""}
   >
@@ -57,7 +57,7 @@ export const DetoursTable = ({
       </tr>
     </thead>
     <tbody>
-      {data ? (
+      {data.length ? (
         <PopulatedDetourRows
           status={status}
           data={data}
@@ -118,7 +118,7 @@ const PopulatedDetourRows = ({
 
 const EmptyDetourRows = ({ message }: { message: string }) => (
   <tr aria-hidden>
-    <td colSpan={3} className="p-3 p-md-4">
+    <td colSpan={4} className="p-3 p-md-4">
       <div className="d-flex justify-content-center mb-3">
         <EmptyDetourTableIcon height="100px" width="100px" />
       </div>
diff --git a/assets/src/models/detoursList.ts b/assets/src/models/detoursList.ts
index 67ff46107..a381853d1 100644
--- a/assets/src/models/detoursList.ts
+++ b/assets/src/models/detoursList.ts
@@ -1,13 +1,4 @@
-import {
-  array,
-  coerce,
-  date,
-  Infer,
-  nullable,
-  number,
-  string,
-  type,
-} from "superstruct"
+import { array, coerce, date, Infer, number, string, type } from "superstruct"
 
 export type DetourId = number
 export interface SimpleDetour {
@@ -64,15 +55,15 @@ export const simpleDetourFromActivatedData = (
 })
 
 export interface GroupedSimpleDetours {
-  active?: SimpleDetour[]
-  draft?: SimpleDetour[]
-  past?: SimpleDetour[]
+  active: SimpleDetour[]
+  draft: SimpleDetour[]
+  past: SimpleDetour[]
 }
 
 export const GroupedDetoursData = type({
-  active: nullable(array(ActivatedDetourData)),
-  draft: nullable(array(SimpleDetourData)),
-  past: nullable(array(SimpleDetourData)),
+  active: array(ActivatedDetourData),
+  draft: array(SimpleDetourData),
+  past: array(SimpleDetourData),
 })
 
 export type GroupedDetoursData = Infer<typeof GroupedDetoursData>
@@ -80,7 +71,7 @@ export type GroupedDetoursData = Infer<typeof GroupedDetoursData>
 export const groupedDetoursFromData = (
   groupedDetours: GroupedDetoursData
 ): GroupedSimpleDetours => ({
-  active: groupedDetours.active?.map(simpleDetourFromActivatedData),
-  draft: groupedDetours.draft?.map((detour) => simpleDetourFromData(detour)),
-  past: groupedDetours.past?.map((detour) => simpleDetourFromData(detour)),
+  active: groupedDetours.active.map(simpleDetourFromActivatedData),
+  draft: groupedDetours.draft.map((detour) => simpleDetourFromData(detour)),
+  past: groupedDetours.past.map((detour) => simpleDetourFromData(detour)),
 })
diff --git a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
index 380ba141d..cdd30c94b 100644
--- a/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detourListPage.test.tsx.snap
@@ -439,7 +439,7 @@ exports[`DetourListPage renders detour list page for dispatchers 1`] = `
           >
             <td
               class="p-3 p-md-4"
-              colspan="3"
+              colspan="4"
             >
               <div
                 class="d-flex justify-content-center mb-3"
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 f7958eccf..73664c5e2 100644
--- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -240,7 +240,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
           >
             <td
               class="p-3 p-md-4"
-              colspan="3"
+              colspan="4"
             >
               <div
                 class="d-flex justify-content-center mb-3"
@@ -1102,7 +1102,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
           >
             <td
               class="p-3 p-md-4"
-              colspan="3"
+              colspan="4"
             >
               <div
                 class="d-flex justify-content-center mb-3"
diff --git a/assets/tests/components/detours/detourListPage.test.tsx b/assets/tests/components/detours/detourListPage.test.tsx
index 6ae6e6be5..3069d1207 100644
--- a/assets/tests/components/detours/detourListPage.test.tsx
+++ b/assets/tests/components/detours/detourListPage.test.tsx
@@ -5,7 +5,7 @@ import { DetourListPage } from "../../../src/components/detourListPage"
 import { fetchDetours } from "../../../src/api"
 import { neverPromise } from "../../testHelpers/mockHelpers"
 import { Ok } from "../../../src/util/result"
-import { render, screen } from "@testing-library/react"
+import { render, screen, waitFor } from "@testing-library/react"
 import getTestGroups from "../../../src/userTestGroups"
 import { TestGroups } from "../../../src/userInTestGroup"
 import { byRole } from "testing-library-selector"
@@ -57,7 +57,7 @@ describe("DetourListPage", () => {
             estimatedDuration: "3 hours",
           },
         ],
-        draft: undefined,
+        draft: [],
         past: [
           {
             id: 10,
@@ -123,7 +123,7 @@ describe("DetourListPage", () => {
             estimatedDuration: "Until end of service",
           },
         ],
-        draft: undefined,
+        draft: [],
         past: [
           {
             id: 10,
@@ -162,6 +162,46 @@ describe("DetourListPage", () => {
     expect(baseElement).toMatchSnapshot()
   })
 
+  test("renders empty tables when needed", async () => {
+    jest.mocked(fetchDetours).mockResolvedValue(
+      Ok({
+        active: [
+          {
+            id: 1,
+            route: "1",
+            viaVariant: "X",
+            direction: "Inbound",
+            name: "Headsign A",
+            intersection: "Street A & Avenue B",
+            updatedAt: 1724866392,
+            activatedAt: new Date(1724866392000),
+            estimatedDuration: "4 hours",
+          },
+        ],
+        draft: [],
+        past: [
+          {
+            id: 10,
+            route: "1",
+            viaVariant: "X",
+            direction: "Inbound",
+            name: "Headsign A",
+            intersection: "Street E & Avenue F",
+            updatedAt: 1724866392,
+          },
+        ],
+      })
+    )
+
+    render(<DetourListPage />)
+
+    await waitFor(() =>
+      expect(screen.queryByText("No draft detours.")).toBeVisible()
+    )
+    expect(screen.queryByText("No active detours.")).not.toBeInTheDocument()
+    expect(screen.queryByText("No closed detours.")).not.toBeInTheDocument()
+  })
+
   test("orders active detour list by activatedAt value", async () => {
     jest.mocked(getTestGroups).mockReturnValue([TestGroups.DetoursList])
 
diff --git a/assets/tests/factories/detourListFactory.ts b/assets/tests/factories/detourListFactory.ts
index 75fd95dc0..b029f8815 100644
--- a/assets/tests/factories/detourListFactory.ts
+++ b/assets/tests/factories/detourListFactory.ts
@@ -18,7 +18,7 @@ export const detourListFactory = Factory.define<GroupedSimpleDetours>(() => {
         })
       ),
     ],
-    draft: undefined,
+    draft: [],
     past: [simpleDetourFactory.build({ name: "Headsign Z" })],
   }
 })