diff --git a/js/components/app.tsx b/js/components/app.tsx
index 47919b2c..82d57245 100644
--- a/js/components/app.tsx
+++ b/js/components/app.tsx
@@ -1,4 +1,5 @@
 import { reload } from "../browser";
+import { DataWarningsProvider } from "../contexts/dataWarningsContext";
 import { SocketProvider } from "../contexts/socketContext";
 import {
   ORBIT_BL_FFD,
@@ -9,6 +10,7 @@ import {
 } from "../groups";
 import { paths } from "../paths";
 import { AppcuesTrackPage } from "./appcues";
+import { Banner } from "./banner";
 import { Header } from "./header";
 import { LadderPage } from "./ladderPage/ladderPage";
 import { LandingPage } from "./landingPage";
@@ -78,11 +80,16 @@ const router = createBrowserRouter([
   {
     errorElement: <ErrorBoundary />,
     element: (
-      <>
+      <DataWarningsProvider>
         <AppcuesTrackPage />
-        <Header />
-        <Outlet />
-      </>
+        <div className="flex flex-col h-screen">
+          <div className="sticky top-0 z-header">
+            <Banner />
+            <Header />
+          </div>
+          <Outlet />
+        </div>
+      </DataWarningsProvider>
     ),
     children: [
       {
diff --git a/js/components/banner.tsx b/js/components/banner.tsx
new file mode 100644
index 00000000..05476ccd
--- /dev/null
+++ b/js/components/banner.tsx
@@ -0,0 +1,27 @@
+import { useDataWarnings } from "../contexts/dataWarningsContext";
+import { className } from "../util/dom";
+import { ReactElement } from "react";
+
+export const Banner = (): ReactElement => {
+  const [warnings] = useDataWarnings();
+
+  return warnings.size > 0 ?
+      <div className={className(["px-3 py-4 text-xs bg-yellow/25"])}>
+        <div className="flex flex-row items-center gap-2">
+          <svg className={className(["h-4 w-4 inline fill-yellow"])}>
+            <use xlinkHref={"/images/warning-circle.svg"} />
+          </svg>
+          <p className="font-semibold uppercase tracking-wide-4 text-slate-800">
+            Data Issue
+          </p>
+        </div>
+        <div className="ml-5 flex flex-1 flex-col text-slate-600">
+          <ul className="list-inside list-disc">
+            {[...warnings].map((warning) => {
+              return <li key={warning}>Train positions out of date</li>;
+            })}
+          </ul>
+        </div>
+      </div>
+    : <></>;
+};
diff --git a/js/components/header.tsx b/js/components/header.tsx
index 688bf3b7..b4a3bb09 100644
--- a/js/components/header.tsx
+++ b/js/components/header.tsx
@@ -9,7 +9,7 @@ export const Header = () => {
     currentLocation.pathname === paths.help;
 
   return (
-    <div className="w-full bg-gray-200 p-2 flex justify-between fixed h-header z-header">
+    <div className="w-full bg-gray-200 p-2 flex justify-between h-header">
       <Link to={paths.root}>
         <img src="/images/logo.svg" alt="MBTA" className="w-44 h-[32px]" />
       </Link>
diff --git a/js/components/ladderPage/ladderPage.tsx b/js/components/ladderPage/ladderPage.tsx
index 7be5a76b..fa4e9f04 100644
--- a/js/components/ladderPage/ladderPage.tsx
+++ b/js/components/ladderPage/ladderPage.tsx
@@ -44,11 +44,13 @@ export const LadderPage = ({ routeId }: { routeId: RouteId }): ReactElement => {
   }, [onEscape]);
 
   return (
-    <main className="flex h-screen justify-center">
+    <main className="flex overflow-y-auto overflow-x-hidden justify-center">
+      {sideBarSelection !== null ?
+        <SideBar selection={sideBarSelection} close={close} />
+      : null}
       <div
         className={className([
-          "flex overflow-auto transition-all duration-300 ease-in-out w-full",
-          sideBarSelection && "ml-80 min-[1485px]:ml-0",
+          "flex transition-all duration-300 ease-in-out overflow-x-auto w-full",
         ])}
         // Close sidebar when clicking anywhere in the background
         onClick={close}
@@ -59,9 +61,6 @@ export const LadderPage = ({ routeId }: { routeId: RouteId }): ReactElement => {
           sideBarSelection={sideBarSelection}
         />
       </div>
-      {sideBarSelection !== null ?
-        <SideBar selection={sideBarSelection} close={close} />
-      : null}
     </main>
   );
 };
diff --git a/js/components/ladderPage/sidebar.tsx b/js/components/ladderPage/sidebar.tsx
index b235d62a..84c97ebf 100644
--- a/js/components/ladderPage/sidebar.tsx
+++ b/js/components/ladderPage/sidebar.tsx
@@ -27,14 +27,14 @@ export const SideBar = ({
   close: () => void;
 }): ReactElement => {
   return (
-    <aside className="fixed flex flex-col left-0 top-[theme(height.header)] w-full sm:w-80 h-[calc(100vh-theme(height.header))] bg-gray-100 transition-transform duration-300 ease-in-out animate-slide-in-from-left">
+    <aside className="sm:min-w-[320px] sticky flex flex-col left-0 sm:w-80 bg-gray-100 transition-transform duration-300 ease-in-out animate-slide-in-from-left">
       <button
         className="absolute m-3 top-0 right-0 h-4 w-4 hover:fill-slate-700"
         onClick={close}
       >
         <img src="/images/close.svg" alt="Close" />
       </button>
-      <div className="h-full">
+      <div className="h-full w-screen sm:w-auto">
         <Consist vehicle={selection.vehicle} />
         <CurrentTrip vehicle={selection.vehicle} />
         <NextTrip vehicle={selection.vehicle} />
diff --git a/js/contexts/dataWarningsContext.tsx b/js/contexts/dataWarningsContext.tsx
new file mode 100644
index 00000000..db0830fa
--- /dev/null
+++ b/js/contexts/dataWarningsContext.tsx
@@ -0,0 +1,43 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+
+export type DataWarning = "vehicle_positions_stale";
+export type DataWarnings = Set<DataWarning>;
+
+const DataWarningsContext = createContext<
+  [DataWarnings, (warning: DataWarning) => void, (warning: DataWarning) => void]
+>([
+  new Set(),
+  () => {
+    throw Error("Not implemented");
+  },
+  () => {
+    throw Error("Not implemented");
+  },
+]);
+export const DataWarningsProvider = ({ children }: { children: ReactNode }) => {
+  const [warnings, setWarnings] = useState<DataWarnings>(new Set());
+  const addWarning: (warning: DataWarning) => void = (warning: DataWarning) => {
+    setWarnings((warnings) => {
+      const newSet = new Set(warnings);
+      newSet.add(warning);
+      return newSet;
+    });
+  };
+  const removeWarning: (warning: DataWarning) => void = (
+    warning: DataWarning,
+  ) => {
+    setWarnings((warnings) => {
+      const newSet = new Set(warnings);
+      newSet.delete(warning);
+      return newSet;
+    });
+  };
+
+  return (
+    <DataWarningsContext.Provider value={[warnings, addWarning, removeWarning]}>
+      {children}
+    </DataWarningsContext.Provider>
+  );
+};
+
+export const useDataWarnings = () => useContext(DataWarningsContext);
diff --git a/js/hooks/useVehicles.ts b/js/hooks/useVehicles.ts
index 4e209708..9d8aaa87 100644
--- a/js/hooks/useVehicles.ts
+++ b/js/hooks/useVehicles.ts
@@ -1,17 +1,25 @@
 import { useSocket } from "../contexts/socketContext";
 import "../models/vehiclePosition";
+import { useDataWarnings } from "../contexts/dataWarningsContext";
+import { dateTimeFromUnix, useNow } from "../dateTime";
 import {
   Vehicle,
   VehicleDataMessage,
   vehicleFromVehicleData,
 } from "../models/vehicle";
 import { useChannel } from "./useChannel";
-
-const parser = (message: VehicleDataMessage): Vehicle[] => {
-  return message.data.entities.map((data) => vehicleFromVehicleData(data));
-};
+import { useCallback, useEffect, useEffectEvent, useState } from "react";
 
 export const useVehicles = (): Vehicle[] | null => {
+  const now = useNow("minute");
+  const [, addWarning, removeWarning] = useDataWarnings();
+  const [mostRecentTimestamp, setMostRecentTimestamp] = useState(
+    now.toUnixInteger(),
+  );
+  const parser = useCallback((message: VehicleDataMessage): Vehicle[] => {
+    setMostRecentTimestamp(message.data.timestamp);
+    return message.data.entities.map((data) => vehicleFromVehicleData(data));
+  }, []);
   const socket = useSocket();
   const result = useChannel({
     socket,
@@ -21,6 +29,23 @@ export const useVehicles = (): Vehicle[] | null => {
     RawData: VehicleDataMessage,
     defaultResult: null,
   });
+  const checkForStaleData = useEffectEvent(() => {
+    if (now.diff(dateTimeFromUnix(mostRecentTimestamp), "minute").minutes > 3) {
+      addWarning("vehicle_positions_stale");
+    } else {
+      removeWarning("vehicle_positions_stale");
+    }
+  });
+
+  useEffect(
+    () => {
+      checkForStaleData();
+    },
+    // Disabling this because it's due to outdated react-hooks lint rules
+    // Remove when that library is updated
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [now, mostRecentTimestamp],
+  );
 
   return result;
 };
diff --git a/js/icons.ts b/js/icons.ts
index 46b21d7d..7285812e 100644
--- a/js/icons.ts
+++ b/js/icons.ts
@@ -10,4 +10,5 @@ export type IconName =
   | "menu"
   | "red-line"
   | "shield"
-  | "sign-out";
+  | "sign-out"
+  | "warning-circle";
diff --git a/js/test/components/app.test.tsx b/js/test/components/app.test.tsx
index 640cb46d..6e6858cd 100644
--- a/js/test/components/app.test.tsx
+++ b/js/test/components/app.test.tsx
@@ -22,6 +22,11 @@ const mockGetMetaContent = getMetaContent as jest.MockedFunction<
   typeof getMetaContent
 >;
 
+jest.mock("../../contexts/dataWarningsContext", () => ({
+  __esModule: true,
+  useDataWarnings: jest.fn(() => [new Set([]), () => {}, () => {}]),
+}));
+
 describe("App", () => {
   //NOTE: skipping this test while root path temporarily reroutes to /operators.
   //TODO: do not skip this once root path is no longer just rerouting.
diff --git a/js/test/components/banner.test.tsx b/js/test/components/banner.test.tsx
new file mode 100644
index 00000000..e6668070
--- /dev/null
+++ b/js/test/components/banner.test.tsx
@@ -0,0 +1,45 @@
+import { Banner } from "../../components/banner";
+import { useDataWarnings } from "../../contexts/dataWarningsContext";
+import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+
+jest.mock("../../contexts/dataWarningsContext", () => ({
+  __esModule: true,
+  useDataWarnings: jest.fn(),
+}));
+
+describe("Landing Page", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("renders when warning is present", () => {
+    (useDataWarnings as jest.Mock).mockImplementation(
+      jest.fn(() => [new Set(["vehicle_positions_stale"]), () => {}, () => {}]),
+    );
+
+    const view = render(
+      <MemoryRouter>
+        <Banner />
+      </MemoryRouter>,
+    );
+    expect(view.getByText("Data Issue")).toBeInTheDocument();
+    expect(view.getByText("Train positions out of date")).toBeInTheDocument();
+  });
+
+  test("is hidden when no warning is present", () => {
+    (useDataWarnings as jest.Mock).mockImplementation(
+      jest.fn(() => [new Set(), () => {}, () => {}]),
+    );
+
+    const view = render(
+      <MemoryRouter>
+        <Banner />
+      </MemoryRouter>,
+    );
+    expect(view.queryByText("Data Issue")).not.toBeInTheDocument();
+    expect(
+      view.queryByText("Train positions out of date"),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/js/test/hooks/useVehicles.test.ts b/js/test/hooks/useVehicles.test.ts
index 03c7c54a..d952ae1c 100644
--- a/js/test/hooks/useVehicles.test.ts
+++ b/js/test/hooks/useVehicles.test.ts
@@ -1,3 +1,4 @@
+import { DataWarningsProvider } from "../../contexts/dataWarningsContext";
 import { useChannel } from "../../hooks/useChannel";
 import { useVehicles } from "../../hooks/useVehicles";
 import { renderHook } from "@testing-library/react";
@@ -15,7 +16,7 @@ describe("useVehicles", () => {
     });
   });
   test("subscribes to the proper topic", () => {
-    renderHook(useVehicles);
+    renderHook(useVehicles, { wrapper: DataWarningsProvider });
     expect(mockUseChannel).toHaveBeenCalledWith(
       expect.objectContaining({
         topic: "vehicles",
diff --git a/priv/static/images/warning-circle.svg b/priv/static/images/warning-circle.svg
new file mode 100644
index 00000000..d11f9d5e
--- /dev/null
+++ b/priv/static/images/warning-circle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 384C302.3 384 288 398.3 288 416C288 433.7 302.3 448 320 448C337.7 448 352 433.7 352 416C352 398.3 337.7 384 320 384zM320 192C301.8 192 287.3 207.5 288.6 225.7L296 329.7C296.9 342.3 307.4 352 319.9 352C332.5 352 342.9 342.3 343.8 329.7L351.2 225.7C352.5 207.5 338.1 192 319.8 192z"/></svg>
\ No newline at end of file