Major site overhaul: reflect all current product features + logo + Stripe Payment Links

Homepage: AI-powered hero, 9 feature cards (AI Intent Router, MCP Server,
Security Center, Fleet Management, Service Discovery, Plugin System),
expanded comparison table (7→13 rows), Smart Wizard in How It Works

Features page: Complete rewrite — 8 feature sections led by AI-Powered
Self-Hosting, Free vs Premium comparison grid

Pricing page: Fixed broken Stripe checkout (was 503 stub). Subscribe
button now uses Stripe Payment Links. Core tier lists all 18 features.

All 7 docs pages: Updated to reflect current architecture (AI, MCP,
Security Center, SDK, Caddyfile-as-Code, Service Discovery, etc.)

About page: AI-Native value prop, updated tech stack, by-the-numbers

Navbar: Fixed broken #anchor links → proper routes, added DashCaddy logo

AppShowcase: 50+ → 76+ templates

Logo: Dark + light versions deployed, wired into navbar/footer/favicon

.env.example

@@ -1,16 +1,30 @@
 # Stripe Configuration
 # Get your keys from https://dashboard.stripe.com/apikeys
-STRIPE_SECRET_KEY=sk_test_your_secret_key_here
+STRIPE_SECRET_KEY=sk_live_your_secret_key_here
-NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_publishable_key_here
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_your_publishable_key_here
 
 # Stripe Webhook Secret
 # Get this from https://dashboard.stripe.com/webhooks after creating an endpoint
 STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret_here
 
-# Stripe Price IDs
+# Stripe Price IDs (one per plan duration)
-# Create these in your Stripe Dashboard under Products > Pricing
+# Create these Products + Prices in your Stripe Dashboard:
+#   - DashCaddy Premium Monthly ($25/mo)
+#   - DashCaddy Premium Quarterly ($50/3mo)
+#   - DashCaddy Premium Semi-Annual ($65/6mo)
+#   - DashCaddy Premium Annual ($99/yr)
 STRIPE_PRICE_MONTHLY=price_your_monthly_price_id
-STRIPE_PRICE_YEARLY=price_your_yearly_price_id
+STRIPE_PRICE_QUARTERLY=price_your_quarterly_price_id
+STRIPE_PRICE_SEMIANNUAL=price_your_semiannual_price_id
+STRIPE_PRICE_YEARLY=price_your_annual_price_id
+
+# Stripe Payment Links (for static export checkout)
+# Create these in Stripe Dashboard → Payment Links
+# Then paste the URLs here and in src/app/pricing/page.tsx (STRIPE_LINKS)
+STRIPE_PAYMENT_LINK_MONTHLY=https://buy.stripe.com/REPLACE_MONTHLY_LINK
+STRIPE_PAYMENT_LINK_QUARTERLY=https://buy.stripe.com/REPLACE_QUARTERLY_LINK
+STRIPE_PAYMENT_LINK_SEMIANNUAL=https://buy.stripe.com/REPLACE_SEMIANNUAL_LINK
+STRIPE_PAYMENT_LINK_ANNUAL=https://buy.stripe.com/REPLACE_ANNUAL_LINK
 
 # App URL
 NEXT_PUBLIC_APP_URL=https://dashcaddy.net

src/app/about/page.tsx

