commit 1153e8e78f99eac0a3e4d230827b005afddf3d8c
Author: Alireza Hassani <alirezahassani@Meshkees-Mac-mini.local>
Date:   Sun Oct 4 13:21:27 2026 +0330

    Update carousels, card hover, and IranBay branding.
    
    Co-authored-by: Cursor <cursoragent@cursor.com>

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..e6e967e
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,15 @@
+NEXT_PUBLIC_WEBSITE_URL=http://localhost:3000
+# Meshkee CMS API — always remote (do not point at a local Meshkee)
+NEXT_PUBLIC_MESHKEE_API_URL=https://api.meshkee.com/api/v1
+# IranBay marketplace API (local is fine)
+NEXT_PUBLIC_MARKETPLACE_API_URL=http://localhost:3001/api/v1
+
+# Dashboard hosts (same Next.js app; middleware switches by Host header)
+NEXT_PUBLIC_ROOT_DOMAIN=localhost
+# Local customer dashboard (shared login): http://customer.localhost:3002
+NEXT_PUBLIC_CUSTOMER_DASHBOARD_HOST=customer.localhost:3002
+# Local business dashboard: http://business.localhost:3002
+NEXT_PUBLIC_BUSINESS_DASHBOARD_HOST=business.localhost:3002
+# Local superadmin dashboard: http://localhost:3002
+NEXT_PUBLIC_ADMIN_DASHBOARD_HOST=localhost:3002
+NEXT_PUBLIC_MESHKEE_TENANT_DOMAIN=iranbay.com
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..40543b3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,40 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files
+.env*
+!.env.example
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..643577d
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,9 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->
diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..43c994c
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1 @@
+@AGENTS.md
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..3106044
--- /dev/null
+++ b/README.md
@@ -0,0 +1,78 @@
+# Dashboard
+
+Admin, customer, and business dashboards for IranBay — one Next.js app; the `Host` header picks the experience.
+
+| Host | App |
+|------|-----|
+| `http://localhost:3002` (or `admin.<root>`) | Superadmin |
+| `http://customer.localhost:3002` (or `customer.<root>`) | Customer account |
+| `http://business.localhost:3002` (or `business.<root>`) | Business owner |
+
+Public site stays on the main domain (`ariyaway.com` → `website/`).
+
+## Auth model
+
+- **One shared login** on the customer host (`/login`).
+- After login, everyone lands in the **customer** dashboard. Superadmins and
+  business owners open admin/business from links there.
+- If the user **owns a business**, customer UI shows a link to the business dashboard (session handoff across subdomains).
+- Visiting `business.*/login` redirects to the customer login.
+- Superadmin login stays on the admin host.
+
+```bash
+# 1) Meshkee API (port 3010 — website already uses 3000)
+cd "../MeshkeeApp Backend"
+docker compose up -d
+PORT=3010 npm run start:dev
+
+# 2) Dashboard
+cd ../dashboard
+cp .env.example .env.local
+npm install
+npm run dev
+```
+
+## Env
+
+| Variable | Local example | Prod example |
+|----------|---------------|--------------|
+| `NEXT_PUBLIC_ROOT_DOMAIN` | `localhost` | `ariyaway.com` |
+| `NEXT_PUBLIC_CUSTOMER_DASHBOARD_HOST` | `customer.localhost:3002` | `customer.ariyaway.com` |
+| `NEXT_PUBLIC_BUSINESS_DASHBOARD_HOST` | `business.localhost:3002` | `business.ariyaway.com` |
+| `NEXT_PUBLIC_ADMIN_DASHBOARD_HOST` | `localhost:3002` | `admin.ariyaway.com` |
+| `NEXT_PUBLIC_MESHKEE_API_URL` | Meshkee API base | same |
+| `NEXT_PUBLIC_MARKETPLACE_API_URL` | `http://localhost:3001/api/v1` | marketplace API |
+
+Modern browsers resolve `*.localhost` without a hosts file.
+
+Prod: DNS `customer.*`, `business.*` (and optionally `admin.*`) → same dashboard deploy; TLS for those hosts.
+
+## Routes
+
+### Superadmin (`localhost:3002`)
+
+| Route | Purpose |
+|-------|---------|
+| `/login` | Super admin login |
+| `/` | Admin home |
+| `/businesses` | Marketplace listings |
+
+### Customer (`customer.localhost:3002`)
+
+| Route | Purpose |
+|-------|---------|
+| `/login` | Shared customer + business-owner login |
+| `/` | Customer home |
+| `/profile` | Account profile (read-only for now) |
+
+### Business (`business.localhost:3002`)
+
+Clean URLs (rewritten to `app/business/*`). Login redirects to customer host.
+
+| Route | Purpose |
+|-------|---------|
+| `/profile` | Meshkee business profile |
+| `/products` | Product list |
+| `/blog` | Blog list |
+| `/portfolios` | Portfolio list |
+| `/gallery` | Gallery list |
diff --git a/app/auth/handoff/layout.tsx b/app/auth/handoff/layout.tsx
new file mode 100644
index 0000000..14b9f29
--- /dev/null
+++ b/app/auth/handoff/layout.tsx
@@ -0,0 +1,64 @@
+import type { ReactNode } from "react";
+
+/**
+ * Install session from the URL hash BEFORE React AuthProvider runs.
+ * Cross-subdomain localStorage is empty until this runs; without it,
+ * ProtectedRoute saw ?businessId= and bounced admins back to /businesses.
+ */
+const HANDOFF_BOOT = `
+(function () {
+  try {
+    var raw = location.hash ? location.hash.replace(/^#/, "") : "";
+    if (!raw) return;
+    var p = new URLSearchParams(raw);
+    var access = p.get("access");
+    var refresh = p.get("refresh");
+    var businessId = p.get("businessId");
+    var clearManaged = p.get("clearManaged") === "1";
+    var next = p.get("next") || "/profile";
+    if (!access || !refresh) return;
+
+    localStorage.setItem("marketplace_access_token", access);
+    localStorage.setItem("marketplace_refresh_token", refresh);
+
+    var root = "localhost";
+    try {
+      // Best-effort shared cookie for *.localhost / prod root
+      document.cookie =
+        "marketplace_access_token=" +
+        encodeURIComponent(access) +
+        "; Path=/; Max-Age=1209600; SameSite=Lax; Domain=" +
+        root;
+      document.cookie =
+        "marketplace_refresh_token=" +
+        encodeURIComponent(refresh) +
+        "; Path=/; Max-Age=1209600; SameSite=Lax; Domain=" +
+        root;
+    } catch (e) {}
+
+    if (businessId) {
+      localStorage.setItem("marketplace_managed_business_id", businessId);
+      sessionStorage.setItem("marketplace_managed_business_id", businessId);
+    } else if (clearManaged) {
+      localStorage.removeItem("marketplace_managed_business_id");
+      sessionStorage.removeItem("marketplace_managed_business_id");
+    }
+
+    var target = next.charAt(0) === "/" ? next : "/" + next;
+    location.replace(target);
+  } catch (e) {}
+})();
+`;
+
+export default function AuthHandoffLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <>
+      <script dangerouslySetInnerHTML={{ __html: HANDOFF_BOOT }} />
+      {children}
+    </>
+  );
+}
diff --git a/app/auth/handoff/page.tsx b/app/auth/handoff/page.tsx
new file mode 100644
index 0000000..190d2ba
--- /dev/null
+++ b/app/auth/handoff/page.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+/**
+ * Fallback UI if the inline boot script did not redirect
+ * (e.g. missing hash). Prefer the layout script for session install.
+ */
+export default function AuthHandoffPage() {
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "grid",
+        placeItems: "center",
+        background: "#f6f6f6",
+        fontSize: 12,
+        letterSpacing: "0.2em",
+        textTransform: "uppercase",
+        color: "#8e8e8e",
+        padding: 24,
+        textAlign: "center",
+        lineHeight: 1.6,
+      }}
+    >
+      Opening business dashboard…
+      <br />
+      <span style={{ letterSpacing: "0.06em", textTransform: "none", marginTop: 12 }}>
+        If this page stays here, go back and click Manage business again.
+      </span>
+    </div>
+  );
+}
diff --git a/app/business/blog/new/page.tsx b/app/business/blog/new/page.tsx
new file mode 100644
index 0000000..64f048c
--- /dev/null
+++ b/app/business/blog/new/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { BusinessMeshkeeGate } from "@/components/business/BusinessPageChrome";
+import AddBlogForm from "@/components/catalog/AddBlogForm";
+import { en } from "@/lib/i18n/en";
+
+export default function BusinessAddBlogPage() {
+  return (
+    <BusinessMeshkeeGate>
+      {(meshkeeId) => (
+        <AddBlogForm
+          meshkeeId={meshkeeId}
+          listHref="/blog"
+          title={en.blog.addTitle}
+          lead={en.blog.addLead}
+        />
+      )}
+    </BusinessMeshkeeGate>
+  );
+}
diff --git a/app/business/blog/page.tsx b/app/business/blog/page.tsx
new file mode 100644
index 0000000..e0c1554
--- /dev/null
+++ b/app/business/blog/page.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import Link from "next/link";
+import {
+  BusinessListHeader,
+  BusinessMeshkeeGate,
+} from "@/components/business/BusinessPageChrome";
+import BlogPanel from "@/components/catalog/BlogPanel";
+import { en } from "@/lib/i18n/en";
+import styles from "@/components/BusinessDetailsPage.module.css";
+
+export default function BusinessBlogPage() {
+  return (
+    <BusinessMeshkeeGate>
+      {(meshkeeId) => (
+        <>
+          <BusinessListHeader
+            title={en.blog.title}
+            lead={en.blog.lead}
+            action={
+              <Link href="/blog/new" className={`outline-btn ${styles.actionBtn}`}>
+                {en.blog.add}
+              </Link>
+            }
+          />
+          <BlogPanel
+            meshkeeId={meshkeeId}
+            emptyLabel={en.blog.empty}
+            addHref="/blog/new"
+          />
+        </>
+      )}
+    </BusinessMeshkeeGate>
+  );
+}
diff --git a/app/business/gallery/page.tsx b/app/business/gallery/page.tsx
new file mode 100644
index 0000000..d61006e
--- /dev/null
+++ b/app/business/gallery/page.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import {
+  BusinessListHeader,
+  BusinessMeshkeeGate,
+} from "@/components/business/BusinessPageChrome";
+import GalleryPanel from "@/components/catalog/GalleryPanel";
+import { en } from "@/lib/i18n/en";
+
+export default function BusinessGalleryPage() {
+  return (
+    <BusinessMeshkeeGate>
+      {(meshkeeId) => (
+        <>
+          <BusinessListHeader
+            title={en.gallery.title}
+            lead={en.gallery.lead}
+          />
+          <GalleryPanel
+            meshkeeId={meshkeeId}
+            emptyLabel={en.gallery.empty}
+          />
+        </>
+      )}
+    </BusinessMeshkeeGate>
+  );
+}
diff --git a/app/business/layout.tsx b/app/business/layout.tsx
new file mode 100644
index 0000000..fcba535
--- /dev/null
+++ b/app/business/layout.tsx
@@ -0,0 +1,14 @@
+import { ProtectedRoute } from "@/components/AuthGuards";
+import BusinessShell from "@/components/BusinessShell";
+
+export default function BusinessLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ProtectedRoute requiredApp="business">
+      <BusinessShell>{children}</BusinessShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/business/page.tsx b/app/business/page.tsx
new file mode 100644
index 0000000..79d9b54
--- /dev/null
+++ b/app/business/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function BusinessIndexPage() {
+  redirect("/profile");
+}
diff --git a/app/business/portfolios/new/page.tsx b/app/business/portfolios/new/page.tsx
new file mode 100644
index 0000000..ae2b8bd
--- /dev/null
+++ b/app/business/portfolios/new/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { BusinessMeshkeeGate } from "@/components/business/BusinessPageChrome";
+import AddPortfolioForm from "@/components/catalog/AddPortfolioForm";
+import { en } from "@/lib/i18n/en";
+
+export default function BusinessAddPortfolioPage() {
+  return (
+    <BusinessMeshkeeGate>
+      {(meshkeeId) => (
+        <AddPortfolioForm
+          meshkeeId={meshkeeId}
+          listHref="/portfolios"
+          title={en.portfolios.addTitle}
+          lead={en.portfolios.addLead}
+        />
+      )}
+    </BusinessMeshkeeGate>
+  );
+}
diff --git a/app/business/portfolios/page.tsx b/app/business/portfolios/page.tsx
new file mode 100644
index 0000000..a13deea
--- /dev/null
+++ b/app/business/portfolios/page.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import Link from "next/link";
+import {
+  BusinessListHeader,
+  BusinessMeshkeeGate,
+} from "@/components/business/BusinessPageChrome";
+import PortfoliosPanel from "@/components/catalog/PortfoliosPanel";
+import { en } from "@/lib/i18n/en";
+import styles from "@/components/BusinessDetailsPage.module.css";
+
+export default function BusinessPortfoliosPage() {
+  return (
+    <BusinessMeshkeeGate>
+      {(meshkeeId) => (
+        <>
+          <BusinessListHeader
+            title={en.portfolios.title}
+            lead={en.portfolios.lead}
+            action={
+              <Link
+                href="/portfolios/new"
+                className={`outline-btn ${styles.actionBtn}`}
+              >
+                {en.portfolios.add}
+              </Link>
+            }
+          />
+          <PortfoliosPanel
+            meshkeeId={meshkeeId}
+            emptyLabel={en.portfolios.empty}
+            addHref="/portfolios/new"
+          />
+        </>
+      )}
+    </BusinessMeshkeeGate>
+  );
+}
diff --git a/app/business/products/categories/page.tsx b/app/business/products/categories/page.tsx
new file mode 100644
index 0000000..e6f4e5b
--- /dev/null
+++ b/app/business/products/categories/page.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import {
+  BusinessMeshkeeGate,
+} from "@/components/business/BusinessPageChrome";
+import ManageCategoriesPage from "@/components/catalog/ManageCategoriesPage";
+import { en } from "@/lib/i18n/en";
+
+export default function BusinessProductCategoriesPage() {
+  return (
+    <BusinessMeshkeeGate>
+      {(meshkeeId) => (
+        <ManageCategoriesPage
+          meshkeeId={meshkeeId}
+          entityType="product"
+          title={en.products.categoriesTitle}
+          lead={en.products.categoriesLead}
+          listHref="/products"
+          listLabel={en.products.title}
+        />
+      )}
+    </BusinessMeshkeeGate>
+  );
+}
diff --git a/app/business/products/new/page.tsx b/app/business/products/new/page.tsx
new file mode 100644
index 0000000..c0bc025
--- /dev/null
+++ b/app/business/products/new/page.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import {
+  BusinessMeshkeeGate,
+} from "@/components/business/BusinessPageChrome";
+import AddProductForm from "@/components/catalog/AddProductForm";
+import { en } from "@/lib/i18n/en";
+
+export default function BusinessAddProductPage() {
+  return (
+    <BusinessMeshkeeGate>
+      {(meshkeeId) => (
+        <AddProductForm
+          meshkeeId={meshkeeId}
+          listHref="/products"
+          title={en.products.addTitle}
+          lead={en.products.addLead}
+        />
+      )}
+    </BusinessMeshkeeGate>
+  );
+}
diff --git a/app/business/products/page.tsx b/app/business/products/page.tsx
new file mode 100644
index 0000000..bd103ed
--- /dev/null
+++ b/app/business/products/page.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import Link from "next/link";
+import {
+  BusinessListHeader,
+  BusinessMeshkeeGate,
+} from "@/components/business/BusinessPageChrome";
+import ProductsPanel from "@/components/catalog/ProductsPanel";
+import { en } from "@/lib/i18n/en";
+import styles from "@/components/BusinessDetailsPage.module.css";
+
+export default function BusinessProductsPage() {
+  return (
+    <BusinessMeshkeeGate>
+      {(meshkeeId) => (
+        <>
+          <BusinessListHeader
+            title={en.products.title}
+            lead={en.products.lead}
+            action={
+              <>
+                <Link
+                  href="/products/categories"
+                  className={`outline-btn ${styles.actionBtn}`}
+                >
+                  {en.products.manageCategories}
+                </Link>
+                <Link
+                  href="/products/new"
+                  className={`outline-btn ${styles.actionBtn}`}
+                >
+                  {en.products.add}
+                </Link>
+              </>
+            }
+          />
+          <ProductsPanel
+            meshkeeId={meshkeeId}
+            emptyLabel={en.products.empty}
+            addHref="/products/new"
+          />
+        </>
+      )}
+    </BusinessMeshkeeGate>
+  );
+}
diff --git a/app/business/profile/page.tsx b/app/business/profile/page.tsx
new file mode 100644
index 0000000..6f42dca
--- /dev/null
+++ b/app/business/profile/page.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { BusinessMeshkeeGate } from "@/components/business/BusinessPageChrome";
+import EditBusinessPage from "@/components/EditBusinessPage";
+
+export default function BusinessProfilePage() {
+  return (
+    <BusinessMeshkeeGate>
+      {(meshkeeId) => (
+        <EditBusinessPage meshkeeBusinessId={meshkeeId} variant="business" />
+      )}
+    </BusinessMeshkeeGate>
+  );
+}
diff --git a/app/businesses/[id]/edit/page.tsx b/app/businesses/[id]/edit/page.tsx
new file mode 100644
index 0000000..b2cd4a2
--- /dev/null
+++ b/app/businesses/[id]/edit/page.tsx
@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import DashboardShell from "@/components/DashboardShell";
+import EditBusinessPage from "@/components/EditBusinessPage";
+
+export const metadata: Metadata = {
+  title: "Edit business | IranBay Dashboard",
+};
+
+export default async function EditBusinessRoute({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <DashboardShell>
+        <EditBusinessPage listingId={id} />
+      </DashboardShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/businesses/[id]/page.tsx b/app/businesses/[id]/page.tsx
new file mode 100644
index 0000000..17eb170
--- /dev/null
+++ b/app/businesses/[id]/page.tsx
@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import BusinessDetailsPage from "@/components/BusinessDetailsPage";
+import DashboardShell from "@/components/DashboardShell";
+
+export const metadata: Metadata = {
+  title: "Business details | IranBay Dashboard",
+};
+
+export default async function BusinessDetailsRoute({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <DashboardShell>
+        <BusinessDetailsPage listingId={id} />
+      </DashboardShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/businesses/categories/page.tsx b/app/businesses/categories/page.tsx
new file mode 100644
index 0000000..37dd78f
--- /dev/null
+++ b/app/businesses/categories/page.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import BusinessCategoriesPage from "@/components/BusinessCategoriesPage";
+import DashboardShell from "@/components/DashboardShell";
+
+export const metadata: Metadata = {
+  title: "Business categories | IranBay Dashboard",
+};
+
+export default function BusinessCategoriesRoute() {
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <DashboardShell>
+        <BusinessCategoriesPage />
+      </DashboardShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/businesses/page.tsx b/app/businesses/page.tsx
new file mode 100644
index 0000000..f1a79d9
--- /dev/null
+++ b/app/businesses/page.tsx
@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import BusinessesPage from "@/components/BusinessesPage";
+import DashboardShell from "@/components/DashboardShell";
+
+export const metadata: Metadata = {
+  title: "Businesses | IranBay Dashboard",
+};
+
+export default function BusinessesRoute() {
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <DashboardShell>
+        <Suspense
+          fallback={
+            <div
+              style={{
+                minHeight: 220,
+                display: "grid",
+                placeItems: "center",
+                fontSize: 12,
+                letterSpacing: "0.2em",
+                textTransform: "uppercase",
+                color: "#8e8e8e",
+              }}
+            >
+              Loading businesses…
+            </div>
+          }
+        >
+          <BusinessesPage />
+        </Suspense>
+      </DashboardShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/customer/layout.tsx b/app/customer/layout.tsx
new file mode 100644
index 0000000..17578e5
--- /dev/null
+++ b/app/customer/layout.tsx
@@ -0,0 +1,14 @@
+import { ProtectedRoute } from "@/components/AuthGuards";
+import CustomerShell from "@/components/CustomerShell";
+
+export default function CustomerLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ProtectedRoute requiredApp="customer">
+      <CustomerShell>{children}</CustomerShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/customer/page.tsx b/app/customer/page.tsx
new file mode 100644
index 0000000..a72c749
--- /dev/null
+++ b/app/customer/page.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import CustomerHome from "@/components/CustomerHome";
+
+export const metadata: Metadata = {
+  title: "Home | IranBay Account",
+};
+
+export default function CustomerHomePage() {
+  return <CustomerHome />;
+}
diff --git a/app/customer/profile/page.tsx b/app/customer/profile/page.tsx
new file mode 100644
index 0000000..c99df2c
--- /dev/null
+++ b/app/customer/profile/page.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import CustomerProfile from "@/components/CustomerProfile";
+
+export const metadata: Metadata = {
+  title: "Profile | IranBay Account",
+};
+
+export default function CustomerProfilePage() {
+  return <CustomerProfile />;
+}
diff --git a/app/fonts/iranyekan.css b/app/fonts/iranyekan.css
new file mode 100644
index 0000000..2fde7a5
--- /dev/null
+++ b/app/fonts/iranyekan.css
@@ -0,0 +1,16 @@
+/* Self-hosted Iran Yekan — public/fonts/iranyekan/ */
+@font-face {
+  font-family: "IRANYekan";
+  src: url("/fonts/iranyekan/IRANYekanWebLight.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "IRANYekan";
+  src: url("/fonts/iranyekan/IRANYekanWebRegular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
diff --git a/app/forgot-password/page.tsx b/app/forgot-password/page.tsx
new file mode 100644
index 0000000..4746daa
--- /dev/null
+++ b/app/forgot-password/page.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from "next";
+import ForgotPasswordForm from "@/components/ForgotPasswordForm";
+
+export const metadata: Metadata = {
+  title: "Forgot Password | IranBay",
+};
+
+export default function ForgotPasswordPage() {
+  return <ForgotPasswordForm />;
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..a2fdf64
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,207 @@
+:root {
+  --font-montserrat: "Montserrat", sans-serif;
+  --font-farsi: "IRANYekan", Tahoma, "Segoe UI", sans-serif;
+  --font-ui: var(--font-montserrat), var(--font-farsi);
+  --color-black: #000;
+  --color-white: #fff;
+  --color-bg: #ffffff;
+  --color-card: #eeeeee;
+  --color-muted: #4a4a4a;
+  --color-soft: #8e8e8e;
+  --color-body: #aaaaaa;
+  --color-dark: #1e1e1e;
+  --color-explore: #f9f9f9;
+  --color-footer: #070707;
+  --color-footer-text: #bababa;
+  --color-footer-line: #232323;
+  --page-pad: 40px;
+  --max-width: 1920px;
+  --container-width: 1080px;
+  --sidebar-width: 248px;
+  --page-title-pattern: radial-gradient(
+    rgba(0, 0, 0, 0.12) 0.75px,
+    transparent 0.85px
+  );
+  --page-title-pattern-size: 14px 14px;
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  scroll-behavior: smooth;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  min-height: 100%;
+  color: var(--color-black);
+  background: var(--color-bg);
+  font-family: var(--font-ui);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+a {
+  font-family: inherit;
+  color: inherit;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.icon {
+  display: block;
+  object-fit: contain;
+}
+
+.outline-btn {
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0.5px solid var(--color-black);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--color-black);
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  white-space: nowrap;
+  transition: color 0.3s ease, border-color 0.3s ease;
+}
+
+.outline-btn:hover,
+.outline-btn:focus-visible {
+  color: var(--color-white);
+  background: transparent;
+}
+
+.outline-btn:hover :is(span, strong, em, p, a, label, button),
+.outline-btn:focus-visible :is(span, strong, em, p, a, label, button) {
+  color: var(--color-white);
+}
+
+.tile-hover,
+.outline-btn {
+  position: relative;
+  isolation: isolate;
+}
+
+.tile-hover::before,
+.outline-btn::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--color-black);
+  clip-path: inset(100% 0 0 0);
+  transition: clip-path 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.tile-hover::before {
+  z-index: 0;
+}
+
+.outline-btn::before {
+  z-index: -1;
+}
+
+.tile-hover:hover::before,
+.tile-hover:focus-within::before,
+.outline-btn:hover::before,
+.outline-btn:focus-visible::before {
+  clip-path: inset(0 0 0 0);
+}
+
+.tile-hover > *:not(img),
+.outline-btn > * {
+  position: relative;
+  z-index: 2;
+}
+
+.tile-hover:hover,
+.tile-hover:focus-within,
+.tile-hover:hover :is(h1, h2, h3, p, span, strong, a),
+.tile-hover:focus-within :is(h1, h2, h3, p, span, strong, a) {
+  color: var(--color-white);
+}
+
+.tile-hover :is(h1, h2, h3, p, span, strong, a) {
+  transition: color 0.3s ease, border-color 0.3s ease;
+}
+
+.outline-btn:hover img,
+.outline-btn:focus-visible img {
+  position: relative;
+  z-index: 2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tile-hover::before,
+  .outline-btn::before {
+    transition: none;
+  }
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.fa,
+[lang="fa"],
+:lang(fa) {
+  font-family: var(--font-farsi);
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+[dir="ltr"] {
+  unicode-bidi: isolate;
+  direction: ltr;
+}
+
+@media (max-width: 1100px) {
+  :root {
+    --page-pad: 28px;
+  }
+}
+
+@media (max-width: 720px) {
+  :root {
+    --page-pad: 20px;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..64bda6a
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { Montserrat } from "next/font/google";
+import { AuthProvider } from "@/components/AuthProvider";
+import "./fonts/iranyekan.css";
+import "./globals.css";
+
+const montserrat = Montserrat({
+  subsets: ["latin"],
+  weight: ["300", "400", "500", "600"],
+  variable: "--font-montserrat",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "IranBay Dashboard",
+  description: "Admin dashboard for IranBay marketplace gate.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" dir="ltr" className={montserrat.variable}>
+      <body>
+        <AuthProvider>{children}</AuthProvider>
+      </body>
+    </html>
+  );
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
new file mode 100644
index 0000000..2d8ce4c
--- /dev/null
+++ b/app/login/page.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { GuestRoute } from "@/components/AuthGuards";
+import LoginForm from "@/components/LoginForm";
+
+export const metadata: Metadata = {
+  title: "Login | IranBay",
+};
+
+export default function LoginPage() {
+  return (
+    <GuestRoute>
+      <Suspense
+        fallback={
+          <div
+            style={{
+              minHeight: "100vh",
+              display: "grid",
+              placeItems: "center",
+              background: "#f6f6f6",
+              fontSize: 12,
+              letterSpacing: "0.2em",
+              textTransform: "uppercase",
+              color: "#8e8e8e",
+            }}
+          >
+            Loading
+          </div>
+        }
+      >
+        <LoginForm />
+      </Suspense>
+    </GuestRoute>
+  );
+}
diff --git a/app/manage/[meshkeeId]/blog/new/page.tsx b/app/manage/[meshkeeId]/blog/new/page.tsx
new file mode 100644
index 0000000..3dc28e6
--- /dev/null
+++ b/app/manage/[meshkeeId]/blog/new/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import AddBlogForm from "@/components/catalog/AddBlogForm";
+import { en } from "@/lib/i18n/en";
+
+export default function ManageAddBlogPage() {
+  const params = useParams<{ meshkeeId: string }>();
+  const meshkeeId = String(params.meshkeeId ?? "");
+  const listHref = `/manage/${encodeURIComponent(meshkeeId)}/blog`;
+
+  return (
+    <AddBlogForm
+      meshkeeId={meshkeeId}
+      listHref={listHref}
+      title={en.blog.addTitle}
+      lead={en.blog.addLead}
+    />
+  );
+}
diff --git a/app/manage/[meshkeeId]/blog/page.tsx b/app/manage/[meshkeeId]/blog/page.tsx
new file mode 100644
index 0000000..aa44d21
--- /dev/null
+++ b/app/manage/[meshkeeId]/blog/page.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { BusinessListHeader } from "@/components/business/BusinessPageChrome";
+import BlogPanel from "@/components/catalog/BlogPanel";
+import { en } from "@/lib/i18n/en";
+import styles from "@/components/BusinessDetailsPage.module.css";
+
+export default function ManageBusinessBlogPage() {
+  const params = useParams<{ meshkeeId: string }>();
+  const meshkeeId = String(params.meshkeeId ?? "");
+  const addHref = `/manage/${encodeURIComponent(meshkeeId)}/blog/new`;
+
+  return (
+    <>
+      <BusinessListHeader
+        title={en.blog.title}
+        lead={en.blog.lead}
+        action={
+          <Link href={addHref} className={`outline-btn ${styles.actionBtn}`}>
+            {en.blog.add}
+          </Link>
+        }
+      />
+      <BlogPanel
+        meshkeeId={meshkeeId}
+        emptyLabel={en.blog.empty}
+        addHref={addHref}
+      />
+    </>
+  );
+}
diff --git a/app/manage/[meshkeeId]/gallery/page.tsx b/app/manage/[meshkeeId]/gallery/page.tsx
new file mode 100644
index 0000000..054e6ab
--- /dev/null
+++ b/app/manage/[meshkeeId]/gallery/page.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import { BusinessListHeader } from "@/components/business/BusinessPageChrome";
+import GalleryPanel from "@/components/catalog/GalleryPanel";
+import { en } from "@/lib/i18n/en";
+
+export default function ManageBusinessGalleryPage() {
+  const params = useParams<{ meshkeeId: string }>();
+  const meshkeeId = String(params.meshkeeId ?? "");
+
+  return (
+    <>
+      <BusinessListHeader title={en.gallery.title} lead={en.gallery.lead} />
+      <GalleryPanel meshkeeId={meshkeeId} emptyLabel={en.gallery.empty} />
+    </>
+  );
+}
diff --git a/app/manage/[meshkeeId]/layout.tsx b/app/manage/[meshkeeId]/layout.tsx
new file mode 100644
index 0000000..31bd29f
--- /dev/null
+++ b/app/manage/[meshkeeId]/layout.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+import { useParams } from "next/navigation";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import BusinessShell from "@/components/BusinessShell";
+import { setManagedBusinessId } from "@/lib/managed-business";
+import { useAuth } from "@/components/AuthProvider";
+
+function ManageBusinessBootstrap({ children }: { children: React.ReactNode }) {
+  const params = useParams<{ meshkeeId: string }>();
+  const meshkeeId = String(params.meshkeeId ?? "");
+  const { isLoading } = useAuth();
+
+  useEffect(() => {
+    if (meshkeeId) setManagedBusinessId(meshkeeId);
+  }, [meshkeeId]);
+
+  if (isLoading) {
+    return (
+      <div
+        style={{
+          minHeight: "100vh",
+          display: "grid",
+          placeItems: "center",
+          background: "#f6f6f6",
+          fontSize: 12,
+          letterSpacing: "0.2em",
+          textTransform: "uppercase",
+          color: "#8e8e8e",
+        }}
+      >
+        Loading
+      </div>
+    );
+  }
+
+  return (
+    <BusinessShell manageMeshkeeId={meshkeeId}>{children}</BusinessShell>
+  );
+}
+
+export default function ManageBusinessLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <ManageBusinessBootstrap>{children}</ManageBusinessBootstrap>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/manage/[meshkeeId]/page.tsx b/app/manage/[meshkeeId]/page.tsx
new file mode 100644
index 0000000..872b35d
--- /dev/null
+++ b/app/manage/[meshkeeId]/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { redirect } from "next/navigation";
+
+export default async function ManageBusinessIndex({
+  params,
+}: {
+  params: Promise<{ meshkeeId: string }>;
+}) {
+  const { meshkeeId } = await params;
+  redirect(`/manage/${meshkeeId}/profile`);
+}
diff --git a/app/manage/[meshkeeId]/portfolios/new/page.tsx b/app/manage/[meshkeeId]/portfolios/new/page.tsx
new file mode 100644
index 0000000..8bdf2de
--- /dev/null
+++ b/app/manage/[meshkeeId]/portfolios/new/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import AddPortfolioForm from "@/components/catalog/AddPortfolioForm";
+import { en } from "@/lib/i18n/en";
+
+export default function ManageAddPortfolioPage() {
+  const params = useParams<{ meshkeeId: string }>();
+  const meshkeeId = String(params.meshkeeId ?? "");
+  const listHref = `/manage/${encodeURIComponent(meshkeeId)}/portfolios`;
+
+  return (
+    <AddPortfolioForm
+      meshkeeId={meshkeeId}
+      listHref={listHref}
+      title={en.portfolios.addTitle}
+      lead={en.portfolios.addLead}
+    />
+  );
+}
diff --git a/app/manage/[meshkeeId]/portfolios/page.tsx b/app/manage/[meshkeeId]/portfolios/page.tsx
new file mode 100644
index 0000000..168a96b
--- /dev/null
+++ b/app/manage/[meshkeeId]/portfolios/page.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { BusinessListHeader } from "@/components/business/BusinessPageChrome";
+import PortfoliosPanel from "@/components/catalog/PortfoliosPanel";
+import { en } from "@/lib/i18n/en";
+import styles from "@/components/BusinessDetailsPage.module.css";
+
+export default function ManageBusinessPortfoliosPage() {
+  const params = useParams<{ meshkeeId: string }>();
+  const meshkeeId = String(params.meshkeeId ?? "");
+  const addHref = `/manage/${encodeURIComponent(meshkeeId)}/portfolios/new`;
+
+  return (
+    <>
+      <BusinessListHeader
+        title={en.portfolios.title}
+        lead={en.portfolios.lead}
+        action={
+          <Link href={addHref} className={`outline-btn ${styles.actionBtn}`}>
+            {en.portfolios.add}
+          </Link>
+        }
+      />
+      <PortfoliosPanel
+        meshkeeId={meshkeeId}
+        emptyLabel={en.portfolios.empty}
+        addHref={addHref}
+      />
+    </>
+  );
+}
diff --git a/app/manage/[meshkeeId]/products/categories/page.tsx b/app/manage/[meshkeeId]/products/categories/page.tsx
new file mode 100644
index 0000000..f71eea6
--- /dev/null
+++ b/app/manage/[meshkeeId]/products/categories/page.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import ManageCategoriesPage from "@/components/catalog/ManageCategoriesPage";
+import { en } from "@/lib/i18n/en";
+
+export default function ManageProductCategoriesPage() {
+  const params = useParams<{ meshkeeId: string }>();
+  const meshkeeId = String(params.meshkeeId ?? "");
+  const listHref = `/manage/${encodeURIComponent(meshkeeId)}/products`;
+
+  return (
+    <ManageCategoriesPage
+      meshkeeId={meshkeeId}
+      entityType="product"
+      title={en.products.categoriesTitle}
+      lead={en.products.categoriesLead}
+      homeHref={`/manage/${encodeURIComponent(meshkeeId)}`}
+      listHref={listHref}
+      listLabel={en.products.title}
+    />
+  );
+}
diff --git a/app/manage/[meshkeeId]/products/new/page.tsx b/app/manage/[meshkeeId]/products/new/page.tsx
new file mode 100644
index 0000000..8be7fe9
--- /dev/null
+++ b/app/manage/[meshkeeId]/products/new/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import AddProductForm from "@/components/catalog/AddProductForm";
+import { en } from "@/lib/i18n/en";
+
+export default function ManageAddProductPage() {
+  const params = useParams<{ meshkeeId: string }>();
+  const meshkeeId = String(params.meshkeeId ?? "");
+  const listHref = `/manage/${encodeURIComponent(meshkeeId)}/products`;
+
+  return (
+    <AddProductForm
+      meshkeeId={meshkeeId}
+      listHref={listHref}
+      title={en.products.addTitle}
+      lead={en.products.addLead}
+    />
+  );
+}
diff --git a/app/manage/[meshkeeId]/products/page.tsx b/app/manage/[meshkeeId]/products/page.tsx
new file mode 100644
index 0000000..b0552f9
--- /dev/null
+++ b/app/manage/[meshkeeId]/products/page.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { BusinessListHeader } from "@/components/business/BusinessPageChrome";
+import ProductsPanel from "@/components/catalog/ProductsPanel";
+import { en } from "@/lib/i18n/en";
+import styles from "@/components/BusinessDetailsPage.module.css";
+
+export default function ManageBusinessProductsPage() {
+  const params = useParams<{ meshkeeId: string }>();
+  const meshkeeId = String(params.meshkeeId ?? "");
+  const base = `/manage/${encodeURIComponent(meshkeeId)}/products`;
+
+  return (
+    <>
+      <BusinessListHeader
+        title={en.products.title}
+        lead={en.products.lead}
+        action={
+          <>
+            <Link
+              href={`${base}/categories`}
+              className={`outline-btn ${styles.actionBtn}`}
+            >
+              {en.products.manageCategories}
+            </Link>
+            <Link href={`${base}/new`} className={`outline-btn ${styles.actionBtn}`}>
+              {en.products.add}
+            </Link>
+          </>
+        }
+      />
+      <ProductsPanel
+        meshkeeId={meshkeeId}
+        emptyLabel={en.products.empty}
+        addHref={`${base}/new`}
+      />
+    </>
+  );
+}
diff --git a/app/manage/[meshkeeId]/profile/page.tsx b/app/manage/[meshkeeId]/profile/page.tsx
new file mode 100644
index 0000000..4a8ac46
--- /dev/null
+++ b/app/manage/[meshkeeId]/profile/page.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import EditBusinessPage from "@/components/EditBusinessPage";
+
+export default function ManageBusinessProfilePage() {
+  const params = useParams<{ meshkeeId: string }>();
+  const meshkeeId = String(params.meshkeeId ?? "");
+
+  return (
+    <EditBusinessPage meshkeeBusinessId={meshkeeId} variant="business" />
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..d152519
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import DashboardShell from "@/components/DashboardShell";
+import HomeDashboard from "@/components/HomeDashboard";
+
+export const metadata: Metadata = {
+  title: "Overview | IranBay Dashboard",
+};
+
+export default function DashboardHomePage() {
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <DashboardShell>
+        <HomeDashboard />
+      </DashboardShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/website-images/page.tsx b/app/website-images/page.tsx
new file mode 100644
index 0000000..e4d2512
--- /dev/null
+++ b/app/website-images/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function WebsiteImagesRedirect() {
+  redirect("/website/images");
+}
diff --git a/app/website/blog/categories/page.tsx b/app/website/blog/categories/page.tsx
new file mode 100644
index 0000000..5a2cd3e
--- /dev/null
+++ b/app/website/blog/categories/page.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import BlogCategoriesPage from "@/components/BlogCategoriesPage";
+import DashboardShell from "@/components/DashboardShell";
+
+export const metadata: Metadata = {
+  title: "Blog categories | IranBay Dashboard",
+};
+
+export default function BlogCategoriesRoute() {
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <DashboardShell>
+        <BlogCategoriesPage />
+      </DashboardShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/website/blog/new/page.tsx b/app/website/blog/new/page.tsx
new file mode 100644
index 0000000..9d7c87e
--- /dev/null
+++ b/app/website/blog/new/page.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import DashboardShell from "@/components/DashboardShell";
+import WebsiteBlogForm from "@/components/WebsiteBlogForm";
+
+export const metadata: Metadata = {
+  title: "Add blog post | IranBay Dashboard",
+};
+
+export default function WebsiteBlogNewRoute() {
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <DashboardShell>
+        <WebsiteBlogForm />
+      </DashboardShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/website/blog/page.tsx b/app/website/blog/page.tsx
new file mode 100644
index 0000000..4b64c08
--- /dev/null
+++ b/app/website/blog/page.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import DashboardShell from "@/components/DashboardShell";
+import WebsiteBlogListPage from "@/components/WebsiteBlogListPage";
+
+export const metadata: Metadata = {
+  title: "Blog | IranBay Dashboard",
+};
+
+export default function WebsiteBlogRoute() {
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <DashboardShell>
+        <WebsiteBlogListPage />
+      </DashboardShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/website/carousels/page.tsx b/app/website/carousels/page.tsx
new file mode 100644
index 0000000..b1c10ff
--- /dev/null
+++ b/app/website/carousels/page.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import DashboardShell from "@/components/DashboardShell";
+import SpecialBusinessesPage from "@/components/SpecialBusinessesPage";
+
+export const metadata: Metadata = {
+  title: "Carousels | IranBay Dashboard",
+};
+
+export default function CarouselsRoute() {
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <DashboardShell>
+        <SpecialBusinessesPage />
+      </DashboardShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/website/images/page.tsx b/app/website/images/page.tsx
new file mode 100644
index 0000000..909755a
--- /dev/null
+++ b/app/website/images/page.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+import { ProtectedRoute } from "@/components/AuthGuards";
+import DashboardShell from "@/components/DashboardShell";
+import WebsiteImagesPage from "@/components/WebsiteImagesPage";
+
+export const metadata: Metadata = {
+  title: "Website images | IranBay Dashboard",
+};
+
+export default function WebsiteImagesRoute() {
+  return (
+    <ProtectedRoute requiredApp="admin">
+      <DashboardShell>
+        <WebsiteImagesPage />
+      </DashboardShell>
+    </ProtectedRoute>
+  );
+}
diff --git a/app/website/special-businesses/page.tsx b/app/website/special-businesses/page.tsx
new file mode 100644
index 0000000..0047a86
--- /dev/null
+++ b/app/website/special-businesses/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function SpecialBusinessesRedirect() {
+  redirect("/website/carousels");
+}
diff --git a/components/AccountMenu.module.css b/components/AccountMenu.module.css
new file mode 100644
index 0000000..b63eaf8
--- /dev/null
+++ b/components/AccountMenu.module.css
@@ -0,0 +1,77 @@
+.account {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 160px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-black);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+
+.chevron {
+  width: 7px;
+  height: 10px;
+  object-fit: contain;
+  transform: rotate(90deg);
+  opacity: 0.65;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.chevronOpen {
+  transform: rotate(-90deg);
+}
+
+.menu {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  z-index: 60;
+  min-width: 196px;
+  padding: 8px 0;
+  background: var(--color-white);
+  border: 1px solid #eee;
+  border-radius: 5px;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
+}
+
+.item {
+  display: block;
+  width: 100%;
+  padding: 10px 16px;
+  border: 0;
+  background: none;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  text-align: left;
+  color: var(--color-soft);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.item:hover,
+.item:focus-visible {
+  color: var(--color-black);
+  background: #f6f6f6;
+}
+
+.itemMuted {
+  color: #8e8e8e;
+}
diff --git a/components/AccountMenu.tsx b/components/AccountMenu.tsx
new file mode 100644
index 0000000..fa2c07a
--- /dev/null
+++ b/components/AccountMenu.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/components/AuthProvider";
+import { en } from "@/lib/i18n/en";
+import {
+  getAdminDashboardOrigin,
+  getCustomerDashboardOrigin,
+  hostAppFor,
+} from "@/lib/host";
+import { openBusinessDashboardAsUser } from "@/lib/session-handoff";
+import { getFirstName } from "@/lib/userName";
+import styles from "./AccountMenu.module.css";
+
+export default function AccountMenu() {
+  const router = useRouter();
+  const { user, logout, isBusinessOwner, isSuperAdmin } = useAuth();
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const firstName = getFirstName(user);
+  const app =
+    typeof window !== "undefined" ? hostAppFor(window.location.host) : "admin";
+
+  const customerUrl = getCustomerDashboardOrigin();
+  const adminUrl = getAdminDashboardOrigin();
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div className={styles.account} ref={rootRef}>
+      <button
+        type="button"
+        className={styles.trigger}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+      >
+        {firstName}
+        <img
+          className={`${styles.chevron} ${open ? styles.chevronOpen : ""}`}
+          src="/images/icons/chevron.svg"
+          alt=""
+          width={7}
+          height={12}
+        />
+      </button>
+
+      {open ? (
+        <div className={styles.menu} role="menu">
+          <a
+            role="menuitem"
+            href={`${customerUrl}/profile`}
+            className={styles.item}
+            onClick={() => setOpen(false)}
+          >
+            My profile
+          </a>
+          <a
+            role="menuitem"
+            href={`${customerUrl}/forgot-password`}
+            className={styles.item}
+            onClick={() => setOpen(false)}
+          >
+            Change password
+          </a>
+          {isBusinessOwner ? (
+            <button
+              type="button"
+              role="menuitem"
+              className={styles.item}
+              onClick={() => {
+                setOpen(false);
+                openBusinessDashboardAsUser("/profile");
+              }}
+            >
+              {en.openBusinessDashboard}
+            </button>
+          ) : null}
+          {isSuperAdmin ? (
+            <a
+              role="menuitem"
+              href={adminUrl}
+              className={styles.item}
+              onClick={() => setOpen(false)}
+            >
+              Super admin
+            </a>
+          ) : null}
+          {app !== "customer" ? (
+            <a
+              role="menuitem"
+              href={customerUrl}
+              className={styles.item}
+              onClick={() => setOpen(false)}
+            >
+              {en.openCustomerDashboard}
+            </a>
+          ) : null}
+          <button
+            type="button"
+            role="menuitem"
+            className={`${styles.item} ${styles.itemMuted}`}
+            onClick={() => {
+              setOpen(false);
+              logout();
+              router.replace("/login");
+            }}
+          >
+            {en.logOut}
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/AddBusinessModal.module.css b/components/AddBusinessModal.module.css
new file mode 100644
index 0000000..fc325d2
--- /dev/null
+++ b/components/AddBusinessModal.module.css
@@ -0,0 +1,351 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  padding: 24px var(--page-pad);
+  background: rgba(0, 0, 0, 0.28);
+}
+
+.modal {
+  width: min(100%, 520px);
+  max-height: min(90vh, 720px);
+  overflow: auto;
+  border-radius: 5px;
+  background: var(--color-white);
+  box-shadow: 24px 28px 48px rgba(0, 0, 0, 0.12);
+  padding: 28px 28px 24px;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+.kicker {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  margin-bottom: 8px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.closeBtn {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  font-size: 22px;
+  line-height: 1;
+  color: var(--color-soft);
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.closeBtn:hover,
+.closeBtn:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.switch {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 5px;
+  background: #f6f6f6;
+}
+
+.switchBtn {
+  min-height: 40px;
+  padding: 0 12px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.switchBtnActive {
+  background: var(--color-black);
+  color: var(--color-white);
+}
+
+.modeHint {
+  margin: 16px 0 22px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.55;
+  color: var(--color-muted);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.searchBlock {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.latestBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.latestLabel {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.clearSelection {
+  align-self: flex-start;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.clearSelection:hover,
+.clearSelection:focus-visible {
+  color: var(--color-black);
+}
+
+.results {
+  border: 1px solid #ececec;
+  border-radius: 5px;
+  background: #fff;
+  max-height: 220px;
+  overflow: auto;
+}
+
+.resultsStatus,
+.resultsError {
+  padding: 14px 16px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.resultsError {
+  color: var(--color-muted);
+}
+
+.resultItem {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid #f3f3f3;
+  transition: background 0.2s ease;
+}
+
+.resultItem:last-child {
+  border-bottom: 0;
+}
+
+.resultItem:hover,
+.resultItem:focus-visible {
+  background: #f6f6f6;
+}
+
+.resultItem strong {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.resultName {
+  display: inline;
+  font-weight: 400;
+}
+
+.resultName span {
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: normal;
+  color: inherit;
+}
+
+.resultSep {
+  font-weight: 400;
+  color: var(--color-body);
+}
+
+.resultFa {
+  font-family: var(--font-farsi);
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.resultItem > span,
+.resultMeta {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  color: var(--color-soft);
+}
+
+.resultMeta :global(.fa) {
+  letter-spacing: 0;
+}
+
+.selectedMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 16px;
+  border: 1px solid #ececec;
+  border-radius: 5px;
+  background: #fafafa;
+}
+
+.selectedMeta p {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0;
+}
+
+.selectedMeta strong {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.selectedMeta span {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-black);
+}
+
+.selectedMeta :global(.fa) {
+  letter-spacing: 0;
+}
+
+.submitError {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.45;
+  color: var(--color-muted);
+}
+
+.field {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: 46px;
+  padding: 14px 14px 10px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fff;
+  transition: border-color 0.25s ease;
+}
+
+.field span {
+  position: absolute;
+  top: -8px;
+  left: 12px;
+  background: #fff;
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-body);
+  transition: color 0.25s ease;
+}
+
+.field:focus-within {
+  border-color: var(--color-black);
+}
+
+.field:focus-within span {
+  color: var(--color-black);
+}
+
+.field input {
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 15px;
+  font-weight: 400;
+  width: 100%;
+  color: var(--color-black);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 6px;
+}
+
+.secondaryBtn,
+.primaryBtn {
+  min-height: 34px;
+  padding: 0 18px;
+  font-size: 11px;
+  letter-spacing: 0.14em;
+}
+
+.secondaryBtn {
+  border-color: #9e9e9e;
+  color: #9e9e9e;
+}
+
+.secondaryBtn:hover,
+.secondaryBtn:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.primaryBtn {
+  min-width: 112px;
+}
+
+@media (max-width: 560px) {
+  .modal {
+    padding: 24px 18px 20px;
+  }
+
+  .actions {
+    flex-direction: column-reverse;
+  }
+
+  .secondaryBtn,
+  .primaryBtn {
+    width: 100%;
+  }
+}
diff --git a/components/AddBusinessModal.tsx b/components/AddBusinessModal.tsx
new file mode 100644
index 0000000..90e6698
--- /dev/null
+++ b/components/AddBusinessModal.tsx
@@ -0,0 +1,619 @@
+"use client";
+
+import { useEffect, useId, useRef, useState } from "react";
+import { ApiError, isAbortError } from "@/lib/meshkee-api";
+import { createMarketplaceBusiness } from "@/services/marketplace";
+import { searchMeshkeeCategories } from "@/services/meshkee-categories";
+import {
+  createMeshkeeBusiness,
+  getMeshkeeBusiness,
+  listLatestMeshkeeBusinesses,
+  searchMeshkeeBusinesses,
+  type MeshkeeBusinessDetail,
+  type MeshkeeBusinessSearchItem,
+} from "@/services/meshkee-businesses";
+import { PhoneLtr, withFaSpans } from "@/lib/faText";
+import styles from "./AddBusinessModal.module.css";
+
+export type AddBusinessMode = "connect" | "create";
+
+function slugify(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 80);
+}
+
+function ownerParts(detail: MeshkeeBusinessDetail | null, fallback?: {
+  ownerName?: string | null;
+  ownerCellNumber?: string | null;
+}): { name: string; cell: string } {
+  if (detail?.owner) {
+    const name = [detail.owner.firstName, detail.owner.lastName]
+      .filter(Boolean)
+      .join(" ")
+      .trim();
+    return { name, cell: detail.owner.cellNumber || "" };
+  }
+  return {
+    name: fallback?.ownerName?.trim() || "",
+    cell: fallback?.ownerCellNumber?.trim() || "",
+  };
+}
+
+function BusinessPickRow({
+  item,
+  onSelect,
+}: {
+  item: MeshkeeBusinessSearchItem;
+  onSelect: (item: MeshkeeBusinessSearchItem) => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={styles.resultItem}
+      role="option"
+      onClick={() => onSelect(item)}
+    >
+      <strong className={styles.resultName}>
+        <span>{item.name}</span>
+        {item.nameFa && item.nameFa !== item.name ? (
+          <>
+            <span className={styles.resultSep} aria-hidden>
+              {" "}
+              /{" "}
+            </span>
+            <span className={`fa ${styles.resultFa}`} lang="fa">
+              {item.nameFa}
+            </span>
+          </>
+        ) : null}
+      </strong>
+      <span className={styles.resultMeta}>
+        /{item.slug}
+        {item.ownerName ? (
+          <>
+            {" · "}
+            {withFaSpans(item.ownerName)}
+          </>
+        ) : null}
+      </span>
+    </button>
+  );
+}
+
+export default function AddBusinessModal({
+  open,
+  onClose,
+  onConnected,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onConnected?: () => void;
+}) {
+  const titleId = useId();
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const [mode, setMode] = useState<AddBusinessMode>("connect");
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<MeshkeeBusinessSearchItem[]>([]);
+  const [searching, setSearching] = useState(false);
+  const [searchError, setSearchError] = useState("");
+  const [latest, setLatest] = useState<MeshkeeBusinessSearchItem[]>([]);
+  const [latestLoading, setLatestLoading] = useState(false);
+  const [latestError, setLatestError] = useState("");
+  const [selected, setSelected] = useState<MeshkeeBusinessSearchItem | null>(
+    null,
+  );
+  const [selectedDetail, setSelectedDetail] =
+    useState<MeshkeeBusinessDetail | null>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+
+  const [businessName, setBusinessName] = useState("");
+  const [ownerFirstName, setOwnerFirstName] = useState("");
+  const [ownerLastName, setOwnerLastName] = useState("");
+  const [ownerCell, setOwnerCell] = useState("+98");
+  const [ownerPassword, setOwnerPassword] = useState("");
+
+  const [submitting, setSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState("");
+
+  useEffect(() => {
+    if (!open) return;
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    closeRef.current?.focus();
+
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (!open) {
+      setMode("connect");
+      setQuery("");
+      setResults([]);
+      setSearchError("");
+      setLatest([]);
+      setLatestError("");
+      setSelected(null);
+      setSelectedDetail(null);
+      setBusinessName("");
+      setOwnerFirstName("");
+      setOwnerLastName("");
+      setOwnerCell("+98");
+      setOwnerPassword("");
+      setSubmitError("");
+      setSubmitting(false);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (!open || mode !== "connect") return;
+
+    const controller = new AbortController();
+    setLatestLoading(true);
+    setLatestError("");
+    void listLatestMeshkeeBusinesses(5, controller.signal)
+      .then((data) => {
+        if (controller.signal.aborted) return;
+        setLatest(data.items);
+      })
+      .catch((err) => {
+        if (isAbortError(err) || controller.signal.aborted) return;
+        setLatest([]);
+        setLatestError(
+          err instanceof ApiError
+            ? err.message
+            : "Unable to load latest businesses.",
+        );
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setLatestLoading(false);
+      });
+
+    return () => controller.abort();
+  }, [open, mode]);
+
+  useEffect(() => {
+    if (!open || mode !== "connect") return;
+
+    const trimmed = query.trim();
+    if (trimmed.length < 2 || selected) {
+      setResults([]);
+      setSearching(false);
+      setSearchError("");
+      return;
+    }
+
+    const controller = new AbortController();
+    const timer = window.setTimeout(async () => {
+      setSearching(true);
+      setSearchError("");
+      try {
+        const data = await searchMeshkeeBusinesses(trimmed, controller.signal);
+        if (controller.signal.aborted) return;
+        setResults(data.items);
+      } catch (err) {
+        if (isAbortError(err) || controller.signal.aborted) return;
+        setResults([]);
+        setSearchError(
+          err instanceof ApiError
+            ? err.message
+            : "Unable to search Meshkee businesses.",
+        );
+      } finally {
+        if (!controller.signal.aborted) setSearching(false);
+      }
+    }, 250);
+
+    return () => {
+      controller.abort();
+      window.clearTimeout(timer);
+    };
+  }, [open, mode, query, selected]);
+
+  async function selectBusiness(item: MeshkeeBusinessSearchItem) {
+    setSelected(item);
+    setQuery(item.label || item.name);
+    setResults([]);
+    setSubmitError("");
+    setDetailLoading(true);
+    setSelectedDetail(null);
+    try {
+      const detail = await getMeshkeeBusiness(String(item.id));
+      setSelectedDetail(detail);
+    } catch (err) {
+      setSelectedDetail(null);
+      setSubmitError(
+        err instanceof Error ? err.message : "Could not load business details.",
+      );
+    } finally {
+      setDetailLoading(false);
+    }
+  }
+
+  const showSearchResults = !selected && query.trim().length >= 2;
+  const showLatestShortcut = !selected && query.trim().length < 2;
+
+  if (!open) return null;
+
+  return (
+    <div className={styles.overlay} role="presentation" onClick={onClose}>
+      <div
+        className={styles.modal}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className={styles.header}>
+          <div>
+            <p className={styles.kicker}>Marketplace</p>
+            <h2 id={titleId} className={styles.title}>
+              Add business
+            </h2>
+          </div>
+          <button
+            ref={closeRef}
+            type="button"
+            className={styles.closeBtn}
+            aria-label="Close"
+            onClick={onClose}
+          >
+            ×
+          </button>
+        </div>
+
+        <div
+          className={styles.switch}
+          role="tablist"
+          aria-label="Add business mode"
+        >
+          <button
+            type="button"
+            role="tab"
+            aria-selected={mode === "connect"}
+            className={`${styles.switchBtn} ${mode === "connect" ? styles.switchBtnActive : ""}`}
+            onClick={() => setMode("connect")}
+          >
+            Connect Meshkee
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={mode === "create"}
+            className={`${styles.switchBtn} ${mode === "create" ? styles.switchBtnActive : ""}`}
+            onClick={() => setMode("create")}
+          >
+            Create new
+          </button>
+        </div>
+
+        <p className={styles.modeHint}>
+          {mode === "connect"
+            ? "Choose an existing Meshkee business to list on the marketplace."
+            : "Create a Meshkee business with an owner, then list it here."}
+        </p>
+
+        {mode === "connect" ? (
+          <form
+            className={styles.form}
+            onSubmit={async (event) => {
+              event.preventDefault();
+              if (!selected) {
+                setSubmitError("Select a Meshkee business from search first.");
+                return;
+              }
+
+              setSubmitting(true);
+              setSubmitError("");
+              try {
+                await createMarketplaceBusiness({
+                  meshkeeBusinessId: String(selected.id),
+                  slug: selected.slug,
+                  name: selected.name,
+                  status: "draft",
+                });
+                onConnected?.();
+                onClose();
+              } catch (err) {
+                setSubmitError(
+                  err instanceof Error
+                    ? err.message
+                    : "Could not connect business.",
+                );
+              } finally {
+                setSubmitting(false);
+              }
+            }}
+          >
+            <div className={styles.searchBlock}>
+              <label className={styles.field}>
+                <span>Search Meshkee</span>
+                <input
+                  value={selected ? selected.name : query}
+                  onChange={(event) => {
+                    setSelected(null);
+                    setSelectedDetail(null);
+                    setQuery(event.target.value);
+                    setSubmitError("");
+                  }}
+                  placeholder="Type at least 2 characters…"
+                  autoComplete="off"
+                  disabled={submitting}
+                />
+              </label>
+
+              {selected ? (
+                <button
+                  type="button"
+                  className={styles.clearSelection}
+                  onClick={() => {
+                    setSelected(null);
+                    setSelectedDetail(null);
+                    setQuery("");
+                  }}
+                >
+                  Clear selection
+                </button>
+              ) : null}
+
+              {showSearchResults ? (
+                <div className={styles.results} role="listbox">
+                  {searching ? (
+                    <p className={styles.resultsStatus}>Searching…</p>
+                  ) : searchError ? (
+                    <p className={styles.resultsError}>{searchError}</p>
+                  ) : results.length === 0 ? (
+                    <p className={styles.resultsStatus}>No matches</p>
+                  ) : (
+                    results.map((item) => (
+                      <BusinessPickRow
+                        key={String(item.id)}
+                        item={item}
+                        onSelect={(picked) => void selectBusiness(picked)}
+                      />
+                    ))
+                  )}
+                </div>
+              ) : null}
+
+              {showLatestShortcut ? (
+                <div className={styles.latestBlock}>
+                  <p className={styles.latestLabel}>Latest on Meshkee</p>
+                  <div className={styles.results} role="listbox">
+                    {latestLoading ? (
+                      <p className={styles.resultsStatus}>Loading…</p>
+                    ) : latestError ? (
+                      <p className={styles.resultsError}>{latestError}</p>
+                    ) : latest.length === 0 ? (
+                      <p className={styles.resultsStatus}>No businesses yet</p>
+                    ) : (
+                      latest.map((item) => (
+                        <BusinessPickRow
+                          key={String(item.id)}
+                          item={item}
+                          onSelect={(picked) => void selectBusiness(picked)}
+                        />
+                      ))
+                    )}
+                  </div>
+                </div>
+              ) : null}
+            </div>
+
+            {selected ? (
+              <div className={styles.selectedMeta}>
+                <p>
+                  <strong>Business</strong>
+                  <span>
+                    {selected.name}
+                    {selected.nameFa && selected.nameFa !== selected.name ? (
+                      <>
+                        {" / "}
+                        <span className="fa" lang="fa">
+                          {selected.nameFa}
+                        </span>
+                      </>
+                    ) : null}
+                  </span>
+                </p>
+                <p>
+                  <strong>Owner</strong>
+                  <span>
+                    {detailLoading ? (
+                      "Loading…"
+                    ) : (
+                      (() => {
+                        const { name, cell } = ownerParts(
+                          selectedDetail,
+                          selected,
+                        );
+                        if (!name && !cell) return "No owner linked";
+                        return (
+                          <>
+                            {name ? withFaSpans(name) : null}
+                            {name && cell ? " · " : null}
+                            {cell ? <PhoneLtr value={cell} /> : null}
+                          </>
+                        );
+                      })()
+                    )}
+                  </span>
+                </p>
+              </div>
+            ) : null}
+
+            {submitError ? (
+              <p className={styles.submitError} role="alert">
+                {submitError}
+              </p>
+            ) : null}
+
+            <div className={styles.actions}>
+              <button
+                type="button"
+                className={`outline-btn ${styles.secondaryBtn}`}
+                onClick={onClose}
+                disabled={submitting}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className={`outline-btn ${styles.primaryBtn}`}
+                disabled={submitting || !selected || detailLoading}
+              >
+                {submitting ? "…" : "Connect"}
+              </button>
+            </div>
+          </form>
+        ) : (
+          <form
+            className={styles.form}
+            onSubmit={async (event) => {
+              event.preventDefault();
+              setSubmitting(true);
+              setSubmitError("");
+              try {
+                const categories = await searchMeshkeeCategories("other");
+                const other =
+                  categories.find((c) => c.slug === "other") ?? categories[0];
+                if (!other) {
+                  throw new Error("Meshkee “Other” category not found.");
+                }
+
+                const name = businessName.trim();
+                const slug = slugify(name);
+                if (!slug) throw new Error("Enter a valid business name.");
+
+                const created = await createMeshkeeBusiness({
+                  name,
+                  nameFa: name,
+                  slug,
+                  categoryIds: [Number(other.id)],
+                  ownerFirstName: ownerFirstName.trim(),
+                  ownerLastName: ownerLastName.trim(),
+                  ownerFirstNameEn: ownerFirstName.trim(),
+                  ownerLastNameEn: ownerLastName.trim(),
+                  ownerCellNumber: ownerCell.trim(),
+                  ownerPassword,
+                });
+
+                await createMarketplaceBusiness({
+                  meshkeeBusinessId: created.id,
+                  slug: created.slug || slug,
+                  name: created.name || name,
+                  status: "draft",
+                });
+
+                onConnected?.();
+                onClose();
+              } catch (err) {
+                setSubmitError(
+                  err instanceof Error
+                    ? err.message
+                    : "Could not create business.",
+                );
+              } finally {
+                setSubmitting(false);
+              }
+            }}
+          >
+            <label className={styles.field}>
+              <span>Business name</span>
+              <input
+                value={businessName}
+                onChange={(event) => setBusinessName(event.target.value)}
+                placeholder="Business name"
+                required
+                autoComplete="organization"
+                disabled={submitting}
+              />
+            </label>
+            <label className={styles.field}>
+              <span>Owner first name</span>
+              <input
+                value={ownerFirstName}
+                onChange={(event) => setOwnerFirstName(event.target.value)}
+                required
+                autoComplete="given-name"
+                disabled={submitting}
+              />
+            </label>
+            <label className={styles.field}>
+              <span>Owner last name</span>
+              <input
+                value={ownerLastName}
+                onChange={(event) => setOwnerLastName(event.target.value)}
+                required
+                autoComplete="family-name"
+                disabled={submitting}
+              />
+            </label>
+            <label className={styles.field}>
+              <span>Owner cell</span>
+              <input
+                value={ownerCell}
+                onChange={(event) => setOwnerCell(event.target.value)}
+                placeholder="+98912…"
+                pattern="^\+[1-9]\d{6,14}$"
+                required
+                autoComplete="tel"
+                inputMode="tel"
+                dir="ltr"
+                disabled={submitting}
+              />
+            </label>
+            <label className={styles.field}>
+              <span>Owner password</span>
+              <input
+                type="password"
+                value={ownerPassword}
+                onChange={(event) => setOwnerPassword(event.target.value)}
+                minLength={8}
+                required
+                autoComplete="new-password"
+                disabled={submitting}
+              />
+            </label>
+
+            {submitError ? (
+              <p className={styles.submitError} role="alert">
+                {submitError}
+              </p>
+            ) : null}
+
+            <div className={styles.actions}>
+              <button
+                type="button"
+                className={`outline-btn ${styles.secondaryBtn}`}
+                onClick={onClose}
+                disabled={submitting}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className={`outline-btn ${styles.primaryBtn}`}
+                disabled={submitting}
+              >
+                {submitting ? "…" : "Create"}
+              </button>
+            </div>
+          </form>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/AiPromptPanel.module.css b/components/AiPromptPanel.module.css
new file mode 100644
index 0000000..73303ad
--- /dev/null
+++ b/components/AiPromptPanel.module.css
@@ -0,0 +1,149 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 16px;
+  border: 1px solid #ececec;
+  border-radius: 5px;
+  background: #fafafa;
+}
+
+.head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.title {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.subtitle {
+  margin: 6px 0 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.closeBtn {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  background: #fff;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1;
+  color: var(--color-soft);
+  transition: border-color 0.35s ease, color 0.35s ease;
+}
+
+.closeBtn:hover:not(:disabled),
+.closeBtn:focus-visible:not(:disabled) {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.field span {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.field textarea {
+  width: 100%;
+  min-height: 180px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fff;
+  padding: 12px;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.55;
+  color: var(--color-black);
+  outline: none;
+  resize: vertical;
+  transition: border-color 0.35s ease, box-shadow 0.35s ease;
+}
+
+.field textarea:hover {
+  border-color: #d8d8d8;
+}
+
+.field textarea:focus {
+  border-color: var(--color-black);
+}
+
+.error {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  color: #8a1f11;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.secondaryBtn,
+.primaryBtn {
+  min-height: 36px;
+  padding: 0 16px;
+  border-radius: 3px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  transition:
+    color 0.35s ease,
+    border-color 0.35s ease,
+    background-color 0.35s ease,
+    box-shadow 0.35s ease;
+}
+
+.secondaryBtn {
+  border: 1px solid #d4d4d4;
+  background: #fff;
+  color: var(--color-soft);
+}
+
+.secondaryBtn:hover:not(:disabled),
+.secondaryBtn:focus-visible:not(:disabled) {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.primaryBtn {
+  border: 1px solid var(--color-black);
+  background: var(--color-black);
+  color: var(--color-white);
+}
+
+.primaryBtn:hover:not(:disabled),
+.primaryBtn:focus-visible:not(:disabled) {
+  border-color: transparent;
+}
+
+.secondaryBtn:disabled,
+.primaryBtn:disabled,
+.closeBtn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
diff --git a/components/AiPromptPanel.tsx b/components/AiPromptPanel.tsx
new file mode 100644
index 0000000..6575ee2
--- /dev/null
+++ b/components/AiPromptPanel.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import aiStyles from "@/styles/ai.module.css";
+import styles from "./AiPromptPanel.module.css";
+
+type Props = {
+  open: boolean;
+  title: string;
+  initialPrompt: string;
+  busy?: boolean;
+  error?: string;
+  disabled?: boolean;
+  onClose: () => void;
+  onRun: (prompt: string) => void;
+};
+
+export default function AiPromptPanel({
+  open,
+  title,
+  initialPrompt,
+  busy = false,
+  error = "",
+  disabled = false,
+  onClose,
+  onRun,
+}: Props) {
+  const [prompt, setPrompt] = useState(initialPrompt);
+
+  useEffect(() => {
+    if (open) setPrompt(initialPrompt);
+  }, [open, initialPrompt]);
+
+  if (!open) return null;
+
+  return (
+    <div className={styles.panel}>
+      <div className={styles.head}>
+        <div>
+          <h3 className={styles.title}>{title}</h3>
+          <p className={styles.subtitle}>
+            Edit the prompt, then run AI to fill this field.
+          </p>
+        </div>
+        <button
+          type="button"
+          className={styles.closeBtn}
+          disabled={busy}
+          aria-label="Close"
+          onClick={onClose}
+        >
+          ×
+        </button>
+      </div>
+
+      <label className={styles.field}>
+        <span>Prompt</span>
+        <textarea
+          rows={10}
+          value={prompt}
+          disabled={busy || disabled}
+          className={busy ? aiStyles.aiWorkingBorder : undefined}
+          onChange={(event) => setPrompt(event.target.value)}
+        />
+      </label>
+
+      {error ? (
+        <p className={styles.error} role="alert">
+          {error}
+        </p>
+      ) : null}
+
+      <div className={styles.actions}>
+        <button
+          type="button"
+          className={styles.secondaryBtn}
+          disabled={busy}
+          onClick={onClose}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          className={`${styles.primaryBtn} ${aiStyles.aiTrigger}`}
+          disabled={busy || disabled || prompt.trim().length < 10}
+          onClick={() => onRun(prompt.trim())}
+        >
+          {busy ? "Generating…" : "Run AI"}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/AuthFields.tsx b/components/AuthFields.tsx
new file mode 100644
index 0000000..f8639ba
--- /dev/null
+++ b/components/AuthFields.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { useState, type FocusEvent } from "react";
+import styles from "./AuthShell.module.css";
+
+function clearAutofillOnFocus(event: FocusEvent<HTMLInputElement>) {
+  event.currentTarget.removeAttribute("readonly");
+}
+
+export function AuthField({
+  label,
+  type = "text",
+  name,
+  placeholder,
+  autoComplete,
+  required,
+  disabled,
+  dir,
+}: {
+  label: string;
+  type?: string;
+  name: string;
+  placeholder?: string;
+  autoComplete?: string;
+  required?: boolean;
+  disabled?: boolean;
+  dir?: "ltr" | "rtl" | "auto";
+}) {
+  return (
+    <label className={styles.field}>
+      <span>{label}</span>
+      <input
+        type={type}
+        name={name}
+        placeholder={placeholder}
+        autoComplete={autoComplete ?? "off"}
+        required={required}
+        disabled={disabled}
+        dir={dir}
+        defaultValue=""
+        readOnly
+        onFocus={clearAutofillOnFocus}
+      />
+    </label>
+  );
+}
+
+export function AuthPasswordField({
+  label,
+  name,
+  autoComplete,
+  required,
+  disabled,
+}: {
+  label: string;
+  name: string;
+  autoComplete?: string;
+  required?: boolean;
+  disabled?: boolean;
+}) {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div className={styles.passwordWrap}>
+      <label className={styles.field}>
+        <span>{label}</span>
+        <input
+          type={visible ? "text" : "password"}
+          name={name}
+          autoComplete={autoComplete ?? "off"}
+          required={required}
+          disabled={disabled}
+          minLength={8}
+          defaultValue=""
+          readOnly
+          onFocus={clearAutofillOnFocus}
+        />
+      </label>
+      <button
+        type="button"
+        className={styles.eyeBtn}
+        aria-label={visible ? "Hide password" : "Show password"}
+        onClick={() => setVisible((v) => !v)}
+        disabled={disabled}
+      >
+        <img src="/images/icons/eye.svg" alt="" />
+      </button>
+    </div>
+  );
+}
diff --git a/components/AuthGuards.tsx b/components/AuthGuards.tsx
new file mode 100644
index 0000000..6318d28
--- /dev/null
+++ b/components/AuthGuards.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth, userCanAccessApp } from "@/components/AuthProvider";
+import { getAccessToken, getRefreshToken } from "@/lib/meshkee-api";
+import {
+  getCustomerDashboardOrigin,
+  hostAppFor,
+  type HostApp,
+} from "@/lib/host";
+
+function LoadingScreen({ message = "Loading" }: { message?: string }) {
+  return (
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "grid",
+        placeItems: "center",
+        background: "#f6f6f6",
+        fontSize: 12,
+        letterSpacing: "0.2em",
+        textTransform: "uppercase",
+        color: "#8e8e8e",
+        padding: 24,
+        textAlign: "center",
+      }}
+    >
+      {message}
+    </div>
+  );
+}
+
+const websiteUrl =
+  process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
+  "http://localhost:3000";
+
+function handoffToWebsite(next: string) {
+  try {
+    const target = new URL(next);
+    if (target.origin !== new URL(websiteUrl).origin) return false;
+    const access = getAccessToken();
+    const refresh = getRefreshToken();
+    if (!access || !refresh) return false;
+    const hash = new URLSearchParams({
+      access,
+      refresh,
+      next: `${target.pathname}${target.search}${target.hash}` || "/register",
+    }).toString();
+    window.location.replace(`${target.origin}/auth/handoff#${hash}`);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function ProtectedRoute({
+  children,
+  requiredApp,
+}: {
+  children: React.ReactNode;
+  requiredApp?: HostApp;
+}) {
+  const { user, isLoading } = useAuth();
+  const router = useRouter();
+  const app =
+    requiredApp ??
+    hostAppFor(typeof window !== "undefined" ? window.location.host : "");
+
+  useEffect(() => {
+    if (isLoading) return;
+    if (!user) {
+      if (app === "business") {
+        // Do not auto-bounce to admin (that was the manage-business loop).
+        // Owners can sign in on the customer host.
+        const params = new URLSearchParams(window.location.search);
+        if (params.has("businessId")) {
+          return;
+        }
+        window.location.replace(`${getCustomerDashboardOrigin()}/login`);
+        return;
+      }
+      router.replace("/login");
+      return;
+    }
+    if (!userCanAccessApp(user, app)) {
+      if (app === "admin") {
+        window.location.replace(`${getCustomerDashboardOrigin()}/`);
+        return;
+      }
+      router.replace("/login");
+    }
+  }, [isLoading, user, router, app]);
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  if (!user) {
+    if (
+      app === "business" &&
+      typeof window !== "undefined" &&
+      new URLSearchParams(window.location.search).has("businessId")
+    ) {
+      return (
+        <LoadingScreen message="Could not open this business. Go back and use Manage business again." />
+      );
+    }
+    return <LoadingScreen message="Opening…" />;
+  }
+
+  if (!userCanAccessApp(user, app)) {
+    return <LoadingScreen />;
+  }
+
+  return children;
+}
+
+export function GuestRoute({ children }: { children: React.ReactNode }) {
+  const { user, isLoading } = useAuth();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (isLoading || !user) return;
+
+    const nextParam = new URLSearchParams(window.location.search).get("next");
+    if (nextParam && handoffToWebsite(nextParam)) return;
+
+    const app = hostAppFor(window.location.host);
+    if (app === "admin") {
+      router.replace("/");
+      return;
+    }
+    if (app === "business") {
+      router.replace("/profile");
+      return;
+    }
+    router.replace("/");
+  }, [isLoading, user, router]);
+
+  if (isLoading) return <LoadingScreen />;
+  if (user) return null;
+
+  return children;
+}
diff --git a/components/AuthProvider.tsx b/components/AuthProvider.tsx
new file mode 100644
index 0000000..2be7150
--- /dev/null
+++ b/components/AuthProvider.tsx
@@ -0,0 +1,278 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { ApiError, getAccessToken, isAbortError, migrateTokensToSharedCookies } from "@/lib/meshkee-api";
+import {
+  getAdminDashboardOrigin,
+  getCustomerDashboardOrigin,
+  hostAppFor,
+  type HostApp,
+} from "@/lib/host";
+import {
+  clearManagedBusinessId,
+  getManagedBusinessId,
+  setManagedBusinessId,
+} from "@/lib/managed-business";
+import {
+  fetchCurrentUser,
+  login as loginRequest,
+  logout as logoutRequest,
+  register as registerRequest,
+  type RegisterPayload,
+} from "@/services/auth";
+import type { AuthUser, DashboardType } from "@/types/auth";
+
+interface AuthContextValue {
+  user: AuthUser | null;
+  isLoading: boolean;
+  activeBusinessId: string | null;
+  isBusinessOwner: boolean;
+  isSuperAdmin: boolean;
+  login: (cellNumber: string, password: string) => Promise<DashboardType>;
+  register: (payload: RegisterPayload) => Promise<DashboardType>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function pickActiveBusinessId(user: AuthUser): string | null {
+  const owned = user.businesses.find((item) => item.isOwner);
+  const first = owned ?? user.businesses[0];
+  return first ? String(first.id) : null;
+}
+
+export function userCanAccessApp(user: AuthUser, app: HostApp): boolean {
+  if (app === "admin") return user.dashboard === "super_admin";
+  if (app === "customer") {
+    // Shared entry: customer, business owners, and superadmins all land here first.
+    return (
+      user.dashboard === "customer" ||
+      user.dashboard === "business" ||
+      user.dashboard === "super_admin"
+    );
+  }
+  // Business dashboard: owners/staff, or superadmin (via managed business id).
+  if (user.dashboard === "super_admin") return true;
+  return Boolean(pickActiveBusinessId(user));
+}
+
+function currentHost(): string {
+  if (typeof window === "undefined") return "";
+  return window.location.host;
+}
+
+/** Prefer ?businessId= on the URL, then stored managed id. */
+function syncManagedBusinessFromUrl() {
+  if (typeof window === "undefined") return getManagedBusinessId();
+  const fromUrl = new URLSearchParams(window.location.search)
+    .get("businessId")
+    ?.trim();
+  if (fromUrl) {
+    setManagedBusinessId(fromUrl);
+    return fromUrl;
+  }
+  return getManagedBusinessId();
+}
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [managedBusinessId, setManagedBusinessIdState] = useState<string | null>(
+    null,
+  );
+
+  const logout = useCallback(() => {
+    logoutRequest();
+    clearManagedBusinessId();
+    setManagedBusinessIdState(null);
+    setUser(null);
+  }, []);
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    async function init() {
+      // Handoff installs tokens via inline script and redirects — don't race it.
+      if (
+        typeof window !== "undefined" &&
+        window.location.pathname === "/auth/handoff"
+      ) {
+        if (!controller.signal.aborted) setIsLoading(false);
+        return;
+      }
+
+      migrateTokensToSharedCookies();
+      setManagedBusinessIdState(syncManagedBusinessFromUrl());
+
+      if (!getAccessToken()) {
+        if (!controller.signal.aborted) setIsLoading(false);
+        return;
+      }
+
+      try {
+        const { user: currentUser } = await fetchCurrentUser(controller.signal);
+        if (controller.signal.aborted) return;
+
+        const app = hostAppFor(currentHost());
+        if (!userCanAccessApp(currentUser, app)) {
+          logout();
+          return;
+        }
+
+        const managed = syncManagedBusinessFromUrl();
+        setManagedBusinessIdState(managed);
+        setUser(currentUser);
+      } catch (err) {
+        if (isAbortError(err) || controller.signal.aborted) return;
+        // On business host, keep tokens so a transient /me failure doesn't
+        // bounce manage-business back to admin.
+        if (hostAppFor(currentHost()) === "business") {
+          if (!controller.signal.aborted) setIsLoading(false);
+          return;
+        }
+        logout();
+      } finally {
+        if (!controller.signal.aborted) setIsLoading(false);
+      }
+    }
+
+    void init();
+    return () => controller.abort();
+  }, [logout]);
+
+  const login = useCallback(async (cellNumber: string, password: string) => {
+    const data = await loginRequest(cellNumber, password);
+    const app = hostAppFor(currentHost());
+
+    if (!userCanAccessApp(data.user, app)) {
+      logoutRequest();
+      const message =
+        app === "admin"
+          ? "This account does not have super admin access."
+          : app === "business"
+            ? "No business is linked to this account."
+            : "This account cannot use the customer dashboard.";
+      throw new ApiError(message, 403);
+    }
+
+    if (app === "business" && data.user.dashboard === "super_admin") {
+      const managed = syncManagedBusinessFromUrl();
+      setManagedBusinessIdState(managed);
+      if (!managed && !pickActiveBusinessId(data.user)) {
+        logoutRequest();
+        throw new ApiError(
+          "Open a business from the admin dashboard and use Manage business.",
+          403,
+        );
+      }
+    }
+
+    setManagedBusinessIdState(syncManagedBusinessFromUrl());
+    setUser(data.user);
+    return data.user.dashboard;
+  }, []);
+
+  const register = useCallback(async (payload: RegisterPayload) => {
+    const data = await registerRequest(payload);
+
+    if (!data.accessToken || !data.refreshToken || !data.user) {
+      throw new ApiError(
+        data.message ||
+          "Registration needs phone verification before you can continue.",
+        403,
+      );
+    }
+
+    const app = hostAppFor(currentHost());
+    if (!userCanAccessApp(data.user, app)) {
+      logoutRequest();
+      throw new ApiError(
+        "This account cannot use the customer dashboard.",
+        403,
+      );
+    }
+
+    setManagedBusinessIdState(syncManagedBusinessFromUrl());
+    setUser(data.user);
+    return data.user.dashboard;
+  }, []);
+
+  const isSuperAdmin = user?.dashboard === "super_admin";
+
+  /**
+   * Shared business.* host — which Meshkee business?
+   * - Superadmin: managed id from “Manage business” handoff (required for other businesses)
+   * - Everyone else: first owned / linked business on the user
+   */
+  const activeBusinessId = useMemo(() => {
+    if (!user) return null;
+    if (user.dashboard === "super_admin") {
+      return managedBusinessId || pickActiveBusinessId(user);
+    }
+    return pickActiveBusinessId(user);
+  }, [user, managedBusinessId]);
+
+  const isBusinessOwner = useMemo(
+    () => Boolean(user?.businesses.some((item) => item.isOwner)),
+    [user],
+  );
+
+  const value = useMemo(
+    () => ({
+      user,
+      isLoading,
+      activeBusinessId,
+      isBusinessOwner,
+      isSuperAdmin: Boolean(isSuperAdmin),
+      login,
+      register,
+      logout,
+    }),
+    [
+      user,
+      isLoading,
+      activeBusinessId,
+      isBusinessOwner,
+      isSuperAdmin,
+      login,
+      register,
+      logout,
+    ],
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within AuthProvider");
+  }
+  return context;
+}
+
+/**
+ * After login: stay on the host you signed into.
+ * Superadmin can open the admin dashboard from customer home when needed.
+ */
+export function postLoginHref(dashboard: DashboardType): string {
+  const app = hostAppFor(currentHost());
+
+  if (app === "admin") {
+    return dashboard === "super_admin" ? "/" : `${getCustomerDashboardOrigin()}/`;
+  }
+
+  if (app === "business") return "/profile";
+  if (app === "customer") return "/";
+
+  if (dashboard === "super_admin") return `${getAdminDashboardOrigin()}/`;
+  return `${getCustomerDashboardOrigin()}/`;
+}
diff --git a/components/AuthShell.module.css b/components/AuthShell.module.css
new file mode 100644
index 0000000..fcaac40
--- /dev/null
+++ b/components/AuthShell.module.css
@@ -0,0 +1,352 @@
+.page {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 40px var(--page-pad);
+  background-color: #f6f6f6;
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+}
+
+.card {
+  position: relative;
+  width: min(100%, 1148px);
+  min-height: 660px;
+  display: grid;
+  grid-template-columns: minmax(220px, 344px) minmax(0, 1fr);
+  grid-template-rows: 1fr;
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 33px 25px 29.7px -14px rgba(0, 0, 0, 0.03);
+  overflow: visible;
+}
+
+.visual {
+  position: relative;
+  align-self: stretch;
+  background: #efefef;
+  border-radius: 5px 0 0 5px;
+  overflow: visible;
+}
+
+.ship {
+  position: absolute;
+  left: 8%;
+  bottom: 0;
+  width: auto;
+  height: 72%;
+  max-width: none;
+  object-fit: contain;
+  object-position: left bottom;
+  pointer-events: none;
+  z-index: 2;
+  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.12));
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+  align-self: stretch;
+  display: grid;
+  place-items: center;
+  padding: 48px 40px;
+  min-width: 0;
+  border-radius: 0 5px 5px 0;
+}
+
+.contentInner {
+  width: min(100%, 468px);
+  display: flex;
+  flex-direction: column;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 28px;
+  width: 100%;
+}
+
+.brand img {
+  width: 69px;
+  height: 69px;
+  object-fit: contain;
+}
+
+.brandText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  text-transform: uppercase;
+}
+
+.brandText span {
+  font-size: 18px;
+  font-weight: 400;
+}
+
+.brandText strong {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  width: 100%;
+}
+
+.field {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: 46px;
+  padding: 14px 14px 10px;
+  border: 1px solid #f6f6f6;
+  border-radius: 5px;
+  background: #fff;
+  transition: border-color 0.25s ease;
+}
+
+.field span {
+  position: absolute;
+  top: -8px;
+  left: 12px;
+  background: #fff;
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-body);
+  transition: color 0.25s ease;
+}
+
+.field:focus-within {
+  border-color: var(--color-black);
+}
+
+.field:focus-within span {
+  color: var(--color-black);
+}
+
+.field input {
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 16px;
+  font-weight: 400;
+  width: 100%;
+  color: var(--color-black);
+}
+
+.passwordWrap {
+  position: relative;
+}
+
+.passwordWrap .field {
+  padding-right: 40px;
+}
+
+.eyeBtn {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  width: 18px;
+  height: 18px;
+  display: grid;
+  place-items: center;
+  opacity: 0.55;
+}
+
+.eyeBtn img {
+  width: 14px;
+  height: 14px;
+  object-fit: contain;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-top: 4px;
+}
+
+.secondaryBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 29px;
+  padding: 0 4px;
+  border: 0;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #6a6a6a;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-thickness: 1px;
+  transition: color 0.2s ease;
+}
+
+.secondaryBtn:hover,
+.secondaryBtn:focus-visible {
+  color: var(--color-black);
+}
+
+.secondaryBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.primaryBtn {
+  min-width: 107px;
+  min-height: 29px;
+  margin-left: auto;
+  padding: 0 18px;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+}
+
+.error {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 5px;
+  background: #f6f6f6;
+  border: 1px solid #e8e8e8;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.45;
+  color: #4a4a4a;
+  width: 100%;
+}
+
+.note {
+  margin-top: 28px;
+  font-size: 10.5px;
+  font-weight: 400;
+  color: #8e8e8e;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+.note a,
+.noteLink {
+  color: #8e8e8e;
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+
+.note a:hover,
+.noteLink:hover {
+  color: var(--color-black);
+}
+
+.hint {
+  margin: 0 0 4px;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #8e8e8e;
+}
+
+.note em {
+  font-style: normal;
+  color: #cacaca;
+}
+
+.rule {
+  border: 0;
+  border-top: 1px solid #ececec;
+  margin: 20px 0 14px;
+  width: 100%;
+}
+
+.links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  font-size: 10px;
+  font-weight: 400;
+  color: #8e8e8e;
+  width: 100%;
+}
+
+.links a {
+  color: inherit;
+}
+
+.socials {
+  margin-top: 16px;
+  display: flex;
+  justify-content: center;
+  gap: 18px;
+  width: 100%;
+}
+
+.socials img {
+  object-fit: contain;
+}
+
+@media (max-width: 900px) {
+  .card {
+    grid-template-columns: 1fr;
+    min-height: auto;
+  }
+
+  .visual {
+    min-height: 220px;
+    border-radius: 5px 5px 0 0;
+  }
+
+  .ship {
+    left: 50%;
+    bottom: 0;
+    transform: translateX(-50%);
+    width: auto;
+    height: 88%;
+  }
+
+  .content {
+    padding: 32px 24px 28px;
+    border-radius: 0 0 5px 5px;
+  }
+
+  .brand,
+  .form,
+  .note,
+  .rule,
+  .links,
+  .socials {
+    width: 100%;
+  }
+
+  .actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .secondaryBtn,
+  .primaryBtn {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .secondaryBtn {
+    justify-content: center;
+  }
+}
diff --git a/components/AuthShell.tsx b/components/AuthShell.tsx
new file mode 100644
index 0000000..b53079e
--- /dev/null
+++ b/components/AuthShell.tsx
@@ -0,0 +1,83 @@
+import type { ReactNode } from "react";
+import styles from "./AuthShell.module.css";
+
+const websiteUrl =
+  process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
+  "http://localhost:3000";
+
+export default function AuthShell({
+  titleLine1,
+  titleLine2,
+  children,
+  footerNote,
+}: {
+  titleLine1: string;
+  titleLine2: string;
+  children: ReactNode;
+  footerNote?: ReactNode;
+}) {
+  return (
+    <div className={styles.page}>
+      <div className={styles.card}>
+        <div className={styles.visual}>
+          <img className={styles.ship} src="/images/auth/ship.png" alt="" />
+        </div>
+
+        <div className={styles.content}>
+          <div className={styles.contentInner}>
+            <div className={styles.brand}>
+              <img src="/images/icons/logo.png" alt="" width={69} height={69} />
+              <div className={styles.brandText}>
+                <span>{titleLine1}</span>
+                <strong>{titleLine2}</strong>
+              </div>
+            </div>
+
+            {children}
+
+            {footerNote ? <div className={styles.note}>{footerNote}</div> : null}
+
+            <hr className={styles.rule} />
+
+            <nav className={styles.links} aria-label="Auth footer">
+              <a href={`${websiteUrl}/businesses`}>Categories</a>
+              <span>|</span>
+              <a href={`${websiteUrl}/#vision`}>Vision</a>
+              <span>|</span>
+              <a href={`${websiteUrl}/about`}>About us</a>
+              <span>|</span>
+              <a href={`${websiteUrl}/contact`}>Contact us</a>
+            </nav>
+
+            <div className={styles.socials}>
+              <a href="https://instagram.com" aria-label="Instagram">
+                <img
+                  src="/images/icons/instagram.png"
+                  alt=""
+                  width={20}
+                  height={20}
+                />
+              </a>
+              <a href="https://telegram.org" aria-label="Telegram">
+                <img
+                  src="/images/icons/telegram.png"
+                  alt=""
+                  width={20}
+                  height={20}
+                />
+              </a>
+              <a href="https://facebook.com" aria-label="Facebook">
+                <img
+                  src="/images/icons/facebook.png"
+                  alt=""
+                  width={16}
+                  height={16}
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/BlogCategoriesPage.tsx b/components/BlogCategoriesPage.tsx
new file mode 100644
index 0000000..d92ec59
--- /dev/null
+++ b/components/BlogCategoriesPage.tsx
@@ -0,0 +1,444 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import CategoryTreeSelect from "@/components/CategoryTreeSelect";
+import CategoryTreeView, {
+  type CategoryTreeNode,
+} from "@/components/CategoryTreeView";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import type { MeshkeeCategory } from "@/services/meshkee-categories";
+import {
+  createWebsiteBlogCategory,
+  deleteWebsiteBlogCategory,
+  listWebsiteBlogCategories,
+  updateWebsiteBlogCategory,
+  type WebsiteBlogCategory,
+} from "@/services/website-blog";
+import styles from "./BusinessCategoriesPage.module.css";
+
+type Draft = {
+  id?: string;
+  parentId: string;
+  name: string;
+  nameFa: string;
+  description: string;
+};
+
+function emptyDraft(parentId = ""): Draft {
+  return {
+    parentId,
+    name: "",
+    nameFa: "",
+    description: "",
+  };
+}
+
+function categoryLabel(category: {
+  name: string;
+  nameFa?: string | null;
+}) {
+  if (category.nameFa && category.nameFa !== category.name) {
+    return `${category.name} / ${category.nameFa}`;
+  }
+  return category.name;
+}
+
+function toTreeSelect(items: WebsiteBlogCategory[]): MeshkeeCategory[] {
+  return items.map((item) => ({
+    id: item.id,
+    parentId: item.parentId,
+    name: item.name,
+    nameFa: item.nameFa ?? null,
+    slug: "",
+    description: item.description ?? null,
+    icon: null,
+    sortOrder: 0,
+    tags: [],
+  }));
+}
+
+function toViewNodes(items: WebsiteBlogCategory[]): CategoryTreeNode[] {
+  const byId = new Map<string, CategoryTreeNode>();
+  for (const item of items) {
+    byId.set(item.id, {
+      id: item.id,
+      name: categoryLabel(item),
+      children: [],
+    });
+  }
+  const roots: CategoryTreeNode[] = [];
+  for (const item of items) {
+    const node = byId.get(item.id)!;
+    if (item.parentId && byId.has(item.parentId)) {
+      byId.get(item.parentId)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+  const sortNodes = (nodes: CategoryTreeNode[]) => {
+    nodes.sort((a, b) =>
+      a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+    );
+    for (const node of nodes) sortNodes(node.children);
+  };
+  sortNodes(roots);
+  return roots;
+}
+
+function collectDescendantIds(
+  rootId: string,
+  items: WebsiteBlogCategory[],
+): Set<string> {
+  const childrenByParent = new Map<string, string[]>();
+  for (const item of items) {
+    if (!item.parentId) continue;
+    const list = childrenByParent.get(item.parentId) ?? [];
+    list.push(item.id);
+    childrenByParent.set(item.parentId, list);
+  }
+  const result = new Set<string>([rootId]);
+  const queue = [rootId];
+  while (queue.length) {
+    const current = queue.shift()!;
+    for (const childId of childrenByParent.get(current) ?? []) {
+      if (!result.has(childId)) {
+        result.add(childId);
+        queue.push(childId);
+      }
+    }
+  }
+  return result;
+}
+
+export default function BlogCategoriesPage() {
+  const [categories, setCategories] = useState<WebsiteBlogCategory[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const [draft, setDraft] = useState<Draft | null>(null);
+  const [removing, setRemoving] = useState<WebsiteBlogCategory | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+  const tree = useMemo(() => toViewNodes(categories), [categories]);
+  const byId = useMemo(() => {
+    const map = new Map<string, WebsiteBlogCategory>();
+    for (const item of categories) map.set(item.id, item);
+    return map;
+  }, [categories]);
+
+  const parentOptions = useMemo(() => {
+    const draftId = draft?.id;
+    const source = !draftId
+      ? categories
+      : categories.filter(
+          (item) => !collectDescendantIds(draftId, categories).has(item.id),
+        );
+    return toTreeSelect(source);
+  }, [categories, draft?.id]);
+
+  const reload = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      setCategories(await listWebsiteBlogCategories());
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not load categories.",
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  function openCreate(parentId = "") {
+    setDraft(emptyDraft(parentId));
+    setError("");
+  }
+
+  function openEdit(id: string) {
+    const category = byId.get(id);
+    if (!category) return;
+    setDraft({
+      id: category.id,
+      parentId: category.parentId ?? "",
+      name: category.name,
+      nameFa: category.nameFa ?? "",
+      description: category.description ?? "",
+    });
+    setError("");
+  }
+
+  async function saveDraft() {
+    if (!draft) return;
+    if (!draft.name.trim()) {
+      setError("Enter an English name.");
+      return;
+    }
+    setSaving(true);
+    setError("");
+    try {
+      const body = {
+        parentId: draft.parentId || null,
+        name: draft.name.trim(),
+        nameFa: draft.nameFa.trim(),
+        description: draft.description.trim(),
+      };
+      if (draft.id) {
+        await updateWebsiteBlogCategory(draft.id, body);
+      } else {
+        await createWebsiteBlogCategory(body);
+      }
+      setDraft(null);
+      await reload();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not save category.",
+      );
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function confirmRemove() {
+    if (!removing) return;
+    setRemoveBusy(true);
+    setError("");
+    try {
+      await deleteWebsiteBlogCategory(removing.id);
+      setRemoving(null);
+      await reload();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not remove category.",
+      );
+    } finally {
+      setRemoveBusy(false);
+    }
+  }
+
+  const removingName = removing ? categoryLabel(removing) : "this category";
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <div>
+          <nav className={styles.breadcrumb} aria-label="Breadcrumb">
+            <Link href="/">Home</Link>
+            <span className={styles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <Link href="/website/blog">Blog</Link>
+            <span className={styles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <span className={styles.breadcrumbCurrent}>Categories</span>
+          </nav>
+          <h1 className={styles.title}>Categories</h1>
+          <p className={styles.lead}>
+            Blog categories. Add, edit, or remove the tree.
+          </p>
+        </div>
+        <div className={styles.headActions}>
+          <p className={styles.count}>
+            {loading ? "Loading…" : `${categories.length} categories`}
+          </p>
+          <button
+            type="button"
+            className={`outline-btn ${styles.addBtn}`}
+            onClick={() => openCreate()}
+          >
+            Add category
+          </button>
+        </div>
+      </header>
+
+      {error ? (
+        <p className={styles.error} role="alert">
+          {error}
+        </p>
+      ) : null}
+
+      <section className={styles.card}>
+        {loading ? <p className={styles.empty}>Loading categories…</p> : null}
+        {!loading ? (
+          <CategoryTreeView
+            nodes={tree}
+            actions={{
+              onAddChild: openCreate,
+              onEdit: openEdit,
+              onRemove: (id) => {
+                const category = byId.get(id);
+                if (category) setRemoving(category);
+              },
+            }}
+          />
+        ) : null}
+      </section>
+
+      {draft ? (
+        <div
+          className={styles.overlay}
+          role="presentation"
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget && !saving) {
+              setDraft(null);
+            }
+          }}
+        >
+          <div
+            className={styles.modal}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="blog-category-draft-title"
+          >
+            <div className={styles.modalHead}>
+              <div>
+                <p className={styles.kicker}>Categories</p>
+                <h2 id="blog-category-draft-title" className={styles.modalTitle}>
+                  {draft.id ? "Edit category" : "Add category"}
+                </h2>
+              </div>
+              <button
+                type="button"
+                className={styles.closeBtn}
+                aria-label="Close"
+                disabled={saving}
+                onClick={() => setDraft(null)}
+              >
+                ×
+              </button>
+            </div>
+
+            <form
+              className={styles.form}
+              onSubmit={(event) => {
+                event.preventDefault();
+                void saveDraft();
+              }}
+            >
+              <CategoryTreeSelect
+                categories={parentOptions}
+                value={draft.parentId ? [draft.parentId] : []}
+                selection="single"
+                label="Parent"
+                placeholder="Top level"
+                disabled={saving}
+                onChange={(ids) =>
+                  setDraft((current) =>
+                    current
+                      ? { ...current, parentId: ids[0] ?? "" }
+                      : current,
+                  )
+                }
+              />
+              {draft.parentId ? (
+                <button
+                  type="button"
+                  className={styles.clearParent}
+                  disabled={saving}
+                  onClick={() =>
+                    setDraft((current) =>
+                      current ? { ...current, parentId: "" } : current,
+                    )
+                  }
+                >
+                  Top level
+                </button>
+              ) : null}
+
+              <label className={styles.field}>
+                <span>Name EN</span>
+                <input
+                  value={draft.name}
+                  disabled={saving}
+                  required
+                  autoFocus
+                  onChange={(event) =>
+                    setDraft((current) =>
+                      current
+                        ? { ...current, name: event.target.value }
+                        : current,
+                    )
+                  }
+                />
+              </label>
+
+              <label className={styles.field}>
+                <span>Name FA</span>
+                <input
+                  className="fa"
+                  lang="fa"
+                  dir="rtl"
+                  value={draft.nameFa}
+                  disabled={saving}
+                  onChange={(event) =>
+                    setDraft((current) =>
+                      current
+                        ? { ...current, nameFa: event.target.value }
+                        : current,
+                    )
+                  }
+                />
+              </label>
+
+              <label className={styles.field}>
+                <span>Description</span>
+                <textarea
+                  rows={3}
+                  value={draft.description}
+                  disabled={saving}
+                  onChange={(event) =>
+                    setDraft((current) =>
+                      current
+                        ? { ...current, description: event.target.value }
+                        : current,
+                    )
+                  }
+                />
+              </label>
+
+              <div className={styles.modalActions}>
+                <button
+                  type="button"
+                  className={`outline-btn ${styles.ghostBtn}`}
+                  disabled={saving}
+                  onClick={() => setDraft(null)}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className={`outline-btn ${styles.addBtn}`}
+                  disabled={saving}
+                >
+                  {saving ? "Saving…" : draft.id ? "Update" : "Add"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
+
+      <ConfirmDialog
+        open={Boolean(removing)}
+        kicker="Remove category"
+        title={`Remove ${removingName}?`}
+        message="This category and its subcategories will be removed."
+        confirmLabel="Remove"
+        cancelLabel="Keep"
+        danger
+        busy={removeBusy}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+        onConfirm={() => {
+          void confirmRemove();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/components/BusinessCardList.module.css b/components/BusinessCardList.module.css
new file mode 100644
index 0000000..5d74297
--- /dev/null
+++ b/components/BusinessCardList.module.css
@@ -0,0 +1,584 @@
+.grid {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  height: 100%;
+  background: transparent;
+  cursor: pointer;
+}
+
+.card:has(.moreWrapOpen),
+.card:has(.moreWrap:hover),
+.card:has(.moreWrap:focus-within) {
+  z-index: 5;
+}
+
+.coverWrap {
+  position: relative;
+  height: 168px;
+  overflow: hidden;
+  border-radius: 5px 5px 0 0;
+  background: var(--color-card);
+}
+
+.cover {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.coverFallback {
+  width: 100%;
+  height: 100%;
+  background-color: #e8e8e8;
+}
+
+.status {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 2;
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  padding: 5px 9px;
+  border-radius: 3px;
+  background: rgba(246, 246, 246, 0.92);
+  color: var(--color-black);
+}
+
+.statusLive {
+  background: #111;
+  color: #fff;
+}
+
+.statusReview {
+  background: rgba(232, 232, 232, 0.95);
+}
+
+.statusDraft,
+.statusHidden,
+.statusRejected {
+  color: var(--color-soft);
+}
+
+.body {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-card);
+  border-top: 0;
+  border-radius: 0 0 5px 5px;
+  padding: 0;
+  background: var(--color-white);
+  overflow: visible;
+}
+
+.body:has(.moreWrapOpen),
+.body:has(.moreWrap:hover),
+.body:has(.moreWrap:focus-within) {
+  z-index: 4;
+}
+
+.info {
+  position: relative;
+  z-index: 2;
+  margin: -40px 18px 0;
+  background: var(--color-card);
+  border-radius: 5px;
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+}
+
+/* Keep logo / name readable while the body wipe fills behind them */
+.body:global(.tile-hover):hover .info .name,
+.body:global(.tile-hover):focus-within .info .name {
+  color: var(--color-black);
+}
+
+.body:global(.tile-hover):hover .info .tagline,
+.body:global(.tile-hover):focus-within .info .tagline {
+  color: var(--color-soft);
+}
+
+.body:global(.tile-hover):hover .info .logoMark,
+.body:global(.tile-hover):focus-within .info .logoMark {
+  color: var(--color-muted);
+}
+
+.identity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.logo {
+  width: auto;
+  height: 52px;
+  max-width: min(160px, 42%);
+  object-fit: contain;
+  object-position: left center;
+  flex-shrink: 0;
+  border-radius: 4px;
+  background: transparent;
+}
+
+.logoMark {
+  width: 52px;
+  height: 52px;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  border-radius: 4px;
+  background: var(--color-white);
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  color: var(--color-muted);
+}
+
+.copy {
+  min-width: 0;
+}
+
+.name {
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+  line-height: 1.25;
+}
+
+.tagline {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-soft);
+  margin-top: 3px;
+  transition: color 0.25s ease;
+}
+
+.bottom {
+  position: relative;
+  z-index: 1;
+  margin-top: auto;
+  padding: 14px 18px 16px;
+  border-radius: 0 0 5px 5px;
+  overflow: visible;
+}
+
+.bottom:has(.moreWrapOpen),
+.bottom:has(.moreWrap:hover),
+.bottom:has(.moreWrap:focus-within) {
+  z-index: 6;
+}
+
+.foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.slug {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  color: var(--color-body);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.featured {
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-black);
+}
+
+.moreItemSpecial {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--color-muted);
+}
+
+.body:global(.tile-hover):hover .moreItemSpecial,
+.body:global(.tile-hover):focus-within .moreItemSpecial,
+.body:hover .moreItemSpecial,
+.body:focus-within .moreItemSpecial {
+  color: var(--color-muted);
+}
+
+.body:global(.tile-hover):hover .moreItemSpecial:hover,
+.body:global(.tile-hover):focus-within .moreItemSpecial:hover,
+.body:global(.tile-hover):hover .moreItemSpecial:focus-visible,
+.body:global(.tile-hover):focus-within .moreItemSpecial:focus-visible,
+.moreItemSpecial:hover,
+.moreItemSpecial:focus-visible {
+  color: var(--color-black);
+}
+
+.specialChip {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 18px;
+  height: 18px;
+  margin-left: 10px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--color-black);
+  color: var(--color-white);
+  font-style: normal;
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.body:global(.tile-hover):hover .specialChip,
+.body:global(.tile-hover):focus-within .specialChip,
+.body:hover .specialChip,
+.body:focus-within .specialChip,
+.moreItemSpecial:hover .specialChip,
+.moreItemSpecial:focus-visible .specialChip,
+.body:global(.tile-hover):hover .moreItemSpecial:hover .specialChip,
+.body:global(.tile-hover):focus-within .moreItemSpecial:hover .specialChip {
+  background: var(--color-black);
+  color: var(--color-white);
+}
+
+.controls {
+  margin-top: 12px;
+  padding-top: 14px;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0;
+  border-top: 1px solid #f0f0f0;
+  overflow: visible;
+}
+
+.control {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 0 8px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  text-decoration: none;
+  cursor: pointer;
+  line-height: 1.4;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: color 0.2s ease;
+}
+
+.control + .control {
+  border-left: 1px solid #e4e4e4;
+}
+
+.control:hover,
+.control:focus-visible {
+  color: var(--color-black);
+}
+
+.body:hover .control,
+.body:focus-within .control,
+.body:hover .control:hover,
+.body:focus-within .control:hover,
+.body:hover .control:focus-visible,
+.body:focus-within .control:focus-visible,
+.body:hover .controlAccent,
+.body:focus-within .controlAccent,
+.body:hover .slug,
+.body:focus-within .slug,
+.body:hover .featured,
+.body:focus-within .featured {
+  color: var(--color-white);
+}
+
+.body:hover .controls,
+.body:focus-within .controls {
+  border-top-color: rgba(255, 255, 255, 0.2);
+}
+
+.body:hover .control + .control,
+.body:focus-within .control + .control {
+  border-left-color: rgba(255, 255, 255, 0.22);
+}
+
+.body:hover .moreWrap::before,
+.body:focus-within .moreWrap::before {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.body:hover .moreTrigger img,
+.body:focus-within .moreTrigger img {
+  opacity: 1;
+  filter: brightness(0) invert(1);
+}
+
+.control:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.controlAccent {
+  color: var(--color-muted);
+}
+
+.controlPrimary {
+  color: var(--color-black);
+  font-weight: 400;
+}
+
+.moreWrap {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+}
+
+.moreWrapOpen,
+.moreWrap:hover,
+.moreWrap:focus-within {
+  z-index: 8;
+}
+
+.moreWrap::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: #e4e4e4;
+}
+
+/* Invisible bridge so the cursor can reach the menu without losing hover */
+.moreWrap::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  width: 148px;
+  height: 14px;
+}
+
+.moreTrigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-left: 0 !important;
+}
+
+.moreTrigger img {
+  width: 9px;
+  height: 9px;
+  object-fit: contain;
+  opacity: 0.55;
+  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
+}
+
+.moreWrap:hover .moreTrigger,
+.moreWrap:focus-within .moreTrigger,
+.moreWrapOpen .moreTrigger {
+  color: var(--color-black);
+}
+
+.body:hover .moreWrap:hover .moreTrigger,
+.body:focus-within .moreWrap:hover .moreTrigger,
+.body:hover .moreWrap:focus-within .moreTrigger,
+.body:focus-within .moreWrap:focus-within .moreTrigger,
+.body:hover .moreWrapOpen .moreTrigger,
+.body:focus-within .moreWrapOpen .moreTrigger {
+  color: var(--color-white);
+}
+
+.moreWrap:hover .moreTrigger img,
+.moreWrap:focus-within .moreTrigger img,
+.moreWrapOpen .moreTrigger img {
+  opacity: 1;
+  filter: brightness(0);
+}
+
+.body:hover .moreWrap:hover .moreTrigger img,
+.body:focus-within .moreWrap:hover .moreTrigger img,
+.body:hover .moreWrap:focus-within .moreTrigger img,
+.body:focus-within .moreWrap:focus-within .moreTrigger img,
+.body:hover .moreWrapOpen .moreTrigger img,
+.body:focus-within .moreWrapOpen .moreTrigger img {
+  filter: brightness(0) invert(1);
+}
+
+.moreMenu {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 6px);
+  z-index: 20;
+  min-width: 200px;
+  padding: 6px;
+  border: 1px solid #ececec;
+  border-radius: 5px;
+  background: var(--color-white);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(4px);
+  pointer-events: none;
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease,
+    visibility 0.16s ease;
+}
+
+.moreWrap:hover .moreMenu,
+.moreWrap:focus-within .moreMenu,
+.moreWrapOpen .moreMenu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.moreWrapOpen::after,
+.moreWrap:hover::after,
+.moreWrap:focus-within::after {
+  z-index: 7;
+}
+
+.moreItem {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 3px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+/* Beat global .tile-hover a { color: white } so Website stays readable */
+.body:global(.tile-hover):hover .moreItem,
+.body:global(.tile-hover):focus-within .moreItem,
+.body:hover .moreItem,
+.body:focus-within .moreItem {
+  color: var(--color-muted);
+}
+
+.moreItem:hover,
+.moreItem:focus-visible,
+.body:global(.tile-hover):hover .moreItem:hover,
+.body:global(.tile-hover):focus-within .moreItem:hover,
+.body:global(.tile-hover):hover .moreItem:focus-visible,
+.body:global(.tile-hover):focus-within .moreItem:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.moreItemDanger:hover,
+.moreItemDanger:focus-visible,
+.body:global(.tile-hover):hover .moreItemDanger:hover,
+.body:global(.tile-hover):focus-within .moreItemDanger:hover,
+.body:global(.tile-hover):hover .moreItemDanger:focus-visible,
+.body:global(.tile-hover):focus-within .moreItemDanger:focus-visible {
+  color: #b42318;
+  background: #fff5f4;
+}
+
+.moreItem:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.empty {
+  min-height: 280px;
+  border-radius: 5px;
+  background: var(--color-white);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 48px 28px;
+}
+
+.emptyTitle {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+}
+
+.emptyCopy {
+  margin-top: 12px;
+  max-width: 360px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.6;
+  color: var(--color-muted);
+}
+
+@media (max-width: 1280px) {
+  .grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 980px) {
+  .grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 560px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+
+  .controls {
+    gap: 8px 0;
+  }
+
+  .control {
+    padding: 0 8px;
+  }
+}
diff --git a/components/BusinessCardList.tsx b/components/BusinessCardList.tsx
new file mode 100644
index 0000000..70d0373
--- /dev/null
+++ b/components/BusinessCardList.tsx
@@ -0,0 +1,364 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { openBusinessDashboardAsAdmin } from "@/lib/session-handoff";
+import { getSpecialBusinesses } from "@/services/special-businesses";
+import type { BusinessStatus, MarketplaceBusiness } from "@/types/business";
+import styles from "./BusinessCardList.module.css";
+
+const STATUS_LABEL: Record<BusinessStatus, string> = {
+  draft: "Pending",
+  pending_review: "Pending",
+  published: "Published",
+  hidden: "Hidden",
+  rejected: "Rejected",
+};
+
+const websiteUrl =
+  process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
+  "http://localhost:3000";
+
+function statusClass(status: BusinessStatus) {
+  switch (status) {
+    case "published":
+      return styles.statusLive;
+    case "pending_review":
+    case "draft":
+      return styles.statusReview;
+    case "hidden":
+      return styles.statusHidden;
+    case "rejected":
+      return styles.statusRejected;
+    default:
+      return styles.statusReview;
+  }
+}
+
+function publicUrl(slug: string) {
+  return `${websiteUrl}/businesses/${slug}`;
+}
+
+export default function BusinessCardList({
+  items,
+  onApprove,
+  onDisable,
+  onRemove,
+  onMetaTag,
+  onMakeSpecial,
+  busyId,
+  specialTick = 0,
+  emptyTitle = "No businesses yet",
+  emptyCopy = "Marketplace listings will appear here once you link a Meshkee business.",
+}: {
+  items: MarketplaceBusiness[];
+  onApprove?: (business: MarketplaceBusiness) => void;
+  onDisable?: (business: MarketplaceBusiness) => void;
+  onRemove?: (business: MarketplaceBusiness) => void;
+  onMetaTag?: (business: MarketplaceBusiness) => void;
+  onMakeSpecial?: (business: MarketplaceBusiness) => void;
+  busyId?: string | null;
+  /** Bump to reload special-carousel membership chips */
+  specialTick?: number;
+  emptyTitle?: string;
+  emptyCopy?: string;
+}) {
+  const router = useRouter();
+  const [openMoreId, setOpenMoreId] = useState<string | null>(null);
+  const [specialCountByBusinessId, setSpecialCountByBusinessId] = useState<
+    Map<string, number>
+  >(() => new Map());
+  const moreRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+
+  useEffect(() => {
+    if (!openMoreId) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const root = moreRefs.current.get(openMoreId);
+      if (root && !root.contains(event.target as Node)) {
+        setOpenMoreId(null);
+      }
+    };
+    window.addEventListener("pointerdown", onPointerDown);
+    return () => window.removeEventListener("pointerdown", onPointerDown);
+  }, [openMoreId]);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const config = await getSpecialBusinesses();
+        if (cancelled) return;
+        const next = new Map<string, number>();
+        for (const carousel of config.carousels) {
+          for (const businessId of carousel.businessIds) {
+            next.set(businessId, (next.get(businessId) ?? 0) + 1);
+          }
+        }
+        setSpecialCountByBusinessId(next);
+      } catch {
+        if (!cancelled) setSpecialCountByBusinessId(new Map());
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [specialTick, items.length]);
+
+  if (items.length === 0) {
+    return (
+      <div className={styles.empty}>
+        <p className={styles.emptyTitle}>{emptyTitle}</p>
+        <p className={styles.emptyCopy}>{emptyCopy}</p>
+      </div>
+    );
+  }
+
+  return (
+    <ul className={styles.grid}>
+      {items.map((business) => {
+        const displayName = business.name || business.slug;
+        const category = business.categoryName || "Uncategorized";
+        const categoryTrail =
+          business.categoryTrail || business.categoryName || "Uncategorized";
+        const href = publicUrl(business.slug);
+        const showHref = `/businesses/${business.id}`;
+        const isHidden = business.status === "hidden";
+        const isPending =
+          business.status === "pending_review" ||
+          business.status === "draft";
+        const canPublish =
+          isPending || business.status === "rejected";
+        const isBusy = busyId === business.id;
+        const moreOpen = openMoreId === business.id;
+        const specialCount = specialCountByBusinessId.get(business.id) ?? 0;
+
+        function openShow() {
+          router.push(showHref);
+        }
+
+        return (
+          <li key={business.id}>
+            <article
+              className={styles.card}
+              role="link"
+              tabIndex={0}
+              aria-label={`Show ${displayName}`}
+              onClick={openShow}
+              onKeyDown={(event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                  event.preventDefault();
+                  openShow();
+                }
+              }}
+            >
+              <div className={styles.coverWrap}>
+                {business.bannerUrl ? (
+                  <img
+                    src={business.bannerUrl}
+                    alt=""
+                    className={styles.cover}
+                  />
+                ) : (
+                  <div className={styles.coverFallback} aria-hidden />
+                )}
+                <span
+                  className={`${styles.status} ${statusClass(business.status)}`}
+                >
+                  {STATUS_LABEL[business.status]}
+                </span>
+              </div>
+
+              <div className={`tile-hover ${styles.body}`}>
+                <div className={styles.info}>
+                  <div className={styles.identity}>
+                    {business.logoUrl ? (
+                      <img
+                        className={styles.logo}
+                        src={business.logoUrl}
+                        alt=""
+                        height={52}
+                      />
+                    ) : (
+                      <span className={styles.logoMark} aria-hidden>
+                        {displayName.slice(0, 1).toUpperCase()}
+                      </span>
+                    )}
+                    <div className={styles.copy}>
+                      <h2 className={styles.name}>{displayName}</h2>
+                      <p className={styles.tagline}>{category}</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className={styles.bottom}>
+                  <div className={styles.foot}>
+                    <span className={styles.slug}>{categoryTrail}</span>
+                    {business.isFeatured ? (
+                      <span className={styles.featured}>Featured</span>
+                    ) : null}
+                  </div>
+
+                  <div
+                    className={styles.controls}
+                    onClick={(event) => event.stopPropagation()}
+                    onKeyDown={(event) => event.stopPropagation()}
+                  >
+                    {canPublish && onApprove ? (
+                      <button
+                        type="button"
+                        className={`${styles.control} ${styles.controlPrimary}`}
+                        disabled={isBusy}
+                        onClick={() => onApprove(business)}
+                      >
+                        {isBusy ? "…" : "Approve"}
+                      </button>
+                    ) : null}
+                    <button
+                      type="button"
+                      className={styles.control}
+                      disabled={isBusy}
+                      onClick={() =>
+                        router.push(`/businesses/${business.id}/edit`)
+                      }
+                    >
+                      Edit
+                    </button>
+                    <button
+                      type="button"
+                      className={styles.control}
+                      disabled={isBusy || !business.meshkeeBusinessId}
+                      onClick={() =>
+                        openBusinessDashboardAsAdmin(
+                          business.meshkeeBusinessId,
+                          "/profile",
+                        )
+                      }
+                    >
+                      Manage
+                    </button>
+                    <button
+                      type="button"
+                      className={styles.control}
+                      disabled={isBusy}
+                      onClick={async () => {
+                        try {
+                          await navigator.clipboard.writeText(href);
+                        } catch {
+                          window.prompt("Copy link", href);
+                        }
+                      }}
+                    >
+                      Link
+                    </button>
+
+                    <div
+                      className={`${styles.moreWrap} ${moreOpen ? styles.moreWrapOpen : ""}`}
+                      ref={(node) => {
+                        if (node) moreRefs.current.set(business.id, node);
+                        else moreRefs.current.delete(business.id);
+                      }}
+                    >
+                      <button
+                        type="button"
+                        className={`${styles.control} ${styles.moreTrigger}`}
+                        aria-haspopup="menu"
+                        aria-expanded={moreOpen}
+                        disabled={isBusy}
+                        onClick={() =>
+                          setOpenMoreId((id) =>
+                            id === business.id ? null : business.id,
+                          )
+                        }
+                      >
+                        More
+                        <img
+                          src="/images/icons/add.svg"
+                          alt=""
+                          width={10}
+                          height={10}
+                        />
+                      </button>
+
+                      <div className={styles.moreMenu} role="menu">
+                        <a
+                          role="menuitem"
+                          className={styles.moreItem}
+                          href={href}
+                          target="_blank"
+                          rel="noreferrer"
+                          onClick={() => setOpenMoreId(null)}
+                        >
+                          Website
+                        </a>
+                        <button
+                          type="button"
+                          role="menuitem"
+                          className={styles.moreItem}
+                          disabled={isBusy}
+                          onClick={() => {
+                            setOpenMoreId(null);
+                            onMetaTag?.(business);
+                          }}
+                        >
+                          Meta tag
+                        </button>
+                        {onMakeSpecial ? (
+                          <button
+                            type="button"
+                            role="menuitem"
+                            className={`${styles.moreItem} ${styles.moreItemSpecial}`}
+                            disabled={isBusy}
+                            onClick={() => {
+                              setOpenMoreId(null);
+                              onMakeSpecial(business);
+                            }}
+                          >
+                            Make special
+                            {specialCount > 0 ? (
+                              <em
+                                className={styles.specialChip}
+                                aria-label={`In ${specialCount} special carousel${specialCount === 1 ? "" : "s"}`}
+                              >
+                                {specialCount}
+                              </em>
+                            ) : null}
+                          </button>
+                        ) : null}
+                        {!isPending ? (
+                          <button
+                            type="button"
+                            role="menuitem"
+                            className={styles.moreItem}
+                            disabled={isBusy || !onDisable}
+                            onClick={() => {
+                              setOpenMoreId(null);
+                              onDisable?.(business);
+                            }}
+                          >
+                            {isBusy ? "…" : isHidden ? "Enable" : "Disable"}
+                          </button>
+                        ) : null}
+                        <button
+                          type="button"
+                          role="menuitem"
+                          className={`${styles.moreItem} ${styles.moreItemDanger}`}
+                          disabled={isBusy || !onRemove}
+                          onClick={() => {
+                            setOpenMoreId(null);
+                            onRemove?.(business);
+                          }}
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/components/BusinessCategoriesPage.module.css b/components/BusinessCategoriesPage.module.css
new file mode 100644
index 0000000..c263d76
--- /dev/null
+++ b/components/BusinessCategoriesPage.module.css
@@ -0,0 +1,265 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 100%;
+}
+
+.head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 28px 32px;
+  border-radius: 5px;
+  background-color: var(--color-card);
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+}
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.breadcrumb a {
+  color: inherit;
+}
+
+.breadcrumb a:hover,
+.breadcrumb a:focus-visible {
+  color: var(--color-black);
+}
+
+.breadcrumbSep {
+  opacity: 0.45;
+}
+
+.breadcrumbCurrent {
+  color: var(--color-muted);
+}
+
+.title {
+  font-size: clamp(20px, 2.2vw, 28px);
+  font-weight: 400;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+.lead {
+  margin-top: 10px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.headActions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.count {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  white-space: nowrap;
+}
+
+.addBtn {
+  min-height: 38px;
+  padding: 0 16px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.addBtn::before {
+  background: #fff;
+}
+
+.addBtn:hover,
+.addBtn:focus-visible {
+  color: var(--color-black);
+}
+
+.ghostBtn {
+  min-height: 38px;
+  padding: 0 16px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  padding: 24px var(--page-pad);
+  background: rgba(0, 0, 0, 0.28);
+}
+
+.modal {
+  width: min(100%, 520px);
+  max-height: min(90vh, 720px);
+  overflow: auto;
+  border-radius: 5px;
+  background: var(--color-white);
+  box-shadow: 24px 28px 48px rgba(0, 0, 0, 0.12);
+  padding: 28px 28px 24px;
+}
+
+.modalHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.kicker {
+  margin: 0 0 8px;
+  font-size: 11px;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.modalTitle {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.closeBtn {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  font-size: 22px;
+  line-height: 1;
+  color: var(--color-soft);
+}
+
+.closeBtn:hover,
+.closeBtn:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.field input,
+.field textarea {
+  width: 100%;
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  background: #fff;
+  font: inherit;
+  font-size: 13px;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--color-black);
+}
+
+.field input {
+  min-height: 38px;
+  padding: 0 12px;
+}
+
+.field textarea {
+  padding: 10px 12px;
+  resize: vertical;
+}
+
+.field input:focus,
+.field textarea:focus {
+  outline: none;
+  border-color: #bbb;
+}
+
+.clearParent {
+  align-self: flex-start;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.clearParent:hover,
+.clearParent:focus-visible {
+  color: var(--color-black);
+}
+
+.modalActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 4px;
+}
+
+.error {
+  margin: 0;
+  padding: 14px 16px;
+  border-radius: 5px;
+  background: #fff5f5;
+  color: #b42318;
+  font-size: 13px;
+}
+
+.card {
+  padding: 8px 12px 12px;
+  border-radius: 5px;
+  background: #fff;
+}
+
+.empty {
+  margin: 0;
+  padding: 28px 8px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--color-muted);
+}
+
+@media (max-width: 720px) {
+  .head {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 22px 18px;
+  }
+
+  .headActions {
+    justify-content: space-between;
+  }
+}
diff --git a/components/BusinessCategoriesPage.tsx b/components/BusinessCategoriesPage.tsx
new file mode 100644
index 0000000..86010cc
--- /dev/null
+++ b/components/BusinessCategoriesPage.tsx
@@ -0,0 +1,431 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import CategoryTreeSelect from "@/components/CategoryTreeSelect";
+import CategoryTreeView, {
+  type CategoryTreeNode,
+} from "@/components/CategoryTreeView";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import {
+  categoryLabel,
+  createMeshkeeCategory,
+  deleteMeshkeeCategory,
+  searchMeshkeeCategories,
+  updateMeshkeeCategory,
+  type MeshkeeCategory,
+} from "@/services/meshkee-categories";
+import styles from "./BusinessCategoriesPage.module.css";
+
+type Draft = {
+  id?: string;
+  parentId: string;
+  name: string;
+  nameFa: string;
+  description: string;
+};
+
+function emptyDraft(parentId = ""): Draft {
+  return {
+    parentId,
+    name: "",
+    nameFa: "",
+    description: "",
+  };
+}
+
+function toViewNodes(items: MeshkeeCategory[]): CategoryTreeNode[] {
+  const byId = new Map<string, CategoryTreeNode>();
+  for (const item of items) {
+    byId.set(item.id, {
+      id: item.id,
+      name: categoryLabel(item),
+      hint: item.slug ? `/${item.slug}` : undefined,
+      children: [],
+    });
+  }
+  const roots: CategoryTreeNode[] = [];
+  for (const item of items) {
+    const node = byId.get(item.id)!;
+    if (item.parentId && byId.has(item.parentId)) {
+      byId.get(item.parentId)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+  const sortNodes = (nodes: CategoryTreeNode[], source: MeshkeeCategory[]) => {
+    const order = new Map(source.map((item) => [item.id, item.sortOrder]));
+    nodes.sort(
+      (a, b) =>
+        (order.get(a.id) ?? 0) - (order.get(b.id) ?? 0) ||
+        a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+    );
+    for (const node of nodes) sortNodes(node.children, source);
+  };
+  sortNodes(roots, items);
+  return roots;
+}
+
+function collectDescendantIds(
+  rootId: string,
+  items: MeshkeeCategory[],
+): Set<string> {
+  const childrenByParent = new Map<string, string[]>();
+  for (const item of items) {
+    if (!item.parentId) continue;
+    const list = childrenByParent.get(item.parentId) ?? [];
+    list.push(item.id);
+    childrenByParent.set(item.parentId, list);
+  }
+  const result = new Set<string>([rootId]);
+  const queue = [rootId];
+  while (queue.length) {
+    const current = queue.shift()!;
+    for (const childId of childrenByParent.get(current) ?? []) {
+      if (!result.has(childId)) {
+        result.add(childId);
+        queue.push(childId);
+      }
+    }
+  }
+  return result;
+}
+
+export default function BusinessCategoriesPage() {
+  const [categories, setCategories] = useState<MeshkeeCategory[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const [draft, setDraft] = useState<Draft | null>(null);
+  const [removing, setRemoving] = useState<MeshkeeCategory | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+  const tree = useMemo(() => toViewNodes(categories), [categories]);
+  const byId = useMemo(() => {
+    const map = new Map<string, MeshkeeCategory>();
+    for (const item of categories) map.set(item.id, item);
+    return map;
+  }, [categories]);
+
+  const parentOptions = useMemo(() => {
+    if (!draft?.id) return categories;
+    const blocked = collectDescendantIds(draft.id, categories);
+    return categories.filter((item) => !blocked.has(item.id));
+  }, [categories, draft?.id]);
+
+  const reload = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      setCategories(await searchMeshkeeCategories(""));
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not load categories.",
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  function openCreate(parentId = "") {
+    setDraft(emptyDraft(parentId));
+    setError("");
+  }
+
+  function openEdit(id: string) {
+    const category = byId.get(id);
+    if (!category) return;
+    setDraft({
+      id: category.id,
+      parentId: category.parentId ?? "",
+      name: category.name,
+      nameFa: category.nameFa ?? "",
+      description: category.description ?? "",
+    });
+    setError("");
+  }
+
+  async function saveDraft() {
+    if (!draft) return;
+    if (!draft.name.trim()) {
+      setError("Enter an English name.");
+      return;
+    }
+    setSaving(true);
+    setError("");
+    try {
+      const body = {
+        parentId: draft.parentId || null,
+        name: draft.name.trim(),
+        nameFa: draft.nameFa.trim(),
+        description: draft.description.trim(),
+      };
+      if (draft.id) {
+        const updated = await updateMeshkeeCategory(draft.id, body);
+        setCategories((current) =>
+          current.map((item) => (item.id === updated.id ? updated : item)),
+        );
+      } else {
+        const created = await createMeshkeeCategory(body);
+        setCategories((current) => [...current, created]);
+      }
+      setDraft(null);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not save category.",
+      );
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function confirmRemove() {
+    if (!removing) return;
+    setRemoveBusy(true);
+    setError("");
+    try {
+      const removed = await deleteMeshkeeCategory(removing.id);
+      const deleted = new Set(
+        (removed.deletedIds ?? [removing.id]).map(String),
+      );
+      deleted.add(removing.id);
+      setCategories((current) =>
+        current.filter((item) => !deleted.has(item.id)),
+      );
+      setRemoving(null);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not remove category.",
+      );
+    } finally {
+      setRemoveBusy(false);
+    }
+  }
+
+  const removingName = removing
+    ? categoryLabel(removing)
+    : "this category";
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <div>
+          <nav className={styles.breadcrumb} aria-label="Breadcrumb">
+            <Link href="/">Home</Link>
+            <span className={styles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <Link href="/businesses">Businesses</Link>
+            <span className={styles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <span className={styles.breadcrumbCurrent}>Categories</span>
+          </nav>
+          <h1 className={styles.title}>Categories</h1>
+          <p className={styles.lead}>
+            Marketplace categories from Meshkee. Add, edit, or remove the tree.
+          </p>
+        </div>
+        <div className={styles.headActions}>
+          <p className={styles.count}>
+            {loading ? "Loading…" : `${categories.length} categories`}
+          </p>
+          <button
+            type="button"
+            className={`outline-btn ${styles.addBtn}`}
+            onClick={() => openCreate()}
+          >
+            Add category
+          </button>
+        </div>
+      </header>
+
+      {error ? (
+        <p className={styles.error} role="alert">
+          {error}
+        </p>
+      ) : null}
+
+      <section className={styles.card}>
+        {loading ? <p className={styles.empty}>Loading categories…</p> : null}
+        {!loading ? (
+          <CategoryTreeView
+            nodes={tree}
+            actions={{
+              onAddChild: openCreate,
+              onEdit: openEdit,
+              onRemove: (id) => {
+                const category = byId.get(id);
+                if (category) setRemoving(category);
+              },
+            }}
+          />
+        ) : null}
+      </section>
+
+      {draft ? (
+        <div
+          className={styles.overlay}
+          role="presentation"
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget && !saving) {
+              setDraft(null);
+            }
+          }}
+        >
+          <div
+            className={styles.modal}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="category-draft-title"
+          >
+            <div className={styles.modalHead}>
+              <div>
+                <p className={styles.kicker}>Categories</p>
+                <h2 id="category-draft-title" className={styles.modalTitle}>
+                  {draft.id ? "Edit category" : "Add category"}
+                </h2>
+              </div>
+              <button
+                type="button"
+                className={styles.closeBtn}
+                aria-label="Close"
+                disabled={saving}
+                onClick={() => setDraft(null)}
+              >
+                ×
+              </button>
+            </div>
+
+            <form
+              className={styles.form}
+              onSubmit={(event) => {
+                event.preventDefault();
+                void saveDraft();
+              }}
+            >
+              <CategoryTreeSelect
+                categories={parentOptions}
+                value={draft.parentId ? [draft.parentId] : []}
+                selection="single"
+                label="Parent"
+                placeholder="Top level"
+                disabled={saving}
+                onChange={(ids) =>
+                  setDraft((current) =>
+                    current
+                      ? { ...current, parentId: ids[0] ?? "" }
+                      : current,
+                  )
+                }
+              />
+              {draft.parentId ? (
+                <button
+                  type="button"
+                  className={styles.clearParent}
+                  disabled={saving}
+                  onClick={() =>
+                    setDraft((current) =>
+                      current ? { ...current, parentId: "" } : current,
+                    )
+                  }
+                >
+                  Top level
+                </button>
+              ) : null}
+
+              <label className={styles.field}>
+                <span>Name EN</span>
+                <input
+                  value={draft.name}
+                  disabled={saving}
+                  required
+                  autoFocus
+                  onChange={(event) =>
+                    setDraft((current) =>
+                      current
+                        ? { ...current, name: event.target.value }
+                        : current,
+                    )
+                  }
+                />
+              </label>
+
+              <label className={styles.field}>
+                <span>Name FA</span>
+                <input
+                  className="fa"
+                  lang="fa"
+                  dir="rtl"
+                  value={draft.nameFa}
+                  disabled={saving}
+                  onChange={(event) =>
+                    setDraft((current) =>
+                      current
+                        ? { ...current, nameFa: event.target.value }
+                        : current,
+                    )
+                  }
+                />
+              </label>
+
+              <label className={styles.field}>
+                <span>Description</span>
+                <textarea
+                  rows={3}
+                  value={draft.description}
+                  disabled={saving}
+                  onChange={(event) =>
+                    setDraft((current) =>
+                      current
+                        ? { ...current, description: event.target.value }
+                        : current,
+                    )
+                  }
+                />
+              </label>
+
+              <div className={styles.modalActions}>
+                <button
+                  type="button"
+                  className={`outline-btn ${styles.ghostBtn}`}
+                  disabled={saving}
+                  onClick={() => setDraft(null)}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className={`outline-btn ${styles.addBtn}`}
+                  disabled={saving}
+                >
+                  {saving ? "Saving…" : draft.id ? "Update" : "Add"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
+
+      <ConfirmDialog
+        open={Boolean(removing)}
+        kicker="Remove category"
+        title={`Remove ${removingName}?`}
+        message="This category and its subcategories will be removed from the marketplace tree."
+        confirmLabel="Remove"
+        cancelLabel="Keep"
+        danger
+        busy={removeBusy}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+        onConfirm={() => {
+          void confirmRemove();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/components/BusinessDetailsPage.module.css b/components/BusinessDetailsPage.module.css
new file mode 100644
index 0000000..e69dd03
--- /dev/null
+++ b/components/BusinessDetailsPage.module.css
@@ -0,0 +1,911 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  padding-bottom: 48px;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 18px 32px;
+  border-radius: 5px;
+  background-color: var(--color-card);
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+}
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.breadcrumb a {
+  color: inherit;
+  transition: color 0.2s ease;
+}
+
+.breadcrumb a:hover,
+.breadcrumb a:focus-visible {
+  color: var(--color-black);
+}
+
+.breadcrumbSep {
+  opacity: 0.45;
+}
+
+.breadcrumbCurrent {
+  color: var(--color-muted);
+}
+
+.title {
+  font-size: clamp(20px, 2.2vw, 28px);
+  font-weight: 400;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+.lead {
+  margin-top: 10px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.headActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.actionBtn {
+  min-height: 38px;
+  padding: 0 18px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
+
+.hero {
+  position: relative;
+  margin-top: 24px;
+  border-radius: 5px;
+  overflow: hidden;
+  background: #e8e8e8;
+  line-height: 0;
+}
+
+.heroImg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.heroFallback {
+  width: 100%;
+  aspect-ratio: 18 / 6;
+  background: linear-gradient(180deg, #ececec 0%, #dedede 100%);
+}
+
+.profile {
+  margin-top: -36px;
+  position: relative;
+  z-index: 2;
+  padding: 0 clamp(20px, 4vw, 48px);
+}
+
+.profileBar {
+  background: var(--color-white);
+  border-radius: 5px;
+  min-height: 110px;
+  padding: 16px 20px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+}
+
+.identity {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-width: 220px;
+}
+
+.logo {
+  width: auto;
+  height: 56px;
+  max-width: min(180px, 42%);
+  flex-shrink: 0;
+  border-radius: 4px;
+  background: transparent;
+  object-fit: contain;
+  object-position: left center;
+}
+
+.logoMark {
+  width: 56px;
+  height: 56px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  border: 1px solid #f0f0f0;
+  background: #fff;
+  display: grid;
+  place-items: center;
+  font-size: 20px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.name {
+  font-size: clamp(15px, 1.4vw, 22px);
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.tagline {
+  margin-top: 4px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.stats {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: clamp(16px, 2.5vw, 36px);
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.statWide {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.statLabel {
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #969696;
+}
+
+.statLabelStack {
+  font-size: 12px;
+  line-height: 1.15;
+  text-transform: uppercase;
+  color: #969696;
+}
+
+.statValue {
+  font-size: clamp(18px, 1.8vw, 26px);
+  font-weight: 400;
+  line-height: 1.15;
+}
+
+.statMonth {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  color: var(--color-soft);
+  line-height: 1.2;
+}
+
+.statValueLg {
+  font-size: clamp(28px, 2.6vw, 42px);
+  font-weight: 400;
+  line-height: 1;
+}
+
+.description {
+  margin-top: 20px;
+  max-width: 920px;
+  font-size: 14px;
+  line-height: 1.65;
+  font-weight: 400;
+  color: var(--color-muted);
+  white-space: pre-wrap;
+}
+
+.tabs {
+  margin-top: 32px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: clamp(16px, 2vw, 32px);
+  border-bottom: 1px solid #ececec;
+  padding: 0 8px;
+}
+
+.tab,
+.tabActive {
+  position: relative;
+  padding: 0 4px 12px;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  transition: color 0.2s ease;
+}
+
+.tabActive {
+  font-weight: 500;
+  color: var(--color-black);
+}
+
+.tabActive::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 2px;
+  background: var(--color-black);
+}
+
+.tab:hover {
+  color: var(--color-black);
+}
+
+.panel {
+  margin-top: 28px;
+}
+
+.productsSection {
+  scroll-margin-top: 32px;
+}
+
+.pills,
+.childPills {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.childPills {
+  margin-top: -6px;
+  margin-bottom: 20px;
+  padding-top: 10px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.pill,
+.pillActive {
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  background: #fff;
+}
+
+.pillActive {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.productGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.blogGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.card,
+.blogCard {
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.cardBody {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 0;
+  background: transparent;
+  border-radius: 0;
+}
+
+.cardFoot {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 0 0 4px 4px;
+  padding: 14px 16px 0;
+}
+
+.cardFootSolo .cardBody {
+  min-height: 28px;
+}
+
+/* Same bottom→top wipe when hovering the whole card */
+.card:hover .cardFoot:global(.tile-hover)::before,
+.card:focus-within .cardFoot:global(.tile-hover)::before,
+.blogCard:hover .cardFoot:global(.tile-hover)::before,
+.blogCard:focus-within .cardFoot:global(.tile-hover)::before,
+.galleryItem:hover .galleryFoot:global(.tile-hover)::before,
+.galleryItem:focus-within .galleryFoot:global(.tile-hover)::before {
+  clip-path: inset(0 0 0 0);
+}
+
+.card:hover .cardFoot:global(.tile-hover) :is(h3, p, span, button),
+.card:focus-within .cardFoot:global(.tile-hover) :is(h3, p, span, button),
+.blogCard:hover .cardFoot:global(.tile-hover) :is(h3, p, span, button),
+.blogCard:focus-within .cardFoot:global(.tile-hover) :is(h3, p, span, button),
+.galleryItem:hover .galleryFoot:global(.tile-hover) :is(button),
+.galleryItem:focus-within .galleryFoot:global(.tile-hover) :is(button) {
+  color: var(--color-white);
+}
+
+.card:hover .cardControls,
+.card:focus-within .cardControls,
+.blogCard:hover .cardControls,
+.blogCard:focus-within .cardControls,
+.galleryItem:hover .cardControls,
+.galleryItem:focus-within .cardControls {
+  border-top-color: rgba(255, 255, 255, 0.2);
+}
+
+.card:hover .cardControl + .cardControl,
+.card:focus-within .cardControl + .cardControl,
+.blogCard:hover .cardControl + .cardControl,
+.blogCard:focus-within .cardControl + .cardControl,
+.galleryItem:hover .cardControl + .cardControl,
+.galleryItem:focus-within .cardControl + .cardControl {
+  border-left-color: rgba(255, 255, 255, 0.22);
+}
+
+.cardMedia {
+  position: relative;
+  aspect-ratio: 1;
+  background: #f3f3f3;
+  overflow: hidden;
+}
+
+.cardControls {
+  position: relative;
+  z-index: 2;
+  margin-top: auto;
+  padding: 14px 0 16px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 0;
+  border-top: 1px solid #f0f0f0;
+}
+
+.cardControl {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 0 10px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  cursor: pointer;
+  line-height: 1.4;
+  transition: color 0.2s ease;
+}
+
+.cardControl:first-child {
+  padding-left: 0;
+}
+
+.cardControl + .cardControl {
+  border-left: 1px solid #e4e4e4;
+}
+
+.cardControl:hover,
+.cardControl:focus-visible {
+  color: var(--color-black);
+}
+
+.card:hover .cardControl:hover,
+.card:focus-within .cardControl:hover,
+.blogCard:hover .cardControl:hover,
+.blogCard:focus-within .cardControl:hover,
+.galleryItem:hover .cardControl:hover,
+.galleryItem:focus-within .cardControl:hover {
+  color: var(--color-white);
+}
+
+.cardControlDanger:hover,
+.cardControlDanger:focus-visible {
+  color: #b42318;
+}
+
+.card:hover .cardControlDanger:hover,
+.card:focus-within .cardControlDanger:hover,
+.blogCard:hover .cardControlDanger:hover,
+.blogCard:focus-within .cardControlDanger:hover,
+.galleryItem:hover .cardControlDanger:hover,
+.galleryItem:focus-within .cardControlDanger:hover {
+  color: #ffb4a8;
+}
+
+.cardControl:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.galleryFoot {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  padding: 0 16px;
+  background: rgba(255, 255, 255, 0.94);
+}
+
+.galleryFoot .cardControls {
+  margin-top: 0;
+  border-top: 0;
+}
+
+.cardMedia img,
+.galleryItem img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.portfolioMedia img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.mediaFallback {
+  width: 100%;
+  height: 100%;
+  background: #ececec;
+}
+
+.cardBody,
+.blogBody {
+  position: relative;
+  z-index: 2;
+  padding: 0;
+}
+
+.cardBody h3 {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  line-height: 1.3;
+}
+
+.blogBody h3,
+.portfolioOverlay h3 {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  line-height: 1.35;
+}
+
+.cardBody p {
+  margin-top: 4px;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: var(--color-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.blogBody p,
+.portfolioOverlay p {
+  margin-top: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--color-muted);
+  text-align: justify;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.panelHint {
+  margin: 0 0 14px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.pagination {
+  margin-top: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.pageNumbers {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.pageBtn,
+.pageNum,
+.pageNumActive {
+  min-height: 34px;
+  min-width: 34px;
+  padding: 0 12px;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+}
+
+.pageNum,
+.pageNumActive {
+  letter-spacing: 0;
+  text-transform: none;
+  padding: 0 8px;
+}
+
+.pageNumActive {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+  cursor: default;
+}
+
+.pageBtn:hover:not(:disabled),
+.pageBtn:focus-visible:not(:disabled),
+.pageNum:hover:not(:disabled),
+.pageNum:focus-visible:not(:disabled) {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.pageBtn:disabled,
+.pageNum:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.pageNumActive:disabled {
+  opacity: 1;
+}
+
+.pageEllipsis {
+  min-width: 24px;
+  text-align: center;
+  font-size: 12px;
+  color: var(--color-soft);
+}
+
+.meta {
+  display: inline-block;
+  margin-top: 10px;
+  margin-bottom: 14px;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.contact {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.contactRows {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.contactRow {
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  padding: 16px 18px;
+  background: #fff;
+}
+
+.contactLabel {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.contactRow p {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--color-muted);
+}
+
+.socials {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.socialChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #ececec;
+  border-radius: 4px;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-muted);
+  background: #fff;
+}
+
+.socialChip em {
+  font-style: normal;
+  text-transform: capitalize;
+  color: var(--color-black);
+}
+
+.gallery {
+  columns: 3;
+  column-gap: 14px;
+}
+
+.galleryItem {
+  position: relative;
+  break-inside: avoid;
+  margin: 0 0 14px;
+  border-radius: 5px;
+  overflow: hidden;
+  background: #f3f3f3;
+}
+
+.galleryTall img {
+  min-height: 220px;
+}
+
+.portfolioGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+
+.portfolioCard {
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.portfolioCard .portfolioMedia {
+  border-radius: 0;
+}
+
+.portfolioCard .cardFoot {
+  flex: 0 0 auto;
+  padding: 0 12px;
+}
+
+.portfolioCard .cardControls {
+  padding: 12px 0 14px;
+}
+
+.portfolioMeta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  padding: 12px 12px 10px;
+  min-width: 0;
+}
+
+.portfolioTitleEn {
+  margin: 0;
+  max-width: 100%;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  line-height: 1.25;
+  color: var(--color-black);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.portfolioTitleFa {
+  margin: 0;
+  max-width: 100%;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.35;
+  color: var(--color-soft);
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.portfolioCard:hover .cardFoot:global(.tile-hover)::before,
+.portfolioCard:focus-within .cardFoot:global(.tile-hover)::before {
+  clip-path: inset(0 0 0 0);
+}
+
+.portfolioCard:hover .cardFoot:global(.tile-hover) :is(h3, p, span, button),
+.portfolioCard:focus-within .cardFoot:global(.tile-hover) :is(h3, p, span, button) {
+  color: var(--color-white);
+}
+
+.portfolioCard:hover .cardControls,
+.portfolioCard:focus-within .cardControls {
+  border-top-color: rgba(255, 255, 255, 0.2);
+}
+
+.portfolioCard:hover .cardControl + .cardControl,
+.portfolioCard:focus-within .cardControl + .cardControl {
+  border-left-color: rgba(255, 255, 255, 0.22);
+}
+
+.portfolioCard:hover .cardControl:hover,
+.portfolioCard:focus-within .cardControl:hover {
+  color: var(--color-white);
+}
+
+.portfolioCard:hover .cardControlDanger:hover,
+.portfolioCard:focus-within .cardControlDanger:hover {
+  color: #ffb4a8;
+}
+
+.portfolioMedia {
+  position: relative;
+  width: 100%;
+  border-radius: 0;
+  overflow: hidden;
+  background: #f3f3f3;
+  line-height: 0;
+}
+
+.portfolioMedia .mediaFallback {
+  aspect-ratio: 4 / 3;
+}
+
+.emptyTabs,
+.loading,
+.error {
+  margin-top: 28px;
+  padding: 36px 28px;
+  border-radius: 5px;
+  background: var(--color-white);
+  border: 1px solid #f0f0f0;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+  text-align: center;
+}
+
+.errorTitle {
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-black);
+}
+
+.errorCopy {
+  margin-top: 10px;
+}
+
+.backLink {
+  display: inline-block;
+  margin-top: 16px;
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-black);
+}
+
+@media (max-width: 980px) {
+  .productGrid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .blogGrid,
+  .portfolioGrid,
+  .contactRows {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .gallery {
+    columns: 2;
+  }
+}
+
+@media (max-width: 640px) {
+  .head {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 22px 18px;
+  }
+
+  .productGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .blogGrid,
+  .portfolioGrid,
+  .contactRows {
+    grid-template-columns: 1fr;
+  }
+
+  .gallery {
+    columns: 1;
+  }
+
+  .profile {
+    padding: 0 14px;
+  }
+}
diff --git a/components/BusinessDetailsPage.tsx b/components/BusinessDetailsPage.tsx
new file mode 100644
index 0000000..f9dcf7e
--- /dev/null
+++ b/components/BusinessDetailsPage.tsx
@@ -0,0 +1,437 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import BlogPanel from "@/components/catalog/BlogPanel";
+import PortfoliosPanel from "@/components/catalog/PortfoliosPanel";
+import ProductsPanel from "@/components/catalog/ProductsPanel";
+import { toPlainText } from "@/components/catalog/utils";
+import { openBusinessDashboardAsAdmin } from "@/lib/session-handoff";
+import { getMarketplaceBusiness } from "@/services/marketplace";
+import {
+  getBusinessProfile,
+  getMeshkeeBusiness,
+  type BusinessAddress,
+  type BusinessPhoneNumber,
+} from "@/services/meshkee-businesses";
+import {
+  listMeshkeeBlogs,
+  listMeshkeePortfolios,
+  listMeshkeeProducts,
+} from "@/services/meshkee-content";
+import styles from "./BusinessDetailsPage.module.css";
+
+type TabId = "products" | "contact" | "blog" | "portfolios";
+
+const TAB_LABELS: Record<TabId, string> = {
+  products: "Products",
+  contact: "Contact info",
+  blog: "Blog",
+  portfolios: "Portfolios",
+};
+
+const SOCIAL_ICONS: Record<string, string> = {
+  instagram: "/images/icons/instagram.png",
+  telegram: "/images/icons/telegram.png",
+  facebook: "/images/icons/facebook.png",
+  whatsapp: "/images/icons/telegram.png",
+  linkedin: "/images/icons/facebook.png",
+  youtube: "/images/icons/facebook.png",
+  aparat: "/images/icons/facebook.png",
+};
+
+function hasContactData(input: {
+  addresses: BusinessAddress[];
+  phones: BusinessPhoneNumber[];
+  emails: string[];
+  socials: { network: string; handle: string }[];
+}) {
+  return (
+    input.addresses.some(
+      (item) =>
+        item.address.trim() ||
+        item.city.trim() ||
+        item.province.trim() ||
+        (item.landline ?? "").trim(),
+    ) ||
+    input.phones.some((item) => item.number.trim()) ||
+    input.emails.some((item) => item.trim()) ||
+    input.socials.length > 0
+  );
+}
+
+export default function BusinessDetailsPage({
+  listingId,
+}: {
+  listingId: string;
+}) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [meshkeeId, setMeshkeeId] = useState("");
+  const [tab, setTab] = useState<TabId>("products");
+
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [categoryName, setCategoryName] = useState("");
+  const [logoUrl, setLogoUrl] = useState<string | null>(null);
+  const [bannerUrl, setBannerUrl] = useState<string | null>(null);
+  const [about, setAbout] = useState("");
+  const [vision, setVision] = useState("");
+  const [sinceMonth, setSinceMonth] = useState("");
+  const [sinceYear, setSinceYear] = useState("");
+  const [province, setProvince] = useState("");
+  const [telephone, setTelephone] = useState("");
+
+  const [productTotal, setProductTotal] = useState(0);
+  const [blogTotal, setBlogTotal] = useState(0);
+  const [portfolioTotal, setPortfolioTotal] = useState(0);
+
+  const [addresses, setAddresses] = useState<BusinessAddress[]>([]);
+  const [phones, setPhones] = useState<BusinessPhoneNumber[]>([]);
+  const [emails, setEmails] = useState<string[]>([]);
+  const [socials, setSocials] = useState<
+    { network: string; handle: string; icon: string }[]
+  >([]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    void (async () => {
+      setLoading(true);
+      setError("");
+      try {
+        const listing = await getMarketplaceBusiness(listingId);
+        const id = String(listing.meshkeeBusinessId);
+
+        const [
+          meshkee,
+          profile,
+          productsRes,
+          blogsRes,
+          portfoliosRes,
+        ] = await Promise.all([
+          getMeshkeeBusiness(id),
+          getBusinessProfile(id),
+          listMeshkeeProducts(id, { page: 1, pageSize: 1 }).catch(() => ({
+            total: 0,
+          })),
+          listMeshkeeBlogs(id, { page: 1, pageSize: 1 }).catch(() => ({
+            total: 0,
+          })),
+          listMeshkeePortfolios(id, { page: 1, pageSize: 1 }).catch(() => ({
+            total: 0,
+          })),
+        ]);
+
+        if (cancelled) return;
+
+        const nextAddresses = profile.addresses ?? [];
+        const nextPhones = profile.profile.phoneNumbers ?? [];
+        const nextEmails = (profile.profile.emails ?? []).filter(Boolean);
+        const socialMedia = profile.profile.socialMedia ?? {};
+        const nextSocials = Object.entries(socialMedia)
+          .filter(([, handle]) => Boolean(handle?.trim()))
+          .map(([network, handle]) => ({
+            network,
+            handle: handle.trim(),
+            icon: SOCIAL_ICONS[network] ?? "/images/icons/telegram.png",
+          }));
+
+        setMeshkeeId(id);
+        setName(meshkee.name || listing.slug);
+        setSlug(listing.slug);
+        setCategoryName(meshkee.categories[0]?.name ?? "");
+        setLogoUrl(profile.profile.logoUrl ?? meshkee.logoUrl);
+        setBannerUrl(profile.profile.bannerUrl ?? meshkee.bannerUrl);
+        setAbout(profile.profile.about ?? "");
+        setVision(profile.profile.vision ?? "");
+        if (meshkee.createdAt) {
+          const joined = new Date(meshkee.createdAt);
+          setSinceMonth(
+            joined.toLocaleDateString("en-US", { month: "long" }),
+          );
+          setSinceYear(String(joined.getFullYear()));
+        } else {
+          setSinceMonth("");
+          setSinceYear("");
+        }
+        setProvince(nextAddresses[0]?.province ?? "");
+        setTelephone(
+          nextPhones.find((item) => item.number.trim())?.number ??
+            nextAddresses.find((item) => (item.landline ?? "").trim())
+              ?.landline ??
+            "",
+        );
+        setProductTotal(productsRes.total ?? 0);
+        setBlogTotal(blogsRes.total ?? 0);
+        setPortfolioTotal(portfoliosRes.total ?? 0);
+        setAddresses(nextAddresses);
+        setPhones(nextPhones as BusinessPhoneNumber[]);
+        setEmails(nextEmails);
+        setSocials(nextSocials);
+      } catch (err) {
+        if (cancelled) return;
+        setError(
+          err instanceof Error
+            ? err.message
+            : "Could not load business details.",
+        );
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [listingId]);
+
+  const contactReady = hasContactData({
+    addresses,
+    phones,
+    emails,
+    socials,
+  });
+
+  const availableTabs = useMemo(() => {
+    const tabs: TabId[] = [];
+    if (productTotal > 0) tabs.push("products");
+    if (contactReady) tabs.push("contact");
+    if (blogTotal > 0) tabs.push("blog");
+    // Gallery disabled until a dedicated gallery section exists (media library ≠ gallery).
+    if (portfolioTotal > 0) tabs.push("portfolios");
+    return tabs;
+  }, [productTotal, contactReady, blogTotal, portfolioTotal]);
+
+  useEffect(() => {
+    if (!availableTabs.length) return;
+    if (!availableTabs.includes(tab)) setTab(availableTabs[0]);
+  }, [availableTabs, tab]);
+
+  const description = toPlainText(about) || toPlainText(vision);
+
+  function openBusinessDashboard(nextPath: string) {
+    if (!meshkeeId) return;
+    openBusinessDashboardAsAdmin(meshkeeId, nextPath);
+  }
+
+  if (loading) {
+    return <div className={styles.loading}>Loading business details…</div>;
+  }
+
+  if (error) {
+    return (
+      <div className={styles.error} role="alert">
+        <p className={styles.errorTitle}>Could not load details</p>
+        <p className={styles.errorCopy}>{error}</p>
+        <Link href="/businesses" className={styles.backLink}>
+          Back to businesses
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <nav className={styles.breadcrumb} aria-label="Breadcrumb">
+          <Link href="/">Home</Link>
+          <span className={styles.breadcrumbSep} aria-hidden>
+            /
+          </span>
+          <Link href="/businesses">Businesses</Link>
+          <span className={styles.breadcrumbSep} aria-hidden>
+            /
+          </span>
+          <span className={styles.breadcrumbCurrent}>{name}</span>
+        </nav>
+        <div className={styles.headActions}>
+          <button
+            type="button"
+            className={`outline-btn ${styles.actionBtn}`}
+            disabled={!meshkeeId}
+            onClick={() => openBusinessDashboard("/profile")}
+          >
+            Manage business
+          </button>
+          <Link
+            href={`/businesses/${listingId}/edit`}
+            className={`outline-btn ${styles.actionBtn}`}
+          >
+            Edit listing
+          </Link>
+        </div>
+      </header>
+
+      <section className={styles.hero}>
+        {bannerUrl ? (
+          <img src={bannerUrl} alt="" className={styles.heroImg} />
+        ) : (
+          <div className={styles.heroFallback} aria-hidden />
+        )}
+      </section>
+
+      <section className={styles.profile}>
+        <div className={styles.profileBar}>
+          <div className={styles.identity}>
+            {logoUrl ? (
+              <img className={styles.logo} src={logoUrl} alt="" height={56} />
+            ) : (
+              <span className={styles.logoMark} aria-hidden>
+                {name.slice(0, 1).toUpperCase()}
+              </span>
+            )}
+            <div>
+              <h2 className={styles.name}>{name}</h2>
+              <p className={styles.tagline}>{categoryName || `/${slug}`}</p>
+            </div>
+          </div>
+          <div className={styles.stats}>
+            {sinceMonth && sinceYear ? (
+              <div className={styles.stat}>
+                <span className={styles.statLabel}>since</span>
+                <strong className={styles.statValue}>{sinceYear}</strong>
+                <span className={styles.statMonth}>{sinceMonth}</span>
+              </div>
+            ) : null}
+            {province ? (
+              <div className={styles.stat}>
+                <span className={styles.statLabel}>province</span>
+                <strong className={styles.statValue}>{province}</strong>
+              </div>
+            ) : null}
+            <div className={styles.statWide}>
+              <strong className={styles.statValueLg}>{portfolioTotal}</strong>
+              <span className={styles.statLabelStack}>
+                active
+                <br />
+                {portfolioTotal === 1 ? "portfolio" : "portfolios"}
+              </span>
+            </div>
+            {telephone ? (
+              <div className={styles.stat}>
+                <span className={styles.statLabel}>Telephone</span>
+                <strong className={styles.statValue}>{telephone}</strong>
+              </div>
+            ) : null}
+          </div>
+        </div>
+        {description ? (
+          <p className={styles.description} dir="auto">
+            {description}
+          </p>
+        ) : null}
+      </section>
+
+      {availableTabs.length && meshkeeId ? (
+        <>
+          <nav className={styles.tabs} aria-label="Business sections">
+            {availableTabs.map((id) => (
+              <button
+                key={id}
+                type="button"
+                className={tab === id ? styles.tabActive : styles.tab}
+                onClick={() => setTab(id)}
+              >
+                {TAB_LABELS[id]}
+              </button>
+            ))}
+          </nav>
+
+          <section className={styles.panel} aria-live="polite">
+            {tab === "products" ? (
+              <ProductsPanel
+                meshkeeId={meshkeeId}
+                controlsMode="manage"
+                onManage={() => openBusinessDashboard("/products")}
+              />
+            ) : null}
+
+            {tab === "contact" ? (
+              <div className={styles.contact}>
+                <div className={styles.contactRows}>
+                  {addresses.map((address, index) => (
+                    <div
+                      key={address.id ?? `${address.city}-${index}`}
+                      className={styles.contactRow}
+                    >
+                      <span className={styles.contactLabel}>
+                        {address.name || "Address"}
+                      </span>
+                      <p dir="auto">
+                        {[address.address, address.city, address.province]
+                          .filter(Boolean)
+                          .join(", ")}
+                      </p>
+                      {address.postalCode ? (
+                        <p>Postal: {address.postalCode}</p>
+                      ) : null}
+                      {address.landline ? (
+                        <p>Landline: {address.landline}</p>
+                      ) : null}
+                    </div>
+                  ))}
+                  {phones.length ? (
+                    <div className={styles.contactRow}>
+                      <span className={styles.contactLabel}>Phones</span>
+                      <p>
+                        {phones
+                          .filter((item) => item.number.trim())
+                          .map((item) => item.number)
+                          .join(" · ")}
+                      </p>
+                    </div>
+                  ) : null}
+                  {emails.length ? (
+                    <div className={styles.contactRow}>
+                      <span className={styles.contactLabel}>Email</span>
+                      <p>{emails.join(" · ")}</p>
+                    </div>
+                  ) : null}
+                </div>
+                {socials.length ? (
+                  <div className={styles.socials}>
+                    {socials.map((social) => (
+                      <span key={social.network} className={styles.socialChip}>
+                        <img src={social.icon} alt="" width={16} height={16} />
+                        <em>{social.network}</em> {social.handle}
+                      </span>
+                    ))}
+                  </div>
+                ) : null}
+                <button
+                  type="button"
+                  className={`outline-btn ${styles.actionBtn}`}
+                  style={{ marginTop: 18 }}
+                  onClick={() => openBusinessDashboard("/profile")}
+                >
+                  Manage business
+                </button>
+              </div>
+            ) : null}
+
+            {tab === "blog" ? (
+              <BlogPanel
+                meshkeeId={meshkeeId}
+                controlsMode="manage"
+                onManage={() => openBusinessDashboard("/blog")}
+              />
+            ) : null}
+            {tab === "portfolios" ? (
+              <PortfoliosPanel
+                meshkeeId={meshkeeId}
+                controlsMode="manage"
+                onManage={() => openBusinessDashboard("/portfolios")}
+              />
+            ) : null}
+          </section>
+        </>
+      ) : (
+        <div className={styles.emptyTabs}>
+          No catalog tabs yet — products, blog, portfolios, or contact data will
+          appear here when Meshkee has them.
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/BusinessShell.tsx b/components/BusinessShell.tsx
new file mode 100644
index 0000000..f588abd
--- /dev/null
+++ b/components/BusinessShell.tsx
@@ -0,0 +1,207 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+import AccountMenu from "@/components/AccountMenu";
+import { useAuth } from "@/components/AuthProvider";
+import { businessNavItems } from "@/data/business-nav";
+import { en } from "@/lib/i18n/en";
+import {
+  getAdminDashboardOrigin,
+  getCustomerDashboardOrigin,
+} from "@/lib/host";
+import { customerDashboardHref } from "@/lib/session-handoff";
+import { getDisplayName } from "@/lib/userName";
+import { getBusinessProfile } from "@/services/meshkee-businesses";
+import styles from "./DashboardShell.module.css";
+
+const websiteUrl =
+  process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
+  "http://localhost:3000";
+
+export default function BusinessShell({
+  children,
+  manageMeshkeeId,
+}: {
+  children: React.ReactNode;
+  /** When set, nav stays on admin host under /manage/[id]/… */
+  manageMeshkeeId?: string;
+}) {
+  const pathname = usePathname();
+  const { user, logout, isSuperAdmin, activeBusinessId } = useAuth();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [businessName, setBusinessName] = useState("");
+  const [businessTitle, setBusinessTitle] = useState("");
+  const [logoUrl, setLogoUrl] = useState<string | null>(null);
+  const displayName = getDisplayName(user);
+  const linkedBusiness =
+    user?.businesses.find((item) => item.isOwner) ?? user?.businesses[0];
+
+  const meshkeeId = manageMeshkeeId || activeBusinessId || null;
+
+  const manageBase = manageMeshkeeId
+    ? `/manage/${encodeURIComponent(manageMeshkeeId)}`
+    : null;
+
+  const publicPath = manageBase
+    ? pathname.replace(manageBase, "") || "/profile"
+    : pathname.startsWith("/business")
+      ? pathname.replace(/^\/business/, "") || "/"
+      : pathname;
+
+  useEffect(() => {
+    if (!meshkeeId) {
+      setBusinessName(linkedBusiness?.name?.trim() || "");
+      setBusinessTitle("");
+      setLogoUrl(null);
+      return;
+    }
+
+    let cancelled = false;
+    void (async () => {
+      try {
+        const profile = await getBusinessProfile(meshkeeId);
+        if (cancelled) return;
+        const name =
+          profile.profile.nameEn?.trim() ||
+          profile.profile.nameFa?.trim() ||
+          linkedBusiness?.name?.trim() ||
+          "";
+        setBusinessName(name);
+        setBusinessTitle(profile.profile.title?.trim() || "");
+        setLogoUrl(profile.profile.logoUrl?.trim() || null);
+      } catch {
+        if (cancelled) return;
+        setBusinessName(linkedBusiness?.name?.trim() || "");
+        setBusinessTitle("");
+        setLogoUrl(null);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [meshkeeId, linkedBusiness?.name]);
+
+  function navHref(itemHref: string) {
+    if (!manageBase) return itemHref;
+    return `${manageBase}${itemHref === "/" ? "/profile" : itemHref}`;
+  }
+
+  const brandName = businessName || linkedBusiness?.name || "Business";
+
+  return (
+    <div className={styles.shell}>
+      <aside className={`${styles.sidebar} ${menuOpen ? styles.sidebarOpen : ""}`}>
+        <div className={styles.brand}>
+          {logoUrl ? (
+            <img
+              className={styles.brandLogo}
+              src={logoUrl}
+              alt=""
+              width={48}
+              height={48}
+            />
+          ) : null}
+          <div className={styles.brandText}>
+            <strong className={styles.brandBusiness} dir="auto" title={brandName}>
+              {brandName}
+            </strong>
+            {businessTitle ? (
+              <span
+                className={styles.brandTitle}
+                dir="auto"
+                title={businessTitle}
+              >
+                {businessTitle}
+              </span>
+            ) : null}
+          </div>
+        </div>
+
+        <nav className={styles.nav} aria-label="Business">
+          {businessNavItems.map((item) => {
+            const href = navHref(item.href);
+            const active =
+              publicPath === item.href ||
+              publicPath.startsWith(`${item.href}/`);
+            return (
+              <Link
+                key={item.label}
+                href={href}
+                className={`${styles.navItem} ${active ? styles.navItemActive : ""}`}
+                onClick={() => setMenuOpen(false)}
+              >
+                <img src={item.icon} alt="" width={18} height={18} />
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className={styles.sidebarFoot}>
+          <p className={styles.userLabel}>{displayName}</p>
+          {isSuperAdmin || manageMeshkeeId ? (
+            <Link href="/businesses" className={styles.siteLink}>
+              Admin dashboard
+            </Link>
+          ) : (
+            <a href={customerDashboardHref("/")} className={styles.siteLink}>
+              {en.openCustomerDashboard}
+            </a>
+          )}
+          <a href={websiteUrl} className={styles.siteLink}>
+            {en.viewWebsite}
+          </a>
+          <button
+            type="button"
+            className={`outline-btn ${styles.logoutBtn}`}
+            onClick={() => {
+              logout();
+              window.location.href =
+                isSuperAdmin || manageMeshkeeId
+                  ? `${getAdminDashboardOrigin()}/login`
+                  : `${getCustomerDashboardOrigin()}/login`;
+            }}
+          >
+            {en.logOut}
+          </button>
+        </div>
+      </aside>
+
+      {menuOpen ? (
+        <button
+          type="button"
+          className={styles.backdrop}
+          aria-label="Close menu"
+          onClick={() => setMenuOpen(false)}
+        />
+      ) : null}
+
+      <div className={styles.main}>
+        <header className={styles.topbar}>
+          <button
+            type="button"
+            className={styles.menuBtn}
+            aria-label="Open menu"
+            onClick={() => setMenuOpen(true)}
+          >
+            <img src="/images/icons/menu.svg" alt="" width={22} height={22} />
+          </button>
+          <div className={styles.topbarCopy}>
+            <p className={styles.eyebrow}>
+              {manageMeshkeeId ? "Admin · managing business" : en.workspaceEyebrow}
+            </p>
+            <p className={styles.topbarHint}>{en.workspaceHint}</p>
+          </div>
+          <div className={styles.topbarActions}>
+            <AccountMenu />
+          </div>
+        </header>
+
+        <div className={styles.content}>{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/BusinessesPage.module.css b/components/BusinessesPage.module.css
new file mode 100644
index 0000000..083bdcf
--- /dev/null
+++ b/components/BusinessesPage.module.css
@@ -0,0 +1,407 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  width: 100%;
+}
+
+.head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 28px 32px;
+  border-radius: 5px;
+  background-color: var(--color-card);
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+}
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.breadcrumb a {
+  color: inherit;
+  transition: color 0.2s ease;
+}
+
+.breadcrumb a:hover,
+.breadcrumb a:focus-visible {
+  color: var(--color-black);
+}
+
+.breadcrumbSep {
+  opacity: 0.45;
+}
+
+.breadcrumbCurrent {
+  color: var(--color-muted);
+}
+
+.title {
+  font-size: clamp(20px, 2.2vw, 28px);
+  font-weight: 400;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+.lead {
+  margin-top: 10px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.count {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  white-space: nowrap;
+}
+
+.headActions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.filterBar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.activeFilters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.filterOpenBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 0 14px;
+  border-radius: 5px;
+  background: var(--color-white);
+  border: 1px solid #ececec;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-black);
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background 0.2s ease;
+}
+
+.filterOpenBtn:hover,
+.filterOpenBtn:focus-visible {
+  border-color: #d8d8d8;
+  background: #fafafa;
+}
+
+.filterOpenBtnActive {
+  border-color: var(--color-black);
+}
+
+.filterCount {
+  font-style: normal;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  display: inline-grid;
+  place-items: center;
+  background: var(--color-black);
+  color: var(--color-white);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+}
+
+.activeChip {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 0 12px 0 14px;
+  border-radius: 5px;
+  background: var(--color-black);
+  border: 1px solid var(--color-black);
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-white);
+  max-width: min(100%, 360px);
+}
+
+.activeChip span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.activeChip em {
+  font-style: normal;
+  font-size: 16px;
+  line-height: 1;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.activeChip:hover,
+.activeChip:focus-visible {
+  background: #222;
+  border-color: #222;
+}
+
+.activeChip:hover em,
+.activeChip:focus-visible em {
+  color: var(--color-white);
+}
+
+.filterDivider {
+  width: 1px;
+  height: 22px;
+  flex-shrink: 0;
+  background: #d8d8d8;
+  margin-inline: 4px;
+}
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  padding: 24px var(--page-pad);
+  background: rgba(0, 0, 0, 0.28);
+}
+
+.modal {
+  width: min(100%, 520px);
+  max-height: min(90vh, 720px);
+  overflow: auto;
+  border-radius: 5px;
+  background: var(--color-white);
+  box-shadow: 24px 28px 48px rgba(0, 0, 0, 0.12);
+  padding: 28px 28px 24px;
+}
+
+.modalHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.kicker {
+  margin: 0 0 8px;
+  font-size: 11px;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.modalTitle {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.closeBtn {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  font-size: 22px;
+  line-height: 1;
+  color: var(--color-soft);
+}
+
+.closeBtn:hover,
+.closeBtn:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.modalForm {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.modalActions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.ghostBtn {
+  min-height: 38px;
+  padding: 0 16px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
+
+.applyBtn {
+  min-height: 38px;
+  padding: 0 16px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.applyBtn:hover,
+.applyBtn:focus-visible {
+  background: #222;
+  border-color: #222;
+}
+
+.filter {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 0 14px;
+  border-radius: 5px;
+  background: var(--color-white);
+  border: 1px solid #ececec;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  transition:
+    color 0.2s ease,
+    border-color 0.2s ease,
+    background 0.2s ease;
+}
+
+.filter em {
+  font-style: normal;
+  color: var(--color-muted);
+}
+
+.filter:hover,
+.filter:focus-visible {
+  color: var(--color-black);
+  border-color: #d8d8d8;
+}
+
+.filterActive {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.filterActive em {
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.addBtn {
+  width: 42px;
+  height: 42px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  background: var(--color-white);
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.addBtn:hover,
+.addBtn:focus-visible {
+  background: var(--color-black);
+}
+
+.addBtn:hover img,
+.addBtn:focus-visible img {
+  filter: invert(1);
+}
+
+.addBtn img {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.loading,
+.error {
+  min-height: 220px;
+  border-radius: 5px;
+  background: var(--color-white);
+  display: grid;
+  place-items: center;
+  padding: 40px 24px;
+  text-align: center;
+}
+
+.loading {
+  font-size: 12px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.errorTitle {
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+}
+
+.errorCopy {
+  margin-top: 10px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.errorHint {
+  margin-top: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-body);
+}
+
+@media (max-width: 720px) {
+  .head {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 24px 20px;
+  }
+
+  .headActions {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
diff --git a/components/BusinessesPage.tsx b/components/BusinessesPage.tsx
new file mode 100644
index 0000000..e7f95fa
--- /dev/null
+++ b/components/BusinessesPage.tsx
@@ -0,0 +1,551 @@
+"use client";
+
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import AddBusinessModal from "@/components/AddBusinessModal";
+import BusinessCardList from "@/components/BusinessCardList";
+import CategoryTreeSelect from "@/components/CategoryTreeSelect";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import MakeSpecialModal from "@/components/MakeSpecialModal";
+import {
+  deleteMarketplaceBusiness,
+  listBusinesses,
+  updateMarketplaceBusiness,
+} from "@/services/marketplace";
+import {
+  getBusinessProfile,
+  getMeshkeeBusiness,
+} from "@/services/meshkee-businesses";
+import {
+  categoryLabel,
+  searchMeshkeeCategories,
+  type MeshkeeCategory,
+} from "@/services/meshkee-categories";
+import type { BusinessStatus, MarketplaceBusiness } from "@/types/business";
+import styles from "./BusinessesPage.module.css";
+
+type FilterKey = "all" | "pending_review" | "published" | "rejected";
+
+const FILTERS: { key: FilterKey; label: string }[] = [
+  { key: "all", label: "All" },
+  { key: "pending_review", label: "Pending" },
+  { key: "published", label: "Published" },
+  { key: "rejected", label: "Rejected" },
+];
+
+function normalizeStatusParam(value: string | null): FilterKey {
+  if (!value) return "all";
+  if (value === "draft" || value === "pending_review") return "pending_review";
+  if (value === "published" || value === "rejected" || value === "all") {
+    return value;
+  }
+  return "all";
+}
+
+function isPendingStatus(status: BusinessStatus) {
+  return status === "pending_review" || status === "draft";
+}
+
+function categoryAncestors(
+  categoryId: string | undefined,
+  byId: Map<string, MeshkeeCategory>,
+): string[] {
+  if (!categoryId) return [];
+  const names: string[] = [];
+  const seen = new Set<string>();
+  let current = byId.get(categoryId);
+  while (current && !seen.has(current.id)) {
+    seen.add(current.id);
+    names.unshift(current.name);
+    current = current.parentId ? byId.get(current.parentId) : undefined;
+  }
+  return names;
+}
+
+function lastTwoCategoryLevels(trail: string[]) {
+  if (trail.length === 0) return undefined;
+  return trail.slice(-2).join(" / ");
+}
+
+function businessMatchesCategory(
+  categoryId: string | undefined,
+  selectedId: string,
+  byId: Map<string, MeshkeeCategory>,
+) {
+  if (!categoryId) return false;
+  const seen = new Set<string>();
+  let current = byId.get(categoryId);
+  while (current && !seen.has(current.id)) {
+    if (current.id === selectedId) return true;
+    seen.add(current.id);
+    current = current.parentId ? byId.get(current.parentId) : undefined;
+  }
+  return false;
+}
+
+async function enrichListings(
+  items: MarketplaceBusiness[],
+  categories: MeshkeeCategory[],
+): Promise<MarketplaceBusiness[]> {
+  const byId = new Map(categories.map((category) => [category.id, category]));
+
+  return Promise.all(
+    items.map(async (item) => {
+      try {
+        const id = String(item.meshkeeBusinessId);
+        const [meshkee, profile] = await Promise.all([
+          getMeshkeeBusiness(id),
+          getBusinessProfile(id),
+        ]);
+        const primaryCategoryId =
+          profile.profile.categoryIds[0] ?? meshkee.categories[0]?.id;
+        const trail = categoryAncestors(primaryCategoryId, byId);
+        return {
+          ...item,
+          name: meshkee.name,
+          categoryId: primaryCategoryId,
+          categoryName: trail[trail.length - 1] ?? meshkee.categories[0]?.name,
+          categoryTrail: lastTwoCategoryLevels(trail),
+          logoUrl: profile.profile.logoUrl ?? meshkee.logoUrl ?? undefined,
+          bannerUrl:
+            profile.profile.bannerUrl ?? meshkee.bannerUrl ?? undefined,
+        };
+      } catch {
+        return { ...item, name: item.slug };
+      }
+    }),
+  );
+}
+
+export default function BusinessesPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const filterTitleId = useId();
+  const initialFilter = normalizeStatusParam(searchParams.get("status"));
+
+  const [filter, setFilter] = useState<FilterKey>(initialFilter);
+  const [items, setItems] = useState<MarketplaceBusiness[]>([]);
+  const [categories, setCategories] = useState<MeshkeeCategory[]>([]);
+  const [total, setTotal] = useState(0);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [filterModalOpen, setFilterModalOpen] = useState(false);
+  const [draftCategoryIds, setDraftCategoryIds] = useState<string[]>([]);
+  const [categoryFilterId, setCategoryFilterId] = useState<string | null>(null);
+  const [removing, setRemoving] = useState<MarketplaceBusiness | null>(null);
+  const [makingSpecial, setMakingSpecial] =
+    useState<MarketplaceBusiness | null>(null);
+  const [specialTick, setSpecialTick] = useState(0);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  const categoriesById = useMemo(
+    () => new Map(categories.map((category) => [category.id, category])),
+    [categories],
+  );
+
+  const activeCategory = categoryFilterId
+    ? categoriesById.get(categoryFilterId)
+    : undefined;
+  const activeFilterCount = categoryFilterId ? 1 : 0;
+
+  const reload = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const [data, categoryItems] = await Promise.all([
+        listBusinesses({ status: "all", limit: 100 }),
+        searchMeshkeeCategories("").catch(() => [] as MeshkeeCategory[]),
+      ]);
+      setCategories(categoryItems);
+      const enriched = await enrichListings(data.items, categoryItems);
+      setItems(enriched);
+      setTotal(data.total);
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Could not load businesses from the API.",
+      );
+      setItems([]);
+      setTotal(0);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  useEffect(() => {
+    setFilter(normalizeStatusParam(searchParams.get("status")));
+  }, [searchParams]);
+
+  useEffect(() => {
+    if (!filterModalOpen) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setFilterModalOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [filterModalOpen]);
+
+  const counts = useMemo(() => {
+    const next: Record<FilterKey, number> = {
+      all: 0,
+      pending_review: 0,
+      published: 0,
+      rejected: 0,
+    };
+    for (const item of items) {
+      if (
+        categoryFilterId &&
+        !businessMatchesCategory(
+          item.categoryId,
+          categoryFilterId,
+          categoriesById,
+        )
+      ) {
+        continue;
+      }
+      next.all += 1;
+      if (isPendingStatus(item.status)) next.pending_review += 1;
+      else if (item.status === "published") next.published += 1;
+      else if (item.status === "rejected") next.rejected += 1;
+    }
+    return next;
+  }, [items, categoryFilterId, categoriesById]);
+
+  const visible = useMemo(() => {
+    return items.filter((item) => {
+      if (
+        categoryFilterId &&
+        !businessMatchesCategory(
+          item.categoryId,
+          categoryFilterId,
+          categoriesById,
+        )
+      ) {
+        return false;
+      }
+      if (filter === "all") return true;
+      if (filter === "pending_review") return isPendingStatus(item.status);
+      return item.status === filter;
+    });
+  }, [items, filter, categoryFilterId, categoriesById]);
+
+  function selectFilter(next: FilterKey) {
+    setFilter(next);
+    const url = new URL(window.location.href);
+    if (next === "all") url.searchParams.delete("status");
+    else url.searchParams.set("status", next);
+    router.replace(`${url.pathname}${url.search}`);
+  }
+
+  function openFilterModal() {
+    setDraftCategoryIds(categoryFilterId ? [categoryFilterId] : []);
+    setFilterModalOpen(true);
+  }
+
+  function applyCategoryFilter() {
+    setCategoryFilterId(draftCategoryIds[0] ?? null);
+    setFilterModalOpen(false);
+  }
+
+  function clearCategoryFilter() {
+    setCategoryFilterId(null);
+    setDraftCategoryIds([]);
+  }
+
+  async function setStatus(business: MarketplaceBusiness, status: BusinessStatus) {
+    setBusyId(business.id);
+    setError("");
+    try {
+      const updated = await updateMarketplaceBusiness(business.id, { status });
+      setItems((current) =>
+        current.map((item) =>
+          item.id === business.id
+            ? {
+                ...item,
+                status: updated.status,
+                isFeatured: updated.isFeatured ?? item.isFeatured,
+                sortWeight: updated.sortWeight ?? item.sortWeight,
+                slug: updated.slug || item.slug,
+              }
+            : item,
+        ),
+      );
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Could not update listing status.",
+      );
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  const removingBusy = Boolean(removing && busyId === removing.id);
+  const removingName = removing?.name || removing?.slug || "this business";
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <div>
+          <nav className={styles.breadcrumb} aria-label="Breadcrumb">
+            <a href="/">Home</a>
+            <span className={styles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <span className={styles.breadcrumbCurrent}>Businesses</span>
+          </nav>
+          <h1 className={styles.title}>Businesses</h1>
+          <p className={styles.lead}>
+            Review submissions, publish listings, and manage the marketplace
+            gate.
+          </p>
+        </div>
+        <div className={styles.headActions}>
+          <p className={styles.count}>
+            {loading
+              ? "Loading…"
+              : filter === "all" && !categoryFilterId
+                ? `${total} total`
+                : `${visible.length} shown · ${total} total`}
+          </p>
+          <button
+            type="button"
+            className={`${styles.filterOpenBtn}${categoryFilterId ? ` ${styles.filterOpenBtnActive}` : ""}`}
+            onClick={openFilterModal}
+            aria-label={
+              categoryFilterId
+                ? `Filter, ${activeFilterCount} active`
+                : "Filter"
+            }
+          >
+            <span>Filter</span>
+            {activeFilterCount > 0 ? (
+              <em className={styles.filterCount}>{activeFilterCount}</em>
+            ) : null}
+          </button>
+          <button
+            type="button"
+            className={styles.addBtn}
+            aria-label="Add business"
+            onClick={() => setModalOpen(true)}
+          >
+            <img src="/images/icons/add.svg" alt="" width={18} height={18} />
+          </button>
+        </div>
+      </header>
+
+      <div className={styles.filterBar}>
+        {activeCategory ? (
+          <>
+            <div className={styles.activeFilters}>
+              <button
+                type="button"
+                className={styles.activeChip}
+                onClick={clearCategoryFilter}
+                aria-label={`Clear category filter ${categoryLabel(activeCategory)}`}
+              >
+                <span>{categoryLabel(activeCategory)}</span>
+                <em aria-hidden>×</em>
+              </button>
+            </div>
+            <div className={styles.filterDivider} aria-hidden />
+          </>
+        ) : null}
+
+        <div className={styles.filters} role="tablist" aria-label="Listing status">
+          {FILTERS.map((item) => {
+            const active = filter === item.key;
+            const count = counts[item.key];
+            return (
+              <button
+                key={item.key}
+                type="button"
+                role="tab"
+                aria-selected={active}
+                className={`${styles.filter} ${active ? styles.filterActive : ""}`}
+                onClick={() => selectFilter(item.key)}
+              >
+                <span>{item.label}</span>
+                <em>{loading ? "—" : count}</em>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {error ? (
+        <div className={styles.error} role="alert">
+          <p className={styles.errorTitle}>API unavailable</p>
+          <p className={styles.errorCopy}>{error}</p>
+          <p className={styles.errorHint}>
+            Start the marketplace backend on port 3001, then refresh.
+          </p>
+        </div>
+      ) : loading ? (
+        <div className={styles.loading}>Loading businesses…</div>
+      ) : (
+        <BusinessCardList
+          items={visible}
+          busyId={busyId}
+          specialTick={specialTick}
+          emptyTitle={
+            filter === "pending_review"
+              ? "No pending submissions"
+              : "No businesses in this view"
+          }
+          emptyCopy={
+            filter === "pending_review"
+              ? "New shop registrations will appear here for approval."
+              : "Try another filter, or add a Meshkee business to the marketplace."
+          }
+          onApprove={(business) => void setStatus(business, "published")}
+          onDisable={async (business) => {
+            const nextStatus =
+              business.status === "hidden" ? "published" : "hidden";
+            await setStatus(business, nextStatus);
+          }}
+          onRemove={setRemoving}
+          onMakeSpecial={setMakingSpecial}
+          onMetaTag={(business) => {
+            const lines = [
+              `Name: ${business.name || business.slug}`,
+              `Slug: /${business.slug}`,
+              `Category: ${business.categoryName || "Uncategorized"}`,
+              `Status: ${business.status}`,
+              `Featured: ${business.isFeatured ? "yes" : "no"}`,
+            ].join("\n");
+            window.alert(lines);
+          }}
+        />
+      )}
+
+      {filterModalOpen ? (
+        <div
+          className={styles.overlay}
+          role="presentation"
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget) {
+              setFilterModalOpen(false);
+            }
+          }}
+        >
+          <div
+            className={styles.modal}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={filterTitleId}
+          >
+            <div className={styles.modalHead}>
+              <div>
+                <p className={styles.kicker}>Businesses</p>
+                <h2 id={filterTitleId} className={styles.modalTitle}>
+                  Filter
+                </h2>
+              </div>
+              <button
+                type="button"
+                className={styles.closeBtn}
+                aria-label="Close"
+                onClick={() => setFilterModalOpen(false)}
+              >
+                ×
+              </button>
+            </div>
+
+            <form
+              className={styles.modalForm}
+              onSubmit={(event) => {
+                event.preventDefault();
+                applyCategoryFilter();
+              }}
+            >
+              <CategoryTreeSelect
+                categories={categories}
+                value={draftCategoryIds}
+                selection="single"
+                dropdownVariant="inFlow"
+                label="Category"
+                placeholder="Select category"
+                onChange={setDraftCategoryIds}
+              />
+
+              <div className={styles.modalActions}>
+                <button
+                  type="button"
+                  className={`outline-btn ${styles.ghostBtn}`}
+                  onClick={() => {
+                    setDraftCategoryIds([]);
+                  }}
+                >
+                  Clear
+                </button>
+                <button type="submit" className={`outline-btn ${styles.applyBtn}`}>
+                  Apply
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
+
+      <AddBusinessModal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        onConnected={() => {
+          void reload();
+        }}
+      />
+
+      <MakeSpecialModal
+        open={Boolean(makingSpecial)}
+        business={makingSpecial}
+        onClose={() => setMakingSpecial(null)}
+        onSaved={() => setSpecialTick((value) => value + 1)}
+      />
+
+      <ConfirmDialog
+        open={Boolean(removing)}
+        kicker="Remove listing"
+        title={`Remove ${removingName}?`}
+        message="This unlists the business from the marketplace. The Meshkee business stays intact."
+        confirmLabel="Remove"
+        cancelLabel="Keep"
+        danger
+        busy={removingBusy}
+        onClose={() => {
+          if (!removingBusy) setRemoving(null);
+        }}
+        onConfirm={async () => {
+          if (!removing) return;
+          setBusyId(removing.id);
+          setError("");
+          try {
+            await deleteMarketplaceBusiness(removing.id);
+            setRemoving(null);
+            await reload();
+          } catch (err) {
+            setError(
+              err instanceof Error
+                ? err.message
+                : "Could not remove listing.",
+            );
+          } finally {
+            setBusyId(null);
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/components/CategoryTreeSelect.module.css b/components/CategoryTreeSelect.module.css
new file mode 100644
index 0000000..fd8cec4
--- /dev/null
+++ b/components/CategoryTreeSelect.module.css
@@ -0,0 +1,235 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+.picker {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.field > span {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.control {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.control input {
+  width: 100%;
+  min-height: 42px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fff;
+  padding: 10px 36px 10px 12px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-black);
+  outline: none;
+}
+
+.control input:focus {
+  border-color: var(--color-black);
+}
+
+.caret {
+  position: absolute;
+  inset-inline-end: 10px;
+  width: 18px;
+  height: 18px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.caret::before {
+  content: "";
+  display: block;
+  width: 7px;
+  height: 7px;
+  margin: 4px auto 0;
+  border-inline-end: 1.5px solid var(--color-soft);
+  border-bottom: 1.5px solid var(--color-soft);
+  transform: rotate(45deg);
+  transition: transform 0.15s ease;
+}
+
+.caretOpen::before {
+  margin-top: 8px;
+  transform: rotate(225deg);
+}
+
+.dropdown {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% - 2px);
+  inset-inline: 0;
+  max-height: 280px;
+  overflow: auto;
+  border: 1px solid #ececec;
+  border-radius: 5px;
+  background: #fff;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
+}
+
+.dropdownInFlow {
+  position: relative;
+  top: 0;
+  z-index: 1;
+  max-height: 320px;
+  box-shadow: none;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 6px 0;
+}
+
+.node {
+  margin: 0;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  min-height: 34px;
+}
+
+.expand,
+.expandSpacer {
+  flex: 0 0 22px;
+  width: 22px;
+  height: 22px;
+}
+
+.expand {
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid #e4e4e4;
+  border-radius: 3px;
+  background: #fff;
+  color: var(--color-soft);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease;
+}
+
+.expand:hover,
+.expand:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.expandOpen {
+  color: var(--color-muted);
+}
+
+.option {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px 6px 4px;
+  border: none;
+  background: transparent;
+  text-align: start;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.option:hover,
+.option:focus-visible {
+  background: #f7f7f7;
+  color: var(--color-black);
+}
+
+.optionActive {
+  color: var(--color-black);
+}
+
+.check {
+  flex: 0 0 14px;
+  width: 14px;
+  font-size: 11px;
+  line-height: 1;
+  color: var(--color-black);
+}
+
+.optionLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.optionSlug {
+  margin-inline-start: auto;
+  flex: 0 0 auto;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--color-soft);
+}
+
+.empty {
+  margin: 0;
+  padding: 16px 14px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-body);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-white);
+  background: var(--color-black);
+  border-color: var(--color-black);
+}
+
+.chip:hover,
+.chip:focus-visible {
+  opacity: 0.88;
+}
+
+.chip:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
diff --git a/components/CategoryTreeSelect.tsx b/components/CategoryTreeSelect.tsx
new file mode 100644
index 0000000..6ae207e
--- /dev/null
+++ b/components/CategoryTreeSelect.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  categoryLabel,
+  type MeshkeeCategory,
+} from "@/services/meshkee-categories";
+import styles from "./CategoryTreeSelect.module.css";
+
+type TreeNode = MeshkeeCategory & { children: TreeNode[] };
+
+function buildTree(categories: MeshkeeCategory[]): TreeNode[] {
+  const byId = new Map<string, TreeNode>();
+  for (const category of categories) {
+    byId.set(category.id, { ...category, children: [] });
+  }
+
+  const roots: TreeNode[] = [];
+  for (const node of byId.values()) {
+    if (node.parentId && byId.has(node.parentId)) {
+      byId.get(node.parentId)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  const sortNodes = (nodes: TreeNode[]) => {
+    nodes.sort(
+      (a, b) =>
+        a.sortOrder - b.sortOrder ||
+        a.name.localeCompare(b.name, undefined, { sensitivity: "base" }),
+    );
+    for (const node of nodes) sortNodes(node.children);
+  };
+  sortNodes(roots);
+  return roots;
+}
+
+function matchesQuery(category: MeshkeeCategory, q: string) {
+  if (!q) return true;
+  const hay = [category.name, category.nameFa ?? "", category.slug, ...category.tags]
+    .join(" ")
+    .toLowerCase();
+  return hay.includes(q);
+}
+
+/** Keep ancestors of matches so the tree path stays visible while searching. */
+function filterTree(nodes: TreeNode[], q: string): TreeNode[] {
+  if (!q) return nodes;
+  const result: TreeNode[] = [];
+  for (const node of nodes) {
+    const children = filterTree(node.children, q);
+    if (matchesQuery(node, q) || children.length) {
+      result.push({ ...node, children });
+    }
+  }
+  return result;
+}
+
+function collectExpandIds(nodes: TreeNode[], into: Set<string>) {
+  for (const node of nodes) {
+    if (node.children.length) {
+      into.add(node.id);
+      collectExpandIds(node.children, into);
+    }
+  }
+}
+
+type Props = {
+  categories: MeshkeeCategory[];
+  value: string[];
+  onChange: (ids: string[]) => void;
+  disabled?: boolean;
+  label?: string;
+  /** multi (default) or single select */
+  selection?: "single" | "multiple";
+  /** overlay floats; inFlow expands inside the parent (better in modals) */
+  dropdownVariant?: "overlay" | "inFlow";
+  placeholder?: string;
+};
+
+export default function CategoryTreeSelect({
+  categories,
+  value,
+  onChange,
+  disabled = false,
+  label = "Category",
+  selection = "multiple",
+  dropdownVariant = "overlay",
+  placeholder = "Search categories…",
+}: Props) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+  const single = selection === "single";
+
+  const tree = useMemo(() => buildTree(categories), [categories]);
+  const q = query.trim().toLowerCase();
+  const visibleTree = useMemo(() => filterTree(tree, q), [tree, q]);
+
+  const byId = useMemo(() => {
+    const map = new Map<string, MeshkeeCategory>();
+    for (const category of categories) map.set(category.id, category);
+    return map;
+  }, [categories]);
+
+  const selected = value
+    .map((id) => byId.get(id))
+    .filter((item): item is MeshkeeCategory => Boolean(item));
+  const selectedLabel = selected[0] ? categoryLabel(selected[0]) : "";
+
+  useEffect(() => {
+    if (!q) return;
+    const next = new Set<string>();
+    collectExpandIds(visibleTree, next);
+    setExpanded(next);
+  }, [q, visibleTree]);
+
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(event: MouseEvent) {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+        if (single) setQuery("");
+      }
+    }
+    function onKey(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpen(false);
+        if (single) setQuery("");
+      }
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, single]);
+
+  function pick(id: string) {
+    if (single) {
+      onChange([id]);
+      setOpen(false);
+      setQuery("");
+      return;
+    }
+    const next = value.includes(id)
+      ? value.filter((item) => item !== id)
+      : [...value, id];
+    onChange(next);
+  }
+
+  function toggleExpand(id: string) {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function renderNodes(nodes: TreeNode[], depth: number) {
+    return nodes.map((node) => {
+      const hasChildren = node.children.length > 0;
+      const isExpanded = q ? true : expanded.has(node.id);
+      const active = value.includes(node.id);
+
+      return (
+        <li key={node.id} className={styles.node}>
+          <div
+            className={styles.row}
+            style={{ paddingInlineStart: `${8 + depth * 16}px` }}
+          >
+            {hasChildren ? (
+              <button
+                type="button"
+                className={`${styles.expand} ${isExpanded ? styles.expandOpen : ""}`}
+                aria-label={isExpanded ? "Collapse" : "Expand"}
+                tabIndex={-1}
+                onClick={() => toggleExpand(node.id)}
+              >
+                <span aria-hidden>{isExpanded ? "−" : "+"}</span>
+              </button>
+            ) : (
+              <span className={styles.expandSpacer} aria-hidden />
+            )}
+            <button
+              type="button"
+              className={`${styles.option} ${active ? styles.optionActive : ""}`}
+              disabled={disabled}
+              onClick={() => pick(node.id)}
+            >
+              {!single ? (
+                <span className={styles.check} aria-hidden>
+                  {active ? "✓" : ""}
+                </span>
+              ) : null}
+              <span className={styles.optionLabel}>{categoryLabel(node)}</span>
+              {node.slug ? (
+                <span className={styles.optionSlug}>/{node.slug}</span>
+              ) : null}
+            </button>
+          </div>
+          {hasChildren && isExpanded ? (
+            <ul className={styles.list}>{renderNodes(node.children, depth + 1)}</ul>
+          ) : null}
+        </li>
+      );
+    });
+  }
+
+  const inputValue = open || !single ? query : selectedLabel;
+
+  return (
+    <div className={styles.root} ref={rootRef}>
+      <div className={styles.picker}>
+        <label className={styles.field}>
+          <span>{label}</span>
+          <div className={styles.control}>
+            <input
+              value={inputValue}
+              disabled={disabled}
+              placeholder={
+                single && selectedLabel && !open ? selectedLabel : placeholder
+              }
+              aria-expanded={open}
+              aria-haspopup="listbox"
+              onFocus={() => setOpen(true)}
+              onChange={(event) => {
+                setQuery(event.target.value);
+                setOpen(true);
+              }}
+              onClick={() => setOpen(true)}
+            />
+            <button
+              type="button"
+              className={`${styles.caret} ${open ? styles.caretOpen : ""}`}
+              aria-label={open ? "Close categories" : "Open categories"}
+              disabled={disabled}
+              onClick={() => setOpen((prev) => !prev)}
+            />
+          </div>
+        </label>
+
+        {open ? (
+          <div
+            className={`${styles.dropdown} ${
+              dropdownVariant === "inFlow" ? styles.dropdownInFlow : ""
+            }`}
+            role="listbox"
+            aria-multiselectable={!single}
+          >
+            {visibleTree.length ? (
+              <ul className={styles.list}>{renderNodes(visibleTree, 0)}</ul>
+            ) : (
+              <p className={styles.empty}>No categories found</p>
+            )}
+          </div>
+        ) : null}
+      </div>
+
+      {!single && selected.length ? (
+        <div className={styles.chips}>
+          {selected.map((category) => (
+            <button
+              key={category.id}
+              type="button"
+              className={styles.chip}
+              disabled={disabled}
+              title="Remove category"
+              onClick={() => pick(category.id)}
+            >
+              {categoryLabel(category)}
+              <span aria-hidden>×</span>
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/CategoryTreeView.module.css b/components/CategoryTreeView.module.css
new file mode 100644
index 0000000..8f190a6
--- /dev/null
+++ b/components/CategoryTreeView.module.css
@@ -0,0 +1,108 @@
+.list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.node {
+  min-width: 0;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  padding-block: 6px;
+  padding-inline-end: 8px;
+  border-bottom: 1px solid #f3f3f3;
+  transition: background-color 0.15s ease;
+}
+
+.row:hover {
+  background: #f7f7f7;
+}
+
+.name {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-black);
+}
+
+.hint {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-inline-start: auto;
+  flex: 0 0 auto;
+}
+
+.actions button {
+  border: 0;
+  background: transparent;
+  padding: 0 10px;
+  min-height: 32px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  cursor: pointer;
+}
+
+.actions button:first-child {
+  padding-left: 0;
+}
+
+.actions button + button {
+  border-left: 1px solid #e8e8e8;
+}
+
+.actions button:hover,
+.actions button:focus-visible {
+  color: var(--color-black);
+}
+
+.actions .danger:hover,
+.actions .danger:focus-visible {
+  color: #b42318;
+}
+
+.expand,
+.expandSpacer {
+  flex: 0 0 22px;
+  width: 22px;
+  height: 22px;
+}
+
+.expand {
+  display: grid;
+  place-items: center;
+  border: 1px solid #e4e4e4;
+  border-radius: 3px;
+  background: #fff;
+  color: var(--color-soft);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.expand:hover,
+.expand:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.empty {
+  margin: 0;
+  padding: 28px 8px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--color-muted);
+}
diff --git a/components/CategoryTreeView.tsx b/components/CategoryTreeView.tsx
new file mode 100644
index 0000000..43138af
--- /dev/null
+++ b/components/CategoryTreeView.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import styles from "./CategoryTreeView.module.css";
+
+export type CategoryTreeNode = {
+  id: string;
+  name: string;
+  hint?: string;
+  children: CategoryTreeNode[];
+};
+
+export type CategoryTreeActions = {
+  onAddChild?: (id: string) => void;
+  onEdit?: (id: string) => void;
+  onRemove?: (id: string) => void;
+};
+
+export default function CategoryTreeView({
+  nodes,
+  emptyLabel = "No categories yet",
+  actions,
+}: {
+  nodes: CategoryTreeNode[];
+  emptyLabel?: string;
+  actions?: CategoryTreeActions;
+}) {
+  if (!nodes.length) {
+    return <p className={styles.empty}>{emptyLabel}</p>;
+  }
+
+  return (
+    <ul className={styles.list}>
+      {nodes.map((node) => (
+        <TreeBranch key={node.id} node={node} depth={0} actions={actions} />
+      ))}
+    </ul>
+  );
+}
+
+function TreeBranch({
+  node,
+  depth,
+  actions,
+}: {
+  node: CategoryTreeNode;
+  depth: number;
+  actions?: CategoryTreeActions;
+}) {
+  const [open, setOpen] = useState(false);
+  const childCount = node.children.length;
+  const previousChildCount = useRef(childCount);
+  const hasChildren = childCount > 0;
+  const hasActions = Boolean(
+    actions?.onAddChild || actions?.onEdit || actions?.onRemove,
+  );
+
+  useEffect(() => {
+    if (childCount > previousChildCount.current) {
+      setOpen(true);
+    }
+    previousChildCount.current = childCount;
+  }, [childCount]);
+
+  return (
+    <li className={styles.node}>
+      <div
+        className={styles.row}
+        style={{ paddingInlineStart: `${12 + depth * 56}px` }}
+      >
+        {hasChildren ? (
+          <button
+            type="button"
+            className={`${styles.expand} ${open ? styles.expandOpen : ""}`}
+            aria-expanded={open}
+            aria-label={open ? "Collapse" : "Expand"}
+            onClick={() => setOpen((value) => !value)}
+          >
+            <span aria-hidden>{open ? "−" : "+"}</span>
+          </button>
+        ) : (
+          <span className={styles.expandSpacer} aria-hidden />
+        )}
+        <span className={styles.name} dir="auto">
+          {node.name}
+        </span>
+        {node.hint ? <span className={styles.hint}>{node.hint}</span> : null}
+        {hasActions ? (
+          <div className={styles.actions}>
+            {actions?.onAddChild ? (
+              <button
+                type="button"
+                onClick={() => actions.onAddChild?.(node.id)}
+              >
+                Add sub
+              </button>
+            ) : null}
+            {actions?.onEdit ? (
+              <button type="button" onClick={() => actions.onEdit?.(node.id)}>
+                Edit
+              </button>
+            ) : null}
+            {actions?.onRemove ? (
+              <button
+                type="button"
+                className={styles.danger}
+                onClick={() => actions.onRemove?.(node.id)}
+              >
+                Remove
+              </button>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+      {hasChildren && open ? (
+        <ul className={styles.list}>
+          {node.children.map((child) => (
+            <TreeBranch
+              key={child.id}
+              node={child}
+              depth={depth + 1}
+              actions={actions}
+            />
+          ))}
+        </ul>
+      ) : null}
+    </li>
+  );
+}
diff --git a/components/ConfirmDialog.module.css b/components/ConfirmDialog.module.css
new file mode 100644
index 0000000..cb7f7d9
--- /dev/null
+++ b/components/ConfirmDialog.module.css
@@ -0,0 +1,135 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: grid;
+  place-items: center;
+  padding: 24px var(--page-pad);
+  background: rgba(0, 0, 0, 0.72);
+  backdrop-filter: blur(2px);
+  animation: overlayIn 0.22s ease;
+}
+
+.dialog {
+  width: min(100%, 420px);
+  padding: 32px 30px 26px;
+  border-radius: 5px;
+  background: var(--color-white);
+  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.35);
+  animation: dialogIn 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.kicker {
+  margin: 0 0 10px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  line-height: 1.35;
+}
+
+.message {
+  margin: 14px 0 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6;
+  color: var(--color-muted);
+}
+
+.actions {
+  margin-top: 28px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.cancelBtn,
+.confirmBtn {
+  min-height: 38px;
+  padding: 0 18px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
+
+.cancelBtn {
+  border-color: #d4d4d4;
+  color: var(--color-soft);
+}
+
+.cancelBtn::before {
+  content: none;
+}
+
+.cancelBtn:hover,
+.cancelBtn:focus-visible {
+  color: var(--color-black);
+  border-color: var(--color-black);
+  background: transparent;
+}
+
+.confirmBtn {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.confirmDanger {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.confirmDanger:hover,
+.confirmDanger:focus-visible {
+  background: #1a1a1a;
+}
+
+.confirmDanger::before {
+  background: #fff;
+}
+
+.confirmDanger:hover,
+.confirmDanger:focus-visible {
+  color: var(--color-black);
+}
+
+.cancelBtn:disabled,
+.confirmBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@keyframes overlayIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes dialogIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .overlay,
+  .dialog {
+    animation: none;
+  }
+}
diff --git a/components/ConfirmDialog.tsx b/components/ConfirmDialog.tsx
new file mode 100644
index 0000000..9d49d74
--- /dev/null
+++ b/components/ConfirmDialog.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { useEffect, useId, useRef } from "react";
+import styles from "./ConfirmDialog.module.css";
+
+export default function ConfirmDialog({
+  open,
+  title,
+  kicker = "Confirm",
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  danger = false,
+  busy = false,
+  onConfirm,
+  onClose,
+}: {
+  open: boolean;
+  title: string;
+  kicker?: string;
+  message: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  danger?: boolean;
+  busy?: boolean;
+  onConfirm: () => void;
+  onClose: () => void;
+}) {
+  const titleId = useId();
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    cancelRef.current?.focus();
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && !busy) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open, busy, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={styles.overlay}
+      role="presentation"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget && !busy) onClose();
+      }}
+    >
+      <div
+        className={styles.dialog}
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+      >
+        <p className={styles.kicker}>{kicker}</p>
+        <h2 id={titleId} className={styles.title}>
+          {title}
+        </h2>
+        <p className={styles.message}>{message}</p>
+        <div className={styles.actions}>
+          <button
+            ref={cancelRef}
+            type="button"
+            className={`outline-btn ${styles.cancelBtn}`}
+            disabled={busy}
+            onClick={onClose}
+          >
+            {cancelLabel}
+          </button>
+          <button
+            type="button"
+            className={`outline-btn ${styles.confirmBtn} ${danger ? styles.confirmDanger : ""}`}
+            disabled={busy}
+            onClick={onConfirm}
+          >
+            {busy ? "…" : confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/CustomerHome.module.css b/components/CustomerHome.module.css
new file mode 100644
index 0000000..1ca98e7
--- /dev/null
+++ b/components/CustomerHome.module.css
@@ -0,0 +1,109 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.title {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.lead {
+  margin: 8px 0 0;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-soft);
+  max-width: 42ch;
+}
+
+.card {
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  padding: 28px 24px;
+}
+
+.cardTitle {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.cardCopy {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.55;
+  color: var(--color-muted);
+}
+
+.cta {
+  display: inline-flex;
+  margin-top: 18px;
+  min-height: 36px;
+  align-items: center;
+  padding: 0 18px;
+  border: 1px solid var(--color-black);
+  border-radius: 5px;
+  background: var(--color-black);
+  color: var(--color-white);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.cta:hover {
+  background: transparent;
+  color: var(--color-black);
+}
+
+.list {
+  display: grid;
+  gap: 14px;
+  margin: 0;
+}
+
+.row {
+  display: grid;
+  gap: 4px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.row:last-child {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.row dt {
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.row dd {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 400;
+  color: var(--color-black);
+}
diff --git a/components/CustomerHome.tsx b/components/CustomerHome.tsx
new file mode 100644
index 0000000..6b9a4cc
--- /dev/null
+++ b/components/CustomerHome.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import { useAuth } from "@/components/AuthProvider";
+import { en } from "@/lib/i18n/en";
+import { getAdminDashboardOrigin } from "@/lib/host";
+import { openBusinessDashboardAsUser } from "@/lib/session-handoff";
+import { getDisplayName, getFirstName } from "@/lib/userName";
+import styles from "./CustomerHome.module.css";
+
+export default function CustomerHome() {
+  const { user, isBusinessOwner, isSuperAdmin } = useAuth();
+  const firstName = getFirstName(user);
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <div>
+          <h1 className={styles.title}>
+            {en.customerHome.title}, {firstName}
+          </h1>
+          <p className={styles.lead}>{en.customerHome.lead}</p>
+        </div>
+      </header>
+
+      <section className={styles.card}>
+        <h2 className={styles.cardTitle}>{getDisplayName(user)}</h2>
+        <p className={styles.cardCopy}>{en.customerHome.lead}</p>
+      </section>
+
+      {isSuperAdmin ? (
+        <section className={styles.card}>
+          <h2 className={styles.cardTitle}>{en.openAdminDashboard}</h2>
+          <p className={styles.cardCopy}>{en.customerHome.adminLead}</p>
+          <a
+            href={`${getAdminDashboardOrigin()}/`}
+            className={styles.cta}
+          >
+            {en.customerHome.adminCta}
+          </a>
+        </section>
+      ) : null}
+
+      {isBusinessOwner ? (
+        <section className={styles.card}>
+          <h2 className={styles.cardTitle}>{en.openBusinessDashboard}</h2>
+          <p className={styles.cardCopy}>{en.customerHome.businessLead}</p>
+          <button
+            type="button"
+            className={styles.cta}
+            onClick={() => openBusinessDashboardAsUser("/profile")}
+          >
+            {en.customerHome.businessCta}
+          </button>
+        </section>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/CustomerProfile.tsx b/components/CustomerProfile.tsx
new file mode 100644
index 0000000..9a65ae5
--- /dev/null
+++ b/components/CustomerProfile.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useAuth } from "@/components/AuthProvider";
+import { en } from "@/lib/i18n/en";
+import { getDisplayName } from "@/lib/userName";
+import styles from "./CustomerHome.module.css";
+
+export default function CustomerProfile() {
+  const { user } = useAuth();
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <div>
+          <h1 className={styles.title}>{en.customerProfile.title}</h1>
+          <p className={styles.lead}>{en.customerProfile.lead}</p>
+        </div>
+      </header>
+
+      <section className={styles.card}>
+        <dl className={styles.list}>
+          <div className={styles.row}>
+            <dt>{en.customerProfile.name}</dt>
+            <dd>{getDisplayName(user)}</dd>
+          </div>
+          <div className={styles.row}>
+            <dt>{en.customerProfile.phone}</dt>
+            <dd dir="ltr">{user?.cellNumber || "—"}</dd>
+          </div>
+          <div className={styles.row}>
+            <dt>{en.customerProfile.email}</dt>
+            <dd>{user?.email?.trim() || en.customerProfile.emptyEmail}</dd>
+          </div>
+        </dl>
+      </section>
+    </div>
+  );
+}
diff --git a/components/CustomerShell.tsx b/components/CustomerShell.tsx
new file mode 100644
index 0000000..d453565
--- /dev/null
+++ b/components/CustomerShell.tsx
@@ -0,0 +1,133 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+import AccountMenu from "@/components/AccountMenu";
+import { useAuth } from "@/components/AuthProvider";
+import { customerNavItems } from "@/data/customer-nav";
+import { en } from "@/lib/i18n/en";
+import { getAdminDashboardOrigin } from "@/lib/host";
+import { openBusinessDashboardAsUser } from "@/lib/session-handoff";
+import { getDisplayName } from "@/lib/userName";
+import styles from "./DashboardShell.module.css";
+
+const websiteUrl =
+  process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
+  "http://localhost:3000";
+
+export default function CustomerShell({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { user, logout, isBusinessOwner, isSuperAdmin } = useAuth();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const displayName = getDisplayName(user);
+
+  const publicPath = pathname.startsWith("/customer")
+    ? pathname.replace(/^\/customer/, "") || "/"
+    : pathname;
+
+  return (
+    <div className={styles.shell}>
+      <aside className={`${styles.sidebar} ${menuOpen ? styles.sidebarOpen : ""}`}>
+        <div className={styles.brand}>
+          <img src="/images/icons/logo.png" alt="" width={48} height={48} />
+          <div className={styles.brandText}>
+            <span>{en.brandName}</span>
+            <strong>{en.customerBrandSubtitle}</strong>
+          </div>
+        </div>
+
+        <nav className={styles.nav} aria-label="Account">
+          {customerNavItems.map((item) => {
+            const active =
+              item.href === "/"
+                ? publicPath === "/"
+                : publicPath === item.href ||
+                  publicPath.startsWith(`${item.href}/`);
+            return (
+              <Link
+                key={item.label}
+                href={item.href}
+                className={`${styles.navItem} ${active ? styles.navItemActive : ""}`}
+                onClick={() => setMenuOpen(false)}
+              >
+                <img src={item.icon} alt="" width={18} height={18} />
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className={styles.sidebarFoot}>
+          <p className={styles.userLabel}>{displayName}</p>
+          {isSuperAdmin ? (
+            <a
+              href={`${getAdminDashboardOrigin()}/`}
+              className={styles.siteLink}
+            >
+              {en.openAdminDashboard}
+            </a>
+          ) : null}
+          {isBusinessOwner ? (
+            <button
+              type="button"
+              className={styles.siteLink}
+              onClick={() => openBusinessDashboardAsUser("/profile")}
+            >
+              {en.openBusinessDashboard}
+            </button>
+          ) : null}
+          <a href={websiteUrl} className={styles.siteLink}>
+            {en.viewWebsite}
+          </a>
+          <button
+            type="button"
+            className={`outline-btn ${styles.logoutBtn}`}
+            onClick={() => {
+              logout();
+              router.replace("/login");
+            }}
+          >
+            {en.logOut}
+          </button>
+        </div>
+      </aside>
+
+      {menuOpen ? (
+        <button
+          type="button"
+          className={styles.backdrop}
+          aria-label="Close menu"
+          onClick={() => setMenuOpen(false)}
+        />
+      ) : null}
+
+      <div className={styles.main}>
+        <header className={styles.topbar}>
+          <button
+            type="button"
+            className={styles.menuBtn}
+            aria-label="Open menu"
+            onClick={() => setMenuOpen(true)}
+          >
+            <img src="/images/icons/menu.svg" alt="" width={22} height={22} />
+          </button>
+          <div className={styles.topbarCopy}>
+            <p className={styles.eyebrow}>{en.customerEyebrow}</p>
+            <p className={styles.topbarHint}>{en.customerHint}</p>
+          </div>
+          <div className={styles.topbarActions}>
+            <AccountMenu />
+          </div>
+        </header>
+
+        <div className={styles.content}>{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/DashboardShell.module.css b/components/DashboardShell.module.css
new file mode 100644
index 0000000..9c1108d
--- /dev/null
+++ b/components/DashboardShell.module.css
@@ -0,0 +1,367 @@
+.shell {
+  min-height: 100vh;
+  background: #f6f6f6;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 20;
+  width: var(--sidebar-width);
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  padding: 28px 22px;
+  background: var(--color-white);
+  border-right: 1px solid #ececec;
+  overflow-y: auto;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 40px;
+  padding: 0 6px;
+  min-width: 0;
+}
+
+.brandLogo {
+  flex: 0 0 auto;
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  border-radius: 5px;
+  background: #f6f6f6;
+}
+
+.brand img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.brandText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.brandBusiness {
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: none;
+  color: var(--color-black);
+  line-height: 1.3;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.brandTitle {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+  text-transform: none;
+  color: var(--color-muted);
+  line-height: 1.35;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.brandText span:not(.brandTitle) {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.brandText strong {
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+}
+
+.navItem {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 44px;
+  padding: 0 14px;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  transition: background 0.25s ease, color 0.25s ease;
+}
+
+.navItem img {
+  opacity: 0.55;
+  transition: opacity 0.25s ease, filter 0.25s ease;
+}
+
+.navItem:hover,
+.navItem:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.navItem:hover img,
+.navItem:focus-visible img {
+  opacity: 1;
+}
+
+.navItemActive {
+  background: var(--color-black);
+  color: var(--color-white);
+}
+
+.navItemActive img {
+  opacity: 1;
+  filter: invert(1);
+}
+
+.navGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.navGroupBtn {
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.navGroupActive {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.navGroupActive img {
+  opacity: 1;
+}
+
+.navChevron {
+  margin-left: auto;
+  width: 5px;
+  height: 9px;
+  opacity: 0.45;
+  transform: rotate(90deg);
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.navChevronOpen {
+  transform: rotate(-90deg);
+  opacity: 0.8;
+}
+
+.navSub {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 0 4px 18px;
+}
+
+.navSubItem {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 0 14px;
+  border-radius: 5px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  cursor: pointer;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.navSubItem:hover,
+.navSubItem:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.navSubItemActive {
+  background: var(--color-black);
+  color: var(--color-white);
+}
+
+.sidebarFoot {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding-top: 20px;
+  border-top: 1px solid #ececec;
+}
+
+.userLabel {
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  color: var(--color-muted);
+}
+
+.siteLink {
+  appearance: none;
+  display: inline;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  padding: 0 6px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.siteLink:hover,
+.siteLink:focus-visible {
+  color: var(--color-black);
+}
+
+.logoutBtn {
+  min-height: 34px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
+
+.backdrop {
+  display: none;
+}
+
+.main {
+  margin-left: var(--sidebar-width);
+  min-width: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 22px var(--page-pad);
+  background: var(--color-white);
+  border-bottom: 1px solid #ececec;
+}
+
+.menuBtn {
+  display: none;
+  width: 40px;
+  height: 40px;
+  place-items: center;
+}
+
+.topbarCopy {
+  flex: 1;
+  min-width: 0;
+}
+
+.eyebrow {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.32em;
+  text-transform: uppercase;
+}
+
+.topbarHint {
+  margin-top: 4px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.topbarActions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.iconBtn {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+}
+
+.avatar {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  background: var(--color-card);
+}
+
+.content {
+  padding: 36px var(--page-pad) 56px;
+}
+
+@media (max-width: 980px) {
+  .shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sidebar {
+    inset: 0 auto 0 0;
+    width: min(86vw, var(--sidebar-width));
+    transform: translateX(-105%);
+    transition: transform 0.3s ease;
+    box-shadow: 18px 0 40px rgba(0, 0, 0, 0.08);
+  }
+
+  .sidebarOpen {
+    transform: translateX(0);
+  }
+
+  .main {
+    margin-left: 0;
+  }
+
+  .backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.28);
+    z-index: 15;
+  }
+
+  .menuBtn {
+    display: grid;
+  }
+}
diff --git a/components/DashboardShell.tsx b/components/DashboardShell.tsx
new file mode 100644
index 0000000..611d5a3
--- /dev/null
+++ b/components/DashboardShell.tsx
@@ -0,0 +1,211 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import AccountMenu from "@/components/AccountMenu";
+import { useAuth } from "@/components/AuthProvider";
+import { navItems, type NavItem } from "@/data/home";
+import { getDisplayName } from "@/lib/userName";
+import styles from "./DashboardShell.module.css";
+
+const websiteUrl =
+  process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
+  "http://localhost:3000";
+
+function hrefMatches(href: string, pathname: string) {
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+function activeChildHref(
+  children: { href: string }[],
+  pathname: string,
+) {
+  let best = "";
+  for (const child of children) {
+    if (!hrefMatches(child.href, pathname)) continue;
+    if (child.href.length > best.length) best = child.href;
+  }
+  return best;
+}
+
+function groupActive(item: Extract<NavItem, { type: "group" }>, pathname: string) {
+  return activeChildHref(item.children, pathname) !== "";
+}
+
+export default function DashboardShell({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const router = useRouter();
+  const { user, logout } = useAuth();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [openGroup, setOpenGroup] = useState<string | null>(() => {
+    const active = navItems.find(
+      (item) => item.type === "group" && groupActive(item, pathname),
+    );
+    return active?.type === "group" ? active.label : null;
+  });
+  const displayName = getDisplayName(user);
+
+  useEffect(() => {
+    const active = navItems.find(
+      (item) => item.type === "group" && groupActive(item, pathname),
+    );
+    if (active?.type === "group") setOpenGroup(active.label);
+  }, [pathname]);
+
+  return (
+    <div className={styles.shell}>
+      <aside className={`${styles.sidebar} ${menuOpen ? styles.sidebarOpen : ""}`}>
+        <div className={styles.brand}>
+          <img src="/images/icons/logo.png" alt="" width={48} height={48} />
+          <div className={styles.brandText}>
+            <span>IranBay</span>
+            <strong>Dashboard</strong>
+          </div>
+        </div>
+
+        <nav className={styles.nav} aria-label="Dashboard">
+          {navItems.map((item) => {
+            if (item.type === "group") {
+              const active = groupActive(item, pathname);
+              const expanded = openGroup === item.label;
+              return (
+                <div key={item.label} className={styles.navGroup}>
+                  <button
+                    type="button"
+                    className={`${styles.navItem} ${styles.navGroupBtn} ${
+                      active ? styles.navGroupActive : ""
+                    }`}
+                    aria-expanded={expanded}
+                    onClick={() =>
+                      setOpenGroup((current) =>
+                        current === item.label ? null : item.label,
+                      )
+                    }
+                  >
+                    <img src={item.icon} alt="" width={18} height={18} />
+                    <span>{item.label}</span>
+                    <img
+                      className={`${styles.navChevron} ${
+                        expanded ? styles.navChevronOpen : ""
+                      }`}
+                      src="/images/icons/chevron.svg"
+                      alt=""
+                      width={5}
+                      height={9}
+                    />
+                  </button>
+                  {expanded ? (
+                    <div className={styles.navSub}>
+                      {item.children.map((child) => {
+                        const childActive =
+                          child.href ===
+                          activeChildHref(item.children, pathname);
+                        return (
+                          <Link
+                            key={child.href}
+                            href={child.href}
+                            prefetch
+                            className={`${styles.navSubItem} ${
+                              childActive ? styles.navSubItemActive : ""
+                            }`}
+                            onClick={(event) => {
+                              setMenuOpen(false);
+                              // Ensure navigation even if soft-route is flaky.
+                              if (
+                                event.metaKey ||
+                                event.ctrlKey ||
+                                event.shiftKey ||
+                                event.altKey ||
+                                event.button !== 0
+                              ) {
+                                return;
+                              }
+                              event.preventDefault();
+                              router.push(child.href);
+                            }}
+                          >
+                            {child.label}
+                          </Link>
+                        );
+                      })}
+                    </div>
+                  ) : null}
+                </div>
+              );
+            }
+
+            const active =
+              item.href === "/"
+                ? pathname === "/"
+                : pathname === item.href ||
+                  pathname.startsWith(`${item.href}/`);
+            return (
+              <Link
+                key={item.label}
+                href={item.href}
+                className={`${styles.navItem} ${active ? styles.navItemActive : ""}`}
+                onClick={() => setMenuOpen(false)}
+              >
+                <img src={item.icon} alt="" width={18} height={18} />
+                <span>{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        <div className={styles.sidebarFoot}>
+          <p className={styles.userLabel}>{displayName}</p>
+          <a href={websiteUrl} className={styles.siteLink}>
+            View website
+          </a>
+          <button
+            type="button"
+            className={`outline-btn ${styles.logoutBtn}`}
+            onClick={() => {
+              logout();
+              router.replace("/login");
+            }}
+          >
+            Log out
+          </button>
+        </div>
+      </aside>
+
+      {menuOpen ? (
+        <button
+          type="button"
+          className={styles.backdrop}
+          aria-label="Close menu"
+          onClick={() => setMenuOpen(false)}
+        />
+      ) : null}
+
+      <div className={styles.main}>
+        <header className={styles.topbar}>
+          <button
+            type="button"
+            className={styles.menuBtn}
+            aria-label="Open menu"
+            onClick={() => setMenuOpen(true)}
+          >
+            <img src="/images/icons/menu.svg" alt="" width={22} height={22} />
+          </button>
+          <div className={styles.topbarCopy}>
+            <p className={styles.eyebrow}>Admin workspace</p>
+            <p className={styles.topbarHint}>Marketplace control</p>
+          </div>
+          <div className={styles.topbarActions}>
+            <AccountMenu />
+          </div>
+        </header>
+
+        <div className={styles.content}>{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/EditBusinessPage.module.css b/components/EditBusinessPage.module.css
new file mode 100644
index 0000000..aa1034f
--- /dev/null
+++ b/components/EditBusinessPage.module.css
@@ -0,0 +1,533 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 28px 32px;
+  border-radius: 5px;
+  background-color: var(--color-card);
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+}
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.breadcrumb a {
+  color: inherit;
+  transition: color 0.2s ease;
+}
+
+.breadcrumb a:hover,
+.breadcrumb a:focus-visible {
+  color: var(--color-black);
+}
+
+.breadcrumbSep {
+  opacity: 0.45;
+}
+
+.breadcrumbCurrent {
+  color: var(--color-muted);
+}
+
+.title {
+  font-size: clamp(20px, 2.2vw, 28px);
+  font-weight: 400;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+.lead {
+  margin-top: 10px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.headActions,
+.footerActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ghostBtn,
+.saveBtn {
+  min-height: 38px;
+  padding: 0 18px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
+
+.ghostBtn {
+  border-color: #d4d4d4;
+  color: var(--color-soft);
+}
+
+.ghostBtn::before {
+  content: none;
+}
+
+.ghostBtn:hover,
+.ghostBtn:focus-visible {
+  color: var(--color-black);
+  border-color: var(--color-black);
+  background: transparent;
+}
+
+.saveBtn {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.saveBtn:hover,
+.saveBtn:focus-visible {
+  color: var(--color-black);
+}
+
+.saveBtn::before {
+  background: #fff;
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.card {
+  background: var(--color-white);
+  border-radius: 5px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.mediaGrid {
+  display: grid;
+  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
+  gap: 18px;
+}
+
+.logoBlock,
+.bannerBlock,
+.tagBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.blockHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.inlineActions {
+  display: flex;
+  gap: 10px;
+}
+
+.linkBtn {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.linkBtn:hover,
+.linkBtn:focus-visible {
+  color: var(--color-black);
+}
+
+.linkBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.aspectRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.aspectBtn {
+  min-width: 44px;
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  background: #fff;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  color: var(--color-soft);
+}
+
+.aspectBtn:hover,
+.aspectBtn:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.aspectBtnActive {
+  border-color: var(--color-black);
+  background: var(--color-black);
+  color: var(--color-white);
+}
+
+.aspectBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.logoFrame,
+.bannerFrame {
+  width: 100%;
+  border: 1px dashed #d8d8d8;
+  border-radius: 5px;
+  background: #fafafa;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  color: var(--color-body);
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.logoFrame {
+  aspect-ratio: 1;
+}
+
+.logoFrame img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+  background: transparent;
+}
+
+.bannerFrame img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.fileInput {
+  display: none;
+}
+
+.twoCol {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.identityRow {
+  display: grid;
+  grid-template-columns: 4fr 3fr 3fr 2fr;
+  gap: 14px;
+  align-items: start;
+}
+
+.addressMetaRow {
+  display: grid;
+  grid-template-columns: minmax(120px, 1.2fr) repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.descriptionField {
+  margin-top: 18px;
+}
+
+.fieldHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 28px;
+}
+
+.fieldHead > span {
+  line-height: 1;
+  margin: 0;
+}
+
+.aiBtn {
+  box-sizing: border-box;
+  min-width: 36px;
+  height: 28px;
+  min-height: 28px;
+  padding: 0 10px;
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  background: #fff;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  line-height: 26px;
+  color: var(--color-muted);
+  transition:
+    border-color 0.35s ease,
+    color 0.35s ease,
+    background-color 0.35s ease,
+    box-shadow 0.35s ease;
+}
+
+.aiBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.aiBtnActive {
+  border-color: var(--color-black);
+  color: var(--color-black);
+  background: #f4f4f4;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.field span {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.field > input,
+.field > textarea,
+.field > select,
+.phoneRow input,
+.phoneRow select {
+  width: 100%;
+  min-height: 42px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fff;
+  padding: 10px 12px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-black);
+  outline: none;
+  transition: border-color 0.35s ease, box-shadow 0.35s ease;
+}
+
+.field > select {
+  cursor: pointer;
+}
+
+.field > textarea {
+  min-height: 88px;
+  resize: vertical;
+}
+
+.field > input:hover,
+.field > textarea:hover,
+.field > select:hover,
+.phoneRow input:hover,
+.phoneRow select:hover {
+  border-color: #d8d8d8;
+}
+
+.field > input:focus,
+.field > textarea:focus,
+.field > select:focus,
+.phoneRow input:focus,
+.phoneRow select:focus {
+  border-color: var(--color-black);
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.2;
+  color: var(--color-muted);
+  background: #fff;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+
+.chipActive {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.tagRow,
+.phoneRow {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  align-items: center;
+}
+
+.tagInput {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  min-height: 42px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fff;
+  padding: 6px 8px;
+  transition: border-color 0.35s ease, box-shadow 0.35s ease;
+}
+
+.tagInput:hover {
+  border-color: #d8d8d8;
+}
+
+.tagInput:focus-within {
+  border-color: var(--color-black);
+}
+
+.tagInput input {
+  flex: 1 1 120px;
+  min-width: 120px;
+  min-height: 28px;
+  border: 0;
+  background: transparent;
+  padding: 4px 6px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-black);
+  outline: none;
+}
+
+.phoneGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.phoneRow {
+  grid-template-columns: 88px minmax(0, 1fr) auto;
+  min-width: 0;
+}
+
+.phoneRow select {
+  min-width: 0;
+  padding-inline: 8px;
+}
+
+.phoneRow input {
+  min-width: 0;
+}
+
+.addressCard {
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: #fafafa;
+}
+
+.addressHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.addressHead strong {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.loading,
+.errorBox {
+  border-radius: 5px;
+  background: var(--color-white);
+  padding: 28px 24px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.errorBox {
+  color: #8a1f11;
+}
+
+.footerActions {
+  justify-content: flex-end;
+  padding: 4px 0 12px;
+}
+
+@media (max-width: 900px) {
+  .head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .mediaGrid,
+  .twoCol,
+  .identityRow,
+  .addressMetaRow,
+  .phoneGrid,
+  .phoneRow {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/components/EditBusinessPage.tsx b/components/EditBusinessPage.tsx
new file mode 100644
index 0000000..48f232b
--- /dev/null
+++ b/components/EditBusinessPage.tsx
@@ -0,0 +1,1109 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import AiPromptPanel from "@/components/AiPromptPanel";
+import CategoryTreeSelect from "@/components/CategoryTreeSelect";
+import ImageCropDialog from "@/components/ImageCropDialog";
+import RichTextArea from "@/components/RichTextArea";
+import { getMarketplaceBusiness, updateMarketplaceBusiness } from "@/services/marketplace";
+import {
+  buildBusinessAboutAiPrompt,
+  buildBusinessVisionAiPrompt,
+  fillBusinessProfileFieldByAi,
+  type BusinessProfileAiField,
+} from "@/services/meshkee-business-ai";
+import {
+  getBusinessProfile,
+  updateBusinessProfile,
+  uploadBusinessMedia,
+  type BusinessAddress,
+  type BusinessPhoneNumber,
+} from "@/services/meshkee-businesses";
+import {
+  cityLabel,
+  listCitiesInProvince,
+  listIranProvinces,
+  matchCityName,
+  type MeshkeeCity,
+} from "@/services/meshkee-cities";
+import {
+  categoryLabel,
+  searchMeshkeeCategories,
+  type MeshkeeCategory,
+} from "@/services/meshkee-categories";
+import styles from "./EditBusinessPage.module.css";
+import richStyles from "./RichTextArea.module.css";
+import aiStyles from "@/styles/ai.module.css";
+
+const BANNER_ASPECT = 18 / 6;
+
+const LOGO_ASPECTS = [
+  { id: "1:1", label: "1:1", value: 1 },
+  { id: "3:2", label: "3:2", value: 3 / 2 },
+  { id: "16:9", label: "16:9", value: 16 / 9 },
+] as const;
+
+type LogoAspectId = (typeof LOGO_ASPECTS)[number]["id"];
+
+function closestLogoAspectId(width: number, height: number): LogoAspectId {
+  if (!width || !height) return "1:1";
+  const ratio = width / height;
+  let best: LogoAspectId = LOGO_ASPECTS[0].id;
+  let bestDist = Number.POSITIVE_INFINITY;
+  for (const option of LOGO_ASPECTS) {
+    const dist = Math.abs(Math.log(ratio / option.value));
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = option.id;
+    }
+  }
+  return best;
+}
+
+function detectLogoAspectId(src: string): Promise<LogoAspectId> {
+  return new Promise((resolve) => {
+    const image = new Image();
+    image.onload = () => {
+      resolve(closestLogoAspectId(image.naturalWidth, image.naturalHeight));
+    };
+    image.onerror = () => resolve("1:1");
+    image.src = src;
+  });
+}
+
+function slugify(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 100);
+}
+
+function emptyAddress(): BusinessAddress {
+  return {
+    name: "",
+    province: "",
+    city: "",
+    address: "",
+    postalCode: "",
+    landline: "",
+  };
+}
+
+function emptyPhone(): BusinessPhoneNumber {
+  return { type: "cell", number: "" };
+}
+
+function toPlainText(value: string) {
+  if (!value.includes("<")) return value;
+  return value
+    .replace(/<br\s*\/?>/gi, "\n")
+    .replace(/<\/p>/gi, "\n")
+    .replace(/<[^>]+>/g, "")
+    .replace(/&nbsp;/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+function uniqueTags(categories: MeshkeeCategory[], ids: string[]) {
+  const selected = new Set(ids);
+  const tags = new Set<string>();
+  for (const category of categories) {
+    if (!selected.has(category.id)) continue;
+    for (const tag of category.tags) {
+      if (tag.trim()) tags.add(tag.trim());
+    }
+  }
+  return [...tags];
+}
+
+export default function EditBusinessPage({
+  listingId,
+  meshkeeBusinessId,
+  variant = "admin",
+}: {
+  listingId?: string;
+  meshkeeBusinessId?: string;
+  variant?: "admin" | "business";
+}) {
+  const router = useRouter();
+  const logoRef = useRef<HTMLInputElement>(null);
+  const bannerRef = useRef<HTMLInputElement>(null);
+  const isBusiness = variant === "business";
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState("");
+  const [meshkeeId, setMeshkeeId] = useState("");
+  const [slug, setSlug] = useState("");
+
+  const [nameEn, setNameEn] = useState("");
+  const [nameFa, setNameFa] = useState("");
+  const [title, setTitle] = useState("");
+  const [about, setAbout] = useState("");
+  const [vision, setVision] = useState("");
+  const [categoryIds, setCategoryIds] = useState<string[]>([]);
+  const [categories, setCategories] = useState<MeshkeeCategory[]>([]);
+  const [tags, setTags] = useState<string[]>([]);
+  const [tagInput, setTagInput] = useState("");
+  const [phones, setPhones] = useState<BusinessPhoneNumber[]>([emptyPhone()]);
+  const [addresses, setAddresses] = useState<BusinessAddress[]>([emptyAddress()]);
+  const [provinces, setProvinces] = useState<MeshkeeCity[]>([]);
+  const [citiesByProvinceId, setCitiesByProvinceId] = useState<
+    Record<string, MeshkeeCity[]>
+  >({});
+
+  const [logoUrl, setLogoUrl] = useState<string | null>(null);
+  const [logoMediaId, setLogoMediaId] = useState<string | null>(null);
+  const [logoFile, setLogoFile] = useState<File | null>(null);
+  const [logoRemoved, setLogoRemoved] = useState(false);
+
+  const [bannerUrl, setBannerUrl] = useState<string | null>(null);
+  const [bannerMediaId, setBannerMediaId] = useState<string | null>(null);
+  const [bannerFile, setBannerFile] = useState<File | null>(null);
+  const [bannerRemoved, setBannerRemoved] = useState(false);
+
+  const [cropTarget, setCropTarget] = useState<"logo" | "banner" | null>(null);
+  const [cropSource, setCropSource] = useState<string | null>(null);
+  const [cropFileName, setCropFileName] = useState("image");
+  const [logoAspectId, setLogoAspectId] = useState<LogoAspectId>("1:1");
+
+  const logoAspect =
+    LOGO_ASPECTS.find((option) => option.id === logoAspectId)?.value ?? 1;
+
+  const [aiField, setAiField] = useState<BusinessProfileAiField | null>(null);
+  const [aiBusy, setAiBusy] = useState(false);
+  const [aiError, setAiError] = useState("");
+
+  useEffect(() => {
+    if (!logoUrl) {
+      setLogoAspectId("1:1");
+      return;
+    }
+    let cancelled = false;
+    void detectLogoAspectId(logoUrl).then((id) => {
+      if (!cancelled) setLogoAspectId(id);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [logoUrl]);
+
+  function closeCropper() {
+    setCropTarget(null);
+    setCropFileName("image");
+    setCropSource((prev) => {
+      if (prev?.startsWith("blob:")) {
+        requestAnimationFrame(() => URL.revokeObjectURL(prev));
+      }
+      return null;
+    });
+  }
+
+  function openCropper(target: "logo" | "banner", file: File) {
+    if (cropSource?.startsWith("blob:")) URL.revokeObjectURL(cropSource);
+    setCropTarget(target);
+    setCropSource(URL.createObjectURL(file));
+    setCropFileName(file.name || target);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setLoading(true);
+      setError("");
+      try {
+        let resolvedMeshkeeId = meshkeeBusinessId?.trim() ?? "";
+        let listingSlug = "";
+
+        if (!resolvedMeshkeeId) {
+          if (!listingId) {
+            throw new Error("Missing business id.");
+          }
+          const listing = await getMarketplaceBusiness(listingId);
+          if (cancelled) return;
+          resolvedMeshkeeId = String(listing.meshkeeBusinessId);
+          listingSlug = listing.slug;
+        }
+
+        const [profile, cats, iranProvinces] = await Promise.all([
+          getBusinessProfile(resolvedMeshkeeId),
+          searchMeshkeeCategories(""),
+          listIranProvinces(),
+        ]);
+        if (cancelled) return;
+
+        setMeshkeeId(resolvedMeshkeeId);
+        setSlug(listingSlug);
+        setCategories(cats);
+        setProvinces(iranProvinces);
+        setNameEn(profile.profile.nameEn);
+        setNameFa(profile.profile.nameFa);
+        setTitle(profile.profile.title ?? "");
+        setAbout(toPlainText(profile.profile.about));
+        setVision(profile.profile.vision);
+        setCategoryIds(profile.profile.categoryIds);
+        setTags(uniqueTags(cats, profile.profile.categoryIds));
+        setPhones(
+          profile.profile.phoneNumbers.length
+            ? (profile.profile.phoneNumbers as BusinessPhoneNumber[])
+            : [emptyPhone()],
+        );
+        const nextAddresses = profile.addresses.length
+          ? profile.addresses
+          : [emptyAddress()];
+        setAddresses(nextAddresses);
+
+        const cityCache: Record<string, MeshkeeCity[]> = {};
+        await Promise.all(
+          nextAddresses.map(async (address) => {
+            const province = matchCityName(iranProvinces, address.province);
+            if (!province || cityCache[province.id]) return;
+            cityCache[province.id] = await listCitiesInProvince(province.id);
+          }),
+        );
+        if (cancelled) return;
+        setCitiesByProvinceId(cityCache);
+        setLogoUrl(profile.profile.logoUrl);
+        setLogoMediaId(profile.profile.logoMediaId);
+        setBannerUrl(profile.profile.bannerUrl);
+        setBannerMediaId(profile.profile.bannerMediaId);
+      } catch (err) {
+        if (cancelled) return;
+        setError(
+          err instanceof Error ? err.message : "Could not load business.",
+        );
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [listingId, meshkeeBusinessId]);
+
+  function setCategoriesAndTags(ids: string[]) {
+    setCategoryIds(ids);
+    setTags(uniqueTags(categories, ids));
+  }
+
+  const selectedCategoryNames = categories
+    .filter((category) => categoryIds.includes(category.id))
+    .map((category) => categoryLabel(category))
+    .join(", ");
+
+  const aboutAiPrompt = buildBusinessAboutAiPrompt({
+    nameEn,
+    nameFa,
+    categories: selectedCategoryNames,
+  });
+
+  const visionAiPrompt = buildBusinessVisionAiPrompt({
+    nameEn,
+    nameFa,
+    categories: selectedCategoryNames,
+  });
+
+  async function runAiFill(field: BusinessProfileAiField, prompt: string) {
+    if (!meshkeeId) return;
+    if (!nameEn.trim() && !nameFa.trim()) {
+      setAiError("Enter a business name before using AI.");
+      return;
+    }
+    setAiBusy(true);
+    setAiError("");
+    try {
+      const result = await fillBusinessProfileFieldByAi(meshkeeId, {
+        field,
+        prompt,
+        nameEn: nameEn.trim() || undefined,
+        nameFa: nameFa.trim() || undefined,
+        categories: selectedCategoryNames || undefined,
+      });
+      if (field === "about") {
+        setAbout(result.text ?? "");
+      } else {
+        setVision(result.html ?? "");
+      }
+      setAiField(null);
+    } catch (err) {
+      setAiError(err instanceof Error ? err.message : "AI request failed.");
+    } finally {
+      setAiBusy(false);
+    }
+  }
+
+  function patchAddress(index: number, patch: Partial<BusinessAddress>) {
+    setAddresses((prev) =>
+      prev.map((item, i) => (i === index ? { ...item, ...patch } : item)),
+    );
+  }
+
+  async function ensureCitiesForProvince(provinceId: string) {
+    if (citiesByProvinceId[provinceId]) return citiesByProvinceId[provinceId];
+    const cities = await listCitiesInProvince(provinceId);
+    setCitiesByProvinceId((prev) => ({ ...prev, [provinceId]: cities }));
+    return cities;
+  }
+
+  async function onProvinceChange(index: number, provinceNameEn: string) {
+    const province = matchCityName(provinces, provinceNameEn);
+    patchAddress(index, { province: provinceNameEn, city: "" });
+    if (province) {
+      await ensureCitiesForProvince(province.id);
+    }
+  }
+
+  function addTag(raw: string) {
+    const tag = raw.trim();
+    if (!tag) return;
+    setTags((prev) => (prev.includes(tag) ? prev : [...prev, tag]));
+    const matches = categories.filter((category) =>
+      category.tags.some((item) => item.toLowerCase() === tag.toLowerCase()),
+    );
+    if (matches.length) {
+      setCategoryIds((prev) => {
+        const next = new Set(prev);
+        for (const match of matches) next.add(match.id);
+        return [...next];
+      });
+    }
+    setTagInput("");
+  }
+
+  function removeTag(tag: string) {
+    setTags((prev) => prev.filter((item) => item !== tag));
+  }
+
+  async function onSave() {
+    if (!meshkeeId) return;
+    setSaving(true);
+    setError("");
+    try {
+      let nextLogoId: number | null | undefined = undefined;
+      let nextBannerId: number | null | undefined = undefined;
+
+      if (logoFile) {
+        const uploaded = await uploadBusinessMedia(meshkeeId, logoFile);
+        nextLogoId = Number(uploaded.id);
+      } else if (logoRemoved) {
+        nextLogoId = null;
+      }
+
+      if (bannerFile) {
+        const uploaded = await uploadBusinessMedia(meshkeeId, bannerFile);
+        nextBannerId = Number(uploaded.id);
+      } else if (bannerRemoved) {
+        nextBannerId = null;
+      }
+
+      const cleanPhones = phones
+        .map((phone) => ({
+          type: phone.type,
+          number: phone.number.trim(),
+        }))
+        .filter((phone) => phone.number.length >= 3);
+
+      const cleanAddresses = addresses
+        .map((address) => ({
+          id: address.id,
+          name: address.name.trim(),
+          province: address.province.trim(),
+          city: address.city.trim(),
+          address: address.address.trim(),
+          postalCode: address.postalCode.trim(),
+          landline: address.landline?.trim() || null,
+        }))
+        .filter(
+          (address) =>
+            address.province &&
+            address.city &&
+            address.address &&
+            address.postalCode,
+        );
+
+      await updateBusinessProfile(meshkeeId, {
+        nameEn: nameEn.trim(),
+        nameFa: nameFa.trim(),
+        title: title.trim(),
+        about,
+        vision,
+        categoryIds: categoryIds.map(Number),
+        phoneNumbers: cleanPhones,
+        addresses: cleanAddresses,
+        ...(nextLogoId !== undefined ? { logoMediaId: nextLogoId } : {}),
+        ...(nextBannerId !== undefined ? { bannerMediaId: nextBannerId } : {}),
+      });
+
+      if (!isBusiness) {
+        if (!listingId) {
+          throw new Error("Missing listing id.");
+        }
+        const nextSlug = slugify(slug);
+        if (!nextSlug) {
+          throw new Error(
+            "Enter a valid slug (lowercase letters, numbers, hyphens).",
+          );
+        }
+        await updateMarketplaceBusiness(listingId, {
+          slug: nextSlug,
+          name: nameEn.trim() || nameFa.trim() || undefined,
+        });
+        setSlug(nextSlug);
+        router.push("/businesses");
+        router.refresh();
+      } else {
+        setSaved(true);
+        window.setTimeout(() => setSaved(false), 2500);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not save business.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <div>
+          {isBusiness ? (
+            <>
+              <h1 className={styles.title}>Profile</h1>
+              <p className={styles.lead}>
+                Update how your business appears on Meshkee.
+              </p>
+            </>
+          ) : (
+            <>
+              <nav className={styles.breadcrumb} aria-label="Breadcrumb">
+                <Link href="/">Home</Link>
+                <span className={styles.breadcrumbSep} aria-hidden>
+                  /
+                </span>
+                <Link href="/businesses">Businesses</Link>
+                <span className={styles.breadcrumbSep} aria-hidden>
+                  /
+                </span>
+                <span className={styles.breadcrumbCurrent}>Edit</span>
+              </nav>
+              <h1 className={styles.title}>Edit business</h1>
+              <p className={styles.lead}>
+                {slug ? `/${slug}` : "Update Meshkee profile for this listing."}
+              </p>
+            </>
+          )}
+        </div>
+        <div className={styles.headActions}>
+          {!isBusiness ? (
+            <Link href="/businesses" className={`outline-btn ${styles.ghostBtn}`}>
+              Back
+            </Link>
+          ) : null}
+          <button
+            type="button"
+            className={`outline-btn ${styles.saveBtn}`}
+            disabled={loading || saving || !meshkeeId}
+            onClick={() => void onSave()}
+          >
+            {saving ? "Saving…" : saved ? "Saved" : "Save"}
+          </button>
+        </div>
+      </header>
+
+      {loading ? (
+        <div className={styles.loading}>Loading profile…</div>
+      ) : error && !meshkeeId ? (
+        <div className={styles.errorBox} role="alert">
+          {error}
+        </div>
+      ) : (
+        <div className={styles.layout}>
+          <section className={styles.card}>
+            <h2 className={styles.sectionTitle}>Media</h2>
+            <div className={styles.mediaGrid}>
+              <div className={styles.logoBlock}>
+                <div className={styles.blockHead}>
+                  <span>Logo</span>
+                  <div className={styles.inlineActions}>
+                    <button
+                      type="button"
+                      className={styles.linkBtn}
+                      onClick={() => logoRef.current?.click()}
+                      disabled={saving}
+                    >
+                      {logoUrl ? "Replace" : "Upload"}
+                    </button>
+                    {logoUrl ? (
+                      <button
+                        type="button"
+                        className={styles.linkBtn}
+                        disabled={saving}
+                        onClick={() => {
+                          setLogoFile(null);
+                          setLogoUrl(null);
+                          setLogoMediaId(null);
+                          setLogoRemoved(true);
+                        }}
+                      >
+                        Remove
+                      </button>
+                    ) : null}
+                  </div>
+                </div>
+                <div
+                  className={styles.aspectRow}
+                  role="group"
+                  aria-label="Logo aspect ratio"
+                >
+                  {LOGO_ASPECTS.map((option) => (
+                    <button
+                      key={option.id}
+                      type="button"
+                      className={
+                        option.id === logoAspectId
+                          ? `${styles.aspectBtn} ${styles.aspectBtnActive}`
+                          : styles.aspectBtn
+                      }
+                      aria-pressed={option.id === logoAspectId}
+                      disabled={saving}
+                      onClick={() => setLogoAspectId(option.id)}
+                    >
+                      {option.label}
+                    </button>
+                  ))}
+                </div>
+                <button
+                  type="button"
+                  className={styles.logoFrame}
+                  style={{ aspectRatio: String(logoAspect) }}
+                  onClick={() => logoRef.current?.click()}
+                  disabled={saving}
+                >
+                  {logoUrl ? (
+                    <img src={logoUrl} alt="" />
+                  ) : (
+                    <span>Add logo</span>
+                  )}
+                </button>
+                <input
+                  ref={logoRef}
+                  type="file"
+                  accept="image/*"
+                  className={styles.fileInput}
+                  onChange={(event) => {
+                    const file = event.target.files?.[0];
+                    event.target.value = "";
+                    if (!file) return;
+                    openCropper("logo", file);
+                  }}
+                />
+              </div>
+
+              <div className={styles.bannerBlock}>
+                <div className={styles.blockHead}>
+                  <span>Banner · 18:6</span>
+                  <div className={styles.inlineActions}>
+                    <button
+                      type="button"
+                      className={styles.linkBtn}
+                      onClick={() => bannerRef.current?.click()}
+                      disabled={saving}
+                    >
+                      {bannerUrl ? "Replace" : "Upload"}
+                    </button>
+                    {bannerUrl ? (
+                      <button
+                        type="button"
+                        className={styles.linkBtn}
+                        disabled={saving}
+                        onClick={() => {
+                          setBannerFile(null);
+                          setBannerUrl(null);
+                          setBannerMediaId(null);
+                          setBannerRemoved(true);
+                        }}
+                      >
+                        Remove
+                      </button>
+                    ) : null}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  className={styles.bannerFrame}
+                  style={{ aspectRatio: String(BANNER_ASPECT) }}
+                  onClick={() => bannerRef.current?.click()}
+                  disabled={saving}
+                >
+                  {bannerUrl ? (
+                    <img src={bannerUrl} alt="" />
+                  ) : (
+                    <span>Add banner</span>
+                  )}
+                </button>
+                <input
+                  ref={bannerRef}
+                  type="file"
+                  accept="image/*"
+                  className={styles.fileInput}
+                  onChange={(event) => {
+                    const file = event.target.files?.[0];
+                    event.target.value = "";
+                    if (!file) return;
+                    openCropper("banner", file);
+                  }}
+                />
+              </div>
+            </div>
+          </section>
+
+          <ImageCropDialog
+            open={Boolean(cropTarget && cropSource)}
+            imageSrc={cropSource}
+            title={cropTarget === "logo" ? "Crop logo" : "Crop banner"}
+            aspect={cropTarget === "logo" ? logoAspect : BANNER_ASPECT}
+            outputType={cropTarget === "logo" ? "image/png" : "image/jpeg"}
+            fileName={cropFileName}
+            onCancel={closeCropper}
+            onComplete={(file, previewUrl) => {
+              if (cropTarget === "logo") {
+                if (logoUrl?.startsWith("blob:")) URL.revokeObjectURL(logoUrl);
+                setLogoFile(file);
+                setLogoRemoved(false);
+                setLogoUrl(previewUrl);
+              } else {
+                if (bannerUrl?.startsWith("blob:")) {
+                  URL.revokeObjectURL(bannerUrl);
+                }
+                setBannerFile(file);
+                setBannerRemoved(false);
+                setBannerUrl(previewUrl);
+              }
+              closeCropper();
+            }}
+          />
+
+          <section className={styles.card}>
+            <h2 className={styles.sectionTitle}>Identity</h2>
+            <div className={styles.identityRow}>
+              <CategoryTreeSelect
+                categories={categories}
+                value={categoryIds}
+                onChange={setCategoriesAndTags}
+                disabled={saving}
+              />
+              <label className={styles.field}>
+                <span>Name FA</span>
+                <input
+                  className="fa"
+                  lang="fa"
+                  dir="rtl"
+                  value={nameFa}
+                  onChange={(event) => setNameFa(event.target.value)}
+                  disabled={saving}
+                  required
+                />
+              </label>
+              <label className={styles.field}>
+                <span>Name EN</span>
+                <input
+                  value={nameEn}
+                  onChange={(event) => setNameEn(event.target.value)}
+                  disabled={saving}
+                  required
+                />
+              </label>
+              {!isBusiness ? (
+                <label className={styles.field}>
+                  <span>Slug</span>
+                  <input
+                    dir="ltr"
+                    value={slug}
+                    spellCheck={false}
+                    disabled={saving}
+                    placeholder="business-slug"
+                    onChange={(event) => setSlug(event.target.value)}
+                    onBlur={() => setSlug((value) => slugify(value) || value)}
+                    required
+                  />
+                </label>
+              ) : null}
+            </div>
+
+            <label className={styles.field}>
+              <span>Title</span>
+              <input
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
+                disabled={saving}
+                maxLength={255}
+                placeholder="e.g. E-Commerce and Programming team"
+              />
+            </label>
+
+            <div className={styles.stack}>
+              <div className={styles.field}>
+                <div className={styles.fieldHead}>
+                  <span>Abstract</span>
+                  <button
+                    type="button"
+                    className={`${styles.aiBtn} ${aiStyles.aiTrigger} ${aiField === "about" ? styles.aiBtnActive : ""}`}
+                    disabled={saving || aiBusy}
+                    onClick={() => {
+                      setAiError("");
+                      setAiField((current) =>
+                        current === "about" ? null : "about",
+                      );
+                    }}
+                  >
+                    AI
+                  </button>
+                </div>
+                <AiPromptPanel
+                  open={aiField === "about"}
+                  title="Generate abstract with AI"
+                  initialPrompt={aboutAiPrompt}
+                  busy={aiBusy}
+                  error={aiField === "about" ? aiError : ""}
+                  disabled={saving}
+                  onClose={() => {
+                    if (!aiBusy) {
+                      setAiField(null);
+                      setAiError("");
+                    }
+                  }}
+                  onRun={(prompt) => void runAiFill("about", prompt)}
+                />
+                <textarea
+                  rows={5}
+                  value={about}
+                  onChange={(event) => setAbout(event.target.value)}
+                  disabled={saving || aiBusy}
+                  placeholder="Write here…"
+                  className={
+                    aiBusy && aiField === "about"
+                      ? aiStyles.aiWorkingBorder
+                      : undefined
+                  }
+                />
+              </div>
+              <div className={`${styles.field} ${styles.descriptionField}`}>
+                <AiPromptPanel
+                  open={aiField === "vision"}
+                  title="Generate description with AI"
+                  initialPrompt={visionAiPrompt}
+                  busy={aiBusy}
+                  error={aiField === "vision" ? aiError : ""}
+                  disabled={saving}
+                  onClose={() => {
+                    if (!aiBusy) {
+                      setAiField(null);
+                      setAiError("");
+                    }
+                  }}
+                  onRun={(prompt) => void runAiFill("vision", prompt)}
+                />
+                <RichTextArea
+                  label="Description"
+                  value={vision}
+                  onChange={setVision}
+                  disabled={saving || aiBusy}
+                  minHeight={220}
+                  aiWorking={aiBusy && aiField === "vision"}
+                  toolbarEnd={
+                    <button
+                      type="button"
+                      className={`${richStyles.tool} ${richStyles.aiTool} ${aiStyles.aiTrigger} ${aiField === "vision" ? richStyles.toolActive : ""}`}
+                      disabled={saving || aiBusy}
+                      title="Generate with AI"
+                      onClick={() => {
+                        setAiError("");
+                        setAiField((current) =>
+                          current === "vision" ? null : "vision",
+                        );
+                      }}
+                    >
+                      AI
+                    </button>
+                  }
+                />
+              </div>
+            </div>
+          </section>
+
+          <section className={styles.card}>
+            <h2 className={styles.sectionTitle}>Tags</h2>
+            <div className={styles.tagBlock}>
+              <div className={styles.tagRow}>
+                <div className={styles.tagInput}>
+                  {tags.map((tag) => (
+                    <button
+                      key={tag}
+                      type="button"
+                      className={`${styles.chip} ${styles.chipActive}`}
+                      disabled={saving}
+                      onClick={() => removeTag(tag)}
+                      title="Remove tag"
+                    >
+                      {tag} ×
+                    </button>
+                  ))}
+                  <input
+                    value={tagInput}
+                    onChange={(event) => setTagInput(event.target.value)}
+                    onKeyDown={(event) => {
+                      if (event.key === "Enter") {
+                        event.preventDefault();
+                        addTag(tagInput);
+                      }
+                    }}
+                    placeholder={tags.length ? "" : "Add tag…"}
+                    disabled={saving}
+                  />
+                </div>
+                <button
+                  type="button"
+                  className={styles.linkBtn}
+                  disabled={saving || !tagInput.trim()}
+                  onClick={() => addTag(tagInput)}
+                >
+                  Add
+                </button>
+              </div>
+            </div>
+          </section>
+
+          <section className={styles.card}>
+            <div className={styles.blockHead}>
+              <h2 className={styles.sectionTitle}>Phone numbers</h2>
+              <button
+                type="button"
+                className={styles.linkBtn}
+                disabled={saving}
+                onClick={() => setPhones((prev) => [...prev, emptyPhone()])}
+              >
+                + Add
+              </button>
+            </div>
+            <div className={styles.phoneGrid}>
+              {phones.map((phone, index) => (
+                <div key={index} className={styles.phoneRow}>
+                  <select
+                    value={phone.type}
+                    disabled={saving}
+                    onChange={(event) => {
+                      const type = event.target
+                        .value as BusinessPhoneNumber["type"];
+                      setPhones((prev) =>
+                        prev.map((item, i) =>
+                          i === index ? { ...item, type } : item,
+                        ),
+                      );
+                    }}
+                  >
+                    <option value="cell">Cell</option>
+                    <option value="landline">Landline</option>
+                  </select>
+                  <input
+                    dir="ltr"
+                    value={phone.number}
+                    placeholder="+98912…"
+                    disabled={saving}
+                    onChange={(event) => {
+                      const number = event.target.value;
+                      setPhones((prev) =>
+                        prev.map((item, i) =>
+                          i === index ? { ...item, number } : item,
+                        ),
+                      );
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className={styles.linkBtn}
+                    disabled={saving || phones.length <= 1}
+                    onClick={() =>
+                      setPhones((prev) => prev.filter((_, i) => i !== index))
+                    }
+                  >
+                    Remove
+                  </button>
+                </div>
+              ))}
+            </div>
+          </section>
+
+          <section className={styles.card}>
+            <div className={styles.blockHead}>
+              <h2 className={styles.sectionTitle}>Addresses</h2>
+              <button
+                type="button"
+                className={styles.linkBtn}
+                disabled={saving}
+                onClick={() =>
+                  setAddresses((prev) => [...prev, emptyAddress()])
+                }
+              >
+                + Add
+              </button>
+            </div>
+            <div className={styles.stack}>
+              {addresses.map((address, index) => {
+                const province = matchCityName(provinces, address.province);
+                const cities = province
+                  ? (citiesByProvinceId[province.id] ?? [])
+                  : [];
+
+                return (
+                  <div
+                    key={address.id ?? `new-${index}`}
+                    className={styles.addressCard}
+                  >
+                    <div className={styles.addressHead}>
+                      <strong>Address {index + 1}</strong>
+                      <button
+                        type="button"
+                        className={styles.linkBtn}
+                        disabled={saving || addresses.length <= 1}
+                        onClick={() =>
+                          setAddresses((prev) =>
+                            prev.filter((_, i) => i !== index),
+                          )
+                        }
+                      >
+                        Remove
+                      </button>
+                    </div>
+                    <div className={styles.addressMetaRow}>
+                      <label className={styles.field}>
+                        <span>Name</span>
+                        <input
+                          value={address.name}
+                          placeholder="HQ, Warehouse…"
+                          disabled={saving}
+                          onChange={(event) =>
+                            patchAddress(index, { name: event.target.value })
+                          }
+                        />
+                      </label>
+                      <label className={styles.field}>
+                        <span>Province</span>
+                        <select
+                          value={province?.nameEn ?? address.province}
+                          disabled={saving || !provinces.length}
+                          onChange={(event) => {
+                            void onProvinceChange(index, event.target.value);
+                          }}
+                        >
+                          <option value="">Select…</option>
+                          {!province && address.province ? (
+                            <option value={address.province}>
+                              {address.province}
+                            </option>
+                          ) : null}
+                          {provinces.map((item) => (
+                            <option key={item.id} value={item.nameEn}>
+                              {cityLabel(item)}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                      <label className={styles.field}>
+                        <span>City</span>
+                        <select
+                          value={
+                            matchCityName(cities, address.city)?.nameEn ??
+                            address.city
+                          }
+                          disabled={saving || !address.province}
+                          onChange={(event) =>
+                            patchAddress(index, { city: event.target.value })
+                          }
+                        >
+                          <option value="">Select…</option>
+                          {!matchCityName(cities, address.city) &&
+                          address.city ? (
+                            <option value={address.city}>{address.city}</option>
+                          ) : null}
+                          {cities.map((item) => (
+                            <option key={item.id} value={item.nameEn}>
+                              {cityLabel(item)}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                      <label className={styles.field}>
+                        <span>Postal code</span>
+                        <input
+                          dir="ltr"
+                          value={address.postalCode}
+                          disabled={saving}
+                          onChange={(event) =>
+                            patchAddress(index, {
+                              postalCode: event.target.value,
+                            })
+                          }
+                        />
+                      </label>
+                      <label className={styles.field}>
+                        <span>Landline</span>
+                        <input
+                          dir="ltr"
+                          value={address.landline ?? ""}
+                          disabled={saving}
+                          onChange={(event) =>
+                            patchAddress(index, {
+                              landline: event.target.value,
+                            })
+                          }
+                        />
+                      </label>
+                    </div>
+                    <label className={styles.field}>
+                      <span>Address</span>
+                      <input
+                        value={address.address}
+                        disabled={saving}
+                        onChange={(event) =>
+                          patchAddress(index, { address: event.target.value })
+                        }
+                      />
+                    </label>
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+
+          {error ? (
+            <p className={styles.errorBox} role="alert">
+              {error}
+            </p>
+          ) : null}
+
+          <div className={styles.footerActions}>
+            <Link href="/businesses" className={`outline-btn ${styles.ghostBtn}`}>
+              Cancel
+            </Link>
+            <button
+              type="button"
+              className={`outline-btn ${styles.saveBtn}`}
+              disabled={saving}
+              onClick={() => void onSave()}
+            >
+              {saving ? "Saving…" : "Save changes"}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/ForgotPasswordForm.tsx b/components/ForgotPasswordForm.tsx
new file mode 100644
index 0000000..45a7512
--- /dev/null
+++ b/components/ForgotPasswordForm.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import Link from "next/link";
+import AuthShell from "@/components/AuthShell";
+import { AuthField } from "@/components/AuthFields";
+import styles from "@/components/AuthShell.module.css";
+
+export default function ForgotPasswordForm() {
+  return (
+    <AuthShell titleLine1="Forgot" titleLine2="Password">
+      <form
+        className={styles.form}
+        autoComplete="off"
+        onSubmit={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <AuthField
+          label="Phone Number"
+          name="phone"
+          type="tel"
+          autoComplete="off"
+        />
+        <div className={styles.actions}>
+          <Link href="/login" className={`outline-btn ${styles.secondaryBtn}`}>
+            Return to login
+          </Link>
+          <button type="submit" className={`outline-btn ${styles.primaryBtn}`}>
+            Send code
+          </button>
+        </div>
+      </form>
+    </AuthShell>
+  );
+}
diff --git a/components/HomeDashboard.module.css b/components/HomeDashboard.module.css
new file mode 100644
index 0000000..96b412f
--- /dev/null
+++ b/components/HomeDashboard.module.css
@@ -0,0 +1,331 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+  width: 100%;
+  max-width: none;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
+  gap: 8px;
+  min-height: 200px;
+}
+
+.heroCopy,
+.heroPanel {
+  background: var(--color-card);
+  border-radius: 5px;
+}
+
+.heroCopy {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 28px 32px;
+  background-color: var(--color-card);
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+}
+
+.kicker {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.36em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  margin-bottom: 12px;
+}
+
+.title {
+  font-size: clamp(20px, 2.2vw, 28px);
+  font-weight: 400;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.lead {
+  margin-top: 14px;
+  max-width: 520px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.6;
+  color: var(--color-muted);
+}
+
+.heroPanel {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 28px;
+  text-transform: uppercase;
+}
+
+.heroPanel span {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  color: var(--color-soft);
+}
+
+.heroPanel strong {
+  margin-top: 8px;
+  font-size: 22px;
+  font-weight: 500;
+  letter-spacing: 0.16em;
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.statTile {
+  min-height: 148px;
+  padding: 22px 24px;
+  border-radius: 5px;
+  background: var(--color-white);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.statLabel {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.statValue {
+  font-size: 36px;
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  line-height: 1;
+}
+
+.statHint {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-body);
+}
+
+.split {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+  gap: 8px;
+}
+
+.panel {
+  background: var(--color-white);
+  border-radius: 5px;
+  padding: 28px 26px;
+}
+
+.panelHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+.panelTitle {
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+}
+
+.panelSub {
+  margin-top: 6px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.panelBtn {
+  min-height: 30px;
+  padding: 0 14px;
+  font-size: 10px;
+  letter-spacing: 0.16em;
+}
+
+.list,
+.activity {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.listRow,
+.activityRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 16px;
+  align-items: center;
+  padding: 16px 0;
+  border-top: 1px solid #f0f0f0;
+}
+
+.listRow:first-child,
+.activityRow:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+
+.rowTitle {
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.rowMeta {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.rowSide {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+}
+
+.status {
+  font-size: 10px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  padding: 4px 8px;
+  border-radius: 3px;
+  background: #f6f6f6;
+}
+
+.statusLive {
+  background: #111;
+  color: #fff;
+}
+
+.statusReview {
+  background: #e8e8e8;
+}
+
+.statusDraft {
+  color: var(--color-soft);
+}
+
+.rowTime {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--color-body);
+}
+
+.errorNote {
+  margin: 0;
+  padding: 14px 18px;
+  border-radius: 5px;
+  background: #fff;
+  border: 1px solid #ececec;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.activityRow {
+  grid-template-columns: 12px minmax(0, 1fr) auto;
+  align-items: start;
+}
+
+.activityDot {
+  width: 8px;
+  height: 8px;
+  margin-top: 6px;
+  border-radius: 50%;
+  background: var(--color-black);
+}
+
+.actionsHead {
+  margin-bottom: 16px;
+}
+
+.actionGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.actionTile {
+  min-height: 132px;
+  padding: 24px;
+  border-radius: 5px;
+  background: var(--color-card);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.actionLabel {
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+}
+
+.actionDesc {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--color-muted);
+}
+
+@media (max-width: 1100px) {
+  .stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .split,
+  .actionGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .heroPanel {
+    min-height: 120px;
+  }
+
+  .heroCopy {
+    padding: 24px 20px;
+  }
+
+  .title {
+    white-space: normal;
+    font-size: 22px;
+    letter-spacing: 0.14em;
+  }
+
+  .stats {
+    grid-template-columns: 1fr;
+  }
+
+  .panelHead {
+    flex-direction: column;
+  }
+}
diff --git a/components/HomeDashboard.tsx b/components/HomeDashboard.tsx
new file mode 100644
index 0000000..3dfc543
--- /dev/null
+++ b/components/HomeDashboard.tsx
@@ -0,0 +1,332 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { useAuth } from "@/components/AuthProvider";
+import { listBusinesses } from "@/services/marketplace";
+import {
+  getMeshkeeBusiness,
+} from "@/services/meshkee-businesses";
+import { getFirstName } from "@/lib/userName";
+import type { MarketplaceBusiness } from "@/types/business";
+import styles from "./HomeDashboard.module.css";
+
+type RecentRow = {
+  id: string;
+  name: string;
+  category: string;
+  status: string;
+  statusKey: MarketplaceBusiness["status"];
+};
+
+const STATUS_LABEL: Record<MarketplaceBusiness["status"], string> = {
+  draft: "Draft",
+  pending_review: "Review",
+  published: "Published",
+  hidden: "Hidden",
+  rejected: "Rejected",
+};
+
+export default function HomeDashboard() {
+  const { user } = useAuth();
+  const firstName = getFirstName(user);
+  const [items, setItems] = useState<MarketplaceBusiness[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setLoading(true);
+      setError("");
+      try {
+        const data = await listBusinesses({ status: "all", limit: 100 });
+        if (cancelled) return;
+
+        const sorted = [...data.items].sort((a, b) => {
+          const aTime = Date.parse(a.updatedAt || a.createdAt || "") || 0;
+          const bTime = Date.parse(b.updatedAt || b.createdAt || "") || 0;
+          return bTime - aTime;
+        });
+        const pending = data.items.filter(
+          (item) => item.status === "pending_review",
+        );
+        const enrichIds = new Set(
+          [
+            ...sorted.slice(0, 4).map((item) => item.id),
+            ...pending.slice(0, 4).map((item) => item.id),
+          ],
+        );
+
+        const enrichedEntries = await Promise.all(
+          data.items
+            .filter((item) => enrichIds.has(item.id))
+            .map(async (item) => {
+              try {
+                const meshkee = await getMeshkeeBusiness(
+                  String(item.meshkeeBusinessId),
+                );
+                return [
+                  item.id,
+                  {
+                    ...item,
+                    name: meshkee.name,
+                    categoryName: meshkee.categories[0]?.name,
+                  },
+                ] as const;
+              } catch {
+                return [item.id, { ...item, name: item.slug }] as const;
+              }
+            }),
+        );
+        const byId = new Map(enrichedEntries);
+        setItems(data.items.map((item) => byId.get(item.id) ?? item));
+      } catch (err) {
+        if (cancelled) return;
+        setError(
+          err instanceof Error ? err.message : "Could not load marketplace data.",
+        );
+        setItems([]);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const stats = useMemo(() => {
+    const published = items.filter((item) => item.status === "published").length;
+    const pending = items.filter(
+      (item) => item.status === "pending_review",
+    ).length;
+    const draft = items.filter((item) => item.status === "draft").length;
+    return [
+      {
+        id: "businesses",
+        label: "Live",
+        value: loading ? "…" : String(published),
+        hint: "Published on marketplace",
+        href: "/businesses?status=published",
+      },
+      {
+        id: "pending",
+        label: "Pending",
+        value: loading ? "…" : String(pending),
+        hint: "Awaiting review",
+        href: "/businesses?status=pending_review",
+      },
+      {
+        id: "draft",
+        label: "Draft",
+        value: loading ? "…" : String(draft),
+        hint: "Not submitted yet",
+        href: "/businesses?status=draft",
+      },
+      {
+        id: "total",
+        label: "Total",
+        value: loading ? "…" : String(items.length),
+        hint: "All linked listings",
+        href: "/businesses",
+      },
+    ];
+  }, [items, loading]);
+
+  const recent: RecentRow[] = useMemo(
+    () =>
+      [...items]
+        .sort((a, b) => {
+          const aTime = Date.parse(a.updatedAt || a.createdAt || "") || 0;
+          const bTime = Date.parse(b.updatedAt || b.createdAt || "") || 0;
+          return bTime - aTime;
+        })
+        .slice(0, 4)
+        .map((item) => ({
+          id: item.id,
+          name: item.name || item.slug,
+          category: item.categoryName || "Uncategorized",
+          status: STATUS_LABEL[item.status],
+          statusKey: item.status,
+        })),
+    [items],
+  );
+
+  const pendingItems = useMemo(
+    () => items.filter((item) => item.status === "pending_review").slice(0, 4),
+    [items],
+  );
+
+  return (
+    <div className={styles.page}>
+      <section className={styles.hero} aria-label="Welcome">
+        <div className={styles.heroCopy}>
+          <p className={styles.kicker}>Overview · {firstName}</p>
+          <h1 className={styles.title}>Marketplace command</h1>
+          <p className={styles.lead}>
+            Track listings, review submissions, and keep the public marketplace
+            gate in sync.
+          </p>
+        </div>
+        <div className={styles.heroPanel} aria-hidden>
+          <span>IranBay</span>
+          <strong>Admin</strong>
+        </div>
+      </section>
+
+      <section className={styles.stats} aria-label="Key metrics">
+        {stats.map((stat) => (
+          <a
+            key={stat.id}
+            href={stat.href}
+            className={`tile-hover ${styles.statTile}`}
+          >
+            <p className={styles.statLabel}>{stat.label}</p>
+            <p className={styles.statValue}>{stat.value}</p>
+            <p className={styles.statHint}>{stat.hint}</p>
+          </a>
+        ))}
+      </section>
+
+      {error ? (
+        <p className={styles.errorNote} role="alert">
+          {error}
+        </p>
+      ) : null}
+
+      <section className={styles.split} id="businesses">
+        <div className={styles.panel}>
+          <div className={styles.panelHead}>
+            <div>
+              <h2 className={styles.panelTitle}>Recent businesses</h2>
+              <p className={styles.panelSub}>Latest marketplace listings</p>
+            </div>
+            <a href="/businesses" className={`outline-btn ${styles.panelBtn}`}>
+              View all
+            </a>
+          </div>
+
+          <ul className={styles.list}>
+            {loading && recent.length === 0 ? (
+              <li className={styles.listRow}>
+                <p className={styles.rowMeta}>Loading…</p>
+              </li>
+            ) : null}
+            {!loading && recent.length === 0 ? (
+              <li className={styles.listRow}>
+                <p className={styles.rowMeta}>No listings yet</p>
+              </li>
+            ) : null}
+            {recent.map((item) => (
+              <li key={item.id} className={styles.listRow}>
+                <div>
+                  <p className={styles.rowTitle}>{item.name}</p>
+                  <p className={styles.rowMeta}>{item.category}</p>
+                </div>
+                <div className={styles.rowSide}>
+                  <span
+                    className={`${styles.status} ${
+                      item.statusKey === "published"
+                        ? styles.statusLive
+                        : item.statusKey === "pending_review"
+                          ? styles.statusReview
+                          : styles.statusDraft
+                    }`}
+                  >
+                    {item.status}
+                  </span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className={styles.panel} id="activity">
+          <div className={styles.panelHead}>
+            <div>
+              <h2 className={styles.panelTitle}>Pending review</h2>
+              <p className={styles.panelSub}>Approve new shop submissions</p>
+            </div>
+            <a
+              href="/businesses?status=pending_review"
+              className={`outline-btn ${styles.panelBtn}`}
+            >
+              Review
+            </a>
+          </div>
+
+          <ul className={styles.activity}>
+            {loading && pendingItems.length === 0 ? (
+              <li className={styles.activityRow}>
+                <div className={styles.activityDot} aria-hidden />
+                <div>
+                  <p className={styles.rowMeta}>Loading…</p>
+                </div>
+              </li>
+            ) : null}
+            {!loading && pendingItems.length === 0 ? (
+              <li className={styles.activityRow}>
+                <div className={styles.activityDot} aria-hidden />
+                <div>
+                  <p className={styles.rowTitle}>Queue clear</p>
+                  <p className={styles.rowMeta}>No submissions waiting</p>
+                </div>
+              </li>
+            ) : null}
+            {pendingItems.map((item) => (
+              <li key={item.id} className={styles.activityRow}>
+                <div className={styles.activityDot} aria-hidden />
+                <div>
+                  <p className={styles.rowTitle}>
+                    {item.name || item.slug}
+                  </p>
+                  <p className={styles.rowMeta}>
+                    /{item.slug} · awaiting approval
+                  </p>
+                </div>
+                <a
+                  className={styles.rowTime}
+                  href={`/businesses/${item.id}`}
+                >
+                  Open
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+
+      <section className={styles.actions} id="settings" aria-label="Quick actions">
+        <div className={styles.actionsHead}>
+          <h2 className={styles.panelTitle}>Quick actions</h2>
+          <p className={styles.panelSub}>Jump into common admin work</p>
+        </div>
+        <div className={styles.actionGrid}>
+          <a
+            href="/businesses?status=pending_review"
+            className={`tile-hover ${styles.actionTile}`}
+          >
+            <p className={styles.actionLabel}>Review pending</p>
+            <p className={styles.actionDesc}>Approve new marketplace listings</p>
+          </a>
+          <a href="/businesses" className={`tile-hover ${styles.actionTile}`}>
+            <p className={styles.actionLabel}>Manage businesses</p>
+            <p className={styles.actionDesc}>List, edit, publish, or hide</p>
+          </a>
+          <a
+            href={
+              process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
+              "http://localhost:3000"
+            }
+            className={`tile-hover ${styles.actionTile}`}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <p className={styles.actionLabel}>Open website</p>
+            <p className={styles.actionDesc}>Preview the public gate</p>
+          </a>
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/components/ImageCropDialog.module.css b/components/ImageCropDialog.module.css
new file mode 100644
index 0000000..902fd82
--- /dev/null
+++ b/components/ImageCropDialog.module.css
@@ -0,0 +1,173 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.dialog {
+  width: min(720px, 100%);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px;
+  border-radius: 5px;
+  background: var(--color-white);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
+}
+
+.head {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.hint {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.stage {
+  position: relative;
+  width: 100%;
+  height: min(52vh, 420px);
+  overflow: hidden;
+  border-radius: 5px;
+  background: #111;
+}
+
+/* Light checker so transparent logos stay visible while cropping */
+.stageLight {
+  background-color: #f3f3f3;
+  background-image:
+    linear-gradient(45deg, #e8e8e8 25%, transparent 25%),
+    linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e8e8e8 75%),
+    linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
+  background-size: 16px 16px;
+  background-position:
+    0 0,
+    0 8px,
+    8px -8px,
+    -8px 0;
+}
+
+.stageLight :global(.reactEasyCrop_CropArea) {
+  color: rgba(0, 0, 0, 0.28);
+  border-color: rgba(0, 0, 0, 0.55);
+}
+
+.zoomRow {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: 10px;
+}
+
+.zoomBtn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  background: #fff;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1;
+  color: var(--color-muted);
+}
+
+.zoomBtn:hover:not(:disabled),
+.zoomBtn:focus-visible:not(:disabled) {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.zoomBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.zoomRange {
+  width: 100%;
+  accent-color: var(--color-black);
+}
+
+.zoomValue {
+  min-width: 44px;
+  text-align: end;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  color: var(--color-soft);
+}
+
+.error {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  color: #8a1f11;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.cancelBtn,
+.applyBtn {
+  min-height: 38px;
+  padding: 0 18px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
+
+.cancelBtn {
+  border-color: #d4d4d4;
+  color: var(--color-soft);
+}
+
+.cancelBtn::before {
+  content: none;
+}
+
+.cancelBtn:hover,
+.cancelBtn:focus-visible {
+  color: var(--color-black);
+  border-color: var(--color-black);
+  background: transparent;
+}
+
+.applyBtn {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.applyBtn:hover,
+.applyBtn:focus-visible {
+  color: var(--color-black);
+}
+
+.applyBtn::before {
+  background: #fff;
+}
+
+.applyBtn:disabled,
+.cancelBtn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
diff --git a/components/ImageCropDialog.tsx b/components/ImageCropDialog.tsx
new file mode 100644
index 0000000..167fb4d
--- /dev/null
+++ b/components/ImageCropDialog.tsx
@@ -0,0 +1,186 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Cropper, { type Area } from "react-easy-crop";
+import { getCroppedImageFile } from "@/lib/cropImage";
+import styles from "./ImageCropDialog.module.css";
+
+const MIN_ZOOM = 0.2;
+const MAX_ZOOM = 3;
+const ZOOM_STEP = 0.05;
+
+type Props = {
+  open: boolean;
+  imageSrc: string | null;
+  title: string;
+  aspect: number;
+  /** Prefer PNG for logos with transparency */
+  outputType?: "image/jpeg" | "image/png";
+  fileName?: string;
+  onCancel: () => void;
+  onComplete: (file: File, previewUrl: string) => void;
+};
+
+export default function ImageCropDialog({
+  open,
+  imageSrc,
+  title,
+  aspect,
+  outputType = "image/jpeg",
+  fileName = "image",
+  onCancel,
+  onComplete,
+}: Props) {
+  const [crop, setCrop] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  const transparentOutput = outputType === "image/png";
+
+  useEffect(() => {
+    if (!open) return;
+    setCrop({ x: 0, y: 0 });
+    setZoom(1);
+    setCroppedAreaPixels(null);
+    setBusy(false);
+    setError("");
+  }, [open, imageSrc]);
+
+  const onCropComplete = useCallback((_: Area, pixels: Area) => {
+    setCroppedAreaPixels(pixels);
+  }, []);
+
+  function clampZoom(value: number) {
+    return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, Number(value.toFixed(2))));
+  }
+
+  if (!open || !imageSrc) return null;
+
+  async function apply() {
+    if (!croppedAreaPixels || !imageSrc) return;
+    setBusy(true);
+    setError("");
+    try {
+      const file = await getCroppedImageFile(
+        imageSrc,
+        croppedAreaPixels,
+        fileName,
+        outputType,
+      );
+      const previewUrl = URL.createObjectURL(file);
+      onComplete(file, previewUrl);
+      setCrop({ x: 0, y: 0 });
+      setZoom(1);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not crop image.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className={styles.overlay} role="dialog" aria-modal aria-label={title}>
+      <div className={styles.dialog}>
+        <div className={styles.head}>
+          <h2 className={styles.title}>{title}</h2>
+          <p className={styles.hint}>
+            Drag to move · zoom out to add padding around the image
+          </p>
+        </div>
+
+        <div
+          className={
+            transparentOutput
+              ? `${styles.stage} ${styles.stageLight}`
+              : styles.stage
+          }
+        >
+          <Cropper
+            image={imageSrc}
+            crop={crop}
+            zoom={zoom}
+            minZoom={MIN_ZOOM}
+            maxZoom={MAX_ZOOM}
+            aspect={aspect}
+            onCropChange={setCrop}
+            onZoomChange={(value) => setZoom(clampZoom(value))}
+            onCropComplete={onCropComplete}
+            showGrid={false}
+            objectFit="contain"
+            restrictPosition={false}
+            style={{
+              containerStyle: {
+                background: "transparent",
+              },
+            }}
+          />
+        </div>
+
+        <div className={styles.zoomRow}>
+          <button
+            type="button"
+            className={styles.zoomBtn}
+            disabled={busy || zoom <= MIN_ZOOM}
+            aria-label="Zoom out"
+            onClick={() => setZoom((value) => clampZoom(value - ZOOM_STEP))}
+          >
+            −
+          </button>
+          <input
+            className={styles.zoomRange}
+            type="range"
+            min={MIN_ZOOM}
+            max={MAX_ZOOM}
+            step={0.01}
+            value={zoom}
+            disabled={busy}
+            aria-label="Zoom"
+            onChange={(event) => setZoom(clampZoom(Number(event.target.value)))}
+          />
+          <button
+            type="button"
+            className={styles.zoomBtn}
+            disabled={busy || zoom >= MAX_ZOOM}
+            aria-label="Zoom in"
+            onClick={() => setZoom((value) => clampZoom(value + ZOOM_STEP))}
+          >
+            +
+          </button>
+          <span className={styles.zoomValue}>{Math.round(zoom * 100)}%</span>
+        </div>
+
+        {error ? (
+          <p className={styles.error} role="alert">
+            {error}
+          </p>
+        ) : null}
+
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={`outline-btn ${styles.cancelBtn}`}
+            disabled={busy}
+            onClick={() => {
+              setCrop({ x: 0, y: 0 });
+              setZoom(1);
+              setError("");
+              onCancel();
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={`outline-btn ${styles.applyBtn}`}
+            disabled={busy || !croppedAreaPixels}
+            onClick={() => void apply()}
+          >
+            {busy ? "Applying…" : "Apply crop"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/LoginForm.tsx b/components/LoginForm.tsx
new file mode 100644
index 0000000..756aa27
--- /dev/null
+++ b/components/LoginForm.tsx
@@ -0,0 +1,319 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import AuthShell from "@/components/AuthShell";
+import { AuthField, AuthPasswordField } from "@/components/AuthFields";
+import { postLoginHref, useAuth } from "@/components/AuthProvider";
+import { ApiError, getAccessToken, getRefreshToken } from "@/lib/meshkee-api";
+import { toE164CellNumber } from "@/lib/cellNumber";
+import {
+  getAdminDashboardOrigin,
+  getCustomerDashboardOrigin,
+  hostAppFor,
+} from "@/lib/host";
+import styles from "@/components/AuthShell.module.css";
+
+const websiteUrl =
+  process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
+  "http://localhost:3000";
+
+const tenantDomain =
+  process.env.NEXT_PUBLIC_MESHKEE_TENANT_DOMAIN?.trim() ||
+  (() => {
+    try {
+      return new URL(websiteUrl).hostname;
+    } catch {
+      return "iranbay.com";
+    }
+  })();
+
+type AuthMode = "login" | "register";
+
+function isSafeWebsiteReturn(next: string) {
+  try {
+    const url = new URL(next);
+    const allowed = new URL(websiteUrl);
+    return url.origin === allowed.origin;
+  } catch {
+    return false;
+  }
+}
+
+function websiteHandoffUrl(next: string) {
+  const access = getAccessToken();
+  const refresh = getRefreshToken();
+  if (!access || !refresh) return null;
+
+  const target = new URL(next);
+  const hash = new URLSearchParams({
+    access,
+    refresh,
+    next: `${target.pathname}${target.search}${target.hash}` || "/register",
+  }).toString();
+
+  return `${target.origin}/auth/handoff#${hash}`;
+}
+
+function splitName(fullName: string) {
+  const parts = fullName.trim().split(/\s+/).filter(Boolean);
+  const firstName = parts[0] || "";
+  const lastName = parts.length > 1 ? parts.slice(1).join(" ") : firstName;
+  return { firstName, lastName };
+}
+
+async function finishAuth(
+  dashboard: "super_admin" | "business" | "customer",
+  returnToWebsite: string | null,
+  router: ReturnType<typeof useRouter>,
+) {
+  if (returnToWebsite) {
+    const handoff = websiteHandoffUrl(returnToWebsite);
+    if (handoff) {
+      window.location.href = handoff;
+      return;
+    }
+  }
+
+  const href = postLoginHref(dashboard);
+  if (href.startsWith("http")) {
+    window.location.href = href;
+  } else {
+    router.push(href);
+  }
+}
+
+export default function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { login, register } = useAuth();
+  const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [hostReady, setHostReady] = useState(false);
+  const [app, setApp] = useState<"admin" | "customer" | "business">("admin");
+  const [adminLoginHref, setAdminLoginHref] = useState("");
+
+  const nextParam = searchParams.get("next");
+  const returnToWebsite =
+    nextParam && isSafeWebsiteReturn(nextParam) ? nextParam : null;
+  const modeParam = searchParams.get("mode");
+  const [mode, setMode] = useState<AuthMode>(() =>
+    modeParam === "register" ? "register" : "login",
+  );
+
+  useEffect(() => {
+    const host = window.location.host;
+    const next = hostAppFor(host);
+    setApp(next);
+    setHostReady(true);
+    setAdminLoginHref(`${getAdminDashboardOrigin()}/login`);
+    if (next === "business") {
+      const loginUrl = new URL(`${getCustomerDashboardOrigin()}/login`);
+      if (returnToWebsite) loginUrl.searchParams.set("next", returnToWebsite);
+      if (mode === "register") loginUrl.searchParams.set("mode", "register");
+      window.location.replace(loginUrl.toString());
+    }
+  }, [returnToWebsite, mode]);
+
+  useEffect(() => {
+    if (modeParam === "register") setMode("register");
+    if (modeParam === "login") setMode("login");
+  }, [modeParam]);
+
+  if (!hostReady || app === "business") {
+    return (
+      <div
+        style={{
+          minHeight: "100vh",
+          display: "grid",
+          placeItems: "center",
+          background: "#f6f6f6",
+          fontSize: 12,
+          letterSpacing: "0.2em",
+          textTransform: "uppercase",
+          color: "#8e8e8e",
+        }}
+      >
+        Redirecting to login…
+      </div>
+    );
+  }
+
+  const isRegister = mode === "register" && app === "customer";
+  const titleLine1 = isRegister ? "Create" : "Login To";
+  const titleLine2 = app === "customer" ? "Account" : "IranBay";
+
+  return (
+    <AuthShell
+      titleLine1={titleLine1}
+      titleLine2={titleLine2}
+      footerNote={
+        isRegister ? (
+          <button
+            type="button"
+            className={styles.noteLink}
+            onClick={() => {
+              setError("");
+              setMode("login");
+            }}
+          >
+            Already have an account? Login
+          </button>
+        ) : (
+          <Link href="/forgot-password">Forgot password?</Link>
+        )
+      }
+    >
+      <form
+        className={styles.form}
+        autoComplete="off"
+        key={isRegister ? "register" : "login"}
+        onSubmit={async (e) => {
+          e.preventDefault();
+          setError("");
+          setIsSubmitting(true);
+
+          const form = new FormData(e.currentTarget);
+          const phone = String(form.get("phone") ?? "");
+          const password = String(form.get("password") ?? "");
+
+          try {
+            if (isRegister) {
+              const name = String(form.get("name") ?? "");
+              const email = String(form.get("email") ?? "").trim();
+              const { firstName, lastName } = splitName(name);
+
+              if (firstName.length < 2) {
+                throw new ApiError("Please enter your full name.", 400);
+              }
+
+              const dashboard = await register({
+                cellNumber: toE164CellNumber(phone),
+                password,
+                firstName,
+                lastName: lastName.length >= 2 ? lastName : firstName,
+                email: email || undefined,
+                domain: tenantDomain,
+              });
+              await finishAuth(dashboard, returnToWebsite, router);
+            } else {
+              const dashboard = await login(toE164CellNumber(phone), password);
+              await finishAuth(dashboard, returnToWebsite, router);
+            }
+          } catch (err) {
+            if (err instanceof ApiError) {
+              setError(err.message);
+            } else {
+              setError(
+                isRegister
+                  ? "Unable to create account. Is Meshkee API running?"
+                  : "Unable to sign in. Is Meshkee API running?",
+              );
+            }
+          } finally {
+            setIsSubmitting(false);
+          }
+        }}
+      >
+        {error ? (
+          <p className={styles.error} role="alert">
+            {error}
+            {app === "customer" &&
+            adminLoginHref &&
+            error.includes("super admin access") ? (
+              <>
+                {" "}
+                <a href={adminLoginHref}>Go to admin login</a>
+              </>
+            ) : null}
+          </p>
+        ) : null}
+
+        {returnToWebsite ? (
+          <p className={styles.hint}>
+            {isRegister
+              ? "Create an account to continue business registration"
+              : "Sign in to continue business registration"}
+          </p>
+        ) : null}
+
+        {isRegister ? (
+          <AuthField
+            label="Name"
+            name="name"
+            autoComplete="name"
+            required
+            disabled={isSubmitting}
+          />
+        ) : null}
+
+        <AuthField
+          label={isRegister ? "Cell Number" : "Phone Number"}
+          name="phone"
+          type="tel"
+          autoComplete="off"
+          dir="ltr"
+          required
+          disabled={isSubmitting}
+        />
+
+        {isRegister ? (
+          <AuthField
+            label="Email Address"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            disabled={isSubmitting}
+          />
+        ) : null}
+
+        <AuthPasswordField
+          label="Password"
+          name="password"
+          autoComplete={isRegister ? "new-password" : "current-password"}
+          required
+          disabled={isSubmitting}
+        />
+
+        <div className={styles.actions}>
+          {app === "customer" ? (
+            isRegister ? (
+              <button
+                type="button"
+                className={styles.secondaryBtn}
+                disabled={isSubmitting}
+                onClick={() => {
+                  setError("");
+                  setMode("login");
+                }}
+              >
+                Login instead
+              </button>
+            ) : (
+              <button
+                type="button"
+                className={styles.secondaryBtn}
+                disabled={isSubmitting}
+                onClick={() => {
+                  setError("");
+                  setMode("register");
+                }}
+              >
+                Create account
+              </button>
+            )
+          ) : null}
+          <button
+            type="submit"
+            className={`outline-btn ${styles.primaryBtn}`}
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? "…" : isRegister ? "REGISTER" : "LOGIN"}
+          </button>
+        </div>
+      </form>
+    </AuthShell>
+  );
+}
diff --git a/components/MakeSpecialModal.module.css b/components/MakeSpecialModal.module.css
new file mode 100644
index 0000000..2db6313
--- /dev/null
+++ b/components/MakeSpecialModal.module.css
@@ -0,0 +1,150 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  padding: 24px var(--page-pad);
+  background: rgba(0, 0, 0, 0.28);
+}
+
+.modal {
+  width: min(100%, 480px);
+  max-height: min(90vh, 720px);
+  overflow: auto;
+  border-radius: 5px;
+  background: var(--color-white);
+  box-shadow: 24px 28px 48px rgba(0, 0, 0, 0.12);
+  padding: 28px 28px 24px;
+}
+
+.head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.kicker {
+  margin: 0 0 8px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.hint {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: var(--color-soft);
+}
+
+.closeBtn {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  font-size: 22px;
+  line-height: 1;
+  color: var(--color-soft);
+}
+
+.closeBtn:hover,
+.closeBtn:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  width: 100%;
+  text-align: left;
+  padding: 14px 16px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fafafa;
+}
+
+.item:hover:not(:disabled),
+.item:focus-visible:not(:disabled) {
+  border-color: #ddd;
+  background: #fff;
+}
+
+.item:disabled {
+  opacity: 0.65;
+  cursor: default;
+}
+
+.itemMain {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.itemTitle {
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.itemSubtext {
+  font-size: 12px;
+  color: var(--color-soft);
+}
+
+.itemMeta {
+  flex-shrink: 0;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.empty,
+.error,
+.status {
+  margin: 0;
+  font-size: 13px;
+}
+
+.empty {
+  color: var(--color-soft);
+  padding: 20px 0;
+  text-align: center;
+}
+
+.error {
+  margin-top: 12px;
+  color: #8a1f11;
+}
+
+.status {
+  margin-top: 12px;
+  color: #1f6b3a;
+}
diff --git a/components/MakeSpecialModal.tsx b/components/MakeSpecialModal.tsx
new file mode 100644
index 0000000..0fd9247
--- /dev/null
+++ b/components/MakeSpecialModal.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+import {
+  getSpecialBusinesses,
+  saveSpecialBusinesses,
+  type SpecialCarousel,
+} from "@/services/special-businesses";
+import type { MarketplaceBusiness } from "@/types/business";
+import styles from "./MakeSpecialModal.module.css";
+
+export default function MakeSpecialModal({
+  business,
+  open,
+  onClose,
+  onSaved,
+}: {
+  business: MarketplaceBusiness | null;
+  open: boolean;
+  onClose: () => void;
+  onSaved?: () => void;
+}) {
+  const titleId = useId();
+  const [carousels, setCarousels] = useState<SpecialCarousel[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [savingId, setSavingId] = useState<string | null>(null);
+  const [error, setError] = useState("");
+  const [status, setStatus] = useState("");
+
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    void (async () => {
+      setLoading(true);
+      setError("");
+      setStatus("");
+      try {
+        const config = await getSpecialBusinesses();
+        if (!cancelled) setCarousels(config.carousels);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error
+              ? err.message
+              : "Could not load carousels.",
+          );
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && !savingId) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open, savingId, onClose]);
+
+  if (!open || !business) return null;
+
+  const name = business.name || business.slug;
+
+  async function pickCarousel(carousel: SpecialCarousel) {
+    if (!business) return;
+    setSavingId(carousel.id);
+    setError("");
+    setStatus("");
+    try {
+      const config = await getSpecialBusinesses();
+      const nextCarousels = config.carousels.map((item) => {
+        if (item.id !== carousel.id) return item;
+        if (item.businessIds.includes(business.id)) return item;
+        return {
+          ...item,
+          businessIds: [...item.businessIds, business.id],
+        };
+      });
+      await saveSpecialBusinesses({ carousels: nextCarousels });
+      setStatus(`Added to ${carousel.title}`);
+      onSaved?.();
+      window.setTimeout(() => onClose(), 500);
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Could not add business to carousel.",
+      );
+    } finally {
+      setSavingId(null);
+    }
+  }
+
+  return (
+    <div
+      className={styles.overlay}
+      role="presentation"
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget && !savingId) onClose();
+      }}
+    >
+      <div
+        className={styles.modal}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+      >
+        <div className={styles.head}>
+          <div>
+            <p className={styles.kicker}>Make special</p>
+            <h2 id={titleId} className={styles.title}>
+              Choose a carousel
+            </h2>
+            <p className={styles.hint}>Add {name} to one of the homepage carousels.</p>
+          </div>
+          <button
+            type="button"
+            className={styles.closeBtn}
+            aria-label="Close"
+            disabled={Boolean(savingId)}
+            onClick={onClose}
+          >
+            ×
+          </button>
+        </div>
+
+        {loading ? (
+          <p className={styles.empty}>Loading carousels…</p>
+        ) : error && !carousels.length ? (
+          <p className={styles.error} role="alert">
+            {error}
+          </p>
+        ) : carousels.length ? (
+          <ul className={styles.list}>
+            {carousels.map((carousel) => {
+              const alreadyIn = carousel.businessIds.includes(business.id);
+              return (
+                <li key={carousel.id}>
+                  <button
+                    type="button"
+                    className={styles.item}
+                    disabled={Boolean(savingId) || alreadyIn}
+                    onClick={() => void pickCarousel(carousel)}
+                  >
+                    <span className={styles.itemMain}>
+                      <span className={styles.itemTitle}>
+                        {carousel.title || "Untitled"}
+                      </span>
+                      {carousel.subtext ? (
+                        <span className={styles.itemSubtext}>
+                          {carousel.subtext}
+                        </span>
+                      ) : null}
+                    </span>
+                    <span className={styles.itemMeta}>
+                      {savingId === carousel.id
+                        ? "Adding…"
+                        : alreadyIn
+                          ? "Already in"
+                          : `${carousel.businessIds.length} businesses`}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        ) : (
+          <p className={styles.empty}>
+            No carousels yet. Create one under Website → Carousels.
+          </p>
+        )}
+
+        {error && carousels.length ? (
+          <p className={styles.error} role="alert">
+            {error}
+          </p>
+        ) : null}
+        {status ? <p className={styles.status}>{status}</p> : null}
+      </div>
+    </div>
+  );
+}
diff --git a/components/RichTextArea.module.css b/components/RichTextArea.module.css
new file mode 100644
index 0000000..55243b2
--- /dev/null
+++ b/components/RichTextArea.module.css
@@ -0,0 +1,226 @@
+.wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.head:has(.label) {
+  justify-content: space-between;
+}
+
+.label {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  line-height: 1;
+}
+
+.tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+.toolSep {
+  width: 1px;
+  height: 18px;
+  margin: 0 2px;
+  background: #e8e8e8;
+}
+
+.tool {
+  box-sizing: border-box;
+  min-width: 32px;
+  height: 28px;
+  min-height: 28px;
+  padding: 0 8px;
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  background: #fff;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 26px;
+  color: var(--color-muted);
+  transition:
+    border-color 0.35s ease,
+    color 0.35s ease,
+    background-color 0.35s ease,
+    box-shadow 0.35s ease;
+}
+
+.tool:hover,
+.tool:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.aiTool:hover:not(:disabled),
+.aiTool:focus-visible:not(:disabled) {
+  border-color: transparent;
+  color: #fff;
+}
+
+.toolActive {
+  border-color: var(--color-black);
+  color: var(--color-black);
+  background: #f4f4f4;
+}
+
+.aiTool {
+  min-width: 36px;
+  letter-spacing: 0.08em;
+}
+
+.toolEnd {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: 10px;
+  padding-inline-start: 10px;
+  border-inline-start: 1px solid #e4e4e4;
+}
+
+.tool:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.toolSelectWrap {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  max-height: 28px;
+}
+
+.toolSelect {
+  box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: block;
+  width: auto;
+  height: 28px;
+  min-height: 28px;
+  max-height: 28px;
+  margin: 0;
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238e8e8e' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  background-size: 10px 6px;
+  padding: 0 22px 0 8px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 26px;
+  color: var(--color-muted);
+  outline: none;
+  cursor: pointer;
+  vertical-align: middle;
+  transition: border-color 0.35s ease, color 0.35s ease;
+}
+
+.toolSelect:hover,
+.toolSelect:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.toolSelect:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.editor {
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fff;
+  padding: 14px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.65;
+  color: var(--color-black);
+  outline: none;
+  transition: border-color 0.35s ease, box-shadow 0.35s ease;
+}
+
+.editor:hover {
+  border-color: #d8d8d8;
+}
+
+.editor:focus {
+  border-color: var(--color-black);
+}
+
+.editor :global(ul) {
+  margin: 0.4em 0 0.4em 1.2em;
+}
+
+.editor :global(p) {
+  margin: 0 0 0.6em;
+}
+
+.editor :global(img) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0.7em 0;
+  border-radius: 4px;
+}
+
+.imageError {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: #b42318;
+}
+
+.fileInput {
+  display: none;
+}
+
+.editor :global(font[size="2"]) {
+  font-size: 13px;
+}
+
+.editor :global(font[size="3"]) {
+  font-size: 14px;
+}
+
+.editor :global(font[size="4"]) {
+  font-size: 16px;
+}
+
+.editor :global(font[size="5"]) {
+  font-size: 20px;
+}
+
+.editor:empty::before {
+  content: "Write here…";
+  color: var(--color-body);
+}
diff --git a/components/RichTextArea.tsx b/components/RichTextArea.tsx
new file mode 100644
index 0000000..a53101e
--- /dev/null
+++ b/components/RichTextArea.tsx
@@ -0,0 +1,264 @@
+"use client";
+
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import aiStyles from "@/styles/ai.module.css";
+import styles from "./RichTextArea.module.css";
+
+const FONT_SIZES = [
+  { value: "2", label: "S" },
+  { value: "3", label: "M" },
+  { value: "4", label: "L" },
+  { value: "5", label: "XL" },
+] as const;
+
+function escapeAttr(value: string) {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/</g, "&lt;");
+}
+
+export default function RichTextArea({
+  label,
+  value,
+  onChange,
+  disabled,
+  minHeight = 200,
+  toolbarEnd,
+  aiWorking = false,
+  onUploadImage,
+}: {
+  label: string;
+  value: string;
+  onChange: (html: string) => void;
+  disabled?: boolean;
+  minHeight?: number;
+  toolbarEnd?: ReactNode;
+  aiWorking?: boolean;
+  onUploadImage?: (file: File) => Promise<string>;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const imageInputRef = useRef<HTMLInputElement>(null);
+  const [direction, setDirection] = useState<"ltr" | "rtl">("ltr");
+  const [fontSize, setFontSize] = useState("3");
+  const [uploadingImage, setUploadingImage] = useState(false);
+  const [imageError, setImageError] = useState("");
+
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    if (node.innerHTML !== value) {
+      node.innerHTML = value || "";
+    }
+  }, [value]);
+
+  function emit() {
+    onChange(ref.current?.innerHTML ?? "");
+  }
+
+  function exec(command: string, commandValue?: string) {
+    if (disabled) return;
+    ref.current?.focus();
+    document.execCommand(command, false, commandValue);
+    emit();
+  }
+
+  function applyFontSize(size: string) {
+    setFontSize(size);
+    exec("fontSize", size);
+  }
+
+  function applyDirection(next: "ltr" | "rtl") {
+    setDirection(next);
+    const node = ref.current;
+    if (!node || disabled) return;
+    node.setAttribute("dir", next);
+    node.focus();
+    emit();
+  }
+
+  async function insertImage(file: File) {
+    if (!onUploadImage || disabled) return;
+    setUploadingImage(true);
+    setImageError("");
+    try {
+      const url = await onUploadImage(file);
+      if (
+        !url.startsWith("/") &&
+        !url.startsWith("http://") &&
+        !url.startsWith("https://")
+      ) {
+        throw new Error("Could not add image.");
+      }
+      ref.current?.focus();
+      document.execCommand(
+        "insertHTML",
+        false,
+        `<img src="${escapeAttr(url)}" alt="" />`,
+      );
+      emit();
+    } catch (err) {
+      setImageError(
+        err instanceof Error ? err.message : "Could not add image.",
+      );
+    } finally {
+      setUploadingImage(false);
+    }
+  }
+
+  return (
+    <div className={styles.wrap}>
+      <div className={styles.head}>
+        {label ? <span className={styles.label}>{label}</span> : null}
+        <div className={styles.tools}>
+          <button
+            type="button"
+            className={styles.tool}
+            disabled={disabled}
+            title="Bold"
+            onClick={() => exec("bold")}
+          >
+            B
+          </button>
+          <button
+            type="button"
+            className={styles.tool}
+            disabled={disabled}
+            title="Italic"
+            onClick={() => exec("italic")}
+          >
+            I
+          </button>
+          <button
+            type="button"
+            className={styles.tool}
+            disabled={disabled}
+            title="Bullet list"
+            onClick={() => exec("insertUnorderedList")}
+          >
+            • List
+          </button>
+          {onUploadImage ? (
+            <button
+              type="button"
+              className={styles.tool}
+              disabled={disabled || uploadingImage}
+              title="Insert image"
+              onClick={() => imageInputRef.current?.click()}
+            >
+              {uploadingImage ? "…" : "Image"}
+            </button>
+          ) : null}
+
+          <span className={styles.toolSep} aria-hidden />
+
+          <label className={styles.toolSelectWrap}>
+            <span className={styles.srOnly}>Font size</span>
+            <select
+              className={styles.toolSelect}
+              value={fontSize}
+              disabled={disabled}
+              title="Font size"
+              onChange={(event) => applyFontSize(event.target.value)}
+            >
+              {FONT_SIZES.map((size) => (
+                <option key={size.value} value={size.value}>
+                  Size {size.label}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <span className={styles.toolSep} aria-hidden />
+
+          <button
+            type="button"
+            className={`${styles.tool} ${direction === "ltr" ? styles.toolActive : ""}`}
+            disabled={disabled}
+            title="Left to right"
+            onClick={() => applyDirection("ltr")}
+          >
+            LTR
+          </button>
+          <button
+            type="button"
+            className={`${styles.tool} ${direction === "rtl" ? styles.toolActive : ""}`}
+            disabled={disabled}
+            title="Right to left"
+            onClick={() => applyDirection("rtl")}
+          >
+            RTL
+          </button>
+
+          <span className={styles.toolSep} aria-hidden />
+
+          <button
+            type="button"
+            className={styles.tool}
+            disabled={disabled}
+            title="Align left"
+            onClick={() => exec("justifyLeft")}
+          >
+            Left
+          </button>
+          <button
+            type="button"
+            className={styles.tool}
+            disabled={disabled}
+            title="Align center"
+            onClick={() => exec("justifyCenter")}
+          >
+            Center
+          </button>
+          <button
+            type="button"
+            className={styles.tool}
+            disabled={disabled}
+            title="Align right"
+            onClick={() => exec("justifyRight")}
+          >
+            Right
+          </button>
+          <button
+            type="button"
+            className={styles.tool}
+            disabled={disabled}
+            title="Justify"
+            onClick={() => exec("justifyFull")}
+          >
+            Justify
+          </button>
+
+          {toolbarEnd ? (
+            <div className={styles.toolEnd}>{toolbarEnd}</div>
+          ) : null}
+        </div>
+      </div>
+      {imageError ? <p className={styles.imageError}>{imageError}</p> : null}
+      <div
+        ref={ref}
+        className={`${styles.editor}${aiWorking ? ` ${aiStyles.aiWorkingBorder}` : ""}`}
+        style={{ minHeight }}
+        contentEditable={!disabled}
+        suppressContentEditableWarning
+        dir={direction}
+        onInput={emit}
+        onBlur={emit}
+      />
+      {onUploadImage ? (
+        <input
+          ref={imageInputRef}
+          type="file"
+          accept="image/*"
+          className={styles.fileInput}
+          disabled={disabled || uploadingImage}
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            event.target.value = "";
+            if (file) void insertImage(file);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/SpecialBusinessesPage.module.css b/components/SpecialBusinessesPage.module.css
new file mode 100644
index 0000000..7942c37
--- /dev/null
+++ b/components/SpecialBusinessesPage.module.css
@@ -0,0 +1,479 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  padding-bottom: 40px;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 22px 28px;
+  border-radius: 5px;
+  background-color: var(--color-card);
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.lead {
+  margin: 6px 0 0;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.headActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.saveBtn,
+.addBtn {
+  min-height: 38px;
+  padding: 0 16px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
+
+.saveBtn {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.saveBtn::before {
+  background: #fff;
+}
+
+.saveBtn:hover,
+.saveBtn:focus-visible {
+  color: var(--color-black);
+}
+
+.card {
+  background: var(--color-white);
+  border-radius: 5px;
+  padding: 20px 22px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.tab {
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  background: #fff;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.tab:hover,
+.tab:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.tabActive {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.tab.tabActive:hover,
+.tab.tabActive:focus-visible {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.activeMeta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.activeTitle {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.activeSubtext {
+  margin: 0;
+  font-size: 13px;
+  color: var(--color-soft);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.field input {
+  width: 100%;
+  min-height: 38px;
+  padding: 0 12px;
+  border: 1px solid #ececec;
+  border-radius: 3px;
+  background: #fff;
+  font: inherit;
+  font-size: 13px;
+  letter-spacing: 0;
+  text-transform: none;
+  color: var(--color-black);
+}
+
+.field input:focus {
+  outline: none;
+  border-color: #bbb;
+}
+
+.linkBtn {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  min-height: 38px;
+}
+
+.linkBtn:hover,
+.linkBtn:focus-visible {
+  color: var(--color-black);
+}
+
+.searchRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 10px;
+  align-items: end;
+}
+
+.results {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 220px;
+  overflow: auto;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  padding: 8px;
+}
+
+.resultRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 3px;
+  border: 1px solid transparent;
+  background: #fafafa;
+}
+
+.resultRow:hover {
+  border-color: #ddd;
+  background: #fff;
+}
+
+.inlineAddBtn {
+  min-height: 32px;
+  padding: 0 12px;
+  font-size: 10px;
+  letter-spacing: 0.14em;
+}
+
+.listHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.listHeading {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.listCount {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  color: var(--color-soft);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.listItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fafafa;
+}
+
+.identity {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1;
+}
+
+.logo {
+  width: 72px;
+  height: 44px;
+  object-fit: contain;
+  object-position: center;
+  flex-shrink: 0;
+  padding: 4px;
+  box-sizing: border-box;
+  border-radius: 4px;
+  background: transparent;
+}
+
+.logoMark {
+  width: 72px;
+  height: 44px;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  padding: 4px;
+  border-radius: 4px;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  color: var(--color-muted);
+}
+
+.listMain {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.listName {
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.listSubtext,
+.listSlug {
+  font-size: 12px;
+  color: var(--color-soft);
+}
+
+.listSubtext {
+  letter-spacing: 0.02em;
+  text-transform: none;
+}
+
+.empty {
+  padding: 28px 16px;
+  text-align: center;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  color: var(--color-soft);
+  border: 1px dashed #e4e4e4;
+  border-radius: 5px;
+}
+
+.status {
+  font-size: 12px;
+  color: var(--color-soft);
+}
+
+.statusOk {
+  color: #1f6b3a;
+}
+
+.statusError {
+  color: #8a1f11;
+}
+
+.loading {
+  min-height: 220px;
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  padding: 24px var(--page-pad);
+  background: rgba(0, 0, 0, 0.28);
+}
+
+.modal {
+  width: min(100%, 480px);
+  max-height: min(90vh, 720px);
+  overflow: auto;
+  border-radius: 5px;
+  background: var(--color-white);
+  box-shadow: 24px 28px 48px rgba(0, 0, 0, 0.12);
+  padding: 28px 28px 24px;
+}
+
+.modalHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.kicker {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  margin-bottom: 8px;
+}
+
+.modalTitle {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.closeBtn {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  font-size: 22px;
+  line-height: 1;
+  color: var(--color-soft);
+}
+
+.closeBtn:hover,
+.closeBtn:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.formError {
+  margin: 0;
+  font-size: 12px;
+  color: #8a1f11;
+}
+
+.modalActions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.modalActionsRight {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dangerBtn {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: #8a1f11;
+  min-height: 38px;
+}
+
+.dangerBtn:hover,
+.dangerBtn:focus-visible {
+  color: #5c120a;
+}
+
+@media (max-width: 900px) {
+  .head,
+  .searchRow {
+    grid-template-columns: 1fr;
+  }
+
+  .head {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .modalActions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .modalActionsRight {
+    justify-content: flex-end;
+  }
+}
diff --git a/components/SpecialBusinessesPage.tsx b/components/SpecialBusinessesPage.tsx
new file mode 100644
index 0000000..ee98130
--- /dev/null
+++ b/components/SpecialBusinessesPage.tsx
@@ -0,0 +1,514 @@
+"use client";
+
+import { useEffect, useId, useMemo, useState } from "react";
+import { listBusinesses } from "@/services/marketplace";
+import {
+  getSpecialBusinesses,
+  newCarousel,
+  saveSpecialBusinesses,
+  slugFromTitle,
+  type SpecialBusinessesConfig,
+  type SpecialCarousel,
+} from "@/services/special-businesses";
+import type { MarketplaceBusiness } from "@/types/business";
+import {
+  getBusinessProfile,
+  getMeshkeeBusiness,
+} from "@/services/meshkee-businesses";
+import styles from "./SpecialBusinessesPage.module.css";
+
+type EnrichedBusiness = MarketplaceBusiness & {
+  displayName: string;
+  subtext: string;
+};
+
+type CarouselFormMode = "create" | "edit";
+
+async function enrichBusinesses(
+  items: MarketplaceBusiness[],
+): Promise<EnrichedBusiness[]> {
+  return Promise.all(
+    items.map(async (item) => {
+      try {
+        const id = String(item.meshkeeBusinessId);
+        const [meshkee, profile] = await Promise.all([
+          getMeshkeeBusiness(id),
+          getBusinessProfile(id),
+        ]);
+        return {
+          ...item,
+          name: meshkee.name,
+          displayName:
+            profile.profile.nameEn ||
+            profile.profile.nameFa ||
+            meshkee.name ||
+            item.slug,
+          subtext: (profile.profile.title || "").trim(),
+          logoUrl: profile.profile.logoUrl ?? meshkee.logoUrl ?? undefined,
+        };
+      } catch {
+        return {
+          ...item,
+          displayName: item.name || item.slug,
+          subtext: "",
+        };
+      }
+    }),
+  );
+}
+
+function BusinessIdentity({ item }: { item: EnrichedBusiness }) {
+  return (
+    <div className={styles.identity}>
+      {item.logoUrl ? (
+        <img className={styles.logo} src={item.logoUrl} alt="" height={44} />
+      ) : (
+        <span className={styles.logoMark} aria-hidden>
+          {item.displayName.slice(0, 1).toUpperCase()}
+        </span>
+      )}
+      <div className={styles.listMain}>
+        <span className={styles.listName}>{item.displayName}</span>
+        {item.subtext ? (
+          <span className={styles.listSubtext}>{item.subtext}</span>
+        ) : (
+          <span className={styles.listSlug}>/{item.slug}</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function SpecialBusinessesPage() {
+  const [config, setConfig] = useState<SpecialBusinessesConfig | null>(null);
+  const [activeId, setActiveId] = useState("");
+  const [allBusinesses, setAllBusinesses] = useState<EnrichedBusiness[]>([]);
+  const [query, setQuery] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [status, setStatus] = useState("");
+  const [error, setError] = useState("");
+  const [formMode, setFormMode] = useState<CarouselFormMode | null>(null);
+  const [formName, setFormName] = useState("");
+  const [formSubtext, setFormSubtext] = useState("");
+  const [formError, setFormError] = useState("");
+  const formTitleId = useId();
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setLoading(true);
+      setError("");
+      try {
+        const [special, listings] = await Promise.all([
+          getSpecialBusinesses(),
+          listBusinesses({ status: "all", limit: 200 }),
+        ]);
+        const enriched = await enrichBusinesses(listings.items);
+        if (cancelled) return;
+        setConfig(special);
+        setActiveId(special.carousels[0]?.id ?? "");
+        setAllBusinesses(enriched);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error
+              ? err.message
+              : "Could not load special businesses.",
+          );
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const active = useMemo(
+    () => config?.carousels.find((item) => item.id === activeId) ?? null,
+    [config, activeId],
+  );
+
+  const byId = useMemo(() => {
+    const map = new Map<string, EnrichedBusiness>();
+    for (const item of allBusinesses) map.set(item.id, item);
+    return map;
+  }, [allBusinesses]);
+
+  const selectedBusinesses = useMemo(() => {
+    if (!active) return [];
+    return active.businessIds
+      .map((id) => byId.get(id))
+      .filter(Boolean) as EnrichedBusiness[];
+  }, [active, byId]);
+
+  const searchResults = useMemo(() => {
+    if (!active) return [];
+    const q = query.trim().toLowerCase();
+    if (q.length <= 2) return [];
+    const selected = new Set(active.businessIds);
+    return allBusinesses
+      .filter((item) => !selected.has(item.id))
+      .filter(
+        (item) =>
+          item.displayName.toLowerCase().includes(q) ||
+          item.subtext.toLowerCase().includes(q) ||
+          item.slug.toLowerCase().includes(q) ||
+          item.id.includes(q),
+      )
+      .slice(0, 12);
+  }, [active, allBusinesses, query]);
+
+  function updateCarousel(id: string, patch: Partial<SpecialCarousel>) {
+    setConfig((prev) => {
+      if (!prev) return prev;
+      return {
+        carousels: prev.carousels.map((item) =>
+          item.id === id ? { ...item, ...patch } : item,
+        ),
+      };
+    });
+    setStatus("");
+  }
+
+  function openCreateModal() {
+    setFormMode("create");
+    setFormName("");
+    setFormSubtext("");
+    setFormError("");
+  }
+
+  function openEditModal() {
+    if (!active) return;
+    setFormMode("edit");
+    setFormName(active.title);
+    setFormSubtext(active.subtext || "");
+    setFormError("");
+  }
+
+  function closeFormModal() {
+    setFormMode(null);
+    setFormError("");
+  }
+
+  function submitFormModal() {
+    const title = formName.trim();
+    if (!title) {
+      setFormError("Name is required.");
+      return;
+    }
+    const subtext = formSubtext.trim();
+
+    if (formMode === "create") {
+      const next = newCarousel(title, subtext);
+      setConfig((prev) =>
+        prev
+          ? { carousels: [...prev.carousels, next] }
+          : { carousels: [next] },
+      );
+      setActiveId(next.id);
+      setStatus("");
+      closeFormModal();
+      return;
+    }
+
+    if (formMode === "edit" && active) {
+      updateCarousel(active.id, {
+        title,
+        subtext,
+        slug: slugFromTitle(title),
+      });
+      closeFormModal();
+    }
+  }
+
+  function removeCarousel(id: string) {
+    setConfig((prev) => {
+      if (!prev || prev.carousels.length <= 1) return prev;
+      const carousels = prev.carousels.filter((item) => item.id !== id);
+      if (activeId === id) setActiveId(carousels[0]?.id ?? "");
+      return { carousels };
+    });
+    setStatus("");
+    closeFormModal();
+  }
+
+  function addBusiness(businessId: string) {
+    if (!active) return;
+    if (active.businessIds.includes(businessId)) return;
+    updateCarousel(active.id, {
+      businessIds: [...active.businessIds, businessId],
+    });
+    setQuery("");
+  }
+
+  function removeBusiness(businessId: string) {
+    if (!active) return;
+    updateCarousel(active.id, {
+      businessIds: active.businessIds.filter((id) => id !== businessId),
+    });
+  }
+
+  async function onSave() {
+    if (!config) return;
+    setSaving(true);
+    setStatus("");
+    setError("");
+    try {
+      const saved = await saveSpecialBusinesses(config);
+      setConfig(saved);
+      if (!saved.carousels.some((item) => item.id === activeId)) {
+        setActiveId(saved.carousels[0]?.id ?? "");
+      }
+      setStatus("Saved");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not save.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) {
+    return <div className={styles.loading}>Loading special businesses…</div>;
+  }
+
+  if (!config || !active) {
+    return (
+      <div className={styles.loading} role="alert">
+        {error || "Could not load special businesses."}
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <div>
+          <h1 className={styles.title}>Carousels</h1>
+          <p className={styles.lead}>
+            Homepage carousels as tabs — each tab holds multiple businesses.
+          </p>
+        </div>
+        <div className={styles.headActions}>
+          {status ? (
+            <span className={`${styles.status} ${styles.statusOk}`}>{status}</span>
+          ) : null}
+          {error ? (
+            <span className={`${styles.status} ${styles.statusError}`}>
+              {error}
+            </span>
+          ) : null}
+          <button
+            type="button"
+            className={`outline-btn ${styles.addBtn}`}
+            onClick={openEditModal}
+          >
+            Edit
+          </button>
+          <button
+            type="button"
+            className={`outline-btn ${styles.addBtn}`}
+            onClick={openCreateModal}
+          >
+            Add carousel
+          </button>
+          <button
+            type="button"
+            className={`outline-btn ${styles.saveBtn}`}
+            disabled={saving}
+            onClick={() => void onSave()}
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </header>
+
+      <section className={styles.card}>
+        <div className={styles.tabs} role="tablist" aria-label="Carousels">
+          {config.carousels.map((carousel) => (
+            <button
+              key={carousel.id}
+              type="button"
+              role="tab"
+              aria-selected={carousel.id === activeId}
+              className={`${styles.tab} ${
+                carousel.id === activeId ? styles.tabActive : ""
+              }`}
+              onClick={() => setActiveId(carousel.id)}
+            >
+              {carousel.title || "Untitled"}
+            </button>
+          ))}
+        </div>
+
+        <div className={styles.panel} role="tabpanel">
+          <div className={styles.activeMeta}>
+            <h2 className={styles.activeTitle}>{active.title}</h2>
+            {active.subtext ? (
+              <p className={styles.activeSubtext}>{active.subtext}</p>
+            ) : null}
+          </div>
+
+          <div className={styles.searchRow}>
+            <label className={styles.field}>
+              <span>Search businesses</span>
+              <input
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder="Search by name or slug"
+              />
+            </label>
+          </div>
+
+          {query.trim().length > 2 ? (
+            searchResults.length ? (
+              <div className={styles.results}>
+                {searchResults.map((item) => (
+                  <div key={item.id} className={styles.resultRow}>
+                    <BusinessIdentity item={item} />
+                    <button
+                      type="button"
+                      className={`outline-btn ${styles.inlineAddBtn}`}
+                      onClick={() => addBusiness(item.id)}
+                    >
+                      Add
+                    </button>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className={styles.empty}>No matching businesses to add.</div>
+            )
+          ) : null}
+
+          <div className={styles.listHead}>
+            <h3 className={styles.listHeading}>
+              Businesses in this carousel
+            </h3>
+            <span className={styles.listCount}>
+              {selectedBusinesses.length}
+            </span>
+          </div>
+
+          <div className={styles.list}>
+            {selectedBusinesses.length ? (
+              selectedBusinesses.map((item) => (
+                <div key={item.id} className={styles.listItem}>
+                  <BusinessIdentity item={item} />
+                  <button
+                    type="button"
+                    className={styles.linkBtn}
+                    onClick={() => removeBusiness(item.id)}
+                  >
+                    Remove
+                  </button>
+                </div>
+              ))
+            ) : (
+              <div className={styles.empty}>
+                No businesses in this carousel yet. Search above to add some.
+              </div>
+            )}
+          </div>
+        </div>
+      </section>
+
+      {formMode ? (
+        <div
+          className={styles.overlay}
+          role="presentation"
+          onMouseDown={(event) => {
+            if (event.target === event.currentTarget) closeFormModal();
+          }}
+        >
+          <div
+            className={styles.modal}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={formTitleId}
+          >
+            <div className={styles.modalHead}>
+              <div>
+                <p className={styles.kicker}>Carousels</p>
+                <h2 id={formTitleId} className={styles.modalTitle}>
+                  {formMode === "create" ? "Add carousel" : "Edit carousel"}
+                </h2>
+              </div>
+              <button
+                type="button"
+                className={styles.closeBtn}
+                aria-label="Close"
+                onClick={closeFormModal}
+              >
+                ×
+              </button>
+            </div>
+
+            <form
+              className={styles.form}
+              onSubmit={(event) => {
+                event.preventDefault();
+                submitFormModal();
+              }}
+            >
+              <label className={styles.field}>
+                <span>Name</span>
+                <input
+                  value={formName}
+                  onChange={(event) => setFormName(event.target.value)}
+                  placeholder="Featured producers"
+                  autoFocus
+                />
+              </label>
+              <label className={styles.field}>
+                <span>Subtext</span>
+                <input
+                  value={formSubtext}
+                  onChange={(event) => setFormSubtext(event.target.value)}
+                  placeholder="Short supporting line"
+                />
+              </label>
+
+              {formError ? (
+                <p className={styles.formError} role="alert">
+                  {formError}
+                </p>
+              ) : null}
+
+              <div className={styles.modalActions}>
+                {formMode === "edit" && config.carousels.length > 1 ? (
+                  <button
+                    type="button"
+                    className={styles.dangerBtn}
+                    onClick={() => removeCarousel(active.id)}
+                  >
+                    Remove carousel
+                  </button>
+                ) : (
+                  <span />
+                )}
+                <div className={styles.modalActionsRight}>
+                  <button
+                    type="button"
+                    className={`outline-btn ${styles.addBtn}`}
+                    onClick={closeFormModal}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    className={`outline-btn ${styles.saveBtn}`}
+                  >
+                    {formMode === "create" ? "Add" : "Update"}
+                  </button>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/WebsiteBlogForm.module.css b/components/WebsiteBlogForm.module.css
new file mode 100644
index 0000000..fa8766c
--- /dev/null
+++ b/components/WebsiteBlogForm.module.css
@@ -0,0 +1,12 @@
+.beside {
+  display: grid;
+  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
+  gap: 24px;
+  align-items: start;
+}
+
+@media (max-width: 860px) {
+  .beside {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/components/WebsiteBlogForm.tsx b/components/WebsiteBlogForm.tsx
new file mode 100644
index 0000000..6a035c1
--- /dev/null
+++ b/components/WebsiteBlogForm.tsx
@@ -0,0 +1,222 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import CategoryTreeSelect from "@/components/CategoryTreeSelect";
+import {
+  FeaturedImageField,
+  TagsField,
+  type LocalImage,
+} from "@/components/catalog/CatalogFormFields";
+import RichTextArea from "@/components/RichTextArea";
+import type { MeshkeeCategory } from "@/services/meshkee-categories";
+import { uploadWebsiteMedia } from "@/services/website-media";
+import {
+  createWebsiteBlogPost,
+  listWebsiteBlogCategories,
+  type WebsiteBlogCategory,
+} from "@/services/website-blog";
+import styles from "@/components/catalog/CatalogForm.module.css";
+import local from "./WebsiteBlogForm.module.css";
+
+export default function WebsiteBlogForm() {
+  const router = useRouter();
+  const [categories, setCategories] = useState<WebsiteBlogCategory[]>([]);
+  const [categoryId, setCategoryId] = useState("");
+  const [title, setTitle] = useState("");
+  const [abstract, setAbstract] = useState("");
+  const [mainTextHtml, setMainTextHtml] = useState("");
+  const [image, setImage] = useState<LocalImage | null>(null);
+  const [tags, setTags] = useState<string[]>([]);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const items = await listWebsiteBlogCategories();
+        if (!cancelled) setCategories(items);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load categories.",
+          );
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function onSubmit(event?: React.FormEvent) {
+    event?.preventDefault();
+    if (!title.trim()) {
+      setError("Enter a title.");
+      return;
+    }
+
+    setSaving(true);
+    setError("");
+    try {
+      if (!categoryId) {
+        setError("Choose a category.");
+        setSaving(false);
+        return;
+      }
+
+      let imageUrl: string | undefined;
+      if (image?.file) {
+        imageUrl = await uploadWebsiteMedia(image.file);
+      }
+
+      await createWebsiteBlogPost({
+        title: title.trim(),
+        categoryId,
+        abstract: abstract.trim() || undefined,
+        mainTextHtml: mainTextHtml || undefined,
+        imageUrl,
+        tags,
+      });
+      router.push("/website/blog");
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not create post.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const busy = saving;
+  const treeCategories: MeshkeeCategory[] = categories.map((item) => ({
+    id: item.id,
+    parentId: item.parentId,
+    name: item.name,
+    nameFa: null,
+    slug: "",
+    description: null,
+    icon: null,
+    sortOrder: 0,
+    tags: [],
+  }));
+
+  return (
+    <form className={styles.page} onSubmit={onSubmit}>
+      <header className={styles.head}>
+        <div>
+          <nav className={styles.breadcrumb} aria-label="Breadcrumb">
+            <Link href="/">Home</Link>
+            <span className={styles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <Link href="/website/blog">Blog</Link>
+            <span className={styles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <span className={styles.breadcrumbCurrent}>Add</span>
+          </nav>
+          <h1 className={styles.title}>Add blog post</h1>
+          <p className={styles.lead}>
+            Publish a story on the IranBay website.
+          </p>
+        </div>
+        <div className={styles.headActions}>
+          <Link href="/website/blog" className={`outline-btn ${styles.ghostBtn}`}>
+            Back
+          </Link>
+          <button
+            type="submit"
+            className={`outline-btn ${styles.saveBtn}`}
+            disabled={busy}
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </header>
+
+      {error ? (
+        <div className={styles.errorBox} role="alert">
+          {error}
+        </div>
+      ) : null}
+
+      <div className={styles.layout}>
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Post</h2>
+          <div className={local.beside}>
+            <FeaturedImageField
+              label="Image"
+              value={image}
+              aspect={3 / 2}
+              disabled={busy}
+              onChange={setImage}
+            />
+            <div className={styles.stack}>
+              <CategoryTreeSelect
+                categories={treeCategories}
+                value={categoryId ? [categoryId] : []}
+                selection="single"
+                label="Category"
+                placeholder="Select category"
+                disabled={busy}
+                onChange={(ids) => setCategoryId(ids[0] ?? "")}
+              />
+
+              <label className={styles.field}>
+                <span>Title</span>
+                <input
+                  value={title}
+                  disabled={busy}
+                  required
+                  onChange={(event) => setTitle(event.target.value)}
+                />
+              </label>
+
+              <label className={styles.field}>
+                <span>Abstract</span>
+                <textarea
+                  rows={3}
+                  value={abstract}
+                  disabled={busy}
+                  onChange={(event) => setAbstract(event.target.value)}
+                />
+              </label>
+            </div>
+          </div>
+        </section>
+
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Content</h2>
+          <div className={styles.stack}>
+            <div className={styles.richField}>
+              <RichTextArea
+                label="Main text"
+                value={mainTextHtml}
+                onChange={setMainTextHtml}
+                disabled={busy}
+                minHeight={280}
+                onUploadImage={uploadWebsiteMedia}
+              />
+            </div>
+            <TagsField tags={tags} disabled={busy} onChange={setTags} />
+          </div>
+        </section>
+
+        <div className={styles.footerActions}>
+          <Link href="/website/blog" className={`outline-btn ${styles.ghostBtn}`}>
+            Cancel
+          </Link>
+          <button
+            type="submit"
+            className={`outline-btn ${styles.saveBtn}`}
+            disabled={busy}
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/components/WebsiteBlogListPage.module.css b/components/WebsiteBlogListPage.module.css
new file mode 100644
index 0000000..51fb3c3
--- /dev/null
+++ b/components/WebsiteBlogListPage.module.css
@@ -0,0 +1,254 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 28px 32px;
+  border-radius: 5px;
+  background-color: var(--color-card);
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+}
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.breadcrumb a {
+  color: inherit;
+  transition: color 0.2s ease;
+}
+
+.breadcrumb a:hover,
+.breadcrumb a:focus-visible {
+  color: var(--color-black);
+}
+
+.breadcrumbSep {
+  opacity: 0.45;
+}
+
+.breadcrumbCurrent {
+  color: var(--color-muted);
+}
+
+.title {
+  font-size: clamp(20px, 2.2vw, 28px);
+  font-weight: 400;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+.lead {
+  margin-top: 10px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.headActions {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.count {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  white-space: nowrap;
+}
+
+.addBtn {
+  min-height: 38px;
+  padding: 0 18px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
+
+.error {
+  margin: 0;
+  padding: 14px 16px;
+  border-radius: 5px;
+  background: #fff5f5;
+  color: #b42318;
+  font-size: 13px;
+}
+
+.hint {
+  margin: 0;
+  text-align: center;
+  font-size: 12px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 18px;
+}
+
+.card {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.media {
+  aspect-ratio: 3 / 2;
+  background: #f3f3f3;
+  overflow: hidden;
+}
+
+.media img,
+.fallback {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.fallback {
+  background: #ececec;
+}
+
+.foot {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  padding: 14px 16px 0;
+}
+
+.card:hover .foot:global(.tile-hover)::before,
+.card:focus-within .foot:global(.tile-hover)::before {
+  clip-path: inset(0 0 0 0);
+}
+
+.body {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-bottom: 14px;
+}
+
+.category {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.body h2 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  line-height: 1.35;
+}
+
+.body p {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--color-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.meta {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--color-soft);
+}
+
+.controls {
+  position: relative;
+  z-index: 2;
+  margin-top: auto;
+  padding: 12px 0 14px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.remove {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  cursor: pointer;
+}
+
+.remove:hover,
+.remove:focus-visible {
+  color: #b42318;
+}
+
+.card:hover .controls {
+  border-top-color: rgba(255, 255, 255, 0.2);
+}
+
+.card:hover .remove:hover,
+.card:focus-within .remove:hover {
+  color: #ffb4a8;
+}
+
+@media (max-width: 1100px) {
+  .grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 720px) {
+  .head {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 22px 18px;
+  }
+
+  .headActions {
+    justify-content: space-between;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/components/WebsiteBlogListPage.tsx b/components/WebsiteBlogListPage.tsx
new file mode 100644
index 0000000..3ea6155
--- /dev/null
+++ b/components/WebsiteBlogListPage.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import CatalogEmptyState from "@/components/catalog/CatalogEmptyState";
+import { excerpt, formatDate } from "@/components/catalog/utils";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import {
+  deleteWebsiteBlogPost,
+  listWebsiteBlogPosts,
+  type WebsiteBlogPost,
+} from "@/services/website-blog";
+import styles from "./WebsiteBlogListPage.module.css";
+
+export default function WebsiteBlogListPage() {
+  const [items, setItems] = useState<WebsiteBlogPost[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [removing, setRemoving] = useState<WebsiteBlogPost | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setLoading(true);
+      setError("");
+      try {
+        const data = await listWebsiteBlogPosts();
+        if (!cancelled) setItems(data.items);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load blog posts.",
+          );
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function confirmRemove() {
+    if (!removing) return;
+    setRemoveBusy(true);
+    try {
+      await deleteWebsiteBlogPost(removing.id);
+      setItems((prev) => prev.filter((item) => item.id !== removing.id));
+      setRemoving(null);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not remove blog post.",
+      );
+      setRemoving(null);
+    } finally {
+      setRemoveBusy(false);
+    }
+  }
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <div>
+          <nav className={styles.breadcrumb} aria-label="Breadcrumb">
+            <Link href="/">Home</Link>
+            <span className={styles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <span className={styles.breadcrumbCurrent}>Blog</span>
+          </nav>
+          <h1 className={styles.title}>Blog</h1>
+          <p className={styles.lead}>
+            Stories published on the IranBay website.
+          </p>
+        </div>
+        <div className={styles.headActions}>
+          <p className={styles.count}>
+            {loading ? "Loading…" : `${items.length} posts`}
+          </p>
+          <Link href="/website/blog/new" className={`outline-btn ${styles.addBtn}`}>
+            Add
+          </Link>
+        </div>
+      </header>
+
+      {error ? (
+        <p className={styles.error} role="alert">
+          {error}
+        </p>
+      ) : null}
+
+      {loading && items.length === 0 ? (
+        <p className={styles.hint}>Loading blog…</p>
+      ) : null}
+
+      {!loading && items.length === 0 ? (
+        <CatalogEmptyState
+          icon="/images/icons/gallery.svg"
+          title="No blog posts yet"
+          lead="Add the first story for the website."
+          actionHref="/website/blog/new"
+          actionLabel="Add"
+        />
+      ) : null}
+
+      {items.length ? (
+        <div className={styles.grid}>
+          {items.map((post) => {
+            const text = post.abstract ? excerpt(post.abstract, 160) : "";
+            return (
+              <article key={post.id} className={styles.card}>
+                <div className={styles.media}>
+                  {post.imageUrl ? (
+                    <img src={post.imageUrl} alt="" />
+                  ) : (
+                    <div className={styles.fallback} aria-hidden />
+                  )}
+                </div>
+                <div className={`tile-hover ${styles.foot}`}>
+                  <div className={styles.body}>
+                    <p className={styles.category}>{post.categoryName}</p>
+                    <h2 dir="auto">{post.title}</h2>
+                    {text ? <p dir="auto">{text}</p> : null}
+                    {post.createdAt ? (
+                      <span className={styles.meta}>
+                        {formatDate(post.createdAt)}
+                      </span>
+                    ) : null}
+                  </div>
+                  <div className={styles.controls}>
+                    <button
+                      type="button"
+                      className={styles.remove}
+                      onClick={() => setRemoving(post)}
+                    >
+                      Remove
+                    </button>
+                  </div>
+                </div>
+              </article>
+            );
+          })}
+        </div>
+      ) : null}
+
+      <ConfirmDialog
+        open={Boolean(removing)}
+        danger
+        busy={removeBusy}
+        kicker="Blog"
+        title="Remove post"
+        message="This deletes the blog post. This cannot be undone."
+        confirmLabel="Remove"
+        onConfirm={() => void confirmRemove()}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/components/WebsiteImagesPage.module.css b/components/WebsiteImagesPage.module.css
new file mode 100644
index 0000000..522b958
--- /dev/null
+++ b/components/WebsiteImagesPage.module.css
@@ -0,0 +1,584 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  padding-bottom: 40px;
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 22px 28px;
+  border-radius: 5px;
+  background-color: var(--color-card);
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.lead {
+  margin: 6px 0 0;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.headActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.status {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.statusError {
+  color: #8a1f11;
+}
+
+.statusOk {
+  color: #1f6b3a;
+}
+
+.section {
+  background: var(--color-white);
+  border-radius: 5px;
+  padding: 22px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.sectionHead {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.sectionMeta {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  color: var(--color-soft);
+}
+
+.track {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  overflow-x: auto;
+  padding: 2px 0 8px;
+  scrollbar-width: thin;
+}
+
+.group {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex: 0 0 auto;
+}
+
+.groupDivider {
+  width: 1px;
+  align-self: stretch;
+  min-height: 100%;
+  background: #e4e4e4;
+  margin: 0 4px;
+}
+
+.groupBody {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.groupSize {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  color: var(--color-soft);
+  white-space: nowrap;
+}
+
+.groupItems {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.cell {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.thumb {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid #ececec;
+  border-radius: 5px;
+  background: #fff;
+  padding: 0;
+  cursor: pointer;
+}
+
+.thumb img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* Checker so transparent product PNGs read clearly in admin. */
+.thumbTransparent {
+  background-color: #f3f3f3;
+  background-image:
+    linear-gradient(45deg, #e8e8e8 25%, transparent 25%),
+    linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e8e8e8 75%),
+    linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
+  background-size: 14px 14px;
+  background-position:
+    0 0,
+    0 7px,
+    7px -7px,
+    -7px 0;
+}
+
+/* Match website product cutouts (categories / hero objects). */
+.thumbContain img {
+  object-fit: contain;
+  object-position: center;
+  padding: 6% 8%;
+  box-sizing: border-box;
+}
+
+.thumbCover img {
+  object-fit: cover;
+  object-position: center;
+}
+
+.thumbEmpty {
+  display: grid;
+  place-items: center;
+  border-style: dashed;
+  border-color: #d8d8d8;
+  background: #fff;
+  color: var(--color-soft);
+  transition: border-color 0.2s ease, color 0.2s ease;
+}
+
+.thumbEmpty:hover,
+.thumbEmpty:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.plus {
+  font-size: 28px;
+  line-height: 1;
+  font-weight: 300;
+}
+
+.cellCompact {
+  width: 56px;
+  align-self: stretch;
+}
+
+.thumbCompact {
+  width: 100%;
+  min-height: 100%;
+  aspect-ratio: auto;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 28px;
+}
+
+.cellIndex {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.iconBtn {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border-radius: 3px;
+  color: var(--color-soft);
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.iconBtn svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+.iconBtn:hover,
+.iconBtn:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.iconBtnDanger:hover,
+.iconBtnDanger:focus-visible {
+  color: #8a1f11;
+}
+
+.loading {
+  min-height: 220px;
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+/* Modal */
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  padding: 24px var(--page-pad);
+  background: rgba(0, 0, 0, 0.28);
+}
+
+.modal {
+  width: min(100%, 560px);
+  max-height: min(90vh, 780px);
+  overflow: auto;
+  border-radius: 5px;
+  background: var(--color-white);
+  box-shadow: 24px 28px 48px rgba(0, 0, 0, 0.12);
+  padding: 28px 28px 24px;
+}
+
+.modalHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.kicker {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  margin-bottom: 8px;
+}
+
+.modalTitle {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.modalHint {
+  margin: 6px 0 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.closeBtn {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  font-size: 22px;
+  line-height: 1;
+  color: var(--color-soft);
+}
+
+.closeBtn:hover,
+.closeBtn:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.imageBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.imageLabelRow {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.imageLabel {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.cropPreviewWrap {
+  width: min(100%, 360px);
+  margin: 0 auto;
+}
+
+.cropPreview {
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid #ececec;
+  border-radius: 5px;
+  background: #fff;
+}
+
+.cropPreview img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.cropPreviewTransparent {
+  background-color: #f3f3f3;
+  background-image:
+    linear-gradient(45deg, #e8e8e8 25%, transparent 25%),
+    linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e8e8e8 75%),
+    linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
+  background-size: 14px 14px;
+  background-position:
+    0 0,
+    0 7px,
+    7px -7px,
+    -7px 0;
+}
+
+.cropPreviewContain img {
+  object-fit: contain;
+  object-position: center;
+  padding: 6% 8%;
+  box-sizing: border-box;
+}
+
+.cropPreviewCover img {
+  object-fit: cover;
+  object-position: center;
+}
+
+.changeImage {
+  margin-top: 8px;
+  width: 100%;
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.changeImage:hover,
+.changeImage:focus-visible {
+  color: var(--color-black);
+}
+
+.pickImage {
+  width: min(100%, 360px);
+  margin: 0 auto;
+  display: grid;
+  place-items: center;
+  border: 1px dashed #d8d8d8;
+  border-radius: 5px;
+  background: #fff;
+  color: var(--color-soft);
+  transition: border-color 0.2s ease, color 0.2s ease;
+}
+
+.pickImage:hover,
+.pickImage:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.pickPlus {
+  font-size: 36px;
+  line-height: 1;
+  font-weight: 300;
+}
+
+.pickMeta {
+  margin-top: 8px;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+}
+
+.linkRow {
+  display: flex;
+  align-items: stretch;
+  gap: 8px;
+}
+
+.linkField {
+  flex: 1;
+  min-width: 0;
+}
+
+.field {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-height: 46px;
+  padding: 14px 14px 10px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fff;
+  transition: border-color 0.25s ease;
+}
+
+.field span {
+  position: absolute;
+  top: -8px;
+  left: 12px;
+  background: #fff;
+  padding: 0 6px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-body);
+}
+
+.field:focus-within {
+  border-color: var(--color-black);
+}
+
+.field:focus-within span {
+  color: var(--color-black);
+}
+
+.field input,
+.field textarea {
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 15px;
+  font-weight: 400;
+  width: 100%;
+  color: var(--color-black);
+  resize: vertical;
+}
+
+.field textarea {
+  min-height: 72px;
+  line-height: 1.45;
+}
+
+.fileInput {
+  display: none;
+}
+
+.modalError {
+  margin: 0;
+  font-size: 12px;
+  color: #8a1f11;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.secondaryBtn,
+.primaryBtn {
+  min-height: 34px;
+  padding: 0 18px;
+  font-size: 11px;
+  letter-spacing: 0.14em;
+}
+
+.secondaryBtn {
+  border-color: #9e9e9e;
+  color: #9e9e9e;
+}
+
+.secondaryBtn:hover,
+.secondaryBtn:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.primaryBtn {
+  min-width: 112px;
+}
+
+@media (max-width: 720px) {
+  .head {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .modal {
+    padding: 24px 18px 20px;
+  }
+
+  .actions {
+    flex-direction: column-reverse;
+  }
+
+  .secondaryBtn,
+  .primaryBtn {
+    width: 100%;
+  }
+}
diff --git a/components/WebsiteImagesPage.tsx b/components/WebsiteImagesPage.tsx
new file mode 100644
index 0000000..3f9b22b
--- /dev/null
+++ b/components/WebsiteImagesPage.tsx
@@ -0,0 +1,838 @@
+"use client";
+
+import {
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type FormEvent,
+} from "react";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import ImageCropDialog from "@/components/ImageCropDialog";
+import WebsiteLinkGenerator from "@/components/WebsiteLinkGenerator";
+import {
+  getWebsiteHomeMedia,
+  newMediaItem,
+  saveWebsiteHomeMedia,
+  uploadWebsiteMedia,
+  type WebsiteHomeMedia,
+  type WebsiteMediaItem,
+} from "@/services/website-media";
+import styles from "./WebsiteImagesPage.module.css";
+
+type SectionKey =
+  | "slider"
+  | "standingBanners"
+  | "categories"
+  | "menuImages"
+  | "aboutUs"
+  | "banners";
+
+type PixelSize = { width: number; height: number };
+
+type SlotGroup = {
+  size: PixelSize;
+  indexes: number[];
+};
+
+type SectionDef = {
+  key: SectionKey;
+  label: string;
+  kind: "list" | "fixed";
+  itemCount?: number;
+  /** Default upload / preview size */
+  size: PixelSize;
+  /** Per-index size overrides when not using groups */
+  sizes?: PixelSize[];
+  /** Same-row size groups (e.g. homepage banners) */
+  groups?: SlotGroup[];
+  fit: "contain" | "cover";
+};
+
+type EditTarget = {
+  key: SectionKey;
+  index: number;
+};
+
+const SECTIONS: SectionDef[] = [
+  {
+    key: "slider",
+    label: "Slider",
+    kind: "list",
+    size: { width: 450, height: 450 },
+    fit: "contain",
+  },
+  {
+    key: "standingBanners",
+    label: "Standing banners",
+    kind: "fixed",
+    itemCount: 2,
+    size: { width: 600, height: 600 },
+    fit: "contain",
+  },
+  {
+    key: "categories",
+    label: "Categories",
+    kind: "list",
+    size: { width: 600, height: 600 },
+    fit: "contain",
+  },
+  {
+    key: "menuImages",
+    label: "Menu images",
+    kind: "fixed",
+    itemCount: 4,
+    size: { width: 600, height: 600 },
+    fit: "contain",
+  },
+  {
+    key: "aboutUs",
+    label: "About us",
+    kind: "fixed",
+    itemCount: 1,
+    size: { width: 979, height: 800 },
+    fit: "contain",
+  },
+  {
+    key: "banners",
+    label: "Banners",
+    kind: "fixed",
+    itemCount: 5,
+    size: { width: 650, height: 650 },
+    // Matches homepage: wide featured · 3 small cards · export strip
+    groups: [
+      { size: { width: 650, height: 650 }, indexes: [0] },
+      { size: { width: 900, height: 900 }, indexes: [1, 2, 3] },
+      { size: { width: 593, height: 640 }, indexes: [4] },
+    ],
+    fit: "contain",
+  },
+];
+
+function formatResolution(size: PixelSize) {
+  return `${size.width} × ${size.height}`;
+}
+
+function sizeForItem(section: SectionDef, index: number): PixelSize {
+  const fromGroup = section.groups?.find((group) =>
+    group.indexes.includes(index),
+  );
+  if (fromGroup) return fromGroup.size;
+  return section.sizes?.[index] ?? section.size;
+}
+
+function previewWidth(size: PixelSize) {
+  const aspect = size.width / size.height;
+  if (aspect >= 1.4) return 220;
+  if (aspect >= 0.9) return 140;
+  return 110;
+}
+
+function getItems(media: WebsiteHomeMedia, key: SectionKey): WebsiteMediaItem[] {
+  if (key === "aboutUs") return [media.aboutUs];
+  return media[key];
+}
+
+function withItems(
+  media: WebsiteHomeMedia,
+  key: SectionKey,
+  items: WebsiteMediaItem[],
+): WebsiteHomeMedia {
+  if (key === "aboutUs") {
+    return { ...media, aboutUs: items[0] ?? media.aboutUs };
+  }
+  return { ...media, [key]: items };
+}
+
+function emptySlot(partial?: Partial<WebsiteMediaItem>): WebsiteMediaItem {
+  return newMediaItem({
+    imageUrl: "",
+    linkUrl: "/",
+    title: "",
+    subtitle: "",
+    cta: "",
+    ...partial,
+  });
+}
+
+function padFixed(items: WebsiteMediaItem[], count: number) {
+  const next = items.slice(0, count);
+  while (next.length < count) next.push(emptySlot());
+  return next;
+}
+
+export default function WebsiteImagesPage() {
+  const [media, setMedia] = useState<WebsiteHomeMedia | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [status, setStatus] = useState("");
+  const [error, setError] = useState("");
+
+  const [editTarget, setEditTarget] = useState<EditTarget | null>(null);
+  const [removeTarget, setRemoveTarget] = useState<EditTarget | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setLoading(true);
+      setError("");
+      try {
+        const data = await getWebsiteHomeMedia();
+        if (!cancelled) setMedia(data);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error
+              ? err.message
+              : "Could not load website images.",
+          );
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  async function persist(next: WebsiteHomeMedia) {
+    setSaving(true);
+    setStatus("");
+    setError("");
+    try {
+      const saved = await saveWebsiteHomeMedia(next);
+      setMedia(saved);
+      setStatus("Saved");
+      return saved;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not save.");
+      throw err;
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleSaveItem(
+    target: EditTarget,
+    values: {
+      imageUrl: string;
+      title: string;
+      subtitle: string;
+      cta: string;
+      linkUrl: string;
+    },
+  ) {
+    if (!media) return;
+    const section = SECTIONS.find((row) => row.key === target.key);
+    if (!section) return;
+
+    let items = [...getItems(media, target.key)];
+    if (section.kind === "fixed" && section.itemCount) {
+      items = padFixed(items, section.itemCount);
+    }
+
+    const existing = items[target.index];
+    const nextItem: WebsiteMediaItem = {
+      ...(existing ?? emptySlot()),
+      imageUrl: values.imageUrl,
+      title: values.title,
+      subtitle: values.subtitle,
+      cta: values.cta,
+      linkUrl: values.linkUrl || "/",
+    };
+
+    if (section.kind === "list" && !existing) {
+      items.push(nextItem);
+    } else {
+      items[target.index] = nextItem;
+    }
+
+    if (section.kind === "fixed" && section.itemCount) {
+      items = padFixed(items, section.itemCount);
+    }
+
+    const next = withItems(media, target.key, items);
+    setMedia(next);
+    await persist(next);
+    setEditTarget(null);
+  }
+
+  async function handleRemove(target: EditTarget) {
+    if (!media) return;
+    const section = SECTIONS.find((row) => row.key === target.key);
+    if (!section) return;
+
+    let items = [...getItems(media, target.key)];
+
+    if (section.kind === "list") {
+      items = items.filter((_, index) => index !== target.index);
+      if (target.key === "slider" && items.length === 0) {
+        items = [emptySlot({ title: "New slide", cta: "browse producers" })];
+      }
+    } else {
+      if (section.itemCount) items = padFixed(items, section.itemCount);
+      items[target.index] = emptySlot({ id: items[target.index]?.id });
+    }
+
+    const next = withItems(media, target.key, items);
+    setMedia(next);
+    setRemoveTarget(null);
+    await persist(next);
+  }
+
+  if (loading) {
+    return <div className={styles.loading}>Loading website images…</div>;
+  }
+
+  if (!media) {
+    return (
+      <div className={styles.loading} role="alert">
+        {error || "Could not load website images."}
+      </div>
+    );
+  }
+
+  const editingSection = editTarget
+    ? SECTIONS.find((row) => row.key === editTarget.key)
+    : null;
+  const editingItems = editTarget ? getItems(media, editTarget.key) : [];
+  const editingItem = editTarget ? editingItems[editTarget.index] : null;
+
+  return (
+    <div className={styles.page}>
+      <header className={styles.head}>
+        <div>
+          <h1 className={styles.title}>Website images</h1>
+          <p className={styles.lead}>
+            Homepage assets at their website pixel sizes — add or replace via
+            cropper.
+          </p>
+        </div>
+        <div className={styles.headActions}>
+          {status ? (
+            <span className={`${styles.status} ${styles.statusOk}`}>{status}</span>
+          ) : null}
+          {error ? (
+            <span className={`${styles.status} ${styles.statusError}`}>
+              {error}
+            </span>
+          ) : null}
+        </div>
+      </header>
+
+      {SECTIONS.map((section) => {
+        const raw = getItems(media, section.key);
+        const items =
+          section.kind === "fixed" && section.itemCount
+            ? padFixed(raw, section.itemCount)
+            : raw;
+        const addSize = sizeForItem(section, items.length);
+        const addWidth = previewWidth(addSize);
+        const showListPlus = section.kind === "list";
+        const compactPlus = showListPlus && items.length > 0;
+        const thumbFitClass = `${styles.thumbTransparent} ${
+          section.fit === "contain" ? styles.thumbContain : styles.thumbCover
+        }`;
+        const groups = section.groups;
+        const hasGroups = Boolean(groups?.length);
+
+        function renderSlot(index: number, item: WebsiteMediaItem) {
+          const filled = Boolean(item.imageUrl?.trim());
+          const size = sizeForItem(section, index);
+          const width = previewWidth(size);
+          const aspect = `${size.width} / ${size.height}`;
+          return (
+            <div
+              key={`${section.key}-${item.id}-${index}`}
+              className={styles.cell}
+              style={{ width }}
+            >
+              {filled ? (
+                <>
+                  <button
+                    type="button"
+                    className={`${styles.thumb} ${thumbFitClass}`}
+                    style={{ aspectRatio: aspect }}
+                    aria-label={`Edit ${section.label} ${index + 1}`}
+                    disabled={saving}
+                    onClick={() => setEditTarget({ key: section.key, index })}
+                  >
+                    <img src={item.imageUrl} alt="" />
+                  </button>
+                  <div className={styles.footer}>
+                    <p className={styles.cellIndex}>{index + 1}</p>
+                    <div className={styles.controls}>
+                      <button
+                        type="button"
+                        className={styles.iconBtn}
+                        aria-label="Edit"
+                        disabled={saving}
+                        onClick={() =>
+                          setEditTarget({ key: section.key, index })
+                        }
+                      >
+                        <EditIcon />
+                      </button>
+                      <button
+                        type="button"
+                        className={`${styles.iconBtn} ${styles.iconBtnDanger}`}
+                        aria-label="Remove"
+                        disabled={saving}
+                        onClick={() =>
+                          setRemoveTarget({ key: section.key, index })
+                        }
+                      >
+                        <RemoveIcon />
+                      </button>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <button
+                  type="button"
+                  className={`${styles.thumb} ${styles.thumbEmpty}`}
+                  style={{ aspectRatio: aspect }}
+                  aria-label={`Add ${section.label} ${index + 1}`}
+                  disabled={saving}
+                  onClick={() => setEditTarget({ key: section.key, index })}
+                >
+                  <span className={styles.plus}>+</span>
+                </button>
+              )}
+            </div>
+          );
+        }
+
+        return (
+          <section key={section.key} className={styles.section}>
+            <div className={styles.sectionHead}>
+              <h2 className={styles.sectionTitle}>{section.label}</h2>
+              <p className={styles.sectionMeta}>
+                {section.key}
+                {" · "}
+                {section.kind === "list"
+                  ? "Duplicatable"
+                  : `Fixed · ${section.itemCount}`}
+                {!hasGroups ? ` · ${formatResolution(section.size)}` : null}
+              </p>
+            </div>
+
+            <div className={styles.track}>
+              {showListPlus ? (
+                <div
+                  className={`${styles.cell} ${compactPlus ? styles.cellCompact : ""}`}
+                  style={compactPlus ? undefined : { width: addWidth }}
+                >
+                  <button
+                    type="button"
+                    className={`${styles.thumb} ${styles.thumbEmpty} ${
+                      compactPlus ? styles.thumbCompact : ""
+                    }`}
+                    style={
+                      compactPlus
+                        ? {
+                            minHeight: Math.round(
+                              addWidth / (addSize.width / addSize.height),
+                            ),
+                          }
+                        : {
+                            aspectRatio: `${addSize.width} / ${addSize.height}`,
+                          }
+                    }
+                    aria-label={`Add ${section.label}`}
+                    disabled={saving}
+                    onClick={() =>
+                      setEditTarget({ key: section.key, index: items.length })
+                    }
+                  >
+                    <span className={styles.plus}>+</span>
+                  </button>
+                </div>
+              ) : null}
+
+              {hasGroups
+                ? groups!.map((group, groupIndex) => (
+                    <div key={`group-${groupIndex}`} className={styles.group}>
+                      {groupIndex > 0 ? (
+                        <div className={styles.groupDivider} aria-hidden />
+                      ) : null}
+                      <div className={styles.groupBody}>
+                        <p className={styles.groupSize}>
+                          {formatResolution(group.size)}
+                        </p>
+                        <div className={styles.groupItems}>
+                          {group.indexes.map((index) => {
+                            const item = items[index] ?? emptySlot();
+                            return renderSlot(index, item);
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                : items.map((item, index) => renderSlot(index, item))}
+            </div>
+          </section>
+        );
+      })}
+
+      <WebsiteMediaEditModal
+        open={Boolean(editTarget && editingSection)}
+        sectionLabel={editingSection?.label ?? ""}
+        size={
+          editTarget && editingSection
+            ? sizeForItem(editingSection, editTarget.index)
+            : { width: 600, height: 600 }
+        }
+        fit={editingSection?.fit ?? "contain"}
+        initial={editingItem}
+        busy={saving}
+        onClose={() => {
+          if (!saving) setEditTarget(null);
+        }}
+        onSave={async (values) => {
+          if (!editTarget) return;
+          await handleSaveItem(editTarget, values);
+        }}
+      />
+
+      <ConfirmDialog
+        open={Boolean(removeTarget)}
+        title="Remove image"
+        message="Clear this slot? You can add a new image later."
+        confirmLabel="Remove"
+        danger
+        busy={saving}
+        onClose={() => {
+          if (!saving) setRemoveTarget(null);
+        }}
+        onConfirm={() => {
+          if (removeTarget) void handleRemove(removeTarget);
+        }}
+      />
+    </div>
+  );
+}
+
+function EditIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" />
+    </svg>
+  );
+}
+
+function RemoveIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  );
+}
+
+function WebsiteMediaEditModal({
+  open,
+  sectionLabel,
+  size,
+  fit,
+  initial,
+  busy,
+  onClose,
+  onSave,
+}: {
+  open: boolean;
+  sectionLabel: string;
+  size: PixelSize;
+  fit: "contain" | "cover";
+  initial: WebsiteMediaItem | null | undefined;
+  busy: boolean;
+  onClose: () => void;
+  onSave: (values: {
+    imageUrl: string;
+    title: string;
+    subtitle: string;
+    cta: string;
+    linkUrl: string;
+  }) => Promise<void>;
+}) {
+  const resolution = formatResolution(size);
+  const aspect = size.width / size.height;
+  const titleId = useId();
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [title, setTitle] = useState("");
+  const [subtitle, setSubtitle] = useState("");
+  const [cta, setCta] = useState("");
+  const [linkUrl, setLinkUrl] = useState("");
+  const [imageUrl, setImageUrl] = useState("");
+  const [pendingFile, setPendingFile] = useState<File | null>(null);
+  const [cropSrc, setCropSrc] = useState<string | null>(null);
+  const [cropOpen, setCropOpen] = useState(false);
+  const [localError, setLocalError] = useState("");
+  const [uploading, setUploading] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setTitle(initial?.title ?? "");
+    setSubtitle(initial?.subtitle ?? "");
+    setCta(initial?.cta ?? "");
+    setLinkUrl(initial?.linkUrl ?? "");
+    setImageUrl(initial?.imageUrl ?? "");
+    setPendingFile(null);
+    setLocalError("");
+    setCropSrc(null);
+    setCropOpen(false);
+  }, [open, initial]);
+
+  useEffect(() => {
+    if (!open) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && !busy && !cropOpen) onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open, busy, cropOpen, onClose]);
+
+  if (!open) return null;
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    if (!imageUrl && !pendingFile) {
+      setLocalError("Add an image first.");
+      return;
+    }
+    setLocalError("");
+    setUploading(true);
+    try {
+      let nextUrl = imageUrl;
+      if (pendingFile) {
+        nextUrl = await uploadWebsiteMedia(pendingFile);
+      }
+      await onSave({
+        imageUrl: nextUrl,
+        title: title.trim(),
+        subtitle: subtitle.trim(),
+        cta: cta.trim(),
+        linkUrl: linkUrl.trim() || "/",
+      });
+    } catch (err) {
+      setLocalError(err instanceof Error ? err.message : "Could not save.");
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  const working = busy || uploading;
+
+  return (
+    <>
+      <div className={styles.overlay} role="presentation" onClick={onClose}>
+        <div
+          className={styles.modal}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={titleId}
+          onClick={(event) => event.stopPropagation()}
+        >
+          <div className={styles.modalHead}>
+            <div>
+              <p className={styles.kicker}>Website image</p>
+              <h2 id={titleId} className={styles.modalTitle}>
+                {initial?.imageUrl ? "Edit image" : "Add image"}
+              </h2>
+              <p className={styles.modalHint}>
+                {sectionLabel} · {resolution}
+              </p>
+            </div>
+            <button
+              type="button"
+              className={styles.closeBtn}
+              aria-label="Close"
+              disabled={working}
+              onClick={onClose}
+            >
+              ×
+            </button>
+          </div>
+
+          <form className={styles.form} onSubmit={(event) => void submit(event)}>
+            <div className={styles.imageBlock}>
+              <div className={styles.imageLabelRow}>
+                <span className={styles.imageLabel}>Image</span>
+                <span className={styles.imageLabel}>{resolution}</span>
+              </div>
+
+              {imageUrl ? (
+                <div className={styles.cropPreviewWrap}>
+                  <div
+                    className={`${styles.cropPreview} ${styles.cropPreviewTransparent} ${
+                      fit === "contain"
+                        ? styles.cropPreviewContain
+                        : styles.cropPreviewCover
+                    }`}
+                    style={{ aspectRatio: `${size.width} / ${size.height}` }}
+                  >
+                    <img src={imageUrl} alt="" />
+                  </div>
+                  <button
+                    type="button"
+                    className={styles.changeImage}
+                    disabled={working}
+                    onClick={() => fileRef.current?.click()}
+                  >
+                    Change image
+                  </button>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  className={styles.pickImage}
+                  style={{ aspectRatio: `${size.width} / ${size.height}` }}
+                  disabled={working}
+                  onClick={() => fileRef.current?.click()}
+                >
+                  <span className={styles.pickPlus}>+</span>
+                  <span className={styles.pickMeta}>{resolution}</span>
+                </button>
+              )}
+
+              <input
+                ref={fileRef}
+                type="file"
+                accept="image/jpeg,image/png,image/webp"
+                className={styles.fileInput}
+                onChange={(event) => {
+                  const file = event.target.files?.[0];
+                  event.target.value = "";
+                  if (!file) return;
+                  const url = URL.createObjectURL(file);
+                  setCropSrc(url);
+                  setCropOpen(true);
+                }}
+              />
+            </div>
+
+            <label className={styles.field}>
+              <span>Title EN</span>
+              <input
+                value={title}
+                onChange={(event) => setTitle(event.target.value)}
+                placeholder="Title"
+                disabled={working}
+              />
+            </label>
+
+            <label className={styles.field}>
+              <span>Subtext</span>
+              <textarea
+                value={subtitle}
+                onChange={(event) => setSubtitle(event.target.value)}
+                placeholder="Short supporting text"
+                disabled={working}
+                rows={3}
+              />
+            </label>
+
+            <label className={styles.field}>
+              <span>Link text</span>
+              <input
+                value={cta}
+                onChange={(event) => setCta(event.target.value)}
+                placeholder="browse producers"
+                disabled={working}
+              />
+            </label>
+
+            <div className={styles.linkRow}>
+              <label className={`${styles.field} ${styles.linkField}`}>
+                <span>Link value</span>
+                <input
+                  value={linkUrl}
+                  onChange={(event) => setLinkUrl(event.target.value)}
+                  placeholder="/businesses"
+                  dir="ltr"
+                  disabled={working}
+                />
+              </label>
+              <WebsiteLinkGenerator
+                disabled={working}
+                onPick={(url) => setLinkUrl(url)}
+              />
+            </div>
+
+            {localError ? (
+              <p className={styles.modalError} role="alert">
+                {localError}
+              </p>
+            ) : null}
+
+            <div className={styles.actions}>
+              <button
+                type="button"
+                className={`outline-btn ${styles.secondaryBtn}`}
+                disabled={working}
+                onClick={onClose}
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                className={`outline-btn ${styles.primaryBtn}`}
+                disabled={working || (!imageUrl && !pendingFile)}
+              >
+                {working ? "…" : "Save"}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <ImageCropDialog
+        open={cropOpen}
+        imageSrc={cropSrc}
+        title={`Crop · ${resolution}`}
+        aspect={aspect}
+        outputType="image/png"
+        fileName={`${sectionLabel.toLowerCase().replace(/\s+/g, "-")}-image`}
+        onCancel={() => {
+          if (cropSrc?.startsWith("blob:")) URL.revokeObjectURL(cropSrc);
+          setCropOpen(false);
+          setCropSrc(null);
+        }}
+        onComplete={(file, previewUrl) => {
+          if (cropSrc?.startsWith("blob:")) URL.revokeObjectURL(cropSrc);
+          setPendingFile(file);
+          setImageUrl(previewUrl);
+          setCropOpen(false);
+          setCropSrc(null);
+        }}
+      />
+    </>
+  );
+}
diff --git a/components/WebsiteLinkGenerator.module.css b/components/WebsiteLinkGenerator.module.css
new file mode 100644
index 0000000..9b4474e
--- /dev/null
+++ b/components/WebsiteLinkGenerator.module.css
@@ -0,0 +1,183 @@
+.trigger {
+  width: 46px;
+  min-height: 46px;
+  flex: 0 0 auto;
+  align-self: stretch;
+  display: grid;
+  place-items: center;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  color: var(--color-soft);
+  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
+}
+
+.trigger svg {
+  display: block;
+}
+
+.trigger:hover,
+.trigger:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-black);
+  background: #fafafa;
+}
+
+.trigger:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 95;
+  display: grid;
+  place-items: center;
+  padding: 24px var(--page-pad);
+  background: rgba(0, 0, 0, 0.28);
+}
+
+.modal {
+  width: min(100%, 720px);
+  max-height: min(90vh, 760px);
+  overflow: auto;
+  border-radius: 5px;
+  background: var(--color-white);
+  box-shadow: 24px 28px 48px rgba(0, 0, 0, 0.12);
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.kicker {
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.closeBtn {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+  font-size: 22px;
+  line-height: 1;
+  color: var(--color-soft);
+}
+
+.closeBtn:hover,
+.closeBtn:focus-visible {
+  background: #f6f6f6;
+  color: var(--color-black);
+}
+
+.kindSwitch {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+  padding: 4px;
+  border-radius: 5px;
+  background: #f6f6f6;
+}
+
+.kindBtn {
+  min-height: 38px;
+  padding: 0 10px;
+  border-radius: 3px;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.kindBtnActive {
+  background: var(--color-black);
+  color: var(--color-white);
+}
+
+.status,
+.error {
+  margin: 0;
+  padding: 14px 16px;
+  font-size: 12px;
+  color: var(--color-soft);
+  border: 1px solid #ececec;
+  border-radius: 5px;
+}
+
+.error {
+  color: #8a1f11;
+}
+
+.preview {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 14px;
+  border-radius: 5px;
+  background: #fafafa;
+  border: 1px solid #f0f0f0;
+}
+
+.preview span {
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.preview code {
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--color-black);
+  word-break: break-all;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.secondaryBtn,
+.primaryBtn {
+  min-height: 34px;
+  padding: 0 18px;
+  font-size: 11px;
+  letter-spacing: 0.14em;
+}
+
+.secondaryBtn {
+  border-color: #9e9e9e;
+  color: #9e9e9e;
+}
+
+.secondaryBtn:hover,
+.secondaryBtn:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.primaryBtn {
+  min-width: 112px;
+}
diff --git a/components/WebsiteLinkGenerator.tsx b/components/WebsiteLinkGenerator.tsx
new file mode 100644
index 0000000..654fde0
--- /dev/null
+++ b/components/WebsiteLinkGenerator.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import { useEffect, useId, useMemo, useState } from "react";
+import CategoryTreeSelect from "@/components/CategoryTreeSelect";
+import {
+  searchMeshkeeCategories,
+  type MeshkeeCategory,
+} from "@/services/meshkee-categories";
+import styles from "./WebsiteLinkGenerator.module.css";
+
+export type WebsiteLinkKind = "businesses" | "blog";
+
+function buildCategoryLink(kind: WebsiteLinkKind, category: MeshkeeCategory) {
+  const path = kind === "blog" ? "/blog" : "/businesses";
+  const query = category.slug
+    ? `category=${encodeURIComponent(category.slug)}`
+    : `categoryId=${encodeURIComponent(category.id)}`;
+  return `${path}?${query}`;
+}
+
+function LinkIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.75"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <path d="M10 13a5 5 0 0 0 7.54.54l1.92-1.92a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
+      <path d="M14 11a5 5 0 0 0-7.54-.54L4.54 12.38a5 5 0 0 0 7.07 7.07l1.71-1.71" />
+    </svg>
+  );
+}
+
+export default function WebsiteLinkGenerator({
+  onPick,
+  disabled = false,
+}: {
+  onPick: (url: string) => void;
+  disabled?: boolean;
+}) {
+  const titleId = useId();
+  const [open, setOpen] = useState(false);
+  const [kind, setKind] = useState<WebsiteLinkKind>("businesses");
+  const [categories, setCategories] = useState<MeshkeeCategory[]>([]);
+  const [categoryId, setCategoryId] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (!open) return;
+    setKind("businesses");
+    setCategoryId("");
+    setError("");
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const controller = new AbortController();
+    setLoading(true);
+    setError("");
+    void searchMeshkeeCategories("", controller.signal)
+      .then((items) => {
+        if (controller.signal.aborted) return;
+        setCategories(items);
+      })
+      .catch((err) => {
+        if (controller.signal.aborted) return;
+        setCategories([]);
+        setError(
+          err instanceof Error ? err.message : "Could not load categories.",
+        );
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) setLoading(false);
+      });
+
+    return () => controller.abort();
+  }, [open]);
+
+  const selected = useMemo(
+    () => categories.find((item) => item.id === categoryId) ?? null,
+    [categories, categoryId],
+  );
+  const preview = selected ? buildCategoryLink(kind, selected) : "";
+
+  return (
+    <>
+      <button
+        type="button"
+        className={styles.trigger}
+        aria-label="Generate link"
+        title="Generate link"
+        disabled={disabled}
+        onClick={() => setOpen(true)}
+      >
+        <LinkIcon />
+      </button>
+
+      {open ? (
+        <div
+          className={styles.overlay}
+          role="presentation"
+          onClick={() => setOpen(false)}
+        >
+          <div
+            className={styles.modal}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <div className={styles.head}>
+              <div>
+                <p className={styles.kicker}>Link generator</p>
+                <h3 id={titleId} className={styles.title}>
+                  Build category link
+                </h3>
+              </div>
+              <button
+                type="button"
+                className={styles.closeBtn}
+                aria-label="Close"
+                onClick={() => setOpen(false)}
+              >
+                ×
+              </button>
+            </div>
+
+            <div className={styles.kindSwitch} role="tablist" aria-label="Link type">
+              <button
+                type="button"
+                role="tab"
+                aria-selected={kind === "businesses"}
+                className={`${styles.kindBtn} ${
+                  kind === "businesses" ? styles.kindBtnActive : ""
+                }`}
+                onClick={() => setKind("businesses")}
+              >
+                Businesses category
+              </button>
+              <button
+                type="button"
+                role="tab"
+                aria-selected={kind === "blog"}
+                className={`${styles.kindBtn} ${
+                  kind === "blog" ? styles.kindBtnActive : ""
+                }`}
+                onClick={() => setKind("blog")}
+              >
+                Blog category
+              </button>
+            </div>
+
+            {loading ? (
+              <p className={styles.status}>Loading categories…</p>
+            ) : error ? (
+              <p className={styles.error}>{error}</p>
+            ) : (
+              <CategoryTreeSelect
+                categories={categories}
+                value={categoryId ? [categoryId] : []}
+                onChange={(ids) => setCategoryId(ids[0] ?? "")}
+                selection="single"
+                dropdownVariant="inFlow"
+                label="Category"
+                placeholder="Search categories…"
+              />
+            )}
+
+            <div className={styles.preview}>
+              <span>Preview</span>
+              <code dir="ltr">{preview || "Select a category"}</code>
+            </div>
+
+            <div className={styles.actions}>
+              <button
+                type="button"
+                className={`outline-btn ${styles.secondaryBtn}`}
+                onClick={() => setOpen(false)}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className={`outline-btn ${styles.primaryBtn}`}
+                disabled={!preview}
+                onClick={() => {
+                  if (!preview) return;
+                  onPick(preview);
+                  setOpen(false);
+                }}
+              >
+                Use link
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+}
diff --git a/components/business/BusinessPageChrome.tsx b/components/business/BusinessPageChrome.tsx
new file mode 100644
index 0000000..6643de8
--- /dev/null
+++ b/components/business/BusinessPageChrome.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { useAuth } from "@/components/AuthProvider";
+import styles from "@/components/BusinessDetailsPage.module.css";
+
+export function BusinessMeshkeeGate({
+  children,
+}: {
+  children: (meshkeeId: string) => React.ReactNode;
+}) {
+  const { activeBusinessId, isLoading, isSuperAdmin } = useAuth();
+
+  if (isLoading) {
+    return <div className={styles.loading}>Loading…</div>;
+  }
+
+  if (!activeBusinessId) {
+    return (
+      <div className={styles.error} role="alert">
+        <p className={styles.errorTitle}>
+          {isSuperAdmin ? "No business selected" : "No business linked"}
+        </p>
+        <p className={styles.errorCopy}>
+          {isSuperAdmin
+            ? "Open a listing in the admin dashboard and use Manage business."
+            : "This account has no Meshkee business. Contact support."}
+        </p>
+      </div>
+    );
+  }
+
+  return <>{children(activeBusinessId)}</>;
+}
+
+export function BusinessListHeader({
+  title,
+  lead,
+  action,
+}: {
+  title: string;
+  lead: string;
+  action?: React.ReactNode;
+}) {
+  return (
+    <header className={styles.head}>
+      <div>
+        <h1 className={styles.title}>{title}</h1>
+        <p className={styles.lead}>{lead}</p>
+      </div>
+      {action ? <div className={styles.headActions}>{action}</div> : null}
+    </header>
+  );
+}
diff --git a/components/catalog/AddBlogForm.tsx b/components/catalog/AddBlogForm.tsx
new file mode 100644
index 0000000..c6b9b84
--- /dev/null
+++ b/components/catalog/AddBlogForm.tsx
@@ -0,0 +1,258 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import {
+  FeaturedImageField,
+  TagsField,
+  type LocalImage,
+} from "@/components/catalog/CatalogFormFields";
+import CatalogCategorySelect from "@/components/catalog/CatalogCategorySelect";
+import RichTextArea from "@/components/RichTextArea";
+import {
+  createMeshkeeBlog,
+  listMeshkeeEntityCategories,
+  uploadMeshkeeMediaFile,
+  type MeshkeeEntityCategory,
+} from "@/services/meshkee-catalog";
+import styles from "./CatalogForm.module.css";
+
+const BLOG_TYPES = [
+  { value: "blog", label: "Blog" },
+  { value: "article", label: "Article" },
+  { value: "news", label: "News" },
+] as const;
+
+export default function AddBlogForm({
+  meshkeeId,
+  listHref,
+  title,
+  lead,
+}: {
+  meshkeeId: string;
+  listHref: string;
+  title: string;
+  lead: string;
+}) {
+  const router = useRouter();
+  const [categories, setCategories] = useState<MeshkeeEntityCategory[]>([]);
+  const [categoryId, setCategoryId] = useState("");
+  const [type, setType] = useState<"blog" | "article" | "news">("blog");
+  const [postTitle, setPostTitle] = useState("");
+  const [abstract, setAbstract] = useState("");
+  const [mainTextHtml, setMainTextHtml] = useState("");
+  const [titleImage, setTitleImage] = useState<LocalImage | null>(null);
+  const [tags, setTags] = useState<string[]>([]);
+  const [seoMetaTitle, setSeoMetaTitle] = useState("");
+  const [seoMetaDescription, setSeoMetaDescription] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const items = await listMeshkeeEntityCategories(meshkeeId, "blog");
+        if (!cancelled) setCategories(items);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load categories.",
+          );
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [meshkeeId]);
+
+  async function onSubmit(event?: React.FormEvent) {
+    event?.preventDefault();
+    if (!postTitle.trim()) {
+      setError("Enter a title.");
+      return;
+    }
+
+    setSaving(true);
+    setError("");
+    try {
+      let featuredMediaId: string | undefined;
+      if (titleImage?.file) {
+        featuredMediaId = (
+          await uploadMeshkeeMediaFile(meshkeeId, titleImage.file)
+        ).id;
+      }
+
+      await createMeshkeeBlog(meshkeeId, {
+        title: postTitle.trim(),
+        type,
+        abstract: abstract.trim() || undefined,
+        mainTextHtml: mainTextHtml || undefined,
+        categoryId: categoryId || undefined,
+        featuredMediaId,
+        tags,
+        seoMetaTitle: seoMetaTitle.trim() || null,
+        seoMetaDescription: seoMetaDescription.trim() || null,
+      });
+      router.push(listHref);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not create blog post.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <form className={styles.page} onSubmit={onSubmit}>
+      <header className={styles.head}>
+        <div>
+          <h1 className={styles.title}>{title}</h1>
+          <p className={styles.lead}>{lead}</p>
+        </div>
+        <div className={styles.headActions}>
+          <Link href={listHref} className={`outline-btn ${styles.ghostBtn}`}>
+            Back
+          </Link>
+          <button
+            type="submit"
+            className={`outline-btn ${styles.saveBtn}`}
+            disabled={saving}
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </header>
+
+      {error ? (
+        <div className={styles.errorBox} role="alert">
+          {error}
+        </div>
+      ) : null}
+
+      <div className={styles.layout}>
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Media</h2>
+          <div className={styles.mediaGrid}>
+            <FeaturedImageField
+              label="Title image"
+              value={titleImage}
+              aspect={3 / 2}
+              disabled={saving}
+              onChange={setTitleImage}
+            />
+            <div className={styles.identityRow}>
+              <label className={styles.field}>
+                <span>Type</span>
+                <select
+                  value={type}
+                  disabled={saving}
+                  onChange={(event) =>
+                    setType(event.target.value as "blog" | "article" | "news")
+                  }
+                >
+                  {BLOG_TYPES.map((item) => (
+                    <option key={item.value} value={item.value}>
+                      {item.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <CatalogCategorySelect
+                categories={categories}
+                value={categoryId}
+                disabled={saving}
+                optional
+                placeholder="No category"
+                onChange={setCategoryId}
+              />
+            </div>
+          </div>
+        </section>
+
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Identity</h2>
+          <label className={styles.field}>
+            <span>Title</span>
+            <input
+              value={postTitle}
+              disabled={saving}
+              required
+              onChange={(event) => setPostTitle(event.target.value)}
+            />
+          </label>
+        </section>
+
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Content</h2>
+          <div className={styles.stack}>
+            <label className={styles.field}>
+              <span>
+                Abstract <em className={styles.optional}>(optional)</em>
+              </span>
+              <textarea
+                rows={3}
+                value={abstract}
+                disabled={saving}
+                onChange={(event) => setAbstract(event.target.value)}
+              />
+            </label>
+            <div className={styles.richField}>
+              <RichTextArea
+                label="Content"
+                value={mainTextHtml}
+                onChange={setMainTextHtml}
+                disabled={saving}
+                minHeight={260}
+              />
+            </div>
+            <TagsField tags={tags} disabled={saving} onChange={setTags} />
+          </div>
+        </section>
+
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>SEO</h2>
+          <div className={styles.identityRow}>
+            <label className={styles.field}>
+              <span>
+                SEO title <em className={styles.optional}>(optional)</em>
+              </span>
+              <input
+                value={seoMetaTitle}
+                maxLength={70}
+                disabled={saving}
+                onChange={(event) => setSeoMetaTitle(event.target.value)}
+              />
+            </label>
+            <label className={styles.field}>
+              <span>
+                SEO description <em className={styles.optional}>(optional)</em>
+              </span>
+              <input
+                value={seoMetaDescription}
+                maxLength={160}
+                disabled={saving}
+                onChange={(event) => setSeoMetaDescription(event.target.value)}
+              />
+            </label>
+          </div>
+        </section>
+
+        <div className={styles.footerActions}>
+          <Link href={listHref} className={`outline-btn ${styles.ghostBtn}`}>
+            Cancel
+          </Link>
+          <button
+            type="submit"
+            className={`outline-btn ${styles.saveBtn}`}
+            disabled={saving}
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/components/catalog/AddPortfolioForm.tsx b/components/catalog/AddPortfolioForm.tsx
new file mode 100644
index 0000000..a36c23f
--- /dev/null
+++ b/components/catalog/AddPortfolioForm.tsx
@@ -0,0 +1,288 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import {
+  FeaturedImageField,
+  GalleryImagesField,
+  TagsField,
+  type LocalImage,
+} from "@/components/catalog/CatalogFormFields";
+import CatalogCategorySelect from "@/components/catalog/CatalogCategorySelect";
+import RichTextArea from "@/components/RichTextArea";
+import {
+  createMeshkeePortfolio,
+  listMeshkeeEntityCategories,
+  uploadMeshkeeMediaFile,
+  type MeshkeeEntityCategory,
+} from "@/services/meshkee-catalog";
+import styles from "./CatalogForm.module.css";
+
+export default function AddPortfolioForm({
+  meshkeeId,
+  listHref,
+  title,
+  lead,
+}: {
+  meshkeeId: string;
+  listHref: string;
+  title: string;
+  lead: string;
+}) {
+  const router = useRouter();
+  const [categories, setCategories] = useState<MeshkeeEntityCategory[]>([]);
+  const [categoryId, setCategoryId] = useState("");
+  const [titleFa, setTitleFa] = useState("");
+  const [titleEn, setTitleEn] = useState("");
+  const [abstract, setAbstract] = useState("");
+  const [projectUrl, setProjectUrl] = useState("");
+  const [mainTextHtml, setMainTextHtml] = useState("");
+  const [titleImage, setTitleImage] = useState<LocalImage | null>(null);
+  const [gallery, setGallery] = useState<LocalImage[]>([]);
+  const [tags, setTags] = useState<string[]>([]);
+  const [seoMetaTitle, setSeoMetaTitle] = useState("");
+  const [seoMetaDescription, setSeoMetaDescription] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const items = await listMeshkeeEntityCategories(meshkeeId, "portfolio");
+        if (!cancelled) setCategories(items);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load categories.",
+          );
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [meshkeeId]);
+
+  async function onSubmit(event?: React.FormEvent) {
+    event?.preventDefault();
+    if (!titleFa.trim()) {
+      setError("Enter a Persian title.");
+      return;
+    }
+
+    setSaving(true);
+    setError("");
+    try {
+      let featuredMediaId: string | undefined;
+      if (titleImage?.file) {
+        featuredMediaId = (
+          await uploadMeshkeeMediaFile(meshkeeId, titleImage.file)
+        ).id;
+      }
+
+      const galleryMediaIds: string[] = [];
+      for (const item of gallery) {
+        if (item.mediaId) {
+          galleryMediaIds.push(item.mediaId);
+          continue;
+        }
+        if (item.file) {
+          galleryMediaIds.push(
+            (await uploadMeshkeeMediaFile(meshkeeId, item.file)).id,
+          );
+        }
+      }
+
+      await createMeshkeePortfolio(meshkeeId, {
+        titleFa: titleFa.trim(),
+        titleEn: titleEn.trim() || undefined,
+        abstract: abstract.trim() || undefined,
+        projectUrl: projectUrl.trim() || undefined,
+        mainTextHtml: mainTextHtml || undefined,
+        categoryId: categoryId || undefined,
+        featuredMediaId,
+        galleryMediaIds,
+        tags,
+        seoMetaTitle: seoMetaTitle.trim() || null,
+        seoMetaDescription: seoMetaDescription.trim() || null,
+      });
+      router.push(listHref);
+      router.refresh();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not create portfolio.",
+      );
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <form className={styles.page} onSubmit={onSubmit}>
+      <header className={styles.head}>
+        <div>
+          <h1 className={styles.title}>{title}</h1>
+          <p className={styles.lead}>{lead}</p>
+        </div>
+        <div className={styles.headActions}>
+          <Link href={listHref} className={`outline-btn ${styles.ghostBtn}`}>
+            Back
+          </Link>
+          <button
+            type="submit"
+            className={`outline-btn ${styles.saveBtn}`}
+            disabled={saving}
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </header>
+
+      {error ? (
+        <div className={styles.errorBox} role="alert">
+          {error}
+        </div>
+      ) : null}
+
+      <div className={styles.layout}>
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Media</h2>
+          <div className={styles.mediaGrid}>
+            <FeaturedImageField
+              label="Title image"
+              value={titleImage}
+              aspect={3 / 2}
+              disabled={saving}
+              onChange={setTitleImage}
+            />
+            <GalleryImagesField
+              items={gallery}
+              disabled={saving}
+              onChange={setGallery}
+            />
+          </div>
+        </section>
+
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Identity</h2>
+          <div className={styles.stack}>
+            <div className={styles.identityRow3}>
+              <CatalogCategorySelect
+                categories={categories}
+                value={categoryId}
+                disabled={saving}
+                optional
+                placeholder="No category"
+                onChange={setCategoryId}
+              />
+              <label className={styles.field}>
+                <span>Title FA</span>
+                <input
+                  className="fa"
+                  lang="fa"
+                  dir="rtl"
+                  value={titleFa}
+                  disabled={saving}
+                  required
+                  onChange={(event) => setTitleFa(event.target.value)}
+                />
+              </label>
+              <label className={styles.field}>
+                <span>
+                  Title EN <em className={styles.optional}>(optional)</em>
+                </span>
+                <input
+                  value={titleEn}
+                  disabled={saving}
+                  onChange={(event) => setTitleEn(event.target.value)}
+                />
+              </label>
+            </div>
+            <label className={styles.field}>
+              <span>
+                Project URL <em className={styles.optional}>(optional)</em>
+              </span>
+              <input
+                dir="ltr"
+                value={projectUrl}
+                disabled={saving}
+                placeholder="https://"
+                onChange={(event) => setProjectUrl(event.target.value)}
+              />
+            </label>
+          </div>
+        </section>
+
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Content</h2>
+          <div className={styles.stack}>
+            <label className={styles.field}>
+              <span>
+                Abstract <em className={styles.optional}>(optional)</em>
+              </span>
+              <textarea
+                rows={3}
+                value={abstract}
+                disabled={saving}
+                onChange={(event) => setAbstract(event.target.value)}
+              />
+            </label>
+            <div className={styles.richField}>
+              <RichTextArea
+                label="Content"
+                value={mainTextHtml}
+                onChange={setMainTextHtml}
+                disabled={saving}
+                minHeight={220}
+              />
+            </div>
+            <TagsField tags={tags} disabled={saving} onChange={setTags} />
+          </div>
+        </section>
+
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>SEO</h2>
+          <div className={styles.identityRow}>
+            <label className={styles.field}>
+              <span>
+                SEO title <em className={styles.optional}>(optional)</em>
+              </span>
+              <input
+                value={seoMetaTitle}
+                maxLength={70}
+                disabled={saving}
+                onChange={(event) => setSeoMetaTitle(event.target.value)}
+              />
+            </label>
+            <label className={styles.field}>
+              <span>
+                SEO description <em className={styles.optional}>(optional)</em>
+              </span>
+              <input
+                value={seoMetaDescription}
+                maxLength={160}
+                disabled={saving}
+                onChange={(event) => setSeoMetaDescription(event.target.value)}
+              />
+            </label>
+          </div>
+        </section>
+
+        <div className={styles.footerActions}>
+          <Link href={listHref} className={`outline-btn ${styles.ghostBtn}`}>
+            Cancel
+          </Link>
+          <button
+            type="submit"
+            className={`outline-btn ${styles.saveBtn}`}
+            disabled={saving}
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/components/catalog/AddProductForm.tsx b/components/catalog/AddProductForm.tsx
new file mode 100644
index 0000000..77f0a71
--- /dev/null
+++ b/components/catalog/AddProductForm.tsx
@@ -0,0 +1,273 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import {
+  FeaturedImageField,
+  GalleryImagesField,
+  TagsField,
+  type LocalImage,
+} from "@/components/catalog/CatalogFormFields";
+import CatalogCategorySelect from "@/components/catalog/CatalogCategorySelect";
+import RichTextArea from "@/components/RichTextArea";
+import {
+  createMeshkeeProduct,
+  listMeshkeeEntityCategories,
+  uploadMeshkeeMediaFile,
+  type MeshkeeEntityCategory,
+} from "@/services/meshkee-catalog";
+import styles from "./CatalogForm.module.css";
+
+export default function AddProductForm({
+  meshkeeId,
+  listHref,
+  title,
+  lead,
+}: {
+  meshkeeId: string;
+  listHref: string;
+  title: string;
+  lead: string;
+}) {
+  const router = useRouter();
+  const [categories, setCategories] = useState<MeshkeeEntityCategory[]>([]);
+  const [categoryId, setCategoryId] = useState("");
+  const [nameFa, setNameFa] = useState("");
+  const [nameEn, setNameEn] = useState("");
+  const [summary, setSummary] = useState("");
+  const [description, setDescription] = useState("");
+  const [thumbnail, setThumbnail] = useState<LocalImage | null>(null);
+  const [gallery, setGallery] = useState<LocalImage[]>([]);
+  const [tags, setTags] = useState<string[]>([]);
+  const [seoMetaTitle, setSeoMetaTitle] = useState("");
+  const [seoMetaDescription, setSeoMetaDescription] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const items = await listMeshkeeEntityCategories(meshkeeId, "product");
+        if (!cancelled) setCategories(items);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load categories.",
+          );
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [meshkeeId]);
+
+  async function onSubmit(event?: React.FormEvent) {
+    event?.preventDefault();
+    if (!nameEn.trim() && !nameFa.trim()) {
+      setError("Enter a product name.");
+      return;
+    }
+    if (!categoryId) {
+      setError("Select a category.");
+      return;
+    }
+
+    setSaving(true);
+    setError("");
+    try {
+      let featuredMediaId: string | undefined;
+      if (thumbnail?.file) {
+        featuredMediaId = (
+          await uploadMeshkeeMediaFile(meshkeeId, thumbnail.file)
+        ).id;
+      } else if (thumbnail?.mediaId) {
+        featuredMediaId = thumbnail.mediaId;
+      }
+
+      const galleryMediaIds: string[] = [];
+      for (const item of gallery) {
+        if (item.mediaId) {
+          galleryMediaIds.push(item.mediaId);
+          continue;
+        }
+        if (item.file) {
+          galleryMediaIds.push(
+            (await uploadMeshkeeMediaFile(meshkeeId, item.file)).id,
+          );
+        }
+      }
+
+      await createMeshkeeProduct(meshkeeId, {
+        title: nameEn.trim() || nameFa.trim(),
+        nameFa: nameFa.trim() || undefined,
+        summary: summary.trim() || undefined,
+        descriptionHtml: description || undefined,
+        categoryId,
+        featuredMediaId,
+        galleryMediaIds,
+        tags,
+        seoMetaTitle: seoMetaTitle.trim() || null,
+        seoMetaDescription: seoMetaDescription.trim() || null,
+      });
+      router.push(listHref);
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not create product.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <form className={styles.page} onSubmit={onSubmit}>
+      <header className={styles.head}>
+        <div>
+          <h1 className={styles.title}>{title}</h1>
+          <p className={styles.lead}>{lead}</p>
+        </div>
+        <div className={styles.headActions}>
+          <Link href={listHref} className={`outline-btn ${styles.ghostBtn}`}>
+            Back
+          </Link>
+          <button
+            type="submit"
+            className={`outline-btn ${styles.saveBtn}`}
+            disabled={saving}
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </header>
+
+      {error ? (
+        <div className={styles.errorBox} role="alert">
+          {error}
+        </div>
+      ) : null}
+
+      <div className={styles.layout}>
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Media</h2>
+          <div className={styles.mediaGrid}>
+            <FeaturedImageField
+              label="Thumbnail"
+              value={thumbnail}
+              disabled={saving}
+              onChange={setThumbnail}
+            />
+            <div className={styles.stack}>
+              <GalleryImagesField
+                items={gallery}
+                disabled={saving}
+                onChange={setGallery}
+              />
+            </div>
+          </div>
+        </section>
+
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Identity</h2>
+          <div className={styles.identityRow3}>
+            <CatalogCategorySelect
+              categories={categories}
+              value={categoryId}
+              disabled={saving}
+              onChange={setCategoryId}
+            />
+            <label className={styles.field}>
+              <span>Name EN</span>
+              <input
+                value={nameEn}
+                disabled={saving}
+                required
+                onChange={(event) => setNameEn(event.target.value)}
+              />
+            </label>
+            <label className={styles.field}>
+              <span>Name FA</span>
+              <input
+                className="fa"
+                lang="fa"
+                dir="rtl"
+                value={nameFa}
+                disabled={saving}
+                onChange={(event) => setNameFa(event.target.value)}
+              />
+            </label>
+          </div>
+        </section>
+
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>Content</h2>
+          <div className={styles.stack}>
+            <label className={styles.field}>
+              <span>
+                Summary <em className={styles.optional}>(optional)</em>
+              </span>
+              <textarea
+                rows={3}
+                value={summary}
+                disabled={saving}
+                onChange={(event) => setSummary(event.target.value)}
+              />
+            </label>
+            <div className={styles.richField}>
+              <RichTextArea
+                label="Description"
+                value={description}
+                onChange={setDescription}
+                disabled={saving}
+                minHeight={200}
+              />
+            </div>
+            <TagsField tags={tags} disabled={saving} onChange={setTags} />
+          </div>
+        </section>
+
+        <section className={styles.card}>
+          <h2 className={styles.sectionTitle}>SEO</h2>
+          <div className={styles.identityRow}>
+            <label className={styles.field}>
+              <span>
+                SEO title <em className={styles.optional}>(optional)</em>
+              </span>
+              <input
+                value={seoMetaTitle}
+                maxLength={70}
+                disabled={saving}
+                onChange={(event) => setSeoMetaTitle(event.target.value)}
+              />
+            </label>
+            <label className={styles.field}>
+              <span>
+                SEO description <em className={styles.optional}>(optional)</em>
+              </span>
+              <input
+                value={seoMetaDescription}
+                maxLength={160}
+                disabled={saving}
+                onChange={(event) => setSeoMetaDescription(event.target.value)}
+              />
+            </label>
+          </div>
+        </section>
+
+        <div className={styles.footerActions}>
+          <Link href={listHref} className={`outline-btn ${styles.ghostBtn}`}>
+            Cancel
+          </Link>
+          <button
+            type="submit"
+            className={`outline-btn ${styles.saveBtn}`}
+            disabled={saving}
+          >
+            {saving ? "Saving…" : "Save"}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/components/catalog/BlogPanel.tsx b/components/catalog/BlogPanel.tsx
new file mode 100644
index 0000000..9738564
--- /dev/null
+++ b/components/catalog/BlogPanel.tsx
@@ -0,0 +1,197 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import CatalogCardControls, {
+  type CatalogControlsMode,
+} from "@/components/catalog/CatalogCardControls";
+import CatalogEmptyState from "@/components/catalog/CatalogEmptyState";
+import CatalogPagination from "@/components/catalog/CatalogPagination";
+import {
+  BLOG_PAGE_SIZE,
+  blogImage,
+  excerpt,
+  formatDate,
+  toPlainText,
+} from "@/components/catalog/utils";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import styles from "@/components/BusinessDetailsPage.module.css";
+import { en } from "@/lib/i18n/en";
+import {
+  deleteMeshkeeBlog,
+  listMeshkeeBlogs,
+  type MeshkeeBlog,
+} from "@/services/meshkee-content";
+
+export default function BlogPanel({
+  meshkeeId,
+  emptyLabel = en.blog.empty,
+  addHref,
+  controlsMode = "edit-remove",
+  onManage,
+}: {
+  meshkeeId: string;
+  emptyLabel?: string;
+  addHref?: string;
+  controlsMode?: CatalogControlsMode;
+  onManage?: () => void;
+}) {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const [items, setItems] = useState<MeshkeeBlog[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [busy, setBusy] = useState(false);
+  const [removing, setRemoving] = useState<MeshkeeBlog | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setBusy(true);
+      setError("");
+      try {
+        const res = await listMeshkeeBlogs(meshkeeId, {
+          page: 1,
+          pageSize: BLOG_PAGE_SIZE,
+        });
+        if (cancelled) return;
+        setItems(res.items);
+        setTotal(res.total);
+        setPage(1);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load blog posts.",
+          );
+        }
+      } finally {
+        if (!cancelled) setBusy(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [meshkeeId]);
+
+  function scrollToSection() {
+    const node = sectionRef.current;
+    if (!node) return;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        node.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    });
+  }
+
+  async function loadPage(next: number) {
+    setBusy(true);
+    try {
+      const res = await listMeshkeeBlogs(meshkeeId, {
+        page: next,
+        pageSize: BLOG_PAGE_SIZE,
+      });
+      setItems(res.items);
+      setTotal(res.total);
+      setPage(res.page);
+      scrollToSection();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function confirmRemove() {
+    if (!removing) return;
+    setRemoveBusy(true);
+    try {
+      await deleteMeshkeeBlog(meshkeeId, removing.id);
+      setItems((prev) => prev.filter((item) => item.id !== removing.id));
+      setTotal((value) => Math.max(0, value - 1));
+      setRemoving(null);
+    } catch (err) {
+      window.alert(
+        err instanceof Error ? err.message : "Could not remove blog post.",
+      );
+    } finally {
+      setRemoveBusy(false);
+    }
+  }
+
+  if (error) {
+    return <p className={styles.panelHint}>{error}</p>;
+  }
+
+  return (
+    <div ref={sectionRef} className={styles.productsSection}>
+      {busy ? <p className={styles.panelHint}>Loading blog…</p> : null}
+      <div className={styles.blogGrid}>
+        {items.map((post) => {
+          const image = blogImage(post);
+          const text = post.abstract
+            ? excerpt(toPlainText(post.abstract), 160)
+            : "";
+          return (
+            <article key={post.id} className={styles.blogCard}>
+              <div className={styles.cardMedia}>
+                {image ? (
+                  <img src={image} alt="" />
+                ) : (
+                  <div className={styles.mediaFallback} aria-hidden />
+                )}
+              </div>
+              <div className={`tile-hover ${styles.cardFoot}`}>
+                <div className={styles.blogBody}>
+                  <h3 dir="auto">{post.title}</h3>
+                  {text ? <p dir="auto">{text}</p> : null}
+                  {post.createdAt ? (
+                    <span className={styles.meta}>{formatDate(post.createdAt)}</span>
+                  ) : null}
+                </div>
+                <CatalogCardControls
+                  mode={controlsMode}
+                  busy={removeBusy}
+                  onManage={onManage}
+                  onEdit={() =>
+                    window.alert(`Edit blog coming soon: ${post.title}`)
+                  }
+                  onRemove={() => setRemoving(post)}
+                />
+              </div>
+            </article>
+          );
+        })}
+      </div>
+      {!items.length && !busy ? (
+        <CatalogEmptyState
+          icon="/images/icons/calendar.svg"
+          title={emptyLabel}
+          lead={en.blog.emptyLead}
+          actionHref={addHref}
+          actionLabel={en.blog.add}
+        />
+      ) : null}
+      <CatalogPagination
+        page={page}
+        total={total}
+        pageSize={BLOG_PAGE_SIZE}
+        busy={busy}
+        onChange={(next) => void loadPage(next)}
+      />
+      <ConfirmDialog
+        open={controlsMode === "edit-remove" && Boolean(removing)}
+        kicker="Remove"
+        title={`Remove ${removing?.title ?? "post"}?`}
+        message="This deletes the blog post from Meshkee. This cannot be undone."
+        confirmLabel="Remove"
+        cancelLabel="Keep"
+        danger
+        busy={removeBusy}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+        onConfirm={() => {
+          void confirmRemove();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/components/catalog/CatalogCardControls.tsx b/components/catalog/CatalogCardControls.tsx
new file mode 100644
index 0000000..e3926e6
--- /dev/null
+++ b/components/catalog/CatalogCardControls.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import styles from "@/components/BusinessDetailsPage.module.css";
+
+export type CatalogControlsMode = "edit-remove" | "manage";
+
+export default function CatalogCardControls({
+  mode = "edit-remove",
+  onEdit,
+  onRemove,
+  onManage,
+  busy,
+}: {
+  mode?: CatalogControlsMode;
+  onEdit?: () => void;
+  onRemove?: () => void;
+  onManage?: () => void;
+  busy?: boolean;
+}) {
+  if (mode === "manage") {
+    return (
+      <div className={styles.cardControls}>
+        <button
+          type="button"
+          className={styles.cardControl}
+          disabled={busy}
+          onClick={(event) => {
+            event.stopPropagation();
+            onManage?.();
+          }}
+        >
+          Manage business
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.cardControls}>
+      <button
+        type="button"
+        className={styles.cardControl}
+        disabled={busy}
+        onClick={(event) => {
+          event.stopPropagation();
+          onEdit?.();
+        }}
+      >
+        Edit
+      </button>
+      <button
+        type="button"
+        className={`${styles.cardControl} ${styles.cardControlDanger}`}
+        disabled={busy}
+        onClick={(event) => {
+          event.stopPropagation();
+          onRemove?.();
+        }}
+      >
+        Remove
+      </button>
+    </div>
+  );
+}
diff --git a/components/catalog/CatalogCategorySelect.module.css b/components/catalog/CatalogCategorySelect.module.css
new file mode 100644
index 0000000..2693bcb
--- /dev/null
+++ b/components/catalog/CatalogCategorySelect.module.css
@@ -0,0 +1,221 @@
+.root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.label {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.optional {
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: none;
+  color: var(--color-body);
+}
+
+.control {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.control input {
+  width: 100%;
+  min-height: 42px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fff;
+  padding: 10px 36px 10px 12px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-black);
+  outline: none;
+}
+
+.control input:focus {
+  border-color: var(--color-black);
+}
+
+.caret {
+  position: absolute;
+  inset-inline-end: 10px;
+  width: 18px;
+  height: 18px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.caret::before {
+  content: "";
+  display: block;
+  width: 7px;
+  height: 7px;
+  margin: 4px auto 0;
+  border-inline-end: 1.5px solid var(--color-soft);
+  border-bottom: 1.5px solid var(--color-soft);
+  transform: rotate(45deg);
+  transition: transform 0.15s ease;
+}
+
+.caretOpen::before {
+  margin-top: 8px;
+  transform: rotate(225deg);
+}
+
+.dropdown {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 4px);
+  inset-inline: 0;
+  max-height: 300px;
+  overflow: auto;
+  border: 1px solid #ececec;
+  border-radius: 5px;
+  background: #fff;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
+}
+
+.list,
+.branch {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.list {
+  padding: 6px 0;
+}
+
+.branch {
+  margin-left: 16px;
+  padding-left: 12px;
+  border-left: 1px solid #e4e4e4;
+}
+
+.node {
+  margin: 0;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 36px;
+  margin: 2px 6px;
+  border-radius: 4px;
+}
+
+.rowActive {
+  background: #f5f5f5;
+}
+
+.expand,
+.expandSpacer {
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+}
+
+.expand {
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid #e4e4e4;
+  border-radius: 3px;
+  background: #fff;
+  color: var(--color-soft);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.expand:hover,
+.expand:focus-visible {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.expandOpen {
+  color: var(--color-muted);
+}
+
+.leafMark {
+  position: relative;
+}
+
+.leafMark::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 10px;
+  height: 1px;
+  background: #e4e4e4;
+}
+
+.option {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  padding: 6px 8px 6px 2px;
+  text-align: start;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+  cursor: pointer;
+}
+
+.option:hover,
+.option:focus-visible {
+  color: var(--color-black);
+}
+
+.optionLabel {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.clearOption {
+  display: block;
+  width: calc(100% - 12px);
+  margin: 6px 6px 0;
+  padding: 8px 10px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  text-align: start;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-soft);
+  cursor: pointer;
+}
+
+.clearOption:hover,
+.clearOption:focus-visible {
+  background: #f7f7f7;
+  color: var(--color-black);
+}
+
+.empty {
+  margin: 0;
+  padding: 16px 14px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-body);
+}
diff --git a/components/catalog/CatalogCategorySelect.tsx b/components/catalog/CatalogCategorySelect.tsx
new file mode 100644
index 0000000..467b17c
--- /dev/null
+++ b/components/catalog/CatalogCategorySelect.tsx
@@ -0,0 +1,248 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  categoryOptionLabel,
+  type MeshkeeEntityCategory,
+} from "@/services/meshkee-catalog";
+import styles from "./CatalogCategorySelect.module.css";
+
+type TreeNode = MeshkeeEntityCategory & { children: TreeNode[] };
+
+function buildTree(categories: MeshkeeEntityCategory[]): TreeNode[] {
+  const byId = new Map<string, TreeNode>();
+  for (const category of categories) {
+    byId.set(category.id, { ...category, children: [] });
+  }
+
+  const roots: TreeNode[] = [];
+  for (const node of byId.values()) {
+    if (node.parentId && byId.has(node.parentId)) {
+      byId.get(node.parentId)!.children.push(node);
+    } else {
+      roots.push(node);
+    }
+  }
+
+  const sortNodes = (nodes: TreeNode[]) => {
+    nodes.sort((a, b) =>
+      categoryOptionLabel(a).localeCompare(categoryOptionLabel(b), undefined, {
+        sensitivity: "base",
+      }),
+    );
+    for (const node of nodes) sortNodes(node.children);
+  };
+  sortNodes(roots);
+  return roots;
+}
+
+function matchesQuery(category: MeshkeeEntityCategory, q: string) {
+  if (!q) return true;
+  const hay = [category.name, category.nameFa ?? "", category.description ?? ""]
+    .join(" ")
+    .toLowerCase();
+  return hay.includes(q);
+}
+
+function filterTree(nodes: TreeNode[], q: string): TreeNode[] {
+  if (!q) return nodes;
+  const result: TreeNode[] = [];
+  for (const node of nodes) {
+    const children = filterTree(node.children, q);
+    if (matchesQuery(node, q) || children.length) {
+      result.push({ ...node, children });
+    }
+  }
+  return result;
+}
+
+function collectExpandIds(nodes: TreeNode[], into: Set<string>) {
+  for (const node of nodes) {
+    if (node.children.length) {
+      into.add(node.id);
+      collectExpandIds(node.children, into);
+    }
+  }
+}
+
+export default function CatalogCategorySelect({
+  categories,
+  value,
+  onChange,
+  disabled = false,
+  label = "Category",
+  optional = false,
+  placeholder = "Select category",
+}: {
+  categories: MeshkeeEntityCategory[];
+  value: string;
+  onChange: (id: string) => void;
+  disabled?: boolean;
+  label?: string;
+  optional?: boolean;
+  placeholder?: string;
+}) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set());
+
+  const tree = useMemo(() => buildTree(categories), [categories]);
+  const q = query.trim().toLowerCase();
+  const visibleTree = useMemo(() => filterTree(tree, q), [tree, q]);
+
+  const selected = useMemo(
+    () => categories.find((item) => item.id === value) ?? null,
+    [categories, value],
+  );
+
+  useEffect(() => {
+    if (!q) return;
+    const next = new Set<string>();
+    collectExpandIds(visibleTree, next);
+    setExpanded(next);
+  }, [q, visibleTree]);
+
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(event: MouseEvent) {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    function onKey(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  function select(id: string) {
+    onChange(id);
+    setOpen(false);
+    setQuery("");
+  }
+
+  function toggleExpand(id: string) {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }
+
+  function renderNodes(nodes: TreeNode[], depth: number) {
+    return nodes.map((node) => {
+      const hasChildren = node.children.length > 0;
+      const isExpanded = q ? true : expanded.has(node.id);
+      const active = value === node.id;
+
+      return (
+        <li key={node.id} className={styles.node}>
+          <div
+            className={`${styles.row}${active ? ` ${styles.rowActive}` : ""}`}
+            style={{ paddingInlineStart: `${10 + depth * 18}px` }}
+          >
+            {hasChildren ? (
+              <button
+                type="button"
+                className={`${styles.expand} ${isExpanded ? styles.expandOpen : ""}`}
+                aria-label={isExpanded ? "Collapse" : "Expand"}
+                tabIndex={-1}
+                onClick={() => toggleExpand(node.id)}
+              >
+                <span aria-hidden>{isExpanded ? "−" : "+"}</span>
+              </button>
+            ) : (
+              <span
+                className={`${styles.expandSpacer}${depth > 0 ? ` ${styles.leafMark}` : ""}`}
+                aria-hidden
+              />
+            )}
+            <button
+              type="button"
+              className={styles.option}
+              disabled={disabled}
+              onClick={() => select(node.id)}
+            >
+              <span className={styles.optionLabel} dir="auto">
+                {categoryOptionLabel(node)}
+              </span>
+            </button>
+          </div>
+          {hasChildren && isExpanded ? (
+            <ul className={styles.branch}>{renderNodes(node.children, depth + 1)}</ul>
+          ) : null}
+        </li>
+      );
+    });
+  }
+
+  return (
+    <div className={styles.root} ref={rootRef}>
+      <span className={styles.label}>
+        {label}
+        {optional ? (
+          <em className={styles.optional}> (optional)</em>
+        ) : null}
+      </span>
+      <div className={styles.control}>
+        <input
+          value={open ? query : selected ? categoryOptionLabel(selected) : ""}
+          disabled={disabled}
+          placeholder={placeholder}
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          onFocus={() => {
+            setOpen(true);
+            setQuery("");
+          }}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setOpen(true);
+          }}
+          onClick={() => setOpen(true)}
+        />
+        <button
+          type="button"
+          className={`${styles.caret} ${open ? styles.caretOpen : ""}`}
+          aria-label={open ? "Close categories" : "Open categories"}
+          disabled={disabled}
+          onClick={() => {
+            setOpen((prev) => !prev);
+            setQuery("");
+          }}
+        />
+      </div>
+
+      {open ? (
+        <div className={styles.dropdown} role="listbox">
+          {optional ? (
+            <button
+              type="button"
+              className={`${styles.clearOption}${!value ? ` ${styles.rowActive}` : ""}`}
+              disabled={disabled}
+              onClick={() => select("")}
+            >
+              No category
+            </button>
+          ) : null}
+          {visibleTree.length ? (
+            <ul className={styles.list}>{renderNodes(visibleTree, 0)}</ul>
+          ) : (
+            <p className={styles.empty}>No categories found</p>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/catalog/CatalogEmptyState.module.css b/components/catalog/CatalogEmptyState.module.css
new file mode 100644
index 0000000..a798c45
--- /dev/null
+++ b/components/catalog/CatalogEmptyState.module.css
@@ -0,0 +1,65 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  width: 100%;
+  min-height: 280px;
+  margin: 8px 0 20px;
+  padding: 48px 28px;
+  border: 1px solid #ececec;
+  border-radius: 6px;
+  background-color: #f7f7f7;
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+  text-align: center;
+}
+
+.iconWrap {
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 5px;
+  background: #fff;
+  border: 1px solid #e4e4e4;
+}
+
+.iconWrap img {
+  width: 22px;
+  height: 22px;
+  opacity: 0.55;
+}
+
+.copy {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 340px;
+}
+
+.title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-black);
+}
+
+.lead {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.55;
+  color: var(--color-muted);
+}
+
+.cta {
+  margin-top: 6px;
+  min-height: 38px;
+  padding: 0 18px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
diff --git a/components/catalog/CatalogEmptyState.tsx b/components/catalog/CatalogEmptyState.tsx
new file mode 100644
index 0000000..fb5ff91
--- /dev/null
+++ b/components/catalog/CatalogEmptyState.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import Link from "next/link";
+import styles from "./CatalogEmptyState.module.css";
+
+export default function CatalogEmptyState({
+  icon,
+  title,
+  lead,
+  actionHref,
+  actionLabel,
+  onAction,
+}: {
+  icon: string;
+  title: string;
+  lead: string;
+  actionHref?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+}) {
+  const showAction = Boolean(actionLabel && (actionHref || onAction));
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.iconWrap} aria-hidden>
+        <img src={icon} alt="" width={22} height={22} />
+      </div>
+      <div className={styles.copy}>
+        <h2 className={styles.title}>{title}</h2>
+        <p className={styles.lead}>{lead}</p>
+      </div>
+      {showAction && actionHref ? (
+        <Link href={actionHref} className={`outline-btn ${styles.cta}`}>
+          {actionLabel}
+        </Link>
+      ) : null}
+      {showAction && !actionHref && onAction ? (
+        <button
+          type="button"
+          className={`outline-btn ${styles.cta}`}
+          onClick={onAction}
+        >
+          {actionLabel}
+        </button>
+      ) : null}
+    </div>
+  );
+}
diff --git a/components/catalog/CatalogForm.module.css b/components/catalog/CatalogForm.module.css
new file mode 100644
index 0000000..bd76f4a
--- /dev/null
+++ b/components/catalog/CatalogForm.module.css
@@ -0,0 +1,458 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+}
+
+.head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 28px 32px;
+  border-radius: 5px;
+  background-color: var(--color-card);
+  background-image: var(--page-title-pattern);
+  background-size: var(--page-title-pattern-size);
+}
+
+.breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.breadcrumb a {
+  color: inherit;
+  transition: color 0.2s ease;
+}
+
+.breadcrumb a:hover,
+.breadcrumb a:focus-visible {
+  color: var(--color-black);
+}
+
+.breadcrumbSep {
+  opacity: 0.45;
+}
+
+.breadcrumbCurrent {
+  color: var(--color-muted);
+}
+
+.title {
+  font-size: clamp(20px, 2.2vw, 28px);
+  font-weight: 400;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+.lead {
+  margin-top: 10px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.headActions,
+.footerActions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.footerActionsEnd {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.ghostBtn,
+.saveBtn {
+  min-height: 38px;
+  padding: 0 18px;
+  font-size: 11px;
+  letter-spacing: 0.16em;
+}
+
+.ghostBtn {
+  border-color: #d4d4d4;
+  color: var(--color-soft);
+}
+
+.ghostBtn::before {
+  content: none;
+}
+
+.ghostBtn:hover,
+.ghostBtn:focus-visible {
+  color: var(--color-black);
+  border-color: var(--color-black);
+  background: transparent;
+}
+
+.saveBtn {
+  background: var(--color-black);
+  border-color: var(--color-black);
+  color: var(--color-white);
+}
+
+.saveBtn:hover,
+.saveBtn:focus-visible {
+  color: var(--color-black);
+}
+
+.saveBtn::before {
+  background: #fff;
+}
+
+.saveBtn:disabled {
+  opacity: 0.55;
+  cursor: wait;
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.card {
+  background: var(--color-white);
+  border-radius: 5px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sectionTitle {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.mediaGrid {
+  display: grid;
+  grid-template-columns: 180px minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.thumbBlock {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.blockHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.inlineActions {
+  display: flex;
+  gap: 10px;
+}
+
+.linkBtn {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  cursor: pointer;
+}
+
+.linkBtn:hover,
+.linkBtn:focus-visible {
+  color: var(--color-black);
+}
+
+.linkBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.thumbFrame {
+  width: 100%;
+  aspect-ratio: 1;
+  border: 1px dashed #d8d8d8;
+  border-radius: 5px;
+  background: #fafafa;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+  color: var(--color-body);
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.thumbFrameWide {
+  aspect-ratio: 3 / 2;
+}
+
+.thumbFrame img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.fileInput {
+  display: none;
+}
+
+.identityRow {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.identityRow3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  align-items: start;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.fieldFull {
+  grid-column: 1 / -1;
+}
+
+.field span,
+.field > label {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+}
+
+.optional {
+  letter-spacing: 0.08em;
+  text-transform: none;
+  color: var(--color-muted);
+}
+
+.field > input,
+.field > textarea,
+.field > select {
+  width: 100%;
+  min-height: 42px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fff;
+  padding: 10px 12px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-black);
+  outline: none;
+  transition: border-color 0.35s ease;
+}
+
+.field > textarea {
+  min-height: 88px;
+  resize: vertical;
+}
+
+.field > input:hover,
+.field > textarea:hover,
+.field > select:hover {
+  border-color: #d8d8d8;
+}
+
+.field > input:focus,
+.field > textarea:focus,
+.field > select:focus {
+  border-color: var(--color-black);
+}
+
+.richField {
+  margin-top: 4px;
+}
+
+.galleryGrid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.galleryItem {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 5px;
+  overflow: hidden;
+  background: #f3f3f3;
+  border: 1px solid #f0f0f0;
+}
+
+.galleryItem img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.galleryItem button {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  border: 0;
+  border-radius: 3px;
+  padding: 4px 8px;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #fff;
+  background: rgba(0, 0, 0, 0.75);
+  cursor: pointer;
+}
+
+.galleryAdd {
+  align-self: flex-start;
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid #e4e4e4;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  cursor: pointer;
+}
+
+.galleryAdd:hover {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  padding: 5px 8px;
+  font-size: 12px;
+  color: var(--color-muted);
+  background: #fff;
+}
+
+.tag button {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.tagRow {
+  display: flex;
+  gap: 8px;
+}
+
+.tagRow input {
+  flex: 1;
+  min-height: 42px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  padding: 10px 12px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 400;
+  outline: none;
+}
+
+.tagRow input:focus {
+  border-color: var(--color-black);
+}
+
+.tagAdd {
+  min-height: 42px;
+  padding: 0 14px;
+  border: 1px solid #e4e4e4;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-muted);
+  cursor: pointer;
+}
+
+.tagAdd:hover {
+  border-color: var(--color-black);
+  color: var(--color-black);
+}
+
+.errorBox {
+  padding: 14px 16px;
+  border-radius: 5px;
+  background: #fff5f5;
+  color: #b42318;
+  font-size: 13px;
+  font-weight: 400;
+}
+
+@media (max-width: 860px) {
+  .head {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .mediaGrid,
+  .identityRow,
+  .identityRow3,
+  .galleryGrid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/components/catalog/CatalogFormFields.tsx b/components/catalog/CatalogFormFields.tsx
new file mode 100644
index 0000000..aca92ab
--- /dev/null
+++ b/components/catalog/CatalogFormFields.tsx
@@ -0,0 +1,268 @@
+"use client";
+
+import { useRef, useState } from "react";
+import ImageCropDialog from "@/components/ImageCropDialog";
+import styles from "./CatalogForm.module.css";
+
+export type LocalImage = {
+  key: string;
+  file?: File;
+  previewUrl: string;
+  mediaId?: string;
+};
+
+export function FeaturedImageField({
+  label = "Thumbnail",
+  value,
+  aspect = 1,
+  disabled,
+  onChange,
+}: {
+  label?: string;
+  value: LocalImage | null;
+  aspect?: number;
+  disabled?: boolean;
+  onChange: (value: LocalImage | null) => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [cropSource, setCropSource] = useState<string | null>(null);
+  const [cropName, setCropName] = useState("image.jpg");
+  const wide = aspect !== 1;
+
+  return (
+    <div className={styles.thumbBlock}>
+      <div className={styles.blockHead}>
+        <span>{label}</span>
+        <div className={styles.inlineActions}>
+          <button
+            type="button"
+            className={styles.linkBtn}
+            disabled={disabled}
+            onClick={() => inputRef.current?.click()}
+          >
+            {value ? "Replace" : "Upload"}
+          </button>
+          {value ? (
+            <button
+              type="button"
+              className={styles.linkBtn}
+              disabled={disabled}
+              onClick={() => {
+                if (value.previewUrl.startsWith("blob:")) {
+                  URL.revokeObjectURL(value.previewUrl);
+                }
+                onChange(null);
+              }}
+            >
+              Remove
+            </button>
+          ) : null}
+        </div>
+      </div>
+      <button
+        type="button"
+        className={`${styles.thumbFrame}${wide ? ` ${styles.thumbFrameWide}` : ""}`}
+        disabled={disabled}
+        onClick={() => inputRef.current?.click()}
+      >
+        {value?.previewUrl ? (
+          <img src={value.previewUrl} alt="" />
+        ) : (
+          <span>Add {label.toLowerCase()}</span>
+        )}
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className={styles.fileInput}
+        disabled={disabled}
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          event.target.value = "";
+          if (!file) return;
+          const url = URL.createObjectURL(file);
+          setCropName(file.name || "image.jpg");
+          setCropSource(url);
+        }}
+      />
+      <ImageCropDialog
+        open={Boolean(cropSource)}
+        imageSrc={cropSource}
+        title={`Crop ${label.toLowerCase()}`}
+        aspect={aspect}
+        outputType="image/jpeg"
+        fileName={cropName.replace(/\.[^.]+$/, "") || "image"}
+        onCancel={() => {
+          if (cropSource?.startsWith("blob:")) URL.revokeObjectURL(cropSource);
+          setCropSource(null);
+        }}
+        onComplete={(file, previewUrl) => {
+          if (cropSource?.startsWith("blob:")) URL.revokeObjectURL(cropSource);
+          if (value?.previewUrl.startsWith("blob:")) {
+            URL.revokeObjectURL(value.previewUrl);
+          }
+          setCropSource(null);
+          onChange({
+            key: `${Date.now()}`,
+            file,
+            previewUrl,
+          });
+        }}
+      />
+    </div>
+  );
+}
+
+export function GalleryImagesField({
+  items,
+  disabled,
+  onChange,
+}: {
+  items: LocalImage[];
+  disabled?: boolean;
+  onChange: (items: LocalImage[]) => void;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className={styles.stack}>
+      <div className={styles.blockHead}>
+        <span>
+          Gallery images <em className={styles.optional}>(optional)</em>
+        </span>
+        <button
+          type="button"
+          className={styles.linkBtn}
+          disabled={disabled}
+          onClick={() => inputRef.current?.click()}
+        >
+          Add images
+        </button>
+      </div>
+      {items.length ? (
+        <div className={styles.galleryGrid}>
+          {items.map((item) => (
+            <div key={item.key} className={styles.galleryItem}>
+              <img src={item.previewUrl} alt="" />
+              <button
+                type="button"
+                disabled={disabled}
+                onClick={() => {
+                  if (item.previewUrl.startsWith("blob:")) {
+                    URL.revokeObjectURL(item.previewUrl);
+                  }
+                  onChange(items.filter((row) => row.key !== item.key));
+                }}
+              >
+                Remove
+              </button>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <button
+          type="button"
+          className={styles.galleryAdd}
+          disabled={disabled}
+          onClick={() => inputRef.current?.click()}
+        >
+          Add images
+        </button>
+      )}
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        multiple
+        className={styles.fileInput}
+        disabled={disabled}
+        onChange={(event) => {
+          const files = Array.from(event.target.files ?? []).filter((file) =>
+            file.type.startsWith("image/"),
+          );
+          event.target.value = "";
+          if (!files.length) return;
+          onChange([
+            ...items,
+            ...files.map((file) => ({
+              key: `${file.name}-${file.size}-${Date.now()}-${Math.random()}`,
+              file,
+              previewUrl: URL.createObjectURL(file),
+            })),
+          ]);
+        }}
+      />
+    </div>
+  );
+}
+
+export function TagsField({
+  tags,
+  disabled,
+  onChange,
+}: {
+  tags: string[];
+  disabled?: boolean;
+  onChange: (tags: string[]) => void;
+}) {
+  const [draft, setDraft] = useState("");
+
+  function addTag() {
+    const next = draft.trim();
+    if (!next) return;
+    if (tags.some((tag) => tag.toLowerCase() === next.toLowerCase())) {
+      setDraft("");
+      return;
+    }
+    onChange([...tags, next]);
+    setDraft("");
+  }
+
+  return (
+    <div className={styles.field}>
+      <span>
+        Tags <em className={styles.optional}>(optional)</em>
+      </span>
+      {tags.length ? (
+        <div className={styles.tags}>
+          {tags.map((tag) => (
+            <span key={tag} className={styles.tag}>
+              {tag}
+              <button
+                type="button"
+                disabled={disabled}
+                aria-label={`Remove ${tag}`}
+                onClick={() => onChange(tags.filter((item) => item !== tag))}
+              >
+                ×
+              </button>
+            </span>
+          ))}
+        </div>
+      ) : null}
+      <div className={styles.tagRow}>
+        <input
+          value={draft}
+          disabled={disabled}
+          placeholder="Add a tag"
+          onChange={(event) => setDraft(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              addTag();
+            }
+          }}
+        />
+        <button
+          type="button"
+          className={styles.tagAdd}
+          disabled={disabled}
+          onClick={addTag}
+        >
+          Add
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/catalog/CatalogPagination.tsx b/components/catalog/CatalogPagination.tsx
new file mode 100644
index 0000000..82f4577
--- /dev/null
+++ b/components/catalog/CatalogPagination.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { buildPageItems } from "@/components/catalog/utils";
+import styles from "@/components/BusinessDetailsPage.module.css";
+
+export default function CatalogPagination({
+  page,
+  total,
+  pageSize,
+  onChange,
+  busy,
+}: {
+  page: number;
+  total: number;
+  pageSize: number;
+  onChange: (page: number) => void;
+  busy?: boolean;
+}) {
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+  if (total <= pageSize) return null;
+  const items = buildPageItems(page, pageCount);
+
+  return (
+    <div className={styles.pagination}>
+      <button
+        type="button"
+        className={styles.pageBtn}
+        disabled={busy || page <= 1}
+        onClick={() => onChange(page - 1)}
+        aria-label="Previous page"
+      >
+        Prev
+      </button>
+      <div className={styles.pageNumbers}>
+        {items.map((item, index) =>
+          item === "…" ? (
+            <span key={`ellipsis-${index}`} className={styles.pageEllipsis}>
+              …
+            </span>
+          ) : (
+            <button
+              key={item}
+              type="button"
+              className={item === page ? styles.pageNumActive : styles.pageNum}
+              disabled={busy || item === page}
+              onClick={() => onChange(item)}
+              aria-current={item === page ? "page" : undefined}
+            >
+              {item}
+            </button>
+          ),
+        )}
+      </div>
+      <button
+        type="button"
+        className={styles.pageBtn}
+        disabled={busy || page >= pageCount}
+        onClick={() => onChange(page + 1)}
+        aria-label="Next page"
+      >
+        Next
+      </button>
+    </div>
+  );
+}
diff --git a/components/catalog/GalleryPanel.module.css b/components/catalog/GalleryPanel.module.css
new file mode 100644
index 0000000..6721e88
--- /dev/null
+++ b/components/catalog/GalleryPanel.module.css
@@ -0,0 +1,162 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+
+.dropzone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 148px;
+  padding: 28px 20px;
+  border: 1px dashed #d4d4d4;
+  border-radius: 6px;
+  background:
+    radial-gradient(circle at 1px 1px, #ececec 1px, transparent 0) 0 0 / 18px 18px,
+    #fafafa;
+  color: var(--color-muted);
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.dropzone:hover,
+.dropzoneActive {
+  border-color: var(--color-black);
+  background-color: #f5f5f5;
+  color: var(--color-black);
+}
+
+.dropzoneBusy {
+  pointer-events: none;
+  opacity: 0.72;
+}
+
+.dropIcon {
+  width: 36px;
+  height: 36px;
+  opacity: 0.55;
+}
+
+.dropTitle {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.dropHint {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+  color: var(--color-soft);
+}
+
+.fileInput {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.error,
+.hint {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
+
+.error {
+  color: #b42318;
+}
+
+.masonry {
+  columns: 3;
+  column-gap: 14px;
+}
+
+.item {
+  position: relative;
+  break-inside: avoid;
+  margin: 0 0 14px;
+  border-radius: 5px;
+  overflow: hidden;
+  background: #f3f3f3;
+}
+
+.item img {
+  display: block;
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+}
+
+.fallback {
+  min-height: 140px;
+  background: linear-gradient(135deg, #efefef, #e2e2e2);
+}
+
+.itemFoot {
+  position: absolute;
+  inset: auto 0 0 0;
+  display: flex;
+  justify-content: flex-end;
+  padding: 10px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.item:hover .itemFoot,
+.item:focus-within .itemFoot {
+  opacity: 1;
+}
+
+.removeBtn {
+  border: 0;
+  border-radius: 4px;
+  padding: 6px 10px;
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #fff;
+  background: #111;
+  cursor: pointer;
+}
+
+.removeBtn:hover {
+  background: #b42318;
+}
+
+.removeBtn:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+
+@media (max-width: 960px) {
+  .masonry {
+    columns: 2;
+  }
+}
+
+@media (max-width: 640px) {
+  .masonry {
+    columns: 1;
+  }
+
+  .dropzone {
+    min-height: 120px;
+    padding: 22px 16px;
+  }
+}
diff --git a/components/catalog/GalleryPanel.tsx b/components/catalog/GalleryPanel.tsx
new file mode 100644
index 0000000..3c19ced
--- /dev/null
+++ b/components/catalog/GalleryPanel.tsx
@@ -0,0 +1,289 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import CatalogEmptyState from "@/components/catalog/CatalogEmptyState";
+import { GALLERY_PAGE_SIZE, galleryImage } from "@/components/catalog/utils";
+import { en } from "@/lib/i18n/en";
+import {
+  addMeshkeeGalleryItems,
+  deleteMeshkeeGalleryItem,
+  listMeshkeeGallery,
+  type MeshkeeMediaItem,
+} from "@/services/meshkee-content";
+import styles from "./GalleryPanel.module.css";
+
+const ACCEPT = "image/jpeg,image/png,image/webp,image/gif";
+
+function isImageFile(file: File) {
+  return file.type.startsWith("image/");
+}
+
+export default function GalleryPanel({
+  meshkeeId,
+  emptyLabel = en.gallery.empty,
+}: {
+  meshkeeId: string;
+  emptyLabel?: string;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [items, setItems] = useState<MeshkeeMediaItem[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [busy, setBusy] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const [removing, setRemoving] = useState<MeshkeeMediaItem | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  async function reload(nextPage = 1) {
+    setBusy(true);
+    setError("");
+    try {
+      const res = await listMeshkeeGallery(meshkeeId, {
+        page: nextPage,
+        pageSize: GALLERY_PAGE_SIZE,
+      });
+      setItems(res.items);
+      setTotal(res.total);
+      setPage(res.page);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not load gallery.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function loadMore() {
+    if (busy || uploading) return;
+    setBusy(true);
+    setError("");
+    try {
+      const nextPage = page + 1;
+      const res = await listMeshkeeGallery(meshkeeId, {
+        page: nextPage,
+        pageSize: GALLERY_PAGE_SIZE,
+      });
+      setItems((prev) => {
+        const seen = new Set(prev.map((item) => item.id));
+        return [
+          ...prev,
+          ...res.items.filter((item) => !seen.has(item.id)),
+        ];
+      });
+      setTotal(res.total);
+      setPage(res.page);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not load gallery.");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setBusy(true);
+      setError("");
+      try {
+        const res = await listMeshkeeGallery(meshkeeId, {
+          page: 1,
+          pageSize: GALLERY_PAGE_SIZE,
+        });
+        if (cancelled) return;
+        setItems(res.items);
+        setTotal(res.total);
+        setPage(1);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load gallery.",
+          );
+        }
+      } finally {
+        if (!cancelled) setBusy(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [meshkeeId]);
+
+  async function uploadFiles(fileList: FileList | File[]) {
+    const files = Array.from(fileList).filter(isImageFile);
+    if (!files.length) {
+      setError("Choose image files (JPG, PNG, WebP, or GIF).");
+      return;
+    }
+
+    setUploading(true);
+    setError("");
+    try {
+      const res = await addMeshkeeGalleryItems(meshkeeId, { files });
+      const uploaded = res.items ?? [];
+      if (uploaded.length) {
+        setItems((prev) => {
+          const seen = new Set(uploaded.map((item) => item.id));
+          return [...uploaded, ...prev.filter((item) => !seen.has(item.id))];
+        });
+        setTotal((value) => value + uploaded.length);
+      } else {
+        await reload(1);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not upload images.");
+    } finally {
+      setUploading(false);
+      if (inputRef.current) inputRef.current.value = "";
+    }
+  }
+
+  async function confirmRemove() {
+    if (!removing) return;
+    setRemoveBusy(true);
+    try {
+      await deleteMeshkeeGalleryItem(meshkeeId, removing.id);
+      setItems((prev) => prev.filter((item) => item.id !== removing.id));
+      setTotal((value) => Math.max(0, value - 1));
+      setRemoving(null);
+    } catch (err) {
+      window.alert(
+        err instanceof Error ? err.message : "Could not remove gallery item.",
+      );
+    } finally {
+      setRemoveBusy(false);
+    }
+  }
+
+  const hasMore = page * GALLERY_PAGE_SIZE < total;
+
+  return (
+    <div className={styles.root}>
+      <label
+        className={[
+          styles.dropzone,
+          dragOver ? styles.dropzoneActive : "",
+          uploading ? styles.dropzoneBusy : "",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        onDragEnter={(event) => {
+          event.preventDefault();
+          setDragOver(true);
+        }}
+        onDragOver={(event) => {
+          event.preventDefault();
+          setDragOver(true);
+        }}
+        onDragLeave={(event) => {
+          event.preventDefault();
+          if (event.currentTarget.contains(event.relatedTarget as Node)) {
+            return;
+          }
+          setDragOver(false);
+        }}
+        onDrop={(event) => {
+          event.preventDefault();
+          setDragOver(false);
+          if (uploading) return;
+          void uploadFiles(event.dataTransfer.files);
+        }}
+      >
+        <img
+          className={styles.dropIcon}
+          src="/images/icons/gallery.svg"
+          alt=""
+          width={36}
+          height={36}
+        />
+        <p className={styles.dropTitle}>
+          {uploading ? en.gallery.uploading : en.gallery.dropTitle}
+        </p>
+        <p className={styles.dropHint}>{en.gallery.dropHint}</p>
+        <input
+          ref={inputRef}
+          className={styles.fileInput}
+          type="file"
+          accept={ACCEPT}
+          multiple
+          disabled={uploading}
+          onChange={(event) => {
+            const files = event.target.files;
+            if (files?.length) void uploadFiles(files);
+          }}
+        />
+      </label>
+
+      {error ? <p className={styles.error}>{error}</p> : null}
+      {busy && !items.length ? (
+        <p className={styles.hint}>Loading gallery…</p>
+      ) : null}
+
+      {items.length ? (
+        <div className={styles.masonry}>
+          {items.map((item) => {
+            const image = galleryImage(item);
+            const label = item.altText || item.fileName || "image";
+            return (
+              <figure key={item.id} className={styles.item}>
+                {image ? (
+                  <img src={image} alt={item.altText ?? ""} loading="lazy" />
+                ) : (
+                  <div className={styles.fallback} aria-hidden />
+                )}
+                <div className={styles.itemFoot}>
+                  <button
+                    type="button"
+                    className={styles.removeBtn}
+                    disabled={removeBusy}
+                    onClick={() => setRemoving(item)}
+                  >
+                    Remove
+                  </button>
+                </div>
+                <span className="sr-only">{label}</span>
+              </figure>
+            );
+          })}
+        </div>
+      ) : null}
+
+      {!items.length && !busy ? (
+        <CatalogEmptyState
+          icon="/images/icons/gallery.svg"
+          title={emptyLabel}
+          lead={en.gallery.emptyLead}
+        />
+      ) : null}
+
+      {hasMore ? (
+        <button
+          type="button"
+          className="outline-btn"
+          disabled={busy}
+          onClick={() => void loadMore()}
+        >
+          {busy ? "Loading…" : "Load more"}
+        </button>
+      ) : null}
+
+      <ConfirmDialog
+        open={Boolean(removing)}
+        kicker="Remove"
+        title={`Remove ${removing?.altText || removing?.fileName || "image"}?`}
+        message="This removes the image from the business gallery. This cannot be undone."
+        confirmLabel="Remove"
+        cancelLabel="Keep"
+        danger
+        busy={removeBusy}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+        onConfirm={() => {
+          void confirmRemove();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/components/catalog/ManageCategoriesPage.module.css b/components/catalog/ManageCategoriesPage.module.css
new file mode 100644
index 0000000..24237a7
--- /dev/null
+++ b/components/catalog/ManageCategoriesPage.module.css
@@ -0,0 +1,174 @@
+.page {
+  gap: 0;
+}
+
+.listCard {
+  margin-top: 8px;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.dialog {
+  width: min(520px, 100%);
+  max-height: min(90vh, 720px);
+  overflow: auto;
+  border-radius: 6px;
+  background: #fff;
+  padding: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.dialogHead {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.dialogTitle {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.closeBtn {
+  border: 0;
+  background: transparent;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--color-soft);
+  cursor: pointer;
+}
+
+.closeBtn:hover {
+  color: var(--color-black);
+}
+
+.tree {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.branch {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.children {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-left: 18px;
+  padding-left: 20px;
+  border-left: 1px solid #e4e4e4;
+}
+
+.row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  background: #fff;
+}
+
+.rowChild::before {
+  content: "";
+  position: absolute;
+  left: -20px;
+  top: 50%;
+  width: 16px;
+  height: 1px;
+  background: #e4e4e4;
+}
+
+.rowCopy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.rowName {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--color-black);
+}
+
+.rowMeta {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--color-soft);
+}
+
+.rowActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+  flex: 0 0 auto;
+}
+
+.rowActions button {
+  border: 0;
+  background: transparent;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--color-soft);
+  cursor: pointer;
+}
+
+.rowActions button:first-child {
+  padding-left: 0;
+}
+
+.rowActions button + button {
+  border-left: 1px solid #e8e8e8;
+}
+
+.rowActions button:hover {
+  color: var(--color-black);
+}
+
+.rowActions .danger:hover,
+.danger:hover {
+  color: #b42318;
+}
+
+.hint {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+  text-align: center;
+  padding: 28px 12px;
+}
+
+.seoCategory {
+  margin: -4px 0 0;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--color-muted);
+}
diff --git a/components/catalog/ManageCategoriesPage.tsx b/components/catalog/ManageCategoriesPage.tsx
new file mode 100644
index 0000000..578128e
--- /dev/null
+++ b/components/catalog/ManageCategoriesPage.tsx
@@ -0,0 +1,569 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useMemo, useState } from "react";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import CatalogEmptyState from "@/components/catalog/CatalogEmptyState";
+import formStyles from "@/components/catalog/CatalogForm.module.css";
+import SeoMetaFields from "@/components/catalog/SeoMetaFields";
+import { en } from "@/lib/i18n/en";
+import {
+  categoryOptionLabel,
+  createMeshkeeEntityCategory,
+  deleteMeshkeeEntityCategory,
+  listMeshkeeEntityCategories,
+  updateMeshkeeEntityCategory,
+  type CatalogEntityType,
+  type MeshkeeEntityCategory,
+  type UpsertCategoryInput,
+} from "@/services/meshkee-catalog";
+import styles from "./ManageCategoriesPage.module.css";
+
+type Draft = UpsertCategoryInput & { id?: string };
+
+type SeoDraft = {
+  id: string;
+  name: string;
+  nameFa?: string | null;
+  description?: string | null;
+  parentId: string | null;
+  seoMetaTitle: string;
+  seoMetaDescription: string;
+};
+
+function emptyDraft(parentId = ""): Draft {
+  return {
+    parentId: parentId || null,
+    name: "",
+    nameFa: "",
+    description: "",
+  };
+}
+
+export default function ManageCategoriesPage({
+  meshkeeId,
+  entityType,
+  title,
+  lead,
+  listHref,
+  listLabel,
+  homeHref = "/",
+}: {
+  meshkeeId: string;
+  entityType: CatalogEntityType;
+  title: string;
+  lead: string;
+  listHref: string;
+  listLabel: string;
+  homeHref?: string;
+}) {
+  const [categories, setCategories] = useState<MeshkeeEntityCategory[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const [draft, setDraft] = useState<Draft | null>(null);
+  const [seoDraft, setSeoDraft] = useState<SeoDraft | null>(null);
+  const [removing, setRemoving] = useState<MeshkeeEntityCategory | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+
+  const roots = useMemo(
+    () => categories.filter((item) => item.parentId == null),
+    [categories],
+  );
+
+  const childrenByParent = useMemo(() => {
+    const map = new Map<string, MeshkeeEntityCategory[]>();
+    for (const item of categories) {
+      if (!item.parentId) continue;
+      const list = map.get(item.parentId) ?? [];
+      list.push(item);
+      map.set(item.parentId, list);
+    }
+    return map;
+  }, [categories]);
+
+  async function reload() {
+    setLoading(true);
+    setError("");
+    try {
+      const items = await listMeshkeeEntityCategories(meshkeeId, entityType);
+      setCategories(items);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not load categories.",
+      );
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void reload();
+  }, [meshkeeId, entityType]);
+
+  async function saveDraft() {
+    if (!draft) return;
+    if (!draft.name.trim()) {
+      setError("Enter an English name.");
+      return;
+    }
+    setSaving(true);
+    setError("");
+    try {
+      if (draft.id) {
+        await updateMeshkeeEntityCategory(meshkeeId, draft.id, draft);
+      } else {
+        await createMeshkeeEntityCategory(meshkeeId, entityType, draft);
+      }
+      setDraft(null);
+      await reload();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not save category.",
+      );
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function saveSeo() {
+    if (!seoDraft) return;
+    setSaving(true);
+    setError("");
+    try {
+      await updateMeshkeeEntityCategory(meshkeeId, seoDraft.id, {
+        name: seoDraft.name,
+        nameFa: seoDraft.nameFa ?? "",
+        description: seoDraft.description ?? "",
+        parentId: seoDraft.parentId,
+        seoMetaTitle: seoDraft.seoMetaTitle,
+        seoMetaDescription: seoDraft.seoMetaDescription,
+      });
+      setSeoDraft(null);
+      await reload();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Could not save SEO.");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function confirmRemove() {
+    if (!removing) return;
+    setRemoveBusy(true);
+    try {
+      await deleteMeshkeeEntityCategory(meshkeeId, removing.id);
+      setRemoving(null);
+      await reload();
+    } catch (err) {
+      window.alert(
+        err instanceof Error ? err.message : "Could not delete category.",
+      );
+    } finally {
+      setRemoveBusy(false);
+    }
+  }
+
+  function openEdit(category: MeshkeeEntityCategory) {
+    setDraft({
+      id: category.id,
+      parentId: category.parentId,
+      name: category.name,
+      nameFa: category.nameFa ?? "",
+      description: category.description ?? "",
+    });
+  }
+
+  function openSeo(category: MeshkeeEntityCategory) {
+    setSeoDraft({
+      id: category.id,
+      name: category.name,
+      nameFa: category.nameFa,
+      description: category.description,
+      parentId: category.parentId,
+      seoMetaTitle: category.seoMetaTitle ?? "",
+      seoMetaDescription: category.seoMetaDescription ?? "",
+    });
+  }
+
+  const parentOptions = categories.filter((item) => item.id !== draft?.id);
+
+  return (
+    <div className={`${formStyles.page} ${styles.page}`}>
+      <header className={formStyles.head}>
+        <div>
+          <nav className={formStyles.breadcrumb} aria-label="Breadcrumb">
+            <Link href={homeHref}>{en.nav.home}</Link>
+            <span className={formStyles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <Link href={listHref}>{listLabel}</Link>
+            <span className={formStyles.breadcrumbSep} aria-hidden>
+              /
+            </span>
+            <span className={formStyles.breadcrumbCurrent}>Categories</span>
+          </nav>
+          <h1 className={formStyles.title}>{title}</h1>
+          <p className={formStyles.lead}>{lead}</p>
+        </div>
+        <div className={formStyles.headActions}>
+          <button
+            type="button"
+            className={`outline-btn ${formStyles.saveBtn}`}
+            onClick={() => setDraft(emptyDraft())}
+          >
+            Add category
+          </button>
+        </div>
+      </header>
+
+      {error ? (
+        <div className={formStyles.errorBox} role="alert">
+          {error}
+        </div>
+      ) : null}
+
+      {loading ? <p className={styles.hint}>Loading categories…</p> : null}
+
+      {!loading && !categories.length ? (
+        <CatalogEmptyState
+          icon="/images/icons/category.svg"
+          title="No categories yet"
+          lead="Create categories to organize this catalog."
+          actionLabel="Add category"
+          onAction={() => setDraft(emptyDraft())}
+        />
+      ) : null}
+
+      {!loading && categories.length ? (
+        <section className={`${formStyles.card} ${styles.listCard}`}>
+          <h2 className={formStyles.sectionTitle}>Categories</h2>
+          <div className={styles.tree}>
+            {roots.map((root) => (
+              <CategoryBranch
+                key={root.id}
+                category={root}
+                childrenByParent={childrenByParent}
+                onAddChild={(parentId) => setDraft(emptyDraft(parentId))}
+                onEdit={openEdit}
+                onSeo={openSeo}
+                onRemove={setRemoving}
+              />
+            ))}
+          </div>
+        </section>
+      ) : null}
+
+      {draft ? (
+        <div
+          className={styles.overlay}
+          role="dialog"
+          aria-modal
+          onClick={() => {
+            if (!saving) setDraft(null);
+          }}
+        >
+          <div
+            className={styles.dialog}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <div className={styles.dialogHead}>
+              <h2 className={styles.dialogTitle}>
+                {draft.id ? "Edit category" : "Add category"}
+              </h2>
+              <button
+                type="button"
+                className={styles.closeBtn}
+                disabled={saving}
+                onClick={() => setDraft(null)}
+                aria-label="Close"
+              >
+                ×
+              </button>
+            </div>
+
+            <label className={formStyles.field}>
+              <span>
+                Parent <em className={formStyles.optional}>(optional)</em>
+              </span>
+              <select
+                value={draft.parentId ?? ""}
+                disabled={saving}
+                onChange={(event) =>
+                  setDraft((current) =>
+                    current
+                      ? {
+                          ...current,
+                          parentId: event.target.value || null,
+                        }
+                      : current,
+                  )
+                }
+              >
+                <option value="">Top level</option>
+                {parentOptions.map((item) => (
+                  <option key={item.id} value={item.id}>
+                    {categoryOptionLabel(item)}
+                  </option>
+                ))}
+              </select>
+            </label>
+
+            <label className={formStyles.field}>
+              <span>Name EN</span>
+              <input
+                value={draft.name}
+                disabled={saving}
+                required
+                onChange={(event) =>
+                  setDraft((current) =>
+                    current ? { ...current, name: event.target.value } : current,
+                  )
+                }
+              />
+            </label>
+
+            <label className={formStyles.field}>
+              <span>
+                Name FA <em className={formStyles.optional}>(optional)</em>
+              </span>
+              <input
+                className="fa"
+                lang="fa"
+                dir="rtl"
+                value={draft.nameFa ?? ""}
+                disabled={saving}
+                onChange={(event) =>
+                  setDraft((current) =>
+                    current
+                      ? { ...current, nameFa: event.target.value }
+                      : current,
+                  )
+                }
+              />
+            </label>
+
+            <label className={formStyles.field}>
+              <span>
+                Description <em className={formStyles.optional}>(optional)</em>
+              </span>
+              <textarea
+                rows={3}
+                value={draft.description ?? ""}
+                disabled={saving}
+                onChange={(event) =>
+                  setDraft((current) =>
+                    current
+                      ? { ...current, description: event.target.value }
+                      : current,
+                  )
+                }
+              />
+            </label>
+
+            <div className={formStyles.footerActionsEnd}>
+              <button
+                type="button"
+                className={`outline-btn ${formStyles.ghostBtn}`}
+                disabled={saving}
+                onClick={() => setDraft(null)}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className={`outline-btn ${formStyles.saveBtn}`}
+                disabled={saving}
+                onClick={() => void saveDraft()}
+              >
+                {saving ? "Saving…" : "Save"}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {seoDraft ? (
+        <div
+          className={styles.overlay}
+          role="dialog"
+          aria-modal
+          onClick={() => {
+            if (!saving) setSeoDraft(null);
+          }}
+        >
+          <div
+            className={styles.dialog}
+            onClick={(event) => event.stopPropagation()}
+          >
+            <div className={styles.dialogHead}>
+              <h2 className={styles.dialogTitle}>SEO</h2>
+              <button
+                type="button"
+                className={styles.closeBtn}
+                disabled={saving}
+                onClick={() => setSeoDraft(null)}
+                aria-label="Close"
+              >
+                ×
+              </button>
+            </div>
+            <p className={styles.seoCategory} dir="auto">
+              {categoryOptionLabel({
+                id: seoDraft.id,
+                name: seoDraft.name,
+                nameFa: seoDraft.nameFa,
+                parentId: seoDraft.parentId,
+              })}
+            </p>
+            <SeoMetaFields
+              seoMetaTitle={seoDraft.seoMetaTitle}
+              seoMetaDescription={seoDraft.seoMetaDescription}
+              disabled={saving}
+              showHeading={false}
+              onTitleChange={(value) =>
+                setSeoDraft((current) =>
+                  current ? { ...current, seoMetaTitle: value } : current,
+                )
+              }
+              onDescriptionChange={(value) =>
+                setSeoDraft((current) =>
+                  current
+                    ? { ...current, seoMetaDescription: value }
+                    : current,
+                )
+              }
+            />
+            <div className={formStyles.footerActionsEnd}>
+              <button
+                type="button"
+                className={`outline-btn ${formStyles.ghostBtn}`}
+                disabled={saving}
+                onClick={() => setSeoDraft(null)}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                className={`outline-btn ${formStyles.saveBtn}`}
+                disabled={saving}
+                onClick={() => void saveSeo()}
+              >
+                {saving ? "Saving…" : "Save"}
+              </button>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      <ConfirmDialog
+        open={Boolean(removing)}
+        kicker="Remove"
+        title={`Remove ${removing ? categoryOptionLabel(removing) : "category"}?`}
+        message="This deletes the category and its subcategories from Meshkee. This cannot be undone."
+        confirmLabel="Remove"
+        cancelLabel="Keep"
+        danger
+        busy={removeBusy}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+        onConfirm={() => {
+          void confirmRemove();
+        }}
+      />
+    </div>
+  );
+}
+
+function CategoryBranch({
+  category,
+  childrenByParent,
+  depth = 0,
+  onAddChild,
+  onEdit,
+  onSeo,
+  onRemove,
+}: {
+  category: MeshkeeEntityCategory;
+  childrenByParent: Map<string, MeshkeeEntityCategory[]>;
+  depth?: number;
+  onAddChild: (parentId: string) => void;
+  onEdit: (category: MeshkeeEntityCategory) => void;
+  onSeo: (category: MeshkeeEntityCategory) => void;
+  onRemove: (category: MeshkeeEntityCategory) => void;
+}) {
+  const children = childrenByParent.get(category.id) ?? [];
+
+  return (
+    <div className={styles.branch}>
+      <CategoryRow
+        category={category}
+        child={depth > 0}
+        onAddChild={() => onAddChild(category.id)}
+        onEdit={() => onEdit(category)}
+        onSeo={() => onSeo(category)}
+        onRemove={() => onRemove(category)}
+      />
+      {children.length ? (
+        <div className={styles.children}>
+          {children.map((child) => (
+            <CategoryBranch
+              key={child.id}
+              category={child}
+              childrenByParent={childrenByParent}
+              depth={depth + 1}
+              onAddChild={onAddChild}
+              onEdit={onEdit}
+              onSeo={onSeo}
+              onRemove={onRemove}
+            />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function CategoryRow({
+  category,
+  child = false,
+  onAddChild,
+  onEdit,
+  onSeo,
+  onRemove,
+}: {
+  category: MeshkeeEntityCategory;
+  child?: boolean;
+  onAddChild: () => void;
+  onEdit: () => void;
+  onSeo: () => void;
+  onRemove: () => void;
+}) {
+  return (
+    <div className={`${styles.row}${child ? ` ${styles.rowChild}` : ""}`}>
+      <div className={styles.rowCopy}>
+        <p className={styles.rowName} dir="auto">
+          {categoryOptionLabel(category)}
+        </p>
+        {category.description ? (
+          <p className={styles.rowMeta}>{category.description}</p>
+        ) : null}
+      </div>
+      <div className={styles.rowActions}>
+        <button type="button" onClick={onAddChild}>
+          Add sub
+        </button>
+        <button type="button" onClick={onEdit}>
+          Edit
+        </button>
+        <button type="button" onClick={onSeo}>
+          SEO
+        </button>
+        <button type="button" className={styles.danger} onClick={onRemove}>
+          Remove
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/components/catalog/PortfoliosPanel.tsx b/components/catalog/PortfoliosPanel.tsx
new file mode 100644
index 0000000..cbb91b4
--- /dev/null
+++ b/components/catalog/PortfoliosPanel.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import CatalogCardControls, {
+  type CatalogControlsMode,
+} from "@/components/catalog/CatalogCardControls";
+import CatalogEmptyState from "@/components/catalog/CatalogEmptyState";
+import CatalogPagination from "@/components/catalog/CatalogPagination";
+import {
+  PORTFOLIO_PAGE_SIZE,
+  portfolioImage,
+  portfolioTitle,
+  portfolioTitleEn,
+  portfolioTitleFa,
+} from "@/components/catalog/utils";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import styles from "@/components/BusinessDetailsPage.module.css";
+import { en } from "@/lib/i18n/en";
+import {
+  deleteMeshkeePortfolio,
+  listMeshkeePortfolios,
+  type MeshkeePortfolio,
+} from "@/services/meshkee-content";
+
+export default function PortfoliosPanel({
+  meshkeeId,
+  emptyLabel = en.portfolios.empty,
+  addHref,
+  controlsMode = "edit-remove",
+  onManage,
+}: {
+  meshkeeId: string;
+  emptyLabel?: string;
+  addHref?: string;
+  controlsMode?: CatalogControlsMode | "none";
+  onManage?: () => void;
+}) {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const [items, setItems] = useState<MeshkeePortfolio[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [busy, setBusy] = useState(false);
+  const [removing, setRemoving] = useState<MeshkeePortfolio | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setBusy(true);
+      setError("");
+      try {
+        const res = await listMeshkeePortfolios(meshkeeId, {
+          page: 1,
+          pageSize: PORTFOLIO_PAGE_SIZE,
+        });
+        if (cancelled) return;
+        setItems(res.items);
+        setTotal(res.total);
+        setPage(1);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load portfolios.",
+          );
+        }
+      } finally {
+        if (!cancelled) setBusy(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [meshkeeId]);
+
+  function scrollToSection() {
+    const node = sectionRef.current;
+    if (!node) return;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        node.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    });
+  }
+
+  async function loadPage(next: number) {
+    setBusy(true);
+    try {
+      const res = await listMeshkeePortfolios(meshkeeId, {
+        page: next,
+        pageSize: PORTFOLIO_PAGE_SIZE,
+      });
+      setItems(res.items);
+      setTotal(res.total);
+      setPage(res.page);
+      scrollToSection();
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function confirmRemove() {
+    if (!removing) return;
+    setRemoveBusy(true);
+    try {
+      await deleteMeshkeePortfolio(meshkeeId, removing.id);
+      setItems((prev) => prev.filter((item) => item.id !== removing.id));
+      setTotal((value) => Math.max(0, value - 1));
+      setRemoving(null);
+    } catch (err) {
+      window.alert(
+        err instanceof Error ? err.message : "Could not remove portfolio.",
+      );
+    } finally {
+      setRemoveBusy(false);
+    }
+  }
+
+  if (error) {
+    return <p className={styles.panelHint}>{error}</p>;
+  }
+
+  return (
+    <div ref={sectionRef} className={styles.productsSection}>
+      {busy ? <p className={styles.panelHint}>Loading portfolios…</p> : null}
+      <div className={styles.portfolioGrid}>
+        {items.map((item) => {
+          const image = portfolioImage(item);
+          const title = portfolioTitle(item);
+          const titleEn = portfolioTitleEn(item);
+          const titleFa = portfolioTitleFa(item);
+          return (
+            <article key={item.id} className={styles.portfolioCard}>
+              <div className={styles.portfolioMedia}>
+                {image ? (
+                  <img src={image} alt="" />
+                ) : (
+                  <div className={styles.mediaFallback} aria-hidden />
+                )}
+              </div>
+              <div className={styles.portfolioMeta}>
+                <h3 className={styles.portfolioTitleEn}>
+                  {titleEn || title}
+                </h3>
+                {titleFa ? (
+                  <p className={`fa ${styles.portfolioTitleFa}`} lang="fa">
+                    {titleFa}
+                  </p>
+                ) : null}
+              </div>
+              {controlsMode !== "none" ? (
+                <div className={`tile-hover ${styles.cardFoot} ${styles.cardFootSolo}`}>
+                  <CatalogCardControls
+                    mode={controlsMode}
+                    busy={removeBusy}
+                    onManage={onManage}
+                    onEdit={() =>
+                      window.alert(`Edit portfolio coming soon: ${title}`)
+                    }
+                    onRemove={() => setRemoving(item)}
+                  />
+                </div>
+              ) : null}
+            </article>
+          );
+        })}
+      </div>
+      {!items.length && !busy ? (
+        <CatalogEmptyState
+          icon="/images/icons/gear.svg"
+          title={emptyLabel}
+          lead={en.portfolios.emptyLead}
+          actionHref={addHref}
+          actionLabel={en.portfolios.add}
+        />
+      ) : null}
+      <CatalogPagination
+        page={page}
+        total={total}
+        pageSize={PORTFOLIO_PAGE_SIZE}
+        busy={busy}
+        onChange={(next) => void loadPage(next)}
+      />
+      <ConfirmDialog
+        open={controlsMode === "edit-remove" && Boolean(removing)}
+        kicker="Remove"
+        title={`Remove ${removing ? portfolioTitle(removing) : "portfolio"}?`}
+        message="This deletes the portfolio from Meshkee. This cannot be undone."
+        confirmLabel="Remove"
+        cancelLabel="Keep"
+        danger
+        busy={removeBusy}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+        onConfirm={() => {
+          void confirmRemove();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/components/catalog/ProductsPanel.tsx b/components/catalog/ProductsPanel.tsx
new file mode 100644
index 0000000..d5b51e4
--- /dev/null
+++ b/components/catalog/ProductsPanel.tsx
@@ -0,0 +1,347 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import CatalogCardControls, {
+  type CatalogControlsMode,
+} from "@/components/catalog/CatalogCardControls";
+import CatalogEmptyState from "@/components/catalog/CatalogEmptyState";
+import CatalogPagination from "@/components/catalog/CatalogPagination";
+import {
+  PRODUCT_PAGE_SIZE,
+  productImage,
+  productSubtitle,
+} from "@/components/catalog/utils";
+import ConfirmDialog from "@/components/ConfirmDialog";
+import styles from "@/components/BusinessDetailsPage.module.css";
+import { en } from "@/lib/i18n/en";
+import {
+  collectCategorySubtreeIds,
+  deleteMeshkeeProduct,
+  listMeshkeeBusinessCategories,
+  listMeshkeeProducts,
+  type MeshkeeBusinessCategory,
+  type MeshkeeProduct,
+} from "@/services/meshkee-content";
+
+export default function ProductsPanel({
+  meshkeeId,
+  emptyLabel = en.products.empty,
+  addHref,
+  controlsMode = "edit-remove",
+  onManage,
+}: {
+  meshkeeId: string;
+  emptyLabel?: string;
+  addHref?: string;
+  controlsMode?: CatalogControlsMode;
+  onManage?: () => void;
+}) {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const [categories, setCategories] = useState<MeshkeeBusinessCategory[]>([]);
+  const [parentCategoryId, setParentCategoryId] = useState<string | null>(null);
+  const [childCategoryId, setChildCategoryId] = useState<string | null>(null);
+  const [products, setProducts] = useState<MeshkeeProduct[]>([]);
+  const [productTotal, setProductTotal] = useState(0);
+  const [productPage, setProductPage] = useState(1);
+  const [productBusy, setProductBusy] = useState(false);
+  const [productCatalog, setProductCatalog] = useState<MeshkeeProduct[] | null>(
+    null,
+  );
+  const [catalogBusy, setCatalogBusy] = useState(false);
+  const [removing, setRemoving] = useState<MeshkeeProduct | null>(null);
+  const [removeBusy, setRemoveBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  const rootCategories = useMemo(
+    () => categories.filter((item) => item.parentId == null),
+    [categories],
+  );
+  const childCategories = useMemo(() => {
+    if (!parentCategoryId) return [];
+    return categories.filter((item) => item.parentId === parentCategoryId);
+  }, [categories, parentCategoryId]);
+  const activeCategoryId = childCategoryId ?? parentCategoryId;
+
+  const filteredCatalog = useMemo(() => {
+    if (!productCatalog || !activeCategoryId) return productCatalog;
+    const ids = collectCategorySubtreeIds(categories, activeCategoryId);
+    return productCatalog.filter(
+      (item) => item.categoryId && ids.has(item.categoryId),
+    );
+  }, [productCatalog, activeCategoryId, categories]);
+
+  const pagedFiltered = useMemo(() => {
+    if (!filteredCatalog) return null;
+    const start = (productPage - 1) * PRODUCT_PAGE_SIZE;
+    return filteredCatalog.slice(start, start + PRODUCT_PAGE_SIZE);
+  }, [filteredCatalog, productPage]);
+
+  const displayed = activeCategoryId ? (pagedFiltered ?? products) : products;
+  const displayedTotal = activeCategoryId
+    ? (filteredCatalog?.length ?? productTotal)
+    : productTotal;
+
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      setProductBusy(true);
+      setError("");
+      try {
+        const [productsRes, categoriesRes] = await Promise.all([
+          listMeshkeeProducts(meshkeeId, {
+            page: 1,
+            pageSize: PRODUCT_PAGE_SIZE,
+          }),
+          listMeshkeeBusinessCategories(meshkeeId).catch(
+            () => [] as MeshkeeBusinessCategory[],
+          ),
+        ]);
+        if (cancelled) return;
+        setProducts(productsRes.items);
+        setProductTotal(productsRes.total);
+        setProductPage(1);
+        setCategories(categoriesRes);
+        setProductCatalog(null);
+        setParentCategoryId(null);
+        setChildCategoryId(null);
+      } catch (err) {
+        if (!cancelled) {
+          setError(
+            err instanceof Error ? err.message : "Could not load products.",
+          );
+        }
+      } finally {
+        if (!cancelled) setProductBusy(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [meshkeeId]);
+
+  function scrollToSection() {
+    const node = sectionRef.current;
+    if (!node) return;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        node.scrollIntoView({ behavior: "smooth", block: "start" });
+      });
+    });
+  }
+
+  async function ensureCatalog() {
+    if (productCatalog) return productCatalog;
+    setCatalogBusy(true);
+    try {
+      const pageSize = 100;
+      let page = 1;
+      let total = Infinity;
+      const all: MeshkeeProduct[] = [];
+      while (all.length < total) {
+        const res = await listMeshkeeProducts(meshkeeId, { page, pageSize });
+        total = res.total;
+        all.push(...res.items);
+        if (!res.items.length) break;
+        page += 1;
+      }
+      setProductCatalog(all);
+      return all;
+    } finally {
+      setCatalogBusy(false);
+    }
+  }
+
+  async function loadPage(page: number) {
+    if (activeCategoryId) {
+      setProductPage(page);
+      scrollToSection();
+      return;
+    }
+    setProductBusy(true);
+    try {
+      const res = await listMeshkeeProducts(meshkeeId, {
+        page,
+        pageSize: PRODUCT_PAGE_SIZE,
+      });
+      setProducts(res.items);
+      setProductTotal(res.total);
+      setProductPage(res.page);
+      scrollToSection();
+    } finally {
+      setProductBusy(false);
+    }
+  }
+
+  async function selectParent(id: string | null) {
+    setParentCategoryId(id);
+    setChildCategoryId(null);
+    setProductPage(1);
+    if (id) await ensureCatalog();
+    scrollToSection();
+  }
+
+  async function selectChild(id: string | null) {
+    setChildCategoryId(id);
+    setProductPage(1);
+    if (id || parentCategoryId) await ensureCatalog();
+    scrollToSection();
+  }
+
+  async function confirmRemove() {
+    if (!removing) return;
+    setRemoveBusy(true);
+    try {
+      await deleteMeshkeeProduct(meshkeeId, removing.id);
+      setProducts((prev) => prev.filter((item) => item.id !== removing.id));
+      setProductCatalog((prev) =>
+        prev ? prev.filter((item) => item.id !== removing.id) : prev,
+      );
+      setProductTotal((total) => Math.max(0, total - 1));
+      setRemoving(null);
+    } catch (err) {
+      window.alert(
+        err instanceof Error ? err.message : "Could not remove product.",
+      );
+    } finally {
+      setRemoveBusy(false);
+    }
+  }
+
+  if (error) {
+    return <p className={styles.panelHint}>{error}</p>;
+  }
+
+  return (
+    <div ref={sectionRef} className={styles.productsSection}>
+      {productTotal > 0 ? (
+        <div className={styles.pills}>
+          <button
+            type="button"
+            className={!parentCategoryId ? styles.pillActive : styles.pill}
+            onClick={() => void selectParent(null)}
+          >
+            All
+          </button>
+          {rootCategories.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              className={
+                parentCategoryId === item.id ? styles.pillActive : styles.pill
+              }
+              onClick={() => void selectParent(item.id)}
+            >
+              {item.name}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {productTotal > 0 && childCategories.length ? (
+        <div className={styles.childPills}>
+          <button
+            type="button"
+            className={!childCategoryId ? styles.pillActive : styles.pill}
+            onClick={() => void selectChild(null)}
+          >
+            All in category
+          </button>
+          {childCategories.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              className={
+                childCategoryId === item.id ? styles.pillActive : styles.pill
+              }
+              onClick={() => void selectChild(item.id)}
+            >
+              {item.name}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {catalogBusy || productBusy ? (
+        <p className={styles.panelHint}>Loading products…</p>
+      ) : null}
+
+      <div className={styles.productGrid}>
+        {displayed.map((product) => {
+          const image = productImage(product);
+          const subtitle = productSubtitle(product);
+          return (
+            <article key={product.id} className={styles.card}>
+              <div className={styles.cardMedia}>
+                {image ? (
+                  <img src={image} alt="" />
+                ) : (
+                  <div className={styles.mediaFallback} aria-hidden />
+                )}
+              </div>
+              <div
+                className={`tile-hover ${styles.cardFoot}${
+                  subtitle ? "" : ` ${styles.cardFootSolo}`
+                }`}
+              >
+                <div className={styles.cardBody}>
+                  <h3 dir="auto">{product.title}</h3>
+                  {subtitle ? <p>{subtitle}</p> : null}
+                </div>
+                <CatalogCardControls
+                  mode={controlsMode}
+                  busy={removeBusy}
+                  onManage={onManage}
+                  onEdit={() =>
+                    window.alert(`Edit product coming soon: ${product.title}`)
+                  }
+                  onRemove={() => setRemoving(product)}
+                />
+              </div>
+            </article>
+          );
+        })}
+      </div>
+
+      {!displayed.length && !catalogBusy && !productBusy ? (
+        <CatalogEmptyState
+          icon="/images/icons/category.svg"
+          title={
+            activeCategoryId ? en.products.emptyFiltered : emptyLabel
+          }
+          lead={
+            activeCategoryId
+              ? en.products.emptyFilteredLead
+              : en.products.emptyLead
+          }
+          actionHref={activeCategoryId ? undefined : addHref}
+          actionLabel={activeCategoryId ? undefined : en.products.add}
+        />
+      ) : null}
+
+      <CatalogPagination
+        page={productPage}
+        total={displayedTotal}
+        pageSize={PRODUCT_PAGE_SIZE}
+        busy={productBusy || catalogBusy}
+        onChange={(page) => void loadPage(page)}
+      />
+
+      <ConfirmDialog
+        open={controlsMode === "edit-remove" && Boolean(removing)}
+        kicker="Remove"
+        title={`Remove ${removing?.title ?? "product"}?`}
+        message="This deletes the product from Meshkee. This cannot be undone."
+        confirmLabel="Remove"
+        cancelLabel="Keep"
+        danger
+        busy={removeBusy}
+        onClose={() => {
+          if (!removeBusy) setRemoving(null);
+        }}
+        onConfirm={() => {
+          void confirmRemove();
+        }}
+      />
+    </div>
+  );
+}
diff --git a/components/catalog/SeoMetaFields.module.css b/components/catalog/SeoMetaFields.module.css
new file mode 100644
index 0000000..271e768
--- /dev/null
+++ b/components/catalog/SeoMetaFields.module.css
@@ -0,0 +1,34 @@
+.block {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.blockWithRule {
+  padding-top: 14px;
+  border-top: 1px solid #efefef;
+}
+
+.heading {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--color-black);
+}
+
+.hint {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.45;
+  color: var(--color-soft);
+}
+
+.counter {
+  font-size: 11px;
+  font-weight: 400;
+  letter-spacing: 0.04em;
+  color: var(--color-soft);
+}
diff --git a/components/catalog/SeoMetaFields.tsx b/components/catalog/SeoMetaFields.tsx
new file mode 100644
index 0000000..fd12c92
--- /dev/null
+++ b/components/catalog/SeoMetaFields.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import formStyles from "@/components/catalog/CatalogForm.module.css";
+import styles from "./SeoMetaFields.module.css";
+
+const TITLE_MAX = 70;
+const DESCRIPTION_MAX = 160;
+
+/** Optional SEO overrides — same control used by Meshkee category/content forms. */
+export default function SeoMetaFields({
+  seoMetaTitle,
+  seoMetaDescription,
+  onTitleChange,
+  onDescriptionChange,
+  disabled = false,
+  showHeading = true,
+}: {
+  seoMetaTitle: string;
+  seoMetaDescription: string;
+  onTitleChange: (value: string) => void;
+  onDescriptionChange: (value: string) => void;
+  disabled?: boolean;
+  showHeading?: boolean;
+}) {
+  return (
+    <div className={styles.block}>
+      {showHeading ? <h3 className={styles.heading}>SEO</h3> : null}
+      <p className={styles.hint}>
+        Optional overrides for search results. Leave blank to use the category
+        name and description.
+      </p>
+      <label className={formStyles.field}>
+        <span>
+          SEO title <em className={formStyles.optional}>(optional)</em>
+        </span>
+        <input
+          type="text"
+          value={seoMetaTitle}
+          disabled={disabled}
+          maxLength={TITLE_MAX}
+          placeholder="Custom title for search engines"
+          onChange={(event) =>
+            onTitleChange(event.target.value.slice(0, TITLE_MAX))
+          }
+        />
+        <span className={styles.counter}>
+          {seoMetaTitle.length} / {TITLE_MAX}
+        </span>
+      </label>
+      <label className={formStyles.field}>
+        <span>
+          SEO description <em className={formStyles.optional}>(optional)</em>
+        </span>
+        <textarea
+          rows={3}
+          value={seoMetaDescription}
+          disabled={disabled}
+          maxLength={DESCRIPTION_MAX}
+          placeholder="Custom description for search engines"
+          onChange={(event) =>
+            onDescriptionChange(event.target.value.slice(0, DESCRIPTION_MAX))
+          }
+        />
+        <span className={styles.counter}>
+          {seoMetaDescription.length} / {DESCRIPTION_MAX}
+        </span>
+      </label>
+    </div>
+  );
+}
diff --git a/components/catalog/utils.ts b/components/catalog/utils.ts
new file mode 100644
index 0000000..61ba61a
--- /dev/null
+++ b/components/catalog/utils.ts
@@ -0,0 +1,123 @@
+import type {
+  MeshkeeBlog,
+  MeshkeeMediaItem,
+  MeshkeePortfolio,
+  MeshkeeProduct,
+} from "@/services/meshkee-content";
+
+export function toPlainText(value: string) {
+  if (!value.includes("<")) return value;
+  return value
+    .replace(/<br\s*\/?>/gi, "\n")
+    .replace(/<\/p>/gi, "\n")
+    .replace(/<[^>]+>/g, "")
+    .replace(/&nbsp;/g, " ")
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/\n{3,}/g, "\n\n")
+    .trim();
+}
+
+export function excerpt(value: string, max = 160) {
+  const plain = toPlainText(value).replace(/\s+/g, " ").trim();
+  if (plain.length <= max) return plain;
+  return `${plain.slice(0, max - 1).trimEnd()}…`;
+}
+
+export function formatDate(value?: string) {
+  if (!value) return "";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+export function productImage(product: MeshkeeProduct) {
+  return product.thumbnailUrl || product.thumbnail || product.image || "";
+}
+
+export function productSubtitle(product: MeshkeeProduct) {
+  const raw = product.categoryName?.trim() ?? "";
+  if (!raw) return "";
+  if (raw.toLowerCase() === product.title.trim().toLowerCase()) return "";
+  return raw;
+}
+
+export function blogImage(post: MeshkeeBlog) {
+  return post.titleImageUrl || "";
+}
+
+export function portfolioImage(item: MeshkeePortfolio) {
+  return item.titleImageUrl || item.coverUrl || item.image || "";
+}
+
+export function galleryImage(item: MeshkeeMediaItem) {
+  return item.publicUrl || "";
+}
+
+export function portfolioTitleEn(item: MeshkeePortfolio) {
+  return (
+    item.titleEn?.trim() ||
+    item.nameEn?.trim() ||
+    item.title?.trim() ||
+    item.name?.trim() ||
+    ""
+  );
+}
+
+export function portfolioTitleFa(item: MeshkeePortfolio) {
+  return item.titleFa?.trim() || item.nameFa?.trim() || "";
+}
+
+export function portfolioTitle(item: MeshkeePortfolio) {
+  const candidates = [
+    item.titleEn,
+    item.titleFa,
+    item.title,
+    item.nameEn,
+    item.nameFa,
+    item.name,
+  ];
+  for (const value of candidates) {
+    const text = value?.trim();
+    if (text) return text;
+  }
+  const slug = item.slug?.trim();
+  if (slug) {
+    return slug
+      .replace(/[-_]+/g, " ")
+      .replace(/\s+/g, " ")
+      .trim()
+      .replace(/\b\w/g, (char) => char.toUpperCase());
+  }
+  return "Untitled portfolio";
+}
+
+export function buildPageItems(
+  page: number,
+  pageCount: number,
+): (number | "…")[] {
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, i) => i + 1);
+  }
+
+  const items: (number | "…")[] = [1];
+  const start = Math.max(2, page - 1);
+  const end = Math.min(pageCount - 1, page + 1);
+
+  if (start > 2) items.push("…");
+  for (let n = start; n <= end; n += 1) items.push(n);
+  if (end < pageCount - 1) items.push("…");
+  items.push(pageCount);
+  return items;
+}
+
+export const PRODUCT_PAGE_SIZE = 12;
+export const BLOG_PAGE_SIZE = 9;
+export const GALLERY_PAGE_SIZE = 16;
+export const PORTFOLIO_PAGE_SIZE = 12;
+export const CONTENT_PAGE_SIZE = 12;
diff --git a/data/business-nav.ts b/data/business-nav.ts
new file mode 100644
index 0000000..2dbba3b
--- /dev/null
+++ b/data/business-nav.ts
@@ -0,0 +1,29 @@
+import { en } from "@/lib/i18n/en";
+
+export const businessNavItems = [
+  {
+    href: "/profile",
+    label: en.nav.profile,
+    icon: "/images/icons/user.svg",
+  },
+  {
+    href: "/products",
+    label: en.nav.products,
+    icon: "/images/icons/category.svg",
+  },
+  {
+    href: "/blog",
+    label: en.nav.blog,
+    icon: "/images/icons/calendar.svg",
+  },
+  {
+    href: "/portfolios",
+    label: en.nav.portfolios,
+    icon: "/images/icons/gear.svg",
+  },
+  {
+    href: "/gallery",
+    label: en.nav.gallery,
+    icon: "/images/icons/gallery.svg",
+  },
+] as const;
diff --git a/data/customer-nav.ts b/data/customer-nav.ts
new file mode 100644
index 0000000..3063d2f
--- /dev/null
+++ b/data/customer-nav.ts
@@ -0,0 +1,14 @@
+import { en } from "@/lib/i18n/en";
+
+export const customerNavItems = [
+  {
+    href: "/",
+    label: en.nav.home,
+    icon: "/images/icons/home.svg",
+  },
+  {
+    href: "/profile",
+    label: en.nav.profile,
+    icon: "/images/icons/user.svg",
+  },
+] as const;
diff --git a/data/home.ts b/data/home.ts
new file mode 100644
index 0000000..7a45e00
--- /dev/null
+++ b/data/home.ts
@@ -0,0 +1,141 @@
+export type NavLeaf = {
+  href: string;
+  label: string;
+};
+
+export type NavItem =
+  | {
+      type?: 'link';
+      href: string;
+      label: string;
+      icon: string;
+    }
+  | {
+      type: 'group';
+      label: string;
+      icon: string;
+      children: NavLeaf[];
+    };
+
+export const navItems: NavItem[] = [
+  { href: "/", label: "Overview", icon: "/images/icons/home.svg" },
+  {
+    type: "group",
+    label: "Businesses",
+    icon: "/images/icons/category.svg",
+    children: [
+      { href: "/businesses", label: "Businesses" },
+      { href: "/businesses/categories", label: "Categories" },
+    ],
+  },
+  {
+    type: "group",
+    label: "Website",
+    icon: "/images/icons/gallery.svg",
+    children: [
+      { href: "/website/images", label: "Images" },
+      { href: "/website/carousels", label: "Carousels" },
+    ],
+  },
+  {
+    type: "group",
+    label: "Blog",
+    icon: "/images/icons/blog.svg",
+    children: [
+      { href: "/website/blog/new", label: "New blog" },
+      { href: "/website/blog", label: "Blogs" },
+      { href: "/website/blog/categories", label: "Categories" },
+    ],
+  },
+  { href: "/#activity", label: "Activity", icon: "/images/icons/calendar.svg" },
+  { href: "/#settings", label: "Settings", icon: "/images/icons/gear.svg" },
+];
+
+export const overviewStats = [
+  {
+    id: "businesses",
+    label: "Businesses",
+    value: "128",
+    hint: "Live on marketplace",
+    href: "#businesses",
+  },
+  {
+    id: "categories",
+    label: "Categories",
+    value: "24",
+    hint: "Active sections",
+    href: "#businesses",
+  },
+  {
+    id: "pending",
+    label: "Pending",
+    value: "7",
+    hint: "Awaiting review",
+    href: "#activity",
+  },
+  {
+    id: "visitors",
+    label: "Visitors",
+    value: "3.2k",
+    hint: "Last 7 days",
+    href: "#activity",
+  },
+] as const;
+
+export const recentBusinesses = [
+  {
+    name: "Simode Atelier",
+    category: "Furniture",
+    status: "Published",
+    updated: "2h ago",
+  },
+  {
+    name: "Ayoubi Jewelry",
+    category: "Accessories",
+    status: "Review",
+    updated: "5h ago",
+  },
+  {
+    name: "Arad Bakery",
+    category: "Food",
+    status: "Published",
+    updated: "Yesterday",
+  },
+  {
+    name: "Sani Laundry",
+    category: "Services",
+    status: "Draft",
+    updated: "2 days ago",
+  },
+] as const;
+
+export const activityItems = [
+  {
+    title: "New business submitted",
+    detail: "Ayoubi Jewelry — accessories",
+    time: "10:24",
+  },
+  {
+    title: "Category updated",
+    detail: "Furniture producers — cover image",
+    time: "09:12",
+  },
+  {
+    title: "Listing published",
+    detail: "Simode Atelier went live",
+    time: "Yesterday",
+  },
+] as const;
+
+export const quickActions = [
+  {
+    label: "Review pending",
+    href: "#activity",
+    description: "Approve new marketplace listings",
+  },
+  {
+    label: "Manage categories",
+    href: "#businesses",
+    description: "Edit sections and filters",
+  },
+] as const;
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000..05e726d
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
diff --git a/lib/cellNumber.ts b/lib/cellNumber.ts
new file mode 100644
index 0000000..2c9480d
--- /dev/null
+++ b/lib/cellNumber.ts
@@ -0,0 +1,22 @@
+/** Normalize Iranian/local input to E.164 (e.g. +989121111111). */
+export function toE164CellNumber(input: string): string {
+  const digits = input.replace(/\D/g, "");
+
+  if (!digits) {
+    return "";
+  }
+
+  if (digits.startsWith("98")) {
+    return `+${digits}`;
+  }
+
+  if (digits.startsWith("0")) {
+    return `+98${digits.slice(1)}`;
+  }
+
+  if (digits.length === 10 && digits.startsWith("9")) {
+    return `+98${digits}`;
+  }
+
+  return `+${digits}`;
+}
diff --git a/lib/cropImage.ts b/lib/cropImage.ts
new file mode 100644
index 0000000..27f6803
--- /dev/null
+++ b/lib/cropImage.ts
@@ -0,0 +1,87 @@
+export type Area = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener("load", () => resolve(image));
+    image.addEventListener("error", (error) => reject(error));
+    image.crossOrigin = "anonymous";
+    image.src = src;
+  });
+}
+
+/**
+ * Crop that may extend outside the source image.
+ * Outside pixels stay transparent (PNG) or fillColor (JPEG).
+ */
+export async function getCroppedImageFile(
+  imageSrc: string,
+  pixelCrop: Area,
+  fileName: string,
+  mimeType = "image/jpeg",
+  quality = 0.92,
+  fillColor = "#ffffff",
+): Promise<File> {
+  const image = await loadImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Could not crop image.");
+
+  const outputWidth = Math.max(1, Math.round(pixelCrop.width));
+  const outputHeight = Math.max(1, Math.round(pixelCrop.height));
+  canvas.width = outputWidth;
+  canvas.height = outputHeight;
+
+  if (mimeType !== "image/png") {
+    ctx.fillStyle = fillColor;
+    ctx.fillRect(0, 0, outputWidth, outputHeight);
+  } else {
+    ctx.clearRect(0, 0, outputWidth, outputHeight);
+  }
+
+  const srcX = Math.max(0, pixelCrop.x);
+  const srcY = Math.max(0, pixelCrop.y);
+  const srcRight = Math.min(image.naturalWidth, pixelCrop.x + pixelCrop.width);
+  const srcBottom = Math.min(
+    image.naturalHeight,
+    pixelCrop.y + pixelCrop.height,
+  );
+  const srcWidth = srcRight - srcX;
+  const srcHeight = srcBottom - srcY;
+
+  if (srcWidth > 0 && srcHeight > 0) {
+    const destX = Math.round(srcX - pixelCrop.x);
+    const destY = Math.round(srcY - pixelCrop.y);
+    ctx.drawImage(
+      image,
+      srcX,
+      srcY,
+      srcWidth,
+      srcHeight,
+      destX,
+      destY,
+      srcWidth,
+      srcHeight,
+    );
+  }
+
+  const blob = await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (result) => {
+        if (result) resolve(result);
+        else reject(new Error("Could not export cropped image."));
+      },
+      mimeType,
+      quality,
+    );
+  });
+
+  const base = fileName.replace(/\.[^.]+$/, "") || "image";
+  const extension = mimeType === "image/png" ? "png" : "jpg";
+  return new File([blob], `${base}-cropped.${extension}`, { type: mimeType });
+}
diff --git a/lib/faText.tsx b/lib/faText.tsx
new file mode 100644
index 0000000..dafc8a9
--- /dev/null
+++ b/lib/faText.tsx
@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+
+const ARABIC_SCRIPT = /[\u0600-\u06FF]/;
+
+/** Wrap Persian/Arabic runs in IRANYekan; leave Latin as-is. */
+export function withFaSpans(value: string): ReactNode {
+  if (!value || !ARABIC_SCRIPT.test(value)) return value;
+
+  const parts = value.split(/([\u0600-\u06FF][\u0600-\u06FF\s\u200c]*)/g);
+  return parts.map((part, index) =>
+    ARABIC_SCRIPT.test(part) ? (
+      <span key={index} className="fa" lang="fa" dir="rtl">
+        {part}
+      </span>
+    ) : (
+      part
+    ),
+  );
+}
+
+export function hasArabicScript(value: string | null | undefined) {
+  return Boolean(value && ARABIC_SCRIPT.test(value));
+}
+
+/** Keep phone / E.164 numbers LTR even next to Persian text. */
+export function PhoneLtr({
+  value,
+  className,
+}: {
+  value: string;
+  className?: string;
+}) {
+  return (
+    <span className={className} dir="ltr" lang="en">
+      {value}
+    </span>
+  );
+}
diff --git a/lib/host.ts b/lib/host.ts
new file mode 100644
index 0000000..0bd1c12
--- /dev/null
+++ b/lib/host.ts
@@ -0,0 +1,131 @@
+import type { DashboardType } from "@/types/auth";
+
+export type HostApp = "admin" | "customer" | "business";
+
+const BUSINESS_PREFIX = "business.";
+const CUSTOMER_PREFIX = "customer.";
+
+/** Host without port, lowercased. */
+export function normalizeHost(hostHeader: string | null | undefined): string {
+  if (!hostHeader) return "";
+  return hostHeader.split(":")[0]?.toLowerCase() ?? "";
+}
+
+export function isBusinessHost(hostHeader: string | null | undefined): boolean {
+  const host = normalizeHost(hostHeader);
+  if (!host) return false;
+  if (host === "business.localhost") return true;
+  return host.startsWith(BUSINESS_PREFIX);
+}
+
+export function isCustomerHost(hostHeader: string | null | undefined): boolean {
+  const host = normalizeHost(hostHeader);
+  if (!host) return false;
+  if (host === "customer.localhost") return true;
+  return host.startsWith(CUSTOMER_PREFIX);
+}
+
+export function hostAppFor(hostHeader: string | null | undefined): HostApp {
+  if (isBusinessHost(hostHeader)) return "business";
+  if (isCustomerHost(hostHeader)) return "customer";
+  return "admin";
+}
+
+/** @deprecated Prefer hostAppFor + access checks. */
+export function expectedDashboardForHost(
+  hostHeader: string | null | undefined,
+): DashboardType {
+  const app = hostAppFor(hostHeader);
+  if (app === "business") return "business";
+  if (app === "customer") return "customer";
+  return "super_admin";
+}
+
+function originFromEnv(
+  envValue: string | undefined,
+  fallbackLocal: string,
+  fallbackProd: (root: string) => string,
+): string {
+  const fromEnv = envValue?.replace(/\/$/, "");
+  if (fromEnv) {
+    if (fromEnv.startsWith("http://") || fromEnv.startsWith("https://")) {
+      return fromEnv;
+    }
+    const protocol =
+      fromEnv.includes("localhost") || fromEnv.startsWith("127.")
+        ? "http"
+        : "https";
+    return `${protocol}://${fromEnv}`;
+  }
+
+  const root = process.env.NEXT_PUBLIC_ROOT_DOMAIN || "localhost";
+  if (root === "localhost" || root.startsWith("127.")) {
+    return fallbackLocal;
+  }
+  return fallbackProd(root);
+}
+
+/** Absolute origin for the business dashboard (no trailing slash). */
+export function getBusinessDashboardOrigin(): string {
+  return originFromEnv(
+    process.env.NEXT_PUBLIC_BUSINESS_DASHBOARD_HOST,
+    "http://business.localhost:3002",
+    (root) => `https://business.${root}`,
+  );
+}
+
+/** Absolute origin for the customer dashboard. */
+export function getCustomerDashboardOrigin(): string {
+  return originFromEnv(
+    process.env.NEXT_PUBLIC_CUSTOMER_DASHBOARD_HOST,
+    "http://customer.localhost:3002",
+    (root) => `https://customer.${root}`,
+  );
+}
+
+/** Absolute origin for the superadmin dashboard. */
+export function getAdminDashboardOrigin(): string {
+  return originFromEnv(
+    process.env.NEXT_PUBLIC_ADMIN_DASHBOARD_HOST,
+    "http://localhost:3002",
+    (root) => `https://admin.${root}`,
+  );
+}
+
+/** Map public business URL path → internal /business/* path. */
+export function rewriteBusinessPath(pathname: string): string | null {
+  if (pathname === "/") return "/business";
+  if (pathname === "/login") return "/login";
+  if (pathname === "/forgot-password") return "/forgot-password";
+  if (pathname === "/auth/handoff") return "/auth/handoff";
+
+  const known = [
+    "/profile",
+    "/products",
+    "/blog",
+    "/portfolios",
+    "/gallery",
+  ] as const;
+
+  for (const path of known) {
+    if (pathname === path || pathname.startsWith(`${path}/`)) {
+      return `/business${pathname}`;
+    }
+  }
+
+  return null;
+}
+
+/** Map public customer URL path → internal /customer/* path. */
+export function rewriteCustomerPath(pathname: string): string | null {
+  if (pathname === "/") return "/customer";
+  if (pathname === "/login") return "/login";
+  if (pathname === "/forgot-password") return "/forgot-password";
+  if (pathname === "/auth/handoff") return "/auth/handoff";
+
+  if (pathname === "/profile" || pathname.startsWith("/profile/")) {
+    return `/customer${pathname}`;
+  }
+
+  return null;
+}
diff --git a/lib/i18n/en.ts b/lib/i18n/en.ts
new file mode 100644
index 0000000..9d18334
--- /dev/null
+++ b/lib/i18n/en.ts
@@ -0,0 +1,106 @@
+export const en = {
+  brandName: "IranBay",
+  brandSubtitle: "Business",
+  customerBrandSubtitle: "Account",
+  workspaceEyebrow: "Business workspace",
+  workspaceHint: "Manage your catalog",
+  customerEyebrow: "Customer workspace",
+  customerHint: "Your account",
+  viewWebsite: "View website",
+  openBusinessDashboard: "Business dashboard",
+  openCustomerDashboard: "Customer dashboard",
+  openAdminDashboard: "Admin dashboard",
+  logOut: "Log out",
+  loading: "Loading",
+  nav: {
+    home: "Home",
+    profile: "Profile",
+    products: "Products",
+    blog: "Blog",
+    portfolios: "Portfolios",
+    gallery: "Gallery",
+  },
+  customerHome: {
+    title: "Welcome",
+    lead: "Manage your account from here.",
+    businessCta: "Open business dashboard",
+    businessLead: "You own a business on IranBay.",
+    adminCta: "Open admin dashboard",
+    adminLead: "Review marketplace listings and approve new shops.",
+  },
+  customerProfile: {
+    title: "Profile",
+    lead: "Your account details.",
+    phone: "Phone",
+    email: "Email",
+    name: "Name",
+    emptyEmail: "Not set",
+  },
+  profile: {
+    title: "Profile",
+    lead: "Update how your business appears on Meshkee.",
+  },
+  products: {
+    title: "Products",
+    lead: "Your product catalog.",
+    empty: "No products yet.",
+    emptyLead: "Add your first product to start building the catalog.",
+    emptyFiltered: "Nothing in this category.",
+    emptyFilteredLead: "Try another category, or add a product here.",
+    add: "Add product",
+    addTitle: "Add product",
+    addLead: "Create a product like in Meshkee CMS.",
+    manageCategories: "Manage categories",
+    categoriesTitle: "Product categories",
+    categoriesLead: "Organize products the same way as Meshkee CMS.",
+  },
+  blog: {
+    title: "Blog",
+    lead: "Articles and updates.",
+    empty: "No blog posts yet.",
+    emptyLead: "Publish your first article, news piece, or blog post.",
+    add: "Add post",
+    addTitle: "Add blog post",
+    addLead: "Create a post like in Meshkee CMS.",
+    manageCategories: "Manage categories",
+    categoriesTitle: "Blog categories",
+    categoriesLead: "Organize posts the same way as Meshkee CMS.",
+  },
+  portfolios: {
+    title: "Portfolios",
+    lead: "Project showcases.",
+    empty: "No portfolios yet.",
+    emptyLead: "Showcase a project with images, story, and links.",
+    add: "Add portfolio",
+    addTitle: "Add portfolio",
+    addLead: "Create a portfolio like in Meshkee CMS.",
+    manageCategories: "Manage categories",
+    categoriesTitle: "Portfolio categories",
+    categoriesLead: "Organize portfolios the same way as Meshkee CMS.",
+  },
+  gallery: {
+    title: "Gallery",
+    lead: "Upload and arrange images for your business.",
+    empty: "No gallery images yet.",
+    emptyLead: "Drop images above, or browse files to fill the gallery.",
+    dropTitle: "Drop images here",
+    dropHint: "or click to browse — JPG, PNG, WebP, GIF",
+    uploading: "Uploading…",
+    add: "Add images",
+  },
+  common: {
+    edit: "Edit",
+    remove: "Remove",
+    all: "All",
+    allInCategory: "All in category",
+    prev: "Prev",
+    next: "Next",
+    comingSoon: "Edit coming soon",
+  },
+} as const;
+
+export type EnMessages = typeof en;
+
+export function t(): EnMessages {
+  return en;
+}
diff --git a/lib/managed-business.ts b/lib/managed-business.ts
new file mode 100644
index 0000000..c1f4903
--- /dev/null
+++ b/lib/managed-business.ts
@@ -0,0 +1,29 @@
+const MANAGED_BUSINESS_KEY = "marketplace_managed_business_id";
+
+/**
+ * Superadmin-only: which Meshkee business is open on the shared business.* host.
+ * Regular business users ignore this and use `user.businesses` instead.
+ */
+export function getManagedBusinessId(): string | null {
+  if (typeof window === "undefined") return null;
+  return (
+    sessionStorage.getItem(MANAGED_BUSINESS_KEY) ||
+    localStorage.getItem(MANAGED_BUSINESS_KEY)
+  );
+}
+
+export function setManagedBusinessId(businessId: string | null) {
+  if (typeof window === "undefined") return;
+  if (!businessId) {
+    sessionStorage.removeItem(MANAGED_BUSINESS_KEY);
+    localStorage.removeItem(MANAGED_BUSINESS_KEY);
+    return;
+  }
+  const id = String(businessId);
+  sessionStorage.setItem(MANAGED_BUSINESS_KEY, id);
+  localStorage.setItem(MANAGED_BUSINESS_KEY, id);
+}
+
+export function clearManagedBusinessId() {
+  setManagedBusinessId(null);
+}
diff --git a/lib/meshkee-api.ts b/lib/meshkee-api.ts
new file mode 100644
index 0000000..b1d55f8
--- /dev/null
+++ b/lib/meshkee-api.ts
@@ -0,0 +1,185 @@
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_MESHKEE_API_URL?.replace(/\/$/, "") ||
+  "http://localhost:3010/api/v1";
+
+const ACCESS_TOKEN_KEY = "marketplace_access_token";
+const REFRESH_TOKEN_KEY = "marketplace_refresh_token";
+const TOKEN_MAX_AGE_SEC = 60 * 60 * 24 * 14; // 14 days
+
+export class ApiError extends Error {
+  status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = "ApiError";
+    this.status = status;
+  }
+}
+
+export function isAbortError(err: unknown): boolean {
+  return err instanceof DOMException && err.name === "AbortError";
+}
+
+/** Share cookies across admin / customer / business hosts on the same root. */
+function cookieDomain(): string | undefined {
+  const root = (process.env.NEXT_PUBLIC_ROOT_DOMAIN || "localhost").trim();
+  if (!root || root === "localhost" || root.startsWith("127.")) {
+    return "localhost";
+  }
+  return root.startsWith(".") ? root : `.${root}`;
+}
+
+function readCookie(name: string): string | null {
+  if (typeof document === "undefined") return null;
+  const prefix = `${name}=`;
+  for (const part of document.cookie.split(";")) {
+    const trimmed = part.trim();
+    if (trimmed.startsWith(prefix)) {
+      return decodeURIComponent(trimmed.slice(prefix.length));
+    }
+  }
+  return null;
+}
+
+function writeCookie(name: string, value: string) {
+  if (typeof document === "undefined") return;
+  const domain = cookieDomain();
+  const secure =
+    typeof window !== "undefined" && window.location.protocol === "https:"
+      ? "; Secure"
+      : "";
+  document.cookie = `${name}=${encodeURIComponent(value)}; Path=/; Max-Age=${TOKEN_MAX_AGE_SEC}; SameSite=Lax; Domain=${domain}${secure}`;
+}
+
+function deleteCookie(name: string) {
+  if (typeof document === "undefined") return;
+  const domain = cookieDomain();
+  document.cookie = `${name}=; Path=/; Max-Age=0; SameSite=Lax; Domain=${domain}`;
+}
+
+export function getAccessToken() {
+  if (typeof window === "undefined") return null;
+  return (
+    readCookie(ACCESS_TOKEN_KEY) || localStorage.getItem(ACCESS_TOKEN_KEY)
+  );
+}
+
+export function getRefreshToken() {
+  if (typeof window === "undefined") return null;
+  return (
+    readCookie(REFRESH_TOKEN_KEY) || localStorage.getItem(REFRESH_TOKEN_KEY)
+  );
+}
+
+export function setTokens(accessToken: string, refreshToken: string) {
+  localStorage.setItem(ACCESS_TOKEN_KEY, accessToken);
+  localStorage.setItem(REFRESH_TOKEN_KEY, refreshToken);
+  writeCookie(ACCESS_TOKEN_KEY, accessToken);
+  writeCookie(REFRESH_TOKEN_KEY, refreshToken);
+}
+
+export function clearTokens() {
+  localStorage.removeItem(ACCESS_TOKEN_KEY);
+  localStorage.removeItem(REFRESH_TOKEN_KEY);
+  deleteCookie(ACCESS_TOKEN_KEY);
+  deleteCookie(REFRESH_TOKEN_KEY);
+}
+
+/** Promote existing localStorage sessions into shared cookies (once per load). */
+export function migrateTokensToSharedCookies() {
+  if (typeof window === "undefined") return;
+  const access = localStorage.getItem(ACCESS_TOKEN_KEY);
+  const refresh = localStorage.getItem(REFRESH_TOKEN_KEY);
+  if (access && refresh && !readCookie(ACCESS_TOKEN_KEY)) {
+    writeCookie(ACCESS_TOKEN_KEY, access);
+    writeCookie(REFRESH_TOKEN_KEY, refresh);
+  }
+}
+
+function parseErrorMessage(payload: unknown, fallback: string) {
+  if (!payload || typeof payload !== "object") {
+    return fallback;
+  }
+
+  const message = (payload as { message?: string | string[] }).message;
+
+  if (Array.isArray(message)) {
+    return message.join(", ");
+  }
+
+  if (typeof message === "string") {
+    return message;
+  }
+
+  return fallback;
+}
+
+async function refreshAccessToken() {
+  const refreshToken = getRefreshToken();
+  if (!refreshToken) {
+    return false;
+  }
+
+  const response = await fetch(`${API_BASE_URL}/auth/refresh`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ refreshToken }),
+  });
+
+  if (!response.ok) {
+    clearTokens();
+    return false;
+  }
+
+  const data = await response.json();
+  setTokens(data.accessToken, data.refreshToken);
+  return true;
+}
+
+interface RequestOptions extends Omit<RequestInit, "body"> {
+  body?: unknown;
+  auth?: boolean;
+}
+
+export async function apiRequest<T>(
+  path: string,
+  options: RequestOptions = {},
+): Promise<T> {
+  const { body, auth = false, headers, ...rest } = options;
+  const requestHeaders = new Headers(headers);
+
+  if (body !== undefined) {
+    requestHeaders.set("Content-Type", "application/json");
+  }
+
+  if (auth) {
+    const accessToken = getAccessToken();
+    if (accessToken) {
+      requestHeaders.set("Authorization", `Bearer ${accessToken}`);
+    }
+  }
+
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    ...rest,
+    headers: requestHeaders,
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+
+  if (response.status === 401 && auth) {
+    const refreshed = await refreshAccessToken();
+    if (refreshed) {
+      return apiRequest<T>(path, options);
+    }
+  }
+
+  const payload = await response.json().catch(() => null);
+
+  if (!response.ok) {
+    throw new ApiError(
+      parseErrorMessage(payload, `Request failed with status ${response.status}`),
+      response.status,
+    );
+  }
+
+  return payload as T;
+}
diff --git a/lib/session-handoff.ts b/lib/session-handoff.ts
new file mode 100644
index 0000000..45d48a0
--- /dev/null
+++ b/lib/session-handoff.ts
@@ -0,0 +1,100 @@
+import {
+  getAccessToken,
+  getRefreshToken,
+  setTokens,
+} from "@/lib/meshkee-api";
+import {
+  getBusinessDashboardOrigin,
+  getCustomerDashboardOrigin,
+} from "@/lib/host";
+import {
+  clearManagedBusinessId,
+  setManagedBusinessId,
+} from "@/lib/managed-business";
+
+/**
+ * Superadmin “Manage business” — same origin as admin (no subdomain bounce).
+ * Example: /manage/{meshkeeBusinessId}/profile
+ */
+export function openBusinessDashboardAsAdmin(
+  meshkeeBusinessId: string,
+  nextPath = "/profile",
+) {
+  const id = meshkeeBusinessId.trim();
+  if (!id) return;
+
+  setManagedBusinessId(id);
+
+  const path = nextPath.startsWith("/") ? nextPath : `/${nextPath}`;
+  const suffix = path === "/" ? "/profile" : path;
+  window.location.assign(`/manage/${encodeURIComponent(id)}${suffix}`);
+}
+
+/**
+ * Business owner / staff → business.* host from their account.
+ */
+export function openBusinessDashboardAsUser(nextPath = "/profile") {
+  const access = getAccessToken();
+  const refresh = getRefreshToken();
+  if (!access || !refresh) {
+    window.location.assign(`${getCustomerDashboardOrigin()}/login`);
+    return;
+  }
+
+  setTokens(access, refresh);
+  clearManagedBusinessId();
+
+  const next = nextPath.startsWith("/") ? nextPath : `/${nextPath}`;
+  const hash = new URLSearchParams({
+    access,
+    refresh,
+    next,
+    clearManaged: "1",
+  }).toString();
+
+  window.location.assign(
+    `${getBusinessDashboardOrigin()}/auth/handoff#${hash}`,
+  );
+}
+
+export function businessDashboardHrefForUser(nextPath = "/profile"): string {
+  const next = nextPath.startsWith("/") ? nextPath : `/${nextPath}`;
+  const access = getAccessToken();
+  const refresh = getRefreshToken();
+  if (!access || !refresh) {
+    return `${getCustomerDashboardOrigin()}/login`;
+  }
+  const hash = new URLSearchParams({
+    access,
+    refresh,
+    next,
+    clearManaged: "1",
+  }).toString();
+  return `${getBusinessDashboardOrigin()}/auth/handoff#${hash}`;
+}
+
+export function businessDashboardHrefForAdmin(
+  meshkeeBusinessId: string,
+  nextPath = "/profile",
+): string {
+  const id = meshkeeBusinessId.trim();
+  if (!id) return "/businesses";
+  const path = nextPath.startsWith("/") ? nextPath : `/${nextPath}`;
+  const suffix = path === "/" ? "/profile" : path;
+  return `/manage/${encodeURIComponent(id)}${suffix}`;
+}
+
+export function customerDashboardHref(nextPath = "/"): string {
+  const next = nextPath.startsWith("/") ? nextPath : `/${nextPath}`;
+  const access = getAccessToken();
+  const refresh = getRefreshToken();
+  if (!access || !refresh) {
+    return `${getCustomerDashboardOrigin()}${next}`;
+  }
+  const hash = new URLSearchParams({
+    access,
+    refresh,
+    next,
+  }).toString();
+  return `${getCustomerDashboardOrigin()}/auth/handoff#${hash}`;
+}
diff --git a/lib/userName.ts b/lib/userName.ts
new file mode 100644
index 0000000..1e9d1f1
--- /dev/null
+++ b/lib/userName.ts
@@ -0,0 +1,28 @@
+import type { AuthUser } from "@/types/auth";
+
+/** Prefer Meshkee English name fields; fall back to cell. */
+export function getDisplayName(user: AuthUser | null | undefined): string {
+  if (!user) return "Admin";
+
+  const english = [user.firstNameEn, user.lastNameEn]
+    .filter(Boolean)
+    .join(" ")
+    .trim();
+  if (english) return english;
+
+  const local = [user.firstName, user.lastName].filter(Boolean).join(" ").trim();
+  if (local && !/[\u0600-\u06FF]/.test(local)) return local;
+
+  return user.cellNumber || "User";
+}
+
+export function getFirstName(user: AuthUser | null | undefined): string {
+  if (!user) return "there";
+  const raw =
+    user.firstNameEn?.trim() ||
+    (user.firstName?.trim() && !/[\u0600-\u06FF]/.test(user.firstName)
+      ? user.firstName.trim()
+      : "");
+  if (!raw) return "there";
+  return raw.split(/\s+/)[0] || raw;
+}
diff --git a/middleware.ts b/middleware.ts
new file mode 100644
index 0000000..b131762
--- /dev/null
+++ b/middleware.ts
@@ -0,0 +1,112 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import {
+  getCustomerDashboardOrigin,
+  hostAppFor,
+  rewriteBusinessPath,
+  rewriteCustomerPath,
+} from "@/lib/host";
+
+function isAuthPublicPath(pathname: string) {
+  return (
+    pathname === "/login" ||
+    pathname === "/forgot-password" ||
+    pathname === "/auth/handoff"
+  );
+}
+
+export function middleware(request: NextRequest) {
+  const host = request.headers.get("host");
+  const { pathname } = request.nextUrl;
+  const app = hostAppFor(host);
+
+  if (app === "admin") {
+    if (
+      pathname === "/business" ||
+      pathname.startsWith("/business/") ||
+      pathname === "/customer" ||
+      pathname.startsWith("/customer/")
+    ) {
+      const url = request.nextUrl.clone();
+      url.pathname = "/";
+      return NextResponse.redirect(url);
+    }
+    return NextResponse.next();
+  }
+
+  if (app === "customer") {
+    if (pathname === "/businesses" || pathname.startsWith("/businesses/")) {
+      const url = request.nextUrl.clone();
+      url.pathname = "/";
+      return NextResponse.redirect(url);
+    }
+    if (pathname === "/business" || pathname.startsWith("/business/")) {
+      const url = request.nextUrl.clone();
+      url.pathname = "/";
+      return NextResponse.redirect(url);
+    }
+    if (pathname === "/customer" || pathname.startsWith("/customer/")) {
+      return NextResponse.next();
+    }
+    if (isAuthPublicPath(pathname)) {
+      return NextResponse.next();
+    }
+
+    const target = rewriteCustomerPath(pathname);
+    if (target) {
+      if (target === pathname) return NextResponse.next();
+      const url = request.nextUrl.clone();
+      url.pathname = target;
+      return NextResponse.rewrite(url);
+    }
+
+    const url = request.nextUrl.clone();
+    url.pathname = "/";
+    return NextResponse.redirect(url);
+  }
+
+  // Business host
+  if (pathname === "/businesses" || pathname.startsWith("/businesses/")) {
+    const url = request.nextUrl.clone();
+    url.pathname = "/profile";
+    return NextResponse.redirect(url);
+  }
+
+  if (pathname === "/customer" || pathname.startsWith("/customer/")) {
+    const url = request.nextUrl.clone();
+    url.pathname = "/profile";
+    return NextResponse.redirect(url);
+  }
+
+  // Shared login lives on the customer host.
+  if (pathname === "/login" || pathname === "/forgot-password") {
+    const url = new URL(pathname, `${getCustomerDashboardOrigin()}/`);
+    return NextResponse.redirect(url);
+  }
+
+  if (pathname === "/business" || pathname.startsWith("/business/")) {
+    return NextResponse.next();
+  }
+
+  if (pathname === "/auth/handoff") {
+    return NextResponse.next();
+  }
+
+  const target = rewriteBusinessPath(pathname);
+  if (target) {
+    if (target === pathname) return NextResponse.next();
+    const url = request.nextUrl.clone();
+    url.pathname = target;
+    return NextResponse.rewrite(url);
+  }
+
+  const url = request.nextUrl.clone();
+  url.pathname = "/profile";
+  return NextResponse.redirect(url);
+}
+
+export const config = {
+  matcher: [
+    "/((?!_next/static|_next/image|favicon.ico|images/|fonts/).*)",
+  ],
+};
diff --git a/next.config.ts b/next.config.ts
new file mode 100644
index 0000000..e9ffa30
--- /dev/null
+++ b/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..6a9ca48
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,5469 @@
+{
+  "name": "iranbay-dashboard",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "iranbay-dashboard",
+      "version": "0.1.0",
+      "dependencies": {
+        "next": "16.3.4",
+        "react": "19.2.8",
+        "react-dom": "19.2.8",
+        "react-easy-crop": "^6.2.3"
+      },
+      "devDependencies": {
+        "@types/node": "^20",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "eslint": "^9",
+        "eslint-config-next": "16.3.4",
+        "typescript": "^5"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.7",
+        "@babel/helper-compilation-targets": "^7.29.7",
+        "@babel/helper-module-transforms": "^7.29.7",
+        "@babel/helpers": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/template": "^7.29.7",
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.29.8",
+        "@babel/types": "^7.29.8",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.29.7",
+        "@babel/helper-validator-option": "^7.29.7",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7",
+        "@babel/traverse": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.29.8"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.29.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/parser": "^7.29.7",
+        "@babel/types": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.29.7",
+        "@babel/generator": "^7.29.8",
+        "@babel/helper-globals": "^7.29.7",
+        "@babel/parser": "^7.29.8",
+        "@babel/template": "^7.29.7",
+        "@babel/types": "^7.29.8",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.29.7",
+        "@babel/helper-validator-identifier": "^7.29.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
+      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.11.3",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.10.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.2",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.5"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.14.0",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.3.2",
+        "minimatch": "^3.1.5",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.5",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.2",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/types": "^0.15.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.8",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.2",
+        "@humanfs/types": "^0.15.0",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/types": {
+      "version": "0.15.0",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@img/colour": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.35.4",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.35.4.tgz",
+      "integrity": "sha512-hWniXY3bG5qKpkKrAwPe4y+VTPmf086YQAnkxWh7uA1YrlRouWGa0M0Mxj3ZjnXFkv7/TD1bTy9lGUK26vRvWw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-freebsd-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-freebsd-wasm32/-/sharp-freebsd-wasm32-0.35.4.tgz",
+      "integrity": "sha512-lIsKw/BU+kjB4eZjxrYrZmwOJYi3Ajrv66iAlBmUPyKc3HpnloevB1g3wxGD9P/5BbQ1brBGl65VRRrCvQDEqA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.4"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.3.3",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.3.3.tgz",
+      "integrity": "sha512-FVJZ5mITMobmXIz/hPDTw0EintTW5H3WfrxwLqEqjiIihlu+hVRyGrFQ60xl0Lxn7Bt3zdpevPaQi0HEzqz9fw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.3.3.tgz",
+      "integrity": "sha512-3rbU4vqXXc3hY/OiXdl52xZvT0F1yEngWfvqudtPJg/KkyiaQw2DRsFrNzpmLvfavbwOq3qXn36GP8obHRULQA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.3.3.tgz",
+      "integrity": "sha512-0DaL0A6Xu6sQSQFwe4iVCrKWU2cCTItnRsYsCdxAMm9NF6twAA9BKnoqy4hqz4+azQ0JHuA26qiUKsf1XJ/v5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.3.3.tgz",
+      "integrity": "sha512-cdn1OvUBwsXhbC0zSzJnNzf5MZ/mTrobawDvNXBTxe8VtqKAm0sRuEY2Evzovb/w9JMk4TvRxqt1mekSuJz64w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.3.3.tgz",
+      "integrity": "sha512-HjPVx7yKz+0lqdhDlTw1tt90wamBoxhiXpvl1XZpJLiHH4RCJ5yDTqH+VlYPv2fwFs89JFw4c1IexYOcQUi4IQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.3.3.tgz",
+      "integrity": "sha512-neWLh+3yCNThxnfy3c4BbVBeGgt9aftno+XbT56iK28RgeDs3UOFWviLWlUu0bArYVYJaFDK+RRohbicUNCm8Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.3.3.tgz",
+      "integrity": "sha512-4vKmvAst9nrowcqquKFAyZJUDolUaIp8uRiN0mWFguJ1IplC9/pitXtlnnlU4aa/eJw3J7i67V+pwUL+wZGdsA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.3.3.tgz",
+      "integrity": "sha512-Y9kQaLMuNoB0bPYOOdcZMaseNrFpPodIWWMrx+CZyydf2xn68j9WYc6sWWRrDwNkzCQjKYfc68L7jKjGlHMibw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.3.3.tgz",
+      "integrity": "sha512-fj8Mv0HHfD1Rr+4I68+3agJynxDWtBFgicTbSOb9Bke6pIwzGcJ+RX/yHjmiEGFMCavY/dxvem7MyNaJF+wDiw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.35.4.tgz",
+      "integrity": "sha512-7OAS8gI0EReKGVN2HssHlM6umJgxF5VI3xN0p9FA91p/YO+ou5hiNghLdZ5BEHztwaaK5+bLKRf8x/o2L2nk9A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.35.4.tgz",
+      "integrity": "sha512-De4jpEnAU8Hd5oT0j1G3uL4ZvTuipVMn7YC6vPaJhy6/7EwEae0SVAoBrUMYQbkLGDm85taVWwuPc1a44LTzCQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.35.4.tgz",
+      "integrity": "sha512-2oYZJeIl4kCcMGk4ouZVjnkCtFrpQFlNEtJ6GbxzhHQchwH0NH/qEb9ykmOl29dqwMq+JhFdZn+1ak2FKhI9fQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.35.4.tgz",
+      "integrity": "sha512-cPbNChoRURAWdebDIHSenxRpgEdy7JkPydSnUxRm9VvKD7m0/xVaR/8Fzlu81pk5nHEvHH87UZUA7cTtwnbJSA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.35.4.tgz",
+      "integrity": "sha512-RY0JFY8Fd6RonCBtHz+DvadaPkXDSI1AUn6yWL9TipqkZ1vY8w8evqdgyDFnkm4/K1ve1TvZiaePP5oSd4+WVQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.35.4.tgz",
+      "integrity": "sha512-9qvvEAuk8k89TfWUoX2htWjbAMX8p+NxCppjpcg5k6xMsjhBQPTsoIh36h9Qde4WRuGpJeYnOjdosDn/cnv+OA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.35.4.tgz",
+      "integrity": "sha512-KB5jxpfWQTr0nc3xdHtWChdbifHrBGsd2SM62Eyxrl8afikm+f5qGBU75SJIZBT/S1MC8XyacdlXBMSWq6OURA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.35.4.tgz",
+      "integrity": "sha512-f+eZJZIQNEEd26RPSW+76chwOf1XtA2Y/O+5ocVyLliHkeih3e+jhLVBdNTd2rS3IbNXK8+ug93Vf5ZXtF5Lxg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.3"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.35.4",
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.11.3"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-webcontainers-wasm32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-webcontainers-wasm32/-/sharp-webcontainers-wasm32-0.35.4.tgz",
+      "integrity": "sha512-ESfNkywmCfPNyaZjxooddJQiQ+l/nTpGEOGthxiLnIHXC/CmcBixnfwUleX9mCz9ovrUUvKMap/pm8RYbzfwaA==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/sharp-wasm32": "0.35.4"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.35.4.tgz",
+      "integrity": "sha512-iNdlBX9gLVvqe2I3uIJSIKTq6wckP/DYxZtcqxm09x5Gi24DnFBmPAWZmr60ZyYMG0xlzo6goG3670ar+RXvRw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.35.4.tgz",
+      "integrity": "sha512-kqRsbaa5CS6KHlpxnN7WhE6vAAugXyZButpRdvDWetlv6Qv4N9WTcrWzF7tXfB9T7MsoadqdI8hmwLq6UlLvtw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.35.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.35.4.tgz",
+      "integrity": "sha512-XtmnYhBcrORsJ4XJngyzr/EWP0hRZLAZRFaApdKuviyqF78+ylxh2y06ZmtULAMOnObJ3ucpN0AcwSWnMowTRg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.6.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.2.3.tgz",
+      "integrity": "sha512-UMduMbqO5s5zF2NkNacMT/yK5Y5QiKvWr2+50bzIIxFDwVJ2h49b+oyjaCGPhJxd2/gC2x39EHv/gHVuu36x2Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.3"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=23.5.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1 || ^2.0.0-alpha.4",
+        "@emnapi/runtime": "^1.7.1 || ^2.0.0-alpha.4"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "16.3.4",
+      "license": "MIT"
+    },
+    "node_modules/@next/eslint-plugin-next": {
+      "version": "16.3.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "4.9.1",
+        "fast-glob": "3.3.1"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@next/eslint-plugin-next/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "16.3.4",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.3.4.tgz",
+      "integrity": "sha512-2dpiSyl2Jw/NrBPaU2MAKGSa+2MR82pJIn4Sm5Rjr+gxAeuh0z158Su3Z2O8zn7UNNq+ej4bToed6RcRN/Lydg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.3.4.tgz",
+      "integrity": "sha512-+t+U8HZT+fApePCS5h89CSH3datz29MkzyfCn+6fpsZBG/oiEOhINcb9rtkv6sdpToLGFn2e6146NzaKCXkqrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.3.4.tgz",
+      "integrity": "sha512-mx03GNs1ocQA5JQ4FxDMmIsNkdrZh8cuezKCrId28e5/gIPU/l7Kcy2+vmCCzdjnnmXJy+iOAu+7K0QppO6Urg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.3.4.tgz",
+      "integrity": "sha512-YIhGY6fSMfha52bnVxnzc9zaVBzJg+cqQTOD8tXIBSx4fuv0pVMxQTE0PaS59YhnMOiYiG09IMwxJAf/CFm/Dw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.3.4.tgz",
+      "integrity": "sha512-+eaaX6axpDb0yF1GCpiERe6njplvdC+nks/fKfcHu3XPGRrald8P3/X7yv7QLdjA51knnxwl9pxdIJsg+w1L+Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.3.4.tgz",
+      "integrity": "sha512-0jcXW7Xs/uzICrmgV3MhDYDeRy++1CqnpDIerlPIqYO4bhzB4WNbX/aRnQclustsAyTkFKB0z6rbcjmNg5tR8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "16.3.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.3.4.tgz",
+      "integrity": "sha512-vvBzwu1pYQCp92maZCFCIw/XgOTMR5tur9GjakwIo2cmwRTMKajRZZDS9+e4KsUZWKu1E007WUeAFXRRjZeuzw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz",
+      "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.43",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.3.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.3.0",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.3.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.70.0",
+        "@typescript-eslint/type-utils": "8.70.0",
+        "@typescript-eslint/utils": "8.70.0",
+        "@typescript-eslint/visitor-keys": "8.70.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.70.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.9",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.70.0",
+        "@typescript-eslint/types": "8.70.0",
+        "@typescript-eslint/typescript-estree": "8.70.0",
+        "@typescript-eslint/visitor-keys": "8.70.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.70.0",
+        "@typescript-eslint/types": "^8.70.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.70.0",
+        "@typescript-eslint/visitor-keys": "8.70.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.70.0",
+        "@typescript-eslint/typescript-estree": "8.70.0",
+        "@typescript-eslint/utils": "8.70.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.70.0",
+        "@typescript-eslint/tsconfig-utils": "8.70.0",
+        "@typescript-eslint/types": "8.70.0",
+        "@typescript-eslint/visitor-keys": "8.70.0",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.5.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/balanced-match": {
+      "version": "4.0.4",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "18 || 20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "5.0.9",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^4.0.2"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "10.2.6",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "brace-expansion": "^5.0.8"
+      },
+      "engines": {
+        "node": "18 || 20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.8.5",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.70.0",
+        "@typescript-eslint/types": "8.70.0",
+        "@typescript-eslint/typescript-estree": "8.70.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.70.0",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-android-arm-eabi": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm-eabi/-/resolver-binding-android-arm-eabi-1.12.2.tgz",
+      "integrity": "sha512-g5T90pqg1bo/7mytQx6F4iBNC0Wsh9cu+z9veDbFjc7HjpesJFWD7QMS0NGStXM075+7dJPPVvBbpZlnrdpi/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-android-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-android-arm64/-/resolver-binding-android-arm64-1.12.2.tgz",
+      "integrity": "sha512-YGCRZv/9GLhwmz6mYDeTsm/92BAyR28l6c2ReweVW5pWgfsitWLY8upvfRlGdoyD8HjeTHSYJWyZGD4KJA/nFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-arm64": {
+      "version": "1.12.2",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-darwin-x64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-darwin-x64/-/resolver-binding-darwin-x64-1.12.2.tgz",
+      "integrity": "sha512-f7rPLi/T1HVKZu/u6t87lroib16n8vrSzcyxI7lg4BGO9UF26KhQL44sd9eOUgrTYhvRXtWOIZT5PejdPyJfUA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-freebsd-x64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-freebsd-x64/-/resolver-binding-freebsd-x64-1.12.2.tgz",
+      "integrity": "sha512-BpcOjWCJub6nRZUS2zA20pmLvjtqAtGejETaIyRLiZiQf++cbrjltLA5NN/xaXfqeOBOSlMFbemIl5/S5tljmg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-gnueabihf": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-gnueabihf/-/resolver-binding-linux-arm-gnueabihf-1.12.2.tgz",
+      "integrity": "sha512-vZTDvdSISZjJx66OzJqtsOhzifbqRjbmI1Mnu49fQDwog5GtDI4QidRiEAYbZCRj9C8YZEW+3ZjqsyS9GR4k2A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm-musleabihf": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm-musleabihf/-/resolver-binding-linux-arm-musleabihf-1.12.2.tgz",
+      "integrity": "sha512-BiPI+IrIlwcW4nLLMM21+B1dFPzd55yAVgVGrdgDjNef+ch03GdxrcyaIz8X9SsQirh/kCQ7mviyWlMxdh2D7g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-gnu/-/resolver-binding-linux-arm64-gnu-1.12.2.tgz",
+      "integrity": "sha512-zJc0H99FEPoFfSrNpa91HYfxzfAJCr502oxNK1cfdC9hlaFI43RT+JFCann9JUgZmLzzntChHyn13Sgn9ljHNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-arm64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-arm64-musl/-/resolver-binding-linux-arm64-musl-1.12.2.tgz",
+      "integrity": "sha512-KQ3Lki6l+Pz1k/eBipN41ES+YUK30beLGb9YqcB1O542cyLCNE6GaxrfcY3T6EezmGGk84wb5XyO9loTM9tkcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-loong64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-gnu/-/resolver-binding-linux-loong64-gnu-1.12.2.tgz",
+      "integrity": "sha512-3SJGEh1DborhG6pyxvhPzCT4bbSIVihsvgJc13P1bHG7KLdNDaF9T3gsTwFc7Jw/5Y5/iWOjkEx7Zy0NvCGX3Q==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-loong64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-loong64-musl/-/resolver-binding-linux-loong64-musl-1.12.2.tgz",
+      "integrity": "sha512-jiuG/Obbel7uw1PwHNFfrkiKhLAF6mnyZ6aWlOAVN9WqKm8v0OFGnciJIHu8+CMvXLQ8AD51LPzAoUfT21D5Ew==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-ppc64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-ppc64-gnu/-/resolver-binding-linux-ppc64-gnu-1.12.2.tgz",
+      "integrity": "sha512-q7xRvVpmcfeL+LlZg8Pbbo6QaTZwDU5BaGZbwfhkEsXJn3Was8xYfE0RBH266xZt0rM6B7i8xAYIvjthuUIWHg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-gnu/-/resolver-binding-linux-riscv64-gnu-1.12.2.tgz",
+      "integrity": "sha512-0CVdx6lcnT3Q9inOH8tsMIOJ6ImndllMjqJHg8RLVdB7Vq4SfkEXl9mCSsVNuNA4MCYycRicCUxPCabVHJRr6A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-riscv64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-riscv64-musl/-/resolver-binding-linux-riscv64-musl-1.12.2.tgz",
+      "integrity": "sha512-iOwlRo9vnp6R6ohHQS11n0NnfdXx/omhkocmIfaPRpQhKZ+3BDMkkdRVh53qjkFkpPddf+FETA28NwGN7l5l+w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-s390x-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-s390x-gnu/-/resolver-binding-linux-s390x-gnu-1.12.2.tgz",
+      "integrity": "sha512-HYJtLfXq94q8iZNFT1lknx258wlkkWhZeUXJRqzKBBUJ00CvZ+N33zgbCqimLjsyw5Va6uUxhVa12mI+kaveEw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-gnu": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-gnu/-/resolver-binding-linux-x64-gnu-1.12.2.tgz",
+      "integrity": "sha512-mPsUhunKKDih5O96Y6enDQyHc1SqBPlY1E/SfMWDM3EdJ95Z9CArPeCVwCCqbP45ljvivdEk8Fxn+SIb1rDAJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-linux-x64-musl": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-linux-x64-musl/-/resolver-binding-linux-x64-musl-1.12.2.tgz",
+      "integrity": "sha512-azrt6+5ydLd8Vt210AAFis/lZevSfPw93EJRIJG+xPu4WCJ8K0kppCTpMyLPcKT7H15M4Jnt2tMp5bOvCkRC6A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-openharmony-arm64": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-openharmony-arm64/-/resolver-binding-openharmony-arm64-1.12.2.tgz",
+      "integrity": "sha512-YZ9hP4O0X9PQb8eO980qmLNGH4zT3I9+SZTdt0Pr0YyuGQhYKoOZkV02VzrzyOZJ5xIJ3UFIenKkUkGg8GjgWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-wasm32-wasi/-/resolver-binding-wasm32-wasi-1.12.2.tgz",
+      "integrity": "sha512-tYFDIkMxSflfEc/h92ZWNsZlHSwgimbNHSO3PL2JWQHfCuC2q316jMyYU9TIWZsFK2bQwyK5VAdYgn8ygPj69A==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.10.0",
+        "@emnapi/runtime": "1.10.0",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-wasm32-wasi/node_modules/@emnapi/runtime": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
+      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@unrs/resolver-binding-win32-arm64-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-arm64-msvc/-/resolver-binding-win32-arm64-msvc-1.12.2.tgz",
+      "integrity": "sha512-qzNyg3xL0VPQmCaUh+N5jSitce6k+uCBfMDesWRnlULOZaqUkaJ0ybdT+UqlAWJoQjuqfIU/0Ptx9bteN4D82g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-ia32-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-ia32-msvc/-/resolver-binding-win32-ia32-msvc-1.12.2.tgz",
+      "integrity": "sha512-WD9sY00OfpHVGfsnHZoA8jVT+esS/Bg8z8jzxp5BnDCjjwsuKsPQrzswwpFy4J1AUJbXPRfkpcX0mXrzeXW79g==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@unrs/resolver-binding-win32-x64-msvc": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@unrs/resolver-binding-win32-x64-msvc/-/resolver-binding-win32-x64-msvc-1.12.2.tgz",
+      "integrity": "sha512-nAB74NfSNKknqQ1RrYj6uz8FcXEomu/MATJZxh/x+BArzN2U3JbOYC0APYzUIGhVY3m5hRxA8VPNdPBoG8txlA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/acorn": {
+      "version": "8.18.0",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.15.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/aria-query": {
+      "version": "5.3.2",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.2.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-object-atoms": "^1.1.2",
+        "es-shim-unscopables": "^1.1.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ast-types-flow": {
+      "version": "0.0.8",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axe-core": {
+      "version": "4.13.0",
+      "dev": true,
+      "license": "MPL-2.0",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "4.1.0",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.11.21",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.18",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.9",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.11.20",
+        "caniuse-lite": "^1.0.30001810",
+        "electron-to-chromium": "^1.5.420",
+        "node-releases": "^2.0.54",
+        "update-browserslist-db": "^1.3.2"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.9",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "get-intrinsic": "^1.3.0",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001810",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "license": "MIT"
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.426",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-abstract": {
+      "version": "1.24.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-abstract-get": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.2",
+        "is-callable": "^1.2.7",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.4.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-abstract-get": "^1.0.0",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.1.0",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.39.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.2",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.6",
+        "@eslint/js": "9.39.5",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.5",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next": {
+      "version": "16.3.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@next/eslint-plugin-next": "16.3.4",
+        "eslint-import-resolver-node": "^0.3.6",
+        "eslint-import-resolver-typescript": "^3.5.2",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-jsx-a11y": "^6.10.0",
+        "eslint-plugin-react": "^7.37.0",
+        "eslint-plugin-react-hooks": "^7.0.0",
+        "globals": "16.4.0",
+        "typescript-eslint": "^8.46.0"
+      },
+      "peerDependencies": {
+        "eslint": ">=9.0.0",
+        "typescript": ">=3.3.1"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-next/node_modules/globals": {
+      "version": "16.4.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.10",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.16.1",
+        "resolve": "^2.0.0-next.6"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-import-resolver-typescript": {
+      "version": "3.10.1",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.4.0",
+        "get-tsconfig": "^4.10.0",
+        "is-bun-module": "^2.0.0",
+        "stable-hash": "^0.0.5",
+        "tinyglobby": "^0.2.13",
+        "unrs-resolver": "^1.6.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-import-resolver-typescript"
+      },
+      "peerDependencies": {
+        "eslint": "*",
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.14.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.10.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "aria-query": "^5.3.2",
+        "array-includes": "^3.1.8",
+        "array.prototype.flatmap": "^1.3.2",
+        "ast-types-flow": "^0.0.8",
+        "axe-core": "^4.10.0",
+        "axobject-query": "^4.1.0",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^3.3.5",
+        "language-tags": "^1.0.9",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.includes": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0 || ^10.0.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.7.0",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.20.3",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.4",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.2.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2",
+        "hasown": "^2.0.4",
+        "is-callable": "^1.2.7",
+        "is-document.all": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-tsconfig": {
+      "version": "4.14.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bun-module": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.7.1"
+      }
+    },
+    "node_modules/is-bun-module/node_modules/semver": {
+      "version": "7.8.5",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-document.all": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.3.2",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/language-tags": {
+      "version": "1.0.9",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "language-subtag-registry": "^0.3.20"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.5",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.18",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/napi-postinstall": {
+      "version": "0.3.4",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "napi-postinstall": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/napi-postinstall"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/next": {
+      "version": "16.3.4",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "16.3.4",
+        "@swc/helpers": "0.5.23",
+        "baseline-browser-mapping": "^2.9.19",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.5.23",
+        "styled-jsx": "5.1.6"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "16.3.4",
+        "@next/swc-darwin-x64": "16.3.4",
+        "@next/swc-linux-arm64-gnu": "16.3.4",
+        "@next/swc-linux-arm64-musl": "16.3.4",
+        "@next/swc-linux-x64-gnu": "16.3.4",
+        "@next/swc-linux-x64-musl": "16.3.4",
+        "@next/swc-win32-arm64-msvc": "16.3.4",
+        "@next/swc-win32-x64-msvc": "16.3.4",
+        "sharp": "^0.35.4"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.51.1",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-exports-info": {
+      "version": "1.6.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array.prototype.flatmap": "^1.3.3",
+        "es-errors": "^1.3.0",
+        "object.entries": "^1.1.9",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.55",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "get-intrinsic": "^1.3.0",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.23",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.16",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "19.2.8",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.8",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.8"
+      }
+    },
+    "node_modules/react-easy-crop": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-6.2.3.tgz",
+      "integrity": "sha512-ebimG3OGlzizjxEZ77Cj9CVLcg5vDZ6QVz8ud1rx4WmsCDWHIROEhgMi0GpJ/jKAuwHrH0M+QZUK4hyvxbYhOA==",
+      "license": "MIT",
+      "dependencies": {
+        "normalize-wheel": "^1.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-dom": ">=16.4.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "2.0.0-next.7",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.2",
+        "node-exports-info": "^1.6.0",
+        "object-keys": "^1.1.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "get-intrinsic": "^1.3.0",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "license": "MIT"
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.35.4",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "@img/colour": "^1.1.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.8.5"
+      },
+      "engines": {
+        "node": ">=20.9.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.35.4",
+        "@img/sharp-darwin-x64": "0.35.4",
+        "@img/sharp-freebsd-wasm32": "0.35.4",
+        "@img/sharp-libvips-darwin-arm64": "1.3.3",
+        "@img/sharp-libvips-darwin-x64": "1.3.3",
+        "@img/sharp-libvips-linux-arm": "1.3.3",
+        "@img/sharp-libvips-linux-arm64": "1.3.3",
+        "@img/sharp-libvips-linux-ppc64": "1.3.3",
+        "@img/sharp-libvips-linux-riscv64": "1.3.3",
+        "@img/sharp-libvips-linux-s390x": "1.3.3",
+        "@img/sharp-libvips-linux-x64": "1.3.3",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.3.3",
+        "@img/sharp-libvips-linuxmusl-x64": "1.3.3",
+        "@img/sharp-linux-arm": "0.35.4",
+        "@img/sharp-linux-arm64": "0.35.4",
+        "@img/sharp-linux-ppc64": "0.35.4",
+        "@img/sharp-linux-riscv64": "0.35.4",
+        "@img/sharp-linux-s390x": "0.35.4",
+        "@img/sharp-linux-x64": "0.35.4",
+        "@img/sharp-linuxmusl-arm64": "0.35.4",
+        "@img/sharp-linuxmusl-x64": "0.35.4",
+        "@img/sharp-webcontainers-wasm32": "0.35.4",
+        "@img/sharp-win32-arm64": "0.35.4",
+        "@img/sharp-win32-ia32": "0.35.4",
+        "@img/sharp-win32-x64": "0.35.4"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sharp/node_modules/semver": {
+      "version": "7.8.5",
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stable-hash": {
+      "version": "0.0.5",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.includes": {
+      "version": "2.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.4",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.11",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.2",
+        "es-object-atoms": "^1.1.2",
+        "has-property-descriptors": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.10",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-bom": {
+      "version": "3.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.17",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.7",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-api-utils": {
+      "version": "2.5.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/json5": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "license": "0BSD"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.8",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.9",
+        "for-each": "^0.3.5",
+        "gopd": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "possible-typed-array-names": "^1.1.0",
+        "reflect.getprototypeof": "^1.0.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/typescript-eslint": {
+      "version": "8.70.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.70.0",
+        "@typescript-eslint/parser": "8.70.0",
+        "@typescript-eslint/typescript-estree": "8.70.0",
+        "@typescript-eslint/utils": "8.70.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.1.0"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/unrs-resolver": {
+      "version": "1.12.2",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "napi-postinstall": "^0.3.4"
+      },
+      "funding": {
+        "url": "https://opencollective.com/unrs-resolver"
+      },
+      "optionalDependencies": {
+        "@unrs/resolver-binding-android-arm-eabi": "1.12.2",
+        "@unrs/resolver-binding-android-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-arm64": "1.12.2",
+        "@unrs/resolver-binding-darwin-x64": "1.12.2",
+        "@unrs/resolver-binding-freebsd-x64": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-gnueabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm-musleabihf": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-arm64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-loong64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-ppc64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-riscv64-musl": "1.12.2",
+        "@unrs/resolver-binding-linux-s390x-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-gnu": "1.12.2",
+        "@unrs/resolver-binding-linux-x64-musl": "1.12.2",
+        "@unrs/resolver-binding-openharmony-arm64": "1.12.2",
+        "@unrs/resolver-binding-wasm32-wasi": "1.12.2",
+        "@unrs/resolver-binding-win32-arm64-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-ia32-msvc": "1.12.2",
+        "@unrs/resolver-binding-win32-x64-msvc": "1.12.2"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.3.2",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.22",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.9",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/zod": {
+      "version": "4.6.1",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e0f2c00
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "iranbay-dashboard",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3002",
+    "build": "next build",
+    "start": "next start --port 3002",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.3.4",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-easy-crop": "^6.2.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.3.4",
+    "typescript": "^5"
+  }
+}
diff --git a/public/fonts/iranyekan/IRANYekanWebLight.ttf b/public/fonts/iranyekan/IRANYekanWebLight.ttf
new file mode 100755
index 0000000..4431c6f
Binary files /dev/null and b/public/fonts/iranyekan/IRANYekanWebLight.ttf differ
diff --git a/public/fonts/iranyekan/IRANYekanWebRegular.ttf b/public/fonts/iranyekan/IRANYekanWebRegular.ttf
new file mode 100755
index 0000000..77dec5f
Binary files /dev/null and b/public/fonts/iranyekan/IRANYekanWebRegular.ttf differ
diff --git a/public/images/auth/ship.png b/public/images/auth/ship.png
new file mode 100644
index 0000000..4820edb
Binary files /dev/null and b/public/images/auth/ship.png differ
diff --git a/public/images/icons/add.svg b/public/images/icons/add.svg
new file mode 100644
index 0000000..8c3606a
--- /dev/null
+++ b/public/images/icons/add.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M29.5161 14.5161H15.4839V0.483871C15.4839 0.216653 15.2672 0 15 0C14.7328 0 14.5161 0.216653 14.5161 0.483871V14.5161H0.483871C0.216653 14.5161 0 14.7328 0 15C0 15.2672 0.216653 15.4839 0.483871 15.4839H14.5161V29.5161C14.5161 29.7833 14.7328 30 15 30C15.2672 30 15.4839 29.7833 15.4839 29.5161V15.4839H29.5161C29.7833 15.4839 30 15.2672 30 15C30 14.7328 29.7833 14.5161 29.5161 14.5161Z" fill="black"/>
+</g>
+</svg>
diff --git a/public/images/icons/blog.svg b/public/images/icons/blog.svg
new file mode 100644
index 0000000..40c41cc
--- /dev/null
+++ b/public/images/icons/blog.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.25 2.75H11.1L14.25 5.9V15.25C14.25 15.802 13.802 16.25 13.25 16.25H4.25C3.698 16.25 3.25 15.802 3.25 15.25V3.75C3.25 3.198 3.698 2.75 4.25 2.75Z" stroke="#8E8E8E" stroke-width="1.1" stroke-linejoin="round"/>
+  <path d="M11 2.9V6.15H14.1" stroke="#8E8E8E" stroke-width="1.1" stroke-linejoin="round"/>
+  <path d="M6 9.15H11.5" stroke="#8E8E8E" stroke-width="1.1" stroke-linecap="round"/>
+  <path d="M6 11.65H11.5" stroke="#8E8E8E" stroke-width="1.1" stroke-linecap="round"/>
+</svg>
diff --git a/public/images/icons/calendar.svg b/public/images/icons/calendar.svg
new file mode 100644
index 0000000..6dfa072
--- /dev/null
+++ b/public/images/icons/calendar.svg
@@ -0,0 +1,11 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="2.25" y="3.75" width="13.5" height="12" rx="1.2" stroke="#8E8E8E" stroke-width="1.1" fill="none"/>
+  <path d="M2.25 7.2H15.75" stroke="#8E8E8E" stroke-width="1.1"/>
+  <path d="M6 2.25V5.25" stroke="#8E8E8E" stroke-width="1.1" stroke-linecap="round"/>
+  <path d="M12 2.25V5.25" stroke="#8E8E8E" stroke-width="1.1" stroke-linecap="round"/>
+  <rect x="5.1" y="9.15" width="1.7" height="1.7" rx="0.25" fill="#8E8E8E"/>
+  <rect x="8.15" y="9.15" width="1.7" height="1.7" rx="0.25" fill="#8E8E8E"/>
+  <rect x="11.2" y="9.15" width="1.7" height="1.7" rx="0.25" fill="#8E8E8E"/>
+  <rect x="5.1" y="12.15" width="1.7" height="1.7" rx="0.25" fill="#8E8E8E"/>
+  <rect x="8.15" y="12.15" width="1.7" height="1.7" rx="0.25" fill="#8E8E8E"/>
+</svg>
diff --git a/public/images/icons/category.svg b/public/images/icons/category.svg
new file mode 100644
index 0000000..fa9a0cc
--- /dev/null
+++ b/public/images/icons/category.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="11.2" height="11.2" viewBox="0 0 11.2 11.2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M0.7 5.13333H4.43333C4.81927 5.13333 5.13333 4.81927 5.13333 4.43333V0.7C5.13333 0.314067 4.81927 0 4.43333 0H0.7C0.314067 0 0 0.314067 0 0.7V4.43333C0 4.81927 0.314067 5.13333 0.7 5.13333ZM0.466667 0.7C0.466667 0.571433 0.571433 0.466667 0.7 0.466667H4.43333C4.5619 0.466667 4.66667 0.571433 4.66667 0.7V4.43333C4.66667 4.5619 4.5619 4.66667 4.43333 4.66667H0.7C0.571433 4.66667 0.466667 4.5619 0.466667 4.43333V0.7ZM10.5 0H6.76667C6.38073 0 6.06667 0.314067 6.06667 0.7V4.43333C6.06667 4.81927 6.38073 5.13333 6.76667 5.13333H10.5C10.8859 5.13333 11.2 4.81927 11.2 4.43333V0.7C11.2 0.314067 10.8859 0 10.5 0ZM10.7333 4.43333C10.7333 4.5619 10.6286 4.66667 10.5 4.66667H6.76667C6.6381 4.66667 6.53333 4.5619 6.53333 4.43333V0.7C6.53333 0.571433 6.6381 0.466667 6.76667 0.466667H10.5C10.6286 0.466667 10.7333 0.571433 10.7333 0.7V4.43333ZM0.7 11.2H4.43333C4.81927 11.2 5.13333 10.8859 5.13333 10.5V6.76667C5.13333 6.38073 4.81927 6.06667 4.43333 6.06667H0.7C0.314067 6.06667 0 6.38073 0 6.76667V10.5C0 10.8859 0.314067 11.2 0.7 11.2ZM0.466667 6.76667C0.466667 6.6381 0.571433 6.53333 0.7 6.53333H4.43333C4.5619 6.53333 4.66667 6.6381 4.66667 6.76667V10.5C4.66667 10.6286 4.5619 10.7333 4.43333 10.7333H0.7C0.571433 10.7333 0.466667 10.6286 0.466667 10.5V6.76667ZM10.5 6.06667H6.76667C6.38073 6.06667 6.06667 6.38073 6.06667 6.76667V10.5C6.06667 10.8859 6.38073 11.2 6.76667 11.2H10.5C10.8859 11.2 11.2 10.8859 11.2 10.5V6.76667C11.2 6.38073 10.8859 6.06667 10.5 6.06667ZM10.7333 10.5C10.7333 10.6286 10.6286 10.7333 10.5 10.7333H6.76667C6.6381 10.7333 6.53333 10.6286 6.53333 10.5V6.76667C6.53333 6.6381 6.6381 6.53333 6.76667 6.53333H10.5C10.6286 6.53333 10.7333 6.6381 10.7333 6.76667V10.5Z" fill="#8E8E8E"/>
+</g>
+</svg>
diff --git a/public/images/icons/chevron.svg b/public/images/icons/chevron.svg
new file mode 100644
index 0000000..3af0b88
--- /dev/null
+++ b/public/images/icons/chevron.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 7.29497 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M7.20965 6.79034L0.500652 0.0813431C0.383965 -0.0294922 0.200197 -0.0265934 0.0893616 0.0871679C-0.0185749 0.200929 -0.0185749 0.378873 0.0893616 0.492634L6.59126 6.99453L0.0893616 13.4994C-0.0273258 13.6102 -0.0302245 13.7969 0.0835369 13.9106C0.194372 14.0273 0.381066 14.0302 0.494828 13.9165C0.497754 13.9135 0.500652 13.9106 0.500652 13.9106L7.20965 7.20165C7.32341 7.08786 7.32341 6.9041 7.20965 6.79034Z" fill="black"/>
+</g>
+</svg>
diff --git a/public/images/icons/eye.svg b/public/images/icons/eye.svg
new file mode 100644
index 0000000..37e5f4f
--- /dev/null
+++ b/public/images/icons/eye.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="12.9671" height="8.71235" viewBox="0 0 12.9671 8.71235" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M12.0744 4.59689C10.9447 6.62561 8.80225 7.88586 6.4843 7.88586C4.16484 7.88586 2.02243 6.62561 0.892691 4.59689C0.805684 4.43937 0.805684 4.27284 0.892691 4.11545C2.02243 2.08677 4.16484 0.826656 6.4843 0.826656C8.80225 0.826656 10.9447 2.08677 12.0744 4.11545C12.1629 4.27284 12.1629 4.43937 12.0744 4.59689ZM12.7961 3.71323C11.5208 1.42272 9.10232 0 6.4843 0C3.86477 0 1.44629 1.42272 0.171035 3.71323C-0.0570117 4.12191 -0.0570117 4.59044 0.171035 4.99882C1.44629 7.28932 3.86477 8.71235 6.4843 8.71235C9.10232 8.71235 11.5208 7.28932 12.7961 4.99882C13.0241 4.59047 13.0241 4.12191 12.7961 3.71323ZM6.4843 6.05188C7.41899 6.05188 8.17964 5.29123 8.17964 4.35611C8.17964 3.42098 7.41899 2.66033 6.4843 2.66033C5.5481 2.66033 4.78745 3.42098 4.78745 4.35611C4.78745 5.29123 5.54813 6.05188 6.4843 6.05188ZM6.4843 1.83367C5.09201 1.83367 3.9608 2.96535 3.9608 4.35613C3.9608 5.74722 5.09204 6.87843 6.4843 6.87843C7.87508 6.87843 9.00629 5.74719 9.00629 4.35613C9.00629 2.96535 7.87508 1.83367 6.4843 1.83367Z" fill="#8E8E8E"/>
+</g>
+</svg>
diff --git a/public/images/icons/facebook.png b/public/images/icons/facebook.png
new file mode 100644
index 0000000..b188882
Binary files /dev/null and b/public/images/icons/facebook.png differ
diff --git a/public/images/icons/gallery.svg b/public/images/icons/gallery.svg
new file mode 100644
index 0000000..07447b9
--- /dev/null
+++ b/public/images/icons/gallery.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="2.25" y="3.5" width="13.5" height="11" rx="1.2" stroke="#8E8E8E" stroke-width="1.1" fill="none"/>
+  <circle cx="6.4" cy="7.4" r="1.15" stroke="#8E8E8E" stroke-width="1.1" fill="none"/>
+  <path d="M2.9 12.6L6.8 9.3L9.1 11.1L11.4 8.7L15.1 12.6" stroke="#8E8E8E" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
diff --git a/public/images/icons/gear.svg b/public/images/icons/gear.svg
new file mode 100644
index 0000000..5d1956f
--- /dev/null
+++ b/public/images/icons/gear.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="gear-six-thin-svgrepo-com 1">
+<path id="Vector" d="M7.50009 4.45322C6.89748 4.45322 6.3084 4.63192 5.80734 4.96671C5.30629 5.3015 4.91576 5.77736 4.68515 6.3341C4.45454 6.89084 4.39421 7.50347 4.51177 8.0945C4.62933 8.68553 4.91952 9.22843 5.34563 9.65454C5.77174 10.0807 6.31464 10.3708 6.90568 10.4884C7.49671 10.606 8.10933 10.5456 8.66607 10.315C9.22281 10.0844 9.69867 9.69389 10.0335 9.19283C10.3683 8.69178 10.547 8.1027 10.547 7.50009C10.546 6.69229 10.2247 5.91784 9.65354 5.34664C9.08234 4.77544 8.30789 4.45414 7.50009 4.45322ZM7.50009 10.0782C6.99019 10.0782 6.49173 9.927 6.06776 9.64371C5.6438 9.36042 5.31335 8.95778 5.11822 8.48669C4.92309 8.0156 4.87203 7.49723 4.97151 6.99712C5.07099 6.49701 5.31653 6.03764 5.67709 5.67708C6.03764 5.31653 6.49702 5.07099 6.99712 4.97151C7.49723 4.87203 8.0156 4.92309 8.48669 5.11822C8.95778 5.31335 9.36043 5.64379 9.64371 6.06776C9.927 6.49173 10.0782 6.99018 10.0782 7.50009C10.0774 8.18361 9.80556 8.83891 9.32224 9.32224C8.83892 9.80556 8.18361 10.0774 7.50009 10.0782ZM13.6845 6.15907C13.6774 6.12649 13.6635 6.0958 13.6436 6.06904C13.6237 6.04228 13.5984 6.02007 13.5692 6.00389L12.1133 5.19568C12.0206 5.00974 11.9168 4.82955 11.8024 4.6561L11.8304 2.99001C11.831 2.95667 11.8244 2.92359 11.8112 2.89299C11.7979 2.86239 11.7783 2.83496 11.7536 2.81255C11.0848 2.20427 10.2925 1.74758 9.43095 1.47371C9.39921 1.46355 9.36566 1.46027 9.33254 1.46411C9.29943 1.46794 9.26751 1.47879 9.23892 1.49594L7.81102 2.3527C7.60363 2.34004 7.39567 2.33989 7.18826 2.35224L5.75942 1.49488C5.73082 1.47771 5.69889 1.46684 5.66576 1.46301C5.63263 1.45917 5.59906 1.46246 5.5673 1.47265C4.70612 1.74772 3.91449 2.20551 3.24653 2.81472C3.22185 2.83714 3.20224 2.86456 3.189 2.89516C3.17577 2.92576 3.16921 2.95883 3.16977 2.99216L3.19778 4.65713C3.08312 4.8304 2.979 5.01041 2.88599 5.1962L1.42908 6.00498C1.39992 6.02116 1.37455 6.04338 1.35467 6.07015C1.33479 6.09692 1.32084 6.12763 1.31378 6.16022C1.1214 7.04356 1.12204 7.95803 1.31566 8.8411C1.32273 8.87368 1.33667 8.90437 1.35655 8.93113C1.37643 8.95789 1.40179 8.9801 1.43094 8.99628L2.88684 9.80449C2.97957 9.99043 3.08342 10.1706 3.19781 10.3441L3.16977 12.0102C3.1692 12.0435 3.17576 12.0766 3.189 12.1072C3.20224 12.1378 3.22187 12.1652 3.24656 12.1876C3.91537 12.7959 4.70764 13.2526 5.56922 13.5265C5.60096 13.5366 5.63452 13.5399 5.66763 13.5361C5.70074 13.5322 5.73266 13.5214 5.76125 13.5042L7.18915 12.6475C7.39654 12.6601 7.6045 12.6603 7.81191 12.6479L9.24075 13.5053C9.26935 13.5225 9.30128 13.5333 9.33441 13.5372C9.36754 13.541 9.40111 13.5377 9.43287 13.5275C10.2941 13.2525 11.0857 12.7947 11.7536 12.1855C11.7783 12.163 11.7979 12.1356 11.8112 12.105C11.8244 12.0744 11.831 12.0413 11.8304 12.008L11.8024 10.343C11.917 10.1698 12.0212 9.98976 12.1142 9.80397L13.5711 8.99519C13.6003 8.97901 13.6256 8.95679 13.6455 8.93002C13.6654 8.90325 13.6793 8.87254 13.6864 8.83996C13.8788 7.95661 13.8781 7.04214 13.6845 6.15907ZM13.2497 8.63748L11.8224 9.42981C11.7801 9.4533 11.7461 9.48933 11.7251 9.53295C11.6232 9.74418 11.5056 9.94748 11.3733 10.1411C11.3459 10.1812 11.3316 10.2288 11.3325 10.2773L11.3599 11.9086C10.7848 12.4146 10.1153 12.8019 9.38987 13.0481L7.99009 12.2082C7.95366 12.1864 7.91198 12.1748 7.8695 12.1748C7.86372 12.1748 7.85788 12.175 7.85208 12.1755C7.61818 12.1928 7.38331 12.1926 7.14944 12.1749C7.10106 12.1713 7.05277 12.1828 7.01111 12.2076L5.6121 13.047C4.8863 12.802 4.21614 12.4158 3.64024 11.9107L3.66773 10.2785C3.66854 10.2301 3.65433 10.1826 3.62708 10.1426C3.49511 9.94874 3.37784 9.74524 3.27626 9.53384C3.25524 9.4901 3.22116 9.45396 3.17873 9.43041L1.75228 8.63854C1.60159 7.88747 1.60097 7.114 1.75048 6.36269L3.17773 5.57036C3.22005 5.54687 3.25407 5.51083 3.27509 5.46722C3.377 5.25599 3.49459 5.05269 3.62688 4.85903C3.65426 4.81896 3.66852 4.77137 3.6677 4.72284L3.64026 3.09158C4.21536 2.58552 4.88489 2.19825 5.6103 1.95207L7.01008 2.79198C7.05159 2.8169 7.09981 2.82834 7.1481 2.82471C7.38199 2.80736 7.61686 2.80755 7.85073 2.82528C7.89911 2.82888 7.94743 2.81745 7.98906 2.79255L9.38807 1.95313C10.1139 2.19815 10.784 2.58435 11.3599 3.08949L11.3324 4.72164C11.3316 4.77005 11.3458 4.81752 11.3731 4.85754C11.5051 5.05143 11.6223 5.25493 11.7239 5.46633C11.7449 5.51007 11.779 5.54621 11.8214 5.56976L13.2479 6.36163C13.3986 7.1127 13.3992 7.88617 13.2497 8.63748Z" fill="#8E8E8E"/>
+</g>
+</svg>
diff --git a/public/images/icons/home-outline.svg b/public/images/icons/home-outline.svg
new file mode 100644
index 0000000..c67dcbf
--- /dev/null
+++ b/public/images/icons/home-outline.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="11.1092" height="11.114" viewBox="0 0 11.1092 11.114" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M5.51067 0.577667C6.07101 0.577667 6.51746 1.02742 6.54634 1.05713L6.56037 1.07309L6.58348 1.09399C6.61099 1.11875 9.33757 3.58209 10.0786 4.24585C10.5479 4.66645 10.5347 5.12638 10.5306 5.1902L10.5259 5.21386V5.26585V9.07102C10.5259 9.62008 10.3532 10.0299 10.0123 10.2888C9.79118 10.4569 9.55846 10.5188 9.47787 10.5361C9.10513 10.535 6.81042 10.5292 4.76685 10.5292C3.46133 10.5292 2.51175 10.5317 1.94454 10.5361C1.93738 10.5361 1.93051 10.5361 1.92363 10.5361C1.36825 10.5361 0.991112 10.3606 0.771323 9.99969C0.602699 9.72269 0.579868 9.4256 0.577392 9.38654V5.00067C0.577392 4.78088 0.891808 4.37431 1.11297 4.17241C1.26757 4.04202 3.04733 2.53596 4.50965 1.07364C4.8392 0.74464 5.1759 0.577667 5.51067 0.577667ZM5.51067 0C5.0854 0 4.60043 0.166423 4.10144 0.665417C2.60418 2.16268 0.732812 3.73751 0.732812 3.73751C0.732812 3.73751 0 4.39247 0 5.00067V9.39837C0 9.39837 0.0310839 11.114 1.92363 11.114C1.93216 11.114 1.94069 11.114 1.94921 11.114C2.5885 11.1088 3.64398 11.1072 4.76685 11.1072C7.0126 11.1072 9.52848 11.114 9.52848 11.114C9.52848 11.114 11.1036 10.9113 11.1036 9.07102C11.1036 7.23074 11.1036 5.26585 11.1036 5.26585C11.1036 5.26585 11.2128 4.486 10.4643 3.81563C9.71581 3.14498 6.97107 0.665417 6.97107 0.665417C6.97107 0.665417 6.36094 0 5.51067 0Z" fill="#8E8E8E"/>
+</g>
+</svg>
diff --git a/public/images/icons/home.svg b/public/images/icons/home.svg
new file mode 100644
index 0000000..a29f149
--- /dev/null
+++ b/public/images/icons/home.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20.8297" height="20.8388" viewBox="0 0 20.8297 20.8388" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M10.3325 1.08313C11.3831 1.08313 12.2202 1.92642 12.2744 1.98212L12.3007 2.01203L12.344 2.05123C12.3956 2.09765 17.508 6.71641 18.8974 7.96097C19.7774 8.74959 19.7526 9.61197 19.7449 9.73163L19.7361 9.77598V9.87346V17.0082C19.7361 18.0377 19.4122 18.8062 18.7731 19.2915C18.3585 19.6066 17.9221 19.7227 17.771 19.7552C17.0721 19.7531 12.7695 19.7423 8.93785 19.7423C6.48999 19.7423 4.70953 19.7469 3.64601 19.7552C3.6326 19.7552 3.6197 19.7552 3.60681 19.7552C2.56546 19.7552 1.85833 19.4261 1.44623 18.7494C1.13006 18.23 1.08725 17.673 1.08261 17.5998V9.37626C1.08261 8.96415 1.67214 8.20184 2.08682 7.82326C2.37669 7.57879 5.71375 4.75492 8.4556 2.01307C9.0735 1.3962 9.70481 1.08313 10.3325 1.08313ZM10.3325 0C9.53512 0 8.62581 0.312043 7.69019 1.24766C4.88283 4.05502 1.37402 7.00782 1.37402 7.00782C1.37402 7.00782 0 8.23588 0 9.37626V17.6219C0 17.6219 0.0582823 20.8388 3.60681 20.8388C3.6228 20.8388 3.63879 20.8388 3.65478 20.8388C4.85343 20.829 6.83246 20.8259 8.93785 20.8259C13.1486 20.8259 17.8659 20.8388 17.8659 20.8388C17.8659 20.8388 20.8192 20.4587 20.8192 17.0082C20.8192 13.5576 20.8192 9.87346 20.8192 9.87346C20.8192 9.87346 21.024 8.41124 19.6206 7.1543C18.2171 5.89685 13.0707 1.24766 13.0707 1.24766C13.0707 1.24766 11.9268 0 10.3325 0Z" fill="#020202"/>
+</g>
+</svg>
diff --git a/public/images/icons/instagram.png b/public/images/icons/instagram.png
new file mode 100644
index 0000000..86b261b
Binary files /dev/null and b/public/images/icons/instagram.png differ
diff --git a/public/images/icons/logo.png b/public/images/icons/logo.png
new file mode 100644
index 0000000..66053b6
Binary files /dev/null and b/public/images/icons/logo.png differ
diff --git a/public/images/icons/menu.svg b/public/images/icons/menu.svg
new file mode 100644
index 0000000..c4e67b4
--- /dev/null
+++ b/public/images/icons/menu.svg
@@ -0,0 +1,7 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="21.9999" height="10.9999" viewBox="0 0 21.9999 10.9999" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Menu_1_">
+<path id="Vector" d="M0.687482 1.37496H21.3125C21.692 1.37496 21.9999 1.06694 21.9999 0.687482C21.9999 0.307967 21.6919 0 21.3125 0H0.687482C0.307967 0 0 0.308024 0 0.687482C0 1.06694 0.308024 1.37496 0.687482 1.37496Z" fill="#8E8E8E"/>
+<path id="Vector_2" d="M21.3125 4.81249H0.687482C0.307967 4.81249 0 5.12051 0 5.49997C0 5.87943 0.308024 6.18745 0.687482 6.18745H21.3125C21.692 6.18745 21.9999 5.87943 21.9999 5.49997C21.9999 5.12051 21.692 4.81249 21.3125 4.81249Z" fill="#8E8E8E"/>
+<path id="Vector_3" d="M21.3125 9.62498H7.56247C7.18296 9.62498 6.87499 9.933 6.87499 10.3125C6.87499 10.692 7.18302 10.9999 7.56247 10.9999H21.3125C21.692 10.9999 21.9999 10.6919 21.9999 10.3125C22 9.93294 21.692 9.62498 21.3125 9.62498Z" fill="#8E8E8E"/>
+</g>
+</svg>
diff --git a/public/images/icons/search.svg b/public/images/icons/search.svg
new file mode 100644
index 0000000..84787b6
--- /dev/null
+++ b/public/images/icons/search.svg
@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M29.8169 28.9331L20.6888 19.805C22.5848 17.6999 23.75 14.9244 23.75 11.875C23.75 5.32717 18.4229 0 11.875 0C5.32717 0 0 5.32717 0 11.875C0 18.4229 5.32717 23.75 11.875 23.75C14.9244 23.75 17.6999 22.5848 19.805 20.6888L28.9331 29.8169C29.0552 29.9389 29.2151 30 29.375 30C29.5349 30 29.6948 29.9389 29.817 29.8169C30.0611 29.5727 30.0611 29.1772 29.8169 28.9331ZM11.875 22.5C6.01688 22.5 1.25004 17.7338 1.25004 11.875C1.25004 6.01629 6.01688 1.24998 11.875 1.24998C17.7332 1.24998 22.5 6.01623 22.5 11.875C22.5 17.7338 17.7332 22.5 11.875 22.5Z" fill="black"/>
+</g>
+</svg>
diff --git a/public/images/icons/telegram.png b/public/images/icons/telegram.png
new file mode 100644
index 0000000..bcd5b20
Binary files /dev/null and b/public/images/icons/telegram.png differ
diff --git a/public/images/icons/user.svg b/public/images/icons/user.svg
new file mode 100644
index 0000000..44e14b6
--- /dev/null
+++ b/public/images/icons/user.svg
@@ -0,0 +1,14 @@
+<svg viewBox="0 0 28.676 29.2" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Head -->
+  <path
+    transform="translate(7.481 0)"
+    d="M6.85726 0C3.07701 0 0 3.07578 0 6.85726C0 10.6387 3.07707 13.7145 6.85726 13.7145C10.6375 13.7145 13.7145 10.6387 13.7145 6.85726C13.7145 3.07578 10.6375 0 6.85726 0ZM6.85726 12.4678C3.764 12.4678 1.24676 9.95052 1.24676 6.85726C1.24676 3.764 3.764 1.24676 6.85726 1.24676C9.95052 1.24676 12.4678 3.764 12.4678 6.85726C12.4678 9.95052 9.95052 12.4678 6.85726 12.4678Z"
+    fill="black"
+  />
+  <!-- Shoulders — below the head with a clear gap -->
+  <path
+    transform="translate(0 14.24)"
+    d="M14.3379 0C6.43209 0 0 6.43215 0 14.3379C0 14.682 0.279298 14.9613 0.623409 14.9613C0.96752 14.9613 1.24682 14.682 1.24682 14.3379C1.24682 7.11909 7.11914 1.24676 14.338 1.24676C21.5568 1.24676 27.4292 7.11909 27.4292 14.3379C27.4292 14.682 27.7085 14.9613 28.0526 14.9613C28.3967 14.9613 28.676 14.682 28.676 14.3379C28.6759 6.43086 22.2438 0 14.3379 0Z"
+    fill="black"
+  />
+</svg>
diff --git a/services/auth.ts b/services/auth.ts
new file mode 100644
index 0000000..b4ed210
--- /dev/null
+++ b/services/auth.ts
@@ -0,0 +1,49 @@
+import {
+  apiRequest,
+  clearTokens,
+  setTokens,
+} from "@/lib/meshkee-api";
+import type { LoginResponse, MeResponse } from "@/types/auth";
+
+export async function login(cellNumber: string, password: string) {
+  const data = await apiRequest<LoginResponse>("/auth/login", {
+    method: "POST",
+    body: { cellNumber, password },
+  });
+
+  setTokens(data.accessToken, data.refreshToken);
+  return data;
+}
+
+export type RegisterPayload = {
+  cellNumber: string;
+  password: string;
+  firstName: string;
+  lastName: string;
+  email?: string;
+  domain: string;
+};
+
+export async function register(payload: RegisterPayload) {
+  const data = await apiRequest<LoginResponse & { requiresOtp?: boolean }>(
+    "/auth/register",
+    {
+      method: "POST",
+      body: payload,
+    },
+  );
+
+  if (data.accessToken && data.refreshToken) {
+    setTokens(data.accessToken, data.refreshToken);
+  }
+
+  return data;
+}
+
+export async function fetchCurrentUser(signal?: AbortSignal) {
+  return apiRequest<MeResponse>("/auth/me", { auth: true, signal });
+}
+
+export function logout() {
+  clearTokens();
+}
diff --git a/services/marketplace.ts b/services/marketplace.ts
new file mode 100644
index 0000000..7474e71
--- /dev/null
+++ b/services/marketplace.ts
@@ -0,0 +1,117 @@
+import type { BusinessListResponse, MarketplaceBusiness } from "@/types/business";
+import { getAccessToken } from "@/lib/meshkee-api";
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_MARKETPLACE_API_URL?.replace(/\/$/, "") ||
+  process.env.NEXT_PUBLIC_ARIYAWAY_API_URL?.replace(/\/$/, "") ||
+  "http://localhost:3001/api/v1";
+
+export class MarketplaceApiError extends Error {
+  status: number;
+
+  constructor(message: string, status: number) {
+    super(message);
+    this.name = "MarketplaceApiError";
+    this.status = status;
+  }
+}
+
+async function parseResponse<T>(response: Response): Promise<T> {
+  const payload = await response.json().catch(() => null);
+
+  if (!response.ok) {
+    const message =
+      typeof payload?.message === "string"
+        ? payload.message
+        : Array.isArray(payload?.message)
+          ? payload.message.join(", ")
+          : `Request failed (${response.status})`;
+    throw new MarketplaceApiError(message, response.status);
+  }
+
+  return payload as T;
+}
+
+function authHeaders(): HeadersInit {
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+  const token = getAccessToken();
+  if (token) headers.Authorization = `Bearer ${token}`;
+  return headers;
+}
+
+export async function listBusinesses(params?: {
+  status?: string;
+  q?: string;
+  page?: number;
+  limit?: number;
+}): Promise<BusinessListResponse> {
+  const search = new URLSearchParams();
+  search.set("status", params?.status ?? "all");
+  search.set("page", String(params?.page ?? 1));
+  search.set("limit", String(params?.limit ?? 50));
+  if (params?.q) search.set("q", params.q);
+
+  const response = await fetch(`${API_BASE_URL}/businesses?${search}`, {
+    cache: "no-store",
+  });
+
+  return parseResponse<BusinessListResponse>(response);
+}
+
+export async function getMarketplaceBusiness(
+  id: string,
+): Promise<MarketplaceBusiness> {
+  const response = await fetch(`${API_BASE_URL}/businesses/by-id/${id}`, {
+    cache: "no-store",
+  });
+  return parseResponse<MarketplaceBusiness>(response);
+}
+
+export async function createMarketplaceBusiness(body: {
+  meshkeeBusinessId: string;
+  slug: string;
+  name?: string;
+  meshkeeCategoryIds?: string[];
+  status?: string;
+}): Promise<MarketplaceBusiness> {
+  const response = await fetch(`${API_BASE_URL}/businesses`, {
+    method: "POST",
+    headers: authHeaders(),
+    body: JSON.stringify(body),
+  });
+
+  return parseResponse<MarketplaceBusiness>(response);
+}
+
+export async function updateMarketplaceBusiness(
+  id: string,
+  body: {
+    slug?: string;
+    name?: string;
+    meshkeeCategoryIds?: string[];
+    status?: string;
+    isFeatured?: boolean;
+    sortWeight?: number;
+  },
+): Promise<MarketplaceBusiness> {
+  const response = await fetch(`${API_BASE_URL}/businesses/${id}`, {
+    method: "PATCH",
+    headers: authHeaders(),
+    body: JSON.stringify(body),
+  });
+
+  return parseResponse<MarketplaceBusiness>(response);
+}
+
+export async function deleteMarketplaceBusiness(id: string): Promise<void> {
+  const response = await fetch(`${API_BASE_URL}/businesses/${id}`, {
+    method: "DELETE",
+    headers: authHeaders(),
+  });
+
+  if (response.status === 204) return;
+
+  await parseResponse<unknown>(response);
+}
diff --git a/services/meshkee-business-ai.ts b/services/meshkee-business-ai.ts
new file mode 100644
index 0000000..c4a916d
--- /dev/null
+++ b/services/meshkee-business-ai.ts
@@ -0,0 +1,76 @@
+import { apiRequest } from "@/lib/meshkee-api";
+
+export type BusinessProfileAiField = "about" | "vision";
+
+export async function fillBusinessProfileFieldByAi(
+  businessId: string,
+  body: {
+    field: BusinessProfileAiField;
+    prompt: string;
+    nameEn?: string;
+    nameFa?: string;
+    categories?: string;
+  },
+) {
+  return apiRequest<{
+    field: BusinessProfileAiField;
+    text?: string;
+    html?: string;
+  }>(`/businesses/${businessId}/profile/ai-fill`, {
+    method: "POST",
+    auth: true,
+    body,
+  });
+}
+
+export function buildBusinessAboutAiPrompt(ctx: {
+  nameEn: string;
+  nameFa: string;
+  categories: string;
+}) {
+  const nameEn = ctx.nameEn || "—";
+  const nameFa = ctx.nameFa || "—";
+  const categories = ctx.categories || "—";
+
+  return `Write a short professional business abstract (1–4 sentences).
+
+Business name (EN): ${nameEn}
+Business name (FA): ${nameFa}
+Categories: ${categories}
+
+Requirements:
+- Explain what the business does and who it serves.
+- Keep an informative, specialist tone — not advertising.
+- Avoid sales CTAs, discounts, and vague praise.
+- Write in Persian (Farsi).
+- Plain text only (no HTML, no markdown).`;
+}
+
+export function buildBusinessVisionAiPrompt(ctx: {
+  nameEn: string;
+  nameFa: string;
+  categories: string;
+}) {
+  const nameEn = ctx.nameEn || "—";
+  const nameFa = ctx.nameFa || "—";
+  const categories = ctx.categories || "—";
+
+  return `Write a business profile description as HTML for an advanced rich-text editor.
+
+Business name (EN): ${nameEn}
+Business name (FA): ${nameFa}
+Categories: ${categories}
+
+Suggested structure:
+1) What the company is
+2) Main products / services / strengths
+3) Typical customers or markets
+4) Optional bullet list of key points
+
+Requirements:
+- Informative, professional tone — not marketing slogans.
+- Avoid CTAs, discounts, and vague claims.
+- 2–5 short paragraphs in Persian (Farsi).
+- Return raw HTML using only <p>, <ul>, <li>, <strong>, and <em>.
+- No markdown, no code fences, no escaped entities.`;
+}
diff --git a/services/meshkee-businesses.ts b/services/meshkee-businesses.ts
new file mode 100644
index 0000000..00318bd
--- /dev/null
+++ b/services/meshkee-businesses.ts
@@ -0,0 +1,312 @@
+import { apiRequest, getAccessToken } from "@/lib/meshkee-api";
+
+export interface MeshkeeBusinessSearchItem {
+  id: string;
+  name: string;
+  nameFa: string | null;
+  slug: string;
+  label: string;
+  ownerName?: string | null;
+  ownerCellNumber?: string | null;
+}
+
+export interface MeshkeeBusinessCategory {
+  id: string;
+  name: string;
+  slug: string;
+  parentId: string | null;
+}
+
+export interface MeshkeeBusinessOwner {
+  id: string;
+  cellNumber: string;
+  firstName: string | null;
+  lastName: string | null;
+  firstNameEn: string | null;
+  lastNameEn: string | null;
+  email: string | null;
+}
+
+export interface MeshkeeBusinessDetail {
+  id: string;
+  name: string;
+  nameFa: string | null;
+  slug: string;
+  categories: MeshkeeBusinessCategory[];
+  categoryIds: string[];
+  owner: MeshkeeBusinessOwner | null;
+  logoUrl: string | null;
+  logoMediaId: string | null;
+  bannerUrl: string | null;
+  bannerMediaId: string | null;
+  createdAt?: string;
+}
+
+function mapSearchItem(
+  item: MeshkeeBusinessSearchItem,
+): MeshkeeBusinessSearchItem {
+  const name = item.name ?? "";
+  const nameFa = item.nameFa ?? null;
+  return {
+    ...item,
+    id: String(item.id),
+    name,
+    nameFa,
+    slug: item.slug ?? "",
+    label: item.label || name || item.slug || String(item.id),
+    ownerName: item.ownerName ?? null,
+    ownerCellNumber: item.ownerCellNumber ?? null,
+  };
+}
+
+export async function searchMeshkeeBusinesses(
+  q: string,
+  signal?: AbortSignal,
+) {
+  const params = new URLSearchParams({
+    q,
+    limit: "20",
+  });
+
+  const data = await apiRequest<{ items: MeshkeeBusinessSearchItem[] }>(
+    `/businesses/search?${params}`,
+    { auth: true, signal },
+  );
+
+  return {
+    items: (data.items ?? []).map(mapSearchItem),
+  };
+}
+
+/** Newest Meshkee businesses (super-admin list, created_at desc). */
+export async function listLatestMeshkeeBusinesses(
+  limit = 5,
+  signal?: AbortSignal,
+) {
+  const pageSize = Math.min(Math.max(limit, 5), 50);
+  const params = new URLSearchParams({
+    page: "1",
+    pageSize: String(pageSize),
+    sort: "created",
+  });
+
+  const data = await apiRequest<{ items: MeshkeeBusinessSearchItem[] }>(
+    `/businesses?${params}`,
+    { auth: true, signal },
+  );
+
+  return {
+    items: (data.items ?? []).slice(0, limit).map(mapSearchItem),
+  };
+}
+
+export async function getMeshkeeBusiness(
+  businessId: string,
+  signal?: AbortSignal,
+) {
+  const data = await apiRequest<MeshkeeBusinessDetail>(
+    `/businesses/${businessId}`,
+    { auth: true, signal },
+  );
+
+  return {
+    ...data,
+    id: String(data.id),
+    createdAt: data.createdAt,
+    categories: (data.categories ?? []).map((category) => ({
+      ...category,
+      id: String(category.id),
+      parentId:
+        category.parentId == null ? null : String(category.parentId),
+    })),
+    categoryIds: (data.categoryIds ?? []).map(String),
+    owner: data.owner
+      ? {
+          ...data.owner,
+          id: String(data.owner.id),
+        }
+      : null,
+  };
+}
+
+export async function createMeshkeeBusiness(body: {
+  name: string;
+  nameFa: string;
+  slug?: string;
+  categoryIds: number[];
+  ownerFirstName: string;
+  ownerLastName: string;
+  ownerFirstNameEn: string;
+  ownerLastNameEn: string;
+  ownerCellNumber: string;
+  ownerPassword: string;
+}) {
+  const data = await apiRequest<MeshkeeBusinessDetail>(`/businesses`, {
+    method: "POST",
+    auth: true,
+    body,
+  });
+  return { ...data, id: String(data.id) };
+}
+
+export async function uploadBusinessMedia(
+  businessId: string,
+  file: File,
+): Promise<{ id: string; publicUrl: string }> {
+  const token = getAccessToken();
+  const form = new FormData();
+  form.append("files", file);
+
+  const base =
+    process.env.NEXT_PUBLIC_MESHKEE_API_URL?.replace(/\/$/, "") ||
+    "http://localhost:3010/api/v1";
+
+  const response = await fetch(`${base}/businesses/${businessId}/media`, {
+    method: "POST",
+    headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+    body: form,
+  });
+
+  const payload = await response.json().catch(() => null);
+  if (!response.ok) {
+    const message =
+      typeof payload?.message === "string"
+        ? payload.message
+        : Array.isArray(payload?.message)
+          ? payload.message.join(", ")
+          : `Upload failed (${response.status})`;
+    throw new Error(message);
+  }
+
+  const item = Array.isArray(payload?.items)
+    ? payload.items[0]
+    : Array.isArray(payload)
+      ? payload[0]
+      : payload;
+
+  return {
+    id: String(item.id),
+    publicUrl: String(item.publicUrl ?? item.url ?? ""),
+  };
+}
+
+export async function updateBusinessBanner(
+  businessId: string,
+  bannerMediaId: string | null,
+) {
+  return updateBusinessProfile(businessId, {
+    bannerMediaId: bannerMediaId == null ? null : Number(bannerMediaId),
+  });
+}
+
+export type BusinessPhoneType = "landline" | "cell";
+
+export interface BusinessPhoneNumber {
+  type: BusinessPhoneType;
+  number: string;
+  /** Optional; supported after Meshkee deploy with label field */
+  label?: string;
+}
+
+export interface BusinessAddress {
+  id?: string;
+  /** Display name / label for the address */
+  name: string;
+  province: string;
+  city: string;
+  address: string;
+  postalCode: string;
+  landline?: string | null;
+}
+
+export interface BusinessProfile {
+  businessId: string;
+  profile: {
+    nameEn: string;
+    nameFa: string;
+    title: string;
+    about: string;
+    vision: string;
+    emails: string[];
+    phoneNumbers: BusinessPhoneNumber[];
+    socialMedia: Record<string, string>;
+    logoMediaId: string | null;
+    logoUrl: string | null;
+    bannerMediaId: string | null;
+    bannerUrl: string | null;
+    categoryIds: string[];
+  };
+  addresses: BusinessAddress[];
+}
+
+export type UpdateBusinessProfileInput = {
+  nameEn?: string;
+  nameFa?: string;
+  title?: string;
+  about?: string;
+  vision?: string;
+  phoneNumbers?: BusinessPhoneNumber[];
+  logoMediaId?: number | null;
+  bannerMediaId?: number | null;
+  categoryIds?: number[];
+  addresses?: BusinessAddress[];
+};
+
+export async function getBusinessProfile(businessId: string) {
+  const data = await apiRequest<BusinessProfile>(
+    `/businesses/${businessId}/profile`,
+    { auth: true },
+  );
+
+  return {
+    businessId: String(data.businessId),
+    profile: {
+      ...data.profile,
+      logoMediaId:
+        data.profile.logoMediaId == null
+          ? null
+          : String(data.profile.logoMediaId),
+      bannerMediaId:
+        data.profile.bannerMediaId == null
+          ? null
+          : String(data.profile.bannerMediaId),
+      categoryIds: (data.profile.categoryIds ?? []).map(String),
+      phoneNumbers: (data.profile.phoneNumbers ?? []).map((phone) => ({
+        type: phone.type === "landline" ? "landline" : "cell",
+        number: phone.number ?? "",
+        ...(phone.label?.trim() ? { label: phone.label.trim() } : {}),
+      })),
+      emails: data.profile.emails ?? [],
+      about: data.profile.about ?? "",
+      vision: data.profile.vision ?? "",
+      nameEn: data.profile.nameEn ?? "",
+      nameFa: data.profile.nameFa ?? "",
+      title: data.profile.title ?? "",
+      logoUrl: data.profile.logoUrl ?? null,
+      bannerUrl: data.profile.bannerUrl ?? null,
+      socialMedia: data.profile.socialMedia ?? {},
+    },
+    addresses: (data.addresses ?? []).map((address) => ({
+      ...address,
+      id: address.id == null ? undefined : String(address.id),
+      name: String(
+        (address as BusinessAddress & { label?: string | null }).name ??
+          (address as { label?: string | null }).label ??
+          "",
+      ),
+      landline: address.landline ?? "",
+      postalCode: address.postalCode ?? "",
+    })),
+  };
+}
+
+export async function updateBusinessProfile(
+  businessId: string,
+  body: UpdateBusinessProfileInput,
+) {
+  return apiRequest<BusinessProfile>(`/businesses/${businessId}/profile`, {
+    method: "PATCH",
+    auth: true,
+    body,
+  });
+}
diff --git a/services/meshkee-catalog.ts b/services/meshkee-catalog.ts
new file mode 100644
index 0000000..12bf3cc
--- /dev/null
+++ b/services/meshkee-catalog.ts
@@ -0,0 +1,206 @@
+import { apiRequest, getAccessToken } from "@/lib/meshkee-api";
+
+export type CatalogEntityType = "product" | "blog" | "portfolio";
+
+export type MeshkeeEntityCategory = {
+  id: string;
+  name: string;
+  nameFa?: string | null;
+  parentId: string | null;
+  description?: string | null;
+  seoMetaTitle?: string | null;
+  seoMetaDescription?: string | null;
+  sortOrder?: number;
+};
+
+export type UpsertCategoryInput = {
+  parentId?: string | null;
+  name: string;
+  nameFa?: string;
+  description?: string;
+  seoMetaTitle?: string | null;
+  seoMetaDescription?: string | null;
+};
+
+export type CreateProductInput = {
+  title: string;
+  nameFa?: string;
+  summary?: string;
+  descriptionHtml?: string;
+  categoryId?: string;
+  featuredMediaId?: string;
+  galleryMediaIds?: string[];
+  tags?: string[];
+  seoMetaTitle?: string | null;
+  seoMetaDescription?: string | null;
+  status?: "draft" | "published" | "archived";
+};
+
+export type CreateBlogInput = {
+  title: string;
+  type: "news" | "article" | "blog";
+  abstract?: string;
+  mainTextHtml?: string;
+  categoryId?: string;
+  featuredMediaId?: string;
+  tags?: string[];
+  seoMetaTitle?: string | null;
+  seoMetaDescription?: string | null;
+  status?: "draft" | "published" | "archived";
+};
+
+export type CreatePortfolioInput = {
+  titleFa: string;
+  titleEn?: string;
+  abstract?: string;
+  projectUrl?: string;
+  mainTextHtml?: string;
+  categoryId?: string;
+  featuredMediaId?: string;
+  galleryMediaIds?: string[];
+  tags?: string[];
+  seoMetaTitle?: string | null;
+  seoMetaDescription?: string | null;
+  status?: "draft" | "published" | "archived";
+};
+
+export async function listMeshkeeEntityCategories(
+  businessId: string,
+  entityType: CatalogEntityType,
+) {
+  const params = new URLSearchParams({ entityType });
+  const data = await apiRequest<{ items: MeshkeeEntityCategory[] }>(
+    `/businesses/${businessId}/categories?${params}`,
+    { auth: true },
+  );
+  return (data.items ?? []).map((item) => ({
+    ...item,
+    id: String(item.id),
+    parentId: item.parentId == null ? null : String(item.parentId),
+    description: item.description ?? "",
+    seoMetaTitle: item.seoMetaTitle ?? "",
+    seoMetaDescription: item.seoMetaDescription ?? "",
+  }));
+}
+
+export function categoryOptionLabel(category: MeshkeeEntityCategory) {
+  if (category.nameFa && category.nameFa !== category.name) {
+    return `${category.name} / ${category.nameFa}`;
+  }
+  return category.name || category.nameFa || "Category";
+}
+
+export async function createMeshkeeEntityCategory(
+  businessId: string,
+  entityType: CatalogEntityType,
+  body: UpsertCategoryInput,
+) {
+  return apiRequest(`/businesses/${businessId}/categories`, {
+    method: "POST",
+    auth: true,
+    body: {
+      entityType,
+      parentId: body.parentId || undefined,
+      name: body.name.trim(),
+      nameFa: body.nameFa?.trim() || undefined,
+      description: body.description?.trim() || undefined,
+      seoMetaTitle: body.seoMetaTitle?.trim() || null,
+      seoMetaDescription: body.seoMetaDescription?.trim() || null,
+    },
+  });
+}
+
+export async function updateMeshkeeEntityCategory(
+  businessId: string,
+  categoryId: string,
+  body: UpsertCategoryInput,
+) {
+  return apiRequest(`/businesses/${businessId}/categories/${categoryId}`, {
+    method: "PATCH",
+    auth: true,
+    body: {
+      parentId: body.parentId === undefined ? undefined : body.parentId || null,
+      name: body.name.trim(),
+      nameFa: body.nameFa?.trim() || null,
+      description: body.description?.trim() || null,
+      seoMetaTitle: body.seoMetaTitle?.trim() || null,
+      seoMetaDescription: body.seoMetaDescription?.trim() || null,
+    },
+  });
+}
+
+export async function deleteMeshkeeEntityCategory(
+  businessId: string,
+  categoryId: string,
+) {
+  return apiRequest<{ deletedIds?: string[] }>(
+    `/businesses/${businessId}/categories/${categoryId}`,
+    {
+      method: "DELETE",
+      auth: true,
+    },
+  );
+}
+
+export async function uploadMeshkeeMediaFile(businessId: string, file: File) {
+  const token = getAccessToken();
+  const form = new FormData();
+  form.append("files", file);
+  const base =
+    process.env.NEXT_PUBLIC_MESHKEE_API_URL?.replace(/\/$/, "") ||
+    "http://localhost:3010/api/v1";
+
+  const response = await fetch(`${base}/businesses/${businessId}/media`, {
+    method: "POST",
+    headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+    body: form,
+  });
+  const payload = await response.json().catch(() => null);
+  if (!response.ok) {
+    const message =
+      typeof payload?.message === "string"
+        ? payload.message
+        : Array.isArray(payload?.message)
+          ? payload.message.join(", ")
+          : `Upload failed (${response.status})`;
+    throw new Error(message);
+  }
+  const item = Array.isArray(payload?.items) ? payload.items[0] : payload;
+  return {
+    id: String(item.id),
+    publicUrl: String(item.publicUrl ?? item.url ?? ""),
+  };
+}
+
+export async function createMeshkeeProduct(
+  businessId: string,
+  body: CreateProductInput,
+) {
+  return apiRequest(`/businesses/${businessId}/products`, {
+    method: "POST",
+    auth: true,
+    body: { status: "published", ...body },
+  });
+}
+
+export async function createMeshkeeBlog(
+  businessId: string,
+  body: CreateBlogInput,
+) {
+  return apiRequest(`/businesses/${businessId}/blogs`, {
+    method: "POST",
+    auth: true,
+    body: { status: "published", ...body },
+  });
+}
+
+export async function createMeshkeePortfolio(
+  businessId: string,
+  body: CreatePortfolioInput,
+) {
+  return apiRequest(`/businesses/${businessId}/portfolios`, {
+    method: "POST",
+    auth: true,
+    body: { status: "published", ...body },
+  });
+}
diff --git a/services/meshkee-categories.ts b/services/meshkee-categories.ts
new file mode 100644
index 0000000..66eb1e0
--- /dev/null
+++ b/services/meshkee-categories.ts
@@ -0,0 +1,124 @@
+import { apiRequest } from "@/lib/meshkee-api";
+
+export interface MeshkeeCategory {
+  id: string;
+  parentId: string | null;
+  name: string;
+  nameFa: string | null;
+  slug: string;
+  description: string | null;
+  icon: string | null;
+  sortOrder: number;
+  tags: string[];
+}
+
+export type UpsertMeshkeeCategoryInput = {
+  parentId?: string | null;
+  name: string;
+  nameFa?: string;
+  description?: string;
+  slug?: string;
+  sortOrder?: number;
+  icon?: string;
+};
+
+function categoryLabel(category: {
+  name: string;
+  nameFa?: string | null;
+  slug: string;
+}) {
+  if (category.nameFa && category.nameFa !== category.name) {
+    return `${category.name} / ${category.nameFa}`;
+  }
+  return category.name;
+}
+
+function mapCategory(row: Record<string, unknown>): MeshkeeCategory {
+  return {
+    id: String(row.id),
+    parentId:
+      row.parentId == null && row.parent_id == null
+        ? null
+        : String(row.parentId ?? row.parent_id),
+    name: String(row.name ?? ""),
+    nameFa:
+      row.nameFa == null && row.name_fa == null
+        ? null
+        : String(row.nameFa ?? row.name_fa),
+    slug: String(row.slug ?? ""),
+    description: row.description == null ? null : String(row.description),
+    icon: row.icon == null ? null : String(row.icon),
+    sortOrder: Number(row.sortOrder ?? row.sort_order ?? 0),
+    tags: Array.isArray(row.tags) ? (row.tags as string[]) : [],
+  };
+}
+
+export async function searchMeshkeeCategories(
+  q: string,
+  signal?: AbortSignal,
+) {
+  const params = new URLSearchParams();
+  if (q.trim()) params.set("q", q.trim());
+
+  const data = await apiRequest<{ items: Record<string, unknown>[] }>(
+    `/business-categories?${params}`,
+    { auth: true, signal },
+  );
+
+  return (data.items ?? []).map((row) => mapCategory(row));
+}
+
+export async function createMeshkeeCategory(body: UpsertMeshkeeCategoryInput) {
+  const data = await apiRequest<{ item: Record<string, unknown> }>(
+    `/business-categories`,
+    {
+      method: "POST",
+      auth: true,
+      body: {
+        name: body.name.trim(),
+        nameFa: body.nameFa?.trim() || undefined,
+        description: body.description?.trim() || undefined,
+        parentId: body.parentId || undefined,
+        slug: body.slug?.trim() || undefined,
+        sortOrder: body.sortOrder,
+        icon: body.icon?.trim() || undefined,
+      },
+    },
+  );
+  return mapCategory(data.item ?? (data as unknown as Record<string, unknown>));
+}
+
+export async function updateMeshkeeCategory(
+  categoryId: string,
+  body: UpsertMeshkeeCategoryInput,
+) {
+  const data = await apiRequest<{ item: Record<string, unknown> }>(
+    `/business-categories/${categoryId}`,
+    {
+      method: "PATCH",
+      auth: true,
+      body: {
+        name: body.name.trim(),
+        nameFa: body.nameFa?.trim() || null,
+        description: body.description?.trim() || null,
+        parentId: body.parentId === undefined ? undefined : body.parentId || null,
+        slug: body.slug?.trim() || undefined,
+        sortOrder: body.sortOrder,
+        icon: body.icon?.trim() || null,
+      },
+    },
+  );
+  return mapCategory(data.item ?? (data as unknown as Record<string, unknown>));
+}
+
+export async function deleteMeshkeeCategory(categoryId: string) {
+  return apiRequest<{ deletedIds?: string[] }>(
+    `/business-categories/${categoryId}`,
+    {
+      method: "DELETE",
+      auth: true,
+    },
+  );
+}
+
+export { categoryLabel };
diff --git a/services/meshkee-cities.ts b/services/meshkee-cities.ts
new file mode 100644
index 0000000..f4ed238
--- /dev/null
+++ b/services/meshkee-cities.ts
@@ -0,0 +1,83 @@
+import { apiRequest } from "@/lib/meshkee-api";
+
+export type MeshkeeCityLevel = "country" | "province" | "city";
+
+export interface MeshkeeCity {
+  id: string;
+  parentId: string | null;
+  level: MeshkeeCityLevel;
+  nameFa: string;
+  nameEn: string;
+  landlineCode: string | null;
+  slug: string;
+  sortOrder: number;
+}
+
+export function cityLabel(city: Pick<MeshkeeCity, "nameEn" | "nameFa">) {
+  if (city.nameFa && city.nameFa !== city.nameEn) {
+    return `${city.nameEn} / ${city.nameFa}`;
+  }
+  return city.nameEn;
+}
+
+export function matchCityName(
+  cities: MeshkeeCity[],
+  name: string,
+): MeshkeeCity | undefined {
+  const needle = name.trim().toLowerCase();
+  if (!needle) return undefined;
+  return cities.find(
+    (city) =>
+      city.nameEn.toLowerCase() === needle ||
+      city.nameFa.toLowerCase() === needle ||
+      city.slug.toLowerCase() === needle,
+  );
+}
+
+export async function listMeshkeeCities(params: {
+  level?: MeshkeeCityLevel;
+  parentId?: string;
+  parentSlug?: string;
+  signal?: AbortSignal;
+}) {
+  const query = new URLSearchParams();
+  if (params.level) query.set("level", params.level);
+  if (params.parentId) query.set("parentId", params.parentId);
+  if (params.parentSlug) query.set("parentSlug", params.parentSlug);
+
+  const data = await apiRequest<{ items: Record<string, unknown>[] }>(
+    `/cities?${query}`,
+    { signal: params.signal },
+  );
+
+  return (data.items ?? []).map((row) => ({
+    id: String(row.id),
+    parentId: row.parentId == null ? null : String(row.parentId),
+    level: String(row.level ?? "city") as MeshkeeCityLevel,
+    nameFa: String(row.nameFa ?? ""),
+    nameEn: String(row.nameEn ?? ""),
+    landlineCode:
+      row.landlineCode == null ? null : String(row.landlineCode),
+    slug: String(row.slug ?? ""),
+    sortOrder: Number(row.sortOrder ?? 0),
+  })) satisfies MeshkeeCity[];
+}
+
+export async function listIranProvinces(signal?: AbortSignal) {
+  return listMeshkeeCities({
+    level: "province",
+    parentSlug: "iran",
+    signal,
+  });
+}
+
+export async function listCitiesInProvince(
+  provinceId: string,
+  signal?: AbortSignal,
+) {
+  return listMeshkeeCities({
+    level: "city",
+    parentId: provinceId,
+    signal,
+  });
+}
diff --git a/services/meshkee-content.ts b/services/meshkee-content.ts
new file mode 100644
index 0000000..9efc610
--- /dev/null
+++ b/services/meshkee-content.ts
@@ -0,0 +1,285 @@
+import { apiRequest, getAccessToken } from "@/lib/meshkee-api";
+
+export interface MeshkeeProduct {
+  id: string;
+  title: string;
+  nameFa?: string;
+  summary?: string;
+  slug: string;
+  status?: string;
+  categoryId?: string | null;
+  categoryName?: string;
+  categoryParentName?: string;
+  thumbnailUrl?: string | null;
+  image?: string;
+  thumbnail?: string;
+}
+
+export interface MeshkeeBlog {
+  id: string;
+  title: string;
+  slug: string;
+  abstract?: string | null;
+  titleImageUrl?: string | null;
+  createdAt?: string;
+}
+
+export interface MeshkeePortfolio {
+  id: string;
+  title?: string;
+  titleFa?: string | null;
+  titleEn?: string | null;
+  name?: string;
+  nameFa?: string | null;
+  nameEn?: string | null;
+  slug: string;
+  abstract?: string | null;
+  titleImageUrl?: string | null;
+  coverUrl?: string | null;
+  image?: string | null;
+}
+
+export interface MeshkeeMediaItem {
+  id: string;
+  mediaType: string;
+  publicUrl: string;
+  altText?: string | null;
+  fileName?: string | null;
+  width?: number | null;
+  height?: number | null;
+}
+
+export interface MeshkeeBusinessCategory {
+  id: string;
+  name: string;
+  nameFa?: string | null;
+  parentId: string | null;
+  slug?: string;
+  isActive?: boolean;
+}
+
+export type ListResponse<T> = {
+  items: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type ListOptions = {
+  page?: number;
+  pageSize?: number;
+};
+
+async function listResource<T>(
+  path: string,
+  options: ListOptions = {},
+): Promise<ListResponse<T>> {
+  const page = options.page ?? 1;
+  const pageSize = options.pageSize ?? 12;
+  const params = new URLSearchParams({
+    page: String(page),
+    pageSize: String(pageSize),
+  });
+  const data = await apiRequest<ListResponse<T>>(`${path}?${params}`, {
+    auth: true,
+  });
+  return {
+    items: (data.items ?? []).map((item) => ({
+      ...item,
+      id: String((item as { id: string | number }).id),
+    })),
+    total: data.total ?? 0,
+    page: data.page ?? page,
+    pageSize: data.pageSize ?? pageSize,
+  };
+}
+
+export function listMeshkeeProducts(
+  businessId: string,
+  options: ListOptions = {},
+) {
+  return listResource<MeshkeeProduct>(
+    `/businesses/${businessId}/products`,
+    options,
+  );
+}
+
+export function listMeshkeeBlogs(
+  businessId: string,
+  options: ListOptions = {},
+) {
+  return listResource<MeshkeeBlog>(`/businesses/${businessId}/blogs`, options);
+}
+
+export function listMeshkeePortfolios(
+  businessId: string,
+  options: ListOptions = {},
+) {
+  return listResource<MeshkeePortfolio>(
+    `/businesses/${businessId}/portfolios`,
+    options,
+  );
+}
+
+export async function listMeshkeeGallery(
+  businessId: string,
+  options: ListOptions = {},
+) {
+  const page = options.page ?? 1;
+  const pageSize = options.pageSize ?? 16;
+  const params = new URLSearchParams({
+    page: String(page),
+    pageSize: String(pageSize),
+  });
+  const data = await apiRequest<ListResponse<MeshkeeMediaItem>>(
+    `/businesses/${businessId}/gallery?${params}`,
+    { auth: true },
+  );
+
+  return {
+    items: (data.items ?? []).map((item) => ({
+      ...item,
+      id: String(item.id),
+    })),
+    total: data.total ?? 0,
+    page: data.page ?? page,
+    pageSize: data.pageSize ?? pageSize,
+  };
+}
+
+export async function addMeshkeeGalleryItems(
+  businessId: string,
+  input: { files?: File[]; mediaIds?: string[] },
+) {
+  const token = getAccessToken();
+  const base =
+    process.env.NEXT_PUBLIC_MESHKEE_API_URL?.replace(/\/$/, "") ||
+    "http://localhost:3010/api/v1";
+
+  if (input.files?.length) {
+    const form = new FormData();
+    for (const file of input.files) {
+      form.append("files", file);
+    }
+    if (input.mediaIds?.length) {
+      form.append("mediaIds", JSON.stringify(input.mediaIds));
+    }
+
+    const response = await fetch(`${base}/businesses/${businessId}/gallery`, {
+      method: "POST",
+      headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+      body: form,
+    });
+    const payload = await response.json().catch(() => null);
+    if (!response.ok) {
+      const message =
+        typeof payload?.message === "string"
+          ? payload.message
+          : Array.isArray(payload?.message)
+            ? payload.message.join(", ")
+            : `Upload failed (${response.status})`;
+      throw new Error(message);
+    }
+    return {
+      items: ((payload?.items ?? []) as MeshkeeMediaItem[]).map((item) => ({
+        ...item,
+        id: String(item.id),
+      })),
+    };
+  }
+
+  const data = await apiRequest<{ items: MeshkeeMediaItem[] }>(
+    `/businesses/${businessId}/gallery`,
+    {
+      method: "POST",
+      auth: true,
+      body: { mediaIds: input.mediaIds ?? [] },
+    },
+  );
+  return {
+    items: (data.items ?? []).map((item) => ({
+      ...item,
+      id: String(item.id),
+    })),
+  };
+}
+
+export async function deleteMeshkeeGalleryItem(
+  businessId: string,
+  mediaId: string,
+) {
+  await apiRequest(`/businesses/${businessId}/gallery/${mediaId}`, {
+    method: "DELETE",
+    auth: true,
+  });
+}
+
+export async function listMeshkeeBusinessCategories(businessId: string) {
+  const data = await apiRequest<{ items: MeshkeeBusinessCategory[] }>(
+    `/businesses/${businessId}/categories`,
+    { auth: true },
+  );
+
+  return (data.items ?? []).map((item) => ({
+    ...item,
+    id: String(item.id),
+    parentId: item.parentId == null ? null : String(item.parentId),
+  }));
+}
+
+export async function deleteMeshkeeProduct(
+  businessId: string,
+  productId: string,
+) {
+  await apiRequest(`/businesses/${businessId}/products/${productId}`, {
+    method: "DELETE",
+    auth: true,
+  });
+}
+
+export async function deleteMeshkeeBlog(businessId: string, blogId: string) {
+  await apiRequest(`/businesses/${businessId}/blogs/${blogId}`, {
+    method: "DELETE",
+    auth: true,
+  });
+}
+
+export async function deleteMeshkeeMedia(businessId: string, mediaId: string) {
+  await apiRequest(`/businesses/${businessId}/media/${mediaId}`, {
+    method: "DELETE",
+    auth: true,
+  });
+}
+
+export async function deleteMeshkeePortfolio(
+  businessId: string,
+  portfolioId: string,
+) {
+  await apiRequest(`/businesses/${businessId}/portfolios/${portfolioId}`, {
+    method: "DELETE",
+    auth: true,
+  });
+}
+
+/** Collect category id plus all descendant ids. */
+export function collectCategorySubtreeIds(
+  categories: MeshkeeBusinessCategory[],
+  rootId: string,
+): Set<string> {
+  const ids = new Set<string>([rootId]);
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const category of categories) {
+      if (
+        category.parentId &&
+        ids.has(category.parentId) &&
+        !ids.has(category.id)
+      ) {
+        ids.add(category.id);
+        grew = true;
+      }
+    }
+  }
+  return ids;
+}
diff --git a/services/special-businesses.ts b/services/special-businesses.ts
new file mode 100644
index 0000000..5d12bf6
--- /dev/null
+++ b/services/special-businesses.ts
@@ -0,0 +1,76 @@
+import { getAccessToken } from "@/lib/meshkee-api";
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_MARKETPLACE_API_URL?.replace(/\/$/, "") ||
+  "http://localhost:3001/api/v1";
+
+export type SpecialCarousel = {
+  id: string;
+  title: string;
+  subtext: string;
+  slug: string;
+  businessIds: string[];
+};
+
+export type SpecialBusinessesConfig = {
+  carousels: SpecialCarousel[];
+};
+
+async function parseResponse<T>(response: Response): Promise<T> {
+  const payload = await response.json().catch(() => null);
+  if (!response.ok) {
+    const message =
+      typeof payload?.message === "string"
+        ? payload.message
+        : Array.isArray(payload?.message)
+          ? payload.message.join(", ")
+          : `Request failed (${response.status})`;
+    throw new Error(message);
+  }
+  return payload as T;
+}
+
+export async function getSpecialBusinesses(): Promise<SpecialBusinessesConfig> {
+  const response = await fetch(`${API_BASE_URL}/website/special-businesses`, {
+    cache: "no-store",
+  });
+  return parseResponse<SpecialBusinessesConfig>(response);
+}
+
+export async function saveSpecialBusinesses(
+  body: SpecialBusinessesConfig,
+): Promise<SpecialBusinessesConfig> {
+  const response = await fetch(`${API_BASE_URL}/website/special-businesses`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      ...(getAccessToken()
+        ? { Authorization: `Bearer ${getAccessToken()}` }
+        : {}),
+    },
+    body: JSON.stringify(body),
+  });
+  return parseResponse<SpecialBusinessesConfig>(response);
+}
+
+export function slugFromTitle(title: string) {
+  return (
+    title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "") || "carousel"
+  );
+}
+
+export function newCarousel(
+  title = "New carousel",
+  subtext = "",
+): SpecialCarousel {
+  return {
+    id: `carousel-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+    title,
+    subtext,
+    slug: slugFromTitle(title),
+    businessIds: [],
+  };
+}
diff --git a/services/website-blog.ts b/services/website-blog.ts
new file mode 100644
index 0000000..52060d2
--- /dev/null
+++ b/services/website-blog.ts
@@ -0,0 +1,216 @@
+import { getAccessToken } from "@/lib/meshkee-api";
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_MARKETPLACE_API_URL?.replace(/\/$/, "") ||
+  "http://localhost:3001/api/v1";
+
+function apiOrigin() {
+  return API_BASE_URL.replace(/\/api\/v1$/, "");
+}
+
+export type WebsiteBlogCategory = {
+  id: string;
+  name: string;
+  nameFa?: string | null;
+  description?: string | null;
+  parentId: string | null;
+  createdAt?: string;
+};
+
+export type UpsertWebsiteBlogCategoryInput = {
+  name: string;
+  nameFa?: string;
+  description?: string;
+  parentId?: string | null;
+};
+
+export type WebsiteBlogPost = {
+  id: string;
+  title: string;
+  abstract?: string | null;
+  mainTextHtml?: string | null;
+  imageUrl?: string | null;
+  categoryId: string;
+  categoryName: string;
+  tags: string[];
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type CreateWebsiteBlogPostInput = {
+  title: string;
+  categoryId: string;
+  abstract?: string;
+  mainTextHtml?: string;
+  imageUrl?: string;
+  tags?: string[];
+};
+
+async function parseResponse<T>(response: Response): Promise<T> {
+  const payload = await response.json().catch(() => null);
+  if (!response.ok) {
+    const message =
+      typeof payload?.message === "string"
+        ? payload.message
+        : Array.isArray(payload?.message)
+          ? payload.message.join(", ")
+          : `Request failed (${response.status})`;
+    throw new Error(message);
+  }
+  return payload as T;
+}
+
+function authHeaders(json = false): HeadersInit {
+  const headers: Record<string, string> = {};
+  if (json) headers["Content-Type"] = "application/json";
+  const token = getAccessToken();
+  if (token) headers.Authorization = `Bearer ${token}`;
+  return headers;
+}
+
+export function toStoredMediaUrl(url: string) {
+  if (!url) return url;
+  const origin = apiOrigin();
+  if (url.startsWith(origin)) return url.slice(origin.length);
+  return url;
+}
+
+export function toDisplayMediaUrl(url: string) {
+  if (!url) return url;
+  if (url.startsWith("http://") || url.startsWith("https://")) return url;
+  if (url.startsWith("/api/v1/")) return `${apiOrigin()}${url}`;
+  return url;
+}
+
+function rewriteSrc(
+  html: string,
+  map: (src: string) => string,
+) {
+  return html.replace(
+    /(<img\b[^>]*\bsrc=["'])([^"']*)(["'])/gi,
+    (_match, start: string, src: string, end: string) =>
+      `${start}${map(src)}${end}`,
+  );
+}
+
+export function toStoredHtml(html: string) {
+  return rewriteSrc(html, toStoredMediaUrl);
+}
+
+export function toEditorHtml(html: string) {
+  return rewriteSrc(html, toDisplayMediaUrl);
+}
+
+export async function listWebsiteBlogCategories() {
+  const response = await fetch(`${API_BASE_URL}/website/blog/categories`, {
+    cache: "no-store",
+    headers: authHeaders(),
+  });
+  const data = await parseResponse<{ items: WebsiteBlogCategory[] }>(response);
+  return (data.items ?? []).map(normalizeCategory);
+}
+
+function normalizeCategory(item: WebsiteBlogCategory): WebsiteBlogCategory {
+  return {
+    ...item,
+    id: String(item.id),
+    parentId: item.parentId == null ? null : String(item.parentId),
+    nameFa: item.nameFa ?? null,
+    description: item.description ?? null,
+  };
+}
+
+function categoryBody(input: UpsertWebsiteBlogCategoryInput) {
+  return {
+    name: input.name,
+    nameFa: input.nameFa?.trim() || undefined,
+    description: input.description?.trim() || undefined,
+    ...(input.parentId ? { parentId: input.parentId } : {}),
+  };
+}
+
+export async function createWebsiteBlogCategory(
+  input: UpsertWebsiteBlogCategoryInput,
+) {
+  const response = await fetch(`${API_BASE_URL}/website/blog/categories`, {
+    method: "POST",
+    headers: authHeaders(true),
+    body: JSON.stringify(categoryBody(input)),
+  });
+  const item = await parseResponse<WebsiteBlogCategory>(response);
+  return normalizeCategory(item);
+}
+
+export async function updateWebsiteBlogCategory(
+  id: string,
+  input: UpsertWebsiteBlogCategoryInput,
+) {
+  const response = await fetch(
+    `${API_BASE_URL}/website/blog/categories/${encodeURIComponent(id)}`,
+    {
+      method: "PATCH",
+      headers: authHeaders(true),
+      body: JSON.stringify(categoryBody(input)),
+    },
+  );
+  const item = await parseResponse<WebsiteBlogCategory>(response);
+  return normalizeCategory(item);
+}
+
+export async function deleteWebsiteBlogCategory(id: string) {
+  const response = await fetch(
+    `${API_BASE_URL}/website/blog/categories/${encodeURIComponent(id)}`,
+    {
+      method: "DELETE",
+      headers: authHeaders(),
+    },
+  );
+  return parseResponse<{ ok: boolean }>(response);
+}
+
+export async function listWebsiteBlogPosts() {
+  const response = await fetch(`${API_BASE_URL}/website/blog/posts`, {
+    cache: "no-store",
+    headers: authHeaders(),
+  });
+  const data = await parseResponse<{
+    items: WebsiteBlogPost[];
+    total: number;
+  }>(response);
+  return {
+    total: data.total ?? data.items?.length ?? 0,
+    items: (data.items ?? []).map((item) => ({
+      ...item,
+      id: String(item.id),
+      categoryId: String(item.categoryId),
+      imageUrl: item.imageUrl ? toDisplayMediaUrl(item.imageUrl) : item.imageUrl,
+      tags: item.tags ?? [],
+    })),
+  };
+}
+
+export async function createWebsiteBlogPost(input: CreateWebsiteBlogPostInput) {
+  const response = await fetch(`${API_BASE_URL}/website/blog/posts`, {
+    method: "POST",
+    headers: authHeaders(true),
+    body: JSON.stringify({
+      ...input,
+      imageUrl: input.imageUrl ? toStoredMediaUrl(input.imageUrl) : undefined,
+      mainTextHtml: input.mainTextHtml
+        ? toStoredHtml(input.mainTextHtml)
+        : undefined,
+    }),
+  });
+  return parseResponse<WebsiteBlogPost>(response);
+}
+
+export async function deleteWebsiteBlogPost(id: string) {
+  const response = await fetch(
+    `${API_BASE_URL}/website/blog/posts/${encodeURIComponent(id)}`,
+    {
+      method: "DELETE",
+      headers: authHeaders(),
+    },
+  );
+  return parseResponse<{ ok: boolean }>(response);
+}
diff --git a/services/website-media.ts b/services/website-media.ts
new file mode 100644
index 0000000..a217822
--- /dev/null
+++ b/services/website-media.ts
@@ -0,0 +1,133 @@
+import { getAccessToken } from "@/lib/meshkee-api";
+
+const API_BASE_URL =
+  process.env.NEXT_PUBLIC_MARKETPLACE_API_URL?.replace(/\/$/, "") ||
+  "http://localhost:3001/api/v1";
+
+const WEBSITE_ORIGIN =
+  process.env.NEXT_PUBLIC_WEBSITE_URL?.replace(/\/$/, "") ||
+  "http://localhost:3000";
+
+export type WebsiteMediaItem = {
+  id: string;
+  imageUrl: string;
+  linkUrl: string;
+  title?: string;
+  subtitle?: string;
+  cta?: string;
+};
+
+export type WebsiteHomeMedia = {
+  slider: WebsiteMediaItem[];
+  standingBanners: WebsiteMediaItem[];
+  categories: WebsiteMediaItem[];
+  menuImages: WebsiteMediaItem[];
+  aboutUs: WebsiteMediaItem;
+  banners: WebsiteMediaItem[];
+};
+
+function resolveMediaUrl(url: string) {
+  if (!url) return url;
+  if (url.startsWith("http://") || url.startsWith("https://")) return url;
+  // Uploaded files live on the IranBay marketplace API.
+  if (url.startsWith("/api/v1/")) {
+    const origin = API_BASE_URL.replace(/\/api\/v1$/, "");
+    return `${origin}${url}`;
+  }
+  // Bundled homepage assets live on the public website.
+  if (url.startsWith("/")) {
+    return `${WEBSITE_ORIGIN}${url}`;
+  }
+  return url;
+}
+
+async function parseResponse<T>(response: Response): Promise<T> {
+  const payload = await response.json().catch(() => null);
+  if (!response.ok) {
+    const message =
+      typeof payload?.message === "string"
+        ? payload.message
+        : Array.isArray(payload?.message)
+          ? payload.message.join(", ")
+          : `Request failed (${response.status})`;
+    throw new Error(message);
+  }
+  return payload as T;
+}
+
+export async function getWebsiteHomeMedia(): Promise<WebsiteHomeMedia> {
+  const response = await fetch(`${API_BASE_URL}/website/home-media`, {
+    cache: "no-store",
+  });
+  const data = await parseResponse<WebsiteHomeMedia>(response);
+  return {
+    ...data,
+    slider: data.slider.map((item) => ({
+      ...item,
+      imageUrl: resolveMediaUrl(item.imageUrl),
+    })),
+    standingBanners: data.standingBanners.map((item) => ({
+      ...item,
+      imageUrl: resolveMediaUrl(item.imageUrl),
+    })),
+    categories: data.categories.map((item) => ({
+      ...item,
+      imageUrl: resolveMediaUrl(item.imageUrl),
+    })),
+    menuImages: (data.menuImages ?? []).map((item) => ({
+      ...item,
+      imageUrl: resolveMediaUrl(item.imageUrl),
+    })),
+    aboutUs: {
+      ...data.aboutUs,
+      imageUrl: resolveMediaUrl(data.aboutUs.imageUrl),
+    },
+    banners: data.banners.map((item) => ({
+      ...item,
+      imageUrl: resolveMediaUrl(item.imageUrl),
+    })),
+  };
+}
+
+export async function saveWebsiteHomeMedia(
+  body: WebsiteHomeMedia,
+): Promise<WebsiteHomeMedia> {
+  const response = await fetch(`${API_BASE_URL}/website/home-media`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+      ...(getAccessToken()
+        ? { Authorization: `Bearer ${getAccessToken()}` }
+        : {}),
+    },
+    body: JSON.stringify(body),
+  });
+  return parseResponse<WebsiteHomeMedia>(response);
+}
+
+export async function uploadWebsiteMedia(file: File): Promise<string> {
+  const form = new FormData();
+  form.append("file", file);
+  const headers: HeadersInit = {};
+  const token = getAccessToken();
+  if (token) headers.Authorization = `Bearer ${token}`;
+
+  const response = await fetch(`${API_BASE_URL}/website/upload`, {
+    method: "POST",
+    headers,
+    body: form,
+  });
+  const data = await parseResponse<{ url: string }>(response);
+  return resolveMediaUrl(data.url);
+}
+
+export function newMediaItem(
+  partial?: Partial<WebsiteMediaItem>,
+): WebsiteMediaItem {
+  return {
+    id: `item-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+    imageUrl: "",
+    linkUrl: "/",
+    ...partial,
+  };
+}
diff --git a/styles/ai.module.css b/styles/ai.module.css
new file mode 100644
index 0000000..f5e5818
--- /dev/null
+++ b/styles/ai.module.css
@@ -0,0 +1,112 @@
+@keyframes aiBtnGradientFlow {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes aiRainbowShift {
+  0% {
+    background-position: 0% 50%;
+  }
+
+  100% {
+    background-position: 200% 50%;
+  }
+}
+
+.aiTrigger {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  z-index: 0;
+  transition:
+    color 0.35s ease,
+    border-color 0.35s ease,
+    background-color 0.35s ease,
+    box-shadow 0.35s ease;
+}
+
+.aiTrigger::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  background-image: linear-gradient(
+    135deg,
+    #2dd4bf 0%,
+    #38bdf8 12%,
+    #4338ca 28%,
+    #9333ea 44%,
+    #ec4899 58%,
+    #f97316 72%,
+    #fb923c 86%,
+    #facc15 100%
+  );
+  background-size: 250% 250%;
+  background-position: 0% 50%;
+  transition: opacity 0.35s ease;
+  animation: aiBtnGradientFlow 4s ease-in-out infinite;
+  animation-play-state: paused;
+}
+
+.aiTrigger:hover:not(:disabled),
+.aiTrigger:focus-visible:not(:disabled) {
+  color: #fff;
+  border-color: transparent;
+  background-color: transparent;
+  background-image: none;
+  box-shadow:
+    0 4px 16px rgba(67, 56, 202, 0.28),
+    0 0 24px rgba(236, 72, 153, 0.16);
+}
+
+.aiTrigger:hover:not(:disabled)::before,
+.aiTrigger:focus-visible:not(:disabled)::before {
+  opacity: 1;
+  animation-play-state: running;
+}
+
+.aiWorkingBorder {
+  border: 2px solid transparent !important;
+  background-color: #fff;
+  background-image:
+    linear-gradient(#fff, #fff),
+    linear-gradient(
+      90deg,
+      #ff375f 0%,
+      #ff8a00 14%,
+      #ffd60a 28%,
+      #30d158 42%,
+      #64d2ff 56%,
+      #0a84ff 70%,
+      #bf5af2 84%,
+      #ff375f 100%
+    );
+  background-size: auto, 200% 100%;
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  animation: aiRainbowShift 4s linear infinite;
+  box-shadow:
+    0 0 0 1px rgba(191, 90, 242, 0.14),
+    0 0 16px rgba(255, 55, 95, 0.28),
+    0 0 28px rgba(10, 132, 255, 0.2),
+    0 0 42px rgba(191, 90, 242, 0.16);
+  outline: none;
+  transition: box-shadow 0.35s ease;
+}
+
+.aiWorkingBorder:focus {
+  border: 2px solid transparent !important;
+  outline: none;
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..3a13f90
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/types/auth.ts b/types/auth.ts
new file mode 100644
index 0000000..a1d6df7
--- /dev/null
+++ b/types/auth.ts
@@ -0,0 +1,30 @@
+export type DashboardType = "super_admin" | "business" | "customer";
+
+export interface AuthUser {
+  id: string;
+  cellNumber: string;
+  email: string | null;
+  firstName: string | null;
+  lastName: string | null;
+  firstNameEn: string | null;
+  lastNameEn: string | null;
+  roles: string[];
+  dashboard: DashboardType;
+  businesses: {
+    id: string;
+    name: string;
+    slug: string;
+    isOwner: boolean;
+  }[];
+}
+
+export interface LoginResponse {
+  message: string;
+  user: AuthUser;
+  accessToken: string;
+  refreshToken: string;
+}
+
+export interface MeResponse {
+  user: AuthUser;
+}
diff --git a/types/business.ts b/types/business.ts
new file mode 100644
index 0000000..5c68626
--- /dev/null
+++ b/types/business.ts
@@ -0,0 +1,34 @@
+export type BusinessStatus =
+  | "draft"
+  | "pending_review"
+  | "published"
+  | "hidden"
+  | "rejected";
+
+/** Marketplace listing row. Name/category/profile live in Meshkee. */
+export interface MarketplaceBusiness {
+  id: string;
+  meshkeeBusinessId: string;
+  slug: string;
+  status: BusinessStatus;
+  isFeatured: boolean;
+  sortWeight: number;
+  publishedAt: string | null;
+  createdAt?: string;
+  updatedAt?: string;
+  /** Enriched client-side from Meshkee when available */
+  name?: string;
+  categoryId?: string;
+  categoryName?: string;
+  /** Last two category levels, e.g. "Industry / Construction" */
+  categoryTrail?: string;
+  logoUrl?: string;
+  bannerUrl?: string;
+}
+
+export interface BusinessListResponse {
+  items: MarketplaceBusiness[];
+  page: number;
+  limit: number;
+  total: number;
+}