diff --git a/src/components/ApiCard.tsx b/src/components/ApiCard.tsx
index 004a79a..5974a3b 100644
--- a/src/components/ApiCard.tsx
+++ b/src/components/ApiCard.tsx
@@ -24,7 +24,7 @@ import KbdHint from "./KbdHint";
 import WhyApi from "./WhyApi";
 import { colorFromId } from "../utils/colorFromId";
 import { ClockIcon, BoltIcon } from "./icons";
-import StatusBadge from "./StatusBadge";
+
 
 // ─── Skeleton ────────────────────────────────────────────────────────────────
 
@@ -37,12 +37,12 @@ export function ApiCardSkeleton({ density = "comfortable" }: { density?: "comfor
       aria-busy="true"
       aria-label="Loading API"
       style={{
-        padding: isCompact ? 10 : 12,
+        padding: isCompact ? "var(--mkt-card-compact-padding, 10px)" : "var(--mkt-card-padding, 12px)",
         display: "flex",
         flexDirection: "column",
-        minHeight: isCompact ? 188 : 220,
-        gap: isCompact ? 6 : 8,
-        border: "1px solid rgba(255,255,255,0.03)",
+        minHeight: isCompact ? "var(--mkt-card-compact-min-height, 188px)" : "var(--mkt-card-min-height, 220px)",
+        gap: isCompact ? "var(--mkt-card-compact-gap, 6px)" : "var(--mkt-card-gap, 8px)",
+        border: "1px solid var(--line, rgba(255,255,255,0.05))",
         pointerEvents: "none",
         position: "relative",
       }}
@@ -58,7 +58,7 @@ export function ApiCardSkeleton({ density = "comfortable" }: { density?: "comfor
           left: 0,
           width: 4,
           height: "100%",
-          borderRadius: "var(--radius-lg) 0 0 var(--radius-lg)",
+          borderRadius: "var(--radius-lg, 12px) 0 0 var(--radius-lg, 12px)",
           background: "color-mix(in srgb, var(--accent) 12%, transparent)",
         }}
       />
@@ -86,8 +86,8 @@ export function ApiCardSkeleton({ density = "comfortable" }: { density?: "comfor
       <div className="api-marketplace-card-header" style={{ display: "flex", gap: 12, alignItems: "center" }}>
         <Skeleton tone="stellar" width={56} height={56} borderRadius={10} />
 
-        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "var(--mkt-space-md)" }}>
-          <div style={{ display: "flex", gap: "var(--mkt-space-md)", alignItems: "baseline" }}>
+        <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "var(--mkt-space-md, 8px)" }}>
+          <div style={{ display: "flex", gap: "var(--mkt-space-md, 8px)", alignItems: "baseline" }}>
             <Skeleton tone="stellar" width="60%" height={18} />
             <Skeleton tone="stellar" width="20%" height={12} />
           </div>
@@ -108,7 +108,7 @@ export function ApiCardSkeleton({ density = "comfortable" }: { density?: "comfor
             display: "flex",
             flexDirection: "column",
             alignItems: "flex-end",
-            gap: "var(--mkt-space-sm)"
+            gap: "var(--mkt-space-sm, 4px)"
           }}
         >
           <Skeleton tone="stellar" width={50} height={12} />
