diff --git a/assets/css/_diversion_page.scss b/assets/css/_diversion_page.scss
index 846b25ef3..464e3629a 100644
--- a/assets/css/_diversion_page.scss
+++ b/assets/css/_diversion_page.scss
@@ -44,10 +44,14 @@
     .l-diversion-page__header {
       border-bottom: none;
     }
+
+    .l-diversion-page-panel__header {
+      align-items: center;
+    }
+
     .c-diversion-panel__header_text,
     .c-detour-panel__subheader,
-    .c-diversion-panel__back-button-container,
-    .c-active-detour__alert-icon {
+    .c-diversion-panel__desktop-buttons {
       display: none !important;
     }
   }
diff --git a/assets/src/components/detours/detourPanelComponents.tsx b/assets/src/components/detours/detourPanelComponents.tsx
index 8f98dede9..b7a7de9f4 100644
--- a/assets/src/components/detours/detourPanelComponents.tsx
+++ b/assets/src/components/detours/detourPanelComponents.tsx
@@ -1,8 +1,15 @@
 import React from "react"
 import { Stop } from "../../schedule"
-import { Badge, ListGroup } from "react-bootstrap"
+import {
+  Badge,
+  Button,
+  ListGroup,
+  OverlayTrigger,
+  Popover,
+} from "react-bootstrap"
 import { uniqBy } from "../../helpers/array"
 import { RoutePill } from "../routePill"
