diff --git a/.vscode/launch.json b/.vscode/launch.json
index 8f9df64..f961904 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -11,7 +11,7 @@
             "command": "npm run dev"
         },
         {"name": "Launch Chrome against localhost",
-            "type": "pwa-chrome",
+            "type": "chrome",
             "request": "launch",
             "url": "http://localhost:3000",
             "webRoot": "${workspaceFolder}"
diff --git a/dynamic-route-healthcheck.sh b/bash-setup-scripts/dynamic-route-healthcheck.sh
similarity index 100%
rename from dynamic-route-healthcheck.sh
rename to bash-setup-scripts/dynamic-route-healthcheck.sh
diff --git a/fix-api-dynamic-routes.sh b/bash-setup-scripts/fix-api-dynamic-routes.sh
similarity index 100%
rename from fix-api-dynamic-routes.sh
rename to bash-setup-scripts/fix-api-dynamic-routes.sh
diff --git a/patch-dynamic-routes.sh b/bash-setup-scripts/patch-dynamic-routes.sh
similarity index 100%
rename from patch-dynamic-routes.sh
rename to bash-setup-scripts/patch-dynamic-routes.sh
diff --git a/patch-scss-imports.sh b/bash-setup-scripts/patch-scss-imports.sh
similarity index 100%
rename from patch-scss-imports.sh
rename to bash-setup-scripts/patch-scss-imports.sh
diff --git a/patch-tailwind-reference.sh b/bash-setup-scripts/patch-tailwind-reference.sh
similarity index 100%
rename from patch-tailwind-reference.sh
rename to bash-setup-scripts/patch-tailwind-reference.sh
diff --git a/setup-api-layer.sh b/bash-setup-scripts/setup-api-layer.sh
similarity index 100%
rename from setup-api-layer.sh
rename to bash-setup-scripts/setup-api-layer.sh
diff --git a/bash-setup-scripts/setup-compatibility-option.sh b/bash-setup-scripts/setup-compatibility-option.sh
new file mode 100755
index 0000000..c36fab5
--- /dev/null
+++ b/bash-setup-scripts/setup-compatibility-option.sh
@@ -0,0 +1,259 @@
+#!/bin/zsh
+
+echo "🛠 Setting up Compatibility Explorer (Option A)..."
+
+COMPAT_DIR="src/app/compatibility"
+mkdir -p "$COMPAT_DIR"
+
+cat > "$COMPAT_DIR/page.js" << 'EOF'
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { CATEGORIES } from "@/lib/data/categories";
+
+function ModeCard({ title, emoji, description, children }) {
+  return (
+    <div className="border rounded-xl p-6 shadow-sm bg-white flex flex-col gap-4">
+      <div className="flex items-center gap-3">
+        <div className="text-2xl">{emoji}</div>
+        <div>
+          <h2 className="font-semibold text-lg">{title}</h2>
+          <p className="text-sm text-gray-500">{description}</p>
+        </div>
+      </div>
+      <div className="mt-2 flex flex-col gap-3">{children}</div>
+    </div>
+  );
+}
+
+export default function CompatibilityPage() {
+  const [models, setModels] = useState([]);
+  const [parts, setParts] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const [modelForParts, setModelForParts] = useState("");
+  const [partForModels, setPartForModels] = useState("");
+  const [modelA, setModelA] = useState("");
+  const [modelB, setModelB] = useState("");
+  const [categoryModel, setCategoryModel] = useState("");
+  const [category, setCategory] = useState("");
+
+  const router = useRouter();
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const [modelsRes, partsRes] = await Promise.all([
+          fetch("/api/models"),
+          fetch("/api/parts"),
+        ]);
+
+        const modelsJson = modelsRes.ok ? await modelsRes.json() : [];
+        const partsJson = partsRes.ok ? await partsRes.json() : [];
+
+        setModels(modelsJson || []);
+        setParts(partsJson || []);
+      } catch (e) {
+        console.error("Failed to load models/parts", e);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    load();
+  }, []);
+
+  function handleGoToModelCompatibility() {
+    if (!modelForParts) return;
+    router.push(`/model/${modelForParts}`);
+  }
+
+  function handleGoToPartCompatibility() {
+    if (!partForModels) return;
+    router.push(`/part/${partForModels}`);
+  }
+
+  function handleExploreCategory() {
+    if (!categoryModel || !category) return;
+    router.push(`/category/${categoryModel}/${category}`);
+  }
+
+  function handleCompareModels() {
+    if (!modelA || !modelB) return;
+    // Stubbed for now to avoid broken routes
+    alert("Model comparison view coming soon! (Hotshot vs Supershot, etc.)");
+  }
+
+  return (
+    <div className="space-y-10">
+      {/* Breadcrumb-ish header */}
+      <nav className="text-sm text-gray-500">
+        <Link href="/" className="hover:underline text-blue-600">
+          Home
+        </Link>{" "}
+        <span>›</span>{" "}
+        <span className="font-semibold text-gray-700">Compatibility Explorer</span>
+      </nav>
+
+      {/* Page Title */}
+      <div>
+        <h1 className="text-4xl font-bold mb-2">Compatibility Explorer</h1>
+        <p className="text-gray-600 max-w-2xl">
+          Discover cross-compatibility between RC models and parts. Use one of the
+          tools below to explore fitment, upgrades, and shared components.
+        </p>
+      </div>
+
+      {loading && (
+        <p className="text-gray-500">Loading models and parts…</p>
+      )}
+
+      {/* Mode Selector Grid */}
+      {!loading && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Mode 1: Model → Compatible Parts */}
+          <ModeCard
+            title="Model → Compatible Parts"
+            emoji="🔧"
+            description="Find every part that fits a specific RC model."
+          >
+            <select
+              className="border rounded-lg px-3 py-2"
+              value={modelForParts}
+              onChange={(e) => setModelForParts(e.target.value)}
+            >
+              <option value="">Select a model…</option>
+              {models.map((m) => (
+                <option key={m.id} value={m.id}>
+                  {m.name} ({m.brand})
+                </option>
+              ))}
+            </select>
+            <button
+              onClick={handleGoToModelCompatibility}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
+              disabled={!modelForParts}
+            >
+              Show Compatible Parts
+            </button>
+          </ModeCard>
+
+          {/* Mode 2: Part → Compatible Models */}
+          <ModeCard
+            title="Part → Compatible Models"
+            emoji="🧩"
+            description="See all RC models that this part works with."
+          >
+            <select
+              className="border rounded-lg px-3 py-2"
+              value={partForModels}
+              onChange={(e) => setPartForModels(e.target.value)}
+            >
+              <option value="">Select a part…</option>
+              {parts.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.name} ({p.id})
+                </option>
+              ))}
+            </select>
+            <button
+              onClick={handleGoToPartCompatibility}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
+              disabled={!partForModels}
+            >
+              Show Compatible Models
+            </button>
+          </ModeCard>
+
+          {/* Mode 3: Compare Two Models (stubbed) */}
+          <ModeCard
+            title="Compare Two Models"
+            emoji="🔍"
+            description="See shared and unique parts between two models. (Coming soon)"
+          >
+            <div className="flex flex-col gap-2">
+              <select
+                className="border rounded-lg px-3 py-2"
+                value={modelA}
+                onChange={(e) => setModelA(e.target.value)}
+              >
+                <option value="">Select Model A…</option>
+                {models.map((m) => (
+                  <option key={m.id} value={m.id}>
+                    {m.name} ({m.brand})
+                  </option>
+                ))}
+              </select>
+              <select
+                className="border rounded-lg px-3 py-2"
+                value={modelB}
+                onChange={(e) => setModelB(e.target.value)}
+              >
+                <option value="">Select Model B…</option>
+                {models.map((m) => (
+                  <option key={m.id} value={m.id}>
+                    {m.name} ({m.brand})
+                  </option>
+                ))}
+              </select>
+            </div>
+            <button
+              onClick={handleCompareModels}
+              className="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg cursor-not-allowed"
+              disabled
+            >
+              Compare (Coming Soon)
+            </button>
+          </ModeCard>
+
+          {/* Mode 4: Explore Categories */}
+          <ModeCard
+            title="Explore by Category"
+            emoji="📂"
+            description="Browse shocks, drivetrain, chassis, and more for a model."
+          >
+            <div className="flex flex-col gap-2">
+              <select
+                className="border rounded-lg px-3 py-2"
+                value={categoryModel}
+                onChange={(e) => setCategoryModel(e.target.value)}
+              >
+                <option value="">Select a model…</option>
+                {models.map((m) => (
+                  <option key={m.id} value={m.id}>
+                    {m.name} ({m.brand})
+                  </option>
+                ))}
+              </select>
+
+              <select
+                className="border rounded-lg px-3 py-2"
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+              >
+                <option value="">Select a category…</option>
+                {CATEGORIES.map((cat) => (
+                  <option key={cat} value={cat}>
+                    {cat}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <button
+              onClick={handleExploreCategory}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
+              disabled={!categoryModel || !category}
+            >
+              Explore Category
+            </button>
+          </ModeCard>
+        </div>
+      )}
+    </div>
+  );
+}
+EOF
+
+echo "🎉 Compatibility Explorer (Option A) page created at src/app/compatibility/page.js"
diff --git a/setup-data-layer.sh b/bash-setup-scripts/setup-data-layer.sh
similarity index 100%
rename from setup-data-layer.sh
rename to bash-setup-scripts/setup-data-layer.sh
diff --git a/setup-models-browser.sh b/bash-setup-scripts/setup-models-browser.sh
similarity index 100%
rename from setup-models-browser.sh
rename to bash-setup-scripts/setup-models-browser.sh
diff --git a/setup-ui-integration.sh b/bash-setup-scripts/setup-ui-integration.sh
similarity index 100%
rename from setup-ui-integration.sh
rename to bash-setup-scripts/setup-ui-integration.sh
diff --git a/setup-ui-polish.sh b/bash-setup-scripts/setup-ui-polish.sh
similarity index 100%
rename from setup-ui-polish.sh
rename to bash-setup-scripts/setup-ui-polish.sh
diff --git a/setuprc.sh b/bash-setup-scripts/setuprc.sh
similarity index 100%
rename from setuprc.sh
rename to bash-setup-scripts/setuprc.sh
diff --git a/generate_admin_ui.sh b/generate_admin_ui.sh
new file mode 100755
index 0000000..684750b
--- /dev/null
+++ b/generate_admin_ui.sh
@@ -0,0 +1,289 @@
+#!/usr/bin/env bash
+
+echo "🚀 Generating Admin UI (Next.js App Router, JS, Tailwind)..."
+
+### Root paths
+APP_DIR="src/app/admin"
+COMP_DIR="src/components/admin"
+LIB_DIR="lib"
+
+# Create directories
+mkdir -p "$APP_DIR"
+mkdir -p "$APP_DIR/models/new"
+mkdir -p "$APP_DIR/models/[id]"
+mkdir -p "$APP_DIR/parts/new"
+mkdir -p "$APP_DIR/parts/[id]"
+mkdir -p "$COMP_DIR"
+mkdir -p "$LIB_DIR"
+
+############################################
+# 1. ADMIN LAYOUT
+############################################
+cat <<'EOF' > "$APP_DIR/layout.js"
+import React from "react";
+import Link from "next/link";
+import "../globals.css";
+
+export default function AdminLayout({ children }) {
+  return (
+    <div className="min-h-screen flex bg-gray-100">
+      <aside className="w-64 bg-white shadow-md p-6">
+        <h2 className="text-2xl font-bold mb-6">Admin</h2>
+
+        <nav className="space-y-4">
+          <Link href="/admin" className="block hover:text-black">
+            Dashboard
+          </Link>
+          <Link href="/admin/models" className="block hover:text-black">
+            Models
+          </Link>
+          <Link href="/admin/parts" className="block hover:text-black">
+            Parts
+          </Link>
+        </nav>
+      </aside>
+
+      <main className="flex-1 p-10">{children}</main>
+    </div>
+  );
+}
+EOF
+
+############################################
+# 2. ADMIN HOME PAGE
+############################################
+cat <<'EOF' > "$APP_DIR/page.js"
+import { supabaseServer } from "@/lib/supabaseServer";
+
+export default async function AdminHome() {
+  const { data: models } = await supabaseServer.from("models").select("*");
+  const { data: parts } = await supabaseServer.from("parts").select("*");
+  const { data: compat } = await supabaseServer.from("parts_compatible_models").select("*");
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-6">Admin Dashboard</h1>
+
+      <div className="grid grid-cols-3 gap-6">
+        <div className="p-6 bg-white shadow rounded-lg">
+          <h2 className="text-xl font-semibold">Models</h2>
+          <p className="text-3xl mt-2">{models?.length ?? 0}</p>
+        </div>
+
+        <div className="p-6 bg-white shadow rounded-lg">
+          <h2 className="text-xl font-semibold">Parts</h2>
+          <p className="text-3xl mt-2">{parts?.length ?? 0}</p>
+        </div>
+
+        <div className="p-6 bg-white shadow rounded-lg">
+          <h2 className="text-xl font-semibold">Compatibility</h2>
+          <p className="text-3xl mt-2">{compat?.length ?? 0}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+EOF
+
+############################################
+# 3. MODELS LIST PAGE
+############################################
+cat <<'EOF' > "$APP_DIR/models/page.js"
+import Link from "next/link";
+import { supabaseServer } from "@/lib/supabaseServer";
+
+export default async function ModelsPage() {
+  const { data: models } = await supabaseServer
+    .from("models")
+    .select("*")
+    .order("name");
+
+  return (
+    <div>
+      <div className="flex justify-between mb-6">
+        <h1 className="text-3xl font-bold">Models</h1>
+        <Link href="/admin/models/new" className="px-4 py-2 bg-black text-white rounded">
+          + Add Model
+        </Link>
+      </div>
+
+      <div className="bg-white shadow rounded-lg divide-y">
+        {models?.map((m) => (
+          <Link
+            key={m.id}
+            href={`/admin/models/${m.id}`}
+            className="block p-4 hover:bg-gray-50"
+          >
+            <div className="font-semibold">{m.name}</div>
+            <div className="text-sm text-gray-500">{m.brand}</div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
+EOF
+
+############################################
+# 4. NEW MODEL PAGE
+############################################
+cat <<'EOF' > "$APP_DIR/models/new/page.js"
+"use client";
+
+import { useState } from "react";
+import { supabaseBrowser } from "@/lib/supabaseClient";
+import { useRouter } from "next/navigation";
+
+export default function NewModelPage() {
+  const [form, setForm] = useState({
+    name: "",
+    brand: "",
+    scale: "",
+    chassis_type: "",
+    notes: "",
+  });
+
+  const router = useRouter();
+
+  async function save() {
+    const { error } = await supabaseBrowser.from("models").insert(form);
+    if (!error) router.push("/admin/models");
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">Add New Model</h1>
+
+      <div className="space-y-4 max-w-lg">
+        {Object.entries(form).map(([key, value]) => (
+          <div key={key}>
+            <label className="block mb-1 capitalize">{key.replace("_", " ")}</label>
+            <input
+              className="w-full p-2 border rounded"
+              value={value}
+              onChange={(e) => setForm({ ...form, [key]: e.target.value })}
+            />
+          </div>
+        ))}
+
+        <button
+          onClick={save}
+          className="px-4 py-2 bg-black text-white rounded"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  );
+}
+EOF
+
+############################################
+# 5. MODEL DETAIL PAGE
+############################################
+cat <<'EOF' > "$APP_DIR/models/[id]/page.js"
+import Link from "next/link";
+import { supabaseServer } from "@/lib/supabaseServer";
+
+export default async function ModelDetail({ params }) {
+  const { id } = params;
+
+  const { data: model } = await supabaseServer
+    .from("models")
+    .select("*")
+    .eq("id", id)
+    .single();
+
+  const { data: compat } = await supabaseServer
+    .from("parts_compatible_models")
+    .select("*, parts(*)")
+    .eq("model_id", id);
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-4">{model?.name}</h1>
+
+      <div className="bg-white p-4 shadow rounded mb-6">
+        <div className="text-gray-700">Brand: {model?.brand}</div>
+        <div className="text-gray-700">Scale: {model?.scale}</div>
+        <div className="text-gray-700">Chassis: {model?.chassis_type}</div>
+      </div>
+
+      <h2 className="text-2xl font-bold mb-2">Compatible Parts</h2>
+
+      <Link
+        href={`/admin/models/${id}/add-part`}
+        className="inline-block mb-4 px-4 py-2 bg-black text-white rounded"
+      >
+        + Add Compatible Part
+      </Link>
+
+      <div className="bg-white shadow rounded divide-y">
+        {compat?.map((c) => (
+          <div key={c.id} className="p-4 flex justify-between">
+            <div>
+              <div className="font-semibold">{c.parts.name}</div>
+              <div className="text-sm text-gray-500">{c.fit_type}</div>
+            </div>
+            <Link
+              href={`/admin/parts/${c.parts.id}`}
+              className="text-blue-600 underline"
+            >
+              View Part
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+EOF
+
+############################################
+# PARTS PAGES (STUBS)
+############################################
+
+cat <<'EOF' > "$APP_DIR/parts/page.js"
+export default function PartsPage() {
+  return (
+    <div>
+      <h1 className="text-3xl font-bold">Parts (UI Coming Next)</h1>
+      <p className="text-gray-600 mt-2">List, edit, and link parts here.</p>
+    </div>
+  );
+}
+EOF
+
+cat <<'EOF' > "$APP_DIR/parts/new/page.js"
+export default function NewPartPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold">Add Part (UI Coming Next)</h1>
+    </div>
+  );
+}
+EOF
+
+############################################
+# SUPABASE CLIENTS
+############################################
+
+cat <<'EOF' > "$LIB_DIR/supabaseClient.js"
+import { createClient } from "@supabase/supabase-js";
+
+export const supabaseBrowser = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+);
+EOF
+
+cat <<'EOF' > "$LIB_DIR/supabaseServer.js"
+import { createClient } from "@supabase/supabase-js";
+
+export const supabaseServer = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL,
+  process.env.SUPABASE_SERVICE_ROLE_KEY
+);
+EOF
+
+echo "🎉 Admin UI scaffolding complete!"
diff --git a/package-lock.json b/package-lock.json
index ba0b8ab..9f1d55e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "license": "ISC",
       "dependencies": {
+        "@supabase/supabase-js": "^2.84.0",
         "fs": "^0.0.1-security",
         "next": "16.0.3",
         "path": "^0.12.7",
@@ -1464,6 +1465,79 @@
       "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
       "dev": true
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.84.0",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.84.0.tgz",
+      "integrity": "sha512-J6XKbqqg1HQPMfYkAT9BrC8anPpAiifl7qoVLsYhQq5B/dnu/lxab1pabnxtJEsvYG5rwI5HEVEGXMjoQ6Wz2Q==",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.84.0",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.84.0.tgz",
+      "integrity": "sha512-2oY5QBV4py/s64zMlhPEz+4RTdlwxzmfhM1k2xftD2v1DruRZKfoe7Yn9DCz1VondxX8evcvpc2udEIGzHI+VA==",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.84.0",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.84.0.tgz",
+      "integrity": "sha512-oplc/3jfJeVW4F0J8wqywHkjIZvOVHtqzF0RESijepDAv5Dn/LThlGW1ftysoP4+PXVIrnghAbzPHo88fNomPQ==",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.84.0",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.84.0.tgz",
+      "integrity": "sha512-ThqjxiCwWiZAroHnYPmnNl6tZk6jxGcG2a7Hp/3kcolPcMj89kWjUTA3cHmhdIWYsP84fHp8MAQjYWMLf7HEUg==",
+      "dependencies": {
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "tslib": "2.8.1",
+        "ws": "^8.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.84.0",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.84.0.tgz",
+      "integrity": "sha512-vXvAJ1euCuhryOhC6j60dG8ky+lk0V06ubNo+CbhuoUv+sl39PyY0lc+k+qpQhTk/VcI6SiM0OECLN83+nyJ5A==",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.84.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.84.0.tgz",
+      "integrity": "sha512-byMqYBvb91sx2jcZsdp0qLpmd4Dioe80e4OU/UexXftCkpTcgrkoENXHf5dO8FCSai8SgNeq16BKg10QiDI6xg==",
+      "dependencies": {
+        "@supabase/auth-js": "2.84.0",
+        "@supabase/functions-js": "2.84.0",
+        "@supabase/postgrest-js": "2.84.0",
+        "@supabase/realtime-js": "2.84.0",
+        "@supabase/storage-js": "2.84.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -1756,6 +1830,27 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "24.10.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
+      "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
+      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A=="
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.47.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.47.0.tgz",
@@ -6350,6 +6445,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="
+    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
@@ -6540,6 +6640,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index a65c4ac..2e23bf7 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.84.0",
     "fs": "^0.0.1-security",
     "next": "16.0.3",
     "path": "^0.12.7",
diff --git a/scripts/migrateParts.js b/scripts/migrateParts.js
deleted file mode 100644
index 74f0947..0000000
--- a/scripts/migrateParts.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-const PARTS_PATH = path.join(process.cwd(), "src/lib/data/parts.js");
-
-let content = fs.readFileSync(PARTS_PATH, "utf8");
-
-content = content.replace(/fitsModels/g, "compatibleModels");
-
-fs.writeFileSync(PARTS_PATH, content);
-
-console.log("✔ Migration complete: fitsModels → compatibleModels");
diff --git a/src/app/admin/layout.js b/src/app/admin/layout.js
new file mode 100644
index 0000000..9793d25
--- /dev/null
+++ b/src/app/admin/layout.js
@@ -0,0 +1,33 @@
+import React from "react";
+import Link from "next/link";
+import "../globals.css";
+
+export default function AdminLayout({ children }) {
+  return (
+    <div className="min-h-screen flex bg-gray-100">
+      <aside className="w-64 bg-white shadow-md p-6">
+        <h2 className="text-2xl font-bold mb-6 text-gray-900">Admin</h2>
+
+        <nav className="space-y-4">
+          <Link href="/admin" className="block hover:text-black text-gray-900">
+            Dashboard
+          </Link>
+          <Link
+            href="/admin/models"
+            className="block hover:text-gray-300 text-gray-900"
+          >
+            Models
+          </Link>
+          <Link
+            href="/admin/parts"
+            className="block hover:text-gray-300 text-gray-900"
+          >
+            Parts
+          </Link>
+        </nav>
+      </aside>
+
+      <main className="flex-1 p-10 admin-text text-gray-900">{children}</main>
+    </div>
+  );
+}
diff --git a/src/app/admin/models/[id]/page.js b/src/app/admin/models/[id]/page.js
new file mode 100644
index 0000000..e11ab34
--- /dev/null
+++ b/src/app/admin/models/[id]/page.js
@@ -0,0 +1,55 @@
+import Link from "next/link";
+import { supabaseServer } from "@/lib/supabaseServer";
+
+export default async function ModelDetail({ params }) {
+  const { id } = params;
+
+  const { data: model } = await supabaseServer
+    .from("models")
+    .select("*")
+    .eq("id", id)
+    .single();
+
+  const { data: compat } = await supabaseServer
+    .from("parts_compatible_models")
+    .select("*, parts(*)")
+    .eq("model_id", id);
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-4">{model?.name}</h1>
+
+      <div className="bg-white p-4 shadow rounded mb-6">
+        <div className="text-gray-700">Brand: {model?.brand}</div>
+        <div className="text-gray-700">Scale: {model?.scale}</div>
+        <div className="text-gray-700">Chassis: {model?.chassis_type}</div>
+      </div>
+
+      <h2 className="text-2xl font-bold mb-2">Compatible Parts</h2>
+
+      <Link
+        href={`/admin/models/${id}/add-part`}
+        className="inline-block mb-4 px-4 py-2 bg-black text-white rounded"
+      >
+        + Add Compatible Part
+      </Link>
+
+      <div className="bg-white shadow rounded divide-y">
+        {compat?.map((c) => (
+          <div key={c.id} className="p-4 flex justify-between">
+            <div>
+              <div className="font-semibold">{c.parts.name}</div>
+              <div className="text-sm text-gray-500">{c.fit_type}</div>
+            </div>
+            <Link
+              href={`/admin/parts/${c.parts.id}`}
+              className="text-blue-600 underline"
+            >
+              View Part
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/models/new/page.js b/src/app/admin/models/new/page.js
new file mode 100644
index 0000000..6982cd8
--- /dev/null
+++ b/src/app/admin/models/new/page.js
@@ -0,0 +1,48 @@
+"use client";
+
+import { useState } from "react";
+import { supabaseBrowser } from "@/lib/supabaseClient";
+import { useRouter } from "next/navigation";
+
+export default function NewModelPage() {
+  const [form, setForm] = useState({
+    name: "",
+    brand: "",
+    scale: "",
+    chassis_type: "",
+    notes: "",
+  });
+
+  const router = useRouter();
+
+  async function save() {
+    const { error } = await supabaseBrowser.from("models").insert(form);
+    if (!error) router.push("/admin/models");
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">Add New Model</h1>
+
+      <div className="space-y-4 max-w-lg">
+        {Object.entries(form).map(([key, value]) => (
+          <div key={key}>
+            <label className="block mb-1 capitalize">{key.replace("_", " ")}</label>
+            <input
+              className="w-full p-2 border rounded"
+              value={value}
+              onChange={(e) => setForm({ ...form, [key]: e.target.value })}
+            />
+          </div>
+        ))}
+
+        <button
+          onClick={save}
+          className="px-4 py-2 bg-black text-white rounded"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/models/page.js b/src/app/admin/models/page.js
new file mode 100644
index 0000000..4f963f4
--- /dev/null
+++ b/src/app/admin/models/page.js
@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { supabaseServer } from "@/lib/supabaseServer";
+
+export default async function ModelsPage() {
+  const { data: models } = await supabaseServer
+    .from("models")
+    .select("*")
+    .order("name");
+
+  return (
+    <div>
+      <div className="flex justify-between mb-6">
+        <h1 className="text-3xl font-bold">Models</h1>
+        <Link
+          href="/admin/models/new"
+          className="px-4 py-2 bg-black text-white rounded"
+        >
+          + Add Model
+        </Link>
+      </div>
+
+      {(!models || models.length === 0) && (
+        <p className="text-gray-700">
+          No models found yet. Click &ldquo;Add Model&rdquo; to create your
+          first one.
+        </p>
+      )}
+
+      <div className="bg-white shadow rounded-lg divide-y">
+        {models?.map((m) => (
+          <Link
+            key={m.id}
+            href={`/admin/models/${m.id}`}
+            className="block p-4 hover:bg-gray-50"
+          >
+            <div className="font-semibold">{m.name}</div>
+            <div className="text-sm text-gray-500">{m.brand}</div>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/page.js b/src/app/admin/page.js
new file mode 100644
index 0000000..cd76b23
--- /dev/null
+++ b/src/app/admin/page.js
@@ -0,0 +1,32 @@
+import { supabaseServer } from "@/lib/supabaseServer";
+
+export default async function AdminHome() {
+  const { data: models } = await supabaseServer.from("models").select("*");
+  const { data: parts } = await supabaseServer.from("parts").select("*");
+  const { data: compat } = await supabaseServer
+    .from("parts_compatible_models")
+    .select("*");
+
+  return (
+    <div>
+      <h1 className="text-3xl font-bold mb-6">Admin Dashboard</h1>
+
+      <div className="grid grid-cols-3 gap-6">
+        <div className="p-6 bg-white shadow rounded-lg">
+          <h2 className="text-xl font-semibold">Models</h2>
+          <p className="text-3xl mt-2">{models?.length ?? 0}</p>
+        </div>
+
+        <div className="p-6 bg-white shadow rounded-lg">
+          <h2 className="text-xl font-semibold">Parts</h2>
+          <p className="text-3xl mt-2">{parts?.length ?? 0}</p>
+        </div>
+
+        <div className="p-6 bg-white shadow rounded-lg">
+          <h2 className="text-xl font-semibold">Compatibility</h2>
+          <p className="text-3xl mt-2">{compat?.length ?? 0}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/parts/[id]/page.js b/src/app/admin/parts/[id]/page.js
new file mode 100644
index 0000000..fa115af
--- /dev/null
+++ b/src/app/admin/parts/[id]/page.js
@@ -0,0 +1,221 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { supabaseBrowser } from "@/lib/supabaseClient";
+
+export default function PartDetailPage({ params }) {
+  const { id } = params;
+  const router = useRouter();
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const [form, setForm] = useState({
+    name: "",
+    manufacturer: "",
+    sku: "",
+    category: "",
+    description: "",
+    metadata: "",
+  });
+
+  useEffect(() => {
+    async function fetchPart() {
+      setLoading(true);
+      setErrorMsg("");
+
+      const { data, error } = await supabaseBrowser
+        .from("parts")
+        .select("*")
+        .eq("id", id)
+        .single();
+
+      if (error) {
+        console.error(error);
+        setErrorMsg("Failed to load part.");
+        setLoading(false);
+        return;
+      }
+
+      setForm({
+        name: data.name || "",
+        manufacturer: data.manufacturer || "",
+        sku: data.sku || "",
+        category: data.category || "",
+        description: data.description || "",
+        metadata: data.metadata ? JSON.stringify(data.metadata, null, 2) : "",
+      });
+
+      setLoading(false);
+    }
+
+    fetchPart();
+  }, [id]);
+
+  function updateField(field, value) {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    setErrorMsg("");
+
+    let metadata = null;
+    if (form.metadata.trim()) {
+      try {
+        metadata = JSON.parse(form.metadata);
+      } catch (err) {
+        setSaving(false);
+        setErrorMsg("Metadata must be valid JSON.");
+        return;
+      }
+    }
+
+    const payload = {
+      name: form.name.trim(),
+      manufacturer: form.manufacturer || null,
+      sku: form.sku || null,
+      category: form.category || null,
+      description: form.description || null,
+      metadata,
+    };
+
+    const { error } = await supabaseBrowser
+      .from("parts")
+      .update(payload)
+      .eq("id", id);
+
+    if (error) {
+      console.error(error);
+      setErrorMsg(error.message || "Failed to save changes.");
+      setSaving(false);
+      return;
+    }
+
+    setSaving(false);
+  }
+
+  async function handleDelete() {
+    const ok = window.confirm(
+      "Are you sure you want to delete this part? This cannot be undone."
+    );
+    if (!ok) return;
+
+    setDeleting(true);
+    setErrorMsg("");
+
+    const { error } = await supabaseBrowser.from("parts").delete().eq("id", id);
+
+    if (error) {
+      console.error(error);
+      setErrorMsg(error.message || "Failed to delete part.");
+      setDeleting(false);
+      return;
+    }
+
+    router.push("/admin/parts");
+  }
+
+  if (loading) {
+    return <p>Loading part...</p>;
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">Edit Part</h1>
+
+      <div className="space-y-4 max-w-2xl bg-white p-6 rounded shadow">
+        <div>
+          <label className="block mb-1 font-medium">Name *</label>
+          <input
+            className="w-full p-2 border rounded"
+            value={form.name}
+            onChange={(e) => updateField("name", e.target.value)}
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label className="block mb-1 font-medium">Manufacturer</label>
+            <input
+              className="w-full p-2 border rounded"
+              value={form.manufacturer}
+              onChange={(e) => updateField("manufacturer", e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label className="block mb-1 font-medium">SKU</label>
+            <input
+              className="w-full p-2 border rounded"
+              value={form.sku}
+              onChange={(e) => updateField("sku", e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label className="block mb-1 font-medium">Category</label>
+            <input
+              className="w-full p-2 border rounded"
+              value={form.category}
+              onChange={(e) => updateField("category", e.target.value)}
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block mb-1 font-medium">Description</label>
+          <textarea
+            className="w-full p-2 border rounded min-h-[80px]"
+            value={form.description}
+            onChange={(e) => updateField("description", e.target.value)}
+          />
+        </div>
+
+        <div>
+          <label className="block mb-1 font-medium">
+            Metadata (JSON){" "}
+            <span className="text-xs text-gray-500">(optional)</span>
+          </label>
+          <textarea
+            className="w-full p-2 border rounded font-mono text-sm min-h-[120px]"
+            value={form.metadata}
+            onChange={(e) => updateField("metadata", e.target.value)}
+          />
+        </div>
+
+        {errorMsg && <p className="text-red-600 text-sm">{errorMsg}</p>}
+
+        <div className="flex gap-3 items-center">
+          <button
+            onClick={handleSave}
+            disabled={saving || !form.name.trim()}
+            className="px-4 py-2 bg-black text-white rounded disabled:opacity-50"
+          >
+            {saving ? "Saving..." : "Save Changes"}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => router.push("/admin/parts")}
+            className="px-4 py-2 border rounded"
+          >
+            Back to Parts
+          </button>
+
+          <button
+            type="button"
+            onClick={handleDelete}
+            disabled={deleting}
+            className="ml-auto px-4 py-2 bg-red-600 text-white rounded disabled:opacity-50"
+          >
+            {deleting ? "Deleting..." : "Delete Part"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/parts/new/page.js b/src/app/admin/parts/new/page.js
new file mode 100644
index 0000000..fb17874
--- /dev/null
+++ b/src/app/admin/parts/new/page.js
@@ -0,0 +1,151 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { supabaseBrowser } from "@/lib/supabaseClient";
+
+export default function NewPartPage() {
+  const [form, setForm] = useState({
+    name: "",
+    manufacturer: "",
+    sku: "",
+    category: "",
+    description: "",
+    metadata: "", // JSON as text
+  });
+
+  const [saving, setSaving] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+  const router = useRouter();
+
+  function updateField(field, value) {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    setErrorMsg("");
+
+    let metadata = null;
+    if (form.metadata.trim()) {
+      try {
+        metadata = JSON.parse(form.metadata);
+      } catch (err) {
+        setSaving(false);
+        setErrorMsg("Metadata must be valid JSON.");
+        return;
+      }
+    }
+
+    const payload = {
+      name: form.name.trim(),
+      manufacturer: form.manufacturer || null,
+      sku: form.sku || null,
+      category: form.category || null,
+      description: form.description || null,
+      metadata,
+    };
+
+    const { error } = await supabaseBrowser.from("parts").insert(payload);
+
+    if (error) {
+      console.error(error);
+      setErrorMsg(error.message || "Failed to save part.");
+      setSaving(false);
+      return;
+    }
+
+    router.push("/admin/parts");
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">Add New Part</h1>
+
+      <div className="space-y-4 max-w-2xl bg-white p-6 rounded shadow">
+        <div>
+          <label className="block mb-1 font-medium">Name *</label>
+          <input
+            className="w-full p-2 border rounded"
+            value={form.name}
+            onChange={(e) => updateField("name", e.target.value)}
+            placeholder="e.g. Alloy Suspension Arm Set"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div>
+            <label className="block mb-1 font-medium">Manufacturer</label>
+            <input
+              className="w-full p-2 border rounded"
+              value={form.manufacturer}
+              onChange={(e) => updateField("manufacturer", e.target.value)}
+            />
+          </div>
+
+          <div>
+            <label className="block mb-1 font-medium">SKU</label>
+            <input
+              className="w-full p-2 border rounded"
+              value={form.sku}
+              onChange={(e) => updateField("sku", e.target.value)}
+              placeholder="e.g. 53620"
+            />
+          </div>
+
+          <div>
+            <label className="block mb-1 font-medium">Category</label>
+            <input
+              className="w-full p-2 border rounded"
+              value={form.category}
+              onChange={(e) => updateField("category", e.target.value)}
+              placeholder="e.g. suspension, drivetrain"
+            />
+          </div>
+        </div>
+
+        <div>
+          <label className="block mb-1 font-medium">Description</label>
+          <textarea
+            className="w-full p-2 border rounded min-h-[80px]"
+            value={form.description}
+            onChange={(e) => updateField("description", e.target.value)}
+          />
+        </div>
+
+        <div>
+          <label className="block mb-1 font-medium">
+            Metadata (JSON){" "}
+            <span className="text-xs text-gray-500">(optional)</span>
+          </label>
+          <textarea
+            className="w-full p-2 border rounded font-mono text-sm min-h-[100px]"
+            placeholder='e.g. { "material": "aluminium", "color": "blue" }'
+            value={form.metadata}
+            onChange={(e) => updateField("metadata", e.target.value)}
+          />
+        </div>
+
+        {errorMsg && <p className="text-red-600 text-sm">{errorMsg}</p>}
+
+        <div className="flex gap-3">
+          <button
+            onClick={handleSave}
+            disabled={saving || !form.name.trim()}
+            className="px-4 py-2 bg-black text-white rounded disabled:opacity-50"
+          >
+            {saving ? "Saving..." : "Save Part"}
+          </button>
+
+          <button
+            type="button"
+            onClick={() => router.push("/admin/parts")}
+            className="px-4 py-2 border rounded"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/admin/parts/page.js b/src/app/admin/parts/page.js
new file mode 100644
index 0000000..a2240a7
--- /dev/null
+++ b/src/app/admin/parts/page.js
@@ -0,0 +1,60 @@
+import Link from "next/link";
+import { supabaseServer } from "@/lib/supabaseServer";
+
+export default async function PartsPage() {
+  const { data: parts, error } = await supabaseServer
+    .from("parts")
+    .select("*")
+    .order("name", { ascending: true });
+
+  console.log("here");
+
+  if (error) {
+    console.error("Error loading parts:", error);
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between mb-6 items-center">
+        <h1 className="text-3xl font-bold">Parts</h1>
+        <Link
+          href="/admin/parts/new"
+          className="px-4 py-2 bg-black text-white rounded hover:bg-gray-800"
+        >
+          + Add Part
+        </Link>
+      </div>
+
+      {(!parts || parts.length === 0) && (
+        <p className="text-gray-700">
+          No parts found yet. Click &ldquo;Add Part&rdquo; to create your first
+          one.
+        </p>
+      )}
+
+      {parts && parts.length > 0 && (
+        <div className="bg-white shadow rounded-lg overflow-hidden">
+          <div className="grid grid-cols-4 gap-4 px-4 py-2 border-b bg-gray-50 text-sm font-semibold">
+            <div>Name</div>
+            <div>Manufacturer</div>
+            <div>SKU</div>
+            <div>Category</div>
+          </div>
+
+          {parts.map((p) => (
+            <Link
+              key={p.id}
+              href={`/admin/parts/${p.id}`}
+              className="grid grid-cols-4 gap-4 px-4 py-3 border-b hover:bg-gray-50 text-sm text-gray-900"
+            >
+              <div className="font-semibold">{p.name}</div>
+              <div>{p.manufacturer || "-"}</div>
+              <div>{p.sku || "-"}</div>
+              <div>{p.category || "-"}</div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/compatibility/page.js b/src/app/compatibility/page.js
index 2407482..43e1d7d 100644
--- a/src/app/compatibility/page.js
+++ b/src/app/compatibility/page.js
@@ -1,51 +1,248 @@
 "use client";
 
-import { useState } from "react";
-import { fetchJSON } from "@/lib/ui/fetch";
-import ModelCard from "../components/ModelCard";
-import PartCard from "../components/PartCard";
-
-export default function CompatibilityPage() {
-  const [query, setQuery] = useState("");
-  const [result, setResult] = useState([]);
-
-  async function compare() {
-    const modelData = await fetchJSON(`/api/compatibility/model/${query}`);
-    const partData = await fetchJSON(`/api/compatibility/part/${query}`);
-
-    setResult(modelData || partData || []);
-  }
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { CATEGORIES } from "@/lib/data/categories";
 
+function ModeCard({ title, emoji, description, children }) {
   return (
-    <div className="space-y-4">
-      <h1 className="text-3xl font-bold">Compatibility Explorer</h1>
-
-      <div className="flex gap-2">
-        <input
-          className="border p-2 rounded w-full"
-          placeholder="Enter modelId or partId"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-        />
-        <button
-          type="button"
-          className="px-4 py-2 text-white rounded"
-          style={{ backgroundColor: "var(--color-primary, #0070f3)" }}
-          onClick={compare}
-        >
-          Compare
-        </button>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-        {result.map((item) =>
-          item.model ? (
-            <ModelCard key={item.model.id} model={item.model} />
-          ) : (
-            <PartCard key={item.part.id} part={item.part} />
-          )
-        )}
+    <div className="border rounded-xl p-6 shadow-sm bg-white flex flex-col gap-4">
+      <div className="flex items-center gap-3">
+        <div className="text-2xl">{emoji}</div>
+        <div>
+          <h2 className="font-semibold text-lg">{title}</h2>
+          <p className="text-sm text-gray-500">{description}</p>
+        </div>
       </div>
+      <div className="mt-2 flex flex-col gap-3">{children}</div>
+    </div>
+  );
+}
+
+export default function CompatibilityPage() {
+  const [models, setModels] = useState([]);
+  const [parts, setParts] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const [modelForParts, setModelForParts] = useState("");
+  const [partForModels, setPartForModels] = useState("");
+  const [modelA, setModelA] = useState("");
+  const [modelB, setModelB] = useState("");
+  const [categoryModel, setCategoryModel] = useState("");
+  const [category, setCategory] = useState("");
+
+  const router = useRouter();
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const [modelsRes, partsRes] = await Promise.all([
+          fetch("/api/models"),
+          fetch("/api/parts"),
+        ]);
+
+        const modelsJson = modelsRes.ok ? await modelsRes.json() : [];
+        const partsJson = partsRes.ok ? await partsRes.json() : [];
+
+        setModels(modelsJson || []);
+        setParts(partsJson || []);
+      } catch (e) {
+        console.error("Failed to load models/parts", e);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    load();
+  }, []);
+
+  function handleGoToModelCompatibility() {
+    if (!modelForParts) return;
+    router.push(`/model/${modelForParts}`);
+  }
+
+  function handleGoToPartCompatibility() {
+    if (!partForModels) return;
+    router.push(`/part/${partForModels}`);
+  }
+
+  function handleExploreCategory() {
+    if (!categoryModel || !category) return;
+    router.push(`/category/${categoryModel}/${category}`);
+  }
+
+  function handleCompareModels() {
+    if (!modelA || !modelB) return;
+    // Stubbed for now to avoid broken routes
+    alert("Model comparison view coming soon! (Hotshot vs Supershot, etc.)");
+  }
+
+  return (
+    <div className="space-y-10">
+      {/* Breadcrumb-ish header */}
+      <nav className="text-sm text-gray-500">
+        <Link href="/" className="hover:underline text-blue-600">
+          Home
+        </Link>{" "}
+        <span>›</span>{" "}
+        <span className="font-semibold text-gray-700">Compatibility Explorer</span>
+      </nav>
+
+      {/* Page Title */}
+      <div>
+        <h1 className="text-4xl font-bold mb-2">Compatibility Explorer</h1>
+        <p className="text-gray-600 max-w-2xl">
+          Discover cross-compatibility between RC models and parts. Use one of the
+          tools below to explore fitment, upgrades, and shared components.
+        </p>
+      </div>
+
+      {loading && (
+        <p className="text-gray-500">Loading models and parts…</p>
+      )}
+
+      {/* Mode Selector Grid */}
+      {!loading && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Mode 1: Model → Compatible Parts */}
+          <ModeCard
+            title="Model → Compatible Parts"
+            emoji="🔧"
+            description="Find every part that fits a specific RC model."
+          >
+            <select
+              className="border rounded-lg px-3 py-2"
+              value={modelForParts}
+              onChange={(e) => setModelForParts(e.target.value)}
+            >
+              <option value="">Select a model…</option>
+              {models.map((m) => (
+                <option key={m.id} value={m.id}>
+                  {m.name} ({m.brand})
+                </option>
+              ))}
+            </select>
+            <button
+              onClick={handleGoToModelCompatibility}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
+              disabled={!modelForParts}
+            >
+              Show Compatible Parts
+            </button>
+          </ModeCard>
+
+          {/* Mode 2: Part → Compatible Models */}
+          <ModeCard
+            title="Part → Compatible Models"
+            emoji="🧩"
+            description="See all RC models that this part works with."
+          >
+            <select
+              className="border rounded-lg px-3 py-2"
+              value={partForModels}
+              onChange={(e) => setPartForModels(e.target.value)}
+            >
+              <option value="">Select a part…</option>
+              {parts.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.name} ({p.id})
+                </option>
+              ))}
+            </select>
+            <button
+              onClick={handleGoToPartCompatibility}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
+              disabled={!partForModels}
+            >
+              Show Compatible Models
+            </button>
+          </ModeCard>
+
+          {/* Mode 3: Compare Two Models (stubbed) */}
+          <ModeCard
+            title="Compare Two Models"
+            emoji="🔍"
+            description="See shared and unique parts between two models. (Coming soon)"
+          >
+            <div className="flex flex-col gap-2">
+              <select
+                className="border rounded-lg px-3 py-2"
+                value={modelA}
+                onChange={(e) => setModelA(e.target.value)}
+              >
+                <option value="">Select Model A…</option>
+                {models.map((m) => (
+                  <option key={m.id} value={m.id}>
+                    {m.name} ({m.brand})
+                  </option>
+                ))}
+              </select>
+              <select
+                className="border rounded-lg px-3 py-2"
+                value={modelB}
+                onChange={(e) => setModelB(e.target.value)}
+              >
+                <option value="">Select Model B…</option>
+                {models.map((m) => (
+                  <option key={m.id} value={m.id}>
+                    {m.name} ({m.brand})
+                  </option>
+                ))}
+              </select>
+            </div>
+            <button
+              onClick={handleCompareModels}
+              className="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg cursor-not-allowed"
+              disabled
+            >
+              Compare (Coming Soon)
+            </button>
+          </ModeCard>
+
+          {/* Mode 4: Explore Categories */}
+          <ModeCard
+            title="Explore by Category"
+            emoji="📂"
+            description="Browse shocks, drivetrain, chassis, and more for a model."
+          >
+            <div className="flex flex-col gap-2">
+              <select
+                className="border rounded-lg px-3 py-2"
+                value={categoryModel}
+                onChange={(e) => setCategoryModel(e.target.value)}
+              >
+                <option value="">Select a model…</option>
+                {models.map((m) => (
+                  <option key={m.id} value={m.id}>
+                    {m.name} ({m.brand})
+                  </option>
+                ))}
+              </select>
+
+              <select
+                className="border rounded-lg px-3 py-2"
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+              >
+                <option value="">Select a category…</option>
+                {CATEGORIES.map((cat) => (
+                  <option key={cat} value={cat}>
+                    {cat}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <button
+              onClick={handleExploreCategory}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
+              disabled={!categoryModel || !category}
+            >
+              Explore Category
+            </button>
+          </ModeCard>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css
index bc199ac..24df085 100644
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@@ -5,3 +5,4 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+
diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss
index 23e841c..06f3046 100644
--- a/src/app/styles/variables.scss
+++ b/src/app/styles/variables.scss
@@ -1,6 +1,8 @@
 $background: #ffffff;
 $text-color: #111111;
 
+$foreground: #111111;
+
 $primary: #0070f3;
 $secondary: #7928ca;
 
@@ -10,4 +12,4 @@ $nav-bg: #fafafa;
 :root {
   --color-primary: #0070f3;
   --color-secondary: #7928ca;
-}
+}
\ No newline at end of file
diff --git a/src/lib/supabaseClient.js b/src/lib/supabaseClient.js
new file mode 100644
index 0000000..468b3e0
--- /dev/null
+++ b/src/lib/supabaseClient.js
@@ -0,0 +1,6 @@
+import { createClient } from "@supabase/supabase-js";
+
+export const supabaseBrowser = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+);
diff --git a/src/lib/supabaseServer.js b/src/lib/supabaseServer.js
new file mode 100644
index 0000000..4757ad6
--- /dev/null
+++ b/src/lib/supabaseServer.js
@@ -0,0 +1,6 @@
+import { createClient } from "@supabase/supabase-js";
+
+export const supabaseServer = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL,
+  process.env.SUPABASE_SERVICE_ROLE_KEY
+);