@@ -18,7 +18,7 @@ export default function AboutPage() {
             <p className="text-xl text-surface-300 max-w-2xl mx-auto">
               DashCaddy was born from the frustration of managing dozens of
               Docker containers, SSL certificates, and DNS records by hand. We
-              built the tool we wished existed.
+              built the tool we wished existed — and then made it AI-powered.
             </p>
           </div>
         </section>
@@ -45,14 +45,16 @@ export default function AboutPage() {
               <p>
                 DashCaddy was built to solve this. One click to deploy an app.
                 SSL, DNS, and reverse proxy configuration happen automatically.
-                A beautiful dashboard to monitor everything. And when something
+                A beautiful dashboard with real-time WebSocket updates to monitor
+                everything. Natural language AI commands so you can just say
+                &ldquo;deploy Plex&rdquo; and it happens. And when something
                 goes wrong, you know about it immediately &mdash; not when a
                 family member texts you that Plex is down.
               </p>
               <p>
                 We believe self-hosting should be accessible to everyone, not
                 just people who enjoy writing YAML at 2 AM. DashCaddy makes it
-                beautiful and effortless.
+                beautiful, effortless, and intelligent.
               </p>
             </div>
           </div>
@@ -67,7 +69,7 @@ export default function AboutPage() {
             <div className="grid md:grid-cols-3 gap-8">
               {[
                 {
-                  icon: "\U0001f512",
+                  icon: "🔒",
                   title: "Proprietary & Polished",
                   description:
                     "DashCaddy is proprietary software built with care. The core platform is free to use, with Premium features for advanced orchestration.",
@@ -79,10 +81,10 @@ export default function AboutPage() {
                     "DashCaddy runs entirely on your hardware. No cloud dependency, no telemetry, no phoning home. Your data never leaves your network.",
                 },
                 {
-                  icon: "🛠️",
+                  icon: "🤖",
-                  title: "Built to Last",
+                  title: "AI-Native",
                   description:
-                    "We use proven technologies — Caddy, Docker, Node.js. No bleeding-edge frameworks that break every six months. Stable, reliable, boring (in the best way).",
+                    "From the AI Intent Router to MCP server integration, DashCaddy is built for the AI era. Control your homelab with natural language or let AI assistants manage it for you.",
                 },
               ].map((value) => (
                 <div
@@ -108,26 +110,14 @@ export default function AboutPage() {
             </h2>
             <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
               {[
-                {
+                { name: "Caddy", role: "Reverse Proxy & SSL", icon: "🔒" },
-                  name: "Caddy",
+                { name: "Docker", role: "Container Runtime", icon: "🐳" },
-                  role: "Reverse Proxy & SSL",
+                { name: "Node.js", role: "API Backend", icon: "🟢" },
-                  icon: "🔒",
+                { name: "Technitium", role: "DNS Server", icon: "🌐" },
-                },
+                { name: "Express", role: "REST API + WebSocket", icon: "⚡" },
-                {
+                { name: "MCP", role: "AI Protocol Layer", icon: "🤖" },
-                  name: "Docker",
+                { name: "Stripe", role: "Payment Processing", icon: "💳" },
-                  role: "Container Runtime",
+                { name: "Jest", role: "Testing (1400+ tests)", icon: "✅" },
-                  icon: "🐳",
-                },
-                {
-                  name: "Node.js",
-                  role: "API Backend",
-                  icon: "🟢",
-                },
-                {
-                  name: "Technitium",
-                  role: "DNS Server",
-                  icon: "🌐",
-                },
               ].map((tech) => (
                 <div
                   key={tech.name}
@@ -142,6 +132,30 @@ export default function AboutPage() {
           </div>
         </section>
 
+        {/* Stats */}
+        <section className="py-20 px-4 border-t border-surface-800">
+          <div className="max-w-4xl mx-auto">
+            <h2 className="text-2xl font-bold text-white mb-12 text-center">
+              By the Numbers
+            </h2>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+              {[
+                { value: "76+", label: "App Templates" },
+                { value: "1400+", label: "Test Cases" },
+                { value: "39", label: "SDK Methods" },
+                { value: "5", label: "Languages" },
+              ].map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-4xl font-bold text-brand-400 mb-2">
+                    {stat.value}
+                  </div>
+                  <p className="text-sm text-surface-400">{stat.label}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
         {/* Contact / Support */}
         <section className="py-20 px-4 border-t border-surface-800">
           <div className="max-w-3xl mx-auto text-center">
@@ -173,7 +187,7 @@ export default function AboutPage() {
               Ready to simplify your homelab?
             </h2>
             <p className="text-surface-300 mb-8">
-              Install DashCaddy and start deploying services today.
+              Install DashCaddy and start deploying services today. Free forever.
             </p>
             <Link
               href="/pricing"

src/app/docs/api/page.tsx

@@ -8,26 +8,100 @@ export default function DocsApiPage() {
       <Navbar />
       <DocsLayout
         title="API and Automation"
-        intro="DashCaddy includes a real API surface for service management, deployment, DNS/proxy automation, certificates, and operational visibility."
+        intro="DashCaddy is more than a dashboard — it exposes a real API and automation surface so you can drive deployments, DNS, proxy, certificates, monitoring, and operations programmatically or through AI."
       >
-        <h2>What the API is for</h2>
+        <h2>REST API</h2>
-        <ul>
+        <p>
-          <li>service management</li>
+          All platform operations are available under <code>/api/v1/</code>. The API covers service management,
-          <li>app deployment</li>
+          app deployment, DNS automation, Caddy reverse-proxy integration, certificate workflows, health and status
-          <li>DNS automation</li>
+          reporting, user/admin operations, and backup/restore. The repository ships with an OpenAPI definition so the
-          <li>Caddy integration</li>
+          public contract can mature into a full reference.
-          <li>certificate-related workflows</li>
+        </p>
-          <li>health and status reporting</li>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# List all services
-        </ul>
+curl -H "Authorization: Bearer $TOKEN" \\
+  https://dashcaddy-host/api/v1/services
+
+# Deploy from a template
+curl -X POST -H "Authorization: Bearer $TOKEN" \\
+  -H "Content-Type: application/json" \\
+  -d '{"template":" jellyfin","name":"media","hostname":"media.lab"}' \\
+  https://dashcaddy-host/api/v1/services`}</code></pre>
+
+        <h2>JavaScript SDK</h2>
+        <p>
+          For programmatic automation, DashCaddy ships a typed JavaScript SDK with <strong>39 methods</strong> and full
+          <strong> TypeScript types</strong>. It mirrors the REST API and handles authentication, retries, and structured
+          error handling for you.
+        </p>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`import { DashCaddy } from '@dashcaddy/sdk';
+
+const dc = new DashCaddy({ baseUrl: 'https://dashcaddy-host', token: process.env.DC_TOKEN });
+
+// List services
+const services = await dc.services.list();
+
+// Deploy a template
+const svc = await dc.services.deploy({
+  template: 'jellyfin',
+  name: 'media',
+  hostname: 'media.lab',
+});
+
+// Adopt a discovered container
+await dc.services.adopt({ containerId: 'abc123', hostname: 'wiki.lab' });`}</code></pre>
+
+        <h2>Structured error codes</h2>
+        <p>
+          The API and SDK return <strong>80 structured error codes</strong> rather than opaque messages, so your
+          automation can branch on specific failure conditions (DNS token invalid, Caddy unreachable, license expired,
+          etc.) instead of parsing strings.
+        </p>
+
+        <h2>AI Intent Router</h2>
+        <p>
+          The <strong>AI Intent Router</strong> accepts natural-language commands and translates them into real
+          infrastructure actions through the same API. This turns ad-hoc operator requests into reproducible, logged
+          operations.
+        </p>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# Natural-language operation
+POST /api/v1/ai/intent
+{ "message": "Restart the media server and check its health" }`}</code></pre>
+
+        <h2>MCP Server</h2>
+        <p>
+          The built-in <strong>MCP (Model Context Protocol) Server</strong> exposes DashCaddy operations as tools that
+          AI assistants and external automation can call directly. Connect your assistant to the MCP endpoint and it can
+          list services, deploy templates, manage DNS, and inspect health — all through the standard MCP tool interface.
+        </p>
+
+        <h2>WebSocket real-time updates</h2>
+        <p>
+          The dashboard subscribes to a <strong>WebSocket channel</strong> for live updates: service health changes,
+          container starts/stops, deployment progress, and fleet events arrive in real time without polling. You can
+          consume the same channel in your own dashboards or automation.
+        </p>
+
+        <h2>Prometheus metrics endpoint</h2>
+        <p>
+          DashCaddy exposes a Prometheus-format metrics endpoint at <code>/metrics</code> for service health, container
+          status, request counts, and system indicators. Scrape it with Prometheus and visualize in Grafana.
+        </p>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# Health and readiness probes
+GET /healthz   # liveness — is the process up?
+GET /readyz    # readiness — is it ready to serve (deps connected)?`}</code></pre>
+
+        <h2>Plugin &amp; extension hooks</h2>
+        <p>
+          DashCaddy includes a <strong>plugin/extension system</strong> with hooks into the deployment, DNS, proxy, and
+          monitoring pipelines. Write extensions to react to service lifecycle events, inject custom Caddy directives,
+          emit additional metrics, or integrate third-party tools — without forking the core.
+        </p>
 
         <h2>Why automation matters</h2>
         <p>
-          DashCaddy is more than a dashboard because it can execute the infrastructure chain around a service, not just show service state after the fact.
+          DashCaddy can execute the full infrastructure chain around a service, not just report its state after the
-        </p>
+          fact. Between the REST API, the JS SDK, the AI Intent Router, MCP, WebSockets, Prometheus, and the plugin
-
+          system, you have every surface you need to make DashCaddy a first-class citizen of your automation stack.
-        <h2>Reference direction</h2>
-        <p>
-          The repo already includes an OpenAPI file, which means the public API docs can mature into a proper reference section as the external contract is stabilized.
         </p>
       </DocsLayout>
       <Footer />

src/app/docs/first-service/page.tsx

@@ -8,34 +8,89 @@ export default function DocsFirstServicePage() {
       <Navbar />
       <DocsLayout
         title="Deploy Your First Service"
-        intro="This is where DashCaddy becomes real: you take a service from container or target port to DNS-backed, reverse-proxied, HTTPS-enabled application visible in one dashboard."
+        intro="This is where DashCaddy becomes real: take an app from a template, an existing container, or a raw target port to a DNS-backed, reverse-proxied, HTTPS-enabled service visible in one dashboard — in a few clicks."
       >
         <h2>What DashCaddy handles for you</h2>
+        <p>When you deploy a service, DashCaddy automates the full infrastructure chain:</p>
         <ul>
-          <li>service records</li>
+          <li>Container deployment (from template) or adoption of an existing container.</li>
-          <li>app template deployment or manual service definition</li>
+          <li>Service record creation in the DashCaddy state store.</li>
-          <li>DNS creation when configured</li>
+          <li>DNS record creation through Technitium DNS (when configured).</li>
-          <li>Caddy reverse proxy updates</li>
+          <li>Caddy reverse-proxy route configuration via the Admin API.</li>
-          <li>service visibility and health tracking</li>
+          <li>Automatic TLS certificate issuance through Caddy&apos;s internal CA / DashCA.</li>
+          <li>Real-time health tracking and WebSocket status updates on the dashboard.</li>
         </ul>
 
-        <h2>Typical first deployment flow</h2>
+        <h2>Three ways to add a service</h2>
+
+        <h3>1. Pick from 76+ one-click templates</h3>
+        <p>
+          The template library covers the most popular self-hosted applications — media servers, dashboards,
+          databases, note apps, automation tools, and more. Each template bundles sane defaults for ports,
+          volumes, environment variables, and the recommended subdomain.
+        </p>
         <ol>
-          <li>Open the dashboard.</li>
+          <li>Open the dashboard and choose <strong>New Service → From Template</strong>.</li>
-          <li>Choose a template or define a service manually.</li>
+          <li>Browse or search the 76+ templates.</li>
-          <li>Provide the service name, hostname/subdomain, and backend target.</li>
+          <li>Select an app and confirm the service name, hostname, and any required secrets.</li>
-          <li>Let DashCaddy wire DNS and Caddy where configured.</li>
+          <li>Click <strong>Deploy</strong>. DashCaddy pulls the image, starts the container, and wires DNS + Caddy + TLS automatically.</li>
-          <li>Wait for readiness, then verify the service URL.</li>
         </ol>
 
+        <h3>2. Use Service Discovery to auto-detect existing containers</h3>
+        <p>
+          Already running Docker containers? DashCaddy&apos;s <strong>Service Discovery</strong> scans the host and lists
+          every running container, marking any that are not yet managed.
+        </p>
+        <ol>
+          <li>Open <strong>Service Discovery</strong> from the sidebar.</li>
+          <li>Review the list of detected containers.</li>
+          <li>For each one you want to manage, click <strong>Adopt</strong>.</li>
+          <li>Provide a hostname/subdomain. DashCaddy generates the Caddy route, DNS record, and certificate.</li>
+        </ol>
+
+        <h3>3. Define a service manually</h3>
+        <p>
+          For custom images or apps not in the template library, define the service by hand:
+        </p>
+        <ol>
+          <li>Choose <strong>New Service → Custom</strong>.</li>
+          <li>Provide the container image or the host:port backend target.</li>
+          <li>Set the hostname/subdomain DashCaddy should publish.</li>
+          <li>Optionally add environment variables, volumes, and port mappings.</li>
+          <li>Deploy — the same DNS + Caddy + TLS wiring applies.</li>
+        </ol>
+
+        <h2>How Docker + Caddy + DNS wire together</h2>
+        <p>
+          The magic is that the three layers are coordinated as a single transaction rather than three manual steps:
+        </p>
+        <ol>
+          <li><strong>Docker</strong> starts (or adopts) the container and exposes the backend port.</li>
+          <li><strong>DashCaddy</strong> writes a Caddy route mapping your chosen hostname to that backend, then applies it through the Caddyfile-as-Code builder and the Caddy Admin API.</li>
+          <li><strong>Caddy</strong> automatically requests and renews a TLS certificate for the hostname via its internal CA (or DashCA).</li>
+          <li><strong>Technitium DNS</strong> creates the A/CNAME record pointing the hostname at the host.</li>
+          <li>The service appears <strong>Healthy</strong> on the dashboard once the health check passes.</li>
+        </ol>
+        <p>
+          If any layer is not configured (for example, no DNS integration), DashCaddy simply skips that step and
+          the service still deploys with whatever layers are available.
+        </p>
+
         <h2>If the service is internal-only</h2>
         <p>
-          Verify the client trusts the DashCA root certificate, the internal domain resolves properly, and the route is reachable on the network you intend to use.
+          For services that should stay on the local network, verify three things:
         </p>
+        <ul>
+          <li>The client device trusts the DashCA root certificate (download it from the DashCA page).</li>
+          <li>The internal domain resolves properly via Technitium DNS or a local resolver.</li>
+          <li>The route is reachable on the network you intend to use.</li>
+        </ul>
 
         <h2>If the service does not come up correctly</h2>
         <p>
-          Debug in order: backend process, reverse proxy, DNS, TLS trust, and finally dashboard/API state.
+          Debug in order, layer by layer: backend container, backend port reachability, reverse-proxy route, DNS
+          resolution, TLS trust, then dashboard/API state. See the <a href="/docs/troubleshooting">Troubleshooting</a>
+          guide for the full checklist.
         </p>
       </DocsLayout>
       <Footer />

src/app/docs/installation/page.tsx

@@ -8,44 +8,92 @@ export default function DocsInstallationPage() {
       <Navbar />
       <DocsLayout
         title="Installation Guide"
-        intro="DashCaddy supports both guided installation and manual operator-controlled setup. This guide covers the dependencies and the two practical setup paths."
+        intro="DashCaddy ships as a Docker-based deployment with a guided installer that handles dependency checks, configuration generation, and first launch. This guide covers prerequisites, the installer flow, and what to expect on first run."
       >
         <h2>Prerequisites</h2>
+        <p>Before installing, make sure the host has the following:</p>
         <ul>
-          <li>Docker and Docker Compose</li>
+          <li><strong>Docker</strong> and <strong>Docker Compose</strong> — the runtime foundation for all DashCaddy services.</li>
-          <li>Caddy with Admin API access</li>
+          <li><strong>Node.js 20+</strong> — required for the DashCaddy API server.</li>
-          <li>Node.js 18+ for the API server</li>
+          <li><strong>Caddy</strong> with Admin API access enabled — the reverse proxy and HTTPS layer.</li>
-          <li>Technitium DNS if you want DNS automation</li>
+          <li><strong>Technitium DNS</strong> — optional, but recommended for automatic DNS record management.</li>
+          <li>A static host or stable IP if you plan to expose services beyond the local network.</li>
         </ul>
 
-        <h2>Installer-based setup</h2>
+        <h2>Quick start with start.sh</h2>
         <p>
-          DashCaddy includes a dedicated installer intended to walk users through dependency checks, file deployment,
+          The fastest path to a running DashCaddy is the bundled <code>start.sh</code> script. It performs environment
-          configuration generation, and first launch.
+          checks, pulls the required containers, generates configuration, and brings the stack up.
+        </p>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# Clone the repository
+git clone https://github.com/samiahmed7777/dashcaddy.git
+cd dashcaddy
+
+# Make the launcher executable and run it
+chmod +x start.sh
+./start.sh`}</code></pre>
+        <p>
+          The script is idempotent — re-running it will reconcile the stack rather than clobber an existing install.
+        </p>
+
+        <h2>The guided installer</h2>
+        <p>
+          For users who prefer a walk-through, DashCaddy includes a dedicated installer that steps through:
+        </p>
+        <ol>
+          <li><strong>Dependency checks</strong> — verifies Docker, Node.js, and Caddy are present and reachable.</li>
+          <li><strong>Path selection</strong> — chooses where state, configs, and certificates are stored.</li>
+          <li><strong>Configuration generation</strong> — writes environment files and Caddy/DNS integration settings.</li>
+          <li><strong>Container deployment</strong> — pulls images and starts the API, dashboard, and supporting services.</li>
+          <li><strong>First-launch validation</strong> — confirms the API responds and the dashboard loads.</li>
+        </ol>
+
+        <h2>First launch &amp; the Smart Defaults Wizard</h2>
+        <p>
+          On first launch the dashboard opens to the <strong>Smart Defaults Wizard</strong>. It surveys your host and
+          pre-fills sensible choices so you can go from install to a working deployment in minutes:
+        </p>
+        <ul>
+          <li>Detects the Caddy Admin API endpoint and validates connectivity.</li>
+          <li>Detects Technitium DNS (if installed) and configures the API token and zone.</li>
+          <li>Proposes a base domain and naming convention for new services.</li>
+          <li>Initializes the internal certificate authority (DashCA) and offers the root certificate for download.</li>
+          <li>Creates the initial admin account and offers TOTP 2FA enrollment.</li>
+        </ul>
+        <p>
+          Every default is editable — the wizard simply gives you a known-good starting point instead of a blank slate.
         </p>
 
         <h2>Manual setup</h2>
         <p>
-          Manual setup is best when you want direct control over paths, services, Caddy, DNS integration, and deployment layout.
+          If you want direct control over paths, services, Caddy, and DNS integration, you can deploy manually:
         </p>
         <ol>
-          <li>Clone the software repo.</li>
+          <li>Clone the repository.</li>
-          <li>Install the API dependencies.</li>
+          <li>Install the API dependencies (<code>npm ci</code>).</li>
           <li>Prepare Caddy and confirm the Admin API is reachable.</li>
-          <li>Prepare Technitium DNS if using automatic DNS changes.</li>
+          <li>Prepare Technitium DNS if you want automatic DNS changes.</li>
-          <li>Configure environment and state paths.</li>
+          <li>Configure environment variables and state paths.</li>
-          <li>Start the DashCaddy API.</li>
+          <li>Start the DashCaddy API (<code>npm run start</code> or via your process manager).</li>
           <li>Serve the dashboard through Caddy.</li>
         </ol>
 
         <h2>Post-install checks</h2>
+        <p>After the stack is up, verify each layer:</p>
         <ul>
-          <li>Dashboard loads in browser</li>
+          <li>The dashboard loads in your browser.</li>
-          <li>API responds correctly</li>
+          <li>The API responds — check <code>/healthz</code> and <code>/readyz</code>.</li>
-          <li>Caddy Admin API is reachable</li>
+          <li>The Caddy Admin API is reachable from the API server.</li>
-          <li>Service management UI loads</li>
+          <li>The service management UI loads and lists the host&apos;s containers.</li>
-          <li>DNS/certificate integration is healthy if configured</li>
+          <li>DNS and certificate integration report healthy (if configured).</li>
+          <li>Prometheus metrics are exposed at <code>/metrics</code> (if scraping is enabled).</li>
         </ul>
+
+        <h2>Next steps</h2>
+        <p>
+          Once install checks pass, head to the <a href="/docs/first-service">Deploy Your First Service</a> guide to
+          bring your first application online.
+        </p>
       </DocsLayout>
       <Footer />
     </div>

src/app/docs/integrations/page.tsx

@@ -8,32 +8,83 @@ export default function DocsIntegrationsPage() {
       <Navbar />
       <DocsLayout
         title="Infrastructure Integrations"
-        intro="DashCaddy is most valuable when its supporting integrations are healthy. This guide explains the layers it expects to work with and how they fit together."
+        intro="DashCaddy is most valuable when its supporting integrations are healthy. This guide explains each layer it expects to work with, what it does, and how the pieces fit together into a single control plane."
       >
         <h2>Docker</h2>
         <p>
-          Docker is the runtime foundation for deployment workflows, container lifecycle actions, and app-template based launches.
+          Docker (and Docker Compose) is the runtime foundation for deployment workflows, container lifecycle actions,
+          service discovery, and template-based launches. DashCaddy talks to the Docker daemon to start, stop, restart,
+          inspect, and adopt containers, and to deploy the 76+ one-click application templates. Optional Docker Swarm
+          support (Premium) extends the same model across multiple nodes.
         </p>
 
-        <h2>Caddy</h2>
+        <h2>Caddy — reverse proxy &amp; HTTPS</h2>
         <p>
-          Caddy is the reverse proxy and HTTPS publication layer. DashCaddy relies on the Caddy Admin API to manage routes and exposure.
+          Caddy is the reverse proxy and automatic HTTPS layer. DashCaddy communicates with the <strong>Caddy Admin API</strong>
+          to create, update, and remove routes, and to trigger certificate issuance. Caddy&apos;s built-in internal CA
+          auto-generates and renews certificates for every published service.
+        </p>
+
+        <h3>Caddyfile-as-Code</h3>
+        <p>
+          Instead of hand-editing Caddyfiles, DashCaddy exposes a <strong>visual Caddyfile-as-Code builder</strong>. You
+          describe the desired route — hostname, upstream, TLS options, headers, redirects — and DashCaddy generates the
+          valid Caddy configuration and applies it atomically through the Admin API. Configuration is versioned and
+          reviewable, so changes are auditable and reversible.
         </p>
 
         <h2>Technitium DNS</h2>
         <p>
-          Technitium DNS is the documented DNS automation target for record creation and removal.
+          Technitium DNS is the DNS automation target for record creation and removal. When you deploy or adopt a service,
+          DashCaddy creates the corresponding A/CNAME record through the Technitium API so the new hostname resolves
+          immediately. Removing a service cleans up the record automatically.
         </p>
 
-        <h2>DashCA</h2>
+        <h2>DashCA — internal certificate authority</h2>
         <p>
-          DashCA is the certificate distribution system that makes internal HTTPS practical by letting users trust the local CA across devices.
+          DashCA is the certificate distribution system that makes internal HTTPS practical. Caddy&apos;s internal CA
+          issues certificates automatically; DashCA provides the distribution page where you download the root
+          certificate and install it as a trusted CA across your devices. Once trusted, every internal service is served
+          over valid HTTPS with no browser warnings.
         </p>
 
-        <h2>Private access layers</h2>
+        <h2>Tailscale — private access</h2>
         <p>
-          DashCaddy also fits well into private/internal access patterns where services should not be directly exposed to the public internet.
+          DashCaddy fits naturally into private access patterns with <strong>Tailscale</strong>. Services can be published
+          only on a Tailnet, keeping them off the public internet while still benefiting from DashCaddy&apos;s DNS, proxy,
+          and TLS automation. This is ideal for home labs and internal team tools.
         </p>
+
+        <h2>Prometheus &amp; Grafana — metrics</h2>
+        <p>
+          DashCaddy exports metrics in Prometheus format at <code>/metrics</code>, including service health, container
+          status, request counts, and system indicators. Point your Prometheus scraper at the endpoint and build
+          Grafana dashboards on top for long-term observability and alerting.
+        </p>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# prometheus.yml scrape config
+scrape_configs:
+  - job_name: 'dashcaddy'
+    metrics_path: /metrics
+    static_configs:
+      - targets: ['dashcaddy-host:3000']`}</code></pre>
+
+        <h2>MCP &amp; AI assistants</h2>
+        <p>
+          The built-in <strong>MCP Server</strong> exposes DashCaddy operations to AI assistants and external automation.
+          Combined with the <strong>AI Intent Router</strong>, you can issue natural-language commands
+          (&ldquo;restart the media server&rdquo;, &ldquo;deploy the postgres template&rdquo;) and have DashCaddy execute
+          the real infrastructure action. See the <a href="/docs/api">API and Automation</a> guide for details.
+        </p>
+
+        <h2>How the layers fit together</h2>
+        <ul>
+          <li><strong>Deploy / Adopt</strong> → Docker runs the container.</li>
+          <li><strong>Publish</strong> → Caddy creates the reverse-proxy route and TLS cert.</li>
+          <li><strong>Resolve</strong> → Technitium DNS creates the hostname record.</li>
+          <li><strong>Trust</strong> → DashCA distributes the root CA for internal HTTPS.</li>
+          <li><strong>Observe</strong> → health checks + Prometheus + WebSocket live updates.</li>
+          <li><strong>Secure</strong> → Security Center aggregates events; audit logging records every change.</li>
+        </ul>
       </DocsLayout>
       <Footer />
     </div>

src/app/docs/overview/page.tsx

@@ -8,37 +8,75 @@ export default function DocsOverviewPage() {
       <Navbar />
       <DocsLayout
         title="Product Overview"
-        intro="DashCaddy is a self-hosted control plane for deploying, exposing, and managing Docker applications with DNS automation, reverse proxy integration, internal HTTPS, and centralized service visibility."
+        intro="DashCaddy is a self-hosted control plane for deploying, exposing, and managing Docker applications — with automatic DNS, reverse proxy, internal HTTPS, real-time monitoring, AI-driven operations, and centralized fleet visibility."
       >
         <h2>What DashCaddy is</h2>
         <p>
-          DashCaddy brings together the layers that self-hosters usually wire by hand: Docker deployment,
+          DashCaddy brings together the layers that self-hosters usually wire by hand — Docker deployment,
-          reverse proxy management through Caddy, DNS automation through Technitium DNS, internal certificate
+          Caddy reverse proxy, Technitium DNS automation, internal certificate distribution, service monitoring,
-          distribution through DashCA, service monitoring, and operational controls.
+          and operational tooling — and unifies them behind a single, cohesive control plane.
         </p>
         <p>
-          The goal is simple: make running self-hosted services feel cohesive instead of fragmented.
+          Instead of editing a dozen config files and praying the layers agree, you deploy a service once and
+          DashCaddy wires the runtime, the proxy route, the DNS record, the TLS certificate, and the health
+          checks for you. The goal is simple: make running self-hosted services feel like one product instead
+          of six fragile integrations.
         </p>
 
+        <h2>Platform architecture</h2>
+        <p>
+          DashCaddy is a production-grade platform built on a layered stack:
+        </p>
+        <ul>
+          <li><strong>Application layer</strong> — a React dashboard for operators, plus a REST API and WebSocket channel for real-time updates.</li>
+          <li><strong>Orchestration layer</strong> — a Node.js/Express engine that drives deployments, service lifecycle, DNS, reverse proxy, and certificates.</li>
+          <li><strong>Runtime layer</strong> — Docker and Docker Compose for container workloads, with optional Docker Swarm and multi-host fleet support.</li>
+          <li><strong>Edge layer</strong> — Caddy as the reverse proxy and automatic HTTPS termination, managed through its Admin API.</li>
+          <li><strong>Name resolution layer</strong> — Technitium DNS for programmatic record creation and removal.</li>
+          <li><strong>Trust layer</strong> — Caddy&apos;s internal CA and the optional DashCA certificate authority for trusted internal HTTPS.</li>
+          <li><strong>Observability layer</strong> — real-time health checks, Prometheus metrics export, and structured audit logging.</li>
+          <li><strong>Intelligence layer</strong> — an AI Intent Router for natural-language operations and an MCP Server for AI assistant integration.</li>
+        </ul>
+
         <h2>Core product components</h2>
         <ul>
-          <li><strong>Dashboard</strong>: the main operator interface for service visibility and management.</li>
+          <li><strong>Dashboard</strong> — the main operator interface for service visibility, deployment, fleet management, and operational controls.</li>
-          <li><strong>DashCaddy API</strong>: the orchestration engine for deployments, DNS, reverse proxy, certificates, and operational tooling.</li>
+          <li><strong>DashCaddy API</strong> — the orchestration engine under <code>/api/v1/</code> for deployments, DNS, reverse proxy, certificates, monitoring, and operational tooling.</li>
-          <li><strong>Installer</strong>: a guided installation path for users who want faster setup.</li>
+          <li><strong>Template Library</strong> — 76+ one-click Docker application templates covering the most popular self-hosted apps.</li>
-          <li><strong>DashCA</strong>: the internal certificate authority distribution surface for trusted internal HTTPS.</li>
+          <li><strong>Service Discovery</strong> — auto-detection of existing containers on the host with one-click adoption into a managed service.</li>
-          <li><strong>Licensing</strong>: Premium feature gating tied to external validation/deactivation flows.</li>
+          <li><strong>Caddyfile-as-Code</strong> — a visual reverse-proxy builder that generates and applies Caddy configuration without manual edits.</li>
+          <li><strong>DashCA</strong> — the internal certificate authority distribution surface for trusted internal HTTPS across devices.</li>
+          <li><strong>Security Center</strong> — a multi-source event pipeline aggregating logs and signals for threat detection and audit.</li>
+          <li><strong>AI Intent Router</strong> — turn natural-language commands into real infrastructure actions.</li>
+          <li><strong>MCP Server</strong> — expose DashCaddy operations to AI assistants and external automation.</li>
+          <li><strong>Licensing</strong> — Premium feature gating tied to external validation and deactivation flows.</li>
         </ul>
 
         <h2>Who DashCaddy is for</h2>
-        <p>
+        <ul>
-          DashCaddy is built for self-hosters, home lab operators, small teams, and administrators who want one place to deploy apps,
+          <li><strong>Home lab operators</strong> who want one place to deploy apps, publish them cleanly, and trust internal HTTPS.</li>
-          publish them cleanly, trust internal HTTPS, and keep service infrastructure under control.
+          <li><strong>Self-hosters</strong> tired of hand-wiring Docker, Caddy, DNS, and certificates for every new service.</li>
-        </p>
+          <li><strong>Small teams and businesses</strong> that need multi-user access, RBAC, SSO, and audit trails.</li>
+          <li><strong>Platform administrators</strong> managing fleets of services across one host or many, with monitoring and backup at the core.</li>
+        </ul>
+
+        <h2>What makes it production-grade</h2>
+        <ul>
+          <li><strong>76+ vetted templates</strong> for one-click deployment of popular self-hosted software.</li>
+          <li><strong>Real-time monitoring</strong> with WebSocket live dashboard updates and Prometheus metrics export.</li>
+          <li><strong>Multi-user security</strong> — TOTP 2FA, email magic-link login, admin invites, RBAC, encrypted credential vault, and audit logging.</li>
+          <li><strong>Security Center</strong> — a multi-source event pipeline for centralized security visibility.</li>
+          <li><strong>Backup &amp; disaster recovery</strong> — one-click backup/restore with SHA-256 checksums for full-system recovery.</li>
+          <li><strong>Internationalization</strong> — 5 supported languages out of the box.</li>
+          <li><strong>Developer platform</strong> — a JavaScript SDK with 39 methods and full TypeScript types, structured error codes (80 codes), and a plugin/extension system.</li>
+          <li><strong>AI-native</strong> — natural-language operations via the Intent Router and AI assistant integration via MCP.</li>
+        </ul>
 
         <h2>Ownership and licensing</h2>
         <p>
-          DashCaddy is proprietary software and intellectual property of <strong>samiahmed7777</strong>. Public-facing documentation and branding
+          DashCaddy is proprietary software and intellectual property of <strong>samiahmed7777</strong>. Public-facing
-          should reflect that commercial/proprietary positioning rather than an open-source default.
+          documentation and branding reflect that commercial/proprietary positioning rather than an open-source default.
+          The core platform is fully useful without a license; Premium unlocks a focused set of advanced orchestration features.
         </p>
       </DocsLayout>
       <Footer />

src/app/docs/premium/page.tsx

@@ -8,30 +8,73 @@ export default function DocsPremiumPage() {
       <Navbar />
       <DocsLayout
         title="Premium Features"
-        intro="DashCaddy keeps its Premium model intentionally narrow. The core platform remains useful without a license, while Premium unlocks a small set of advanced orchestration features."
+        intro="DashCaddy keeps its Premium model intentionally narrow. The core platform — deployment, DNS, reverse proxy, HTTPS, monitoring, templates, service discovery, and the API — is fully useful without a license. Premium unlocks a focused set of advanced orchestration features."
       >
+        <h2>Free vs Premium at a glance</h2>
+        <ul>
+          <li><strong>Free</strong>: full dashboard, 76+ templates, service discovery, Caddy + DNS + TLS automation, real-time monitoring, Prometheus metrics, multi-user with 2FA &amp; RBAC, Security Center, AI Intent Router, MCP Server, JS SDK, backup/restore, and single-host operation.</li>
+          <li><strong>Premium</strong>: everything in Free, plus Auto-Login SSO, Recipes, Docker Swarm, and Multi-Host Fleet Management — plus priority support.</li>
+        </ul>
+
         <h2>Premium-gated features</h2>
         <ul>
-          <li><strong>SSO</strong>: Auto-Login SSO</li>
+          <li>
-          <li><strong>Recipes</strong>: multi-container stack deployment</li>
+            <strong>Auto-Login SSO</strong> — single sign-on across services so authenticated users reach their apps
-          <li><strong>Swarm</strong>: Docker Swarm multi-node orchestration</li>
+            without repeated logins. Ideal for teams that want a seamless internal portal experience.
+          </li>
+          <li>
+            <strong>Recipes</strong> — deploy multi-container application stacks (e.g. an app + database + cache) as a
+            single coordinated unit. Recipes bundle several templates together with pre-wired networking so complex
+            stacks come up in one click.
+          </li>
+          <li>
+            <strong>Docker Swarm</strong> — multi-node orchestration. Run services across a Swarm cluster instead of a
+            single host, with DashCaddy managing placement, routing, and TLS across the cluster.
+          </li>
+          <li>
+            <strong>Multi-Host Fleet Management</strong> — manage DashCaddy deployments across multiple hosts from one
+            control plane. Deploy, monitor, and operate services across an entire fleet with unified visibility.
+          </li>
         </ul>
 
-        <h2>Current plan model</h2>
+        <h2>Pricing</h2>
+        <p>One Premium tier, subscription billing, no hidden upsells:</p>
         <ul>
-          <li>1 month — $25</li>
+          <li><strong>1 month</strong> — $25</li>
-          <li>3 months — $50</li>
+          <li><strong>3 months</strong> — $50</li>
-          <li>6 months — $65</li>
+          <li><strong>6 months</strong> — $65</li>
-          <li>12 months — $99</li>
+          <li><strong>12 months</strong> — $99</li>
         </ul>
         <p>
-          Subscriptions only, one Premium tier, one active machine at a time, 7-day grace period, cancel at period end, and no free trial.
+          Longer commitments are rewarded: the 12-month plan works out to roughly $8.25/month versus $25/month for a
+          single month.
         </p>
 
-        <h2>License behavior</h2>
+        <h2>Plan terms</h2>
+        <ul>
+          <li>Subscriptions only — no perpetual licenses.</li>
+          <li>One Premium tier (no tier ladder to navigate).</li>
+          <li>One active machine at a time per license.</li>
+          <li><strong>7-day grace period</strong> after expiry so services keep running while you renew.</li>
+          <li>Cancel at period end — no mid-cycle lock-in.</li>
+          <li>No free trial.</li>
+        </ul>
+
+        <h2>License validation</h2>
         <p>
-          DashCaddy’s app-side licensing is already built around an external validation and deactivation service, rather than unlimited static license reuse.
+          DashCaddy&apos;s licensing is built around an <strong>external validation and deactivation service</strong>,
+          not unlimited static license reuse. On launch and periodically thereafter, the platform validates the license
+          against the licensing server. This keeps licenses tied to a single active machine and supports clean
+          deactivation when you move hosts.
         </p>
+
+        <h2>How to subscribe</h2>
+        <ol>
+          <li>Open the dashboard and go to <strong>Settings → Licensing</strong>.</li>
+          <li>Choose a plan duration and complete checkout.</li>
+          <li>Your license key is validated automatically — Premium features unlock immediately.</li>
+          <li>Manage renewal, cancellation, and machine deactivation from the same panel.</li>
+        </ol>
       </DocsLayout>
       <Footer />
     </div>

src/app/docs/troubleshooting/page.tsx

@@ -8,30 +8,88 @@ export default function DocsTroubleshootingPage() {
       <Navbar />
       <DocsLayout
         title="Troubleshooting"
-        intro="Because DashCaddy sits across runtime, DNS, reverse proxy, certificates, and dashboard state, the fastest way to debug it is layer by layer instead of guessing."
+        intro="Because DashCaddy sits across runtime, DNS, reverse proxy, certificates, and dashboard state, the fastest way to debug it is layer by layer instead of guessing. This guide walks each layer with the common failures and fixes."
       >
-        <h2>Debug order</h2>
+        <h2>Health check endpoints</h2>
+        <p>
+          Start every investigation with the built-in probes — they tell you whether the platform itself is healthy and
+          whether its dependencies are wired up:
+        </p>
+        <ul>
+          <li><code>/healthz</code> — <strong>liveness</strong>. Returns 200 if the DashCaddy process is up.</li>
+          <li><code>/readyz</code> — <strong>readiness</strong>. Returns 200 only when DashCaddy can serve traffic, including connectivity to Docker, Caddy, and DNS where configured.</li>
+        </ul>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`curl -s -o /dev/null -w "%{http_code}" https://dashcaddy-host/healthz
+curl -s -o /dev/null -w "%{http_code}" https://dashcaddy-host/readyz`}</code></pre>
+        <p>
+          If <code>/healthz</code> fails, the DashCaddy process itself is down. If <code>/healthz</code> passes but
+          <code>/readyz</code> fails, a dependency (Docker socket, Caddy Admin API, or Technitium DNS) is unreachable.
+        </p>
+
+        <h2>The debug order</h2>
+        <p>Work bottom-up through the stack so you isolate the failing layer:</p>
         <ol>
-          <li>backend process or container</li>
+          <li><strong>Backend container</strong> — is it running and healthy?</li>
-          <li>service port reachability</li>
+          <li><strong>Backend port</strong> — is the service listening and reachable on the host?</li>
-          <li>reverse proxy route</li>
+          <li><strong>Reverse proxy route</strong> — did Caddy apply the route correctly?</li>
-          <li>DNS</li>
+          <li><strong>DNS</strong> — does the hostname resolve to the right host?</li>
-          <li>certificate trust</li>
+          <li><strong>Certificate trust</strong> — does the client trust the CA?</li>
-          <li>dashboard/API visibility</li>
+          <li><strong>Dashboard / API state</strong> — does DashCaddy reflect reality?</li>
         </ol>
 
-        <h2>Common failures</h2>
+        <h2>DNS issues</h2>
         <ul>
-          <li>service is down even though the dashboard is reachable</li>
+          <li><strong>Symptom</strong>: hostname does not resolve, or resolves to the wrong address.</li>
-          <li>internal HTTPS shows warnings because DashCA trust is missing</li>
+          <li><strong>Check</strong>: is Technitium DNS running and is the DashCaddy API token valid?</li>
-          <li>DNS automation fails due to API token or zone issues</li>
+          <li><strong>Check</strong>: is the record present in the correct zone? DNS automation fails silently when the zone name is wrong.</li>
-          <li>Caddy changes are not applying because Admin API is unavailable</li>
+          <li><strong>Check</strong>: is the client using Technitium as its resolver? Public resolvers will not know about internal zones.</li>
-          <li>Premium features do not unlock because license validation is failing</li>
+          <li><strong>Fix</strong>: re-run the DNS step from the service&apos;s action menu, or recreate the record manually and let DashCaddy reconcile.</li>
+        </ul>
+        <pre className="mt-4 overflow-x-auto rounded-lg border border-surface-700/50 bg-surface-950/80 p-4 text-sm"><code>{`# Verify resolution against the Technitium resolver directly
+dig @technitium-host media.lab
+nslookup media.lab technitium-host`}</code></pre>
+
+        <h2>TLS / certificate problems</h2>
+        <ul>
+          <li><strong>Symptom</strong>: browser shows a certificate warning or <code>NET::ERR_CERT_AUTHORITY_INVALID</code>.</li>
+          <li><strong>Cause</strong>: the client does not trust Caddy&apos;s internal CA / DashCA root certificate.</li>
+          <li><strong>Fix</strong>: download the root certificate from the <strong>DashCA</strong> page and install it as a trusted root CA on the client device. Every modern OS and browser has a slightly different import flow — the DashCA page includes per-platform instructions.</li>
+          <li><strong>Cause</strong>: certificate issuance failed because the Caddy Admin API was unreachable at deploy time.</li>
+          <li><strong>Fix</strong>: confirm the Caddy Admin API is reachable, then redeploy or re-trigger TLS for the service.</li>
+        </ul>
+
+        <h2>Reverse proxy debugging (Caddy)</h2>
+        <ul>
+          <li><strong>Symptom</strong>: service is up and DNS resolves, but the URL returns 502/504 or does not route.</li>
+          <li><strong>Check</strong>: is the Caddy Admin API reachable from the DashCaddy API server?</li>
+          <li><strong>Check</strong>: does the Caddy route point at the correct upstream host:port? Use the Caddyfile-as-Code view to inspect the generated config.</li>
+          <li><strong>Check</strong>: Caddy logs — <code>docker logs caddy</code> or your Caddy service logs — for upstream connection errors.</li>
+          <li><strong>Fix</strong>: re-apply the route from the service&apos;s action menu; DashCaddy will reconcile the Caddy configuration atomically.</li>
+        </ul>
+
+        <h2>Container health</h2>
+        <ul>
+          <li><strong>Symptom</strong>: service shows <em>Unhealthy</em> or <em>Down</em> on the dashboard.</li>
+          <li><strong>Check</strong>: <code>docker ps -a</code> and <code>docker logs &lt;container&gt;</code> for crash loops or misconfiguration.</li>
+          <li><strong>Check</strong>: does the container&apos;s healthcheck (if defined) pass? DashCaddy surfaces container healthchecks in the UI.</li>
+          <li><strong>Check</strong>: are volumes and environment variables correct? Bad secrets are the most common cause of immediate exits.</li>
+        </ul>
+
+        <h2>Common gotchas</h2>
+        <ul>
+          <li><strong>Service is down even though the dashboard is reachable</strong> — the dashboard and the service are different containers; always check the backend container directly.</li>
+          <li><strong>DNS automation fails silently</strong> — usually an expired or wrong-scope Technitium API token, or a mismatched zone name.</li>
+          <li><strong>Caddy changes are not applying</strong> — the Admin API is unavailable or the generated config is invalid; check the Caddyfile-as-Code view for errors.</li>
+          <li><strong>Premium features do not unlock</strong> — license validation is failing; verify the license key and that the host can reach the licensing server, and remember the one-active-machine limit.</li>
+          <li><strong>Internal HTTPS still warns after install</strong> — the root CA must be trusted on <em>each</em> client device, not just the server.</li>
+          <li><strong>WebSocket live updates stall</strong> — a reverse proxy or firewall in front of DashCaddy may be dropping the upgrade; allow WebSocket upgrades on the DashCaddy route.</li>
         </ul>
 
         <h2>Mindset</h2>
         <p>
-          Most DashCaddy problems are really one dependency layer failing while the others are healthy. Debugging that dependency chain is the right way to recover quickly.
+          Most DashCaddy problems are really one dependency layer failing while the others are healthy. Use the health
+          endpoints to localize, then walk the debug order. Fixing the right layer first is always faster than
+          reloading the whole stack.
         </p>
       </DocsLayout>
       <Footer />

src/app/features/page.tsx

@@ -16,79 +16,119 @@ interface FeatureSection {
   title: string;
   description: string;
   icon: string;
+  badge?: string;
   features: FeatureItem[];
 }
 
 export default function FeaturesPage() {
   const features: FeatureSection[] = [
     {
-      id: 'deployment',
+      id: 'ai-self-hosting',
+      title: 'AI-Powered Self-Hosting',
+      description:
+        'Talk to your homelab. DashCaddy\'s AI Intent Router understands natural language commands, and the built-in MCP Server lets AI assistants like Claude and GPT control your infrastructure directly. The first self-hosting platform built for the agentic era.',
+      icon: '🤖',
+      badge: 'New',
+      features: [
+        { icon: '🎯', label: 'AI Intent Router — natural language commands' },
+        { icon: '🔌', label: 'MCP Server for Claude & GPT control' },
+        { icon: '💬', label: '"deploy Plex", "check SSL status", "restart jellyfin"' },
+        { icon: '🧠', label: 'Context-aware infrastructure reasoning' },
+      ],
+    },
+    {
+      id: 'app-deployment',
       title: 'App Deployment',
-      description: 'Deploy your favorite applications instantly from our library of 50+ pre-configured Docker templates. No manual configuration needed—just click, deploy, and go live.',
+      description:
+        'Deploy from a library of 76+ pre-configured Docker templates with one click. Automatic configuration, smart defaults, and service discovery that auto-detects running containers and lets you adopt them instantly. From zero to live in seconds.',
       icon: '🚀',
       features: [
         { icon: '⚡', label: 'One-click deployment' },
-        { icon: '📦', label: '50+ app templates' },
+        { icon: '📦', label: '76+ app templates' },
-        { icon: '⚙️', label: 'Auto-configuration' },
+        { icon: '⚙️', label: 'Automatic configuration' },
+        { icon: '🔍', label: 'Service Discovery & auto-adopt' },
+        { icon: '🧙', label: 'Smart Defaults Wizard' },
       ],
     },
     {
       id: 'ssl-security',
       title: 'SSL & Security',
-      description: 'Enterprise-grade security built in. Automatic SSL certificates, TOTP 2FA, encrypted credentials, and comprehensive audit logs to track every action.',
+      description:
+        'Enterprise-grade security, baked in. Automatic SSL via Caddy\'s internal CA, TOTP 2FA with email magic link, multi-user admin with role-based access, encrypted credential vault, comprehensive audit logs, and a Security Center that unifies events from every source.',
       icon: '🔒',
       features: [
         { icon: '🔐', label: 'Automatic SSL certificates' },
-        { icon: '📱', label: 'TOTP 2FA authentication' },
+        { icon: '📱', label: 'TOTP 2FA + email magic link' },
-        { icon: '🔑', label: 'Encrypted credentials' },
+        { icon: '👥', label: 'Multi-user admin (RBAC + invites)' },
-        { icon: '📝', label: 'Audit logs' },
+        { icon: '🔑', label: 'Encrypted credential vault' },
+        { icon: '📝', label: 'Audit logging' },
+        { icon: '🛡️', label: 'Security Center (multi-source events)' },
       ],
     },
     {
-      id: 'dns',
+      id: 'dns-networking',
-      title: 'DNS Management',
+      title: 'DNS & Networking',
-      description: 'Manage all your app subdomains from one dashboard. Automatic DNS record creation with Technitium DNS integration makes domain management effortless.',
+      description:
+        'Full DNS automation powered by Technitium DNS, plus a Caddyfile-as-code visual builder for crafting reverse proxy rules without touching config files. Manage subdomains, routes, and proxies from a single dashboard.',
       icon: '🌐',
       features: [
         { icon: '✨', label: 'Automatic DNS records' },
-        { icon: '🔗', label: 'Technitium integration' },
+        { icon: '🔗', label: 'Technitium DNS integration' },
-        { icon: '📋', label: 'Subdomain management' },
+        { icon: '🏗️', label: 'Caddyfile-as-code visual builder' },
-        { icon: '🎯', label: 'Zero DNS config' },
+        { icon: '🔁', label: 'Reverse proxy management' },
       ],
     },
     {
-      id: 'monitoring',
+      id: 'monitoring-ops',
-      title: 'Monitoring & Health',
+      title: 'Monitoring & Operations',
-      description: 'Real-time visibility into your infrastructure. Monitor container health, response times, and resource usage with detailed metrics and alerts.',
+      description:
+        'Real-time visibility into every container and service. WebSocket live updates keep your dashboard in sync instantly, health checks catch problems early, and Prometheus metrics export feeds your existing observability stack.',
       icon: '📊',
       features: [
-        { icon: '🟢', label: 'Real-time status' },
+        { icon: '🟢', label: 'Real-time health monitoring' },
-        { icon: '⏱️', label: 'Response time tracking' },
+        { icon: '⚡', label: 'WebSocket live updates' },
-        { icon: '💾', label: 'Resource monitoring' },
+        { icon: '📈', label: 'Prometheus metrics export' },
-        { icon: '📈', label: 'Performance metrics' },
+        { icon: '💓', label: 'Container health checks' },
+        { icon: '⏱️', label: 'Response time & resource tracking' },
       ],
     },
     {
-      id: 'docker',
+      id: 'backup-recovery',
-      title: 'Docker Management',
+      title: 'Backup & Recovery',
-      description: 'Control your entire Docker environment visually. View, manage, and scale containers, access logs, and perform updates without touching the command line.',
+      description:
-      icon: '🐳',
+        'One-click backup and disaster recovery built for peace of mind. Full-system backups with checksum verification, point-in-time restore, and a disaster recovery workflow that gets you back online fast when it matters most.',
+      icon: '💾',
       features: [
-        { icon: '🎮', label: 'Container control' },
+        { icon: '🔙', label: 'One-click backup & restore' },
-        { icon: '📜', label: 'Live logs access' },
+        { icon: '🆘', label: 'Disaster Recovery mode' },
-        { icon: '🔄', label: 'Auto-updates' },
+        { icon: '✅', label: 'Full-system backup w/ checksums' },
-        { icon: '📊', label: 'Resource monitoring' },
+        { icon: '⏮️', label: 'Point-in-time restore' },
+      ],
+    },
+    {
+      id: 'developer-platform',
+      title: 'Developer Platform',
+      description:
+        'DashCaddy isn\'t just a UI—it\'s a platform. A typed JavaScript SDK with 39 methods, a full REST API, a plugin/extension system for custom workflows, and internationalization across 5 languages including full RTL support.',
+      icon: '🛠️',
+      features: [
+        { icon: '📘', label: 'JavaScript SDK + TypeScript types (39 methods)' },
+        { icon: '🔌', label: 'Plugin / Extension system' },
+        { icon: '🌐', label: 'REST API' },
+        { icon: '🌍', label: 'i18n: EN/ES/FR/DE/AR (RTL)' },
       ],
     },
     {
       id: 'premium',
       title: 'Premium Features',
-      description: 'Advanced features for power users and production deployments. SSO integration, multi-container recipes, and Docker Swarm orchestration.',
+      description:
+        'Power features for production and multi-host deployments. Auto-Login SSO across your apps, multi-container Recipes, Docker Swarm orchestration, and Fleet Management to register remote instances with parallel health probes and multi-host deploy plans.',
       icon: '⭐',
       features: [
         { icon: '🔑', label: 'Auto-Login SSO', premium: true },
-        { icon: '📚', label: 'Recipes (stack deployment)', premium: true },
+        { icon: '📚', label: 'Recipes (multi-container stacks)', premium: true },
-        { icon: '🚀', label: 'Docker Swarm orchestration', premium: true },
+        { icon: '🐳', label: 'Docker Swarm orchestration', premium: true },
+        { icon: '📡', label: 'Multi-Host Fleet Management', premium: true },
         { icon: '🚀', label: 'Priority support', premium: true },
       ],
     },
@@ -105,11 +145,18 @@ export default function FeaturesPage() {
         </div>
 
         <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
+          <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-sm font-medium text-brand-300">
+            <span className="relative flex h-2 w-2">
+              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
+              <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-400" />
+            </span>
+            AI-native self-hosting platform
+          </div>
           <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
-            Powerful <span className="text-brand-400">Features</span> Built In
+            Every Tool You Need to <span className="text-brand-400">Self-Host</span>
           </h1>
           <p className="text-xl text-surface-300 max-w-2xl mx-auto">
-            Everything you need to manage Docker applications professionally. From deployment to monitoring, SSL to security—it's all included.
+            From AI-powered deployment to enterprise security, real-time monitoring, and multi-host fleet management — DashCaddy brings the entire self-hosting stack under one roof.
           </p>
         </div>
       </section>
@@ -119,12 +166,22 @@ export default function FeaturesPage() {
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="space-y-24">
             {features.map((feature, idx) => (
-              <div key={feature.id} className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${idx % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}>
+              <div
+                key={feature.id}
+                className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center ${idx % 2 === 1 ? 'lg:flex-row-reverse' : ''}`}
+              >
                 {/* Content Side */}
                 <div className={idx % 2 === 1 ? 'lg:order-2' : ''}>
                   <div className="mb-6 inline-flex rounded-lg bg-brand-500/10 p-4 text-brand-400">
                     <div className="text-3xl">{feature.icon}</div>
                   </div>
+
+                  {feature.badge && (
+                    <span className="mb-3 ml-2 inline-block align-middle text-xs px-2 py-1 bg-brand-500/20 text-brand-300 rounded-full font-semibold uppercase tracking-wide">
+                      {feature.badge}
+                    </span>
+                  )}
+
                   <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-surface-50">
                     {feature.title}
                   </h2>
@@ -144,7 +201,9 @@ export default function FeaturesPage() {
                         }`}
                       >
                         <span className="text-xl flex-shrink-0">{item.icon}</span>
-                        <span className={`text-sm font-medium ${item.premium ? 'text-brand-300' : 'text-surface-300'}`}>
+                        <span
+                          className={`text-sm font-medium ${item.premium ? 'text-brand-300' : 'text-surface-300'}`}
+                        >
                           {item.label}
                           {item.premium && (
                             <span className="ml-1 inline-block text-xs px-2 py-0.5 bg-brand-500/20 text-brand-300 rounded font-semibold">
@@ -164,7 +223,10 @@ export default function FeaturesPage() {
                     <div className="relative rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8">
                       <div className="space-y-4">
                         {feature.features.slice(0, 3).map((item, itemIdx) => (
-                          <div key={itemIdx} className="flex items-center gap-3 p-3 bg-surface-900/50 rounded-lg border border-surface-700/30">
+                          <div
+                            key={itemIdx}
+                            className="flex items-center gap-3 p-3 bg-surface-900/50 rounded-lg border border-surface-700/30"
+                          >
                             <div className="w-2 h-2 rounded-full bg-brand-400" />
                             <span className="text-sm text-surface-300">{item.label}</span>
                           </div>
@@ -172,7 +234,10 @@ export default function FeaturesPage() {
                       </div>
                       <div className="mt-6 pt-6 border-t border-surface-700/30">
                         <div className="text-sm text-surface-500 text-center">
-                          <span className="text-brand-400 font-semibold">{feature.features.length} features</span> included
+                          <span className="text-brand-400 font-semibold">
+                            {feature.features.length} features
+                          </span>{' '}
+                          included
                         </div>
                       </div>
                     </div>
@@ -184,112 +249,168 @@ export default function FeaturesPage() {
         </div>
       </section>
 
-      {/* Feature Comparison Grid */}
+      {/* AI Features Highlight */}
       <section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-900 to-surface-950">
+        <div className="absolute inset-0 -z-10">
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[40rem] h-96 bg-brand-500/10 rounded-full blur-3xl opacity-40" />
+        </div>
+
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div className="mb-16 text-center">
-            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
+            <span className="rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
-              What's Included in <span className="text-brand-400">Free</span>
+              The Agentic Era of Self-Hosting
+            </span>
+            <h2 className="mt-6 text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
+              Control Your Homelab With <span className="text-brand-400">Natural Language</span>
             </h2>
-            <p className="text-lg text-surface-400">
+            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
-              Start with the free tier and upgrade anytime when you need advanced features.
+              DashCaddy speaks AI natively. Type what you want, or let your favorite assistant do it.
             </p>
           </div>
 
-          {/* Feature Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {/* AI Intent Router */}
-            <FeatureCard
+            <div className="group relative overflow-hidden rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8 transition-all duration-300 hover:border-brand-500/50 hover:shadow-lg hover:shadow-brand-500/10">
-              icon="🚀"
+              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
-              title="One-Click Deployment"
+              <div className="relative z-10">
-              description="Deploy from 50+ pre-configured templates with zero configuration."
+                <div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
-            />
+                  <div className="text-3xl">🎯</div>
-            <FeatureCard
+                </div>
-              icon="🔒"
+                <h3 className="mb-2 text-xl font-semibold text-surface-50">AI Intent Router</h3>
-              title="Automatic SSL"
+                <p className="text-surface-300 text-sm leading-relaxed mb-6">
-              description="Secure your apps with automatically renewed SSL certificates."
+                  Skip the menus. Just type a command in plain English and DashCaddy figures out the right actions.
-            />
+                </p>
-            <FeatureCard
+                <div className="space-y-2">
-              icon="🌐"
+                  {['"deploy Plex"', '"check SSL status"', '"restart jellyfin"', '"show failing containers"'].map(
-              title="DNS Management"
+                    (cmd, i) => (
-              description="Automatic DNS record creation with Technitium integration."
+                      <div
-            />
+                        key={i}
-            <FeatureCard
+                        className="flex items-center gap-3 rounded-lg bg-surface-900/60 border border-surface-700/30 px-3 py-2"
-              icon="📊"
+                      >
-              title="Real-Time Monitoring"
+                        <span className="text-brand-400 font-mono text-xs select-none">›</span>
-              description="Track container health, response times, and resource usage."
+                        <span className="text-sm text-surface-300 font-mono">{cmd}</span>
-            />
+                      </div>
-            <FeatureCard
+                    )
-              icon="🐳"
+                  )}
-              title="Docker Control"
+                </div>
-              description="Manage containers, access logs, and updates from one dashboard."
+              </div>
-            />
+            </div>
-            <FeatureCard
+
-              icon="🔐"
+            {/* MCP Server */}
-              title="Security Built-In"
+            <div className="group relative overflow-hidden rounded-2xl border border-surface-700/50 bg-surface-800/50 backdrop-blur p-8 transition-all duration-300 hover:border-brand-500/50 hover:shadow-lg hover:shadow-brand-500/10">
-              description="TOTP 2FA, encrypted credentials, and audit logging included."
+              <div className="absolute inset-0 bg-gradient-to-br from-brand-500/0 to-brand-500/0 group-hover:from-brand-500/5 group-hover:to-brand-500/10 transition-all duration-300 pointer-events-none" />
-            />
+              <div className="relative z-10">
+                <div className="mb-4 inline-flex rounded-lg bg-brand-500/10 p-3 text-brand-400 group-hover:bg-brand-500/20 group-hover:text-brand-300 transition-all duration-300">
+                  <div className="text-3xl">🔌</div>
+                </div>
+                <h3 className="mb-2 text-xl font-semibold text-surface-50">MCP Server</h3>
+                <p className="text-surface-300 text-sm leading-relaxed mb-6">
+                  DashCaddy runs as a Model Context Protocol server, so AI assistants can manage your homelab directly.
+                </p>
+                <div className="space-y-2">
+                  {[
+                    'Claude desktop & API',
+                    'GPT / ChatGPT integrations',
+                    'Any MCP-compatible client',
+                    'Scoped, audited, secure access',
+                  ].map((item, i) => (
+                    <div
+                      key={i}
+                      className="flex items-center gap-3 rounded-lg bg-surface-900/60 border border-surface-700/30 px-3 py-2"
+                    >
+                      <div className="w-2 h-2 rounded-full bg-brand-400" />
+                      <span className="text-sm text-surface-300">{item}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </section>
 
-      {/* Premium Section */}
+      {/* Free vs Premium Comparison */}
       <section className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
-        <div className="absolute inset-0 -z-10">
-          <div className="absolute top-1/2 right-0 w-96 h-96 bg-brand-600/10 rounded-full blur-3xl opacity-20" />
-        </div>
-
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div className="rounded-2xl border border-brand-500/30 bg-gradient-to-br from-brand-950/50 to-surface-900 p-12">
+          <div className="mb-16 text-center">
-            <div className="max-w-3xl">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4">
-              <div className="mb-6 inline-block">
+              Free vs <span className="text-brand-400">Premium</span>
-                <span className="rounded-full bg-brand-500/20 px-4 py-2 text-sm font-semibold text-brand-300">
+            </h2>
-                  Premium Features
+            <p className="text-lg text-surface-400">
+              A powerful free tier for everyone. Premium unlocks multi-host, SSO, and more.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            {/* Free Column */}
+            <div className="rounded-2xl border border-surface-700/50 bg-surface-800/40 backdrop-blur p-8">
+              <div className="mb-6">
+                <h3 className="text-2xl font-bold text-surface-50">Free</h3>
+                <p className="text-sm text-surface-400 mt-1">Everything to self-host a single node.</p>
+              </div>
+              <ul className="space-y-3">
+                {[
+                  '76+ one-click app templates',
+                  'Automatic SSL certificates',
+                  'Technitium DNS automation',
+                  'Reverse proxy + Caddyfile builder',
+                  'Real-time monitoring & WebSocket updates',
+                  'TOTP 2FA + multi-user admin',
+                  'Encrypted credential vault',
+                  'Audit logging',
+                  'Security Center',
+                  'One-click backup & restore',
+                  'AI Intent Router + MCP Server',
+                  'JavaScript SDK & REST API',
+                  'Plugin / Extension system',
+                  'i18n (5 languages, RTL)',
+                  'Prometheus metrics export',
+                ].map((item, i) => (
+                  <li key={i} className="flex items-start gap-3">
+                    <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-brand-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                    </svg>
+                    <span className="text-sm text-surface-300">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Premium Column */}
+            <div className="relative rounded-2xl border border-brand-500/40 bg-gradient-to-br from-brand-950/40 to-surface-900 p-8">
+              <div className="absolute -top-3 right-6">
+                <span className="rounded-full bg-brand-500 px-3 py-1 text-xs font-semibold text-white uppercase tracking-wide">
+                  Premium
                 </span>
               </div>
-              <h2 className="text-3xl sm:text-4xl font-bold mb-6 text-surface-50">
+              <div className="mb-6">
-                Level Up With <span className="text-brand-400">Premium</span>
+                <h3 className="text-2xl font-bold text-surface-50">Premium</h3>
-              </h2>
+                <p className="text-sm text-surface-400 mt-1">For production, multi-host, and teams.</p>
-              <p className="text-lg text-surface-300 mb-8">
-                Get advanced features designed for power users and production deployments. Auto-Login SSO, stack recipes, Docker Swarm orchestration, and priority support.
-              </p>
-
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-                <div className="flex items-start gap-4 p-4 rounded-lg bg-surface-800/50 border border-surface-700/30">
-                  <span className="text-2xl flex-shrink-0">🔑</span>
-                  <div>
-                    <h3 className="font-semibold text-surface-50 mb-1">Auto-Login SSO</h3>
-                    <p className="text-sm text-surface-400">Deploy apps with automatic single sign-on integration.</p>
-                  </div>
-                </div>
-
-                <div className="flex items-start gap-4 p-4 rounded-lg bg-surface-800/50 border border-surface-700/30">
-                  <span className="text-2xl flex-shrink-0">📚</span>
-                  <div>
-                    <h3 className="font-semibold text-surface-50 mb-1">Recipes</h3>
-                    <p className="text-sm text-surface-400">Deploy multi-container stacks with one click.</p>
-                  </div>
-                </div>
-
-                <div className="flex items-start gap-4 p-4 rounded-lg bg-surface-800/50 border border-surface-700/30">
-                  <span className="text-2xl flex-shrink-0">🚀</span>
-                  <div>
-                    <h3 className="font-semibold text-surface-50 mb-1">Docker Swarm</h3>
-                    <p className="text-sm text-surface-400">Orchestrate multi-node clusters effortlessly.</p>
-                  </div>
-                </div>
-
-                <div className="flex items-start gap-4 p-4 rounded-lg bg-surface-800/50 border border-surface-700/30">
-                  <span className="text-2xl flex-shrink-0">⚡</span>
-                  <div>
-                    <h3 className="font-semibold text-surface-50 mb-1">Priority Support</h3>
-                    <p className="text-sm text-surface-400">Get faster responses from our support team.</p>
-                  </div>
-                </div>
               </div>
+              <p className="text-sm text-brand-300 mb-4 font-medium">
+                Everything in Free, plus:
+              </p>
+              <ul className="space-y-3">
+                {[
+                  'Auto-Login SSO for deployed apps',
+                  'Recipes — multi-container stack deployment',
+                  'Docker Swarm orchestration',
+                  'Multi-Host Fleet Management (remote instances, parallel health probes, multi-host deploy plans)',
+                  'Disaster Recovery (full-system backup w/ checksums)',
+                  'Priority support',
+                ].map((item, i) => (
+                  <li key={i} className="flex items-start gap-3">
+                    <svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-brand-400" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <span className="text-sm text-surface-200">{item}</span>
+                  </li>
+                ))}
+              </ul>
 
               <Link
                 href="/pricing"
-                className="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-6 py-3 font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30"
+                className="mt-8 inline-flex items-center gap-2 rounded-lg bg-brand-500 px-6 py-3 font-semibold text-white hover:bg-brand-600 transition-all duration-200 hover:shadow-lg hover:shadow-brand-500/30"
               >
                 Explore Premium Plans
                 <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
@@ -301,7 +422,7 @@ export default function FeaturesPage() {
         </div>
       </section>
 
-      {/* FAQ Section */}
+      {/* FAQ CTA Section */}
       <section className="relative py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-surface-950 to-surface-900">
         <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
           <div className="mb-12 text-center">

src/app/page.tsx

@@ -27,13 +27,25 @@ export default function Home() {
             {/* Left Content */}
             <div className="flex flex-col justify-center space-y-8">
               <div className="space-y-4">
+                {/* AI badge */}
+                <div className="inline-flex items-center gap-2 rounded-full border border-brand-500/30 bg-brand-500/10 px-4 py-1.5 text-sm font-medium text-brand-400 backdrop-blur-sm">
+                  <span className="relative flex h-2 w-2">
+                    <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-brand-400 opacity-75" />
+                    <span className="relative inline-flex h-2 w-2 rounded-full bg-brand-400" />
+                  </span>
+                  AI-Powered Self-Hosting
+                </div>
+
                 <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight">
                   <span className="text-brand-400">Self-Hosting</span>
                   <br />
-                  <span>Made Beautiful</span>
+                  <span>Made Intelligent</span>
                 </h1>
                 <p className="text-xl text-surface-300 max-w-lg leading-relaxed">
-                  Deploy Docker apps with one click. Automatic SSL certificates, DNS management, and reverse proxy configuration—everything you need for self-hosted perfection.
+                  Just say &ldquo;deploy Plex&rdquo; — DashCaddy&rsquo;s AI Intent Router handles the rest.
+                  Deploy Docker apps with one click, automatic SSL, DNS, and reverse proxy.
+                  76+ templates, fleet management, and an MCP control plane for AI assistants.
+                  Everything you need for self-hosted perfection.
                 </p>
               </div>
 
@@ -69,6 +81,10 @@ export default function Home() {
                   </div>
                   <p className="text-sm text-surface-400">Trusted by self-hosting enthusiasts</p>
                 </div>
+                <div className="flex items-center gap-3">
+                  <div className="text-2xl">🌍</div>
+                  <p className="text-sm text-surface-400">5 languages incl. Arabic (RTL)</p>
+                </div>
               </div>
             </div>
 
@@ -92,6 +108,18 @@ export default function Home() {
                       <span className="text-xs font-mono text-surface-500">dashcaddy.local</span>
                     </div>
 
+                    {/* AI command bar */}
+                    <div className="bg-brand-500/10 border border-brand-500/30 rounded-lg p-3 animate-fade-in">
+                      <div className="flex items-center gap-2">
+                        <span className="text-sm">🤖</span>
+                        <span className="text-sm font-mono text-brand-300">&ldquo;deploy Plex&rdquo;</span>
+                      </div>
+                      <div className="mt-2 flex items-center gap-2 text-xs text-surface-400">
+                        <span className="bg-green-500/20 text-green-400 px-2 py-0.5 rounded">✓ deployed</span>
+                        <span>SSL + DNS + route configured</span>
+                      </div>
+                    </div>
+
                     {/* Content area with animated elements */}
                     <div className="space-y-3">
                       {/* Container item 1 */}
@@ -160,41 +188,56 @@ export default function Home() {
               Powerful Features
             </h2>
             <p className="text-lg text-surface-400 max-w-2xl mx-auto">
-              Everything you need to manage your self-hosted Docker applications professionally.
+              AI-native self-hosting — from one-click deploys to fleet management and a full MCP control plane.
             </p>
           </div>
 
           {/* Feature Grid */}
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <FeatureCard
+              icon="🤖"
+              title="AI Intent Router"
+              description="Natural language to structured actions. Just type &ldquo;deploy Plex&rdquo; and DashCaddy provisions the container, SSL, DNS, and reverse proxy automatically."
+            />
+            <FeatureCard
+              icon="🧩"
+              title="MCP Server"
+              description="Model Context Protocol integration turns DashCaddy into an AI-native control plane. Let your AI assistant manage your entire self-hosted infrastructure."
+            />
             <FeatureCard
               icon="🚀"
-              title="One-Click App Deployment"
+              title="76+ App Templates"
-              description="Choose from 50+ pre-configured Docker app templates. Deploy your favorite applications instantly without manual configuration."
+              description="Choose from 76+ pre-configured Docker app templates. Deploy your favorite applications instantly without manual configuration."
-            />
-            <FeatureCard
-              icon="🔒"
-              title="Automatic SSL Certificates"
-              description="Caddy internal CA automatically generates and renews SSL certificates. Secure your apps with zero configuration overhead."
-            />
-            <FeatureCard
-              icon="🌐"
-              title="DNS Integration"
-              description="Automatic DNS record creation with Technitium DNS. Manage all your app subdomains effortlessly from one dashboard."
-            />
-            <FeatureCard
-              icon="📊"
-              title="Real-Time Monitoring"
-              description="Monitor container health, response times, and resource usage. Get instant insights into your application performance."
-            />
-            <FeatureCard
-              icon="🐳"
-              title="Docker Management"
-              description="View, manage, and scale your containers. Access logs, manage volumes, and handle Docker operations visually."
             />
             <FeatureCard
               icon="🛡️"
-              title="Security First"
+              title="Security Center"
-              description="TOTP 2FA, audit logs, encrypted credentials, and role-based access control built in."
+              description="Unified event pipeline aggregates Docker, Caddy, DNS, Tailscale, audit log, and health checker events into one real-time security dashboard."
+            />
+            <FeatureCard
+              icon="🖥️"
+              title="Multi-Host Fleet"
+              description="Register remote DashCaddy instances, run parallel health probes across your fleet, and execute multi-host deployment plans from one console."
+            />
+            <FeatureCard
+              icon="🔍"
+              title="Service Discovery"
+              description="Auto-detect running containers and adopt them with one click — Caddy route and DNS record created automatically, zero manual config."
+            />
+            <FeatureCard
+              icon="🔒"
+              title="Security & Auth"
+              description="TOTP 2FA, email magic links, multi-user with admin invites, audit logging, and encrypted credential management built in."
+            />
+            <FeatureCard
+              icon="♻️"
+              title="Disaster Recovery"
+              description="Full-system backups with SHA-256 checksum verification and one-click restore. Your infrastructure is always recoverable."
+            />
+            <FeatureCard
+              icon="🔌"
+              title="Plugin System"
+              description="Extend DashCaddy with custom service types, notification providers, workflow actions, and dashboard widgets. A fully extensible platform."
             />
           </div>
         </div>
@@ -230,10 +273,10 @@ export default function Home() {
                 {/* Content */}
                 <div className="text-center pt-4">
                   <h3 className="text-xl font-semibold text-surface-50 mb-2">
-                    Install
+                    Install &amp; Setup Wizard
                   </h3>
                   <p className="text-surface-400">
-                    Install DashCaddy on your server using the guided installer or manual setup. Takes just a few minutes.
+                    Install DashCaddy, then answer one question — &ldquo;What do you want to self-host?&rdquo; The Smart Defaults Wizard matches your hardware profile and configures everything automatically.
                   </p>
                 </div>
               </div>
@@ -257,7 +300,7 @@ export default function Home() {
                     Deploy
                   </h3>
                   <p className="text-surface-400">
-                    Click "Deploy" on any app template. SSL certificates and DNS records are automatically configured.
+                    Click &ldquo;Deploy&rdquo; on any template, or just ask the AI Intent Router in plain English. SSL certificates and DNS records are automatically configured.
                   </p>
                 </div>
               </div>
@@ -277,7 +320,7 @@ export default function Home() {
                     Done
                   </h3>
                   <p className="text-surface-400">
-                    Your app is live with SSL and DNS configured. Monitor health, manage containers, and backup from the dashboard.
+                    Your app is live with SSL and DNS configured. Monitor health in real time, manage containers, and run one-click backups from the dashboard.
                   </p>
                 </div>
               </div>
@@ -298,7 +341,7 @@ export default function Home() {
               Why DashCaddy?
             </h2>
             <p className="text-lg text-surface-400 max-w-2xl mx-auto">
-              Compare the pain of manual setup versus the simplicity of DashCaddy.
+              Compare the pain of manual setup versus the power of an AI-native self-hosting platform.
             </p>
           </div>
 
@@ -323,7 +366,7 @@ export default function Home() {
                   <tr className="hover:bg-surface-800/30 transition-colors">
                     <td className="px-6 py-4 text-sm text-surface-300">SSL Certificates</td>
                     <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-surface-500">Manual configuration via Let's Encrypt</span>
+                      <span className="text-surface-500">Manual configuration via Let&rsquo;s Encrypt</span>
                     </td>
                     <td className="px-6 py-4 text-center text-sm">
                       <span className="text-green-400 font-semibold">✓ Automatic</span>
@@ -335,7 +378,7 @@ export default function Home() {
                       <span className="text-surface-500">Manual DNS records</span>
                     </td>
                     <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ Automatic</span>
+                      <span className="text-green-400 font-semibold">✓ Automatic (Technitium)</span>
                     </td>
                   </tr>
                   <tr className="hover:bg-surface-800/30 transition-colors">
@@ -344,7 +387,7 @@ export default function Home() {
                       <span className="text-surface-500">Complex Nginx/Caddy config</span>
                     </td>
                     <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ One-click</span>
+                      <span className="text-green-400 font-semibold">✓ Caddyfile-as-Code builder</span>
                     </td>
                   </tr>
                   <tr className="hover:bg-surface-800/30 transition-colors">
@@ -353,7 +396,61 @@ export default function Home() {
                       <span className="text-surface-500">Write your own compose files</span>
                     </td>
                     <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ 50+ pre-configured</span>
+                      <span className="text-green-400 font-semibold">✓ 76+ pre-configured</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">AI Commands</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Not available</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ AI Intent Router + MCP</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Fleet Management</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">SSH into each host manually</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Multi-host, parallel probes</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Security Center</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Scattered logs &amp; tools</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Unified event pipeline</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Disaster Recovery</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Manual scripts, no verification</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ SHA-256 verified backups</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Real-Time Updates</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Manual refresh, CLI only</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ WebSocket live dashboard</span>
+                    </td>
+                  </tr>
+                  <tr className="hover:bg-surface-800/30 transition-colors">
+                    <td className="px-6 py-4 text-sm text-surface-300">Plugin System</td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-surface-500">Not extensible</span>
+                    </td>
+                    <td className="px-6 py-4 text-center text-sm">
+                      <span className="text-green-400 font-semibold">✓ Custom widgets, providers</span>
                     </td>
                   </tr>
                   <tr className="hover:bg-surface-800/30 transition-colors">
@@ -362,11 +459,11 @@ export default function Home() {
                       <span className="text-surface-500">Third-party tools required</span>
                     </td>
                     <td className="px-6 py-4 text-center text-sm">
-                      <span className="text-green-400 font-semibold">✓ Built-in</span>
+                      <span className="text-green-400 font-semibold">✓ Built-in + Prometheus export</span>
                     </td>
                   </tr>
                   <tr className="hover:bg-surface-800/30 transition-colors">
-                    <td className="px-6 py-4 text-sm text-surface-300">Backup & Restore</td>
+                    <td className="px-6 py-4 text-sm text-surface-300">Backup &amp; Restore</td>
                     <td className="px-6 py-4 text-center text-sm">
                       <span className="text-surface-500">Manual scripts and planning</span>
                     </td>
@@ -398,7 +495,7 @@ export default function Home() {
                     Save Countless Hours
                   </h3>
                   <p className="text-surface-400 text-sm">
-                    What takes days of manual configuration takes minutes with DashCaddy's automated setup and configuration.
+                    What takes days of manual configuration takes minutes with DashCaddy&rsquo;s Smart Defaults Wizard and automated setup.
                   </p>
                 </div>
               </div>
@@ -412,7 +509,7 @@ export default function Home() {
                     Enterprise Security
                   </h3>
                   <p className="text-surface-400 text-sm">
-                    TOTP 2FA, encrypted credentials, audit logging, and role-based access control built in.
+                    TOTP 2FA, magic links, encrypted credentials, audit logging, and a unified Security Center — built in.
                   </p>
                 </div>
               </div>
@@ -426,7 +523,7 @@ export default function Home() {
                     Scale Confidently
                   </h3>
                   <p className="text-surface-400 text-sm">
-                    Real-time monitoring and health checks give you visibility into your infrastructure 24/7.
+                    Real-time WebSocket monitoring, Prometheus metrics export, and multi-host fleet management give you visibility across your infrastructure 24/7.
                   </p>
                 </div>
               </div>
@@ -440,7 +537,7 @@ export default function Home() {
                     Never Lose Data
                   </h3>
                   <p className="text-surface-400 text-sm">
-                    One-click backup and restore functionality ensures your data is always protected and recoverable.
+                    Disaster recovery with full-system backups, SHA-256 checksum verification, and one-click restore keeps your data protected.
                   </p>
                 </div>
               </div>
@@ -449,6 +546,55 @@ export default function Home() {
         </div>
       </section>
 
+      {/* Developer & Integrations Section */}
+      <section id="integrations" className="relative py-16 sm:py-20 lg:py-24 bg-surface-950">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          {/* Section Header */}
+          <div className="mb-16 text-center">
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 text-surface-50">
+              Built for Developers
+            </h2>
+            <p className="text-lg text-surface-400 max-w-2xl mx-auto">
+              Everything you need to automate, integrate, and extend DashCaddy.
+            </p>
+          </div>
+
+          {/* Integration Grid */}
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">📦</div>
+              <h3 className="text-sm font-semibold text-surface-50">JavaScript SDK</h3>
+              <p className="text-xs text-surface-400 mt-1">39 methods, zero-dep</p>
+            </div>
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">📊</div>
+              <h3 className="text-sm font-semibold text-surface-50">Prometheus</h3>
+              <p className="text-xs text-surface-400 mt-1">Metrics export</p>
+            </div>
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">🗂️</div>
+              <h3 className="text-sm font-semibold text-surface-50">Caddyfile-as-Code</h3>
+              <p className="text-xs text-surface-400 mt-1">Visual proxy builder</p>
+            </div>
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">🌍</div>
+              <h3 className="text-sm font-semibold text-surface-50">i18n</h3>
+              <p className="text-xs text-surface-400 mt-1">5 languages, RTL</p>
+            </div>
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">🔌</div>
+              <h3 className="text-sm font-semibold text-surface-50">Plugin API</h3>
+              <p className="text-xs text-surface-400 mt-1">Extend everything</p>
+            </div>
+            <div className="rounded-lg border border-surface-700/50 bg-surface-800/50 p-5 text-center hover:border-brand-500/50 transition-colors">
+              <div className="text-3xl mb-2">🔐</div>
+              <h3 className="text-sm font-semibold text-surface-50">TypeScript</h3>
+              <p className="text-xs text-surface-400 mt-1">Full type definitions</p>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* Final CTA Section */}
       <section id="get-started" className="relative py-20 sm:py-24 lg:py-32 bg-gradient-to-b from-surface-900 to-surface-950 overflow-hidden">
         {/* Background effects */}
@@ -463,7 +609,7 @@ export default function Home() {
             <span className="text-brand-400">Self-Hosting Setup?</span>
           </h2>
           <p className="text-xl text-surface-300 mb-12 max-w-2xl mx-auto leading-relaxed">
-            Join developers and self-hosting enthusiasts who've simplified their infrastructure management with DashCaddy.
+            Join developers and self-hosting enthusiasts who&rsquo;ve simplified their infrastructure management with DashCaddy&rsquo;s AI-native platform.
           </p>
 
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
@@ -492,13 +638,13 @@ export default function Home() {
             </div>
             <div className="border-l border-surface-700/50" />
             <div>
-              <div className="text-2xl font-bold text-brand-400">Proprietary</div>
+              <div className="text-2xl font-bold text-brand-400">AI-Native</div>
-              <p className="text-sm text-surface-400">Built With Care</p>
+              <p className="text-sm text-surface-400">Intent Router + MCP</p>
             </div>
             <div className="border-l border-surface-700/50" />
             <div>
               <div className="text-2xl font-bold text-brand-400">24/7</div>
-              <p className="text-sm text-surface-400">Community Support</p>
+              <p className="text-sm text-surface-400">Real-Time Monitoring</p>
             </div>
           </div>
         </div>

src/app/pricing/page.tsx

@@ -5,28 +5,50 @@ import Link from 'next/link';
 import Navbar from '@/components/Navbar';
 import Footer from '@/components/Footer';
 
+// ─── Stripe Payment Links ───────────────────────────────────────────
+// These are pre-generated checkout URLs from the Stripe Dashboard.
+// Replace these placeholders with real Payment Link URLs from:
+//   https://dashboard.stripe.com/payment-links
+// Each link should point to the corresponding Stripe Product/Price.
+// ─────────────────────────────────────────────────────────────────────
+const STRIPE_LINKS: Record<string, string> = {
+  monthly:    'https://buy.stripe.com/REPLACE_MONTHLY_LINK',
+  quarterly:  'https://buy.stripe.com/REPLACE_QUARTERLY_LINK',
+  semiannual: 'https://buy.stripe.com/REPLACE_SEMIANNUAL_LINK',
+  annual:     'https://buy.stripe.com/REPLACE_ANNUAL_LINK',
+};
+
 export default function PricingPage() {
   const [selectedPlan, setSelectedPlan] = useState<'monthly' | 'quarterly' | 'semiannual' | 'annual'>('annual');
 
   const planOptions = [
-    { key: 'monthly', label: '1 Month', price: 25, period: '/mo', perMonth: undefined },
+    { key: 'monthly',    label: '1 Month',   price: 25, period: '/mo',   perMonth: undefined },
-    { key: 'quarterly', label: '3 Months', price: 50, period: '/3mo', perMonth: '$16.67/mo' },
+    { key: 'quarterly',  label: '3 Months',  price: 50, period: '/3mo',  perMonth: '$16.67/mo' },
-    { key: 'semiannual', label: '6 Months', price: 65, period: '/6mo', perMonth: '$10.83/mo' },
+    { key: 'semiannual', label: '6 Months',  price: 65, period: '/6mo',  perMonth: '$10.83/mo' },
-    { key: 'annual', label: '12 Months', price: 99, period: '/yr', perMonth: '$8.25/mo' },
+    { key: 'annual',     label: '12 Months', price: 99, period: '/yr',   perMonth: '$8.25/mo' },
   ] as const;
 
   const selected = planOptions.find(p => p.key === selectedPlan)!;
 
   const coreFeatures = [
-    'Dashboard & service monitoring',
+    'Dashboard & real-time service monitoring',
-    '50+ pre-configured app templates',
+    '76+ pre-configured app templates',
     'Automatic SSL via Caddy internal CA',
     'DNS automation via Technitium DNS',
-    'Reverse proxy management',
+    'Reverse proxy management + Caddyfile-as-Code',
-    'DashCA internal HTTPS trust distribution',
+    'AI Intent Router — natural language commands',
-    'Container lifecycle management',
+    'MCP Server — AI assistant integration',
-    'TOTP 2FA authentication',
+    'Security Center — unified event pipeline',
-    'Audit logging',
+    'Service Discovery — auto-detect containers',
+    'Smart Defaults Wizard — guided setup',
+    'WebSocket real-time dashboard updates',
+    'TOTP 2FA + multi-user admin & invites',
+    'Audit logging & encrypted credential vault',
+    'One-click backup & disaster recovery',
+    'Plugin/extension system',
+    'JavaScript SDK + TypeScript types (39 methods)',
+    'Prometheus metrics export',
+    'i18n — 5 languages (EN/ES/FR/DE/AR)',
   ];
 
   const premiumFeatures = [
@@ -34,6 +56,8 @@ export default function PricingPage() {
     'Auto-Login SSO for deployed apps',
     'Recipes — multi-container stack deployment',
     'Swarm — Docker Swarm multi-node orchestration',
+    'Multi-Host Fleet Management — remote instance control',
+    'Priority support',
     'One active machine per license',
     '7-day grace period on expiry',
     'Cancel at period end, no lock-in',
@@ -42,11 +66,11 @@ export default function PricingPage() {
   const faqs = [
     {
       question: 'What happens when my subscription ends?',
-      answer: 'Premium features gracefully deactivate after a 7-day grace period. Your services keep running — only the premium-gated features (SSO, Recipes, Swarm) become unavailable. Resubscribe at any time to re-enable them.',
+      answer: 'Premium features gracefully deactivate after a 7-day grace period. Your services keep running — only the premium-gated features (SSO, Recipes, Swarm, Fleet Management) become unavailable. Resubscribe at any time to re-enable them.',
     },
     {
       question: 'Can I use DashCaddy without Premium?',
-      answer: 'Yes. The core platform is fully functional without a license. Premium unlocks SSO, Recipes, and Swarm — advanced orchestration features that most individual self-hosters may not need initially.',
+      answer: 'Absolutely. The core platform is fully functional without a license — including AI commands, the Security Center, service discovery, monitoring, backup, and all 76+ app templates. Premium unlocks SSO, Recipes, Swarm orchestration, and Fleet Management for advanced multi-node setups.',
     },
     {
       question: 'How many machines can I activate?',
@@ -54,7 +78,7 @@ export default function PricingPage() {
     },
     {
       question: 'Is there a free trial?',
-      answer: 'Not currently. The core platform is available without a license, so you can evaluate DashCaddy before purchasing Premium.',
+      answer: 'Not currently. The core platform is available without a license, so you can fully evaluate DashCaddy before purchasing Premium.',
     },
     {
       question: 'Is my data safe?',
@@ -64,6 +88,10 @@ export default function PricingPage() {
       question: 'How does license validation work?',
       answer: 'DashCaddy validates licenses through an external license server. The app checks your subscription status and activates or deactivates premium features accordingly.',
     },
+    {
+      question: 'What payment methods do you accept?',
+      answer: 'We use Stripe for secure payment processing. All major credit cards are accepted. Payments are processed through Stripe\'s encrypted checkout — we never see or store your card details.',
+    },
   ];
 
   const [expandedFaq, setExpandedFaq] = useState<number | null>(0);
@@ -82,7 +110,7 @@ export default function PricingPage() {
             Simple, Transparent <span className="text-brand-400">Pricing</span>
           </h1>
           <p className="text-xl text-surface-300 mb-8 max-w-2xl mx-auto">
-            The core platform works without a license. Premium unlocks advanced orchestration when you need it.
+            The core platform is completely free — including AI commands, Security Center, and all 76+ app templates. Premium unlocks advanced orchestration when you need it.
           </p>
         </div>
       </section>
@@ -97,11 +125,11 @@ export default function PricingPage() {
               <div className="p-8 sm:p-10">
                 <div className="mb-8">
                   <h3 className="text-2xl font-bold text-surface-50 mb-2">Core</h3>
-                  <p className="text-surface-400 text-sm mb-6">Everything you need to deploy and manage self-hosted services.</p>
+                  <p className="text-surface-400 text-sm mb-6">Everything you need to deploy, manage, and secure self-hosted services — with AI built in.</p>
                   <div className="flex items-baseline gap-2">
                     <span className="text-5xl font-bold text-surface-50">Free</span>
                   </div>
-                  <p className="text-surface-500 text-sm mt-2">No license required</p>
+                  <p className="text-surface-500 text-sm mt-2">No license required, no credit card</p>
                 </div>
 
                 <Link
@@ -112,8 +140,8 @@ export default function PricingPage() {
                 </Link>
 
                 <div className="border-t border-surface-700/50 pt-8 mt-8">
-                  <p className="text-xs font-semibold uppercase tracking-wide text-surface-500 mb-4">Includes</p>
+                  <p className="text-xs font-semibold uppercase tracking-wide text-surface-500 mb-4">Everything included — no limits</p>
-                  <ul className="space-y-4">
+                  <ul className="space-y-3">
                     {coreFeatures.map((feature, i) => (
                       <li key={i} className="flex items-start gap-3">
                         <svg className="h-5 w-5 flex-shrink-0 text-green-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
@@ -138,7 +166,7 @@ export default function PricingPage() {
               <div className="p-8 sm:p-10">
                 <div className="mb-8">
                   <h3 className="text-2xl font-bold text-surface-50 mb-2">Premium</h3>
-                  <p className="text-surface-400 text-sm mb-6">Advanced orchestration for power users and production setups.</p>
+                  <p className="text-surface-400 text-sm mb-6">Advanced orchestration, SSO, and fleet management for power users and production.</p>
 
                   {/* Plan selector */}
                   <div className="mb-4">
@@ -168,16 +196,22 @@ export default function PricingPage() {
                   )}
                 </div>
 
-                <Link
+                {/* Subscribe button — Stripe Payment Link */}
-                  href={`/api/checkout?plan=premium&duration=${selectedPlan}`}
+                <a
+                  href={STRIPE_LINKS[selectedPlan]}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   className="block w-full rounded-lg bg-brand-500 px-6 py-3 text-center font-semibold text-white hover:bg-brand-600 hover:shadow-lg hover:shadow-brand-500/30 transition-all"
                 >
                   Subscribe to Premium
-                </Link>
+                </a>
+                <p className="text-center text-xs text-surface-500 mt-2">
+                  🔒 Secure checkout via Stripe
+                </p>
 
                 <div className="border-t border-surface-700/50 pt-8 mt-8">
                   <p className="text-xs font-semibold uppercase tracking-wide text-surface-500 mb-4">Everything in Core, plus</p>
-                  <ul className="space-y-4">
+                  <ul className="space-y-3">
                     {premiumFeatures.map((feature, i) => (
                       <li key={i} className="flex items-start gap-3">
                         {feature.startsWith('Everything') ? (
@@ -243,7 +277,7 @@ export default function PricingPage() {
         <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8 text-center">
           <h2 className="text-3xl sm:text-4xl font-bold mb-6">Ready to Get Started?</h2>
           <p className="text-xl text-surface-300 mb-8 max-w-2xl mx-auto">
-            Install DashCaddy and start deploying services in minutes.
+            Install DashCaddy and start deploying services in minutes. The core platform is free forever.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <Link

src/app/success/page.tsx

@@ -38,7 +38,7 @@ function SuccessContent() {
 
           <p className="text-lg text-surface-300 mb-8">
             Your subscription is active. Check your email for your license key
-            and setup instructions. Your 14-day free trial has started.
+            and setup instructions.
           </p>
 
           <div className="glass-card rounded-xl p-6 mb-8 text-left">
@@ -73,7 +73,7 @@ function SuccessContent() {
                   4
                 </span>
                 <span>
-                  Enjoy SSO, Recipes, Docker Swarm, and all premium features!
+                  Enjoy SSO, Recipes, Docker Swarm, Fleet Management, and all premium features!
                 </span>
               </li>
             </ol>

src/components/AppShowcase.tsx

@@ -100,7 +100,7 @@ export default function AppShowcase() {
         {/* Header */}
         <div className="mb-12 text-center">
           <h2 className="text-3xl sm:text-4xl font-bold text-surface-50 mb-4">
-            50+ One-Click App Templates
+            76+ One-Click App Templates
           </h2>
           <p className="text-lg text-surface-400 max-w-2xl mx-auto">
             Deploy your favorite apps instantly with pre-configured templates, automatic SSL certificates, and integrated DNS management.
@@ -158,7 +158,7 @@ export default function AppShowcase() {
         <div className="mt-16 grid grid-cols-3 gap-4 sm:gap-8">
           <div className="text-center">
             <div className="text-3xl sm:text-4xl font-bold text-brand-400 mb-2">
-              50+
+              76+
             </div>
             <p className="text-sm text-surface-400">App Templates</p>
           </div>

src/components/Footer.tsx

@@ -52,6 +52,7 @@ export default function Footer() {
           {/* Brand Section */}
           <div>
             <Link href="/" className="flex items-center gap-2 font-bold text-lg text-brand-400 hover:text-brand-300 transition-colors mb-4">
+              <Image src="/images/logo-dark.jpg" alt="DashCaddy" width={28} height={28} className="rounded" />
               <span>DashCaddy</span>
             </Link>
             <p className="text-surface-400 text-sm leading-relaxed mb-4">

src/components/Navbar.tsx

@@ -1,16 +1,17 @@
 'use client';
 
 import Link from 'next/link';
+import Image from 'next/image';
 import { useState } from 'react';
 
 export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false);
 
   const navLinks = [
-    { href: '#features', label: 'Features' },
+    { href: '/features', label: 'Features' },
-    { href: '#pricing', label: 'Pricing' },
+    { href: '/pricing', label: 'Pricing' },
     { href: '/docs', label: 'Docs' },
-    { href: '#about', label: 'About' },
+    { href: '/about', label: 'About' },
   ];
 
   return (
@@ -19,7 +20,7 @@ export default function Navbar() {
         <div className="flex h-16 items-center justify-between">
           {/* Logo */}
           <Link href="/" className="flex items-center gap-2 font-bold text-xl text-brand-400 hover:text-brand-300 transition-colors">
-            <span>🚀</span>
+            <Image src="/images/logo-dark.jpg" alt="DashCaddy" width={32} height={32} className="rounded-lg" priority />
             <span>DashCaddy</span>
           </Link>