From 323e9d6a9173e8bf5746eeebe4a5488876d21e7e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 5 Mar 2026 11:00:58 +0000
Subject: [PATCH 1/3] Initial plan


From 8a10900de3fca05acab385b2a718e0c9a1894d8e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 5 Mar 2026 11:23:15 +0000
Subject: [PATCH 2/3] feat: add Theme Marketplace and Theme Editor as
 multi-zone apps

- Prisma: Add MarketplaceTheme, ThemeInstallation, ThemeRating models + ThemeCategory/ThemeStatus enums
- types.ts: Add ThemeCategory, MarketplaceThemeMeta types; extend ThemeTemplateId with 8 new themes
- theme-templates.ts: 8 new categorised themes (TechNova, FashionForward, CafeBistro, GlowUp, HomeVibes, SportZone, JewelBox, Bookshelf)
- API: /api/marketplace/themes (GET list), /[id] (GET detail), /[id]/install (POST), /[id]/rate (POST)
- apps/theme-marketplace/: Full Next.js zone (basePath /themes) with gallery, filters, detail page
- apps/theme-editor/: Full Next.js zone (basePath /themes/editor) with live preview, sidebar (colors/typography/layout/CSS)
- next.config.ts: Multi-zone rewrites for /themes/* and /themes/editor/*
- Appearance page: Add Theme Marketplace & Theme Editor buttons
- theme-marketplace-panel.tsx: Add 8 new themes to helper functions + Full Marketplace link

Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>
---
 .env.example                                  |  11 +
 apps/theme-editor/next.config.ts              |  31 +
 apps/theme-editor/package.json                |  23 +
 apps/theme-editor/src/app/globals.css         |   1 +
 apps/theme-editor/src/app/layout.tsx          |  20 +
 apps/theme-editor/src/app/page.tsx            |  98 +++
 .../src/components/theme-editor-client.tsx    | 591 ++++++++++++++++++
 apps/theme-editor/src/lib/api.ts              |  87 +++
 apps/theme-editor/src/lib/types.ts            |  70 +++
 apps/theme-editor/tsconfig.json               |  22 +
 apps/theme-marketplace/next.config.ts         |  30 +
 apps/theme-marketplace/package.json           |  23 +
 apps/theme-marketplace/src/app/[id]/page.tsx  | 230 +++++++
 apps/theme-marketplace/src/app/globals.css    |   1 +
 apps/theme-marketplace/src/app/layout.tsx     |  71 +++
 apps/theme-marketplace/src/app/page.tsx       | 103 +++
 .../src/components/marketplace-filters.tsx    | 117 ++++
 .../src/components/theme-card.tsx             | 181 ++++++
 .../src/components/theme-detail-client.tsx    | 102 +++
 .../src/components/theme-gallery.tsx          | 162 +++++
 apps/theme-marketplace/src/lib/api.ts         |  41 ++
 apps/theme-marketplace/src/lib/types.ts       |  88 +++
 apps/theme-marketplace/tsconfig.json          |  22 +
 next.config.ts                                |  44 ++
 prisma/schema.prisma                          | 108 ++++
 .../marketplace/themes/[id]/install/route.ts  | 127 ++++
 .../api/marketplace/themes/[id]/rate/route.ts |  80 +++
 src/app/api/marketplace/themes/[id]/route.ts  |  90 +++
 src/app/api/marketplace/themes/route.ts       | 191 ++++++
 .../stores/[storeId]/appearance/page.tsx      |  16 +-
 .../editor/theme-marketplace-panel.tsx        |  37 +-
 src/lib/storefront/theme-templates.ts         | 379 ++++++++++-
 src/lib/storefront/types.ts                   |  61 +-
 tsconfig.json                                 |   1 +
 vercel.json                                   |   1 +
 35 files changed, 3222 insertions(+), 38 deletions(-)
 create mode 100644 apps/theme-editor/next.config.ts
 create mode 100644 apps/theme-editor/package.json
 create mode 100644 apps/theme-editor/src/app/globals.css
 create mode 100644 apps/theme-editor/src/app/layout.tsx
 create mode 100644 apps/theme-editor/src/app/page.tsx
 create mode 100644 apps/theme-editor/src/components/theme-editor-client.tsx
 create mode 100644 apps/theme-editor/src/lib/api.ts
 create mode 100644 apps/theme-editor/src/lib/types.ts
 create mode 100644 apps/theme-editor/tsconfig.json
 create mode 100644 apps/theme-marketplace/next.config.ts
 create mode 100644 apps/theme-marketplace/package.json
 create mode 100644 apps/theme-marketplace/src/app/[id]/page.tsx
 create mode 100644 apps/theme-marketplace/src/app/globals.css
 create mode 100644 apps/theme-marketplace/src/app/layout.tsx
 create mode 100644 apps/theme-marketplace/src/app/page.tsx
 create mode 100644 apps/theme-marketplace/src/components/marketplace-filters.tsx
 create mode 100644 apps/theme-marketplace/src/components/theme-card.tsx
 create mode 100644 apps/theme-marketplace/src/components/theme-detail-client.tsx
 create mode 100644 apps/theme-marketplace/src/components/theme-gallery.tsx
 create mode 100644 apps/theme-marketplace/src/lib/api.ts
 create mode 100644 apps/theme-marketplace/src/lib/types.ts
 create mode 100644 apps/theme-marketplace/tsconfig.json
 create mode 100644 src/app/api/marketplace/themes/[id]/install/route.ts
 create mode 100644 src/app/api/marketplace/themes/[id]/rate/route.ts
 create mode 100644 src/app/api/marketplace/themes/[id]/route.ts
 create mode 100644 src/app/api/marketplace/themes/route.ts

diff --git a/.env.example b/.env.example
index e8fcdd7c..d4b7dcb3 100644
--- a/.env.example
+++ b/.env.example
@@ -58,3 +58,14 @@ FACEBOOK_WEBHOOK_VERIFY_TOKEN=""
 FACEBOOK_ACCESS_LEVEL="STANDARD"
 FACEBOOK_CONVERSIONS_ACCESS_TOKEN=""
 FACEBOOK_TEST_EVENT_CODE="TEST89865"
+
+# ─────────────────────────────────────────────
+#  Multi-Zone: Theme Marketplace & Editor
+# ─────────────────────────────────────────────
+# URLs of the separately deployed zone apps.
+# In development: run apps/theme-marketplace on port 3001
+#                 and apps/theme-editor on port 3002.
+THEME_MARKETPLACE_URL="http://localhost:3001"
+THEME_EDITOR_URL="http://localhost:3002"
+# The main StormCom app URL (used by zone apps to call the main API)
+NEXT_PUBLIC_MAIN_APP_URL="http://localhost:3000"
diff --git a/apps/theme-editor/next.config.ts b/apps/theme-editor/next.config.ts
new file mode 100644
index 00000000..3707c00c
--- /dev/null
+++ b/apps/theme-editor/next.config.ts
@@ -0,0 +1,31 @@
+import type { NextConfig } from 'next';
+
+/**
+ * Theme Editor Zone Configuration
+ *
+ * basePath: /themes/editor — this zone handles all /themes/editor/* routes.
+ * In production the main StormCom app rewrites /themes/editor/* to this app.
+ * Run locally on port 3002 (`npm run dev` in apps/theme-editor).
+ */
+const nextConfig: NextConfig = {
+  basePath: '/themes/editor',
+  reactCompiler: true,
+  reactStrictMode: true,
+  typescript: { ignoreBuildErrors: false },
+  poweredByHeader: false,
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          { key: 'Access-Control-Allow-Origin', value: process.env.MAIN_APP_URL ?? '*' },
+          { key: 'Access-Control-Allow-Credentials', value: 'true' },
+          // Allow the editor itself to embed the store preview iframe
+          { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;
diff --git a/apps/theme-editor/package.json b/apps/theme-editor/package.json
new file mode 100644
index 00000000..d31377ec
--- /dev/null
+++ b/apps/theme-editor/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@stormcom/theme-editor",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3002",
+    "build": "next build",
+    "start": "next start --port 3002",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^16.1.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "5.9.3"
+  }
+}
diff --git a/apps/theme-editor/src/app/globals.css b/apps/theme-editor/src/app/globals.css
new file mode 100644
index 00000000..f1d8c73c
--- /dev/null
+++ b/apps/theme-editor/src/app/globals.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/apps/theme-editor/src/app/layout.tsx b/apps/theme-editor/src/app/layout.tsx
new file mode 100644
index 00000000..da5cf479
--- /dev/null
+++ b/apps/theme-editor/src/app/layout.tsx
@@ -0,0 +1,20 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Theme Editor — StormCom',
+    template: '%s | Theme Editor',
+  },
+  description: 'Customize your storefront theme with live preview.',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="h-screen overflow-hidden bg-gray-100 text-gray-900 antialiased">
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/apps/theme-editor/src/app/page.tsx b/apps/theme-editor/src/app/page.tsx
new file mode 100644
index 00000000..a9588f1c
--- /dev/null
+++ b/apps/theme-editor/src/app/page.tsx
@@ -0,0 +1,98 @@
+import type { Metadata } from 'next';
+import { ThemeEditorClient } from '@/components/theme-editor-client';
+import { fetchStorefrontDraft, fetchStorefrontConfig, fetchStoreInfo, fetchThemeConfig } from '@/lib/api';
+import type { ThemeSettings } from '@/lib/types';
+
+export const metadata: Metadata = { title: 'Theme Editor' };
+
+const MAIN_APP_URL = process.env.NEXT_PUBLIC_MAIN_APP_URL ?? 'http://localhost:3000';
+
+// Default theme if nothing can be loaded
+const DEFAULT_THEME: ThemeSettings = {
+  templateId: 'modern',
+  colors: {
+    primary: '#4F46E5',
+    secondary: '#10B981',
+    accent: '#F59E0B',
+    background: '#FFFFFF',
+    foreground: '#111827',
+    muted: '#F3F4F6',
+  },
+  typography: {
+    fontFamily: 'geist',
+    baseFontSize: 16,
+    headingScale: 1.25,
+  },
+  layout: 'full-width',
+  borderRadius: 'lg',
+};
+
+interface SearchParams {
+  storeId?: string;
+  themeId?: string;
+}
+
+export default async function ThemeEditorPage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>;
+}) {
+  const { storeId, themeId } = await searchParams;
+
+  if (!storeId) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-4 text-center px-4">
+        <div className="rounded-xl border border-amber-200 bg-amber-50 px-6 py-5 max-w-md">
+          <h2 className="font-semibold text-amber-900">No Store Selected</h2>
+          <p className="mt-2 text-sm text-amber-700">
+            Please open the Theme Editor from your dashboard or the Theme Marketplace.
+          </p>
+          <div className="mt-4 flex gap-3 justify-center">
+            <a
+              href="/dashboard"
+              className="rounded-lg bg-amber-600 px-4 py-2 text-sm font-semibold text-white hover:bg-amber-700"
+            >
+              Go to Dashboard
+            </a>
+            <a
+              href="/themes"
+              className="rounded-lg border border-amber-300 px-4 py-2 text-sm font-semibold text-amber-700 hover:bg-amber-100"
+            >
+              Browse Themes
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Load store info, draft, and marketplace theme in parallel
+  const [storeInfo, draft, marketplaceThemeConfig] = await Promise.all([
+    fetchStoreInfo(storeId),
+    fetchStorefrontDraft(storeId).catch(() => null),
+    themeId ? fetchThemeConfig(themeId).catch(() => null) : Promise.resolve(null),
+  ]);
+
+  // Fall back to published config if no draft
+  const publishedConfig = !draft ? await fetchStorefrontConfig(storeId).catch(() => null) : null;
+  const config = draft ?? publishedConfig;
+
+  // Theme priority: marketplace theme URL param > draft/published > default
+  const initialTheme: ThemeSettings =
+    (marketplaceThemeConfig as ThemeSettings | null) ??
+    (config?.theme as ThemeSettings | undefined) ??
+    DEFAULT_THEME;
+
+  const storeName = storeInfo?.name ?? 'My Store';
+  const storeSlug = storeInfo?.slug ?? storeId;
+
+  return (
+    <ThemeEditorClient
+      storeId={storeId}
+      storeName={storeName}
+      storeSlug={storeSlug}
+      previewBaseUrl={MAIN_APP_URL}
+      initialTheme={initialTheme}
+    />
+  );
+}
diff --git a/apps/theme-editor/src/components/theme-editor-client.tsx b/apps/theme-editor/src/components/theme-editor-client.tsx
new file mode 100644
index 00000000..0751fc20
--- /dev/null
+++ b/apps/theme-editor/src/components/theme-editor-client.tsx
@@ -0,0 +1,591 @@
+'use client';
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { ThemeSettings, FontFamily } from '@/lib/types';
+import { saveDraft, publishDraft } from '@/lib/api';
+
+const FONT_OPTIONS: FontFamily[] = ['geist', 'inter', 'roboto', 'poppins', 'montserrat', 'playfair'];
+const BORDER_RADIUS_OPTIONS = ['none', 'sm', 'md', 'lg', 'xl'] as const;
+const LAYOUT_OPTIONS = ['full-width', 'boxed', 'centered'] as const;
+
+interface Props {
+  storeId: string;
+  storeName: string;
+  storeSlug: string;
+  previewBaseUrl: string;
+  initialTheme: ThemeSettings;
+}
+
+type ColorKey = keyof ThemeSettings['colors'];
+
+const COLOR_LABELS: Record<ColorKey, string> = {
+  primary: 'Primary',
+  secondary: 'Secondary',
+  accent: 'Accent',
+  background: 'Background',
+  foreground: 'Text',
+  muted: 'Muted',
+};
+
+export function ThemeEditorClient({ storeId, storeName, storeSlug, previewBaseUrl, initialTheme }: Props) {
+  const [theme, setTheme] = useState<ThemeSettings>(initialTheme);
+  const [isDirty, setIsDirty] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isPublishing, setIsPublishing] = useState(false);
+  const [saveError, setSaveError] = useState('');
+  const [publishSuccess, setPublishSuccess] = useState(false);
+  const [activeSection, setActiveSection] = useState<'colors' | 'typography' | 'layout' | 'css'>('colors');
+  const [previewDevice, setPreviewDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const autosaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const previewUrl = `${previewBaseUrl}/store/${storeSlug}?preview=1&t=${Date.now()}`;
+
+  // Send live theme updates to the preview iframe
+  const sendThemeToPreview = useCallback((t: ThemeSettings) => {
+    iframeRef.current?.contentWindow?.postMessage(
+      { type: 'STORMCOM_THEME_UPDATE', theme: t },
+      '*'
+    );
+  }, []);
+
+  // Auto-save draft after 2 seconds of inactivity
+  useEffect(() => {
+    if (!isDirty) return;
+    if (autosaveTimer.current) clearTimeout(autosaveTimer.current);
+    autosaveTimer.current = setTimeout(async () => {
+      setIsSaving(true);
+      setSaveError('');
+      try {
+        await saveDraft(storeId, theme);
+        setIsDirty(false);
+      } catch (e) {
+        setSaveError(e instanceof Error ? e.message : 'Auto-save failed');
+      } finally {
+        setIsSaving(false);
+      }
+    }, 2000);
+    return () => { if (autosaveTimer.current) clearTimeout(autosaveTimer.current); };
+  }, [theme, isDirty, storeId]);
+
+  const updateColor = useCallback((key: ColorKey, value: string) => {
+    setTheme((prev) => {
+      const next = { ...prev, colors: { ...prev.colors, [key]: value } };
+      sendThemeToPreview(next);
+      return next;
+    });
+    setIsDirty(true);
+    setPublishSuccess(false);
+  }, [sendThemeToPreview]);
+
+  const updateTypography = useCallback(<K extends keyof ThemeSettings['typography']>(
+    key: K,
+    value: ThemeSettings['typography'][K]
+  ) => {
+    setTheme((prev) => {
+      const next = { ...prev, typography: { ...prev.typography, [key]: value } };
+      sendThemeToPreview(next);
+      return next;
+    });
+    setIsDirty(true);
+    setPublishSuccess(false);
+  }, [sendThemeToPreview]);
+
+  const updateLayout = useCallback((layout: ThemeSettings['layout']) => {
+    setTheme((prev) => {
+      const next = { ...prev, layout };
+      sendThemeToPreview(next);
+      return next;
+    });
+    setIsDirty(true);
+    setPublishSuccess(false);
+  }, [sendThemeToPreview]);
+
+  const updateBorderRadius = useCallback((borderRadius: ThemeSettings['borderRadius']) => {
+    setTheme((prev) => {
+      const next = { ...prev, borderRadius };
+      sendThemeToPreview(next);
+      return next;
+    });
+    setIsDirty(true);
+    setPublishSuccess(false);
+  }, [sendThemeToPreview]);
+
+  const updateCustomCSS = useCallback((customCSS: string) => {
+    setTheme((prev) => {
+      const next = { ...prev, customCSS };
+      sendThemeToPreview(next);
+      return next;
+    });
+    setIsDirty(true);
+    setPublishSuccess(false);
+  }, [sendThemeToPreview]);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    setSaveError('');
+    try {
+      await saveDraft(storeId, theme);
+      setIsDirty(false);
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : 'Save failed');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handlePublish = async () => {
+    setIsPublishing(true);
+    setSaveError('');
+    setPublishSuccess(false);
+    try {
+      // Save first to ensure latest changes are in draft
+      await saveDraft(storeId, theme);
+      await publishDraft(storeId);
+      setIsDirty(false);
+      setPublishSuccess(true);
+    } catch (e) {
+      setSaveError(e instanceof Error ? e.message : 'Publish failed');
+    } finally {
+      setIsPublishing(false);
+    }
+  };
+
+  const handleReset = () => {
+    setTheme(initialTheme);
+    sendThemeToPreview(initialTheme);
+    setIsDirty(false);
+    setPublishSuccess(false);
+    setSaveError('');
+  };
+
+  const previewWidth =
+    previewDevice === 'mobile' ? 375 :
+    previewDevice === 'tablet' ? 768 :
+    '100%';
+
+  return (
+    <div className="flex h-screen flex-col bg-gray-100">
+      {/* ── Top toolbar ──────────────────────────────────────── */}
+      <header className="flex h-14 shrink-0 items-center justify-between border-b border-gray-200 bg-white px-4 shadow-sm">
+        <div className="flex items-center gap-3">
+          <a
+            href="/themes"
+            className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-900"
+          >
+            <svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+            </svg>
+            Marketplace
+          </a>
+          <span className="text-gray-300">|</span>
+          <span className="text-sm font-semibold text-gray-900">{storeName}</span>
+          {isDirty && (
+            <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">
+              Unsaved
+            </span>
+          )}
+          {isSaving && (
+            <span className="text-xs text-gray-400">Saving…</span>
+          )}
+          {publishSuccess && (
+            <span className="flex items-center gap-1 text-xs text-green-600">
+              <svg className="h-3 w-3" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              Published!
+            </span>
+          )}
+        </div>
+
+        {/* Device switcher */}
+        <div className="hidden sm:flex items-center gap-1 rounded-lg border border-gray-200 bg-gray-50 p-1">
+          {(['desktop', 'tablet', 'mobile'] as const).map((d) => (
+            <button
+              key={d}
+              onClick={() => setPreviewDevice(d)}
+              title={d}
+              className={`rounded-md p-1.5 transition-colors ${
+                previewDevice === d ? 'bg-white shadow-sm text-indigo-600' : 'text-gray-400 hover:text-gray-600'
+              }`}
+            >
+              {d === 'desktop' && (
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <rect x="2" y="3" width="20" height="14" rx="2" />
+                  <path d="M8 21h8M12 17v4" />
+                </svg>
+              )}
+              {d === 'tablet' && (
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <rect x="4" y="2" width="16" height="20" rx="2" />
+                  <circle cx="12" cy="18" r="1" fill="currentColor" />
+                </svg>
+              )}
+              {d === 'mobile' && (
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <rect x="7" y="2" width="10" height="20" rx="2" />
+                  <circle cx="12" cy="18" r="1" fill="currentColor" />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-2">
+          {saveError && (
+            <span className="text-xs text-red-600">{saveError}</span>
+          )}
+          <button
+            onClick={handleReset}
+            disabled={!isDirty}
+            className="rounded-lg border border-gray-200 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-50 disabled:opacity-40"
+          >
+            Reset
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={isSaving || !isDirty}
+            className="rounded-lg border border-gray-200 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-40"
+          >
+            {isSaving ? 'Saving…' : 'Save Draft'}
+          </button>
+          <button
+            onClick={handlePublish}
+            disabled={isPublishing}
+            className="rounded-lg bg-indigo-600 px-4 py-1.5 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-60"
+          >
+            {isPublishing ? 'Publishing…' : 'Publish'}
+          </button>
+        </div>
+      </header>
+
+      {/* ── Main area: sidebar + preview ──────────────────────── */}
+      <div className="flex flex-1 overflow-hidden">
+        {/* Sidebar */}
+        <aside className="flex w-72 shrink-0 flex-col border-r border-gray-200 bg-white overflow-hidden">
+          {/* Section tabs */}
+          <div className="flex border-b border-gray-200">
+            {(['colors', 'typography', 'layout', 'css'] as const).map((s) => (
+              <button
+                key={s}
+                onClick={() => setActiveSection(s)}
+                className={`flex-1 py-3 text-xs font-medium capitalize transition-colors ${
+                  activeSection === s
+                    ? 'border-b-2 border-indigo-600 text-indigo-600'
+                    : 'text-gray-500 hover:text-gray-900'
+                }`}
+              >
+                {s === 'css' ? 'CSS' : s}
+              </button>
+            ))}
+          </div>
+
+          {/* Section content */}
+          <div className="flex-1 overflow-y-auto p-4 space-y-5">
+            {activeSection === 'colors' && (
+              <ColorsSection colors={theme.colors} onChange={updateColor} />
+            )}
+            {activeSection === 'typography' && (
+              <TypographySection typography={theme.typography} onChange={updateTypography} />
+            )}
+            {activeSection === 'layout' && (
+              <LayoutSection
+                layout={theme.layout}
+                borderRadius={theme.borderRadius}
+                onLayout={updateLayout}
+                onRadius={updateBorderRadius}
+              />
+            )}
+            {activeSection === 'css' && (
+              <CSSSection css={theme.customCSS ?? ''} onChange={updateCustomCSS} />
+            )}
+          </div>
+        </aside>
+
+        {/* Preview pane */}
+        <div className="flex flex-1 flex-col items-center overflow-auto bg-gray-200 p-4">
+          <div
+            className="relative overflow-hidden rounded-xl border border-gray-300 shadow-xl bg-white transition-all duration-300"
+            style={{
+              width: typeof previewWidth === 'number' ? previewWidth : '100%',
+              height: '100%',
+              maxWidth: '100%',
+            }}
+          >
+            <iframe
+              ref={iframeRef}
+              src={previewUrl}
+              title="Storefront Live Preview"
+              className="h-full w-full border-0"
+              sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ── Section Components ───────────────────────────────────────────────────────
+
+function ColorsSection({
+  colors,
+  onChange,
+}: {
+  colors: ThemeSettings['colors'];
+  onChange: (key: ColorKey, value: string) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-gray-900">Colors</h3>
+      {(Object.keys(COLOR_LABELS) as ColorKey[]).map((key) => (
+        <div key={key} className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2">
+            <div
+              className="h-7 w-7 rounded-full border border-gray-200 shadow-sm flex-shrink-0"
+              style={{ backgroundColor: colors[key] }}
+            />
+            <label className="text-sm text-gray-700">{COLOR_LABELS[key]}</label>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="color"
+              value={colors[key]}
+              onChange={(e) => onChange(key, e.target.value)}
+              className="h-8 w-10 cursor-pointer rounded border border-gray-200 p-0.5 appearance-none"
+              title={`Pick ${COLOR_LABELS[key]} color`}
+            />
+            <input
+              type="text"
+              value={colors[key]}
+              onChange={(e) => {
+                const val = e.target.value;
+                if (/^#[0-9A-Fa-f]{0,6}$/.test(val)) onChange(key, val);
+              }}
+              className="w-20 rounded-md border border-gray-200 px-2 py-1 text-xs font-mono focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/20"
+            />
+          </div>
+        </div>
+      ))}
+
+      {/* Quick palette presets */}
+      <div>
+        <p className="mb-2 text-xs font-medium text-gray-500">Quick palettes</p>
+        <div className="grid grid-cols-4 gap-2">
+          {PALETTES.map((palette, i) => (
+            <button
+              key={i}
+              onClick={() => {
+                (Object.entries(palette) as [ColorKey, string][]).forEach(([k, v]) => onChange(k, v));
+              }}
+              className="overflow-hidden rounded-lg border border-gray-200 hover:border-indigo-400"
+              title={palette._name}
+            >
+              <div className="flex h-6">
+                {[palette.primary, palette.secondary, palette.accent].map((c, ci) => (
+                  <div key={ci} className="flex-1" style={{ backgroundColor: c }} />
+                ))}
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TypographySection({
+  typography,
+  onChange,
+}: {
+  typography: ThemeSettings['typography'];
+  onChange: <K extends keyof ThemeSettings['typography']>(key: K, value: ThemeSettings['typography'][K]) => void;
+}) {
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-semibold text-gray-900">Typography</h3>
+
+      <div className="space-y-1">
+        <label className="text-xs text-gray-500">Body Font</label>
+        <select
+          value={typography.fontFamily}
+          onChange={(e) => onChange('fontFamily', e.target.value as FontFamily)}
+          className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none"
+        >
+          {FONT_OPTIONS.map((f) => (
+            <option key={f} value={f} className="capitalize">{f}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="space-y-1">
+        <label className="text-xs text-gray-500">Heading Font (optional)</label>
+        <select
+          value={typography.headingFontFamily ?? ''}
+          onChange={(e) => onChange('headingFontFamily', (e.target.value || undefined) as FontFamily | undefined)}
+          className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none"
+        >
+          <option value="">Same as body</option>
+          {FONT_OPTIONS.map((f) => (
+            <option key={f} value={f} className="capitalize">{f}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="space-y-1">
+        <label className="flex items-center justify-between text-xs text-gray-500">
+          <span>Base Font Size</span>
+          <span className="font-medium text-gray-700">{typography.baseFontSize}px</span>
+        </label>
+        <input
+          type="range"
+          min="14"
+          max="18"
+          value={typography.baseFontSize}
+          onChange={(e) => onChange('baseFontSize', parseInt(e.target.value, 10))}
+          className="w-full accent-indigo-600"
+        />
+        <div className="flex justify-between text-[10px] text-gray-400">
+          <span>14px</span><span>18px</span>
+        </div>
+      </div>
+
+      <div className="space-y-1">
+        <label className="flex items-center justify-between text-xs text-gray-500">
+          <span>Heading Scale</span>
+          <span className="font-medium text-gray-700">×{typography.headingScale.toFixed(3)}</span>
+        </label>
+        <input
+          type="range"
+          min="1125"
+          max="1500"
+          step="25"
+          value={Math.round(typography.headingScale * 1000)}
+          onChange={(e) => onChange('headingScale', parseInt(e.target.value, 10) / 1000)}
+          className="w-full accent-indigo-600"
+        />
+        <div className="flex justify-between text-[10px] text-gray-400">
+          <span>Compact</span><span>Large</span>
+        </div>
+      </div>
+
+      {/* Preview */}
+      <div className="rounded-lg border border-gray-100 bg-gray-50 p-3 space-y-1">
+        <p className="text-[10px] text-gray-400 uppercase tracking-wide mb-2">Preview</p>
+        <p style={{ fontFamily: typography.fontFamily, fontSize: typography.baseFontSize * typography.headingScale * typography.headingScale + 'px', fontWeight: 700 }}>
+          Heading
+        </p>
+        <p style={{ fontFamily: typography.fontFamily, fontSize: typography.baseFontSize }}>
+          Body text sample.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function LayoutSection({
+  layout,
+  borderRadius,
+  onLayout,
+  onRadius,
+}: {
+  layout: ThemeSettings['layout'];
+  borderRadius: ThemeSettings['borderRadius'];
+  onLayout: (l: ThemeSettings['layout']) => void;
+  onRadius: (r: ThemeSettings['borderRadius']) => void;
+}) {
+  return (
+    <div className="space-y-5">
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold text-gray-900">Page Layout</h3>
+        <div className="grid grid-cols-3 gap-2">
+          {LAYOUT_OPTIONS.map((l) => (
+            <button
+              key={l}
+              onClick={() => onLayout(l)}
+              className={`rounded-lg border py-2 text-xs font-medium capitalize transition-colors ${
+                layout === l
+                  ? 'border-indigo-600 bg-indigo-50 text-indigo-700'
+                  : 'border-gray-200 text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              {l.replace('-', ' ')}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <h3 className="text-sm font-semibold text-gray-900">Border Radius</h3>
+        <div className="grid grid-cols-5 gap-1.5">
+          {BORDER_RADIUS_OPTIONS.map((r) => (
+            <button
+              key={r}
+              onClick={() => onRadius(r)}
+              className={`rounded-lg border py-2 text-xs font-medium uppercase transition-colors ${
+                borderRadius === r
+                  ? 'border-indigo-600 bg-indigo-50 text-indigo-700'
+                  : 'border-gray-200 text-gray-600 hover:bg-gray-50'
+              }`}
+            >
+              {r}
+            </button>
+          ))}
+        </div>
+        {/* Visual preview */}
+        <div className="flex gap-2 mt-2">
+          {(['none', 'sm', 'md', 'lg', 'xl'] as const).map((r) => (
+            <div
+              key={r}
+              className={`flex-1 h-8 bg-indigo-500 ${
+                r === 'none' ? 'rounded-none' :
+                r === 'sm' ? 'rounded' :
+                r === 'md' ? 'rounded-md' :
+                r === 'lg' ? 'rounded-xl' :
+                'rounded-2xl'
+              } ${borderRadius === r ? 'opacity-100 ring-2 ring-indigo-700 ring-offset-1' : 'opacity-40'}`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CSSSection({ css, onChange }: { css: string; onChange: (css: string) => void }) {
+  return (
+    <div className="space-y-2">
+      <h3 className="text-sm font-semibold text-gray-900">Custom CSS</h3>
+      <p className="text-xs text-gray-500">
+        Add custom CSS that overrides theme defaults. Use{' '}
+        <code className="rounded bg-gray-100 px-1 font-mono text-xs">var(--storefront-primary)</code>{' '}
+        and other CSS variables.
+      </p>
+      <textarea
+        value={css}
+        onChange={(e) => onChange(e.target.value)}
+        rows={18}
+        spellCheck={false}
+        placeholder={`/* Example */\n.store-hero {\n  background: var(--storefront-primary);\n}\n\n.product-card {\n  border-radius: var(--storefront-border-radius);\n}`}
+        className="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 font-mono text-xs text-gray-800 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500/20 resize-none"
+      />
+    </div>
+  );
+}
+
+// ── Quick Palette Presets ────────────────────────────────────────────────────
+
+type PaletteEntry = Record<ColorKey, string> & { _name: string };
+
+const PALETTES: PaletteEntry[] = [
+  { _name: 'Ocean', primary: '#0EA5E9', secondary: '#6366F1', accent: '#F59E0B', background: '#F0F9FF', foreground: '#0C4A6E', muted: '#E0F2FE' },
+  { _name: 'Forest', primary: '#16A34A', secondary: '#0891B2', accent: '#F97316', background: '#F0FDF4', foreground: '#14532D', muted: '#DCFCE7' },
+  { _name: 'Sunset', primary: '#DC2626', secondary: '#9333EA', accent: '#F59E0B', background: '#FFF7ED', foreground: '#431407', muted: '#FEF3C7' },
+  { _name: 'Midnight', primary: '#6366F1', secondary: '#8B5CF6', accent: '#EC4899', background: '#0F0F23', foreground: '#E2E8F0', muted: '#1E1E3A' },
+  { _name: 'Rose', primary: '#E11D48', secondary: '#BE185D', accent: '#F59E0B', background: '#FFF1F2', foreground: '#881337', muted: '#FFE4E6' },
+  { _name: 'Amber', primary: '#D97706', secondary: '#B45309', accent: '#0D9488', background: '#FFFBEB', foreground: '#451A03', muted: '#FEF3C7' },
+  { _name: 'Slate', primary: '#334155', secondary: '#475569', accent: '#3B82F6', background: '#F8FAFC', foreground: '#0F172A', muted: '#F1F5F9' },
+  { _name: 'Teal', primary: '#0D9488', secondary: '#0891B2', accent: '#F59E0B', background: '#F0FDFA', foreground: '#134E4A', muted: '#CCFBF1' },
+];
diff --git a/apps/theme-editor/src/lib/api.ts b/apps/theme-editor/src/lib/api.ts
new file mode 100644
index 00000000..b22768ef
--- /dev/null
+++ b/apps/theme-editor/src/lib/api.ts
@@ -0,0 +1,87 @@
+/**
+ * API client for Theme Editor — communicates with the main StormCom app.
+ */
+
+import type { ThemeSettings, StorefrontDraft } from './types';
+
+const MAIN_APP_URL = process.env.NEXT_PUBLIC_MAIN_APP_URL ?? 'http://localhost:3000';
+
+/** Fetch the current draft storefront config for a store */
+export async function fetchStorefrontDraft(storeId: string): Promise<StorefrontDraft | null> {
+  const res = await fetch(`${MAIN_APP_URL}/api/stores/${storeId}/storefront/draft`, {
+    credentials: 'include',
+    cache: 'no-store',
+  });
+  if (!res.ok) return null;
+  const data = (await res.json()) as { draft?: StorefrontDraft };
+  return data.draft ?? null;
+}
+
+/** Fetch the published storefront config */
+export async function fetchStorefrontConfig(storeId: string): Promise<StorefrontDraft | null> {
+  const res = await fetch(`${MAIN_APP_URL}/api/stores/${storeId}/storefront`, {
+    credentials: 'include',
+    cache: 'no-store',
+  });
+  if (!res.ok) return null;
+  const data = (await res.json()) as { storefront?: StorefrontDraft };
+  return data.storefront ?? null;
+}
+
+/** Save draft theme changes (merges theme into the current draft config) */
+export async function saveDraft(storeId: string, theme: ThemeSettings): Promise<void> {
+  // Fetch current draft/config first so we don't overwrite other sections
+  const current = await fetchStorefrontDraft(storeId) ?? await fetchStorefrontConfig(storeId);
+  const payload = { ...(current ?? {}), theme };
+
+  const res = await fetch(`${MAIN_APP_URL}/api/stores/${storeId}/storefront/draft`, {
+    method: 'PUT',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) {
+    const data = (await res.json()) as { error?: string };
+    throw new Error(data.error ?? 'Failed to save draft');
+  }
+}
+
+/** Publish the draft to live storefront */
+export async function publishDraft(storeId: string): Promise<void> {
+  const res = await fetch(`${MAIN_APP_URL}/api/stores/${storeId}/storefront/publish`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+  });
+  if (!res.ok) {
+    const data = (await res.json()) as { error?: string };
+    throw new Error(data.error ?? 'Failed to publish');
+  }
+}
+
+/** Get store info (name/slug for preview URL) */
+export async function fetchStoreInfo(
+  storeId: string
+): Promise<{ name: string; slug: string } | null> {
+  const res = await fetch(`${MAIN_APP_URL}/api/stores/${storeId}`, {
+    credentials: 'include',
+    cache: 'no-store',
+  });
+  if (!res.ok) return null;
+  const data = (await res.json()) as { store?: { name?: string; slug?: string } };
+  return {
+    name: data.store?.name ?? 'My Store',
+    slug: data.store?.slug ?? storeId,
+  };
+}
+
+/** Fetch theme template config by ID from marketplace */
+export async function fetchThemeConfig(themeId: string): Promise<ThemeSettings | null> {
+  const res = await fetch(`${MAIN_APP_URL}/api/marketplace/themes/${themeId}`, {
+    credentials: 'include',
+    cache: 'no-store',
+  });
+  if (!res.ok) return null;
+  const data = (await res.json()) as { theme?: { config?: ThemeSettings } };
+  return data.theme?.config ?? null;
+}
diff --git a/apps/theme-editor/src/lib/types.ts b/apps/theme-editor/src/lib/types.ts
new file mode 100644
index 00000000..c504d9c1
--- /dev/null
+++ b/apps/theme-editor/src/lib/types.ts
@@ -0,0 +1,70 @@
+/**
+ * Shared types for the Theme Editor zone.
+ */
+
+export type ThemeCategory =
+  | 'GENERAL'
+  | 'ELECTRONICS'
+  | 'FASHION'
+  | 'FOOD_BEVERAGE'
+  | 'HEALTH_BEAUTY'
+  | 'HOME_LIFESTYLE'
+  | 'SPORTS_OUTDOORS'
+  | 'BOOKS_EDUCATION'
+  | 'JEWELRY'
+  | 'AUTOMOTIVE';
+
+export type FontFamily =
+  | 'inter'
+  | 'roboto'
+  | 'poppins'
+  | 'playfair'
+  | 'montserrat'
+  | 'geist';
+
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  accent: string;
+  background: string;
+  foreground: string;
+  muted: string;
+}
+
+export interface TypographySettings {
+  fontFamily: FontFamily;
+  headingFontFamily?: FontFamily;
+  baseFontSize: number;   // 14-18
+  headingScale: number;   // 1.125-1.5
+}
+
+export interface ThemeSettings {
+  templateId: string;
+  colors: ThemeColors;
+  typography: TypographySettings;
+  layout: 'full-width' | 'boxed' | 'centered';
+  borderRadius: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  customCSS?: string;
+}
+
+export interface StorefrontDraft {
+  theme: ThemeSettings;
+  storeName?: string;
+  storeSlug?: string;
+  [key: string]: unknown;
+}
+
+export interface ThemeEditorState {
+  themeId: string;
+  storeId: string;
+  storeName: string;
+  storeSlug: string;
+  draft: ThemeSettings;
+  originalDraft: ThemeSettings;
+  isDirty: boolean;
+  isSaving: boolean;
+  isPublishing: boolean;
+  saveError: string;
+  publishError: string;
+  publishSuccess: boolean;
+}
diff --git a/apps/theme-editor/tsconfig.json b/apps/theme-editor/tsconfig.json
new file mode 100644
index 00000000..2aead53b
--- /dev/null
+++ b/apps/theme-editor/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/theme-marketplace/next.config.ts b/apps/theme-marketplace/next.config.ts
new file mode 100644
index 00000000..87f72f50
--- /dev/null
+++ b/apps/theme-marketplace/next.config.ts
@@ -0,0 +1,30 @@
+import type { NextConfig } from 'next';
+
+/**
+ * Theme Marketplace Zone Configuration
+ *
+ * basePath: /themes  — this zone handles all /themes/* routes.
+ * In production the main StormCom app rewrites /themes/* to this app.
+ * Run locally on port 3001 (`npm run dev` in apps/theme-marketplace).
+ */
+const nextConfig: NextConfig = {
+  basePath: '/themes',
+  reactCompiler: true,
+  reactStrictMode: true,
+  typescript: { ignoreBuildErrors: false },
+  poweredByHeader: false,
+  // Allow cross-origin requests from the main StormCom app in dev
+  async headers() {
+    return [
+      {
+        source: '/:path*',
+        headers: [
+          { key: 'Access-Control-Allow-Origin', value: process.env.MAIN_APP_URL ?? '*' },
+          { key: 'Access-Control-Allow-Credentials', value: 'true' },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;
diff --git a/apps/theme-marketplace/package.json b/apps/theme-marketplace/package.json
new file mode 100644
index 00000000..b07b30e2
--- /dev/null
+++ b/apps/theme-marketplace/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@stormcom/theme-marketplace",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --port 3001",
+    "build": "next build",
+    "start": "next start --port 3001",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "^16.1.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "5.9.3"
+  }
+}
diff --git a/apps/theme-marketplace/src/app/[id]/page.tsx b/apps/theme-marketplace/src/app/[id]/page.tsx
new file mode 100644
index 00000000..239935df
--- /dev/null
+++ b/apps/theme-marketplace/src/app/[id]/page.tsx
@@ -0,0 +1,230 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { fetchTheme } from '@/lib/api';
+import { CATEGORY_LABELS } from '@/lib/types';
+import { ThemeDetailClient } from '@/components/theme-detail-client';
+
+interface Params { id: string }
+interface SearchParams { storeId?: string }
+
+export async function generateMetadata({ params }: { params: Promise<Params> }): Promise<Metadata> {
+  try {
+    const { id } = await params;
+    const theme = await fetchTheme(id);
+    return {
+      title: `${theme.name} — StormCom Theme`,
+      description: theme.description,
+    };
+  } catch {
+    return { title: 'Theme Not Found' };
+  }
+}
+
+export default async function ThemeDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<Params>;
+  searchParams: Promise<SearchParams>;
+}) {
+  const { id } = await params;
+  const { storeId } = await searchParams;
+
+  let theme;
+  try {
+    theme = await fetchTheme(id, storeId);
+  } catch {
+    notFound();
+  }
+
+  const { primary, secondary, accent, background } = theme.config.colors;
+
+  return (
+    <div className="space-y-8">
+      {/* Breadcrumb */}
+      <nav className="flex items-center gap-2 text-sm text-gray-500">
+        <a href="/themes" className="hover:text-gray-900">Themes</a>
+        <span>›</span>
+        <span className="text-gray-900">{theme.name}</span>
+      </nav>
+
+      <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
+        {/* Left: Preview + screenshots */}
+        <div className="lg:col-span-2 space-y-4">
+          {/* Main preview */}
+          <div
+            className="relative h-72 w-full overflow-hidden rounded-2xl shadow-lg sm:h-96"
+            style={{ backgroundColor: background }}
+          >
+            {theme.previewImageUrl ? (
+              <img
+                src={theme.previewImageUrl}
+                alt={`${theme.name} full preview`}
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <div className="flex h-full flex-col">
+                {/* Simulated header */}
+                <div
+                  className="flex h-12 items-center justify-between px-6"
+                  style={{ backgroundColor: primary, color: '#fff' }}
+                >
+                  <div className="h-3 w-24 rounded-full bg-white/40" />
+                  <div className="flex gap-3">
+                    {[0, 1, 2, 3].map((i) => (
+                      <div key={i} className="h-2 w-10 rounded-full bg-white/40" />
+                    ))}
+                  </div>
+                  <div className="flex gap-2">
+                    <div className="h-8 w-16 rounded-lg bg-white/30" />
+                    <div className="h-8 w-8 rounded-lg bg-white/20" />
+                  </div>
+                </div>
+                {/* Hero */}
+                <div
+                  className="flex flex-1 items-center justify-center"
+                  style={{
+                    background: `linear-gradient(135deg, ${primary}33 0%, ${secondary}22 50%, ${accent}22 100%)`,
+                  }}
+                >
+                  <div className="text-center space-y-3">
+                    <div className="mx-auto h-4 w-48 rounded-full" style={{ backgroundColor: primary }} />
+                    <div className="mx-auto h-3 w-64 rounded-full" style={{ backgroundColor: secondary + '60' }} />
+                    <div className="mx-auto h-3 w-40 rounded-full" style={{ backgroundColor: secondary + '40' }} />
+                    <div className="mx-auto mt-2 flex justify-center gap-2">
+                      <div className="h-10 w-28 rounded-lg" style={{ backgroundColor: primary }} />
+                      <div className="h-10 w-28 rounded-lg border-2" style={{ borderColor: primary, backgroundColor: 'transparent' }} />
+                    </div>
+                  </div>
+                </div>
+                {/* Product grid */}
+                <div className="grid grid-cols-4 gap-2 px-4 py-3" style={{ backgroundColor: background }}>
+                  {[0, 1, 2, 3].map((i) => (
+                    <div key={i} className="rounded-lg overflow-hidden">
+                      <div className="h-16 rounded-t-lg" style={{ backgroundColor: primary + '20' }} />
+                      <div className="p-2 space-y-1">
+                        <div className="h-2 w-full rounded-full" style={{ backgroundColor: accent + '60' }} />
+                        <div className="h-2 w-2/3 rounded-full" style={{ backgroundColor: secondary + '40' }} />
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Additional screenshots */}
+          {theme.previewImages.length > 0 && (
+            <div className="grid grid-cols-3 gap-3">
+              {theme.previewImages.map((img, i) => (
+                <img
+                  key={i}
+                  src={img}
+                  alt={`Preview ${i + 1}`}
+                  className="h-28 w-full rounded-xl object-cover border border-gray-200"
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Long description */}
+          {theme.longDescription && (
+            <div className="rounded-xl border border-gray-200 bg-white p-6">
+              <h2 className="mb-3 text-base font-semibold text-gray-900">About this theme</h2>
+              <p className="text-sm leading-relaxed text-gray-600">{theme.longDescription}</p>
+            </div>
+          )}
+
+          {/* Tags */}
+          {theme.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {theme.tags.map((tag) => (
+                <span
+                  key={tag}
+                  className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-600"
+                >
+                  #{tag}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Right: Info + actions */}
+        <div className="space-y-6">
+          <div>
+            <div className="flex items-start justify-between gap-2">
+              <h1 className="text-2xl font-bold text-gray-900">{theme.name}</h1>
+              {theme.isFeatured && (
+                <span className="rounded-full bg-amber-100 px-2.5 py-1 text-xs font-semibold text-amber-700">
+                  Featured
+                </span>
+              )}
+            </div>
+            <p className="mt-1 text-sm text-gray-500">by {theme.author} · v{theme.version}</p>
+            <p className="mt-3 text-sm leading-relaxed text-gray-600">{theme.description}</p>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-3 gap-3 text-center">
+            <div className="rounded-xl border border-gray-200 bg-white p-3">
+              <p className="text-lg font-bold text-gray-900">{theme.downloadCount.toLocaleString()}</p>
+              <p className="text-xs text-gray-500">Installs</p>
+            </div>
+            <div className="rounded-xl border border-gray-200 bg-white p-3">
+              <p className="text-lg font-bold text-gray-900">
+                {theme.averageRating > 0 ? theme.averageRating.toFixed(1) : '—'}
+              </p>
+              <p className="text-xs text-gray-500">Rating</p>
+            </div>
+            <div className="rounded-xl border border-gray-200 bg-white p-3">
+              <p className="text-lg font-bold text-gray-900">
+                {theme.isPremium ? `$${theme.price}` : 'Free'}
+              </p>
+              <p className="text-xs text-gray-500">Price</p>
+            </div>
+          </div>
+
+          {/* Category */}
+          <div className="rounded-xl border border-gray-200 bg-white p-4 space-y-2">
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">Category</p>
+            <span className="inline-block rounded-full bg-indigo-50 px-3 py-1 text-sm font-medium text-indigo-700">
+              {CATEGORY_LABELS[theme.category]}
+            </span>
+          </div>
+
+          {/* Color palette */}
+          <div className="rounded-xl border border-gray-200 bg-white p-4 space-y-3">
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">Color Palette</p>
+            <div className="flex gap-2">
+              {(Object.entries(theme.config.colors) as [string, string][]).map(([name, hex]) => (
+                <div key={name} className="flex flex-col items-center gap-1">
+                  <div
+                    className="h-8 w-8 rounded-full border border-gray-200 shadow-sm"
+                    style={{ backgroundColor: hex }}
+                    title={`${name}: ${hex}`}
+                  />
+                  <span className="text-[10px] text-gray-400 capitalize">{name}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Typography info */}
+          <div className="rounded-xl border border-gray-200 bg-white p-4 space-y-2">
+            <p className="text-xs font-semibold uppercase tracking-wide text-gray-400">Typography</p>
+            <p className="text-sm text-gray-700 capitalize">{theme.config.typography.fontFamily}</p>
+            {theme.config.typography.headingFontFamily && (
+              <p className="text-xs text-gray-500">
+                Headings: <span className="capitalize">{theme.config.typography.headingFontFamily}</span>
+              </p>
+            )}
+          </div>
+
+          {/* CTA */}
+          <ThemeDetailClient theme={theme} storeId={storeId} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/theme-marketplace/src/app/globals.css b/apps/theme-marketplace/src/app/globals.css
new file mode 100644
index 00000000..f1d8c73c
--- /dev/null
+++ b/apps/theme-marketplace/src/app/globals.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/apps/theme-marketplace/src/app/layout.tsx b/apps/theme-marketplace/src/app/layout.tsx
new file mode 100644
index 00000000..744805c9
--- /dev/null
+++ b/apps/theme-marketplace/src/app/layout.tsx
@@ -0,0 +1,71 @@
+import type { Metadata } from 'next';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: {
+    default: 'Theme Marketplace — StormCom',
+    template: '%s | StormCom Themes',
+  },
+  description:
+    'Browse and install beautiful storefront themes for your StormCom store. Free and premium themes for every industry.',
+  openGraph: {
+    type: 'website',
+    siteName: 'StormCom Theme Marketplace',
+  },
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="min-h-screen bg-gray-50 text-gray-900 antialiased">
+        {/* Top navigation bar */}
+        <header className="sticky top-0 z-50 border-b border-gray-200 bg-white/90 backdrop-blur-sm">
+          <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+            <a href="/themes" className="flex items-center gap-2 font-semibold text-gray-900">
+              <svg
+                className="h-7 w-7 text-indigo-600"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <rect x="3" y="3" width="7" height="9" rx="1" />
+                <rect x="14" y="3" width="7" height="5" rx="1" />
+                <rect x="14" y="12" width="7" height="9" rx="1" />
+                <rect x="3" y="16" width="7" height="5" rx="1" />
+              </svg>
+              <span className="text-lg">Theme Marketplace</span>
+            </a>
+
+            <nav className="flex items-center gap-4 text-sm">
+              <a
+                href="/themes"
+                className="text-gray-600 transition-colors hover:text-gray-900"
+              >
+                Browse Themes
+              </a>
+              <a
+                href="/dashboard"
+                className="rounded-lg bg-indigo-600 px-4 py-2 font-medium text-white transition-colors hover:bg-indigo-700"
+              >
+                Dashboard
+              </a>
+            </nav>
+          </div>
+        </header>
+
+        <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">{children}</main>
+
+        <footer className="mt-16 border-t border-gray-200 bg-white">
+          <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+            <p className="text-center text-sm text-gray-500">
+              © {new Date().getFullYear()} StormCom · Theme Marketplace
+            </p>
+          </div>
+        </footer>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/theme-marketplace/src/app/page.tsx b/apps/theme-marketplace/src/app/page.tsx
new file mode 100644
index 00000000..d10e056c
--- /dev/null
+++ b/apps/theme-marketplace/src/app/page.tsx
@@ -0,0 +1,103 @@
+import { Suspense } from 'react';
+import type { Metadata } from 'next';
+import { fetchThemes } from '@/lib/api';
+import { ThemeGallery } from '@/components/theme-gallery';
+import type { ThemeCategory } from '@/lib/types';
+import { CATEGORY_LABELS } from '@/lib/types';
+
+export const metadata: Metadata = {
+  title: 'Browse Themes',
+  description: 'Discover beautiful storefront themes for your store. Hundreds of free & premium designs.',
+};
+
+interface SearchParams {
+  category?: string;
+  q?: string;
+  sort?: string;
+  page?: string;
+  storeId?: string;
+}
+
+export default async function ThemeMarketplacePage({
+  searchParams,
+}: {
+  searchParams: Promise<SearchParams>;
+}) {
+  const params = await searchParams;
+  const category = (params.category ?? '') as ThemeCategory | '';
+  const q = params.q ?? '';
+  const sort = (['popular', 'recent', 'name', 'rating'].includes(params.sort ?? '') ? params.sort : 'popular') as
+    | 'popular'
+    | 'recent'
+    | 'name'
+    | 'rating';
+  const page = Math.max(1, parseInt(params.page ?? '1', 10));
+  const storeId = params.storeId ?? '';
+
+  const initialData = await fetchThemes({ category, q, sort, page, perPage: 12, storeId });
+
+  return (
+    <div className="space-y-10">
+      {/* Hero */}
+      <section className="rounded-2xl bg-gradient-to-br from-indigo-600 via-purple-600 to-blue-600 px-8 py-12 text-white shadow-lg">
+        <div className="max-w-2xl">
+          <h1 className="text-4xl font-bold tracking-tight">Theme Marketplace</h1>
+          <p className="mt-3 text-lg text-indigo-100">
+            Instantly transform your storefront with professionally designed themes. Each theme is
+            fully customizable — pick one and make it yours in minutes.
+          </p>
+          <div className="mt-6 flex flex-wrap gap-3">
+            <div className="flex items-center gap-2 rounded-full bg-white/20 px-4 py-2 text-sm font-medium backdrop-blur-sm">
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              {initialData.meta.total}+ themes
+            </div>
+            <div className="flex items-center gap-2 rounded-full bg-white/20 px-4 py-2 text-sm font-medium backdrop-blur-sm">
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              {Object.keys(CATEGORY_LABELS).length} categories
+            </div>
+            <div className="flex items-center gap-2 rounded-full bg-white/20 px-4 py-2 text-sm font-medium backdrop-blur-sm">
+              <svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+              </svg>
+              Live preview & editor
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Gallery */}
+      <Suspense fallback={<GallerySkeleton />}>
+        <ThemeGallery initialData={initialData} storeId={storeId} />
+      </Suspense>
+    </div>
+  );
+}
+
+function GallerySkeleton() {
+  return (
+    <div className="space-y-6">
+      <div className="h-10 w-full animate-pulse rounded-lg bg-gray-200" />
+      <div className="flex gap-2">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="h-8 w-24 animate-pulse rounded-full bg-gray-200" />
+        ))}
+      </div>
+      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {Array.from({ length: 12 }).map((_, i) => (
+          <div key={i} className="overflow-hidden rounded-xl border border-gray-200 bg-white">
+            <div className="h-40 animate-pulse bg-gray-200" />
+            <div className="space-y-2 p-4">
+              <div className="h-5 w-3/4 animate-pulse rounded bg-gray-200" />
+              <div className="h-4 w-full animate-pulse rounded bg-gray-100" />
+              <div className="h-4 w-2/3 animate-pulse rounded bg-gray-100" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/theme-marketplace/src/components/marketplace-filters.tsx b/apps/theme-marketplace/src/components/marketplace-filters.tsx
new file mode 100644
index 00000000..7bd0aef3
--- /dev/null
+++ b/apps/theme-marketplace/src/components/marketplace-filters.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import type { ThemeCategory } from '@/lib/types';
+import { CATEGORY_LABELS } from '@/lib/types';
+
+const ALL_CATEGORIES: Array<ThemeCategory | ''> = [
+  '',
+  'GENERAL',
+  'ELECTRONICS',
+  'FASHION',
+  'FOOD_BEVERAGE',
+  'HEALTH_BEAUTY',
+  'HOME_LIFESTYLE',
+  'SPORTS_OUTDOORS',
+  'BOOKS_EDUCATION',
+  'JEWELRY',
+  'AUTOMOTIVE',
+];
+
+interface Props {
+  initialCategory?: ThemeCategory | '';
+  initialQuery?: string;
+  initialSort?: string;
+  onFilter: (category: ThemeCategory | '', q: string, sort: string) => void;
+}
+
+export function MarketplaceFilters({ initialCategory = '', initialQuery = '', initialSort = 'popular', onFilter }: Props) {
+  const [category, setCategory] = useState<ThemeCategory | ''>(initialCategory);
+  const [query, setQuery] = useState(initialQuery);
+  const [sort, setSort] = useState(initialSort);
+
+  const handleCategory = useCallback(
+    (cat: ThemeCategory | '') => {
+      setCategory(cat);
+      onFilter(cat, query, sort);
+    },
+    [onFilter, query, sort]
+  );
+
+  const handleSearch = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      onFilter(category, query, sort);
+    },
+    [onFilter, category, query, sort]
+  );
+
+  const handleSort = useCallback(
+    (s: string) => {
+      setSort(s);
+      onFilter(category, query, s);
+    },
+    [onFilter, category, query]
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* Search + Sort row */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <form onSubmit={handleSearch} className="relative flex-1 max-w-md">
+          <svg
+            className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <circle cx="11" cy="11" r="8" />
+            <line x1="21" y1="21" x2="16.65" y2="16.65" />
+          </svg>
+          <input
+            type="search"
+            placeholder="Search themes…"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            className="w-full rounded-lg border border-gray-300 bg-white py-2 pl-10 pr-4 text-sm shadow-sm placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+          />
+        </form>
+
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-gray-500">Sort:</span>
+          {(['popular', 'recent', 'rating', 'name'] as const).map((s) => (
+            <button
+              key={s}
+              onClick={() => handleSort(s)}
+              className={`rounded-lg px-3 py-1.5 text-xs font-medium capitalize transition-colors ${
+                sort === s
+                  ? 'bg-indigo-600 text-white'
+                  : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-200'
+              }`}
+            >
+              {s}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Category pills */}
+      <div className="flex flex-wrap gap-2">
+        {ALL_CATEGORIES.map((cat) => (
+          <button
+            key={cat || 'all'}
+            onClick={() => handleCategory(cat)}
+            className={`rounded-full px-4 py-1.5 text-sm font-medium transition-colors ${
+              category === cat
+                ? 'bg-indigo-600 text-white shadow-sm'
+                : 'bg-white text-gray-600 hover:bg-gray-50 border border-gray-200'
+            }`}
+          >
+            {cat === '' ? 'All Themes' : CATEGORY_LABELS[cat]}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/theme-marketplace/src/components/theme-card.tsx b/apps/theme-marketplace/src/components/theme-card.tsx
new file mode 100644
index 00000000..37a21982
--- /dev/null
+++ b/apps/theme-marketplace/src/components/theme-card.tsx
@@ -0,0 +1,181 @@
+import type { MarketplaceTheme } from '@/lib/types';
+import { CATEGORY_LABELS } from '@/lib/types';
+
+interface Props {
+  theme: MarketplaceTheme;
+  storeId?: string;
+}
+
+function StarRating({ rating, count }: { rating: number; count: number }) {
+  return (
+    <span className="flex items-center gap-1 text-xs text-amber-600">
+      <svg className="h-3.5 w-3.5 fill-current" viewBox="0 0 20 20">
+        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+      </svg>
+      {rating > 0 ? rating.toFixed(1) : '—'}
+      {count > 0 && <span className="text-gray-400">({count})</span>}
+    </span>
+  );
+}
+
+/** Generates a deterministic gradient background from a theme's colors */
+function ThemePreviewSwatch({ theme }: { theme: MarketplaceTheme }) {
+  const { primary, secondary, accent, background } = theme.config.colors;
+  return (
+    <div
+      className="relative h-40 w-full overflow-hidden"
+      style={{ backgroundColor: background }}
+    >
+      {/* Simulated storefront preview */}
+      <div className="absolute inset-0 flex flex-col">
+        {/* Header bar */}
+        <div
+          className="flex h-8 items-center justify-between px-3"
+          style={{ backgroundColor: primary, color: '#fff' }}
+        >
+          <div className="h-2 w-16 rounded-full bg-white/40" />
+          <div className="flex gap-1">
+            {[0, 1, 2].map((i) => (
+              <div key={i} className="h-2 w-6 rounded-full bg-white/40" />
+            ))}
+          </div>
+        </div>
+        {/* Hero area */}
+        <div
+          className="flex flex-1 items-center justify-center px-4"
+          style={{
+            background: `linear-gradient(135deg, ${primary}22 0%, ${secondary}22 50%, ${accent}22 100%)`,
+          }}
+        >
+          <div className="space-y-1 text-center">
+            <div className="h-3 w-28 rounded-full mx-auto" style={{ backgroundColor: primary }} />
+            <div className="h-2 w-20 rounded-full mx-auto" style={{ backgroundColor: secondary + '80' }} />
+            <div
+              className="mt-2 h-5 w-16 rounded-md mx-auto"
+              style={{ backgroundColor: accent }}
+            />
+          </div>
+        </div>
+        {/* Product row */}
+        <div
+          className="flex gap-1 px-2 py-2"
+          style={{ backgroundColor: background }}
+        >
+          {[0, 1, 2].map((i) => (
+            <div
+              key={i}
+              className="flex-1 rounded"
+              style={{ backgroundColor: primary + '20', height: 28 }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ThemeCard({ theme, storeId }: Props) {
+  const editorHref = `/themes/editor?themeId=${theme.id}${storeId ? `&storeId=${storeId}` : ''}`;
+  const detailHref = `/themes/${theme.slug}${storeId ? `?storeId=${storeId}` : ''}`;
+
+  return (
+    <article className="group relative flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-all duration-200 hover:shadow-md hover:-translate-y-0.5">
+      {/* Preview swatch */}
+      <a href={detailHref} className="block overflow-hidden">
+        {theme.previewImageUrl ? (
+          <img
+            src={theme.previewImageUrl}
+            alt={`${theme.name} preview`}
+            className="h-40 w-full object-cover transition-transform duration-300 group-hover:scale-105"
+          />
+        ) : (
+          <ThemePreviewSwatch theme={theme} />
+        )}
+      </a>
+
+      {/* Badges */}
+      <div className="absolute left-2 top-2 flex flex-wrap gap-1">
+        {theme.isFeatured && (
+          <span className="rounded-full bg-amber-500 px-2 py-0.5 text-xs font-semibold text-white">
+            Featured
+          </span>
+        )}
+        {theme.isPremium && (
+          <span className="rounded-full bg-purple-600 px-2 py-0.5 text-xs font-semibold text-white">
+            Premium
+          </span>
+        )}
+        {theme.isInstalled && (
+          <span className="rounded-full bg-green-600 px-2 py-0.5 text-xs font-semibold text-white">
+            ✓ Installed
+          </span>
+        )}
+      </div>
+
+      {/* Color dots */}
+      <div className="absolute right-2 top-2 flex gap-1">
+        {(
+          [
+            theme.config.colors.primary,
+            theme.config.colors.secondary,
+            theme.config.colors.accent,
+          ] as string[]
+        ).map((color, i) => (
+          <span
+            key={i}
+            className="h-4 w-4 rounded-full border border-white/80 shadow-sm"
+            style={{ backgroundColor: color }}
+          />
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-1 flex-col gap-3 p-4">
+        <div className="flex items-start justify-between gap-2">
+          <div>
+            <a href={detailHref} className="font-semibold text-gray-900 hover:text-indigo-600">
+              {theme.name}
+            </a>
+            <p className="mt-0.5 text-xs text-gray-500 line-clamp-2">{theme.description}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between text-xs text-gray-500">
+          <span className="rounded-full bg-gray-100 px-2 py-0.5 font-medium text-gray-600">
+            {CATEGORY_LABELS[theme.category]}
+          </span>
+          <StarRating rating={theme.averageRating} count={theme.ratingCount} />
+        </div>
+
+        <div className="flex items-center gap-1 text-xs text-gray-400">
+          <svg className="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
+            <path
+              fillRule="evenodd"
+              d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            />
+          </svg>
+          {theme.downloadCount.toLocaleString()} installs
+          <span className="mx-1">·</span>
+          <span>by {theme.author}</span>
+        </div>
+
+        {/* Actions */}
+        <div className="mt-auto flex gap-2">
+          <a
+            href={detailHref}
+            className="flex-1 rounded-lg border border-gray-200 py-2 text-center text-sm font-medium text-gray-700 transition-colors hover:border-gray-300 hover:bg-gray-50"
+          >
+            Preview
+          </a>
+          <a
+            href={editorHref}
+            className="flex-1 rounded-lg bg-indigo-600 py-2 text-center text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+          >
+            {theme.isInstalled ? 'Edit' : 'Use theme'}
+          </a>
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/apps/theme-marketplace/src/components/theme-detail-client.tsx b/apps/theme-marketplace/src/components/theme-detail-client.tsx
new file mode 100644
index 00000000..d959a8f6
--- /dev/null
+++ b/apps/theme-marketplace/src/components/theme-detail-client.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { useState } from 'react';
+import type { MarketplaceTheme } from '@/lib/types';
+
+interface Props {
+  theme: MarketplaceTheme;
+  storeId?: string;
+}
+
+export function ThemeDetailClient({ theme, storeId }: Props) {
+  const [installing, setInstalling] = useState(false);
+  const [installed, setInstalled] = useState(theme.isInstalled ?? false);
+  const [error, setError] = useState('');
+
+  const mainAppUrl = process.env.NEXT_PUBLIC_MAIN_APP_URL ?? '';
+
+  const handleInstall = async () => {
+    if (!storeId) {
+      // Redirect to dashboard to select a store
+      window.location.href = `/dashboard?installTheme=${theme.id}`;
+      return;
+    }
+
+    setInstalling(true);
+    setError('');
+    try {
+      const res = await fetch(`${mainAppUrl}/api/marketplace/themes/${theme.id}/install`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ storeId }),
+      });
+
+      if (!res.ok) {
+        const data = (await res.json()) as { error?: string };
+        throw new Error(data.error ?? 'Installation failed');
+      }
+
+      setInstalled(true);
+      // Redirect to editor after install
+      setTimeout(() => {
+        window.location.href = `/themes/editor?themeId=${theme.id}&storeId=${storeId}`;
+      }, 800);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to install theme');
+    } finally {
+      setInstalling(false);
+    }
+  };
+
+  const editorHref = `/themes/editor?themeId=${theme.id}${storeId ? `&storeId=${storeId}` : ''}`;
+
+  return (
+    <div className="flex flex-col gap-4">
+      {error && (
+        <p className="rounded-lg bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700">
+          {error}
+        </p>
+      )}
+
+      {installed ? (
+        <div className="space-y-3">
+          <div className="flex items-center gap-2 rounded-lg bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-700">
+            <svg className="h-4 w-4 flex-shrink-0" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+            </svg>
+            Theme installed! Redirecting to editor…
+          </div>
+          <a
+            href={editorHref}
+            className="block w-full rounded-xl bg-indigo-600 px-6 py-3 text-center text-base font-semibold text-white transition-colors hover:bg-indigo-700"
+          >
+            Open Theme Editor →
+          </a>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-3 sm:flex-row">
+          <button
+            onClick={handleInstall}
+            disabled={installing}
+            className="flex-1 rounded-xl bg-indigo-600 px-6 py-3 text-base font-semibold text-white transition-colors hover:bg-indigo-700 disabled:opacity-60"
+          >
+            {installing ? 'Installing…' : theme.isPremium ? `Buy — $${theme.price}` : 'Use This Theme'}
+          </button>
+          <a
+            href={editorHref}
+            className="flex-1 rounded-xl border border-gray-200 bg-white px-6 py-3 text-center text-base font-semibold text-gray-700 transition-colors hover:bg-gray-50"
+          >
+            Preview & Edit
+          </a>
+        </div>
+      )}
+
+      <p className="text-center text-xs text-gray-500">
+        {theme.isPremium
+          ? 'One-time purchase · Unlimited customisation'
+          : 'Free to use · Fully customisable · Live preview included'}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/theme-marketplace/src/components/theme-gallery.tsx b/apps/theme-marketplace/src/components/theme-gallery.tsx
new file mode 100644
index 00000000..3e290677
--- /dev/null
+++ b/apps/theme-marketplace/src/components/theme-gallery.tsx
@@ -0,0 +1,162 @@
+'use client';
+
+import { useState, useCallback, useTransition } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import type { MarketplaceTheme, ThemeCategory, ThemesApiResponse } from '@/lib/types';
+import { MarketplaceFilters } from './marketplace-filters';
+import { ThemeCard } from './theme-card';
+
+interface Props {
+  initialData: ThemesApiResponse;
+  storeId?: string;
+}
+
+export function ThemeGallery({ initialData, storeId }: Props) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [data, setData] = useState<ThemesApiResponse>(initialData);
+  const [isPending, startTransition] = useTransition();
+
+  const currentCategory = (searchParams.get('category') ?? '') as ThemeCategory | '';
+  const currentQuery = searchParams.get('q') ?? '';
+  const currentSort = searchParams.get('sort') ?? 'popular';
+  const currentPage = parseInt(searchParams.get('page') ?? '1', 10);
+
+  const fetchThemes = useCallback(
+    async (category: ThemeCategory | '', q: string, sort: string, page = 1) => {
+      const params = new URLSearchParams();
+      if (category) params.set('category', category);
+      if (q) params.set('q', q);
+      params.set('sort', sort);
+      params.set('page', String(page));
+      if (storeId) params.set('storeId', storeId);
+
+      // Update URL without reload
+      startTransition(() => {
+        router.replace(`/themes?${params.toString()}`, { scroll: false });
+      });
+
+      try {
+        const mainAppUrl = process.env.NEXT_PUBLIC_MAIN_APP_URL ?? '';
+        const apiUrl = new URL(`${mainAppUrl}/api/marketplace/themes`);
+        if (category) apiUrl.searchParams.set('category', category);
+        if (q) apiUrl.searchParams.set('q', q);
+        apiUrl.searchParams.set('sort', sort);
+        apiUrl.searchParams.set('page', String(page));
+        if (storeId) apiUrl.searchParams.set('storeId', storeId);
+
+        const res = await fetch(apiUrl.toString());
+        if (res.ok) {
+          const json = (await res.json()) as ThemesApiResponse;
+          setData(json);
+        }
+      } catch {
+        // Keep current data on error
+      }
+    },
+    [router, storeId]
+  );
+
+  const handleFilter = useCallback(
+    (category: ThemeCategory | '', q: string, sort: string) => {
+      void fetchThemes(category, q, sort, 1);
+    },
+    [fetchThemes]
+  );
+
+  const handlePage = useCallback(
+    (page: number) => {
+      void fetchThemes(currentCategory, currentQuery, currentSort, page);
+    },
+    [fetchThemes, currentCategory, currentQuery, currentSort]
+  );
+
+  return (
+    <div className="space-y-6">
+      <MarketplaceFilters
+        initialCategory={currentCategory}
+        initialQuery={currentQuery}
+        initialSort={currentSort}
+        onFilter={handleFilter}
+      />
+
+      {/* Result count */}
+      <p className="text-sm text-gray-500">
+        {isPending ? 'Loading…' : `${data.meta.total} theme${data.meta.total !== 1 ? 's' : ''} found`}
+      </p>
+
+      {/* Grid */}
+      {data.themes.length === 0 ? (
+        <EmptyState />
+      ) : (
+        <div className={`grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 ${isPending ? 'opacity-60' : ''}`}>
+          {data.themes.map((theme: MarketplaceTheme) => (
+            <ThemeCard key={theme.id} theme={theme} storeId={storeId} />
+          ))}
+        </div>
+      )}
+
+      {/* Pagination */}
+      {data.meta.totalPages > 1 && (
+        <Pagination
+          current={currentPage}
+          total={data.meta.totalPages}
+          onPage={handlePage}
+        />
+      )}
+    </div>
+  );
+}
+
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 bg-white py-20 text-center">
+      <svg
+        className="mb-4 h-12 w-12 text-gray-300"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      >
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42" />
+      </svg>
+      <p className="font-medium text-gray-900">No themes found</p>
+      <p className="mt-1 text-sm text-gray-500">Try adjusting your search or category filter.</p>
+    </div>
+  );
+}
+
+function Pagination({ current, total, onPage }: { current: number; total: number; onPage: (p: number) => void }) {
+  const pages = Array.from({ length: Math.min(total, 7) }, (_, i) => i + 1);
+  return (
+    <nav className="flex items-center justify-center gap-1" aria-label="Pagination">
+      <button
+        onClick={() => onPage(current - 1)}
+        disabled={current <= 1}
+        className="rounded-lg border border-gray-200 px-3 py-2 text-sm disabled:opacity-40 hover:bg-gray-50"
+      >
+        ← Prev
+      </button>
+      {pages.map((p) => (
+        <button
+          key={p}
+          onClick={() => onPage(p)}
+          className={`rounded-lg border px-3 py-2 text-sm transition-colors ${
+            p === current
+              ? 'border-indigo-600 bg-indigo-600 text-white'
+              : 'border-gray-200 hover:bg-gray-50'
+          }`}
+        >
+          {p}
+        </button>
+      ))}
+      <button
+        onClick={() => onPage(current + 1)}
+        disabled={current >= total}
+        className="rounded-lg border border-gray-200 px-3 py-2 text-sm disabled:opacity-40 hover:bg-gray-50"
+      >
+        Next →
+      </button>
+    </nav>
+  );
+}
diff --git a/apps/theme-marketplace/src/lib/api.ts b/apps/theme-marketplace/src/lib/api.ts
new file mode 100644
index 00000000..c0f983f6
--- /dev/null
+++ b/apps/theme-marketplace/src/lib/api.ts
@@ -0,0 +1,41 @@
+/**
+ * API client for Theme Marketplace — calls the main StormCom app API.
+ */
+
+import type { MarketplaceTheme, ThemeCategory, ThemesApiResponse } from './types';
+
+const MAIN_APP_URL = process.env.NEXT_PUBLIC_MAIN_APP_URL ?? 'http://localhost:3000';
+
+interface FetchThemesParams {
+  category?: ThemeCategory | '';
+  q?: string;
+  sort?: 'popular' | 'recent' | 'name' | 'rating';
+  page?: number;
+  perPage?: number;
+  storeId?: string;
+}
+
+export async function fetchThemes(params: FetchThemesParams = {}): Promise<ThemesApiResponse> {
+  const { category = '', q = '', sort = 'popular', page = 1, perPage = 12, storeId = '' } = params;
+  const url = new URL(`${MAIN_APP_URL}/api/marketplace/themes`);
+  if (category) url.searchParams.set('category', category);
+  if (q) url.searchParams.set('q', q);
+  url.searchParams.set('sort', sort);
+  url.searchParams.set('page', String(page));
+  url.searchParams.set('perPage', String(perPage));
+  if (storeId) url.searchParams.set('storeId', storeId);
+
+  const res = await fetch(url.toString(), { next: { revalidate: 60 } });
+  if (!res.ok) throw new Error('Failed to fetch themes');
+  return res.json() as Promise<ThemesApiResponse>;
+}
+
+export async function fetchTheme(id: string, storeId?: string): Promise<MarketplaceTheme> {
+  const url = new URL(`${MAIN_APP_URL}/api/marketplace/themes/${id}`);
+  if (storeId) url.searchParams.set('storeId', storeId);
+
+  const res = await fetch(url.toString(), { next: { revalidate: 60 } });
+  if (!res.ok) throw new Error('Theme not found');
+  const data = (await res.json()) as { theme: MarketplaceTheme };
+  return data.theme;
+}
diff --git a/apps/theme-marketplace/src/lib/types.ts b/apps/theme-marketplace/src/lib/types.ts
new file mode 100644
index 00000000..216a8188
--- /dev/null
+++ b/apps/theme-marketplace/src/lib/types.ts
@@ -0,0 +1,88 @@
+/**
+ * Shared types for the Theme Marketplace zone.
+ * Mirrors the types from the main app's @/lib/storefront/types.ts.
+ */
+
+export type ThemeCategory =
+  | 'GENERAL'
+  | 'ELECTRONICS'
+  | 'FASHION'
+  | 'FOOD_BEVERAGE'
+  | 'HEALTH_BEAUTY'
+  | 'HOME_LIFESTYLE'
+  | 'SPORTS_OUTDOORS'
+  | 'BOOKS_EDUCATION'
+  | 'JEWELRY'
+  | 'AUTOMOTIVE';
+
+export const CATEGORY_LABELS: Record<ThemeCategory, string> = {
+  GENERAL: 'General',
+  ELECTRONICS: 'Electronics',
+  FASHION: 'Fashion',
+  FOOD_BEVERAGE: 'Food & Beverage',
+  HEALTH_BEAUTY: 'Health & Beauty',
+  HOME_LIFESTYLE: 'Home & Lifestyle',
+  SPORTS_OUTDOORS: 'Sports & Outdoors',
+  BOOKS_EDUCATION: 'Books & Education',
+  JEWELRY: 'Jewelry',
+  AUTOMOTIVE: 'Automotive',
+};
+
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  accent: string;
+  background: string;
+  foreground: string;
+  muted: string;
+}
+
+export interface ThemeSettings {
+  templateId: string;
+  colors: ThemeColors;
+  typography: {
+    fontFamily: string;
+    headingFontFamily?: string;
+    baseFontSize: number;
+    headingScale: number;
+  };
+  layout: 'full-width' | 'boxed' | 'centered';
+  borderRadius: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  customCSS?: string;
+}
+
+export interface MarketplaceTheme {
+  id: string;
+  slug: string;
+  name: string;
+  description: string;
+  longDescription?: string | null;
+  category: ThemeCategory;
+  tags: string[];
+  previewImageUrl?: string | null;
+  thumbnailUrl?: string | null;
+  previewImages: string[];
+  config: ThemeSettings;
+  status: 'ACTIVE' | 'DRAFT' | 'ARCHIVED';
+  isFeatured: boolean;
+  isPremium: boolean;
+  price: number;
+  author: string;
+  version: string;
+  downloadCount: number;
+  averageRating: number;
+  ratingCount: number;
+  isInstalled?: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ThemesApiResponse {
+  themes: MarketplaceTheme[];
+  meta: {
+    total: number;
+    page: number;
+    perPage: number;
+    totalPages: number;
+  };
+}
diff --git a/apps/theme-marketplace/tsconfig.json b/apps/theme-marketplace/tsconfig.json
new file mode 100644
index 00000000..2aead53b
--- /dev/null
+++ b/apps/theme-marketplace/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/next.config.ts b/next.config.ts
index a97e2338..810bd8b5 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,5 +1,17 @@
 import type { NextConfig } from "next";
 
+/**
+ * Zone URLs (each zone is a separate Next.js app).
+ * In production these are set to the deployed URLs of each zone app.
+ * In development, run each app on its own port:
+ *   Theme Marketplace → localhost:3001   (apps/theme-marketplace)
+ *   Theme Editor      → localhost:3002   (apps/theme-editor)
+ */
+const THEME_MARKETPLACE_URL =
+  process.env.THEME_MARKETPLACE_URL ?? "http://localhost:3001";
+const THEME_EDITOR_URL =
+  process.env.THEME_EDITOR_URL ?? "http://localhost:3002";
+
 const nextConfig: NextConfig = {
   /* config options here */
   // Enable React Compiler for Next.js 16+ optimizations
@@ -186,6 +198,38 @@ const nextConfig: NextConfig = {
       },
     ];
   },
+
+  /**
+   * Multi-zone rewrites
+   *
+   * /themes/editor/* → Theme Editor zone  (apps/theme-editor,  port 3002)
+   * /themes/*        → Theme Marketplace  (apps/theme-marketplace, port 3001)
+   *
+   * Note: The editor rule MUST come before the marketplace rule so that
+   * /themes/editor/* is matched first.
+   */
+  async rewrites() {
+    return [
+      // Theme Editor zone — must come before the marketplace rule
+      {
+        source: '/themes/editor',
+        destination: `${THEME_EDITOR_URL}/themes/editor`,
+      },
+      {
+        source: '/themes/editor/:path*',
+        destination: `${THEME_EDITOR_URL}/themes/editor/:path*`,
+      },
+      // Theme Marketplace zone
+      {
+        source: '/themes',
+        destination: `${THEME_MARKETPLACE_URL}/themes`,
+      },
+      {
+        source: '/themes/:path*',
+        destination: `${THEME_MARKETPLACE_URL}/themes/:path*`,
+      },
+    ];
+  },
 };
 
 export default nextConfig;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 548941d3..ee646e7e 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -211,6 +211,9 @@ model Store {
   facebookBatchJobs FacebookBatchJob[]
   paymentConfigurations PaymentConfiguration[]
   
+  // Theme Marketplace
+  themeInstallations ThemeInstallation[]
+  
   @@index([slug])
   @@index([subdomain])
   @@index([customDomain])
@@ -1783,3 +1786,108 @@ model ConversionEvent {
   @@index([createdAt]) // Audit log queries
   @@map("facebook_conversion_events")
 }
+
+// ─────────────────────────────────────────────
+//  Theme Marketplace Models
+// ─────────────────────────────────────────────
+
+/// Theme status in the marketplace lifecycle
+enum ThemeStatus {
+  ACTIVE
+  DRAFT
+  ARCHIVED
+}
+
+/// Broad category for browsing in the marketplace
+enum ThemeCategory {
+  GENERAL
+  ELECTRONICS
+  FASHION
+  FOOD_BEVERAGE
+  HEALTH_BEAUTY
+  HOME_LIFESTYLE
+  SPORTS_OUTDOORS
+  BOOKS_EDUCATION
+  JEWELRY
+  AUTOMOTIVE
+}
+
+/// A theme available in the Theme Marketplace.
+/// The full theme JSON (ThemeSettings + section defaults) is stored in `config`.
+model MarketplaceTheme {
+  id            String        @id @default(cuid())
+  slug          String        @unique   // URL-friendly identifier
+  name          String
+  description   String
+  longDescription String?
+  category      ThemeCategory @default(GENERAL)
+  tags          String[]      @default([])
+  
+  // Visual assets
+  previewImageUrl   String?   // Hero screenshot
+  thumbnailUrl      String?   // Card thumbnail
+  previewImages     String[]  @default([])   // Additional screenshots
+  
+  // Theme configuration (JSON of ThemeSettings + defaults)
+  config        String        // JSON blob matching StorefrontConfig.theme shape
+  
+  // Publishing / lifecycle
+  status        ThemeStatus   @default(ACTIVE)
+  isFeatured    Boolean       @default(false)
+  isPremium     Boolean       @default(false)
+  price         Float         @default(0)    // 0 = free
+  
+  // Meta
+  author        String        @default("StormCom")
+  version       String        @default("1.0.0")
+  
+  // Aggregate metrics (denormalised for fast queries)
+  downloadCount Int           @default(0)
+  ratingSum     Int           @default(0)
+  ratingCount   Int           @default(0)
+  
+  createdAt     DateTime      @default(now())
+  updatedAt     DateTime      @updatedAt
+  
+  // Relations
+  installations ThemeInstallation[]
+  ratings       ThemeRating[]
+  
+  @@index([category, status])
+  @@index([isFeatured, status])
+  @@index([downloadCount])
+  @@map("marketplace_themes")
+}
+
+/// Records each time a store owner installs / applies a marketplace theme.
+model ThemeInstallation {
+  id        String   @id @default(cuid())
+  storeId   String
+  themeId   String
+  installedAt DateTime @default(now())
+
+  store     Store            @relation(fields: [storeId], references: [id], onDelete: Cascade)
+  theme     MarketplaceTheme @relation(fields: [themeId], references: [id], onDelete: Cascade)
+
+  @@unique([storeId, themeId])
+  @@index([storeId])
+  @@index([themeId])
+  @@map("theme_installations")
+}
+
+/// Star rating + optional review left by a store owner for a marketplace theme.
+model ThemeRating {
+  id        String   @id @default(cuid())
+  storeId   String
+  themeId   String
+  rating    Int      // 1-5
+  review    String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  theme     MarketplaceTheme @relation(fields: [themeId], references: [id], onDelete: Cascade)
+
+  @@unique([storeId, themeId])
+  @@index([themeId])
+  @@map("theme_ratings")
+}
diff --git a/src/app/api/marketplace/themes/[id]/install/route.ts b/src/app/api/marketplace/themes/[id]/install/route.ts
new file mode 100644
index 00000000..5c9ff605
--- /dev/null
+++ b/src/app/api/marketplace/themes/[id]/install/route.ts
@@ -0,0 +1,127 @@
+/**
+ * Theme Marketplace API — Install Theme to Store
+ *
+ * POST /api/marketplace/themes/[id]/install
+ *
+ * Body: { storeId: string }
+ *
+ * Applies the selected marketplace theme as the store's active
+ * storefront configuration (draft), increments the download counter,
+ * and records a ThemeInstallation row.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import prisma from '@/lib/prisma';
+import { z } from 'zod';
+import { getThemeTemplate } from '@/lib/storefront/theme-templates';
+import {
+  parseStorefrontConfig,
+  stringifyStorefrontConfig,
+} from '@/lib/storefront/defaults';
+import type { ThemeTemplateId } from '@/lib/storefront/types';
+
+type RouteContext = { params: Promise<{ id: string }> };
+
+const bodySchema = z.object({
+  storeId: z.string().min(1),
+});
+
+async function checkStorePermission(userId: string, storeId: string): Promise<boolean> {
+  const orgMembership = await prisma.membership.findFirst({
+    where: {
+      userId,
+      role: { in: ['OWNER', 'ADMIN'] },
+      organization: { store: { id: storeId } },
+    },
+  });
+  if (orgMembership) return true;
+
+  const storeStaff = await prisma.storeStaff.findFirst({
+    where: { userId, storeId, isActive: true, role: { in: ['STORE_ADMIN', 'CONTENT_MANAGER'] } },
+  });
+  return !!storeStaff;
+}
+
+export async function POST(request: NextRequest, props: RouteContext) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { id: themeId } = await props.params;
+    const body = await request.json();
+    const { storeId } = bodySchema.parse(body);
+
+    const hasPermission = await checkStorePermission(session.user.id, storeId);
+    if (!hasPermission) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 });
+    }
+
+    // Fetch store
+    const store = await prisma.store.findUnique({
+      where: { id: storeId },
+      select: { id: true, name: true, storefrontConfigDraft: true, storefrontConfig: true },
+    });
+    if (!store) {
+      return NextResponse.json({ error: 'Store not found' }, { status: 404 });
+    }
+
+    // Resolve theme config — prefer DB, fall back to static template
+    let themeConfig: object;
+    const dbTheme = await prisma.marketplaceTheme
+      .findFirst({ where: { OR: [{ id: themeId }, { slug: themeId }], status: 'ACTIVE' } })
+      .catch(() => null);
+
+    if (dbTheme) {
+      themeConfig = JSON.parse(dbTheme.config);
+
+      // Increment download count
+      await prisma.marketplaceTheme.update({
+        where: { id: dbTheme.id },
+        data: { downloadCount: { increment: 1 } },
+      });
+
+      // Upsert installation record
+      await prisma.themeInstallation.upsert({
+        where: { storeId_themeId: { storeId, themeId: dbTheme.id } },
+        create: { storeId, themeId: dbTheme.id },
+        update: { installedAt: new Date() },
+      });
+    } else {
+      // Static template fallback
+      const template = getThemeTemplate(themeId as ThemeTemplateId);
+      themeConfig = template.theme;
+    }
+
+    // Apply theme as draft — preserves all other storefront sections
+    const currentConfig = parseStorefrontConfig(store.storefrontConfigDraft ?? store.storefrontConfig, store.name);
+    const updatedConfig = {
+      ...currentConfig,
+      theme: {
+        ...currentConfig.theme,
+        ...(themeConfig as object),
+      },
+    };
+
+    await prisma.store.update({
+      where: { id: storeId },
+      data: { storefrontConfigDraft: stringifyStorefrontConfig(updatedConfig) },
+    });
+
+    return NextResponse.json({
+      message: 'Theme installed successfully. Review and publish from the Theme Editor.',
+      themeId,
+      storeId,
+      draft: updatedConfig,
+    });
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: 'Invalid request', details: error.issues }, { status: 400 });
+    }
+    console.error('POST /api/marketplace/themes/[id]/install error:', error);
+    return NextResponse.json({ error: 'Failed to install theme' }, { status: 500 });
+  }
+}
diff --git a/src/app/api/marketplace/themes/[id]/rate/route.ts b/src/app/api/marketplace/themes/[id]/rate/route.ts
new file mode 100644
index 00000000..9388ee73
--- /dev/null
+++ b/src/app/api/marketplace/themes/[id]/rate/route.ts
@@ -0,0 +1,80 @@
+/**
+ * Theme Marketplace API — Rate a Theme
+ *
+ * POST /api/marketplace/themes/[id]/rate
+ *
+ * Body: { storeId: string; rating: number (1-5); review?: string }
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import prisma from '@/lib/prisma';
+import { z } from 'zod';
+
+type RouteContext = { params: Promise<{ id: string }> };
+
+const bodySchema = z.object({
+  storeId: z.string().min(1),
+  rating: z.number().int().min(1).max(5),
+  review: z.string().max(1000).optional(),
+});
+
+export async function POST(request: NextRequest, props: RouteContext) {
+  try {
+    const session = await getServerSession(authOptions);
+    if (!session?.user?.id) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+    }
+
+    const { id: themeId } = await props.params;
+    const body = await request.json();
+    const { storeId, rating, review } = bodySchema.parse(body);
+
+    // Theme must exist in DB to be rated
+    const dbTheme = await prisma.marketplaceTheme.findFirst({
+      where: { OR: [{ id: themeId }, { slug: themeId }], status: 'ACTIVE' },
+    });
+    if (!dbTheme) {
+      return NextResponse.json({ error: 'Theme not found' }, { status: 404 });
+    }
+
+    // Upsert the rating
+    const existing = await prisma.themeRating.findUnique({
+      where: { storeId_themeId: { storeId, themeId: dbTheme.id } },
+    });
+
+    await prisma.themeRating.upsert({
+      where: { storeId_themeId: { storeId, themeId: dbTheme.id } },
+      create: { storeId, themeId: dbTheme.id, rating, review },
+      update: { rating, review, updatedAt: new Date() },
+    });
+
+    // Recalculate aggregate
+    const allRatings = await prisma.themeRating.aggregate({
+      where: { themeId: dbTheme.id },
+      _sum: { rating: true },
+      _count: { rating: true },
+    });
+
+    await prisma.marketplaceTheme.update({
+      where: { id: dbTheme.id },
+      data: {
+        ratingSum: allRatings._sum.rating ?? 0,
+        ratingCount: allRatings._count.rating,
+      },
+    });
+
+    return NextResponse.json({
+      message: existing ? 'Rating updated' : 'Rating submitted',
+      themeId: dbTheme.id,
+      rating,
+    });
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json({ error: 'Invalid request', details: error.issues }, { status: 400 });
+    }
+    console.error('POST /api/marketplace/themes/[id]/rate error:', error);
+    return NextResponse.json({ error: 'Failed to submit rating' }, { status: 500 });
+  }
+}
diff --git a/src/app/api/marketplace/themes/[id]/route.ts b/src/app/api/marketplace/themes/[id]/route.ts
new file mode 100644
index 00000000..dd98d9b8
--- /dev/null
+++ b/src/app/api/marketplace/themes/[id]/route.ts
@@ -0,0 +1,90 @@
+/**
+ * Theme Marketplace API — Single Theme
+ *
+ * GET  /api/marketplace/themes/[id]  — get theme details
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import prisma from '@/lib/prisma';
+import { getThemeTemplate } from '@/lib/storefront/theme-templates';
+import type { ThemeTemplateId } from '@/lib/storefront/types';
+
+type RouteContext = { params: Promise<{ id: string }> };
+
+export async function GET(request: NextRequest, props: RouteContext) {
+  try {
+    const { id } = await props.params;
+    const { searchParams } = request.nextUrl;
+    const storeId = searchParams.get('storeId') ?? '';
+
+    // Try DB first
+    const dbTheme = await prisma.marketplaceTheme.findFirst({
+      where: { OR: [{ id }, { slug: id }], status: 'ACTIVE' },
+    }).catch(() => null);
+
+    if (dbTheme) {
+      let isInstalled = false;
+      if (storeId) {
+        try {
+          const session = await getServerSession(authOptions);
+          if (session?.user?.id) {
+            const install = await prisma.themeInstallation.findUnique({
+              where: { storeId_themeId: { storeId, themeId: dbTheme.id } },
+            });
+            isInstalled = !!install;
+          }
+        } catch { /* ignore */ }
+      }
+
+      return NextResponse.json({
+        theme: {
+          ...dbTheme,
+          config: JSON.parse(dbTheme.config),
+          averageRating: dbTheme.ratingCount > 0 ? dbTheme.ratingSum / dbTheme.ratingCount : 0,
+          isInstalled,
+          createdAt: dbTheme.createdAt.toISOString(),
+          updatedAt: dbTheme.updatedAt.toISOString(),
+        },
+      });
+    }
+
+    // Fall back to static template
+    const template = getThemeTemplate(id as ThemeTemplateId);
+    if (!template) {
+      return NextResponse.json({ error: 'Theme not found' }, { status: 404 });
+    }
+
+    return NextResponse.json({
+      theme: {
+        id: template.id,
+        slug: template.id,
+        name: template.name,
+        description: template.description,
+        longDescription: null,
+        category: template.category,
+        tags: template.tags,
+        previewImageUrl: null,
+        thumbnailUrl: null,
+        previewImages: [],
+        config: template.theme,
+        status: 'ACTIVE',
+        isFeatured: false,
+        isPremium: false,
+        price: 0,
+        author: 'StormCom',
+        version: '1.0.0',
+        downloadCount: 0,
+        averageRating: 0,
+        ratingCount: 0,
+        isInstalled: false,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+      },
+    });
+  } catch (error) {
+    console.error('GET /api/marketplace/themes/[id] error:', error);
+    return NextResponse.json({ error: 'Failed to fetch theme' }, { status: 500 });
+  }
+}
diff --git a/src/app/api/marketplace/themes/route.ts b/src/app/api/marketplace/themes/route.ts
new file mode 100644
index 00000000..e6362beb
--- /dev/null
+++ b/src/app/api/marketplace/themes/route.ts
@@ -0,0 +1,191 @@
+/**
+ * Theme Marketplace API — List Themes
+ *
+ * GET /api/marketplace/themes
+ *   Returns paginated list of marketplace themes with optional filters.
+ *
+ * Query params:
+ *   category  - filter by ThemeCategory
+ *   q         - full-text search
+ *   sort      - popular | recent | name | rating  (default: popular)
+ *   page      - 1-based page number (default: 1)
+ *   perPage   - items per page (default: 12, max: 48)
+ *   storeId   - when provided marks themes as installed/not-installed
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+import prisma from '@/lib/prisma';
+import { getAllThemeTemplates } from '@/lib/storefront/theme-templates';
+import type { ThemeCategory } from '@/lib/storefront/types';
+
+const ALLOWED_SORT = ['popular', 'recent', 'name', 'rating'] as const;
+type Sort = (typeof ALLOWED_SORT)[number];
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = request.nextUrl;
+    const category   = (searchParams.get('category') ?? '') as ThemeCategory | '';
+    const query      = searchParams.get('q') ?? '';
+    const sort       = (ALLOWED_SORT.includes(searchParams.get('sort') as Sort)
+      ? searchParams.get('sort')
+      : 'popular') as Sort;
+    const page       = Math.max(1, parseInt(searchParams.get('page') ?? '1', 10));
+    const perPage    = Math.min(48, Math.max(1, parseInt(searchParams.get('perPage') ?? '12', 10)));
+    const storeId    = searchParams.get('storeId') ?? '';
+
+    // ── Build filter for DB-backed themes ──────────────────────────────
+    const where = {
+      status: 'ACTIVE' as const,
+      ...(category ? { category: category as ThemeCategory } : {}),
+      ...(query
+        ? {
+            OR: [
+              { name: { contains: query, mode: 'insensitive' as const } },
+              { description: { contains: query, mode: 'insensitive' as const } },
+              { tags: { has: query.toLowerCase() } },
+            ],
+          }
+        : {}),
+    };
+
+    const orderBy =
+      sort === 'popular'  ? { downloadCount: 'desc' as const } :
+      sort === 'recent'   ? { createdAt: 'desc' as const }     :
+      sort === 'rating'   ? { ratingSum: 'desc' as const }      :
+      /* name */            { name: 'asc' as const };
+
+    const [dbThemes, total] = await Promise.all([
+      prisma.marketplaceTheme.findMany({
+        where,
+        orderBy,
+        skip: (page - 1) * perPage,
+        take: perPage,
+      }),
+      prisma.marketplaceTheme.count({ where }),
+    ]);
+
+    // ── Seed static templates into response when DB is empty ────────────
+    // On a fresh database without seeded marketplace themes we fall back
+    // to the bundled ThemeTemplate list so the marketplace always shows
+    // something useful.
+    let themes = dbThemes;
+    if (total === 0) {
+      const staticTemplates = getAllThemeTemplates();
+      const filteredStatic = staticTemplates
+        .filter((t) => !category || t.category === category)
+        .filter((t) =>
+          !query ||
+          t.name.toLowerCase().includes(query.toLowerCase()) ||
+          t.description.toLowerCase().includes(query.toLowerCase()) ||
+          t.tags.some((tag) => tag.toLowerCase().includes(query.toLowerCase()))
+        );
+
+      // Map static templates into the same shape as DB themes
+      // (return as plain objects — the client receives JSON anyway)
+      const mockThemes = filteredStatic.map((t, idx) => ({
+        id: t.id,
+        slug: t.id,
+        name: t.name,
+        description: t.description,
+        longDescription: null as string | null,
+        category: t.category,
+        tags: t.tags,
+        previewImageUrl: null as string | null,
+        thumbnailUrl: null as string | null,
+        previewImages: [] as string[],
+        config: JSON.stringify(t.theme),
+        status: 'ACTIVE' as const,
+        isFeatured: idx < 3,
+        isPremium: false,
+        price: 0,
+        author: 'StormCom',
+        version: '1.0.0',
+        downloadCount: [850, 720, 540, 980, 630, 410, 380, 290, 270, 250, 210, 180, 155, 120][idx] ?? 100,
+        ratingSum: Math.round(([4.8, 4.6, 4.7, 4.9, 4.5, 4.7, 4.6, 4.8, 4.5, 4.7, 4.6, 4.8, 4.5, 4.7][idx] ?? 4.5) * 10),
+        ratingCount: 10,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      }));
+
+      // Sort mock themes
+      const sorted = sort === 'popular'
+        ? [...mockThemes].sort((a, b) => b.downloadCount - a.downloadCount)
+        : sort === 'name'
+        ? [...mockThemes].sort((a, b) => a.name.localeCompare(b.name))
+        : sort === 'rating'
+        ? [...mockThemes].sort((a, b) => b.ratingSum - a.ratingSum)
+        : mockThemes;
+
+      const paged = sorted.slice((page - 1) * perPage, page * perPage);
+
+      // Build installed set if storeId given
+      let installedThemeIds = new Set<string>();
+      if (storeId) {
+        try {
+          const session = await getServerSession(authOptions);
+          if (session?.user?.id) {
+            const installs = await prisma.themeInstallation.findMany({
+              where: { storeId },
+              select: { themeId: true },
+            });
+            installedThemeIds = new Set(installs.map((i) => i.themeId));
+          }
+        } catch { /* ignore */ }
+      }
+
+      return NextResponse.json({
+        themes: paged.map((t) => ({
+          ...t,
+          config: JSON.parse(t.config as string),
+          averageRating: t.ratingCount > 0 ? t.ratingSum / t.ratingCount : 0,
+          isInstalled: installedThemeIds.has(t.id),
+          createdAt: t.createdAt.toISOString(),
+          updatedAt: t.updatedAt.toISOString(),
+        })),
+        meta: {
+          total: sorted.length,
+          page,
+          perPage,
+          totalPages: Math.ceil(sorted.length / perPage),
+        },
+      });
+    }
+
+    // ── DB-backed themes ────────────────────────────────────────────────
+    let installedThemeIds = new Set<string>();
+    if (storeId) {
+      try {
+        const session = await getServerSession(authOptions);
+        if (session?.user?.id) {
+          const installs = await prisma.themeInstallation.findMany({
+            where: { storeId },
+            select: { themeId: true },
+          });
+          installedThemeIds = new Set(installs.map((i) => i.themeId));
+        }
+      } catch { /* ignore */ }
+    }
+
+    return NextResponse.json({
+      themes: themes.map((t) => ({
+        ...t,
+        config: JSON.parse(t.config),
+        averageRating: t.ratingCount > 0 ? t.ratingSum / t.ratingCount : 0,
+        isInstalled: installedThemeIds.has(t.id),
+        createdAt: t.createdAt.toISOString(),
+        updatedAt: t.updatedAt.toISOString(),
+      })),
+      meta: {
+        total,
+        page,
+        perPage,
+        totalPages: Math.ceil(total / perPage),
+      },
+    });
+  } catch (error) {
+    console.error('GET /api/marketplace/themes error:', error);
+    return NextResponse.json({ error: 'Failed to fetch themes' }, { status: 500 });
+  }
+}
diff --git a/src/app/dashboard/stores/[storeId]/appearance/page.tsx b/src/app/dashboard/stores/[storeId]/appearance/page.tsx
index 82b1d153..067c4369 100644
--- a/src/app/dashboard/stores/[storeId]/appearance/page.tsx
+++ b/src/app/dashboard/stores/[storeId]/appearance/page.tsx
@@ -17,6 +17,8 @@ import {
   IconArrowLeft,
   IconExternalLink,
   IconBrush,
+  IconShoppingBag,
+  IconEdit,
 } from '@tabler/icons-react';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -127,8 +129,20 @@ export default async function StoreAppearancePage({ params }: PageProps) {
                       </p>
                     </div>
                     
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 flex-wrap">
+                      <Button asChild variant="outline">
+                        <Link href={`/themes?storeId=${store.id}`}>
+                          <IconShoppingBag className="h-4 w-4 mr-2" />
+                          Theme Marketplace
+                        </Link>
+                      </Button>
                       <Button asChild>
+                        <Link href={`/themes/editor?storeId=${store.id}`}>
+                          <IconEdit className="h-4 w-4 mr-2" />
+                          Theme Editor
+                        </Link>
+                      </Button>
+                      <Button asChild variant="outline">
                         <Link href={`/dashboard/stores/${store.id}/appearance/editor`}>
                           <IconBrush className="h-4 w-4 mr-2" />
                           Visual Editor
diff --git a/src/components/dashboard/storefront/editor/theme-marketplace-panel.tsx b/src/components/dashboard/storefront/editor/theme-marketplace-panel.tsx
index bd6104d3..5e050616 100644
--- a/src/components/dashboard/storefront/editor/theme-marketplace-panel.tsx
+++ b/src/components/dashboard/storefront/editor/theme-marketplace-panel.tsx
@@ -136,11 +136,22 @@ export function ThemeMarketplacePanel({ currentTheme, onApplyTheme }: ThemeMarke
     <div className="flex flex-col h-full">
       {/* Header */}
       <div className="px-6 py-4 border-b space-y-4">
-        <div>
-          <h2 className="text-lg font-semibold">Theme Marketplace</h2>
-          <p className="text-sm text-muted-foreground">
-            Browse and install professional themes for your store
-          </p>
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h2 className="text-lg font-semibold">Theme Marketplace</h2>
+            <p className="text-sm text-muted-foreground">
+              Browse and install professional themes for your store
+            </p>
+          </div>
+          <a
+            href="/themes"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="shrink-0 inline-flex items-center gap-1.5 rounded-lg border border-border bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent transition-colors"
+          >
+            <Package className="h-3.5 w-3.5" />
+            Full Marketplace ↗
+          </a>
         </div>
         
         {/* Search and Filters */}
@@ -316,6 +327,14 @@ function getCategoryForTheme(id: ThemeTemplateId): ThemeCategory {
     elegant: 'popular',
     minimal: 'minimal',
     boutique: 'modern',
+    'tech-nova': 'popular',
+    'fashion-forward': 'popular',
+    'cafe-bistro': 'modern',
+    'glow-up': 'modern',
+    'home-vibes': 'classic',
+    'sport-zone': 'popular',
+    'jewel-box': 'popular',
+    bookshelf: 'classic',
   };
   return categories[id] || 'all';
 }
@@ -328,6 +347,14 @@ function getTagsForTheme(id: ThemeTemplateId): string[] {
     elegant: ['Luxury', 'Sophisticated', 'Premium'],
     minimal: ['Ultra-clean', 'Simple', 'Apple-inspired'],
     boutique: ['Playful', 'Friendly', 'Small Business'],
+    'tech-nova': ['Electronics', 'Dark', 'Futuristic'],
+    'fashion-forward': ['Fashion', 'Editorial', 'Apparel'],
+    'cafe-bistro': ['Food', 'Coffee', 'Warm'],
+    'glow-up': ['Beauty', 'Cosmetics', 'Skincare'],
+    'home-vibes': ['Home', 'Decor', 'Lifestyle'],
+    'sport-zone': ['Sports', 'Fitness', 'Dynamic'],
+    'jewel-box': ['Jewelry', 'Luxury', 'Gold'],
+    bookshelf: ['Books', 'Education', 'Academic'],
   };
   return tags[id] || [];
 }
diff --git a/src/lib/storefront/theme-templates.ts b/src/lib/storefront/theme-templates.ts
index f797de8a..6f4bd458 100644
--- a/src/lib/storefront/theme-templates.ts
+++ b/src/lib/storefront/theme-templates.ts
@@ -1,10 +1,3 @@
-/**
- * Storefront Theme Templates
- * 
- * Predefined theme configurations for storefronts.
- * Each template defines colors, typography, layout, and default component styles.
- */
-
 import type { ThemeTemplate, ThemeTemplateId } from './types';
 
 /**
@@ -14,12 +7,14 @@ const modernTheme: ThemeTemplate = {
   id: 'modern',
   name: 'Modern',
   description: 'Clean, minimal design with subtle colors and spacious layout',
+  category: 'GENERAL',
+  tags: ['clean', 'minimal', 'spacious', 'professional'],
   theme: {
     templateId: 'modern',
     colors: {
-      primary: '#4F46E5',      // Indigo
-      secondary: '#10B981',    // Emerald
-      accent: '#F59E0B',       // Amber
+      primary: '#4F46E5',
+      secondary: '#10B981',
+      accent: '#F59E0B',
       background: '#FFFFFF',
       foreground: '#111827',
       muted: '#F3F4F6',
@@ -48,13 +43,15 @@ const classicTheme: ThemeTemplate = {
   id: 'classic',
   name: 'Classic',
   description: 'Traditional e-commerce style with warm, inviting colors',
+  category: 'GENERAL',
+  tags: ['traditional', 'warm', 'e-commerce', 'trusted'],
   theme: {
     templateId: 'classic',
     colors: {
-      primary: '#B91C1C',      // Red
-      secondary: '#0369A1',    // Blue
-      accent: '#D97706',       // Orange
-      background: '#FFFBEB',   // Warm white
+      primary: '#B91C1C',
+      secondary: '#0369A1',
+      accent: '#D97706',
+      background: '#FFFBEB',
       foreground: '#1F2937',
       muted: '#FEF3C7',
     },
@@ -83,13 +80,15 @@ const boldTheme: ThemeTemplate = {
   id: 'bold',
   name: 'Bold',
   description: 'Vibrant colors with large typography for maximum impact',
+  category: 'GENERAL',
+  tags: ['vibrant', 'bold', 'dark', 'impactful'],
   theme: {
     templateId: 'bold',
     colors: {
-      primary: '#DC2626',      // Bright Red
-      secondary: '#7C3AED',    // Purple
-      accent: '#FACC15',       // Yellow
-      background: '#18181B',   // Dark
+      primary: '#DC2626',
+      secondary: '#7C3AED',
+      accent: '#FACC15',
+      background: '#18181B',
       foreground: '#FAFAFA',
       muted: '#27272A',
     },
@@ -118,13 +117,15 @@ const elegantTheme: ThemeTemplate = {
   id: 'elegant',
   name: 'Elegant',
   description: 'Luxury, sophisticated design with refined typography',
+  category: 'GENERAL',
+  tags: ['luxury', 'sophisticated', 'refined', 'premium'],
   theme: {
     templateId: 'elegant',
     colors: {
-      primary: '#1F2937',      // Dark gray
-      secondary: '#B45309',    // Gold
-      accent: '#059669',       // Teal
-      background: '#FAFAF9',   // Off-white
+      primary: '#1F2937',
+      secondary: '#B45309',
+      accent: '#059669',
+      background: '#FAFAF9',
       foreground: '#1C1917',
       muted: '#E7E5E4',
     },
@@ -153,13 +154,15 @@ const minimalTheme: ThemeTemplate = {
   id: 'minimal',
   name: 'Minimal',
   description: 'Ultra-clean, whitespace-focused design with subtle elegance',
+  category: 'GENERAL',
+  tags: ['minimalist', 'clean', 'whitespace', 'apple-style'],
   theme: {
     templateId: 'minimal',
     colors: {
-      primary: '#000000',      // Pure black
-      secondary: '#6B7280',    // Gray
-      accent: '#3B82F6',       // Blue
-      background: '#FFFFFF',   // Pure white
+      primary: '#000000',
+      secondary: '#6B7280',
+      accent: '#3B82F6',
+      background: '#FFFFFF',
       foreground: '#000000',
       muted: '#F9FAFB',
     },
@@ -187,13 +190,15 @@ const boutiqueTheme: ThemeTemplate = {
   id: 'boutique',
   name: 'Boutique',
   description: 'Warm and inviting design perfect for small businesses',
+  category: 'FASHION',
+  tags: ['small-business', 'playful', 'warm', 'boutique'],
   theme: {
     templateId: 'boutique',
     colors: {
-      primary: '#EC4899',      // Pink
-      secondary: '#8B5CF6',    // Purple
-      accent: '#F59E0B',       // Amber
-      background: '#FFFBF5',   // Warm cream
+      primary: '#EC4899',
+      secondary: '#8B5CF6',
+      accent: '#F59E0B',
+      background: '#FFFBF5',
       foreground: '#1F2937',
       muted: '#FEF3E2',
     },
@@ -215,6 +220,304 @@ const boutiqueTheme: ThemeTemplate = {
   defaultProductCard: 'standard',
 };
 
+// ─────────────────────────────────────────────
+//  Extended Marketplace Themes (categorised)
+// ─────────────────────────────────────────────
+
+/**
+ * TechNova - Electronics & Gadgets store
+ */
+const techNovaTheme: ThemeTemplate = {
+  id: 'tech-nova',
+  name: 'TechNova',
+  description: 'Futuristic dark theme built for electronics & gadget stores',
+  category: 'ELECTRONICS',
+  tags: ['electronics', 'gadgets', 'dark', 'futuristic', 'tech'],
+  theme: {
+    templateId: 'tech-nova',
+    colors: {
+      primary: '#06B6D4',      // Cyan
+      secondary: '#3B82F6',    // Blue
+      accent: '#A855F7',       // Purple
+      background: '#0F172A',   // Slate dark
+      foreground: '#F1F5F9',
+      muted: '#1E293B',
+    },
+    typography: {
+      fontFamily: 'geist',
+      baseFontSize: 16,
+      headingScale: 1.333,
+    },
+    layout: 'full-width',
+    borderRadius: 'md',
+  },
+  defaultHero: {
+    style: 'gradient',
+    backgroundGradient: 'from-slate-900 via-cyan-950 to-slate-900',
+    alignment: 'center',
+    minHeight: 'xl',
+  },
+  defaultProductCard: 'overlay',
+};
+
+/**
+ * FashionForward - Fashion & Apparel
+ */
+const fashionForwardTheme: ThemeTemplate = {
+  id: 'fashion-forward',
+  name: 'FashionForward',
+  description: 'Editorial fashion aesthetic — clean lines with striking typography',
+  category: 'FASHION',
+  tags: ['fashion', 'apparel', 'editorial', 'clothing', 'style'],
+  theme: {
+    templateId: 'fashion-forward',
+    colors: {
+      primary: '#111111',
+      secondary: '#C9A96E',    // Gold
+      accent: '#E63946',       // Red
+      background: '#FAFAFA',
+      foreground: '#111111',
+      muted: '#F0EDE6',
+    },
+    typography: {
+      fontFamily: 'inter',
+      headingFontFamily: 'playfair',
+      baseFontSize: 15,
+      headingScale: 1.414,
+    },
+    layout: 'full-width',
+    borderRadius: 'none',
+  },
+  defaultHero: {
+    style: 'split',
+    alignment: 'left',
+    minHeight: 'xl',
+    overlayOpacity: 20,
+  },
+  defaultProductCard: 'overlay',
+};
+
+/**
+ * CafeBistro - Food, Coffee & Beverages
+ */
+const cafeBistroTheme: ThemeTemplate = {
+  id: 'cafe-bistro',
+  name: 'CafeBistro',
+  description: 'Warm, earthy palette designed for food, café & beverage brands',
+  category: 'FOOD_BEVERAGE',
+  tags: ['food', 'coffee', 'cafe', 'restaurant', 'warm', 'earthy'],
+  theme: {
+    templateId: 'cafe-bistro',
+    colors: {
+      primary: '#92400E',      // Brown
+      secondary: '#16A34A',    // Green
+      accent: '#F97316',       // Orange
+      background: '#FFFDF7',   // Cream
+      foreground: '#292524',
+      muted: '#FEF9EF',
+    },
+    typography: {
+      fontFamily: 'poppins',
+      headingFontFamily: 'playfair',
+      baseFontSize: 16,
+      headingScale: 1.333,
+    },
+    layout: 'boxed',
+    borderRadius: 'lg',
+  },
+  defaultHero: {
+    style: 'image',
+    alignment: 'center',
+    minHeight: 'lg',
+    overlayOpacity: 30,
+  },
+  defaultProductCard: 'detailed',
+};
+
+/**
+ * GlowUp - Health, Beauty & Cosmetics
+ */
+const glowUpTheme: ThemeTemplate = {
+  id: 'glow-up',
+  name: 'GlowUp',
+  description: 'Soft, radiant design for health, beauty and cosmetics brands',
+  category: 'HEALTH_BEAUTY',
+  tags: ['beauty', 'cosmetics', 'skincare', 'health', 'feminine', 'soft'],
+  theme: {
+    templateId: 'glow-up',
+    colors: {
+      primary: '#BE185D',      // Deep rose
+      secondary: '#7C3AED',    // Violet
+      accent: '#F59E0B',       // Gold
+      background: '#FFF5F7',   // Blush
+      foreground: '#1F2937',
+      muted: '#FCE7F3',
+    },
+    typography: {
+      fontFamily: 'poppins',
+      headingFontFamily: 'playfair',
+      baseFontSize: 15,
+      headingScale: 1.25,
+    },
+    layout: 'centered',
+    borderRadius: 'xl',
+  },
+  defaultHero: {
+    style: 'gradient',
+    backgroundGradient: 'from-rose-50 via-pink-50 to-purple-50',
+    alignment: 'center',
+    minHeight: 'lg',
+  },
+  defaultProductCard: 'minimal',
+};
+
+/**
+ * HomeVibes - Home Decor & Lifestyle
+ */
+const homeVibesTheme: ThemeTemplate = {
+  id: 'home-vibes',
+  name: 'HomeVibes',
+  description: 'Natural, cozy palette for home decor and lifestyle products',
+  category: 'HOME_LIFESTYLE',
+  tags: ['home', 'decor', 'furniture', 'natural', 'cozy', 'lifestyle'],
+  theme: {
+    templateId: 'home-vibes',
+    colors: {
+      primary: '#78350F',      // Warm brown
+      secondary: '#4D7C0F',    // Olive
+      accent: '#0F766E',       // Teal
+      background: '#FDFAF4',   // Linen
+      foreground: '#1C1917',
+      muted: '#F5F0E8',
+    },
+    typography: {
+      fontFamily: 'inter',
+      headingFontFamily: 'playfair',
+      baseFontSize: 16,
+      headingScale: 1.25,
+    },
+    layout: 'full-width',
+    borderRadius: 'md',
+  },
+  defaultHero: {
+    style: 'gradient',
+    backgroundGradient: 'from-amber-50 via-stone-50 to-green-50',
+    alignment: 'left',
+    minHeight: 'lg',
+  },
+  defaultProductCard: 'standard',
+};
+
+/**
+ * SportZone - Sports, Fitness & Outdoors
+ */
+const sportZoneTheme: ThemeTemplate = {
+  id: 'sport-zone',
+  name: 'SportZone',
+  description: 'High-energy, dynamic design for sports and fitness brands',
+  category: 'SPORTS_OUTDOORS',
+  tags: ['sports', 'fitness', 'outdoors', 'dynamic', 'energetic'],
+  theme: {
+    templateId: 'sport-zone',
+    colors: {
+      primary: '#DC2626',      // Red
+      secondary: '#1D4ED8',    // Blue
+      accent: '#16A34A',       // Green
+      background: '#0F0F0F',   // Near black
+      foreground: '#F9FAFB',
+      muted: '#1F1F1F',
+    },
+    typography: {
+      fontFamily: 'montserrat',
+      baseFontSize: 16,
+      headingScale: 1.5,
+    },
+    layout: 'full-width',
+    borderRadius: 'sm',
+  },
+  defaultHero: {
+    style: 'gradient',
+    backgroundGradient: 'from-red-950 via-gray-950 to-blue-950',
+    alignment: 'center',
+    minHeight: 'xl',
+  },
+  defaultProductCard: 'overlay',
+};
+
+/**
+ * JewelBox - Jewelry & Accessories
+ */
+const jewelBoxTheme: ThemeTemplate = {
+  id: 'jewel-box',
+  name: 'JewelBox',
+  description: 'Opulent dark design with gold accents for jewelry stores',
+  category: 'JEWELRY',
+  tags: ['jewelry', 'accessories', 'luxury', 'gold', 'dark', 'opulent'],
+  theme: {
+    templateId: 'jewel-box',
+    colors: {
+      primary: '#D4AF37',      // Gold
+      secondary: '#8B6914',    // Dark gold
+      accent: '#E8CEFF',       // Lavender
+      background: '#0A0A0A',   // Jet black
+      foreground: '#F5F5F0',
+      muted: '#1A1A1A',
+    },
+    typography: {
+      fontFamily: 'inter',
+      headingFontFamily: 'playfair',
+      baseFontSize: 15,
+      headingScale: 1.25,
+    },
+    layout: 'centered',
+    borderRadius: 'none',
+  },
+  defaultHero: {
+    style: 'minimal',
+    alignment: 'center',
+    minHeight: 'lg',
+    backgroundGradient: 'from-black via-yellow-950 to-black',
+  },
+  defaultProductCard: 'minimal',
+};
+
+/**
+ * Bookshelf - Books & Education
+ */
+const bookshelfTheme: ThemeTemplate = {
+  id: 'bookshelf',
+  name: 'Bookshelf',
+  description: 'Intellectual, clean design for book stores and education platforms',
+  category: 'BOOKS_EDUCATION',
+  tags: ['books', 'education', 'knowledge', 'academic', 'reading'],
+  theme: {
+    templateId: 'bookshelf',
+    colors: {
+      primary: '#1E3A5F',      // Navy
+      secondary: '#C2410C',    // Terra cotta
+      accent: '#0D9488',       // Teal
+      background: '#FFFEF7',   // Ivory
+      foreground: '#1A1A2E',
+      muted: '#F3F0E6',
+    },
+    typography: {
+      fontFamily: 'inter',
+      headingFontFamily: 'playfair',
+      baseFontSize: 16,
+      headingScale: 1.333,
+    },
+    layout: 'boxed',
+    borderRadius: 'sm',
+  },
+  defaultHero: {
+    style: 'split',
+    alignment: 'left',
+    minHeight: 'md',
+    backgroundGradient: 'from-blue-950 to-indigo-950',
+  },
+  defaultProductCard: 'detailed',
+};
+
 /**
  * All available theme templates
  */
@@ -225,6 +528,14 @@ export const themeTemplates: Record<ThemeTemplateId, ThemeTemplate> = {
   elegant: elegantTheme,
   minimal: minimalTheme,
   boutique: boutiqueTheme,
+  'tech-nova': techNovaTheme,
+  'fashion-forward': fashionForwardTheme,
+  'cafe-bistro': cafeBistroTheme,
+  'glow-up': glowUpTheme,
+  'home-vibes': homeVibesTheme,
+  'sport-zone': sportZoneTheme,
+  'jewel-box': jewelBoxTheme,
+  bookshelf: bookshelfTheme,
 };
 
 /**
@@ -241,6 +552,13 @@ export function getAllThemeTemplates(): ThemeTemplate[] {
   return Object.values(themeTemplates);
 }
 
+/**
+ * Get themes filtered by category
+ */
+export function getThemesByCategory(category: ThemeTemplate['category']): ThemeTemplate[] {
+  return Object.values(themeTemplates).filter((t) => t.category === category);
+}
+
 /**
  * Generate CSS variables from theme settings
  */
@@ -272,4 +590,3 @@ function getBorderRadiusValue(radius: ThemeTemplate['theme']['borderRadius']): s
   };
   return values[radius] || '8px';
 }
-
diff --git a/src/lib/storefront/types.ts b/src/lib/storefront/types.ts
index 8d62abc4..f626fe19 100644
--- a/src/lib/storefront/types.ts
+++ b/src/lib/storefront/types.ts
@@ -6,7 +6,35 @@
  */
 
 // Theme template identifiers
-export type ThemeTemplateId = 'modern' | 'classic' | 'bold' | 'elegant' | 'minimal' | 'boutique';
+export type ThemeTemplateId =
+  | 'modern'
+  | 'classic'
+  | 'bold'
+  | 'elegant'
+  | 'minimal'
+  | 'boutique'
+  // Extended marketplace themes
+  | 'tech-nova'
+  | 'fashion-forward'
+  | 'cafe-bistro'
+  | 'glow-up'
+  | 'home-vibes'
+  | 'sport-zone'
+  | 'jewel-box'
+  | 'bookshelf';
+
+// Theme marketplace categories (mirrors Prisma ThemeCategory enum)
+export type ThemeCategory =
+  | 'GENERAL'
+  | 'ELECTRONICS'
+  | 'FASHION'
+  | 'FOOD_BEVERAGE'
+  | 'HEALTH_BEAUTY'
+  | 'HOME_LIFESTYLE'
+  | 'SPORTS_OUTDOORS'
+  | 'BOOKS_EDUCATION'
+  | 'JEWELRY'
+  | 'AUTOMOTIVE';
 
 // Layout variants
 export type LayoutVariant = 'full-width' | 'boxed' | 'centered';
@@ -488,9 +516,40 @@ export interface ThemeTemplate {
   id: ThemeTemplateId;
   name: string;
   description: string;
+  category: ThemeCategory;
+  tags: string[];
   preview?: string;  // Preview image URL
   theme: ThemeSettings;
   defaultHero: Partial<HeroSection>;
   defaultProductCard: ProductCardStyle;
 }
 
+/**
+ * Marketplace theme metadata returned from the API
+ */
+export interface MarketplaceThemeMeta {
+  id: string;
+  slug: string;
+  name: string;
+  description: string;
+  longDescription?: string;
+  category: ThemeCategory;
+  tags: string[];
+  previewImageUrl?: string;
+  thumbnailUrl?: string;
+  previewImages: string[];
+  config: ThemeSettings;
+  status: 'ACTIVE' | 'DRAFT' | 'ARCHIVED';
+  isFeatured: boolean;
+  isPremium: boolean;
+  price: number;
+  author: string;
+  version: string;
+  downloadCount: number;
+  averageRating: number;
+  ratingCount: number;
+  createdAt: string;
+  updatedAt: string;
+  isInstalled?: boolean;
+}
+
diff --git a/tsconfig.json b/tsconfig.json
index e3b11f49..2d7f2a9d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -40,6 +40,7 @@
     "node_modules",
     "scripts",
     ".next",
+    "apps",
     "src/test/**",
     "e2e/**",
     "coverage/**",
diff --git a/vercel.json b/vercel.json
index 9c6f2572..602fd977 100644
--- a/vercel.json
+++ b/vercel.json
@@ -32,3 +32,4 @@
   },
   "crons": []
 }
+

From 296a2176be0951547e07db06a93e9145c620a8ad Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 5 Mar 2026 11:31:01 +0000
Subject: [PATCH 3/3] fix: address code review comments + add migration and
 docs

- Add MOCK_DOWNLOAD_COUNTS/MOCK_AVERAGE_RATINGS named constants
- Type themeConfig as ThemeSettings (not object) in install route
- Fix NEXT_PUBLIC_MAIN_APP_URL fallback to 'http://localhost:3000' in zone clients
- Extract headingFontSize calculation variable in typography preview
- Use radiusClasses object lookup instead of nested ternaries
- Remove redundant type assertions in editor page (StorefrontDraft.theme properly typed)
- Add Prisma migration SQL for MarketplaceTheme/ThemeInstallation/ThemeRating
- Add prisma/seed-marketplace.mjs for seeding 14 themes
- Add docs/MULTI_ZONE_SETUP.md with setup guide

Co-authored-by: rezwana-karim <126201034+rezwana-karim@users.noreply.github.com>
---
 apps/theme-editor/src/app/page.tsx            |   4 +-
 .../src/components/theme-editor-client.tsx    |  48 ++--
 apps/theme-editor/src/lib/types.ts            |   2 +-
 .../src/components/theme-detail-client.tsx    |   2 +-
 .../src/components/theme-gallery.tsx          |   2 +-
 docs/MULTI_ZONE_SETUP.md                      | 192 ++++++++++++++
 .../migration.sql                             |  92 +++++++
 prisma/seed-marketplace.mjs                   | 246 ++++++++++++++++++
 .../marketplace/themes/[id]/install/route.ts  |   4 +-
 src/app/api/marketplace/themes/route.ts       |   7 +-
 10 files changed, 572 insertions(+), 27 deletions(-)
 create mode 100644 docs/MULTI_ZONE_SETUP.md
 create mode 100644 prisma/migrations/20260305000000_add_theme_marketplace/migration.sql
 create mode 100644 prisma/seed-marketplace.mjs

diff --git a/apps/theme-editor/src/app/page.tsx b/apps/theme-editor/src/app/page.tsx
index a9588f1c..cf7a552c 100644
--- a/apps/theme-editor/src/app/page.tsx
+++ b/apps/theme-editor/src/app/page.tsx
@@ -79,8 +79,8 @@ export default async function ThemeEditorPage({
 
   // Theme priority: marketplace theme URL param > draft/published > default
   const initialTheme: ThemeSettings =
-    (marketplaceThemeConfig as ThemeSettings | null) ??
-    (config?.theme as ThemeSettings | undefined) ??
+    marketplaceThemeConfig ??
+    config?.theme ??
     DEFAULT_THEME;
 
   const storeName = storeInfo?.name ?? 'My Store';
diff --git a/apps/theme-editor/src/components/theme-editor-client.tsx b/apps/theme-editor/src/components/theme-editor-client.tsx
index 0751fc20..538b318a 100644
--- a/apps/theme-editor/src/components/theme-editor-client.tsx
+++ b/apps/theme-editor/src/components/theme-editor-client.tsx
@@ -474,12 +474,19 @@ function TypographySection({
       {/* Preview */}
       <div className="rounded-lg border border-gray-100 bg-gray-50 p-3 space-y-1">
         <p className="text-[10px] text-gray-400 uppercase tracking-wide mb-2">Preview</p>
-        <p style={{ fontFamily: typography.fontFamily, fontSize: typography.baseFontSize * typography.headingScale * typography.headingScale + 'px', fontWeight: 700 }}>
-          Heading
-        </p>
-        <p style={{ fontFamily: typography.fontFamily, fontSize: typography.baseFontSize }}>
-          Body text sample.
-        </p>
+        {(() => {
+          const headingFontSize = typography.baseFontSize * typography.headingScale * typography.headingScale;
+          return (
+            <>
+              <p style={{ fontFamily: typography.fontFamily, fontSize: headingFontSize + 'px', fontWeight: 700 }}>
+                Heading
+              </p>
+              <p style={{ fontFamily: typography.fontFamily, fontSize: typography.baseFontSize }}>
+                Body text sample.
+              </p>
+            </>
+          );
+        })()}
       </div>
     </div>
   );
@@ -536,18 +543,23 @@ function LayoutSection({
         </div>
         {/* Visual preview */}
         <div className="flex gap-2 mt-2">
-          {(['none', 'sm', 'md', 'lg', 'xl'] as const).map((r) => (
-            <div
-              key={r}
-              className={`flex-1 h-8 bg-indigo-500 ${
-                r === 'none' ? 'rounded-none' :
-                r === 'sm' ? 'rounded' :
-                r === 'md' ? 'rounded-md' :
-                r === 'lg' ? 'rounded-xl' :
-                'rounded-2xl'
-              } ${borderRadius === r ? 'opacity-100 ring-2 ring-indigo-700 ring-offset-1' : 'opacity-40'}`}
-            />
-          ))}
+          {(() => {
+            const radiusClasses: Record<ThemeSettings['borderRadius'], string> = {
+              none: 'rounded-none',
+              sm: 'rounded',
+              md: 'rounded-md',
+              lg: 'rounded-xl',
+              xl: 'rounded-2xl',
+            };
+            return (['none', 'sm', 'md', 'lg', 'xl'] as const).map((r) => (
+              <div
+                key={r}
+                className={`flex-1 h-8 bg-indigo-500 ${radiusClasses[r]} ${
+                  borderRadius === r ? 'opacity-100 ring-2 ring-indigo-700 ring-offset-1' : 'opacity-40'
+                }`}
+              />
+            ));
+          })()}
         </div>
       </div>
     </div>
diff --git a/apps/theme-editor/src/lib/types.ts b/apps/theme-editor/src/lib/types.ts
index c504d9c1..1f513f9c 100644
--- a/apps/theme-editor/src/lib/types.ts
+++ b/apps/theme-editor/src/lib/types.ts
@@ -48,7 +48,7 @@ export interface ThemeSettings {
 }
 
 export interface StorefrontDraft {
-  theme: ThemeSettings;
+  theme?: ThemeSettings;
   storeName?: string;
   storeSlug?: string;
   [key: string]: unknown;
diff --git a/apps/theme-marketplace/src/components/theme-detail-client.tsx b/apps/theme-marketplace/src/components/theme-detail-client.tsx
index d959a8f6..5d5c0a29 100644
--- a/apps/theme-marketplace/src/components/theme-detail-client.tsx
+++ b/apps/theme-marketplace/src/components/theme-detail-client.tsx
@@ -13,7 +13,7 @@ export function ThemeDetailClient({ theme, storeId }: Props) {
   const [installed, setInstalled] = useState(theme.isInstalled ?? false);
   const [error, setError] = useState('');
 
-  const mainAppUrl = process.env.NEXT_PUBLIC_MAIN_APP_URL ?? '';
+  const mainAppUrl = process.env.NEXT_PUBLIC_MAIN_APP_URL ?? 'http://localhost:3000';
 
   const handleInstall = async () => {
     if (!storeId) {
diff --git a/apps/theme-marketplace/src/components/theme-gallery.tsx b/apps/theme-marketplace/src/components/theme-gallery.tsx
index 3e290677..653e5d08 100644
--- a/apps/theme-marketplace/src/components/theme-gallery.tsx
+++ b/apps/theme-marketplace/src/components/theme-gallery.tsx
@@ -37,7 +37,7 @@ export function ThemeGallery({ initialData, storeId }: Props) {
       });
 
       try {
-        const mainAppUrl = process.env.NEXT_PUBLIC_MAIN_APP_URL ?? '';
+        const mainAppUrl = process.env.NEXT_PUBLIC_MAIN_APP_URL ?? 'http://localhost:3000';
         const apiUrl = new URL(`${mainAppUrl}/api/marketplace/themes`);
         if (category) apiUrl.searchParams.set('category', category);
         if (q) apiUrl.searchParams.set('q', q);
diff --git a/docs/MULTI_ZONE_SETUP.md b/docs/MULTI_ZONE_SETUP.md
new file mode 100644
index 00000000..cd44ffbd
--- /dev/null
+++ b/docs/MULTI_ZONE_SETUP.md
@@ -0,0 +1,192 @@
+# Theme Marketplace & Theme Editor — Multi-Zone Setup
+
+This document describes the **multi-zone architecture** for the StormCom Theme Marketplace and Theme Editor.
+
+---
+
+## Architecture Overview
+
+```
+┌─────────────────────────────────────────────────────────┐
+│   Main StormCom App (localhost:3000)                    │
+│                                                         │
+│   /themes/*         ──rewrite──▶  Theme Marketplace    │
+│   /themes/editor/*  ──rewrite──▶  Theme Editor         │
+│   /api/marketplace/themes/*  (local API routes)        │
+└─────────────────────────────────────────────────────────┘
+         │                       │
+         ▼                       ▼
+┌──────────────────┐   ┌───────────────────┐
+│  Theme           │   │  Theme Editor     │
+│  Marketplace     │   │  (localhost:3002) │
+│  (localhost:3001)│   │                   │
+│  basePath:       │   │  basePath:        │
+│  /themes         │   │  /themes/editor   │
+└──────────────────┘   └───────────────────┘
+```
+
+Both zone apps communicate back to the main app via its REST API for all data operations (auth, storefront config, marketplace themes).
+
+---
+
+## Local Development
+
+### 1. Start the Main App
+
+```bash
+npm run dev        # Starts on port 3000
+```
+
+### 2. Start the Theme Marketplace Zone
+
+```bash
+cd apps/theme-marketplace
+npm install
+NEXT_PUBLIC_MAIN_APP_URL=http://localhost:3000 npm run dev
+# → http://localhost:3001
+```
+
+### 3. Start the Theme Editor Zone
+
+```bash
+cd apps/theme-editor
+npm install
+NEXT_PUBLIC_MAIN_APP_URL=http://localhost:3000 npm run dev
+# → http://localhost:3002
+```
+
+### 4. Access via Main App (multi-zone URLs)
+
+The main app's `next.config.ts` rewrites these routes:
+
+| URL | Zone |
+|-----|------|
+| `http://localhost:3000/themes` | Theme Marketplace (port 3001) |
+| `http://localhost:3000/themes/editor` | Theme Editor (port 3002) |
+
+---
+
+## Environment Variables
+
+### Main App (`.env.local`)
+
+```env
+# URLs of separately deployed zone apps
+THEME_MARKETPLACE_URL=http://localhost:3001
+THEME_EDITOR_URL=http://localhost:3002
+```
+
+### Zone Apps
+
+```env
+# URL of the main StormCom app (for API calls)
+NEXT_PUBLIC_MAIN_APP_URL=http://localhost:3000
+```
+
+---
+
+## Database Setup
+
+### Run Migration
+
+```bash
+export $(cat .env.local | grep -v '^#' | grep -v '^$' | sed 's/"//g' | xargs)
+npx prisma migrate dev
+```
+
+This adds:
+- `MarketplaceTheme` — stores theme catalog
+- `ThemeInstallation` — tracks which stores have installed which themes
+- `ThemeRating` — star ratings + reviews from store owners
+
+### Seed Marketplace Themes
+
+```bash
+node prisma/seed-marketplace.mjs
+```
+
+---
+
+## API Routes (Main App)
+
+| Method | Path | Description |
+|--------|------|-------------|
+| GET | `/api/marketplace/themes` | List themes (supports `category`, `q`, `sort`, `page`, `storeId`) |
+| GET | `/api/marketplace/themes/:id` | Get single theme details |
+| POST | `/api/marketplace/themes/:id/install` | Install theme to store (auth required) |
+| POST | `/api/marketplace/themes/:id/rate` | Submit star rating (auth required) |
+
+---
+
+## Theme Categories
+
+| Category | Description |
+|----------|-------------|
+| `GENERAL` | Multi-purpose store themes |
+| `ELECTRONICS` | Tech & gadget stores |
+| `FASHION` | Apparel & clothing |
+| `FOOD_BEVERAGE` | Cafés, restaurants, food brands |
+| `HEALTH_BEAUTY` | Cosmetics, skincare, wellness |
+| `HOME_LIFESTYLE` | Home decor & furniture |
+| `SPORTS_OUTDOORS` | Sports & fitness brands |
+| `BOOKS_EDUCATION` | Bookstores & educational platforms |
+| `JEWELRY` | Jewelry & luxury accessories |
+| `AUTOMOTIVE` | Auto parts & accessories |
+
+---
+
+## Built-in Themes (14 total)
+
+| Slug | Name | Category |
+|------|------|----------|
+| `modern` | Modern | GENERAL |
+| `classic` | Classic | GENERAL |
+| `bold` | Bold | GENERAL |
+| `elegant` | Elegant | GENERAL |
+| `minimal` | Minimal | GENERAL |
+| `boutique` | Boutique | FASHION |
+| `tech-nova` | TechNova | ELECTRONICS |
+| `fashion-forward` | FashionForward | FASHION |
+| `cafe-bistro` | CafeBistro | FOOD_BEVERAGE |
+| `glow-up` | GlowUp | HEALTH_BEAUTY |
+| `home-vibes` | HomeVibes | HOME_LIFESTYLE |
+| `sport-zone` | SportZone | SPORTS_OUTDOORS |
+| `jewel-box` | JewelBox | JEWELRY |
+| `bookshelf` | Bookshelf | BOOKS_EDUCATION |
+
+---
+
+## Theme Editor Features
+
+- **Live Preview** — iframe renders the store's actual storefront, updated in real-time via `postMessage`
+- **Color Editor** — Color picker + hex input for all 6 color tokens; 8 quick palette presets
+- **Typography Editor** — Body/heading font selection, font size slider (14–18px), heading scale slider
+- **Layout Editor** — Page layout (full-width / boxed / centered) + border radius presets
+- **Custom CSS** — Raw CSS override with CSS variable documentation
+- **Auto-save Draft** — Changes auto-save after 2 seconds of inactivity
+- **Publish** — One-click publish of draft to live storefront
+- **Device Preview** — Desktop / tablet / mobile viewport switcher
+
+---
+
+## Vercel Deployment (Multi-Zone)
+
+Deploy each zone as a separate Vercel project, then set environment variables:
+
+**Main app:**
+```
+THEME_MARKETPLACE_URL=https://your-theme-marketplace.vercel.app
+THEME_EDITOR_URL=https://your-theme-editor.vercel.app
+```
+
+**Theme Marketplace app (`apps/theme-marketplace`):**
+```
+NEXT_PUBLIC_MAIN_APP_URL=https://your-stormcom-app.vercel.app
+```
+
+**Theme Editor app (`apps/theme-editor`):**
+```
+NEXT_PUBLIC_MAIN_APP_URL=https://your-stormcom-app.vercel.app
+```
+
+Each zone app has its own `vercel.json` and `package.json`.
diff --git a/prisma/migrations/20260305000000_add_theme_marketplace/migration.sql b/prisma/migrations/20260305000000_add_theme_marketplace/migration.sql
new file mode 100644
index 00000000..c5c83f6b
--- /dev/null
+++ b/prisma/migrations/20260305000000_add_theme_marketplace/migration.sql
@@ -0,0 +1,92 @@
+-- CreateEnum
+CREATE TYPE "ThemeStatus" AS ENUM ('ACTIVE', 'DRAFT', 'ARCHIVED');
+
+-- CreateEnum
+CREATE TYPE "ThemeCategory" AS ENUM ('GENERAL', 'ELECTRONICS', 'FASHION', 'FOOD_BEVERAGE', 'HEALTH_BEAUTY', 'HOME_LIFESTYLE', 'SPORTS_OUTDOORS', 'BOOKS_EDUCATION', 'JEWELRY', 'AUTOMOTIVE');
+
+-- CreateTable
+CREATE TABLE "marketplace_themes" (
+    "id" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT NOT NULL,
+    "longDescription" TEXT,
+    "category" "ThemeCategory" NOT NULL DEFAULT 'GENERAL',
+    "tags" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "previewImageUrl" TEXT,
+    "thumbnailUrl" TEXT,
+    "previewImages" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "config" TEXT NOT NULL,
+    "status" "ThemeStatus" NOT NULL DEFAULT 'ACTIVE',
+    "isFeatured" BOOLEAN NOT NULL DEFAULT false,
+    "isPremium" BOOLEAN NOT NULL DEFAULT false,
+    "price" DOUBLE PRECISION NOT NULL DEFAULT 0,
+    "author" TEXT NOT NULL DEFAULT 'StormCom',
+    "version" TEXT NOT NULL DEFAULT '1.0.0',
+    "downloadCount" INTEGER NOT NULL DEFAULT 0,
+    "ratingSum" INTEGER NOT NULL DEFAULT 0,
+    "ratingCount" INTEGER NOT NULL DEFAULT 0,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "marketplace_themes_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "theme_installations" (
+    "id" TEXT NOT NULL,
+    "storeId" TEXT NOT NULL,
+    "themeId" TEXT NOT NULL,
+    "installedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "theme_installations_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "theme_ratings" (
+    "id" TEXT NOT NULL,
+    "storeId" TEXT NOT NULL,
+    "themeId" TEXT NOT NULL,
+    "rating" INTEGER NOT NULL,
+    "review" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "theme_ratings_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "marketplace_themes_slug_key" ON "marketplace_themes"("slug");
+
+-- CreateIndex
+CREATE INDEX "marketplace_themes_category_status_idx" ON "marketplace_themes"("category", "status");
+
+-- CreateIndex
+CREATE INDEX "marketplace_themes_isFeatured_status_idx" ON "marketplace_themes"("isFeatured", "status");
+
+-- CreateIndex
+CREATE INDEX "marketplace_themes_downloadCount_idx" ON "marketplace_themes"("downloadCount");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "theme_installations_storeId_themeId_key" ON "theme_installations"("storeId", "themeId");
+
+-- CreateIndex
+CREATE INDEX "theme_installations_storeId_idx" ON "theme_installations"("storeId");
+
+-- CreateIndex
+CREATE INDEX "theme_installations_themeId_idx" ON "theme_installations"("themeId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "theme_ratings_storeId_themeId_key" ON "theme_ratings"("storeId", "themeId");
+
+-- CreateIndex
+CREATE INDEX "theme_ratings_themeId_idx" ON "theme_ratings"("themeId");
+
+-- AddForeignKey
+ALTER TABLE "theme_installations" ADD CONSTRAINT "theme_installations_storeId_fkey" FOREIGN KEY ("storeId") REFERENCES "stores"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "theme_installations" ADD CONSTRAINT "theme_installations_themeId_fkey" FOREIGN KEY ("themeId") REFERENCES "marketplace_themes"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "theme_ratings" ADD CONSTRAINT "theme_ratings_themeId_fkey" FOREIGN KEY ("themeId") REFERENCES "marketplace_themes"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/seed-marketplace.mjs b/prisma/seed-marketplace.mjs
new file mode 100644
index 00000000..d77441ca
--- /dev/null
+++ b/prisma/seed-marketplace.mjs
@@ -0,0 +1,246 @@
+/**
+ * Theme Marketplace Seed Script
+ *
+ * Seeds the marketplace_themes table with the 14 built-in theme templates.
+ * Run with:  node prisma/seed-marketplace.mjs
+ */
+
+import { PrismaClient } from '@prisma/client';
+
+const prisma = new PrismaClient();
+
+const themes = [
+  {
+    slug: 'modern',
+    name: 'Modern',
+    description: 'Clean, minimal design with subtle colors and spacious layout',
+    category: 'GENERAL',
+    tags: ['clean', 'minimal', 'spacious', 'professional'],
+    isFeatured: true,
+    downloadCount: 850,
+    config: JSON.stringify({
+      templateId: 'modern',
+      colors: { primary: '#4F46E5', secondary: '#10B981', accent: '#F59E0B', background: '#FFFFFF', foreground: '#111827', muted: '#F3F4F6' },
+      typography: { fontFamily: 'geist', baseFontSize: 16, headingScale: 1.25 },
+      layout: 'full-width',
+      borderRadius: 'lg',
+    }),
+  },
+  {
+    slug: 'classic',
+    name: 'Classic',
+    description: 'Traditional e-commerce style with warm, inviting colors',
+    category: 'GENERAL',
+    tags: ['traditional', 'warm', 'e-commerce', 'trusted'],
+    downloadCount: 720,
+    config: JSON.stringify({
+      templateId: 'classic',
+      colors: { primary: '#B91C1C', secondary: '#0369A1', accent: '#D97706', background: '#FFFBEB', foreground: '#1F2937', muted: '#FEF3C7' },
+      typography: { fontFamily: 'roboto', headingFontFamily: 'playfair', baseFontSize: 16, headingScale: 1.333 },
+      layout: 'boxed',
+      borderRadius: 'sm',
+    }),
+  },
+  {
+    slug: 'bold',
+    name: 'Bold',
+    description: 'Vibrant colors with large typography for maximum impact',
+    category: 'GENERAL',
+    tags: ['vibrant', 'bold', 'dark', 'impactful'],
+    isFeatured: true,
+    downloadCount: 980,
+    config: JSON.stringify({
+      templateId: 'bold',
+      colors: { primary: '#DC2626', secondary: '#7C3AED', accent: '#FACC15', background: '#18181B', foreground: '#FAFAFA', muted: '#27272A' },
+      typography: { fontFamily: 'montserrat', baseFontSize: 18, headingScale: 1.5 },
+      layout: 'full-width',
+      borderRadius: 'none',
+    }),
+  },
+  {
+    slug: 'elegant',
+    name: 'Elegant',
+    description: 'Luxury, sophisticated design with refined typography',
+    category: 'GENERAL',
+    tags: ['luxury', 'sophisticated', 'refined', 'premium'],
+    downloadCount: 540,
+    config: JSON.stringify({
+      templateId: 'elegant',
+      colors: { primary: '#1F2937', secondary: '#B45309', accent: '#059669', background: '#FAFAF9', foreground: '#1C1917', muted: '#E7E5E4' },
+      typography: { fontFamily: 'inter', headingFontFamily: 'playfair', baseFontSize: 15, headingScale: 1.25 },
+      layout: 'centered',
+      borderRadius: 'md',
+    }),
+  },
+  {
+    slug: 'minimal',
+    name: 'Minimal',
+    description: 'Ultra-clean, whitespace-focused design with subtle elegance',
+    category: 'GENERAL',
+    tags: ['minimalist', 'clean', 'whitespace', 'apple-style'],
+    isFeatured: true,
+    downloadCount: 630,
+    config: JSON.stringify({
+      templateId: 'minimal',
+      colors: { primary: '#000000', secondary: '#6B7280', accent: '#3B82F6', background: '#FFFFFF', foreground: '#000000', muted: '#F9FAFB' },
+      typography: { fontFamily: 'geist', baseFontSize: 16, headingScale: 1.125 },
+      layout: 'centered',
+      borderRadius: 'sm',
+    }),
+  },
+  {
+    slug: 'boutique',
+    name: 'Boutique',
+    description: 'Warm and inviting design perfect for small businesses',
+    category: 'FASHION',
+    tags: ['small-business', 'playful', 'warm', 'boutique'],
+    downloadCount: 410,
+    config: JSON.stringify({
+      templateId: 'boutique',
+      colors: { primary: '#EC4899', secondary: '#8B5CF6', accent: '#F59E0B', background: '#FFFBF5', foreground: '#1F2937', muted: '#FEF3E2' },
+      typography: { fontFamily: 'poppins', headingFontFamily: 'poppins', baseFontSize: 16, headingScale: 1.333 },
+      layout: 'full-width',
+      borderRadius: 'xl',
+    }),
+  },
+  {
+    slug: 'tech-nova',
+    name: 'TechNova',
+    description: 'Futuristic dark theme built for electronics & gadget stores',
+    category: 'ELECTRONICS',
+    tags: ['electronics', 'gadgets', 'dark', 'futuristic', 'tech'],
+    isFeatured: true,
+    downloadCount: 380,
+    config: JSON.stringify({
+      templateId: 'tech-nova',
+      colors: { primary: '#06B6D4', secondary: '#3B82F6', accent: '#A855F7', background: '#0F172A', foreground: '#F1F5F9', muted: '#1E293B' },
+      typography: { fontFamily: 'geist', baseFontSize: 16, headingScale: 1.333 },
+      layout: 'full-width',
+      borderRadius: 'md',
+    }),
+  },
+  {
+    slug: 'fashion-forward',
+    name: 'FashionForward',
+    description: 'Editorial fashion aesthetic — clean lines with striking typography',
+    category: 'FASHION',
+    tags: ['fashion', 'apparel', 'editorial', 'clothing', 'style'],
+    downloadCount: 290,
+    config: JSON.stringify({
+      templateId: 'fashion-forward',
+      colors: { primary: '#111111', secondary: '#C9A96E', accent: '#E63946', background: '#FAFAFA', foreground: '#111111', muted: '#F0EDE6' },
+      typography: { fontFamily: 'inter', headingFontFamily: 'playfair', baseFontSize: 15, headingScale: 1.414 },
+      layout: 'full-width',
+      borderRadius: 'none',
+    }),
+  },
+  {
+    slug: 'cafe-bistro',
+    name: 'CafeBistro',
+    description: 'Warm, earthy palette designed for food, café & beverage brands',
+    category: 'FOOD_BEVERAGE',
+    tags: ['food', 'coffee', 'cafe', 'restaurant', 'warm', 'earthy'],
+    downloadCount: 270,
+    config: JSON.stringify({
+      templateId: 'cafe-bistro',
+      colors: { primary: '#92400E', secondary: '#16A34A', accent: '#F97316', background: '#FFFDF7', foreground: '#292524', muted: '#FEF9EF' },
+      typography: { fontFamily: 'poppins', headingFontFamily: 'playfair', baseFontSize: 16, headingScale: 1.333 },
+      layout: 'boxed',
+      borderRadius: 'lg',
+    }),
+  },
+  {
+    slug: 'glow-up',
+    name: 'GlowUp',
+    description: 'Soft, radiant design for health, beauty and cosmetics brands',
+    category: 'HEALTH_BEAUTY',
+    tags: ['beauty', 'cosmetics', 'skincare', 'health', 'feminine', 'soft'],
+    downloadCount: 250,
+    config: JSON.stringify({
+      templateId: 'glow-up',
+      colors: { primary: '#BE185D', secondary: '#7C3AED', accent: '#F59E0B', background: '#FFF5F7', foreground: '#1F2937', muted: '#FCE7F3' },
+      typography: { fontFamily: 'poppins', headingFontFamily: 'playfair', baseFontSize: 15, headingScale: 1.25 },
+      layout: 'centered',
+      borderRadius: 'xl',
+    }),
+  },
+  {
+    slug: 'home-vibes',
+    name: 'HomeVibes',
+    description: 'Natural, cozy palette for home decor and lifestyle products',
+    category: 'HOME_LIFESTYLE',
+    tags: ['home', 'decor', 'furniture', 'natural', 'cozy', 'lifestyle'],
+    downloadCount: 210,
+    config: JSON.stringify({
+      templateId: 'home-vibes',
+      colors: { primary: '#78350F', secondary: '#4D7C0F', accent: '#0F766E', background: '#FDFAF4', foreground: '#1C1917', muted: '#F5F0E8' },
+      typography: { fontFamily: 'inter', headingFontFamily: 'playfair', baseFontSize: 16, headingScale: 1.25 },
+      layout: 'full-width',
+      borderRadius: 'md',
+    }),
+  },
+  {
+    slug: 'sport-zone',
+    name: 'SportZone',
+    description: 'High-energy, dynamic design for sports and fitness brands',
+    category: 'SPORTS_OUTDOORS',
+    tags: ['sports', 'fitness', 'outdoors', 'dynamic', 'energetic'],
+    downloadCount: 180,
+    config: JSON.stringify({
+      templateId: 'sport-zone',
+      colors: { primary: '#DC2626', secondary: '#1D4ED8', accent: '#16A34A', background: '#0F0F0F', foreground: '#F9FAFB', muted: '#1F1F1F' },
+      typography: { fontFamily: 'montserrat', baseFontSize: 16, headingScale: 1.5 },
+      layout: 'full-width',
+      borderRadius: 'sm',
+    }),
+  },
+  {
+    slug: 'jewel-box',
+    name: 'JewelBox',
+    description: 'Opulent dark design with gold accents for jewelry stores',
+    category: 'JEWELRY',
+    tags: ['jewelry', 'accessories', 'luxury', 'gold', 'dark', 'opulent'],
+    downloadCount: 155,
+    config: JSON.stringify({
+      templateId: 'jewel-box',
+      colors: { primary: '#D4AF37', secondary: '#8B6914', accent: '#E8CEFF', background: '#0A0A0A', foreground: '#F5F5F0', muted: '#1A1A1A' },
+      typography: { fontFamily: 'inter', headingFontFamily: 'playfair', baseFontSize: 15, headingScale: 1.25 },
+      layout: 'centered',
+      borderRadius: 'none',
+    }),
+  },
+  {
+    slug: 'bookshelf',
+    name: 'Bookshelf',
+    description: 'Intellectual, clean design for book stores and education platforms',
+    category: 'BOOKS_EDUCATION',
+    tags: ['books', 'education', 'knowledge', 'academic', 'reading'],
+    downloadCount: 120,
+    config: JSON.stringify({
+      templateId: 'bookshelf',
+      colors: { primary: '#1E3A5F', secondary: '#C2410C', accent: '#0D9488', background: '#FFFEF7', foreground: '#1A1A2E', muted: '#F3F0E6' },
+      typography: { fontFamily: 'inter', headingFontFamily: 'playfair', baseFontSize: 16, headingScale: 1.333 },
+      layout: 'boxed',
+      borderRadius: 'sm',
+    }),
+  },
+];
+
+async function main() {
+  console.log('Seeding marketplace themes…');
+
+  for (const theme of themes) {
+    await prisma.marketplaceTheme.upsert({
+      where: { slug: theme.slug },
+      create: { ...theme, status: 'ACTIVE' },
+      update: { ...theme },
+    });
+    console.log(`  ✓ ${theme.name} (${theme.category})`);
+  }
+
+  console.log(`\nDone! Seeded ${themes.length} themes.`);
+}
+
+main()
+  .catch((e) => { console.error(e); process.exit(1); })
+  .finally(() => prisma.$disconnect());
diff --git a/src/app/api/marketplace/themes/[id]/install/route.ts b/src/app/api/marketplace/themes/[id]/install/route.ts
index 5c9ff605..1916d38a 100644
--- a/src/app/api/marketplace/themes/[id]/install/route.ts
+++ b/src/app/api/marketplace/themes/[id]/install/route.ts
@@ -20,7 +20,7 @@ import {
   parseStorefrontConfig,
   stringifyStorefrontConfig,
 } from '@/lib/storefront/defaults';
-import type { ThemeTemplateId } from '@/lib/storefront/types';
+import type { ThemeSettings, ThemeTemplateId } from '@/lib/storefront/types';
 
 type RouteContext = { params: Promise<{ id: string }> };
 
@@ -70,7 +70,7 @@ export async function POST(request: NextRequest, props: RouteContext) {
     }
 
     // Resolve theme config — prefer DB, fall back to static template
-    let themeConfig: object;
+    let themeConfig: ThemeSettings;
     const dbTheme = await prisma.marketplaceTheme
       .findFirst({ where: { OR: [{ id: themeId }, { slug: themeId }], status: 'ACTIVE' } })
       .catch(() => null);
diff --git a/src/app/api/marketplace/themes/route.ts b/src/app/api/marketplace/themes/route.ts
index e6362beb..6a86705a 100644
--- a/src/app/api/marketplace/themes/route.ts
+++ b/src/app/api/marketplace/themes/route.ts
@@ -84,6 +84,9 @@ export async function GET(request: NextRequest) {
 
       // Map static templates into the same shape as DB themes
       // (return as plain objects — the client receives JSON anyway)
+      // Representative install counts and ratings for display on a fresh database.
+      const MOCK_DOWNLOAD_COUNTS = [850, 720, 540, 980, 630, 410, 380, 290, 270, 250, 210, 180, 155, 120] as const;
+      const MOCK_AVERAGE_RATINGS = [4.8, 4.6, 4.7, 4.9, 4.5, 4.7, 4.6, 4.8, 4.5, 4.7, 4.6, 4.8, 4.5, 4.7] as const;
       const mockThemes = filteredStatic.map((t, idx) => ({
         id: t.id,
         slug: t.id,
@@ -102,8 +105,8 @@ export async function GET(request: NextRequest) {
         price: 0,
         author: 'StormCom',
         version: '1.0.0',
-        downloadCount: [850, 720, 540, 980, 630, 410, 380, 290, 270, 250, 210, 180, 155, 120][idx] ?? 100,
-        ratingSum: Math.round(([4.8, 4.6, 4.7, 4.9, 4.5, 4.7, 4.6, 4.8, 4.5, 4.7, 4.6, 4.8, 4.5, 4.7][idx] ?? 4.5) * 10),
+        downloadCount: MOCK_DOWNLOAD_COUNTS[idx] ?? 100,
+        ratingSum: Math.round((MOCK_AVERAGE_RATINGS[idx] ?? 4.5) * 10),
         ratingCount: 10,
         createdAt: new Date(),
         updatedAt: new Date(),