@@ -122,8 +122,7 @@ export function ApiCardSkeleton({ density = "comfortable" }: { density?: "comfor
         <Skeleton tone="stellar" width={40} height={24} borderRadius={8} />
       </div>
 
-      {/* WhyApi placeholder — matches the real card's rationale section
-          that appears in comfortable mode. */}
+      {/* WhyApi placeholder — matches the real card's rationale section in comfortable mode */}
       {!isCompact && (
         <div style={{ marginTop: 2, display: "flex", flexDirection: "column", gap: 4 }}>
           <Skeleton tone="stellar" width="35%" height={14} />
@@ -131,8 +130,7 @@ export function ApiCardSkeleton({ density = "comfortable" }: { density?: "comfor
         </div>
       )}
 
-      {/* Sparkline section — matches the real card's 24h sparkline
-          that appears between tags and stats. */}
+      {/* Sparkline section placeholder */}
       <div
         style={{
           display: "flex",
@@ -152,7 +150,7 @@ export function ApiCardSkeleton({ density = "comfortable" }: { density?: "comfor
           marginTop: "auto",
           display: "flex",
           flexDirection: "column",
-          gap: "var(--mkt-space-lg)",
+          gap: "var(--mkt-space-lg, 12px)",
         }}
       >
         <div className="api-card__stats" aria-hidden="true">
diff --git a/src/components/FiltersSidebar.tsx b/src/components/FiltersSidebar.tsx
index fae3cd6..329a98f 100644
--- a/src/components/FiltersSidebar.tsx
+++ b/src/components/FiltersSidebar.tsx
@@ -3,7 +3,7 @@ import Dropdown from "./Dropdown";
 import EmptyState from "./EmptyState";
 import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { usePersistedState } from "../hooks/usePersistedState";
-import { FiltersSidebarSkeleton } from "./Skeleton";
+
 import LiveRegion from "./LiveRegion";
 
 const POPULARITY_OPTIONS = [
diff --git a/src/components/Skeleton.tsx b/src/components/Skeleton.tsx
index df89c4d..e9bb780 100644
--- a/src/components/Skeleton.tsx
+++ b/src/components/Skeleton.tsx
@@ -59,18 +59,62 @@ export function SkeletonRow({ rows = 5 }: { rows?: number }) {
 
 export function FiltersSidebarSkeleton() {
   return (
-    <div className="filters-sidebar filters-sidebar-skeleton" aria-hidden="true" style={{ display: "grid", gap: 16 }}>
-      {/* Section heading */}
-      <Skeleton width="55%" height={22} />
-      <Skeleton width="55%" height={22} />
-      {Array.from({ length: 4 }).map((_, index) => (
-        <div key={index} style={{ display: "grid", gap: 8 }}>
-          <Skeleton width="40%" height={14} />
-          <Skeleton width="100%" height={40} borderRadius={10} />
+    <div
+      className="filters-sidebar filters-sidebar-skeleton"
+      aria-hidden="true"
+      style={{ display: "grid", gap: 16 }}
+    >
+      {/* Categories Group Skeleton */}
+      <div style={{ display: "grid", gap: 8 }}>
+        <Skeleton width="40%" height={16} />
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} style={{ display: "flex", gap: 8, alignItems: "center" }}>
+            <Skeleton width={16} height={16} borderRadius={4} />
+            <Skeleton width="65%" height={14} />
+          </div>
+        ))}
+      </div>
+
+      {/* Price Range Group Skeleton */}
+      <div style={{ display: "grid", gap: 8 }}>
+        <Skeleton width="45%" height={16} />
+        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+          <Skeleton width={28} height={14} />
+          <Skeleton width="100%" height={36} borderRadius={8} />
         </div>
-      ))}
-      <Skeleton width="48%" height={14} />
-      <Skeleton width="100%" height={44} borderRadius={12} />
+        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+          <Skeleton width={28} height={14} />
+          <Skeleton width="100%" height={36} borderRadius={8} />
+        </div>
+      </div>
+
+      {/* Status Group Skeleton */}
+      <div style={{ display: "grid", gap: 8 }}>
+        <Skeleton width="35%" height={16} />
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} style={{ display: "flex", gap: 8, alignItems: "center" }}>
+            <Skeleton width={16} height={16} borderRadius={4} />
+            <Skeleton width="55%" height={14} />
+          </div>
+        ))}
+      </div>
+
+      {/* Popularity Group Skeleton */}
+      <div style={{ display: "grid", gap: 8 }}>
+        <Skeleton width="40%" height={16} />
+        <Skeleton width="100%" height={38} borderRadius={8} />
+      </div>
+
+      {/* Favorites Group Skeleton */}
+      <div style={{ display: "grid", gap: 8 }}>
+        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
+          <Skeleton width={16} height={16} borderRadius={4} />
+          <Skeleton width="60%" height={14} />
+        </div>
+      </div>
+
+      {/* Clear Filters Button Skeleton */}
+      <Skeleton width="100%" height={40} borderRadius={10} style={{ marginTop: 8 }} />
     </div>
   );
 }