+import { Files } from "../../helpers/bsIcons"
 
 interface MissedStopsProps {
   missedStops?: Stop[]
@@ -64,3 +71,27 @@ export const AffectedRoute = ({
     </div>
   </section>
 )
+
+export const CopyButton = ({ detourText }: { detourText: string }) => (
+  <OverlayTrigger
+    placement="bottom"
+    trigger="click"
+    rootClose
+    rootCloseEvent="mousedown"
+    overlay={
+      <Popover>
+        <Popover.Body>Copied to clipboard!</Popover.Body>
+      </Popover>
+    }
+  >
+    <Button
+      className="icon-link"
+      variant="outline-primary"
+      size="sm"
+      onClick={() => window.navigator.clipboard?.writeText(detourText)}
+    >
+      <Files />
+      Copy details
+    </Button>
+  </OverlayTrigger>
+)
diff --git a/assets/src/components/detours/detourPanels/activeDetourPanel.tsx b/assets/src/components/detours/detourPanels/activeDetourPanel.tsx
index 24ee0983a..fdc150ca2 100644
--- a/assets/src/components/detours/detourPanels/activeDetourPanel.tsx
+++ b/assets/src/components/detours/detourPanels/activeDetourPanel.tsx
@@ -8,9 +8,15 @@ import {
   ExclamationTriangleFill,
   StopCircle,
 } from "../../../helpers/bsIcons"
-import { AffectedRoute, MissedStops } from "../detourPanelComponents"
+import {
+  AffectedRoute,
+  CopyButton,
+  MissedStops,
+} from "../detourPanelComponents"
+import inTestGroup, { TestGroups } from "../../../userInTestGroup"
 
 export interface ActiveDetourPanelProps extends PropsWithChildren {
+  detourText: string
   directions?: DetourDirection[]
   connectionPoints?: string[]
   missedStops?: Stop[]
@@ -23,6 +29,7 @@ export interface ActiveDetourPanelProps extends PropsWithChildren {
 }
 
 export const ActiveDetourPanel = ({
+  detourText,
   directions,
   connectionPoints,
   missedStops,
@@ -38,6 +45,7 @@ export const ActiveDetourPanel = ({
     <Button
       className="c-diversion-panel__back-button icon-link my-3"
       variant="outline-primary"
+      size="sm"
       onClick={onNavigateBack}
     >
       <ArrowLeft />
@@ -47,16 +55,20 @@ export const ActiveDetourPanel = ({
 
   return (
     <Panel as="article" className="c-diversion-panel">
-      <Panel.Header className="d-inline-flex justify-content-between">
+      <Panel.Header>
         <h1 className="c-diversion-panel__header_text c-diversion-panel__h1 my-3">
           Active Detour
         </h1>
         {backButton}
+        {/* TODO: temporary test group until I get the copy logic hooked up */}
+        {inTestGroup(TestGroups.CopyButton) && (
+          <CopyButton detourText={detourText} />
+        )}
       </Panel.Header>
 
       <Panel.Body className="d-flex flex-column">
         <Panel.Body.ScrollArea>
-          <div className="d-flex c-diversion-panel__back-button-container justify-content-between align-items-center">
+          <div className="d-flex c-diversion-panel__desktop-buttons justify-content-between align-items-center">
             {backButton}
             <ExclamationTriangleFill className="c-active-detour__alert-icon" />
           </div>
diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
index 45d53b9fe..48415537d 100644
--- a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
+++ b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
@@ -1,7 +1,8 @@
 import React, { PropsWithChildren } from "react"
-import { Button, Form, OverlayTrigger, Popover } from "react-bootstrap"
+import { Button, Form } from "react-bootstrap"
 import * as BsIcons from "../../../helpers/bsIcons"
 import { Panel } from "../diversionPage"
+import { CopyButton } from "../detourPanelComponents"
 
 interface DetourFinishedPanelProps extends PropsWithChildren {
   onNavigateBack: () => void
@@ -17,9 +18,10 @@ export const DetourFinishedPanel = ({
   onActivateDetour,
   children,
 }: DetourFinishedPanelProps) => (
-  <Panel as="article">
-    <Panel.Header className="">
+  <Panel as="article" className="c-diversion-panel">
+    <Panel.Header>
       <h1 className="c-diversion-panel__h1 my-3">View Draft Detour</h1>
+      <CopyButton detourText={detourText} />
     </Panel.Header>
 
     <Panel.Body className="d-flex flex-column">
@@ -45,24 +47,6 @@ export const DetourFinishedPanel = ({
       </Panel.Body.ScrollArea>
 
       <Panel.Body.Footer className="d-flex flex-column">
-        <OverlayTrigger
-          placement="top"
-          trigger="click"
-          rootClose
-          rootCloseEvent="mousedown"
-          overlay={
-            <Popover>
-              <Popover.Body>Copied to clipboard!</Popover.Body>
-            </Popover>
-          }
-        >
-          <Button
-            className="m-3 flex-grow-1"
-            onClick={() => window.navigator.clipboard?.writeText(detourText)}
-          >
-            Copy Details
-          </Button>
-        </OverlayTrigger>
         {onActivateDetour && (
           <Button
             className="m-3 flex-grow-1 icon-link justify-content-center"
diff --git a/assets/src/components/detours/detourPanels/pastDetourPanel.tsx b/assets/src/components/detours/detourPanels/pastDetourPanel.tsx
index 3ff0b0be3..8a6df7286 100644
--- a/assets/src/components/detours/detourPanels/pastDetourPanel.tsx
+++ b/assets/src/components/detours/detourPanels/pastDetourPanel.tsx
@@ -4,9 +4,15 @@ import { DetourDirection } from "../../../models/detour"
 import { Stop } from "../../../schedule"
 import { ArrowLeft } from "../../../helpers/bsIcons"
 import { Button, ListGroup } from "react-bootstrap"
-import { AffectedRoute, MissedStops } from "../detourPanelComponents"
+import {
+  AffectedRoute,
+  CopyButton,
+  MissedStops,
+} from "../detourPanelComponents"
+import inTestGroup, { TestGroups } from "../../../userInTestGroup"
 
 export interface PastDetourPanelProps {
+  detourText: string
   directions?: DetourDirection[]
   connectionPoints: [string, string]
   missedStops?: Stop[]
@@ -18,6 +24,7 @@ export interface PastDetourPanelProps {
 }
 
 export const PastDetourPanel = ({
+  detourText,
   directions,
   connectionPoints: [connectionPointStart, connectionPointEnd],
   missedStops,
@@ -30,6 +37,10 @@ export const PastDetourPanel = ({
   <Panel as="article">
     <Panel.Header className="">
       <h1 className="c-diversion-panel__h1 my-3">View Past Detour</h1>
+      {/* TODO: temporary test group until I get the copy logic hooked up */}
+      {inTestGroup(TestGroups.CopyButton) && (
+        <CopyButton detourText={detourText} />
+      )}
     </Panel.Header>
 
     <Panel.Body className="d-flex flex-column">
diff --git a/assets/src/components/detours/diversionPage.tsx b/assets/src/components/detours/diversionPage.tsx
index aad251dd9..f5d4758f9 100644
--- a/assets/src/components/detours/diversionPage.tsx
+++ b/assets/src/components/detours/diversionPage.tsx
@@ -339,6 +339,7 @@ export const DiversionPage = ({
     } else if (snapshot.matches({ "Detour Drawing": "Active" })) {
       return (
         <ActiveDetourPanel
+          detourText="Hello World"
           directions={extendedDirections}
           connectionPoints={[
             connectionPoints?.start?.name ?? "N/A",
@@ -379,6 +380,7 @@ export const DiversionPage = ({
     } else if (snapshot.matches({ "Detour Drawing": "Past" })) {
       return (
         <PastDetourPanel
+          detourText="Hello World"
           directions={extendedDirections}
           connectionPoints={[
             connectionPoints?.start?.name ?? "N/A",
@@ -531,6 +533,9 @@ const DiversionPagePanelHeader = <As extends React.ElementType = "header">({
       "l-diversion-page-panel__header",
       "border-bottom",
       "px-3",
+      "d-inline-flex",
+      "justify-content-between",
+      "align-items-baseline",
       props.className,
     ])}
   >
diff --git a/assets/src/helpers/bsIcons.tsx b/assets/src/helpers/bsIcons.tsx
index 3b3a55b88..ac5baef54 100644
--- a/assets/src/helpers/bsIcons.tsx
+++ b/assets/src/helpers/bsIcons.tsx
@@ -267,6 +267,24 @@ export const ExclamationTriangleFill = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/files/
+ */
+export const Files = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-files"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2m0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1M3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/gear-fill/
  */
diff --git a/assets/src/userInTestGroup.ts b/assets/src/userInTestGroup.ts
index 2228c89ff..580e14aaf 100644
--- a/assets/src/userInTestGroup.ts
+++ b/assets/src/userInTestGroup.ts
@@ -8,6 +8,7 @@ export enum TestGroups {
   DetoursPilot = "detours-pilot",
   MinimalLadderPage = "minimal-ladder-page",
   LateView = "late-view",
+  CopyButton = "copy-button",
 }
 
 const inTestGroup = (key: TestGroups): boolean => {
diff --git a/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx b/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx
index 996812cf3..c539027e6 100644
--- a/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx
+++ b/assets/stories/skate-components/detours/activeDetourPanel.stories.tsx
@@ -4,6 +4,29 @@ import React from "react"
 import { ActiveDetourPanel } from "../../../src/components/detours/detourPanels/activeDetourPanel"
 import { stopFactory } from "../../../tests/factories/stop"
 
+const defaulText = [
+  "Detour:",
+  "66 Harvard via Allston from",
+  "Andrew Station",
+  "Outbound",
+  "",
+  "Turn-by-Turn Directions:",
+  "Start at Centre St & John St",
+  "Right on John St",
+  "Left on Abbotsford Rd",
+  "Right on Boston St",
+  "Regular Route",
+  "",
+  "Connection Points:",
+  "Centre St & John St",
+  "Boston St",
+  "",
+  "Missed Stops (3):",
+  "Example St @ Sample Ave",
+  "Example St opp Random Way",
+  "Example St @ Fake Blvd",
+].join("\n")
+
 const meta = {
   component: ActiveDetourPanel,
   parameters: {
@@ -11,6 +34,7 @@ const meta = {
     stretch: true,
   },
   args: {
+    detourText: defaulText,
     directions: [
       { instruction: "Start at Centre St & John St" },
       { instruction: "Right on John St" },
diff --git a/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx b/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx
index 3ca77433a..a5954b716 100644
--- a/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx
+++ b/assets/stories/skate-components/detours/pastDetourPanel.stories.tsx
@@ -4,6 +4,29 @@ import React from "react"
 import { PastDetourPanel } from "../../../src/components/detours/detourPanels/pastDetourPanel"
 import { stopFactory } from "../../../tests/factories/stop"
 
+const defaulText = [
+  "Detour:",
+  "66 Harvard via Allston from",
+  "Andrew Station",
+  "Outbound",
+  "",
+  "Turn-by-Turn Directions:",
+  "Start at Centre St & John St",
+  "Right on John St",
+  "Left on Abbotsford Rd",
+  "Right on Boston St",
+  "Regular Route",
+  "",
+  "Connection Points:",
+  "Centre St & John St",
+  "Boston St",
+  "",
+  "Missed Stops (3):",
+  "Example St @ Sample Ave",
+  "Example St opp Random Way",
+  "Example St @ Fake Blvd",
+].join("\n")
+
 const meta = {
   component: PastDetourPanel,
   parameters: {
@@ -11,6 +34,7 @@ const meta = {
     stretch: true,
   },
   args: {
+    detourText: defaulText,
     directions: [
       { instruction: "Start at Centre St & John St" },
       { instruction: "Right on John St" },
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 3ebde0096..f94d275c4 100644
--- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -397,16 +397,35 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
             </span>
           </button>
           <article
-            class="l-diversion-page-panel border-end"
+            class="l-diversion-page-panel border-end c-diversion-panel"
           >
             <header
-              class="l-diversion-page-panel__header border-bottom px-3"
+              class="l-diversion-page-panel__header border-bottom px-3 d-inline-flex justify-content-between align-items-baseline"
             >
               <h1
                 class="c-diversion-panel__h1 my-3"
               >
                 View Draft Detour
               </h1>
+              <button
+                class="icon-link btn btn-outline-primary btn-sm"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="bi bi-files"
+                  fill="currentColor"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  width="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2m0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1M3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"
+                  />
+                </svg>
+                Copy details
+              </button>
             </header>
             <div
               class="l-diversion-page-panel__body bg-light d-flex flex-column"
@@ -441,14 +460,7 @@ exports[`Detours Page: Open a Detour renders detour details in an open drawer on
               </div>
               <div
                 class="border-top d-flex mt-auto d-flex flex-column"
-              >
-                <button
-                  class="m-3 flex-grow-1 btn btn-primary"
-                  type="button"
-                >
-                  Copy Details
-                </button>
-              </div>
+              />
             </div>
           </article>
         </div>
@@ -1161,16 +1173,35 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
         class="l-diversion-page__panel text-bg-light"
       >
         <article
-          class="l-diversion-page-panel border-end"
+          class="l-diversion-page-panel border-end c-diversion-panel"
         >
           <header
-            class="l-diversion-page-panel__header border-bottom px-3"
+            class="l-diversion-page-panel__header border-bottom px-3 d-inline-flex justify-content-between align-items-baseline"
           >
             <h1
               class="c-diversion-panel__h1 my-3"
             >
               View Draft Detour
             </h1>
+            <button
+              class="icon-link btn btn-outline-primary btn-sm"
+              type="button"
+            >
+              <svg
+                aria-hidden="true"
+                class="bi bi-files"
+                fill="currentColor"
+                height="16"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2m0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1M3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"
+                />
+              </svg>
+              Copy details
+            </button>
           </header>
           <div
             class="l-diversion-page-panel__body bg-light d-flex flex-column"
@@ -1205,14 +1236,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
             </div>
             <div
               class="border-top d-flex mt-auto d-flex flex-column"
-            >
-              <button
-                class="m-3 flex-grow-1 btn btn-primary"
-                type="button"
-              >
-                Copy Details
-              </button>
-            </div>
+            />
           </div>
         </article>
       </div>
diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
index 63bc288e3..f18f82465 100644
--- a/assets/tests/components/detours/diversionPage.test.tsx
+++ b/assets/tests/components/detours/diversionPage.test.tsx
@@ -1217,7 +1217,7 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    expect(screen.getByRole("button", { name: "Copy Details" })).toBeVisible()
+    expect(screen.getByRole("button", { name: "Copy details" })).toBeVisible()
   })
 
   test("'View Draft Detour' screen copies text content to clipboard when clicked copy details button", async () => {
@@ -1283,7 +1283,7 @@ describe("DiversionPage", () => {
 
     await userEvent.click(reviewDetourButton.get())
 
-    await userEvent.click(screen.getByRole("button", { name: "Copy Details" }))
+    await userEvent.click(screen.getByRole("button", { name: "Copy details" }))
 
     await waitFor(() =>
       expect(window.navigator.clipboard.readText()).resolves.toBe(