diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss
index 1e2ecf33..62689c71 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.scss
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss
@@ -119,6 +119,10 @@
     .leg-route__status-text { color: colors.$blue; }
   }
 
+  &__center--delayed {
+    .leg-route__status-text { color: colors.$orange; }
+  }
+
   &__center--cancelled {
     .leg-route__status-text { color: colors.$red; }
     // Light tint of $red (C8102E) for the track — derived from the
diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.test.tsx b/src/features/online-board/components/OnlineBoardDetailsPage.test.tsx
index 8d5af14e..b06ee47d 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.test.tsx
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.test.tsx
@@ -506,6 +506,81 @@ describe("OnlineBoardDetailsPage", () => {
     });
   });
 
+  describe("TZ §4.1.15.8 timeline status center-class per status", () => {
+    /**
+     * Build a flight whose single leg has the given status, render the page,
+     * and return the center div element so we can assert its class.
+     */
+    function renderWithStatus(status: string): HTMLElement {
+      const flight = {
+        ...mockFlight,
+        status,
+        leg: { ...mockFlight.leg, status },
+      };
+      mockState = {
+        flight: flight as typeof mockFlight,
+        allFlights: [flight as typeof mockFlight],
+        daysOfFlight: ["20250115"],
+        loading: false,
+        error: null,
+      };
+      const { container } = render(
+        <OnlineBoardDetailsPage
+          flightId={mockFlightId}
+          locale="ru"
+          canonicalOrigin="https://example.com"
+        />,
+      );
+      const center = container.querySelector(".leg-route__center");
+      if (!center) throw new Error("leg-route__center not found");
+      return center as HTMLElement;
+    }
+
+    it("4.1.15.8-R-Sched: Scheduled → center--progress (blue)", () => {
+      const center = renderWithStatus("Scheduled");
+      expect(center.className).toContain("leg-route__center--progress");
+    });
+
+    it("4.1.15.8-R-InFlight: InFlight → center--in-flight (green)", () => {
+      const center = renderWithStatus("InFlight");
+      expect(center.className).toContain("leg-route__center--in-flight");
+    });
+
+    it("4.1.15.8-R-Sent: Sent (departed from gate) → center--in-flight (green, plane visible)", () => {
+      // TZ §4.1.15.8 and Angular's FlightStatusLegacy.inFlight: Sent is treated
+      // as in-flight for the progress bar — the plane has left the gate.
+      const center = renderWithStatus("Sent");
+      expect(center.className).toContain("leg-route__center--in-flight");
+    });
+
+    it("4.1.15.8-R-Landed: Landed → center--finished (green, bar 100%)", () => {
+      const center = renderWithStatus("Landed");
+      expect(center.className).toContain("leg-route__center--finished");
+    });
+
+    it("4.1.15.8-R-Arrived: Arrived → center--finished (green, bar 100%)", () => {
+      const center = renderWithStatus("Arrived");
+      expect(center.className).toContain("leg-route__center--finished");
+    });
+
+    it("4.1.15.8-R-Cancelled: Cancelled → center--cancelled (red)", () => {
+      const center = renderWithStatus("Cancelled");
+      expect(center.className).toContain("leg-route__center--cancelled");
+    });
+
+    it("4.1.15.8-R-Delayed: Delayed → center--delayed (orange, not blue)", () => {
+      // Gap: prior to this fix Delayed fell into center--progress (blue).
+      const center = renderWithStatus("Delayed");
+      expect(center.className).toContain("leg-route__center--delayed");
+      expect(center.className).not.toContain("leg-route__center--progress");
+    });
+
+    it("4.1.15.8-R-Unknown: Unknown → center--progress (blue, no plane marker)", () => {
+      const center = renderWithStatus("Unknown");
+      expect(center.className).toContain("leg-route__center--progress");
+    });
+  });
+
   describe("parent-request codec (TZ §4.1.2 Table 5 row 6)", () => {
     it("4.1.2-R-Request-route: hydrates mini-list from route parent-request", () => {
       mockSearchParamsInstance = new URLSearchParams(
diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.tsx b/src/features/online-board/components/OnlineBoardDetailsPage.tsx
index 54d6f560..082618d9 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.tsx
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.tsx
@@ -115,9 +115,10 @@ function LegRoute({
 
   const isFinished = status === "Arrived" || status === "Landed";
   const isCancelled = status === "Cancelled";
+  const isDelayed = status === "Delayed";
   // Matches Angular's FlightStatusLegacy.inFlight — covers Airborne/InFlight
   // as well as Departed/Sent once the plane has left the gate.
-  const isInFlight = status === "InFlight";
+  const isInFlight = status === "InFlight" || status === "Sent";
 
   // §4.1.15.7 R94–R97: compute elapsed / remaining / position via shared helper.
   // Arrival time priority: actual > estimated > scheduled (R94).
@@ -154,7 +155,7 @@ function LegRoute({
         </div>
 
         <div
-          className={`leg-route__center leg-route__center--${isFinished ? "finished" : isCancelled ? "cancelled" : isInFlight ? "in-flight" : "progress"}`}
+          className={`leg-route__center leg-route__center--${isFinished ? "finished" : isCancelled ? "cancelled" : isInFlight ? "in-flight" : isDelayed ? "delayed" : "progress"}`}
         >
           <div className="leg-route__status-text">
             {t(`FLIGHT-STATUSES.${status}`)}