@@ -247,80 +291,8 @@ export function EmptyStateSkeleton({ size = "default", hasAction = false }: { si
   );
 }
 
-/**
- * MarketplacePageSkeleton — loading placeholder for the marketplace page.
- * Renders a simplified layout shell while API data is being fetched.
- */
-export function MarketplacePageSkeleton() {
-  return (
-    <div
-      aria-busy="true"
-      aria-label="Marketplace loading"
-      style={{
-        display: "grid",
-        gap: 16,
-        padding: "24px 0",
-      }}
-    >
-      {/* Toolbar skeleton */}
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <Skeleton tone="stellar" width="30%" height={24} />
-        <Skeleton tone="stellar" width={100} height={36} borderRadius={8} />
-      </div>
-
-      {/* Category pills skeleton */}
-      <div style={{ display: "flex", gap: 8 }}>
-        {Array.from({ length: 5 }).map((_, i) => (
-          <Skeleton key={i} tone="stellar" width={80 + i * 10} height={32} borderRadius={8} />
-        ))}
-      </div>
-
-      {/* Tag filter skeleton */}
-      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
-        {Array.from({ length: 6 }).map((_, i) => (
-          <Skeleton key={i} tone="stellar" width={60 + i * 8} height={32} borderRadius={8} />
-        ))}
-      </div>
-
-      {/* Grid skeleton */}
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-          gap: 16,
-        }}
-      >
-        {Array.from({ length: 6 }).map((_, i) => (
-          <div
-            key={i}
-            style={{
-              padding: 16,
-              border: "1px solid var(--line)",
-              borderRadius: 12,
-              display: "grid",
-              gap: 12,
-            }}
-          >
-            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
-              <Skeleton tone="stellar" width={48} height={48} borderRadius={10} />
-              <div style={{ flex: 1, display: "grid", gap: 6 }}>
-                <Skeleton tone="stellar" width="70%" height={16} />
-                <Skeleton tone="stellar" width="50%" height={12} />
-              </div>
-              <Skeleton tone="stellar" width={60} height={14} />
-            </div>
-            <div style={{ display: "flex", gap: 6 }}>
-              {Array.from({ length: 3 }).map((_, j) => (
-                <Skeleton key={j} tone="stellar" width={50 + j * 10} height={24} borderRadius={6} />
-              ))}
-            </div>
-            <Skeleton tone="stellar" width="100%" height={40} borderRadius={6} />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
+import MarketplacePageSkeleton from "../pages/MarketplacePage.skeleton";
+export { MarketplacePageSkeleton };
 
 export function ApiDetailPageSkeleton({ onBack }: { onBack?: () => void }) {
   return (
diff --git a/src/pages/MarketplacePage.skeleton.test.tsx b/src/pages/MarketplacePage.skeleton.test.tsx
index ce98f9c..1f24242 100644
--- a/src/pages/MarketplacePage.skeleton.test.tsx
+++ b/src/pages/MarketplacePage.skeleton.test.tsx
@@ -11,32 +11,48 @@ describe("MarketplacePageSkeleton", () => {
     expect(
       getByLabelText("Marketplace loading shell").getAttribute("aria-busy"),
     ).toBe("true");
+    expect(container.querySelector(".marketplace-page")).toBeTruthy();
+    expect(container.querySelector(".marketplace-header")).toBeTruthy();
+    expect(container.querySelector(".recently-active-rail-skeleton")).toBeTruthy();
     expect(container.querySelector(".marketplace-layout")).toBeTruthy();
     expect(container.querySelector(".marketplace-sidebar")).toBeTruthy();
+    expect(container.querySelector(".marketplace-toolbar")).toBeTruthy();
+    expect(container.querySelector(".filters-sidebar")).toBeTruthy();
+    expect(container.querySelector(".pill-bar")).toBeTruthy();
+    expect(container.querySelector(".api-tag-filter")).toBeTruthy();
     expect(container.querySelector(".marketplace-grid")).toBeTruthy();
-    expect(container.querySelectorAll(".api-marketplace-card").length).toBe(6);
+    expect(container.querySelectorAll(".api-marketplace-card").length).toBe(12);
   });
 
   it("renders card skeletons that match the ApiCard structure for shape parity", () => {
     const { container } = render(<MarketplacePageSkeleton />);
 
-    // Each card skeleton should contain the stats section matching the real card
     const cards = container.querySelectorAll(".api-marketplace-card");
-    expect(cards.length).toBe(6);
+    expect(cards.length).toBe(12);
 
-    // Each card should have a stats section (matching real ApiCard structure)
     cards.forEach((card) => {
       expect(card.querySelector(".api-card__stats")).toBeTruthy();
       expect(card.querySelectorAll(".api-card__stat").length).toBe(3);
     });
   });
 
-  it("renders header, filter sidebar, and toolbar placeholders", () => {
+  it("supports compact density prop", () => {
+    const { container } = render(<MarketplacePageSkeleton density="compact" />);
+
+    const cards = container.querySelectorAll(".api-marketplace-card");
+    expect(cards.length).toBe(12);
+    cards.forEach((card) => {
+      expect(card.classList.contains("api-card--compact")).toBe(true);
+    });
+  });
+
+  it("decorates inner skeleton elements with aria-hidden for accessibility", () => {
     const { container } = render(<MarketplacePageSkeleton />);
 
-    expect(container.querySelector(".marketplace-header")).toBeTruthy();
-    expect(container.querySelector(".marketplace-sidebar")).toBeTruthy();
-    expect(container.querySelector(".marketplace-toolbar")).toBeTruthy();
-    expect(container.querySelector(".filters-sidebar")).toBeTruthy();
+    const rail = container.querySelector(".recently-active-rail-skeleton");
+    expect(rail?.getAttribute("aria-hidden")).toBe("true");
+
+    const sidebar = container.querySelector(".filters-sidebar-skeleton");
+    expect(sidebar?.getAttribute("aria-hidden")).toBe("true");
   });
 });
diff --git a/src/pages/MarketplacePage.skeleton.tsx b/src/pages/MarketplacePage.skeleton.tsx
index 7fcd1fc..c3de60c 100644
--- a/src/pages/MarketplacePage.skeleton.tsx
+++ b/src/pages/MarketplacePage.skeleton.tsx
@@ -2,16 +2,23 @@
  * MarketplacePage.skeleton.tsx
  *
  * Loading shell for the Marketplace page.
- * Uses ApiCardSkeleton (from ApiCard.tsx) to keep skeleton shapes in
- * exact parity with the real cards — dimensions, layout structure, and
- * spacing all mirror the final rendered output so the CLS shift on load
- * is minimal.
+ * Mirrors the exact layout, spacing, components, and responsive grid structure of
+ * MarketplacePage to ensure minimal cumulative layout shift (CLS) on data hydration.
+ *
+ * Accessibility (WCAG 2.1 AA):
+ * - Container carries aria-busy="true" and aria-label="Marketplace loading shell".
+ * - Inner placeholders carry aria-hidden="true" to avoid screen-reader noise.
  */
-import Skeleton from "../components/Skeleton";
+import Skeleton, { FiltersSidebarSkeleton } from "../components/Skeleton";
 import { ApiCardSkeleton } from "../components/ApiCard";
-import { FiltersSidebarSkeleton } from "../components/Skeleton";
+import { ApiTagFilterSkeleton } from "./ApiTagFilter";
+import type { DensityPreference } from "../utils/density";
 
-export default function MarketplacePageSkeleton() {
+export default function MarketplacePageSkeleton({
+  density = "comfortable",
+}: {
+  density?: DensityPreference;
+}) {
   return (
     <div
       className="marketplace-page"
@@ -20,54 +27,107 @@ export default function MarketplacePageSkeleton() {
     >
       {/* ── Header row ── */}
       <div className="marketplace-header">
-        {/* Page title */}
-        <Skeleton width={240} height={42} />
-
-        {/* Search + density toggle */}
+        <h1>API Marketplace</h1>
         <div className="marketplace-search-row">
-          <Skeleton width="100%" height={48} borderRadius={12} />
-
+          <div className="marketplace-search">
+            <Skeleton width="100%" height={44} borderRadius={10} />
+          </div>
           <div
             className="marketplace-density-toggle"
+            role="group"
+            aria-label="Results density"
             aria-hidden="true"
-            style={{ display: "flex", gap: 8 }}
           >
-            <Skeleton width={118} height={40} borderRadius={999} />
-            <Skeleton width={88} height={40} borderRadius={999} />
+            <Skeleton width={110} height={38} borderRadius={8} />
+            <Skeleton width={88} height={38} borderRadius={8} />
           </div>
         </div>
+        <Skeleton width={170} height={40} borderRadius={10} />
+      </div>
 
-        {/* Sort dropdown */}
-        <Skeleton width={170} height={40} borderRadius={12} />
+      {/* ── Recently Active Rail Placeholder ── */}
+      <div
+        className="recently-active-rail-skeleton"
+        aria-hidden="true"
+        style={{
+          display: "flex",
+          gap: 12,
+          overflowX: "hidden",
+          padding: "12px 0",
+          marginBottom: 16,
+        }}
+      >
+        {Array.from({ length: 5 }).map((_, index) => (
+          <Skeleton
+            key={index}
+            width={200}
+            height={72}
+            borderRadius={12}
+            style={{ flexShrink: 0 }}
+          />
+        ))}
       </div>
 
       {/* ── Main layout ── */}
       <div className="marketplace-layout">
-        <aside className="marketplace-sidebar filters-sidebar">
+        <aside className="marketplace-sidebar">
           <FiltersSidebarSkeleton />
         </aside>
 
         <main className="marketplace-results">
           {/* Toolbar: result count + actions */}
           <div className="marketplace-toolbar">
-            <Skeleton width="42%" height={18} />
+            <div className="marketplace-count">
+              <Skeleton width={180} height={20} />
+            </div>
             <div className="marketplace-actions" aria-hidden="true">
-              {/* Sort dropdown placeholder */}
-              <Skeleton width={142} height={40} borderRadius={10} />
-              {/* Filters button placeholder */}
-              <Skeleton width={110} height={40} borderRadius={10} />
+              <Skeleton width={140} height={38} borderRadius={8} />
+              <Skeleton width={90} height={38} borderRadius={8} />
             </div>
           </div>
 
-          {/*
-           * Card grid — ApiCardSkeleton is kept in sync with the real ApiCard
-           * layout automatically, so any future card changes are reflected here.
-           */}
+          {/* Category Pills placeholder */}
+          <div
+            className="pill-bar"
+            aria-hidden="true"
+            style={{ display: "flex", gap: 8, margin: "12px 0" }}
+          >
+            {Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton
+                key={i}
+                width={70 + (i % 3) * 20}
+                height={34}
+                borderRadius={999}
+              />
+            ))}
+          </div>
+
+          {/* Tag filter placeholder */}
+          <div style={{ marginBottom: 16 }}>
+            <ApiTagFilterSkeleton />
+          </div>
+
+          {/* Grid skeleton */}
           <div className="marketplace-grid">
-            {Array.from({ length: 6 }).map((_, index) => (
-              <ApiCardSkeleton key={index} />
+            {Array.from({ length: 12 }).map((_, index) => (
+              <ApiCardSkeleton key={index} density={density} />
             ))}
           </div>
+
+          {/* Bottom pagination placeholder */}
+          <div
+            aria-hidden="true"
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginTop: 24,
+              paddingTop: 16,
+            }}
+          >
+            <Skeleton width={120} height={36} borderRadius={8} />
+            <Skeleton width={200} height={36} borderRadius={8} />
+          </div>
         </main>
       </div>
     </div>
diff --git a/src/pages/MarketplacePage.test.tsx b/src/pages/MarketplacePage.test.tsx
index a53a9b6..04fba7d 100644
--- a/src/pages/MarketplacePage.test.tsx
+++ b/src/pages/MarketplacePage.test.tsx
@@ -517,3 +517,54 @@ describe("MarketplacePage tabular-nums (FWC26)", () => {
     }
   });
 });
+
+describe("MarketplacePage loading skeleton transition", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: (query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: () => {},
+        removeListener: () => {},
+        addEventListener: () => {},
+        removeEventListener: () => {},
+        dispatchEvent: () => false,
+      }),
+    });
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.useRealTimers();
+  });
+
+  it("renders MarketplacePageSkeleton while loading before timers settle", () => {
+    renderPage();
+
+    // Before timers settle, page should render MarketplacePageSkeleton
+    const loadingShell = screen.getByLabelText("Marketplace loading shell");
+    expect(loadingShell).toBeTruthy();
+    expect(loadingShell.getAttribute("aria-busy")).toBe("true");
+
+    const cards = document.querySelectorAll(".api-marketplace-card");
+    expect(cards.length).toBe(12);
+  });
+
+  it("transitions smoothly from MarketplacePageSkeleton to loaded content when timers settle", () => {
+    renderPage();
+
+    // Verify initial loading shell
+    expect(screen.getByLabelText("Marketplace loading shell")).toBeTruthy();
+
+    // Advance timers to complete loading
+    settleMarketplaceTimers();
+
+    // Verify loaded page elements
+    expect(screen.queryByLabelText("Marketplace loading shell")).toBeNull();
+    expect(screen.getByRole("heading", { name: "API Marketplace", level: 1 })).toBeTruthy();
+    expect(document.querySelector(".marketplace-grid")).toBeTruthy();
+  });
+});
diff --git a/src/pages/MarketplacePage.tsx b/src/pages/MarketplacePage.tsx
index f8c8ece..0f0810e 100644
--- a/src/pages/MarketplacePage.tsx
+++ b/src/pages/MarketplacePage.tsx
@@ -8,7 +8,7 @@ import SortDropdown, { type SortValue } from "../components/SortDropdown";
 
 import CategoryPills from "../components/CategoryPills";
 import ApiTagFilter, { getAllUniqueTags } from "./ApiTagFilter";
