diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index c5f311a..90b02d4 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,9 +1,32 @@
 import { Outlet } from "react-router-dom";
+import { useIsFetching } from "@tanstack/react-query";
 import { Sidebar } from "./Sidebar";
 
 export function Layout() {
+  // useIsFetching() returns the number of in-flight queries and is 0 on
+  // first load (queries that have not yet fired are not counted). We use it
+  // to drive a 1px hairline scan element at the very top of the layout.
+  const isFetching = useIsFetching();
+  const showScan = isFetching > 0;
+
   return (
     <div className="relative min-h-screen z-10">
+      {/*
+        Scan element — always in the DOM (no layout shift), 1px tall, full
+        width. pointer-events-none so it never blocks clicks. The inner
+        bar uses the `scan` keyframe from tailwind.config to slide a 1/3-
+        width electric-blue bar across the hairline.
+      */}
+      <div
+        className="fixed top-0 left-0 right-0 z-50 h-px overflow-hidden pointer-events-none transition-opacity duration-200"
+        style={{ opacity: showScan ? 1 : 0 }}
+        aria-hidden
+      >
+        <div
+          className="h-full w-1/3 bg-accent animate-scan"
+          style={{ boxShadow: "0 0 8px hsl(var(--accent) / 0.5)" }}
+        />
+      </div>
       <Sidebar />
       <main className="md:pl-60">
         <div className="mx-auto max-w-[1400px] px-8 py-10">