diff --git a/apps/web/src/components/categories/canonical-view.tsx b/apps/web/src/components/categories/canonical-view.tsx
index 5bd0997..72864e1 100644
--- a/apps/web/src/components/categories/canonical-view.tsx
+++ b/apps/web/src/components/categories/canonical-view.tsx
@@ -36,10 +36,23 @@ interface CanonicalGroup {
  * bucket expands to a grid of its categories, which drill into parts via the
  * normal category route (reusing CategoryGrid's navigation).
  */
-export function CanonicalView({ vehicleId }: { vehicleId: string }) {
+export function CanonicalView({
+  vehicleId,
+  endpoint,
+  catalogMode,
+  brandName,
+  variantSearch,
+}: {
+  vehicleId: string;
+  /** Override the fetch URL — the pl24 catalog flow uses /catalog/vehicles/:id/canonical. */
+  endpoint?: string;
+  catalogMode?: boolean;
+  brandName?: string;
+  variantSearch?: { body?: string; engine?: string; gearbox?: string; mgp?: string };
+}) {
   const { data, isLoading } = useQuery({
-    queryKey: ["canonical-tree", vehicleId],
-    queryFn: () => api.get<CanonicalGroup[]>(`/categories/canonical/${vehicleId}`),
+    queryKey: ["canonical-tree", vehicleId, endpoint ?? ""],
+    queryFn: () => api.get<CanonicalGroup[]>(endpoint ?? `/categories/canonical/${vehicleId}`),
     enabled: !!vehicleId,
   });
 
@@ -111,7 +124,14 @@ export function CanonicalView({ vehicleId }: { vehicleId: string }) {
                             </span>
                           ) : null}
                         </div>
-                        <CategoryGrid categories={sg.categories} vehicleId={vehicleId} hideFilter />
+                        <CategoryGrid
+                          categories={sg.categories}
+                          vehicleId={vehicleId}
+                          hideFilter
+                          catalogMode={catalogMode}
+                          brandName={brandName}
+                          variantSearch={variantSearch}
+                        />
                       </div>
                     ))}
                   </div>
@@ -120,7 +140,14 @@ export function CanonicalView({ vehicleId }: { vehicleId: string }) {
               // Fallback: flat source categories (un-drilled bucket — drilling
               // fills the sub-leaves on the next load).
               return (
-                <CategoryGrid categories={group.categories} vehicleId={vehicleId} hideFilter />
+                <CategoryGrid
+                  categories={group.categories}
+                  vehicleId={vehicleId}
+                  hideFilter
+                  catalogMode={catalogMode}
+                  brandName={brandName}
+                  variantSearch={variantSearch}
+                />
               );
             })()}
           </AccordionContent>
diff --git a/apps/web/src/routes/dashboard/catalog_/$brandName_/$modelId/index.tsx b/apps/web/src/routes/dashboard/catalog_/$brandName_/$modelId/index.tsx
index 1c3e3e3..833e0a5 100644
--- a/apps/web/src/routes/dashboard/catalog_/$brandName_/$modelId/index.tsx
+++ b/apps/web/src/routes/dashboard/catalog_/$brandName_/$modelId/index.tsx
@@ -3,6 +3,7 @@ import { FordVariantSelector } from "@/components/catalog/ford-variant-selector"
 import { P5RestrictionSelector } from "@/components/catalog/p5-restriction-selector";
 import { PsaVariantSelector } from "@/components/catalog/psa-variant-selector";
 import { ViewModeToggle } from "@/components/catalog/view-mode-toggle";
+import { CanonicalView } from "@/components/categories/canonical-view";
 import { CategoryColumns } from "@/components/categories/category-columns";
 import { CategoryGrid } from "@/components/categories/category-grid";
 import { CategoryTree } from "@/components/categories/category-tree";
@@ -40,6 +41,9 @@ function CatalogVehiclePage() {
   const mgp = search.mgp;
   const hasVariant = !!(body || engine || gearbox || mgp);
 
+  // "source" (default) = ham pl24 ağacı; "canonical" = birleşik 20-kova görünüm
+  // (vehicles/$id sayfasıyla aynı desen; backend: /catalog/vehicles/:id/canonical).
+  const [browseMode, setBrowseMode] = useState<"source" | "canonical">("source");
   const [viewMode, setViewMode] = useState<ViewMode>(
     () => (getUserSettings().categoryViewMode as ViewMode | undefined) ?? "grid",
   );
@@ -173,16 +177,51 @@ function CatalogVehiclePage() {
       ) : (
         <section className="space-y-3">
           <div className="flex items-baseline justify-between">
-            <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
-              {t("catalog.categories")}
-            </h2>
-            {categoryTree && categoryTree.length > 0 && (
+            <div className="flex items-center gap-3">
+              <h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+                {t("catalog.categories")}
+              </h2>
+              <div className="inline-flex rounded-md border border-border p-0.5">
+                <button
+                  type="button"
+                  onClick={() => setBrowseMode("canonical")}
+                  className={`rounded px-2.5 py-1 text-xs font-medium transition-colors ${browseMode === "canonical" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`}
+                >
+                  Birleşik
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setBrowseMode("source")}
+                  className={`rounded px-2.5 py-1 text-xs font-medium transition-colors ${browseMode === "source" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground"}`}
+                >
+                  Orijinal Katalog
+                </button>
+              </div>
+            </div>
+            {browseMode === "source" && categoryTree && categoryTree.length > 0 && (
               <span className="text-xs tabular-nums text-muted-foreground">
                 {t("catalog.categoryCount", { count: categoryCount })}
               </span>
             )}
           </div>
-          {categoriesLoading ? (
+          {browseMode === "canonical" ? (
+            <CanonicalView
+              vehicleId={modelId}
+              endpoint={`/catalog/vehicles/${modelId}/canonical${(() => {
+                const p = new URLSearchParams();
+                if (body) p.set("body", body);
+                if (engine) p.set("engine", engine);
+                if (gearbox) p.set("gearbox", gearbox);
+                if (mgp) p.set("mgp", mgp);
+                const qs = p.toString();
+                return qs ? `?${qs}` : "";
+              })()}`}
+              catalogMode
+              brandName={brandName}
+              variantSearch={variantSearch}
+            />
+          ) : null}
+          {browseMode !== "source" ? null : categoriesLoading ? (
             <div className="space-y-2">
               {KEYS_8.map((__k) => (
                 <Skeleton key={__k} className="h-10 w-full rounded-md" />