-import FiltersSidebar, { ALL_CATEGORIES, STATUS_OPTIONS } from "../components/FiltersSidebar";
+import FiltersSidebar, { ALL_CATEGORIES } from "../components/FiltersSidebar";
 import KbdHint from "../components/KbdHint";
 import { SHORTCUTS } from "../hooks/useGlobalShortcuts";
 import EmptyState from "../components/EmptyState";
@@ -22,7 +22,7 @@ import {
   persistDensityPreference,
   type DensityPreference,
 } from "../utils/density";
-import CompareDrawer from "../components/CompareDrawer";
+
 import FiltersBottomSheet from "../components/FiltersBottomSheet";
 import LiveRegion from "../components/LiveRegion";
 import RecentlyActiveRail from "../components/RecentlyActiveRail";
@@ -498,6 +498,10 @@ export default function MarketplacePage(): JSX.Element {
   const startItem = (validCurrentPage - 1) * pageSize + 1;
   const endItem = Math.min(validCurrentPage * pageSize, filtered.length);
 
+  if (isLoading) {
+    return <MarketplacePageSkeleton density={density} />;
+  }
+
   return (
     <div className="marketplace-page">
       {/* Top row: title + search only */}
@@ -642,8 +646,6 @@ export default function MarketplacePage(): JSX.Element {
 
           {fetchError ? (
             <EmptyState variant="error" onRetry={handleRetryFetch} />
-          ) : isLoading ? (
-            <MarketplacePageSkeleton />
           ) : filtered.length === 0 ? (
             <EmptyState
               variant={hasActiveFilters() ? "filtered" : "empty"}