From bcd5313a1e648abe21817c659cb1c8d9853fc042 Mon Sep 17 00:00:00 2001
From: Jatin K Malik <jatinkrmalik@gmail.com>
Date: Thu, 11 Jun 2026 14:13:55 -0700
Subject: [PATCH] docs(web): refresh beta feature documentation (#470)

* docs(web): add beta feature documentation pages

* fix(web): polish responsive documentation layout

* fix(web): restore feature card column layout

* fix(web): refine homepage beta content

* fix(web): soften hero wave gradient

* fix(web): tune hero gradient animation

* Add
---
 web/public/sitemap.xml                        |   36 +-
 web/src/app/__tests__/seo-assets.test.ts      |    8 +-
 web/src/app/advanced-settings/page.tsx        |  244 +++
 web/src/app/changelog/page.tsx                |   72 +-
 web/src/app/compare/page.tsx                  |  190 ++-
 web/src/app/desktop-reliability/page.tsx      |  245 +++
 web/src/app/faq/page.tsx                      |   47 +-
 web/src/app/layout.tsx                        |   19 +-
 web/src/app/page.tsx                          | 1469 ++++++++++++-----
 web/src/app/remote-api/page.tsx               |  280 ++++
 web/src/app/troubleshooting/page.tsx          |  167 +-
 web/src/app/voice-activity-detection/page.tsx |  235 +++
 web/src/app/wayland/page.tsx                  |   85 +-
 web/src/components/seo-subpage-shell.tsx      |   87 +-
 14 files changed, 2562 insertions(+), 622 deletions(-)
 create mode 100644 web/src/app/advanced-settings/page.tsx
 create mode 100644 web/src/app/desktop-reliability/page.tsx
 create mode 100644 web/src/app/remote-api/page.tsx
 create mode 100644 web/src/app/voice-activity-detection/page.tsx

diff --git a/web/public/sitemap.xml b/web/public/sitemap.xml
index f69c849..48e5dde 100644
--- a/web/public/sitemap.xml
+++ b/web/public/sitemap.xml
@@ -2,7 +2,7 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
   <url>
     <loc>https://vocalinux.com/</loc>
-    <lastmod>2026-02-22</lastmod>
+    <lastmod>2026-06-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
   </url>
@@ -32,19 +32,19 @@
   </url>
   <url>
     <loc>https://vocalinux.com/compare/</loc>
-    <lastmod>2026-02-22</lastmod>
+    <lastmod>2026-06-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
   <url>
     <loc>https://vocalinux.com/changelog/</loc>
-    <lastmod>2026-02-22</lastmod>
+    <lastmod>2026-06-11</lastmod>
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
   <url>
     <loc>https://vocalinux.com/faq/</loc>
-    <lastmod>2026-02-22</lastmod>
+    <lastmod>2026-06-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
@@ -62,7 +62,7 @@
   </url>
   <url>
     <loc>https://vocalinux.com/troubleshooting/</loc>
-    <lastmod>2026-02-22</lastmod>
+    <lastmod>2026-06-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.7</priority>
   </url>
@@ -87,7 +87,31 @@
   </url>
   <url>
     <loc>https://vocalinux.com/wayland/</loc>
-    <lastmod>2026-02-22</lastmod>
+    <lastmod>2026-06-11</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://vocalinux.com/remote-api/</loc>
+    <lastmod>2026-06-11</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://vocalinux.com/voice-activity-detection/</loc>
+    <lastmod>2026-06-11</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://vocalinux.com/advanced-settings/</loc>
+    <lastmod>2026-06-11</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://vocalinux.com/desktop-reliability/</loc>
+    <lastmod>2026-06-11</lastmod>
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
diff --git a/web/src/app/__tests__/seo-assets.test.ts b/web/src/app/__tests__/seo-assets.test.ts
index 54a855b..b3160c5 100644
--- a/web/src/app/__tests__/seo-assets.test.ts
+++ b/web/src/app/__tests__/seo-assets.test.ts
@@ -14,7 +14,9 @@ describe("SEO Assets", () => {
   });
 
   it("contains sitemap reference in robots.txt", () => {
-    expect(robotsContent).toContain("Sitemap: https://vocalinux.com/sitemap.xml");
+    expect(robotsContent).toContain(
+      "Sitemap: https://vocalinux.com/sitemap.xml",
+    );
   });
 
   it("blocks crawler access to technical paths", () => {
@@ -31,6 +33,10 @@ describe("SEO Assets", () => {
       "https://vocalinux.com/install/fedora/",
       "https://vocalinux.com/install/arch/",
       "https://vocalinux.com/compare/",
+      "https://vocalinux.com/remote-api/",
+      "https://vocalinux.com/voice-activity-detection/",
+      "https://vocalinux.com/advanced-settings/",
+      "https://vocalinux.com/desktop-reliability/",
     ];
 
     expectedUrls.forEach((url) => {
diff --git a/web/src/app/advanced-settings/page.tsx b/web/src/app/advanced-settings/page.tsx
new file mode 100644
index 0000000..9e87024
--- /dev/null
+++ b/web/src/app/advanced-settings/page.tsx
@@ -0,0 +1,244 @@
+import Link from "next/link";
+import { type Metadata } from "next";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  ChevronRight,
+  Cpu,
+  RotateCcw,
+  Server,
+  Settings,
+  SlidersHorizontal,
+  Sparkles,
+} from "lucide-react";
+import { SeoSubpageShell } from "@/components/seo-subpage-shell";
+import { absoluteUrl, buildPageMetadata } from "@/lib/seo";
+
+const whisperControls = [
+  {
+    name: "No Timestamps",
+    detail:
+      "Disables timestamp token generation to reduce timestamp-related hallucinations.",
+  },
+  {
+    name: "No Context",
+    detail:
+      "Stops whisper.cpp from conditioning on previous text when past context causes error loops.",
+  },
+  {
+    name: "Temperature",
+    detail:
+      "Controls decoding randomness. The default 0.0 keeps dictation deterministic.",
+  },
+  {
+    name: "Temperature Increment",
+    detail:
+      "Sets fallback steps for retry behavior, or disables fallback entirely with -1.0.",
+  },
+  {
+    name: "Entropy Threshold",
+    detail: "Helps detect repetition loops during decoding.",
+  },
+  {
+    name: "Logprob Threshold",
+    detail: "Triggers fallback when average token confidence is too low.",
+  },
+  {
+    name: "No-Speech Threshold",
+    detail: "Controls how strongly whisper.cpp treats audio as silence.",
+  },
+  {
+    name: "Initial Prompt",
+    detail:
+      "Adds names, jargon, punctuation style, or other context to steer transcription.",
+  },
+];
+
+const useCases = [
+  "Suppress repeated phrases or timestamp artifacts in long dictation sessions.",
+  "Bias transcription toward project names, technical jargon, or personal vocabulary.",
+  "Keep whisper.cpp deterministic for notes, code comments, and messages.",
+  "Move Remote Server settings out of the way until power-user mode is enabled.",
+];
+
+export const metadata: Metadata = buildPageMetadata({
+  title: "Advanced Whisper.cpp Settings for Linux Dictation",
+  description:
+    "Tune Vocalinux advanced whisper.cpp settings for anti-hallucination, decoding thresholds, initial prompts, and Remote API configuration.",
+  path: "/advanced-settings",
+  keywords: [
+    "whisper.cpp advanced settings",
+    "whisper anti hallucination linux dictation",
+    "vocalinux advanced settings",
+    "whisper.cpp no speech threshold",
+  ],
+});
+
+export default function AdvancedSettingsPage() {
+  const articleJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "TechArticle",
+    headline: "Advanced Whisper.cpp Settings for Linux Dictation",
+    description:
+      "Guide to Vocalinux advanced settings for whisper.cpp decoding, anti-hallucination controls, and Remote API configuration.",
+    dateModified: "2026-06-11",
+    author: {
+      "@type": "Person",
+      name: "Jatin K Malik",
+      url: "https://github.com/jatinkrmalik",
+    },
+    publisher: {
+      "@type": "Organization",
+      name: "Vocalinux",
+      logo: {
+        "@type": "ImageObject",
+        url: absoluteUrl("/vocalinux.png"),
+      },
+    },
+    mainEntityOfPage: absoluteUrl("/advanced-settings"),
+  };
+
+  return (
+    <SeoSubpageShell>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }}
+      />
+
+      <section>
+        <p className="border-primary/30 bg-primary/10 mb-4 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium text-primary">
+          <SlidersHorizontal className="h-4 w-4" />
+          v0.11.0 Advanced Tab
+        </p>
+        <h1 className="mb-5 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
+          Advanced Whisper.cpp Settings for Linux Dictation
+        </h1>
+        <p className="mb-8 max-w-4xl text-lg text-muted-foreground">
+          Vocalinux keeps the default setup simple, but power users can unlock
+          advanced whisper.cpp decoding controls for anti-hallucination tuning,
+          initial prompts, and Remote API server configuration.
+        </p>
+      </section>
+
+      <section className="mb-12 grid gap-6 md:grid-cols-3">
+        {[
+          {
+            icon: Sparkles,
+            title: "Anti-hallucination controls",
+            description:
+              "Tune timestamp, context, confidence, and silence thresholds when a specific setup needs stricter decoding.",
+          },
+          {
+            icon: Server,
+            title: "Remote Server options",
+            description:
+              "Configure the Remote API URL, optional bearer token, and endpoint format from the same advanced area.",
+          },
+          {
+            icon: RotateCcw,
+            title: "Resettable power-user mode",
+            description:
+              "Advanced options are opt-in and can be reset when experimentation produces worse dictation.",
+          },
+        ].map((item) => {
+          const Icon = item.icon;
+          return (
+            <article
+              key={item.title}
+              className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
+            >
+              <span className="bg-primary/10 mb-4 inline-flex rounded-xl p-3">
+                <Icon className="h-6 w-6 text-primary" />
+              </span>
+              <h2 className="mb-2 text-xl font-semibold">{item.title}</h2>
+              <p className="text-sm text-muted-foreground">
+                {item.description}
+              </p>
+            </article>
+          );
+        })}
+      </section>
+
+      <section className="mb-12 rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+        <h2 className="mb-5 flex items-center gap-2 text-2xl font-bold">
+          <Cpu className="h-5 w-5 text-primary" />
+          Whisper.cpp Decoding Controls
+        </h2>
+        <div className="grid gap-4 md:grid-cols-2">
+          {whisperControls.map((control) => (
+            <article
+              key={control.name}
+              className="rounded-xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-700 dark:bg-zinc-900/60"
+            >
+              <h3 className="mb-2 text-lg font-semibold">{control.name}</h3>
+              <p className="text-sm text-muted-foreground">{control.detail}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className="mb-12 grid gap-6 lg:grid-cols-[1fr_1.1fr]">
+        <div className="rounded-2xl border border-zinc-200 bg-zinc-50 p-6 dark:border-zinc-700 dark:bg-zinc-900/60">
+          <h2 className="mb-4 flex items-center gap-2 text-2xl font-bold">
+            <Settings className="h-5 w-5 text-blue-500" />
+            When to Use Advanced Settings
+          </h2>
+          <ul className="space-y-3 text-sm text-muted-foreground">
+            {useCases.map((useCase) => (
+              <li key={useCase} className="flex items-start gap-2">
+                <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
+                <span>{useCase}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="rounded-2xl border border-amber-500/30 bg-amber-500/10 p-6">
+          <h2 className="mb-4 flex items-center gap-2 text-2xl font-bold">
+            <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-400" />
+            Keep Defaults Unless You Need Them
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            The default whisper.cpp settings are chosen for reliable everyday
+            dictation. Advanced values can improve niche workflows, but they can
+            also reduce accuracy if pushed too far. Change one value at a time
+            and reset if quality drops.
+          </p>
+        </div>
+      </section>
+
+      <section className="border-primary/20 bg-primary/5 rounded-2xl border p-8">
+        <h2 className="mb-4 text-2xl font-bold">Related Guides</h2>
+        <div className="grid gap-4 md:grid-cols-3">
+          <Link href="/voice-activity-detection/" className="group">
+            <h3 className="font-semibold">Silero VAD</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Learn how speech and silence are filtered before recognition.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              VAD guide <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+          <Link href="/remote-api/" className="group">
+            <h3 className="font-semibold">Remote API</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Configure self-hosted or compatible remote transcription servers.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              Remote guide <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+          <Link href="/whisper-model-guide/" className="group">
+            <h3 className="font-semibold">Whisper model guide</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Choose model sizes before tuning advanced decoding behavior.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              Model guide <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+        </div>
+      </section>
+    </SeoSubpageShell>
+  );
+}
diff --git a/web/src/app/changelog/page.tsx b/web/src/app/changelog/page.tsx
index 1986be4..fd25376 100644
--- a/web/src/app/changelog/page.tsx
+++ b/web/src/app/changelog/page.tsx
@@ -1,6 +1,15 @@
 import Link from "next/link";
 import { type Metadata } from "next";
-import { BookOpen, CheckCircle2, ChevronRight, Clock, Download, Sparkles, Tag, Zap } from "lucide-react";
+import {
+  BookOpen,
+  CheckCircle2,
+  ChevronRight,
+  Clock,
+  Download,
+  Sparkles,
+  Tag,
+  Zap,
+} from "lucide-react";
 import { SeoSubpageShell } from "@/components/seo-subpage-shell";
 import { absoluteUrl, buildPageMetadata } from "@/lib/seo";
 
@@ -223,17 +232,20 @@ const getTypeStyles = (type: string) => {
   switch (type) {
     case "stable":
       return {
-        badge: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
+        badge:
+          "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
         label: "Stable",
       };
     case "beta":
       return {
-        badge: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+        badge:
+          "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
         label: "Beta",
       };
     case "alpha":
       return {
-        badge: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
+        badge:
+          "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
         label: "Alpha",
       };
     default:
@@ -264,7 +276,7 @@ export default function ChangelogPage() {
     headline: "Vocalinux Changelog - Release History",
     description:
       "Complete release history for Vocalinux, the offline voice dictation software for Linux.",
-    dateModified: "2026-06-07",
+    dateModified: "2026-06-11",
     author: {
       "@type": "Person",
       name: "Jatin K Malik",
@@ -289,7 +301,7 @@ export default function ChangelogPage() {
       />
 
       <section>
-        <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
+        <p className="border-primary/30 bg-primary/10 mb-4 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium text-primary">
           <Clock className="h-4 w-4" />
           Release History
         </p>
@@ -297,8 +309,8 @@ export default function ChangelogPage() {
           Vocalinux Changelog
         </h1>
         <p className="mb-8 max-w-4xl text-lg text-muted-foreground">
-          Track every release and see how Vocalinux has evolved. From initial alpha to stable
-          releases, follow the journey of Linux voice dictation.
+          Track every release and see how Vocalinux has evolved. From initial
+          alpha to stable releases, follow the journey of Linux voice dictation.
         </p>
       </section>
 
@@ -321,23 +333,54 @@ export default function ChangelogPage() {
                   {styles.label}
                 </span>
                 {index === 0 && (
-                  <span className="rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
+                  <span className="bg-primary/10 rounded-full px-3 py-1 text-xs font-semibold text-primary">
                     Latest
                   </span>
                 )}
-                <span className="text-sm text-muted-foreground">{release.date}</span>
+                <span className="text-sm text-muted-foreground">
+                  {release.date}
+                </span>
               </div>
 
               <ul className="space-y-2">
                 {release.highlights.map((highlight) => (
-                  <li key={highlight} className="flex items-start gap-2 text-muted-foreground">
+                  <li
+                    key={highlight}
+                    className="flex items-start gap-2 text-muted-foreground"
+                  >
                     <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
                     {highlight}
                   </li>
                 ))}
               </ul>
 
-              <div className="mt-4 pt-4 border-t border-zinc-100 dark:border-zinc-700">
+              {index === 0 && (
+                <div className="mt-5 flex flex-wrap gap-3">
+                  {[
+                    { href: "/remote-api/", label: "Remote API guide" },
+                    {
+                      href: "/voice-activity-detection/",
+                      label: "Silero VAD guide",
+                    },
+                    { href: "/advanced-settings/", label: "Advanced settings" },
+                    {
+                      href: "/desktop-reliability/",
+                      label: "Reliability overview",
+                    },
+                  ].map((link) => (
+                    <Link
+                      key={link.href}
+                      href={link.href}
+                      className="border-primary/30 bg-primary/10 hover:bg-primary/15 inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-semibold text-primary"
+                    >
+                      {link.label}
+                      <ChevronRight className="h-3.5 w-3.5" />
+                    </Link>
+                  ))}
+                </div>
+              )}
+
+              <div className="mt-4 border-t border-zinc-100 pt-4 dark:border-zinc-700">
                 <a
                   href={`https://github.com/jatinkrmalik/vocalinux/releases/tag/${release.version}`}
                   target="_blank"
@@ -368,7 +411,10 @@ export default function ChangelogPage() {
           <li className="flex items-center gap-2">
             <BookOpen className="h-4 w-4 text-primary" />
             Check the{" "}
-            <Link href="/install/" className="font-semibold text-primary hover:underline">
+            <Link
+              href="/install/"
+              className="font-semibold text-primary hover:underline"
+            >
               install guide
             </Link>{" "}
             for update instructions
diff --git a/web/src/app/compare/page.tsx b/web/src/app/compare/page.tsx
index 5d60cae..e55cc67 100644
--- a/web/src/app/compare/page.tsx
+++ b/web/src/app/compare/page.tsx
@@ -1,6 +1,13 @@
 import Link from "next/link";
 import { type Metadata } from "next";
-import { CheckCircle2, Cpu, Sparkles, Zap } from "lucide-react";
+import {
+  CheckCircle2,
+  ChevronRight,
+  Cpu,
+  Server,
+  Sparkles,
+  Zap,
+} from "lucide-react";
 import { SeoSubpageShell } from "@/components/seo-subpage-shell";
 import { absoluteUrl, buildPageMetadata } from "@/lib/seo";
 
@@ -38,15 +45,27 @@ const engineTable = [
     iconColor: "text-cyan-500",
     iconBg: "bg-cyan-500/10",
   },
+  {
+    engine: "Remote API",
+    speed: "Depends on server + network latency",
+    hardware: "Client CPU + remote Whisper server",
+    accuracy: "Depends on remote model",
+    footprint: "No local model required",
+    bestFor: "Powerful LAN servers or shared transcription backends",
+    icon: Server,
+    iconColor: "text-green-500",
+    iconBg: "bg-green-500/10",
+  },
 ];
 
 export const metadata: Metadata = buildPageMetadata({
-  title: "Whisper.cpp vs Whisper vs VOSK for Linux Voice Dictation",
+  title: "Whisper.cpp vs Whisper vs VOSK vs Remote API for Linux",
   description:
-    "Compare whisper.cpp, Whisper, and VOSK for Linux speech-to-text. See speed, hardware requirements, model size, and which engine is best for your workflow.",
+    "Compare whisper.cpp, Whisper, VOSK, and Remote API for Linux speech-to-text. See speed, hardware requirements, privacy tradeoffs, and best use cases.",
   path: "/compare",
   keywords: [
     "whisper.cpp vs vosk",
+    "remote api speech recognition linux",
     "linux speech recognition comparison",
     "best voice dictation engine linux",
     "whisper vs vosk linux",
@@ -57,10 +76,11 @@ export default function CompareEnginesPage() {
   const articleJsonLd = {
     "@context": "https://schema.org",
     "@type": "Article",
-    headline: "Whisper.cpp vs Whisper vs VOSK for Linux Voice Dictation",
+    headline:
+      "Whisper.cpp vs Whisper vs VOSK vs Remote API for Linux Voice Dictation",
     description:
-      "Technical comparison of speech recognition engines for offline Linux voice typing.",
-    dateModified: "2026-03-30",
+      "Technical comparison of local and remote speech recognition engines for Linux voice typing.",
+    dateModified: "2026-06-11",
     author: {
       "@type": "Person",
       name: "Jatin K Malik",
@@ -85,20 +105,56 @@ export default function CompareEnginesPage() {
       />
 
       <section>
-        <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
+        <p className="border-primary/30 bg-primary/10 mb-4 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium text-primary">
           <Sparkles className="h-4 w-4" />
           Speech Engine Comparison
         </p>
         <h1 className="mb-5 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
-          whisper.cpp vs Whisper vs VOSK on Linux
+          whisper.cpp vs Whisper vs VOSK vs Remote API on Linux
         </h1>
         <p className="mb-8 max-w-4xl text-lg text-muted-foreground">
-          If you are choosing a Linux speech-to-text engine, this page gives a practical side-by-side
-          comparison focused on latency, hardware support, install footprint, and real desktop usage.
+          If you are choosing a Linux speech-to-text engine, this page gives a
+          practical side-by-side comparison focused on latency, hardware
+          support, install footprint, privacy boundary, and real desktop usage.
         </p>
       </section>
 
-      <section className="overflow-x-auto rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-800">
+      <section className="space-y-4 md:hidden">
+        {engineTable.map((row) => {
+          const Icon = row.icon;
+          return (
+            <article
+              key={row.engine}
+              className="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-800"
+            >
+              <div className="mb-4 flex items-center gap-3">
+                <span className={`inline-flex rounded-md p-2 ${row.iconBg}`}>
+                  <Icon className={`h-5 w-5 ${row.iconColor}`} />
+                </span>
+                <h2 className="text-xl font-semibold">{row.engine}</h2>
+              </div>
+              <dl className="grid gap-3 text-sm">
+                {[
+                  ["Speed", row.speed],
+                  ["Hardware", row.hardware],
+                  ["Accuracy", row.accuracy],
+                  ["Footprint", row.footprint],
+                  ["Best for", row.bestFor],
+                ].map(([label, value]) => (
+                  <div key={label} className="grid gap-1">
+                    <dt className="text-xs font-semibold uppercase text-muted-foreground">
+                      {label}
+                    </dt>
+                    <dd className="text-foreground">{value}</dd>
+                  </div>
+                ))}
+              </dl>
+            </article>
+          );
+        })}
+      </section>
+
+      <section className="hidden overflow-x-auto rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-800 md:block">
         <table className="w-full border-collapse text-left">
           <thead>
             <tr className="border-b border-zinc-200 dark:border-zinc-700">
@@ -120,17 +176,29 @@ export default function CompareEnginesPage() {
                 >
                   <td className="px-4 py-4 font-semibold">
                     <span className="inline-flex items-center gap-2">
-                      <span className={`inline-flex rounded-md p-1.5 ${row.iconBg}`}>
+                      <span
+                        className={`inline-flex rounded-md p-1.5 ${row.iconBg}`}
+                      >
                         <Icon className={`h-4 w-4 ${row.iconColor}`} />
                       </span>
                       {row.engine}
                     </span>
                   </td>
-                  <td className="px-4 py-4 text-sm text-muted-foreground">{row.speed}</td>
-                  <td className="px-4 py-4 text-sm text-muted-foreground">{row.hardware}</td>
-                  <td className="px-4 py-4 text-sm text-muted-foreground">{row.accuracy}</td>
-                  <td className="px-4 py-4 text-sm text-muted-foreground">{row.footprint}</td>
-                  <td className="px-4 py-4 text-sm text-muted-foreground">{row.bestFor}</td>
+                  <td className="px-4 py-4 text-sm text-muted-foreground">
+                    {row.speed}
+                  </td>
+                  <td className="px-4 py-4 text-sm text-muted-foreground">
+                    {row.hardware}
+                  </td>
+                  <td className="px-4 py-4 text-sm text-muted-foreground">
+                    {row.accuracy}
+                  </td>
+                  <td className="px-4 py-4 text-sm text-muted-foreground">
+                    {row.footprint}
+                  </td>
+                  <td className="px-4 py-4 text-sm text-muted-foreground">
+                    {row.bestFor}
+                  </td>
                 </tr>
               );
             })}
@@ -139,72 +207,106 @@ export default function CompareEnginesPage() {
       </section>
 
       <section className="mt-8 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 dark:border-zinc-700 dark:bg-zinc-900/60">
-        <h2 className="mb-3 text-2xl font-semibold">Switching Between Engines</h2>
+        <h2 className="mb-3 text-2xl font-semibold">
+          Switching Between Engines
+        </h2>
         <p className="text-sm text-muted-foreground">
-          You can switch between whisper.cpp, Whisper, and VOSK at any time from Settings. v0.10.1+
-          safely stops recognition before switching to prevent segfaults. Each engine has its own
-          model files.
+          You can switch between whisper.cpp, Whisper, VOSK, and Remote API from
+          Settings. v0.10.1+ safely stops recognition before switching to
+          prevent crashes. v0.12.0 adds Remote API configuration under Advanced
+          settings for compatible transcription servers.
         </p>
       </section>
 
-      <section className="mt-12 grid gap-6 md:grid-cols-3">
+      <section className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
         <article className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
-          <h2 className="mb-3 text-2xl font-semibold">When to pick whisper.cpp</h2>
+          <h2 className="mb-3 text-2xl font-semibold">
+            When to pick whisper.cpp
+          </h2>
           <p className="text-sm text-muted-foreground">
-            Choose whisper.cpp when you want the best speed-to-accuracy ratio and broad hardware support.
-            It is the default in Vocalinux for a reason. Safe engine switching - v0.10.1+ stops
-            recognition before switching to prevent crashes.
+            Choose whisper.cpp when you want the best speed-to-accuracy ratio
+            and broad hardware support. It is the default in Vocalinux for a
+            reason. Safe engine switching - v0.10.1+ stops recognition before
+            switching to prevent crashes.
           </p>
         </article>
 
         <article className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
           <h2 className="mb-3 text-2xl font-semibold">When to pick Whisper</h2>
           <p className="text-sm text-muted-foreground">
-            Choose OpenAI Whisper if your environment already depends on PyTorch/CUDA workflows and you
-            prefer that runtime profile.
+            Choose OpenAI Whisper if your environment already depends on
+            PyTorch/CUDA workflows and you prefer that runtime profile.
           </p>
         </article>
 
         <article className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
           <h2 className="mb-3 text-2xl font-semibold">When to pick VOSK</h2>
           <p className="text-sm text-muted-foreground">
-            Choose VOSK on older laptops, low-RAM systems, or lightweight VMs where small model size and
-            minimal overhead matter most.
+            Choose VOSK on older laptops, low-RAM systems, or lightweight VMs
+            where small model size and minimal overhead matter most.
           </p>
         </article>
+
+        <article className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+          <h2 className="mb-3 text-2xl font-semibold">
+            When to pick Remote API
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Choose Remote API when a trusted server has stronger hardware,
+            larger models, or a shared Whisper backend. Use local engines when
+            your voice data must stay entirely on-device.
+          </p>
+          <Link
+            href="/remote-api/"
+            className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-primary hover:underline"
+          >
+            Remote setup <ChevronRight className="h-4 w-4" />
+          </Link>
+        </article>
       </section>
 
       <section className="mt-12 rounded-2xl border border-zinc-200 bg-zinc-50 p-8 dark:border-zinc-700 dark:bg-zinc-900/60">
         <h2 className="mb-4 text-2xl font-bold">Next steps</h2>
         <ul className="space-y-3 text-muted-foreground">
-          <li>
-            <span className="inline-flex items-center gap-2">
-              <CheckCircle2 className="h-4 w-4 text-green-500" />
+          <li className="flex gap-2">
+            <CheckCircle2 className="mt-1 h-4 w-4 flex-shrink-0 text-green-500" />
+            <span>
               Install by distro:
-              <Link href="/install/ubuntu/" className="font-semibold text-primary hover:underline">
+              <Link
+                href="/install/ubuntu/"
+                className="font-semibold text-primary hover:underline"
+              >
                 Ubuntu
               </Link>
               ,
-              <Link href="/install/fedora/" className="font-semibold text-primary hover:underline">
+              <Link
+                href="/install/fedora/"
+                className="font-semibold text-primary hover:underline"
+              >
                 Fedora
               </Link>
               ,
-              <Link href="/install/arch/" className="font-semibold text-primary hover:underline">
+              <Link
+                href="/install/arch/"
+                className="font-semibold text-primary hover:underline"
+              >
                 Arch Linux
               </Link>
               .
             </span>
           </li>
-          <li>
-            <span className="inline-flex items-center gap-2">
-              <CheckCircle2 className="h-4 w-4 text-green-500" />
-              Use interactive install to detect your hardware and pick the best engine defaults.
+          <li className="flex gap-2">
+            <CheckCircle2 className="mt-1 h-4 w-4 flex-shrink-0 text-green-500" />
+            <span>
+              Use interactive install to detect your hardware and pick the best
+              engine defaults.
             </span>
           </li>
-          <li>
-            <span className="inline-flex items-center gap-2">
-              <CheckCircle2 className="h-4 w-4 text-green-500" />
-              After install, tune model size for your preferred latency and accuracy level.
+          <li className="flex gap-2">
+            <CheckCircle2 className="mt-1 h-4 w-4 flex-shrink-0 text-green-500" />
+            <span>
+              After install, tune model size, VAD sensitivity, or Remote API
+              settings for your preferred latency and accuracy level.
             </span>
           </li>
         </ul>
diff --git a/web/src/app/desktop-reliability/page.tsx b/web/src/app/desktop-reliability/page.tsx
new file mode 100644
index 0000000..1cba7b7
--- /dev/null
+++ b/web/src/app/desktop-reliability/page.tsx
@@ -0,0 +1,245 @@
+import Link from "next/link";
+import { type Metadata } from "next";
+import {
+  CheckCircle2,
+  ChevronRight,
+  Keyboard,
+  Languages,
+  Monitor,
+  Power,
+  RefreshCw,
+  ShieldCheck,
+  Wrench,
+} from "lucide-react";
+import { SeoSubpageShell } from "@/components/seo-subpage-shell";
+import { absoluteUrl, buildPageMetadata } from "@/lib/seo";
+
+const reliabilityFeatures = [
+  {
+    title: "Suspend and resume recovery",
+    description:
+      "Vocalinux restarts recognition and shortcut backends after wake so laptop sleep cycles do not require a manual app restart.",
+    icon: Power,
+  },
+  {
+    title: "Safe engine switching",
+    description:
+      "Recognition stops before engine changes, preventing crashes while moving between whisper.cpp, Whisper, VOSK, or Remote API.",
+    icon: RefreshCw,
+  },
+  {
+    title: "Keyboard layout preservation",
+    description:
+      "IBus activation preserves the current XKB layout so dictation does not unexpectedly switch to US keyboard behavior.",
+    icon: Keyboard,
+  },
+  {
+    title: "IBus runtime recovery",
+    description:
+      "Readiness probes, scoped activation, and runtime recovery improve text injection without restarting the whole app.",
+    icon: Monitor,
+  },
+  {
+    title: "Non-ASCII fallback",
+    description:
+      "ydotool can fall back to clipboard paste for accented and non-ASCII characters on paths that cannot type them directly.",
+    icon: Languages,
+  },
+  {
+    title: "Tray and settings polish",
+    description:
+      "Bundled resources, lower dialog height, and an explicit close button improve behavior across desktop environments.",
+    icon: Wrench,
+  },
+];
+
+const releaseMap = [
+  {
+    version: "v0.12.0-beta",
+    highlights:
+      "Thread safety hardening for Remote API, IBus, and text injection plus better settings behavior.",
+  },
+  {
+    version: "v0.11.0-beta",
+    highlights:
+      "IBus readiness probes, runtime recovery, final speech preservation, installer hardening, and distro compatibility fixes.",
+  },
+  {
+    version: "v0.10.2-beta",
+    highlights:
+      "Non-ASCII ydotool fallback, IBus detection on Wayland, startup fixes, and Pop!_OS/Ubuntu dependency coverage.",
+  },
+  {
+    version: "v0.10.1-beta",
+    highlights:
+      "Suspend/resume recovery, safe engine switching, keyboard layout preservation, tray resources, and push-to-talk reliability.",
+  },
+];
+
+export const metadata: Metadata = buildPageMetadata({
+  title: "Linux Desktop Dictation Reliability - IBus, Wayland, Suspend",
+  description:
+    "See how Vocalinux handles Linux desktop reliability across IBus, Wayland, suspend/resume recovery, keyboard layouts, tray resources, and non-ASCII text injection.",
+  path: "/desktop-reliability",
+  keywords: [
+    "linux dictation reliability",
+    "ibus voice dictation wayland",
+    "vocalinux suspend resume",
+    "wayland text injection reliability",
+  ],
+});
+
+export default function DesktopReliabilityPage() {
+  const articleJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "TechArticle",
+    headline: "Linux Desktop Dictation Reliability",
+    description:
+      "Reliability improvements in Vocalinux for IBus, Wayland, suspend/resume, keyboard layout preservation, and text injection.",
+    dateModified: "2026-06-11",
+    author: {
+      "@type": "Person",
+      name: "Jatin K Malik",
+      url: "https://github.com/jatinkrmalik",
+    },
+    publisher: {
+      "@type": "Organization",
+      name: "Vocalinux",
+      logo: {
+        "@type": "ImageObject",
+        url: absoluteUrl("/vocalinux.png"),
+      },
+    },
+    mainEntityOfPage: absoluteUrl("/desktop-reliability"),
+  };
+
+  return (
+    <SeoSubpageShell>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }}
+      />
+
+      <section>
+        <p className="border-primary/30 bg-primary/10 mb-4 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium text-primary">
+          <ShieldCheck className="h-4 w-4" />
+          Desktop Reliability
+        </p>
+        <h1 className="mb-5 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
+          Reliable Voice Dictation on Real Linux Desktops
+        </h1>
+        <p className="mb-8 max-w-4xl text-lg text-muted-foreground">
+          Recent Vocalinux beta releases focused heavily on the hard parts of
+          Linux desktop dictation: Wayland text injection, IBus lifecycle
+          behavior, suspend/resume recovery, keyboard layouts, non-ASCII text,
+          and settings compatibility.
+        </p>
+      </section>
+
+      <section className="mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {reliabilityFeatures.map((feature) => {
+          const Icon = feature.icon;
+          return (
+            <article
+              key={feature.title}
+              className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
+            >
+              <span className="bg-primary/10 mb-4 inline-flex rounded-xl p-3">
+                <Icon className="h-6 w-6 text-primary" />
+              </span>
+              <h2 className="mb-2 text-xl font-semibold">{feature.title}</h2>
+              <p className="text-sm text-muted-foreground">
+                {feature.description}
+              </p>
+            </article>
+          );
+        })}
+      </section>
+
+      <section className="mb-12 rounded-2xl border border-zinc-200 bg-zinc-50 p-6 dark:border-zinc-700 dark:bg-zinc-900/60">
+        <h2 className="mb-5 text-2xl font-bold">Reliability Work by Release</h2>
+        <div className="space-y-4">
+          {releaseMap.map((release) => (
+            <article
+              key={release.version}
+              className="rounded-xl border border-zinc-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-800"
+            >
+              <h3 className="mb-2 text-lg font-semibold">{release.version}</h3>
+              <p className="text-sm text-muted-foreground">
+                {release.highlights}
+              </p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className="mb-12 grid gap-6 lg:grid-cols-[1fr_1fr]">
+        <div className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+          <h2 className="mb-4 text-2xl font-bold">Why This Matters</h2>
+          <ul className="space-y-3 text-sm text-muted-foreground">
+            {[
+              "Dictation should survive laptop lid closes, docking changes, and USB re-enumeration.",
+              "Text should appear in the focused app without breaking existing IBus engines or keyboard layouts.",
+              "Accented characters should be handled even when a low-level injection backend cannot type them directly.",
+              "Settings should fit smaller displays and window managers with different decoration behavior.",
+            ].map((item) => (
+              <li key={item} className="flex items-start gap-2">
+                <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="border-primary/20 bg-primary/5 rounded-2xl border p-6">
+          <h2 className="mb-4 text-2xl font-bold">Where to Debug Issues</h2>
+          <p className="mb-4 text-sm text-muted-foreground">
+            If dictation works in one app but not another, start with the
+            display server and input method path. Wayland sessions often depend
+            on IBus setup, while X11 paths typically use xdotool or compatible
+            fallbacks.
+          </p>
+          <Link
+            href="/troubleshooting/"
+            className="inline-flex items-center gap-1 text-sm font-semibold text-primary hover:underline"
+          >
+            Open troubleshooting guide <ChevronRight className="h-4 w-4" />
+          </Link>
+        </div>
+      </section>
+
+      <section className="border-primary/20 bg-primary/5 rounded-2xl border p-8">
+        <h2 className="mb-4 text-2xl font-bold">Related Guides</h2>
+        <div className="grid gap-4 md:grid-cols-3">
+          <Link href="/wayland/" className="group">
+            <h3 className="font-semibold">Wayland support</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Understand IBus, wtype, ydotool, and compositor-specific setup.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              Wayland guide <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+          <Link href="/shortcuts/" className="group">
+            <h3 className="font-semibold">Shortcut reliability</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Configure toggle, push-to-talk, and left/right modifier behavior.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              Shortcut guide <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+          <Link href="/changelog/" className="group">
+            <h3 className="font-semibold">Release history</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Review each beta release and the reliability fixes it included.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              Changelog <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+        </div>
+      </section>
+    </SeoSubpageShell>
+  );
+}
diff --git a/web/src/app/faq/page.tsx b/web/src/app/faq/page.tsx
index 9a00c15..b40d9f6 100644
--- a/web/src/app/faq/page.tsx
+++ b/web/src/app/faq/page.tsx
@@ -1,6 +1,16 @@
 import Link from "next/link";
 import { type Metadata } from "next";
-import { BookOpen, ChevronRight, CircleHelp, Cpu, Laptop, Lock, Mic, Volume2, Zap } from "lucide-react";
+import {
+  BookOpen,
+  ChevronRight,
+  CircleHelp,
+  Cpu,
+  Laptop,
+  Lock,
+  Mic,
+  Volume2,
+  Zap,
+} from "lucide-react";
 import { SeoSubpageShell } from "@/components/seo-subpage-shell";
 import { buildPageMetadata } from "@/lib/seo";
 
@@ -31,11 +41,11 @@ const faqCategories = [
     questions: [
       {
         q: "Is Vocalinux really 100% offline?",
-        a: "Yes. All speech recognition runs locally on your Linux machine. Your voice data never leaves your computer. No internet connection is required after installation.",
+        a: "Yes for local engines. whisper.cpp, Whisper, and VOSK run on your Linux machine. Vocalinux also offers an optional Remote API engine for servers you configure yourself.",
       },
       {
         q: "Does Vocalinux send any data to external servers?",
-        a: "No. Vocalinux does not collect, transmit, or store any voice data externally. Everything is processed locally using open-source speech recognition engines.",
+        a: "Local engines do not send voice data externally. Remote API mode sends audio only to the transcription server URL you configure.",
       },
       {
         q: "Is my voice data stored anywhere?",
@@ -50,7 +60,7 @@ const faqCategories = [
     questions: [
       {
         q: "Which speech recognition engines are available?",
-        a: "Vocalinux supports three engines: whisper.cpp (default, fastest), OpenAI Whisper (high accuracy), and VOSK (lightweight for older hardware).",
+        a: "Vocalinux supports whisper.cpp (default), OpenAI Whisper, VOSK, and Remote API for compatible self-hosted or trusted transcription servers.",
       },
       {
         q: "How accurate is the transcription?",
@@ -60,6 +70,10 @@ const faqCategories = [
         q: "Can I use Vocalinux in languages other than English?",
         a: "Yes! whisper.cpp and Whisper support 99+ languages with automatic language detection. VOSK supports several languages with separate models.",
       },
+      {
+        q: "What is Silero VAD?",
+        a: "Silero VAD is neural voice activity detection. Vocalinux uses it when ONNX Runtime support is available to drop silence-only buffers before recognition.",
+      },
     ],
   },
   {
@@ -127,7 +141,7 @@ export default function FaqPage() {
   const faqJsonLd = {
     "@context": "https://schema.org",
     "@type": "FAQPage",
-    dateModified: "2026-03-30",
+    dateModified: "2026-06-11",
     mainEntity: faqCategories.flatMap((cat) =>
       cat.questions.map((q) => ({
         "@type": "Question",
@@ -136,7 +150,7 @@ export default function FaqPage() {
           "@type": "Answer",
           text: q.a,
         },
-      }))
+      })),
     ),
   };
 
@@ -148,7 +162,7 @@ export default function FaqPage() {
       />
 
       <section>
-        <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
+        <p className="border-primary/30 bg-primary/10 mb-4 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium text-primary">
           <CircleHelp className="h-4 w-4" />
           Help Center
         </p>
@@ -156,8 +170,8 @@ export default function FaqPage() {
           Frequently Asked Questions
         </h1>
         <p className="mb-8 max-w-4xl text-lg text-muted-foreground">
-          Find answers to common questions about Vocalinux. From installation to advanced features,
-          we've got you covered.
+          Find answers to common questions about Vocalinux. From installation to
+          advanced features, we've got you covered.
         </p>
       </section>
 
@@ -178,7 +192,10 @@ export default function FaqPage() {
 
               <div className="space-y-6">
                 {category.questions.map((item, index) => (
-                  <div key={index} className="border-b border-zinc-100 pb-6 last:border-0 last:pb-0 dark:border-zinc-700">
+                  <div
+                    key={index}
+                    className="border-b border-zinc-100 pb-6 last:border-0 last:pb-0 dark:border-zinc-700"
+                  >
                     <h3 className="mb-2 text-lg font-semibold">{item.q}</h3>
                     <p className="text-muted-foreground">{item.a}</p>
                   </div>
@@ -196,7 +213,10 @@ export default function FaqPage() {
             <span className="inline-flex items-center gap-2">
               <Laptop className="h-4 w-4 text-primary" />
               Check the{" "}
-              <Link href="/install/" className="font-semibold text-primary hover:underline">
+              <Link
+                href="/install/"
+                className="font-semibold text-primary hover:underline"
+              >
                 install guide
               </Link>{" "}
               for setup help
@@ -206,7 +226,10 @@ export default function FaqPage() {
             <span className="inline-flex items-center gap-2">
               <BookOpen className="h-4 w-4 text-primary" />
               See the{" "}
-              <Link href="/troubleshooting/" className="font-semibold text-primary hover:underline">
+              <Link
+                href="/troubleshooting/"
+                className="font-semibold text-primary hover:underline"
+              >
                 troubleshooting guide
               </Link>{" "}
               for common issues
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index a46845b..9114f34 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -30,7 +30,7 @@ export const metadata: Metadata = {
     template: "%s | Vocalinux",
   },
   description:
-    "Free and open-source voice dictation for Linux. Convert speech to text offline with whisper.cpp and VOSK on Ubuntu, Fedora, Arch, X11, and Wayland.",
+    "Free and open-source voice dictation for Linux. Convert speech to text with whisper.cpp, VOSK, Remote API servers, Silero VAD, X11, and Wayland.",
   applicationName: SITE_NAME,
   keywords: [
     "voice dictation linux",
@@ -39,6 +39,10 @@ export const metadata: Metadata = {
     "linux voice typing",
     "whisper.cpp linux",
     "vosk linux",
+    "remote api speech recognition",
+    "silero vad linux",
+    "whisper.cpp advanced settings",
+    "ibus voice dictation",
     "wayland voice dictation",
     "x11 speech recognition",
     "open source dictation software",
@@ -56,7 +60,9 @@ export const metadata: Metadata = {
       { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
       { url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
     ],
-    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
+    apple: [
+      { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
+    ],
     shortcut: "/vocalinux.png",
   },
   manifest: "/site.webmanifest",
@@ -149,7 +155,8 @@ const webSiteJsonLd = {
     "@type": "SearchAction",
     target: {
       "@type": "EntryPoint",
-      urlTemplate: "https://github.com/jatinkrmalik/vocalinux/issues?q={search_term_string}",
+      urlTemplate:
+        "https://github.com/jatinkrmalik/vocalinux/issues?q={search_term_string}",
     },
     "query-input": {
       "@type": "PropertyValueSpecification",
@@ -167,7 +174,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className={`${GeistSans.variable} scroll-smooth`} suppressHydrationWarning>
+    <html
+      lang="en"
+      className={`${GeistSans.variable} scroll-smooth`}
+      suppressHydrationWarning
+    >
       <head>
         <link rel="preconnect" href="https://api.github.com" />
         <script
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 608f8d9..5545dfd 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -6,12 +6,12 @@ import Link from "next/link";
 import { LiveDemo } from "@/components/live-demo";
 import {
   Terminal,
+  Activity,
   Lock,
   Zap,
   Laptop,
   Keyboard,
   Settings,
-  Code,
   Github,
   Star,
   Download,
@@ -23,6 +23,8 @@ import {
   Check,
   Play,
   Shield,
+  ShieldCheck,
+  Server,
   Globe,
   Cpu,
   Volume2,
@@ -36,15 +38,17 @@ import { useInView } from "react-intersection-observer";
 // The one-liner install command (split into three lines for display)
 // Always uses main/install.sh. The installer dynamically resolves the latest release tag via GitHub API
 const installCommands = {
-  interactiveInstallCommand: `curl -fsSL raw.githubusercontent.com/jatinkrmalik/vocalinux/main/install.sh -o /tmp/vl.sh && bash /tmp/vl.sh --interactive`,
-
-  oneClickInstallCommand: `curl -fsSL raw.githubusercontent.com/jatinkrmalik/vocalinux/main/install.sh -o /tmp/vl.sh && bash /tmp/vl.sh`,
-
-  oneClickInstallWhisper: `curl -fsSL raw.githubusercontent.com/jatinkrmalik/vocalinux/main/install.sh -o /tmp/vl.sh && bash /tmp/vl.sh --engine=whisper`,
-
-  oneClickInstallVosk: `curl -fsSL raw.githubusercontent.com/jatinkrmalik/vocalinux/main/install.sh -o /tmp/vl.sh && bash /tmp/vl.sh --engine=vosk`,
+  interactiveInstallCommand: `curl -fsSL https://raw.githubusercontent.com/jatinkrmalik/vocalinux/main/install.sh -o /tmp/vl.sh && bash /tmp/vl.sh --interactive`,
+  interactiveInstallDisplayCommand: `curl -fsSL \\
+  https://raw.githubusercontent.com/jatinkrmalik/vocalinux/main/install.sh \\
+  -o /tmp/vl.sh && \\
+bash /tmp/vl.sh --interactive`,
 
   uninstallCommand: `curl -fsSL https://raw.githubusercontent.com/jatinkrmalik/vocalinux/main/uninstall.sh -o /tmp/vul.sh && bash /tmp/vul.sh`,
+  uninstallDisplayCommand: `curl -fsSL \\
+  https://raw.githubusercontent.com/jatinkrmalik/vocalinux/main/uninstall.sh \\
+  -o /tmp/vul.sh && \\
+bash /tmp/vul.sh`,
 };
 
 const homeJsonLd = [
@@ -64,7 +68,7 @@ const homeJsonLd = [
     },
     description:
       "Offline voice dictation and speech-to-text for Linux with whisper.cpp and VOSK.",
-    "softwareVersion": "0.12.0-beta",
+    softwareVersion: "0.12.0-beta",
     author: {
       "@type": "Person",
       name: "Jatin K Malik",
@@ -75,6 +79,8 @@ const homeJsonLd = [
     screenshot: "https://vocalinux.com/og-image.png",
     featureList: [
       "100% offline speech recognition",
+      "Remote API speech recognition for compatible self-hosted transcription servers",
+      "Silero neural voice activity detection with amplitude fallback",
       "Works with X11 and Wayland",
       "Toggle and push-to-talk shortcut modes",
       "Left/right modifier key distinction for shortcuts",
@@ -82,10 +88,12 @@ const homeJsonLd = [
       "Adaptive audio and IBus-aware text injection",
       "Clipboard fallback for unsupported Wayland compositors",
       "Sound effects toggle for audio feedback",
-      "whisper.cpp, Whisper, and VOSK support",
+      "whisper.cpp, Whisper, VOSK, and Remote API support",
+      "Advanced whisper.cpp anti-hallucination settings",
       "Auto-recover speech recognition after system suspend/resume",
       "Safe engine switching without segfaults",
       "Keyboard layout preserved during IBus activation",
+      "IBus runtime recovery and non-ASCII text injection fallback",
       "Push-to-talk mode with improved silence detection",
       "Linux desktop integration",
     ],
@@ -99,7 +107,15 @@ const homeJsonLd = [
         name: "Is Vocalinux really 100% offline?",
         acceptedAnswer: {
           "@type": "Answer",
-          text: "Yes. All speech recognition runs locally on your Linux machine. Voice data does not leave your computer.",
+          text: "Yes for local engines. All local speech recognition runs on your Linux machine. Vocalinux also offers an optional Remote API engine for user-configured servers.",
+        },
+      },
+      {
+        "@type": "Question",
+        name: "Does Vocalinux collect usage telemetry?",
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: "No. The installed app does not send usage telemetry, analytics events, or background usage pings. Even the project maintainer cannot see how many people install or actively use Vocalinux.",
         },
       },
       {
@@ -115,7 +131,7 @@ const homeJsonLd = [
         name: "How do I switch between speech engines?",
         acceptedAnswer: {
           "@type": "Answer",
-          text: "Use the settings GUI or the CLI flags: vocalinux --engine whisper_cpp, vocalinux --engine whisper, or vocalinux --engine vosk.",
+          text: "Use the settings GUI or CLI flags for whisper.cpp, Whisper, VOSK, or Remote API. Remote API settings live under Advanced settings.",
         },
       },
       {
@@ -187,16 +203,19 @@ const FeatureCard = ({
       initial={{ opacity: 0, y: 20 }}
       animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
       transition={{ duration: 0.5 }}
-      className={`bg-white dark:bg-zinc-800 p-6 rounded-xl shadow-md hover:shadow-xl transition-all h-full border border-zinc-100 dark:border-zinc-700 flex flex-col${href ? " group cursor-pointer" : ""}`}
+      className={`flex h-full flex-col rounded-xl border border-zinc-100 bg-white p-6 shadow-md transition-all hover:shadow-xl dark:border-zinc-700 dark:bg-zinc-800 ${href ? "group cursor-pointer" : ""}`}
     >
-      <div className="flex items-center gap-4 mb-4">
-        <div className="bg-primary/10 p-3 rounded-lg">{icon}</div>
-        <h3 className="text-lg sm:text-xl font-semibold">{title}</h3>
+      <div className="mb-4 flex items-center gap-4">
+        <div className="bg-primary/10 rounded-lg p-3">{icon}</div>
+        <h3 className="text-lg font-semibold sm:text-xl">{title}</h3>
       </div>
-      <p className="text-sm sm:text-base text-muted-foreground flex-1">{description}</p>
+      <p className="flex-1 text-sm text-muted-foreground sm:text-base">
+        {description}
+      </p>
       {href && (
-        <div className="mt-4 text-sm font-medium text-primary group-hover:underline flex items-center gap-1">
-          Learn more <ChevronRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
+        <div className="mt-4 flex items-center gap-1 text-sm font-medium text-primary group-hover:underline">
+          Learn more{" "}
+          <ChevronRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
         </div>
       )}
     </motion.div>
@@ -208,7 +227,13 @@ const FeatureCard = ({
   return card;
 };
 
-const CopyButton = ({ text, className = "" }: { text: string; className?: string }) => {
+const CopyButton = ({
+  text,
+  className = "",
+}: {
+  text: string;
+  className?: string;
+}) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(() => {
@@ -220,7 +245,7 @@ const CopyButton = ({ text, className = "" }: { text: string; className?: string
   return (
     <button
       onClick={handleCopy}
-      className={`flex items-center gap-2 bg-zinc-700 hover:bg-zinc-600 text-white px-3 py-1.5 rounded text-sm transition-all ${className}`}
+      className={`flex items-center gap-2 rounded bg-zinc-700 px-3 py-1.5 text-sm text-white transition-all hover:bg-zinc-600 ${className}`}
       aria-label={copied ? "Copied to clipboard" : "Copy to clipboard"}
     >
       {copied ? (
@@ -289,7 +314,12 @@ export default function HomePage() {
     { href: "#faq", label: "FAQ" },
   ];
 
-  const { interactiveInstallCommand, oneClickInstallCommand, oneClickInstallWhisper, oneClickInstallVosk, uninstallCommand } = installCommands;
+  const {
+    interactiveInstallCommand,
+    interactiveInstallDisplayCommand,
+    uninstallCommand,
+    uninstallDisplayCommand,
+  } = installCommands;
 
   return (
     <main className="min-h-screen bg-gradient-to-b from-zinc-50 to-white dark:from-zinc-900 dark:to-zinc-950">
@@ -299,28 +329,28 @@ export default function HomePage() {
       />
 
       {/* Header */}
-      <header className="fixed top-0 left-0 right-0 z-50 bg-background/80 backdrop-blur-md border-b border-border">
-        <nav className="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex items-center justify-between">
-          <Link href="/" className="flex items-center gap-2 group">
+      <header className="bg-background/80 fixed left-0 right-0 top-0 z-50 border-b border-border backdrop-blur-md">
+        <nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6">
+          <Link href="/" className="group flex items-center gap-2">
             <VocalinuxLogo
               width={32}
               height={32}
-              className="h-7 w-7 sm:h-8 sm:w-8 transition-transform group-hover:scale-110"
+              className="h-7 w-7 transition-transform group-hover:scale-110 sm:h-8 sm:w-8"
               priority
             />
-            <span className="font-bold text-lg sm:text-xl">Vocalinux</span>
-            <span className="hidden sm:inline-block text-xs bg-gradient-to-r from-primary/20 to-green-500/20 text-primary border border-primary/30 px-2.5 py-1 rounded-full font-semibold shadow-sm shadow-primary/20">
+            <span className="text-lg font-bold sm:text-xl">Vocalinux</span>
+            <span className="from-primary/20 border-primary/30 shadow-primary/20 hidden rounded-full border bg-gradient-to-r to-green-500/20 px-2.5 py-1 text-xs font-semibold text-primary shadow-sm sm:inline-block">
               v0.12.0 Beta
             </span>
           </Link>
 
           {/* Desktop navigation */}
-          <div className="hidden md:flex items-center gap-6">
+          <div className="hidden items-center gap-6 md:flex">
             {navLinks.map((link) => (
               <a
                 key={link.href}
                 href={link.href}
-                className="text-muted-foreground hover:text-foreground transition-colors text-sm font-medium"
+                className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
               >
                 {link.label}
               </a>
@@ -329,11 +359,11 @@ export default function HomePage() {
               href="https://github.com/jatinkrmalik/vocalinux"
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
+              className="flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground"
             >
               <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
               {stars !== null && (
-                <span className="text-xs bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 rounded-full font-medium">
+                <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium dark:bg-zinc-800">
                   {stars.toLocaleString()}
                 </span>
               )}
@@ -342,14 +372,18 @@ export default function HomePage() {
           </div>
 
           {/* Mobile navigation toggle */}
-          <div className="flex md:hidden items-center gap-3">
+          <div className="flex items-center gap-3 md:hidden">
             <ThemeToggle />
             <button
               onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
               className="p-2 text-foreground focus:outline-none"
               aria-label="Toggle menu"
             >
-              {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+              {mobileMenuOpen ? (
+                <X className="h-6 w-6" />
+              ) : (
+                <Menu className="h-6 w-6" />
+              )}
             </button>
           </div>
         </nav>
@@ -362,14 +396,14 @@ export default function HomePage() {
             opacity: mobileMenuOpen ? 1 : 0,
           }}
           transition={{ duration: 0.3 }}
-          className="md:hidden overflow-hidden bg-background border-b border-border"
+          className="overflow-hidden border-b border-border bg-background md:hidden"
         >
-          <div className="px-4 py-3 space-y-2">
+          <div className="space-y-2 px-4 py-3">
             {navLinks.map((link) => (
               <a
                 key={link.href}
                 href={link.href}
-                className="block py-2 text-foreground hover:text-primary transition-colors"
+                className="block py-2 text-foreground transition-colors hover:text-primary"
                 onClick={() => setMobileMenuOpen(false)}
               >
                 {link.label}
@@ -379,7 +413,7 @@ export default function HomePage() {
               href="https://github.com/jatinkrmalik/vocalinux"
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center gap-2 py-2 text-foreground hover:text-primary transition-colors"
+              className="flex items-center gap-2 py-2 text-foreground transition-colors hover:text-primary"
               onClick={() => setMobileMenuOpen(false)}
             >
               <Github className="h-5 w-5" />
@@ -390,52 +424,119 @@ export default function HomePage() {
       </header>
 
       {/* Hero Section */}
-      <section className="relative pt-28 sm:pt-36 pb-16 sm:pb-24 px-4 sm:px-6 overflow-hidden">
-        <div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-cyan-500/5 dark:from-primary/10 dark:to-cyan-500/10" />
+      <section className="relative overflow-hidden px-4 pb-16 pt-28 sm:px-6 sm:pb-24 sm:pt-36">
+        <div className="from-primary/5 dark:from-primary/10 absolute inset-0 bg-gradient-to-br via-transparent to-cyan-500/5 dark:to-cyan-500/10" />
 
-        {/* Animated background elements */}
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        {/* Full-width shifting wave gradient */}
+        <div className="pointer-events-none absolute inset-0 overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,black_10%,black_84%,transparent)]">
+          <div className="absolute inset-0 bg-white/[0.015] backdrop-blur-[1px] dark:bg-white/[0.008]" />
           <motion.div
-            animate={{ rotate: 360 }}
-            transition={{ duration: 50, repeat: Infinity, ease: "linear" }}
-            className="absolute -top-1/2 -right-1/2 w-full h-full bg-gradient-to-br from-primary/5 to-transparent rounded-full blur-3xl"
+            className="absolute inset-x-[-18%] top-[-12%] h-[90%] mix-blend-multiply blur-3xl dark:hidden"
+            style={{
+              background:
+                "radial-gradient(70% 48% at 16% 46%, hsl(var(--primary) / 0.28), transparent 64%), radial-gradient(64% 44% at 82% 44%, rgb(6 182 212 / 0.3), transparent 66%), linear-gradient(105deg, transparent 8%, rgb(20 184 166 / 0.2) 36%, rgb(6 182 212 / 0.24) 55%, transparent 86%)",
+              backgroundSize: "170% 170%",
+            }}
+            animate={{
+              backgroundPosition: ["0% 46%", "100% 54%", "0% 46%"],
+              opacity: [0.82, 1, 0.82],
+            }}
+            transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
+          />
+          <motion.div
+            className="absolute inset-x-[-18%] top-[-12%] hidden h-[90%] blur-3xl dark:block"
+            style={{
+              background:
+                "radial-gradient(70% 48% at 16% 46%, hsl(var(--primary) / 0.13), transparent 68%), radial-gradient(64% 44% at 82% 44%, rgb(6 182 212 / 0.13), transparent 70%), linear-gradient(105deg, transparent 8%, rgb(20 184 166 / 0.08) 36%, rgb(6 182 212 / 0.1) 55%, transparent 86%)",
+              backgroundSize: "170% 170%",
+            }}
+            animate={{
+              backgroundPosition: ["0% 46%", "100% 54%", "0% 46%"],
+              opacity: [0.58, 0.82, 0.58],
+            }}
+            transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
+          />
+          <motion.div
+            className="absolute inset-x-[-12%] top-[16%] h-[52%] mix-blend-multiply blur-2xl dark:hidden"
+            style={{
+              background:
+                "linear-gradient(100deg, transparent 4%, hsl(var(--primary) / 0.34) 30%, rgb(20 184 166 / 0.3) 48%, rgb(6 182 212 / 0.34) 68%, transparent 94%)",
+              clipPath:
+                "polygon(0 44%, 10% 36%, 24% 43%, 39% 34%, 55% 42%, 72% 32%, 88% 39%, 100% 34%, 100% 72%, 86% 65%, 70% 73%, 54% 63%, 38% 72%, 22% 62%, 8% 69%, 0 64%)",
+            }}
+            animate={{
+              x: ["-4%", "4%", "-4%"],
+              y: [0, -16, 0],
+              opacity: [0.84, 1, 0.84],
+              scale: [1, 1.05, 1],
+            }}
+            transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
+          />
+          <motion.div
+            className="absolute inset-x-[-12%] top-[16%] hidden h-[52%] blur-3xl dark:block"
+            style={{
+              background:
+                "linear-gradient(100deg, transparent 4%, hsl(var(--primary) / 0.13) 30%, rgb(20 184 166 / 0.12) 48%, rgb(6 182 212 / 0.14) 68%, transparent 94%)",
+              clipPath:
+                "polygon(0 44%, 10% 36%, 24% 43%, 39% 34%, 55% 42%, 72% 32%, 88% 39%, 100% 34%, 100% 72%, 86% 65%, 70% 73%, 54% 63%, 38% 72%, 22% 62%, 8% 69%, 0 64%)",
+            }}
+            animate={{
+              x: ["-4%", "4%", "-4%"],
+              y: [0, -16, 0],
+              opacity: [0.54, 0.76, 0.54],
+              scale: [1, 1.05, 1],
+            }}
+            transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
           />
         </div>
 
-        <div className="max-w-7xl mx-auto relative">
-          <div className="text-center max-w-4xl mx-auto">
+        <div className="relative mx-auto max-w-7xl">
+          <div className="mx-auto max-w-4xl text-center">
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
               {/* Badge */}
-              <div className="inline-flex items-center gap-2 bg-primary/10 px-4 py-2 rounded-full mb-6">
+              <div className="bg-primary/10 mb-6 inline-flex items-center gap-2 rounded-full px-4 py-2">
                 <Sparkles className="h-4 w-4 text-primary" />
                 <span className="text-sm font-medium text-primary">
                   Beta Release: Try it now!
                 </span>
               </div>
 
-              <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6">
+              <h1 className="mb-6 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
                 Voice Dictation for Linux,{" "}
-                <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-teal-500 to-cyan-600">
+                <motion.span
+                  className="inline-block bg-gradient-to-r from-primary via-teal-500 to-cyan-600 bg-clip-text text-transparent"
+                  style={{
+                    backgroundSize: "220% 100%",
+                  }}
+                  animate={{
+                    backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
+                  }}
+                  transition={{
+                    duration: 14,
+                    repeat: Infinity,
+                    ease: "easeInOut",
+                  }}
+                >
                   Finally Done Right
-                </span>
+                </motion.span>
               </h1>
 
-              <p className="text-lg sm:text-xl md:text-2xl text-muted-foreground mb-2 max-w-3xl mx-auto">
+              <p className="mx-auto mb-2 max-w-3xl text-lg text-muted-foreground sm:text-xl md:text-2xl">
                 100% offline voice dictation for Linux.
               </p>
-              <p className="text-lg sm:text-xl md:text-2xl text-muted-foreground mb-8 max-w-3xl mx-auto">
+              <p className="mx-auto mb-8 max-w-3xl text-lg text-muted-foreground sm:text-xl md:text-2xl">
                 Use toggle mode or push-to-talk and start speaking.
               </p>
 
               {/* CTA Buttons */}
-              <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
+              <div className="mb-12 flex flex-col justify-center gap-4 sm:flex-row">
                 <a
                   href="#install"
-                  className="inline-flex items-center justify-center gap-2 bg-primary text-white dark:text-zinc-900 hover:bg-primary/90 px-8 py-4 rounded-xl text-lg font-semibold transition-all hover:scale-105 shadow-lg shadow-primary/25"
+                  className="hover:bg-primary/90 shadow-primary/25 inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-8 py-4 text-lg font-semibold text-white shadow-lg transition-all hover:scale-105 dark:text-zinc-900"
                 >
                   <Download className="h-5 w-5" />
                   Install Now
@@ -445,14 +546,14 @@ export default function HomePage() {
                   target="_blank"
                   rel="noopener noreferrer"
                   aria-label="View Vocalinux source code on GitHub (opens in a new tab)"
-                  className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl text-lg font-semibold transition-all bg-zinc-900 text-white border border-zinc-700 hover:bg-zinc-800 hover:scale-105 hover:shadow-md dark:bg-zinc-100 dark:text-zinc-900 dark:border-zinc-300 dark:hover:bg-white"
+                  className="inline-flex items-center justify-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900 px-8 py-4 text-lg font-semibold text-white transition-all hover:scale-105 hover:bg-zinc-800 hover:shadow-md dark:border-zinc-300 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white"
                 >
-                  <Code className="h-5 w-5" />
+                  <Github className="h-5 w-5" />
                   We&apos;re Open Source
                 </a>
                 <a
                   href="#ecosystem"
-                  className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl text-lg font-semibold transition-all border border-zinc-300 dark:border-zinc-600 text-zinc-600 dark:text-zinc-400 hover:border-zinc-500 dark:hover:border-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-200 hover:shadow-sm"
+                  className="inline-flex items-center justify-center gap-2 rounded-xl border border-zinc-300 px-8 py-4 text-lg font-semibold text-zinc-600 transition-all hover:border-zinc-500 hover:text-zinc-900 hover:shadow-sm dark:border-zinc-600 dark:text-zinc-400 dark:hover:border-zinc-400 dark:hover:text-zinc-200"
                 >
                   <Laptop className="h-5 w-5" />
                   Use Windows or Mac?
@@ -465,23 +566,27 @@ export default function HomePage() {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.2 }}
-              className="w-full max-w-6xl mx-auto px-4"
+              className="mx-auto w-full max-w-6xl px-4"
             >
-              <div className="bg-gradient-to-br from-zinc-900 to-zinc-950 rounded-2xl p-6 sm:p-8 shadow-2xl border border-zinc-800/50 backdrop-blur">
+              <div className="rounded-2xl border border-zinc-800/50 bg-gradient-to-br from-zinc-900 to-zinc-950 p-6 shadow-2xl backdrop-blur sm:p-8">
                 {/* Header */}
-                <div className="flex items-center gap-3 mb-5">
-                  <div className="flex items-center justify-center h-10 w-10 rounded-full bg-green-500/20 flex-shrink-0">
+                <div className="mb-5 flex items-center gap-3">
+                  <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-green-500/20">
                     <Terminal className="h-5 w-5 text-green-400" />
                   </div>
                   <div className="text-left">
-                    <h2 className="text-lg font-semibold text-white text-left">Quick Install (Interactive)</h2>
-                    <p className="text-xs text-zinc-400 text-left">Guided installation with hardware detection</p>
+                    <h2 className="text-left text-lg font-semibold text-white">
+                      Quick Install (Interactive)
+                    </h2>
+                    <p className="text-left text-xs text-zinc-400">
+                      Guided installation with hardware detection
+                    </p>
                   </div>
                 </div>
 
                 {/* Command box */}
-                <div className="bg-zinc-950/80 rounded-xl border border-zinc-800 overflow-hidden">
-                  <div className="flex items-center justify-between px-4 py-2.5 border-b border-zinc-800 bg-zinc-900/50">
+                <div className="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950/80">
+                  <div className="flex items-center justify-between border-b border-zinc-800 bg-zinc-900/50 px-4 py-2.5">
                     <div className="flex items-center gap-2">
                       <div className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
                       <div className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
@@ -490,42 +595,45 @@ export default function HomePage() {
                     <CopyButton text={interactiveInstallCommand} />
                   </div>
                   <div className="p-4 sm:p-5">
-                    <pre className="font-mono text-sm sm:text-base text-green-400 text-left whitespace-pre-wrap">
-                      <span className="text-zinc-500 select-none">$ </span>{interactiveInstallCommand}
+                    <pre className="whitespace-pre-wrap text-left font-mono text-sm text-green-400 sm:text-base">
+                      <span className="select-none text-zinc-500">$ </span>
+                      {interactiveInstallDisplayCommand}
                     </pre>
                   </div>
                 </div>
 
                 {/* Bottom info */}
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mt-5 pt-5 border-t border-zinc-800/50">
+                <div className="mt-5 flex flex-col gap-3 border-t border-zinc-800/50 pt-5 sm:flex-row sm:items-center sm:justify-between">
                   <p className="text-sm text-zinc-400">
-                    <span className="text-zinc-500">Compatible:</span> Ubuntu, Fedora, Debian, Arch & more
+                    <span className="text-zinc-500">Compatible:</span> Ubuntu,
+                    Fedora, Debian, Arch, openSUSE &amp; more
                   </p>
                   <div className="flex items-center gap-4 text-xs text-zinc-500">
                     <span className="flex items-center gap-1.5">
                       <CheckCircle2 className="h-3.5 w-3.5 text-green-500" />
-                      No sudo required
+                      Guided setup
                     </span>
                     <span className="flex items-center gap-1.5">
                       <Zap className="h-3.5 w-3.5 text-green-500" />
-                      ~1-2 min
+                      ~1-2 min default
                     </span>
                   </div>
                 </div>
 
                 {/* Tech stack info */}
-                <div className="flex flex-wrap justify-center items-center gap-4 sm:gap-6 mt-4 pt-4 border-t border-zinc-800/30 text-xs text-zinc-400">
+                <div className="mt-4 flex flex-wrap items-center justify-center gap-4 border-t border-zinc-800/30 pt-4 text-xs text-zinc-400 sm:gap-6">
                   <span className="flex items-center gap-1.5">
                     <Zap className="h-3.5 w-3.5 text-yellow-500" />
-                    <strong className="text-zinc-300">whisper.cpp</strong> powered
+                    <strong className="text-zinc-300">whisper.cpp</strong>{" "}
+                    default
                   </span>
                   <span className="flex items-center gap-1.5">
-                    <Globe className="h-3.5 w-3.5 text-blue-500" />
-                    AMD, Intel & NVIDIA GPUs
+                    <Cpu className="h-3.5 w-3.5 text-blue-500" />
+                    Vulkan GPU ready
                   </span>
                   <span className="flex items-center gap-1.5">
-                    <Code className="h-3.5 w-3.5 text-purple-500" />
-                    Free & open-source
+                    <Settings className="h-3.5 w-3.5 text-purple-500" />
+                    Interactive engine choice
                   </span>
                 </div>
               </div>
@@ -536,7 +644,7 @@ export default function HomePage() {
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               transition={{ duration: 0.6, delay: 0.4 }}
-              className="flex flex-wrap justify-center items-center gap-6 sm:gap-10 mt-12 text-sm text-muted-foreground"
+              className="mt-12 flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground sm:gap-10"
             >
               <div className="flex items-center gap-2">
                 <Shield className="h-5 w-5 text-green-500" />
@@ -544,11 +652,11 @@ export default function HomePage() {
               </div>
               <div className="flex items-center gap-2">
                 <Lock className="h-5 w-5 text-blue-500" />
-                <span>Privacy First</span>
+                <span>No Telemetry</span>
               </div>
               <div className="flex items-center gap-2">
-                <Code className="h-5 w-5 text-purple-500" />
-                <span>Open Source (GPL-3.0)</span>
+                <Activity className="h-5 w-5 text-purple-500" />
+                <span>Local Models</span>
               </div>
               <div className="flex items-center gap-2">
                 <Globe className="h-5 w-5 text-orange-500" />
@@ -560,16 +668,19 @@ export default function HomePage() {
       </section>
 
       {/* Demo Section - Live Interactive Demo */}
-      <section id="demo" className="py-16 sm:py-24 px-4 sm:px-6 bg-zinc-50 dark:bg-zinc-900/50">
-        <div className="max-w-6xl mx-auto">
+      <section
+        id="demo"
+        className="bg-zinc-50 px-4 py-16 dark:bg-zinc-900/50 sm:px-6 sm:py-24"
+      >
+        <div className="mx-auto max-w-6xl">
           <FadeInSection>
-            <div className="text-center mb-12">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
+            <div className="mb-12 text-center">
+              <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">
                 Try a Speech-to-Text Preview in Your Browser
               </h2>
-              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-                This preview runs when your browser exposes SpeechRecognition. Vocalinux itself
-                runs offline after install.
+              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+                This preview runs when your browser exposes SpeechRecognition.
+                Vocalinux itself runs offline after install.
               </p>
             </div>
           </FadeInSection>
@@ -580,34 +691,48 @@ export default function HomePage() {
 
           {/* Key demo points */}
           <FadeInSection delay={0.2}>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12">
+            <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
               {[
                 {
                   icon: <Keyboard className="h-6 w-6 text-primary" />,
                   title: "Flexible Shortcut Modes",
-                  description: "Use toggle mode (double-tap) or push-to-talk mode to dictate anywhere",
+                  description:
+                    "Use toggle mode (double-tap) or push-to-talk mode to dictate anywhere",
+                  href: "/shortcuts/",
                 },
                 {
                   icon: <Zap className="h-6 w-6 text-primary" />,
                   title: "Real-time Transcription",
-                  description: "See your words appear as you speak with minimal latency",
+                  description:
+                    "Compare engines and model choices for low-latency dictation",
+                  href: "/compare/",
                 },
                 {
                   icon: <Volume2 className="h-6 w-6 text-primary" />,
                   title: "Audio Feedback",
-                  description: "Subtle sounds let you know when recording starts and stops",
+                  description:
+                    "Use sound effects to know when recording starts and stops",
+                  href: "/shortcuts/",
                 },
               ].map((item, i) => (
-                <div
+                <Link
                   key={i}
-                  className="flex items-start gap-4 p-4 rounded-xl bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700"
+                  href={item.href}
+                  className="hover:border-primary/50 hover:bg-primary/5 dark:hover:border-primary/50 dark:hover:bg-primary/10 group flex items-start gap-4 rounded-xl border border-zinc-200 bg-white p-4 transition-colors dark:border-zinc-700 dark:bg-zinc-800"
                 >
-                  <div className="bg-primary/10 p-2 rounded-lg">{item.icon}</div>
-                  <div>
-                    <h3 className="font-semibold mb-1">{item.title}</h3>
-                    <p className="text-sm text-muted-foreground">{item.description}</p>
+                  <div className="bg-primary/10 rounded-lg p-2">
+                    {item.icon}
                   </div>
-                </div>
+                  <div>
+                    <h3 className="mb-1 inline-flex items-center gap-1 font-semibold">
+                      {item.title}
+                      <ChevronRight className="h-4 w-4 text-primary opacity-0 transition-opacity group-hover:opacity-100" />
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                      {item.description}
+                    </p>
+                  </div>
+                </Link>
               ))}
             </div>
           </FadeInSection>
@@ -615,21 +740,22 @@ export default function HomePage() {
       </section>
 
       {/* Features Section */}
-      <section id="features" className="py-16 sm:py-24 px-4 sm:px-6">
-        <div className="max-w-7xl mx-auto">
+      <section id="features" className="px-4 py-16 sm:px-6 sm:py-24">
+        <div className="mx-auto max-w-7xl">
           <FadeInSection>
-            <div className="text-center mb-16">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
+            <div className="mb-16 text-center">
+              <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">
                 Offline Voice Dictation Features for Linux
               </h2>
-              <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
-                Finally, Linux users get the voice dictation experience they deserve.
-                no compromises on privacy, no cloud dependencies, just pure productivity.
+              <p className="mx-auto max-w-3xl text-lg text-muted-foreground">
+                Finally, Linux users get the voice dictation experience they
+                deserve. no compromises on privacy, no cloud dependencies, just
+                pure productivity.
               </p>
             </div>
           </FadeInSection>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
             <FeatureCard
               icon={<Shield className="h-6 w-6 text-primary" />}
               title="100% Offline & Private"
@@ -664,21 +790,39 @@ export default function HomePage() {
               icon={<Settings className="h-6 w-6 text-primary" />}
               title="Fully Configurable"
               description="Adjust model size, language, activation mode, and voice command behavior. GUI settings panel or config file, your choice."
-              href="/for-developers/"
+              href="/advanced-settings/"
+            />
+            <FeatureCard
+              icon={<Server className="h-6 w-6 text-primary" />}
+              title="Remote API Engine"
+              description="Offload transcription to an OpenAI-compatible or whisper.cpp server while keeping the same Linux desktop workflow."
+              href="/remote-api/"
+            />
+            <FeatureCard
+              icon={<Activity className="h-6 w-6 text-primary" />}
+              title="Silero Voice Activity Detection"
+              description="Neural VAD drops silence-only buffers for cleaner dictation, with a safe amplitude fallback when ONNX Runtime is unavailable."
+              href="/voice-activity-detection/"
+            />
+            <FeatureCard
+              icon={<ShieldCheck className="h-6 w-6 text-primary" />}
+              title="Desktop Reliability"
+              description="Suspend/resume recovery, IBus runtime hardening, keyboard layout preservation, and non-ASCII text injection fallbacks."
+              href="/desktop-reliability/"
             />
           </div>
 
           {/* Comparison highlight */}
           <FadeInSection delay={0.2}>
-            <div className="mt-16 bg-gradient-to-r from-primary/10 via-cyan-500/10 to-primary/10 rounded-2xl p-8 sm:p-12">
-              <div className="grid md:grid-cols-2 gap-8 items-center">
+            <div className="from-primary/10 to-primary/10 mt-16 rounded-2xl bg-gradient-to-r via-cyan-500/10 p-8 sm:p-12">
+              <div className="grid items-center gap-8 md:grid-cols-2">
                 <div>
-                  <h3 className="text-2xl sm:text-3xl font-bold mb-4">
+                  <h3 className="mb-4 text-2xl font-bold sm:text-3xl">
                     The Linux Voice Gap, Solved
                   </h3>
-                  <p className="text-muted-foreground mb-6">
-                    While macOS and Windows have had built-in voice dictation for years,
-                    Linux users have been left behind. Until now.
+                  <p className="mb-6 text-muted-foreground">
+                    While macOS and Windows have had built-in voice dictation
+                    for years, Linux users have been left behind. Until now.
                   </p>
                   <ul className="space-y-3">
                     {[
@@ -688,7 +832,7 @@ export default function HomePage() {
                       "Just install and start dictating",
                     ].map((item, i) => (
                       <li key={i} className="flex items-start gap-3">
-                        <CheckCircle2 className="h-5 w-5 text-green-500 flex-shrink-0 mt-0.5" />
+                        <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-500" />
                         <span>{item}</span>
                       </li>
                     ))}
@@ -696,9 +840,13 @@ export default function HomePage() {
                 </div>
                 <div className="flex justify-center">
                   <div className="relative">
-                    <div className="bg-white dark:bg-zinc-800 rounded-2xl p-8 shadow-xl">
-                      <div className="flex items-center gap-4 mb-6">
-                        <VocalinuxLogo width={64} height={64} className="h-16 w-16" />
+                    <div className="rounded-2xl bg-white p-8 shadow-xl dark:bg-zinc-800">
+                      <div className="mb-6 flex items-center gap-4">
+                        <VocalinuxLogo
+                          width={64}
+                          height={64}
+                          className="h-16 w-16"
+                        />
                         <div>
                           <div className="text-2xl font-bold">Vocalinux</div>
                           <div className="text-sm text-muted-foreground">
@@ -707,13 +855,21 @@ export default function HomePage() {
                         </div>
                       </div>
                       <div className="grid grid-cols-2 gap-4 text-center">
-                        <div className="p-3 bg-zinc-50 dark:bg-zinc-900 rounded-lg">
-                          <div className="text-2xl font-bold text-primary">0</div>
-                          <div className="text-xs text-muted-foreground">Cloud calls</div>
+                        <div className="rounded-lg bg-zinc-50 p-3 dark:bg-zinc-900">
+                          <div className="text-2xl font-bold text-primary">
+                            0
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            Cloud calls
+                          </div>
                         </div>
-                        <div className="p-3 bg-zinc-50 dark:bg-zinc-900 rounded-lg">
-                          <div className="text-2xl font-bold text-primary">∞</div>
-                          <div className="text-xs text-muted-foreground">Privacy</div>
+                        <div className="rounded-lg bg-zinc-50 p-3 dark:bg-zinc-900">
+                          <div className="text-2xl font-bold text-primary">
+                            ∞
+                          </div>
+                          <div className="text-xs text-muted-foreground">
+                            Privacy
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -726,11 +882,14 @@ export default function HomePage() {
       </section>
 
       {/* Installation Section */}
-      <section id="install" className="py-16 sm:py-24 px-4 sm:px-6 bg-zinc-50 dark:bg-zinc-900/50">
-        <div className="max-w-4xl mx-auto">
+      <section
+        id="install"
+        className="bg-zinc-50 px-4 py-16 dark:bg-zinc-900/50 sm:px-6 sm:py-24"
+      >
+        <div className="mx-auto max-w-4xl">
           <FadeInSection>
-            <div className="text-center mb-12">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
+            <div className="mb-12 text-center">
+              <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">
                 How to Install Voice Dictation on Linux
               </h2>
               <p className="text-lg text-muted-foreground">
@@ -740,102 +899,103 @@ export default function HomePage() {
           </FadeInSection>
 
           <FadeInSection delay={0.1}>
-            <div className="bg-white dark:bg-zinc-800 rounded-2xl shadow-xl overflow-hidden border border-zinc-200 dark:border-zinc-700 min-w-0">
+            <div className="min-w-0 overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-800">
               <div className="p-6 sm:p-8">
-                {/* Default: whisper.cpp install */}
-                <div className="mb-8">
-                  <div className="flex items-center gap-3 mb-4">
-                    <div className="bg-green-500/10 p-2 rounded-lg">
+                {/* Interactive install */}
+                <div>
+                  <div className="mb-4 flex items-center gap-3">
+                    <div className="rounded-lg bg-green-500/10 p-2">
                       <Zap className="h-5 w-5 text-green-500" />
                     </div>
                     <div className="flex-1">
-                      <h3 className="text-xl font-semibold">Recommended: whisper.cpp (Default)</h3>
+                      <h3 className="text-xl font-semibold">
+                        Recommended: interactive installer
+                      </h3>
                       <p className="text-sm text-muted-foreground">
-                        Fastest installation (~1-2 min), Vulkan GPU support for AMD/Intel/NVIDIA
+                        Detects your system, lets you choose an engine, and sets
+                        up the desktop app.
                       </p>
                     </div>
                   </div>
-                  <div className="bg-zinc-950/80 rounded-xl border border-zinc-800 overflow-hidden">
-                    <div className="flex items-center justify-between px-4 py-2.5 border-b border-zinc-800 bg-zinc-900/50">
+                  <div className="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950/80">
+                    <div className="flex items-center justify-between border-b border-zinc-800 bg-zinc-900/50 px-4 py-2.5">
                       <div className="flex items-center gap-2">
                         <div className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
                         <div className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
                         <div className="h-2.5 w-2.5 rounded-full bg-green-500/70" />
                       </div>
-                      <CopyButton text={oneClickInstallCommand} />
+                      <CopyButton text={interactiveInstallCommand} />
                     </div>
                     <div className="p-4 sm:p-5">
-                      <pre className="font-mono text-sm sm:text-base text-green-400 text-left whitespace-pre-wrap break-all">
-                        <span className="text-zinc-500 select-none">$ </span>{oneClickInstallCommand}
+                      <pre className="overflow-x-auto whitespace-pre-wrap text-left font-mono text-sm text-green-400 sm:text-base">
+                        <span className="select-none text-zinc-500">$ </span>
+                        {interactiveInstallDisplayCommand}
                       </pre>
                     </div>
                   </div>
                 </div>
 
-                {/* Alternative install - Whisper (OpenAI) */}
-                <div className="border-t border-zinc-200 dark:border-zinc-700 pt-6">
-                  <div className="flex items-center gap-3 mb-4">
-                    <div className="bg-cyan-500/10 p-2 rounded-lg">
-                      <Cpu className="h-5 w-5 text-cyan-500" />
-                    </div>
-                    <div className="flex-1">
-                      <h3 className="text-lg font-semibold">OpenAI Whisper (PyTorch)</h3>
+                <div className="mt-6 rounded-xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-900">
+                  <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                    <div>
+                      <h4 className="font-semibold">
+                        Choose your engine during setup
+                      </h4>
                       <p className="text-sm text-muted-foreground">
-                        PyTorch-based engine, NVIDIA GPU only (~5-10 min, ~2.3GB download)
+                        Start with the guided installer, then pick the runtime
+                        that fits your hardware.
                       </p>
                     </div>
+                    <Link
+                      href="/compare/"
+                      className="inline-flex items-center gap-1 text-sm font-semibold text-primary hover:underline"
+                    >
+                      Compare engines <ChevronRight className="h-4 w-4" />
+                    </Link>
                   </div>
-                  <div className="bg-zinc-950/80 rounded-xl border border-zinc-800 overflow-hidden">
-                    <div className="flex items-center justify-between px-4 py-2.5 border-b border-zinc-800 bg-zinc-900/50">
-                      <div className="flex items-center gap-2">
-                        <div className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
-                        <div className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
-                        <div className="h-2.5 w-2.5 rounded-full bg-green-500/70" />
-                      </div>
-                      <CopyButton text={oneClickInstallWhisper} />
-                    </div>
-                    <div className="p-4 sm:p-5">
-                      <pre className="font-mono text-sm sm:text-base text-green-400 text-left whitespace-pre-wrap break-all">
-                        <span className="text-zinc-500 select-none">$ </span>{oneClickInstallWhisper}
-                      </pre>
-                    </div>
-                  </div>
-                </div>
 
-                {/* Alternative install - VOSK only */}
-                <div className="border-t border-zinc-200 dark:border-zinc-700 pt-6">
-                  <div className="flex items-center gap-3 mb-4">
-                    <div className="bg-orange-500/10 p-2 rounded-lg">
-                      <Zap className="h-5 w-5 text-orange-500" />
-                    </div>
-                    <div className="flex-1">
-                      <h3 className="text-lg font-semibold">VOSK Only (Lightweight)</h3>
-                      <p className="text-sm text-muted-foreground">
-                        For low-RAM systems (4GB or less) - minimal footprint (~40MB)
-                      </p>
-                    </div>
-                  </div>
-                  <div className="bg-zinc-950/80 rounded-xl border border-zinc-800 overflow-hidden">
-                    <div className="flex items-center justify-between px-4 py-2.5 border-b border-zinc-800 bg-zinc-900/50">
-                      <div className="flex items-center gap-2">
-                        <div className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
-                        <div className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
-                        <div className="h-2.5 w-2.5 rounded-full bg-green-500/70" />
+                  <div className="mt-4 grid gap-3 md:grid-cols-3">
+                    {[
+                      {
+                        icon: <Zap className="h-4 w-4 text-green-500" />,
+                        title: "whisper.cpp",
+                        description: "Default, fast, Vulkan-capable",
+                      },
+                      {
+                        icon: <Cpu className="h-4 w-4 text-cyan-500" />,
+                        title: "Whisper",
+                        description: "PyTorch/CUDA workflow",
+                      },
+                      {
+                        icon: <Server className="h-4 w-4 text-orange-500" />,
+                        title: "VOSK",
+                        description: "Small footprint for older systems",
+                      },
+                    ].map((engine) => (
+                      <div
+                        key={engine.title}
+                        className="rounded-lg border border-zinc-200 bg-white p-3 dark:border-zinc-700 dark:bg-zinc-800"
+                      >
+                        <div className="mb-2 flex items-center gap-2">
+                          <span className="rounded-md bg-zinc-100 p-1.5 dark:bg-zinc-700">
+                            {engine.icon}
+                          </span>
+                          <h5 className="font-semibold">{engine.title}</h5>
+                        </div>
+                        <p className="text-sm text-muted-foreground">
+                          {engine.description}
+                        </p>
                       </div>
-                      <CopyButton text={oneClickInstallVosk} />
-                    </div>
-                    <div className="p-4 sm:p-5">
-                      <pre className="font-mono text-sm sm:text-base text-green-400 text-left whitespace-pre-wrap break-all">
-                        <span className="text-zinc-500 select-none">$ </span>{oneClickInstallVosk}
-                      </pre>
-                    </div>
+                    ))}
                   </div>
                 </div>
 
                 {/* What the installer does */}
-                <div className="mt-8 p-4 bg-zinc-50 dark:bg-zinc-900 rounded-lg">
-                  <h4 className="font-semibold mb-3">What the installer does:</h4>
-                  <ul className="grid sm:grid-cols-2 gap-2 text-sm text-muted-foreground">
+                <div className="mt-8 rounded-lg bg-zinc-50 p-4 dark:bg-zinc-900">
+                  <h4 className="mb-3 font-semibold">
+                    What the installer does:
+                  </h4>
+                  <ul className="grid gap-2 text-sm text-muted-foreground sm:grid-cols-2">
                     {[
                       "Installs system dependencies",
                       "Creates isolated virtual environment",
@@ -853,15 +1013,15 @@ export default function HomePage() {
                 </div>
 
                 {/* After install */}
-                <div className="mt-6 p-4 bg-primary/5 rounded-lg border border-primary/20">
-                  <h4 className="font-semibold mb-2 flex items-center gap-2">
+                <div className="bg-primary/5 border-primary/20 mt-6 rounded-lg border p-4">
+                  <h4 className="mb-2 flex items-center gap-2 font-semibold">
                     <Play className="h-4 w-4 text-primary" />
                     After Installation
                   </h4>
-                  <p className="text-sm text-muted-foreground mb-3">
+                  <p className="mb-3 text-sm text-muted-foreground">
                     Launch Vocalinux from your terminal or application menu:
                   </p>
-                  <code className="block bg-zinc-900 text-green-400 px-4 py-2 rounded text-sm">
+                  <code className="block rounded bg-zinc-900 px-4 py-2 text-sm text-green-400">
                     vocalinux
                   </code>
                 </div>
@@ -871,23 +1031,28 @@ export default function HomePage() {
 
           {/* System requirements */}
           <FadeInSection delay={0.2}>
-            <div className="mt-8 grid sm:grid-cols-2 gap-6">
-              <div className="bg-white dark:bg-zinc-800 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 min-w-0">
-                <h4 className="font-semibold mb-4 flex items-center gap-2">
+            <div className="mt-8 space-y-6">
+              <div className="min-w-0 rounded-xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+                <h4 className="mb-4 flex items-center gap-2 font-semibold">
                   <Cpu className="h-5 w-5 text-primary" />
                   System Requirements
                 </h4>
-                <ul className="space-y-2 text-sm text-muted-foreground">
-                  <li>• Ubuntu 22.04+ (or equivalent)</li>
-                  <li>• Python 3.9 or newer</li>
-                  <li>• 4GB RAM (8GB for large models)</li>
-                  <li>• Microphone</li>
-                  <li>• X11 or Wayland display server</li>
+                <ul className="grid gap-2 text-sm text-muted-foreground sm:grid-cols-2">
+                  <li>
+                    • Ubuntu, Debian, Fedora, Arch, openSUSE, or equivalent
+                  </li>
+                  <li>• Python 3.9+ with GTK 3/PyGObject dependencies</li>
+                  <li>• 4GB RAM minimum; 8GB+ recommended for larger models</li>
+                  <li>• Microphone plus X11 or Wayland desktop session</li>
+                  <li>• ~200MB disk for the default whisper.cpp setup</li>
+                  <li>
+                    • Optional Vulkan GPU for AMD, Intel, or NVIDIA acceleration
+                  </li>
                 </ul>
               </div>
-              <div className="bg-white dark:bg-zinc-800 p-6 rounded-xl border border-zinc-200 dark:border-zinc-700 min-w-0">
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="bg-red-500/10 p-2 rounded-lg">
+              <div className="min-w-0 rounded-xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="rounded-lg bg-red-500/10 p-2">
                     <Terminal className="h-5 w-5 text-red-500" />
                   </div>
                   <div className="flex-1">
@@ -897,8 +1062,8 @@ export default function HomePage() {
                     </p>
                   </div>
                 </div>
-                <div className="bg-zinc-950/80 rounded-xl border border-zinc-800 overflow-hidden">
-                  <div className="flex items-center justify-between px-4 py-2.5 border-b border-zinc-800 bg-zinc-900/50">
+                <div className="overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950/80">
+                  <div className="flex items-center justify-between border-b border-zinc-800 bg-zinc-900/50 px-4 py-2.5">
                     <div className="flex items-center gap-2">
                       <div className="h-2.5 w-2.5 rounded-full bg-red-500/70" />
                       <div className="h-2.5 w-2.5 rounded-full bg-yellow-500/70" />
@@ -907,8 +1072,9 @@ export default function HomePage() {
                     <CopyButton text={uninstallCommand} />
                   </div>
                   <div className="p-4 sm:p-5">
-                    <pre className="font-mono text-sm sm:text-base text-green-400 text-left whitespace-pre-wrap break-all">
-                      <span className="text-zinc-500 select-none">$ </span>{uninstallCommand}
+                    <pre className="overflow-x-auto whitespace-pre-wrap text-left font-mono text-sm text-green-400 sm:text-base">
+                      <span className="select-none text-zinc-500">$ </span>
+                      {uninstallDisplayCommand}
                     </pre>
                   </div>
                 </div>
@@ -919,16 +1085,17 @@ export default function HomePage() {
       </section>
 
       {/* SEO Guide Hub Section */}
-      <section id="guides" className="py-16 sm:py-24 px-4 sm:px-6">
-        <div className="max-w-6xl mx-auto">
+      <section id="guides" className="px-4 py-16 sm:px-6 sm:py-24">
+        <div className="mx-auto max-w-6xl">
           <FadeInSection>
-            <div className="text-center mb-12">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
+            <div className="mb-12 text-center">
+              <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">
                 Linux Voice Dictation Guides by Distribution
               </h2>
-              <p className="text-lg text-muted-foreground max-w-3xl mx-auto">
-                Follow distro-specific setup instructions for Ubuntu, Fedora, and Arch Linux.
-                These pages are written for real desktop workflows and include post-install checks.
+              <p className="mx-auto max-w-3xl text-lg text-muted-foreground">
+                Follow distro-specific setup instructions for Ubuntu, Fedora,
+                and Arch Linux. These pages are written for real desktop
+                workflows and include post-install checks.
               </p>
             </div>
           </FadeInSection>
@@ -960,7 +1127,9 @@ export default function HomePage() {
                 className="group rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm transition-all hover:-translate-y-1 hover:shadow-lg dark:border-zinc-700 dark:bg-zinc-800"
               >
                 <h3 className="mb-3 text-xl font-semibold">{guide.title}</h3>
-                <p className="mb-4 text-sm text-muted-foreground">{guide.description}</p>
+                <p className="mb-4 text-sm text-muted-foreground">
+                  {guide.description}
+                </p>
                 <span className="inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
                   Read guide <ChevronRight className="h-4 w-4" />
                 </span>
@@ -969,16 +1138,20 @@ export default function HomePage() {
           </div>
 
           <FadeInSection delay={0.15}>
-            <div className="mt-8 rounded-2xl border border-primary/20 bg-primary/5 p-6 sm:p-8">
-              <h3 className="text-2xl font-bold mb-3">Need help choosing an engine?</h3>
-              <p className="text-muted-foreground mb-4">
-                Compare whisper.cpp, Whisper, and VOSK for speed, hardware support, and model size.
+            <div className="border-primary/20 bg-primary/5 mt-8 rounded-2xl border p-6 sm:p-8">
+              <h3 className="mb-3 text-2xl font-bold">
+                Need help choosing an engine?
+              </h3>
+              <p className="mb-4 text-muted-foreground">
+                Compare whisper.cpp, Whisper, and VOSK for speed, hardware
+                support, and model size.
               </p>
               <Link
                 href="/compare/"
                 className="inline-flex items-center gap-2 text-sm font-semibold text-primary hover:underline"
               >
-                View speech engine comparison <ChevronRight className="h-4 w-4" />
+                View speech engine comparison{" "}
+                <ChevronRight className="h-4 w-4" />
               </Link>
             </div>
           </FadeInSection>
@@ -986,32 +1159,35 @@ export default function HomePage() {
       </section>
 
       {/* Speech Engines Section */}
-      <section className="py-16 sm:py-24 px-4 sm:px-6 bg-zinc-50 dark:bg-zinc-900/50">
-        <div className="max-w-7xl mx-auto">
+      <section className="bg-zinc-50 px-4 py-16 dark:bg-zinc-900/50 sm:px-6 sm:py-24">
+        <div className="mx-auto max-w-7xl">
           <FadeInSection>
-            <div className="text-center mb-12">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
+            <div className="mb-12 text-center">
+              <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">
                 Choose Your Linux Speech Recognition Engine
               </h2>
-              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-                Vocalinux supports multiple speech recognition engines. Pick the one that suits your needs.
+              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
+                Vocalinux supports local and remote speech recognition engines.
+                Pick the one that suits your hardware, privacy boundary, and
+                latency needs.
               </p>
             </div>
           </FadeInSection>
 
-          <div className="grid md:grid-cols-3 gap-8">
+          <div className="grid gap-8 md:grid-cols-2 xl:grid-cols-4">
             <FadeInSection delay={0.1}>
-              <div className="bg-white dark:bg-zinc-800 rounded-xl p-6 border border-zinc-200 dark:border-zinc-700 h-full">
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="bg-purple-500/10 p-3 rounded-lg">
+              <div className="h-full rounded-xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="rounded-lg bg-purple-500/10 p-3">
                     <Sparkles className="h-6 w-6 text-purple-500" />
                   </div>
                   <h3 className="text-xl font-bold">Whisper (OpenAI)</h3>
                 </div>
-                <p className="text-muted-foreground mb-6">
-                  OpenAI&apos;s original PyTorch-based Whisper model. NVIDIA GPU only.
+                <p className="mb-6 text-muted-foreground">
+                  OpenAI&apos;s original PyTorch-based Whisper model. NVIDIA GPU
+                  only.
                 </p>
-                <ul className="space-y-2 mb-6">
+                <ul className="mb-6 space-y-2">
                   {[
                     "PyTorch-based implementation",
                     "NVIDIA GPU support (CUDA)",
@@ -1031,22 +1207,18 @@ export default function HomePage() {
             </FadeInSection>
 
             <FadeInSection delay={0.2}>
-              <div className="bg-white dark:bg-zinc-800 rounded-xl p-6 border-2 border-primary h-full relative overflow-hidden">
-                <div className="absolute top-4 right-4">
-                  <span className="bg-primary text-primary-foreground dark:text-black text-xs font-semibold px-2 py-1 rounded">
-                    DEFAULT
-                  </span>
-                </div>
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="bg-primary/10 p-3 rounded-lg">
+              <div className="flex h-full flex-col overflow-hidden rounded-xl border-2 border-primary bg-white p-6 dark:bg-zinc-800">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="bg-primary/10 rounded-lg p-3">
                     <Zap className="h-6 w-6 text-primary" />
                   </div>
                   <h3 className="text-xl font-bold">whisper.cpp</h3>
                 </div>
-                <p className="text-muted-foreground mb-6">
-                  High-performance C++ port of Whisper with Vulkan GPU support. Our new default!
+                <p className="mb-6 text-muted-foreground">
+                  High-performance C++ port of Whisper with Vulkan GPU support.
+                  Our new default!
                 </p>
-                <ul className="space-y-2 mb-6">
+                <ul className="mb-6 space-y-2">
                   {[
                     "10x faster installation (~1-2 min)",
                     "Universal GPU support (AMD/Intel/NVIDIA)",
@@ -1060,28 +1232,30 @@ export default function HomePage() {
                   ))}
                 </ul>
                 <div className="text-sm text-muted-foreground">
-                  <strong>Model sizes:</strong> Tiny (74MB) • Base (141MB) • Small (465MB) • Medium (1.5GB) • Large (3.0GB)
+                  <strong>Model sizes:</strong> Tiny (74MB) • Base (141MB) •
+                  Small (465MB) • Medium (1.5GB) • Large (3.0GB)
                 </div>
-                <div className="mt-4">
-                  <Link href="/gpu-acceleration/" className="text-sm font-medium text-primary hover:underline flex items-center gap-1">
-                    GPU acceleration <ChevronRight className="h-3.5 w-3.5" />
-                  </Link>
+                <div className="mt-auto flex justify-center pt-6">
+                  <span className="rounded-full bg-primary px-3 py-1 text-xs font-semibold text-primary-foreground dark:text-black">
+                    Default engine
+                  </span>
                 </div>
               </div>
             </FadeInSection>
 
             <FadeInSection delay={0.3}>
-              <div className="bg-white dark:bg-zinc-800 rounded-xl p-6 border border-zinc-200 dark:border-zinc-700 h-full">
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="bg-blue-500/10 p-3 rounded-lg">
+              <div className="h-full rounded-xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="rounded-lg bg-blue-500/10 p-3">
                     <Cpu className="h-6 w-6 text-blue-500" />
                   </div>
                   <h3 className="text-xl font-bold">VOSK</h3>
                 </div>
-                <p className="text-muted-foreground mb-6">
-                  Lightweight, fast speech recognition engine perfect for lower-powered systems.
+                <p className="mb-6 text-muted-foreground">
+                  Lightweight, fast speech recognition engine perfect for
+                  lower-powered systems.
                 </p>
-                <ul className="space-y-2 mb-6">
+                <ul className="mb-6 space-y-2">
                   {[
                     "Very lightweight and fast",
                     "Low memory footprint",
@@ -1099,11 +1273,46 @@ export default function HomePage() {
                 </div>
               </div>
             </FadeInSection>
+
+            <FadeInSection delay={0.4}>
+              <div className="h-full rounded-xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="rounded-lg bg-green-500/10 p-3">
+                    <Server className="h-6 w-6 text-green-500" />
+                  </div>
+                  <h3 className="text-xl font-bold">Remote API</h3>
+                </div>
+                <p className="mb-6 text-muted-foreground">
+                  Send utterances to a trusted OpenAI-compatible or whisper.cpp
+                  server when another machine should handle transcription.
+                </p>
+                <ul className="mb-6 space-y-2">
+                  {[
+                    "OpenAI-compatible endpoint support",
+                    "whisper.cpp server support",
+                    "Optional bearer token authentication",
+                    "Local VAD and text injection remain active",
+                  ].map((item, i) => (
+                    <li key={i} className="flex items-center gap-2 text-sm">
+                      <CheckCircle2 className="h-4 w-4 text-green-500" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+                <div className="text-sm text-muted-foreground">
+                  <strong>Best for:</strong> powerful LAN servers and shared
+                  Whisper backends
+                </div>
+              </div>
+            </FadeInSection>
           </div>
 
-          <FadeInSection delay={0.4}>
-            <div className="text-center mt-10">
-              <Link href="/compare/" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline">
+          <FadeInSection delay={0.5}>
+            <div className="mt-10 text-center">
+              <Link
+                href="/compare/"
+                className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+              >
                 Compare all engines <ChevronRight className="h-4 w-4" />
               </Link>
             </div>
@@ -1112,105 +1321,237 @@ export default function HomePage() {
       </section>
 
       {/* FAQ Section */}
-      <section id="faq" className="py-16 sm:py-24 px-4 sm:px-6">
-        <div className="max-w-3xl mx-auto">
+      <section id="faq" className="px-4 py-16 sm:px-6 sm:py-24">
+        <div className="mx-auto max-w-3xl">
           <FadeInSection>
-            <div className="text-center mb-12">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
+            <div className="mb-12 text-center">
+              <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">
                 Frequently Asked Questions
               </h2>
             </div>
           </FadeInSection>
 
           <div className="space-y-4">
-            {([
-              {
-                question: "Is Vocalinux really 100% offline?",
-                answer: (
-                  <>
-                    Yes! All speech recognition processing happens locally on your machine. Your voice data never leaves your computer. No internet connection is required after installation (models are downloaded during setup).{" "}
-                    <Link href="/offline/" className="text-primary hover:underline">Read more about offline voice dictation</Link>.
-                  </>
-                ),
-              },
-              {
-                question: "Which Linux distributions are supported?",
-                answer: (
-                  <>
-                    Vocalinux works on most modern Linux distributions including Ubuntu 22.04+, Debian 11+, Fedora 39+, Arch Linux, and openSUSE Tumbleweed. Experimental support is available for Gentoo, Alpine, Void, Solus, and more. It supports both X11 and Wayland display servers.{" "}
-                    <Link href="/install/" className="text-primary hover:underline">See installation guides</Link>.
-                  </>
-                ),
-              },
-              {
-                question: "How do I switch between speech engines?",
-                answer: (
-                  <>
-                    You can switch engines in the Settings dialog or via the command line. The three options are whisper.cpp (default, recommended for speed and GPU support), OpenAI Whisper (PyTorch-based, NVIDIA only), and VOSK (lightweight, CPU only). From the CLI: use &quot;--engine whisper_cpp&quot;, &quot;--engine whisper&quot;, or &quot;--engine vosk&quot;.{" "}
-                    <Link href="/compare/" className="text-primary hover:underline">Compare all engines</Link>.
-                  </>
-                ),
-              },
-              {
-                question: "What happens when I close my laptop lid?",
-                answer:
-                  "Vocalinux v0.10.1+ automatically recovers speech recognition and keyboard shortcuts after system suspend/resume. No manual restart needed.",
-              },
-              {
-                question: "Does Vocalinux preserve my keyboard layout?",
-                answer:
-                  "Yes! v0.10.1+ preserves your XKB keyboard layout when activating IBus, so you won't unexpectedly switch to US layout mid-dictation.",
-              },
-              {
-                question: "What are the system requirements?",
-                answer: (
-                  <>
-                    Minimum: 4GB RAM, Python 3.9+, ~200MB disk space. 8GB+ RAM recommended for larger Whisper models. The default whisper.cpp tiny model (~74MB) works great on modest hardware. GPU acceleration is available via Vulkan for AMD, Intel, and NVIDIA GPUs.{" "}
-                    <Link href="/install/" className="text-primary hover:underline">View full installation requirements</Link>.
-                  </>
-                ),
-              },
-              {
-                question: "Can I use it in languages other than English?",
-                answer: (
-                  <>
-                    Yes! whisper.cpp and OpenAI Whisper support 99+ languages with varying accuracy levels. VOSK includes models for 10 languages out of the box (English, Hindi, Spanish, French, German, Italian, Portuguese, Russian, Chinese, and more). Additional language models can be downloaded as needed.{" "}
-                    <Link href="/languages/" className="text-primary hover:underline">See supported languages</Link>.
-                  </>
-                ),
-              },
-              {
-                question: "How do I customize the activation shortcut?",
-                answer: (
-                  <>
-                    The default is toggle mode with double-tap Ctrl. You can switch to push-to-talk in Settings, and choose between Left Ctrl, Right Ctrl, Alt, Shift, and other modifier keys. Configuration is also available by editing ~/.config/vocalinux/config.json.{" "}
-                    <Link href="/shortcuts/" className="text-primary hover:underline">View shortcut options</Link>.
-                  </>
-                ),
-              },
-              {
-                question: "Can I disable voice commands?",
-                answer: (
-                  <>
-                    Yes. Voice commands can be toggled on or off in the Settings dialog. By default, commands are automatically enabled for VOSK and disabled for Whisper/whisper.cpp, but you can override this at any time.{" "}
-                    <Link href="/shortcuts/" className="text-primary hover:underline">Learn about voice commands</Link>.
-                  </>
-                ),
-              },
-              {
-                question: "Is Vocalinux free?",
-                answer: (
-                  <>
-                    Yes, Vocalinux is completely free and open-source, licensed under GPL-3.0. No premium tiers, no subscriptions, no tracking. Just free software.{" "}
-                    <Link href="/open-source/" className="text-primary hover:underline">Learn about the project</Link>.
-                  </>
-                ),
-              },
-            ] as { question: string; answer: React.ReactNode }[]).map((item, i) => (
+            {(
+              [
+                {
+                  question: "Is Vocalinux really 100% offline?",
+                  answer: (
+                    <>
+                      Yes for local engines: whisper.cpp, Whisper, and VOSK
+                      process speech on your machine. Vocalinux also includes an
+                      optional Remote API engine for trusted servers you
+                      configure yourself.{" "}
+                      <Link
+                        href="/offline/"
+                        className="text-primary hover:underline"
+                      >
+                        Read more about offline voice dictation
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+                {
+                  question: "Does Vocalinux collect usage telemetry?",
+                  answer:
+                    "No. The installed app does not send usage telemetry, analytics events, or background usage pings. Even the project maintainer cannot see how many people have installed or actively use Vocalinux, and you can verify this by watching for external network calls after installation.",
+                },
+                {
+                  question: "Which Linux distributions are supported?",
+                  answer: (
+                    <>
+                      Vocalinux works on most modern Linux distributions
+                      including Ubuntu 22.04+, Debian 11+, Fedora 39+, Arch
+                      Linux, and openSUSE Tumbleweed. Experimental support is
+                      available for Gentoo, Alpine, Void, Solus, and more. It
+                      supports both X11 and Wayland display servers.{" "}
+                      <Link
+                        href="/install/"
+                        className="text-primary hover:underline"
+                      >
+                        See installation guides
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+                {
+                  question: "How do I switch between speech engines?",
+                  answer: (
+                    <>
+                      You can switch engines in the Settings dialog or via the
+                      command line. The options are whisper.cpp (default),
+                      OpenAI Whisper, VOSK, and Remote API. From the CLI, use
+                      &quot;--engine whisper_cpp&quot;, &quot;--engine
+                      whisper&quot;, &quot;--engine vosk&quot;, or
+                      &quot;--engine remote_api&quot;.{" "}
+                      <Link
+                        href="/compare/"
+                        className="text-primary hover:underline"
+                      >
+                        Compare all engines
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+                {
+                  question: "Can Vocalinux use a remote transcription server?",
+                  answer: (
+                    <>
+                      Yes. v0.12.0 adds Remote API recognition for
+                      OpenAI-compatible Whisper servers and the whisper.cpp
+                      server endpoint. Configure it from Settings → Advanced →
+                      Remote Server.{" "}
+                      <Link
+                        href="/remote-api/"
+                        className="text-primary hover:underline"
+                      >
+                        Read the Remote API guide
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+                {
+                  question: "What is Silero VAD?",
+                  answer: (
+                    <>
+                      Silero VAD is neural voice activity detection. Vocalinux
+                      uses it when ONNX Runtime support is available to drop
+                      silence-only buffers before recognition, with
+                      amplitude-based VAD as a fallback.{" "}
+                      <Link
+                        href="/voice-activity-detection/"
+                        className="text-primary hover:underline"
+                      >
+                        Learn about VAD
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+                {
+                  question: "What happens when I close my laptop lid?",
+                  answer: (
+                    <>
+                      Vocalinux v0.10.1+ automatically recovers speech
+                      recognition and keyboard shortcuts after system
+                      suspend/resume. No manual restart needed.{" "}
+                      <Link
+                        href="/desktop-reliability/"
+                        className="text-primary hover:underline"
+                      >
+                        See reliability improvements
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+                {
+                  question: "Does Vocalinux preserve my keyboard layout?",
+                  answer:
+                    "Yes! v0.10.1+ preserves your XKB keyboard layout when activating IBus, so you won't unexpectedly switch to US layout mid-dictation.",
+                },
+                {
+                  question: "What are the system requirements?",
+                  answer: (
+                    <>
+                      Minimum: 4GB RAM, Python 3.9+, ~200MB disk space. 8GB+ RAM
+                      recommended for larger Whisper models. The default
+                      whisper.cpp tiny model (~74MB) works great on modest
+                      hardware. GPU acceleration is available via Vulkan for
+                      AMD, Intel, and NVIDIA GPUs.{" "}
+                      <Link
+                        href="/install/"
+                        className="text-primary hover:underline"
+                      >
+                        View full installation requirements
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+                {
+                  question: "Can I use it in languages other than English?",
+                  answer: (
+                    <>
+                      Yes! whisper.cpp and OpenAI Whisper support 99+ languages
+                      with varying accuracy levels. VOSK includes models for 10
+                      languages out of the box (English, Hindi, Spanish, French,
+                      German, Italian, Portuguese, Russian, Chinese, and more).
+                      Additional language models can be downloaded as needed.{" "}
+                      <Link
+                        href="/languages/"
+                        className="text-primary hover:underline"
+                      >
+                        See supported languages
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+                {
+                  question: "How do I customize the activation shortcut?",
+                  answer: (
+                    <>
+                      The default is toggle mode with double-tap Ctrl. You can
+                      switch to push-to-talk in Settings, and choose between
+                      Left Ctrl, Right Ctrl, Alt, Shift, and other modifier
+                      keys. Configuration is also available by editing
+                      ~/.config/vocalinux/config.json.{" "}
+                      <Link
+                        href="/shortcuts/"
+                        className="text-primary hover:underline"
+                      >
+                        View shortcut options
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+                {
+                  question: "Can I disable voice commands?",
+                  answer: (
+                    <>
+                      Yes. Voice commands can be toggled on or off in the
+                      Settings dialog. By default, commands are automatically
+                      enabled for VOSK and disabled for Whisper/whisper.cpp, but
+                      you can override this at any time.{" "}
+                      <Link
+                        href="/shortcuts/"
+                        className="text-primary hover:underline"
+                      >
+                        Learn about voice commands
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+                {
+                  question: "Is Vocalinux free?",
+                  answer: (
+                    <>
+                      Yes, Vocalinux is completely free and open-source,
+                      licensed under GPL-3.0. No premium tiers, no
+                      subscriptions, no tracking. Just free software.{" "}
+                      <Link
+                        href="/open-source/"
+                        className="text-primary hover:underline"
+                      >
+                        Learn about the project
+                      </Link>
+                      .
+                    </>
+                  ),
+                },
+              ] as { question: string; answer: React.ReactNode }[]
+            ).map((item, i) => (
               <FadeInSection key={i} delay={i * 0.05}>
-                <details className="group bg-white dark:bg-zinc-800 rounded-xl border border-zinc-200 dark:border-zinc-700">
-                  <summary className="flex items-center justify-between p-6 cursor-pointer list-none">
-                    <h3 className="font-semibold pr-4">{item.question}</h3>
+                <details className="group rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-800">
+                  <summary className="flex cursor-pointer list-none items-center justify-between p-6">
+                    <h3 className="pr-4 font-semibold">{item.question}</h3>
                     <ChevronRight className="h-5 w-5 text-muted-foreground transition-transform group-open:rotate-90" />
                   </summary>
                   <div className="px-6 pb-6 text-muted-foreground">
@@ -1224,48 +1565,59 @@ export default function HomePage() {
       </section>
 
       {/* The Voca Family - Ecosystem Section */}
-      <section id="ecosystem" className="py-16 sm:py-24 px-4 sm:px-6 bg-zinc-50 dark:bg-zinc-900/50">
-        <div className="max-w-7xl mx-auto">
+      <section
+        id="ecosystem"
+        className="bg-zinc-50 px-4 py-16 dark:bg-zinc-900/50 sm:px-6 sm:py-24"
+      >
+        <div className="mx-auto max-w-7xl">
           <FadeInSection>
-            <div className="text-center mb-12">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
+            <div className="mb-12 text-center">
+              <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">
                 The Voca Family
               </h2>
-              <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
                 Voice dictation, done right, on every platform.
               </p>
             </div>
           </FadeInSection>
 
-          <div className="grid md:grid-cols-3 gap-8">
+          <div className="grid gap-8 md:grid-cols-3">
             {/* VocaMac Card */}
             <FadeInSection delay={0.1}>
-              <div className="bg-white dark:bg-zinc-800 rounded-xl p-6 border border-zinc-200 dark:border-zinc-700 h-full relative">
-                <div className="absolute top-4 right-4">
-                  <span className="bg-primary text-primary-foreground dark:text-black text-xs font-semibold px-2 py-1 rounded">
+              <div className="group relative h-full overflow-hidden rounded-xl border border-zinc-300/80 bg-gradient-to-br from-zinc-50 via-white to-zinc-200 p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-zinc-400 hover:shadow-xl hover:shadow-zinc-500/10 dark:border-zinc-600 dark:from-zinc-800 dark:via-zinc-800 dark:to-zinc-700/70">
+                <div className="pointer-events-none absolute inset-x-6 top-0 h-px bg-gradient-to-r from-transparent via-white/70 to-transparent opacity-70 dark:via-white/20" />
+                <div className="absolute right-4 top-4">
+                  <span className="rounded bg-primary px-2 py-1 text-xs font-semibold text-primary-foreground dark:text-black">
                     Beta
                   </span>
                 </div>
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="bg-zinc-100 dark:bg-zinc-700 p-3 rounded-lg flex items-center justify-center">
-                    <img src="https://cdn.simpleicons.org/apple/000000" alt="macOS" width={24} height={24} className="dark:invert" />
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="flex items-center justify-center rounded-lg bg-gradient-to-br from-zinc-100 to-zinc-300 p-3 shadow-inner transition-transform duration-300 group-hover:scale-105 dark:from-zinc-700 dark:to-zinc-500">
+                    <img
+                      src="https://cdn.simpleicons.org/apple/000000"
+                      alt="macOS"
+                      width={24}
+                      height={24}
+                      className="dark:invert"
+                    />
                   </div>
                   <h3 className="text-xl font-bold">VocaMac</h3>
                 </div>
-                <p className="text-muted-foreground mb-4">
-                  Native macOS menu bar app. 100% offline voice-to-text powered by WhisperKit and CoreML with Apple Silicon acceleration.
+                <p className="mb-4 text-muted-foreground">
+                  Native macOS menu bar app. 100% offline voice-to-text powered
+                  by WhisperKit and CoreML with Apple Silicon acceleration.
                 </p>
-                <div className="flex flex-wrap gap-2 mb-6">
-                  <span className="bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded-full">
+                <div className="mb-6 flex flex-wrap gap-2">
+                  <span className="bg-primary/10 rounded-full px-2 py-1 text-xs font-medium text-primary">
                     WhisperKit
                   </span>
-                  <span className="bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded-full">
+                  <span className="bg-primary/10 rounded-full px-2 py-1 text-xs font-medium text-primary">
                     CoreML
                   </span>
-                  <span className="bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded-full">
+                  <span className="bg-primary/10 rounded-full px-2 py-1 text-xs font-medium text-primary">
                     Apple Silicon
                   </span>
-                  <span className="bg-zinc-100 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-xs font-medium px-2 py-1 rounded-full">
+                  <span className="rounded-full bg-zinc-100 px-2 py-1 text-xs font-medium text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300">
                     AGPL-3.0
                   </span>
                 </div>
@@ -1274,7 +1626,7 @@ export default function HomePage() {
                     href="https://vocamac.com"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 bg-primary text-primary-foreground dark:text-black hover:bg-primary/90 px-4 py-2 rounded-lg text-sm font-medium transition-all"
+                    className="hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all dark:text-black"
                   >
                     <Globe className="h-4 w-4" />
                     Website
@@ -1283,7 +1635,7 @@ export default function HomePage() {
                     href="https://github.com/jatinkrmalik/vocamac"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 bg-zinc-100 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-600 px-4 py-2 rounded-lg text-sm font-medium transition-all"
+                    className="inline-flex items-center gap-1.5 rounded-lg bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-700 transition-all hover:bg-zinc-200 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
                   >
                     <Github className="h-4 w-4" />
                     GitHub
@@ -1294,39 +1646,47 @@ export default function HomePage() {
 
             {/* VocaLinux Card (center) */}
             <FadeInSection delay={0.2}>
-              <div className="bg-white dark:bg-zinc-800 rounded-xl p-6 border-2 border-primary h-full relative">
-                <div className="absolute top-4 right-4">
-                  <span className="bg-primary text-primary-foreground dark:text-black text-xs font-semibold px-2 py-1 rounded">
+              <div className="from-primary/10 shadow-primary/10 hover:shadow-primary/20 group relative h-full overflow-hidden rounded-xl border-2 border-primary bg-gradient-to-br via-white to-emerald-500/10 p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl dark:via-zinc-800 dark:to-emerald-500/15">
+                <div className="via-primary/70 pointer-events-none absolute inset-x-6 top-0 h-px bg-gradient-to-r from-transparent to-transparent" />
+                <div className="absolute right-4 top-4">
+                  <span className="rounded bg-primary px-2 py-1 text-xs font-semibold text-primary-foreground dark:text-black">
                     Beta
                   </span>
                 </div>
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="bg-zinc-100 dark:bg-zinc-700 p-3 rounded-lg flex items-center justify-center">
-                    <img src="https://cdn.simpleicons.org/linux/000000" alt="Linux" width={24} height={24} className="dark:invert" />
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="from-primary/15 dark:from-primary/20 flex items-center justify-center rounded-lg bg-gradient-to-br to-emerald-500/20 p-3 shadow-inner transition-transform duration-300 group-hover:scale-105 dark:to-emerald-500/20">
+                    <img
+                      src="https://cdn.simpleicons.org/linux/000000"
+                      alt="Linux"
+                      width={24}
+                      height={24}
+                      className="dark:invert"
+                    />
                   </div>
                   <h3 className="text-xl font-bold">VocaLinux</h3>
                 </div>
-                <p className="text-muted-foreground mb-4">
-                  Voice dictation for Linux. System tray app with whisper.cpp, Vulkan GPU acceleration, and full offline support.
+                <p className="mb-4 text-muted-foreground">
+                  Voice dictation for Linux. System tray app with whisper.cpp,
+                  Vulkan GPU acceleration, and full offline support.
                 </p>
-                <div className="flex flex-wrap gap-2 mb-6">
-                  <span className="bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded-full">
+                <div className="mb-6 flex flex-wrap gap-2">
+                  <span className="bg-primary/10 rounded-full px-2 py-1 text-xs font-medium text-primary">
                     whisper.cpp
                   </span>
-                  <span className="bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded-full">
+                  <span className="bg-primary/10 rounded-full px-2 py-1 text-xs font-medium text-primary">
                     Vulkan GPU
                   </span>
-                  <span className="bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded-full">
+                  <span className="bg-primary/10 rounded-full px-2 py-1 text-xs font-medium text-primary">
                     GTK
                   </span>
-                  <span className="bg-zinc-100 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300 text-xs font-medium px-2 py-1 rounded-full">
+                  <span className="rounded-full bg-zinc-100 px-2 py-1 text-xs font-medium text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300">
                     GPL-3.0
                   </span>
                 </div>
                 <div className="flex gap-3">
                   <a
                     href="#install"
-                    className="inline-flex items-center gap-1.5 bg-primary text-primary-foreground dark:text-black hover:bg-primary/90 px-4 py-2 rounded-lg text-sm font-medium transition-all"
+                    className="hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all dark:text-black"
                   >
                     <Download className="h-4 w-4" />
                     Install
@@ -1335,7 +1695,7 @@ export default function HomePage() {
                     href="https://github.com/jatinkrmalik/vocalinux"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 bg-zinc-100 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-600 px-4 py-2 rounded-lg text-sm font-medium transition-all"
+                    className="inline-flex items-center gap-1.5 rounded-lg bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-700 transition-all hover:bg-zinc-200 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
                   >
                     <Github className="h-4 w-4" />
                     GitHub
@@ -1346,29 +1706,41 @@ export default function HomePage() {
 
             {/* VocaWin Card */}
             <FadeInSection delay={0.3}>
-              <div className="bg-white dark:bg-zinc-800 rounded-xl p-6 border border-zinc-200 dark:border-zinc-700 h-full relative">
-                <div className="absolute top-4 right-4">
-                  <span className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs font-semibold px-2 py-1 rounded">
+              <div className="group relative h-full overflow-hidden rounded-xl border border-sky-300/60 bg-gradient-to-br from-sky-50 via-white to-blue-100 p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-sky-400 hover:shadow-xl hover:shadow-sky-500/10 dark:border-sky-900/80 dark:from-zinc-800 dark:via-zinc-800 dark:to-blue-950/50">
+                <div className="pointer-events-none absolute inset-x-6 top-0 h-px bg-gradient-to-r from-transparent via-sky-300/70 to-transparent dark:via-sky-500/40" />
+                <div className="absolute right-4 top-4">
+                  <span className="rounded bg-amber-100 px-2 py-1 text-xs font-semibold text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                     Coming Soon
                   </span>
                 </div>
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="bg-zinc-100 dark:bg-zinc-700 p-3 rounded-lg flex items-center justify-center">
-                    <svg viewBox="0 0 88 88" width={24} height={24} aria-label="Windows"><path d="M0 12.402l35.687-4.86.016 34.423-35.67.203zm35.67 33.529.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314.0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z" fill="#0078D4"/></svg>
+                <div className="mb-4 flex items-center gap-3">
+                  <div className="flex items-center justify-center rounded-lg bg-gradient-to-br from-sky-100 to-blue-200 p-3 shadow-inner transition-transform duration-300 group-hover:scale-105 dark:from-blue-950 dark:to-sky-900">
+                    <svg
+                      viewBox="0 0 88 88"
+                      width={24}
+                      height={24}
+                      aria-label="Windows"
+                    >
+                      <path
+                        d="M0 12.402l35.687-4.86.016 34.423-35.67.203zm35.67 33.529.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314.0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z"
+                        fill="#0078D4"
+                      />
+                    </svg>
                   </div>
                   <h3 className="text-xl font-bold">VocaWin</h3>
                 </div>
-                <p className="text-muted-foreground mb-4">
-                  Voice dictation for Windows. Native system tray app with offline-first architecture. Currently in planning.
+                <p className="mb-4 text-muted-foreground">
+                  Voice dictation for Windows. Native system tray app with
+                  offline-first architecture. Currently in planning.
                 </p>
-                <div className="flex flex-wrap gap-2 mb-6">
-                  <span className="bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded-full">
+                <div className="mb-6 flex flex-wrap gap-2">
+                  <span className="bg-primary/10 rounded-full px-2 py-1 text-xs font-medium text-primary">
                     whisper.cpp
                   </span>
-                  <span className="bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded-full">
+                  <span className="bg-primary/10 rounded-full px-2 py-1 text-xs font-medium text-primary">
                     Native Tray
                   </span>
-                  <span className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-xs font-medium px-2 py-1 rounded-full">
+                  <span className="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
                     Planned
                   </span>
                 </div>
@@ -1377,7 +1749,7 @@ export default function HomePage() {
                     href="https://vocawin.com"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 bg-primary text-primary-foreground dark:text-black hover:bg-primary/90 px-4 py-2 rounded-lg text-sm font-medium transition-all"
+                    className="hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-all dark:text-black"
                   >
                     <Globe className="h-4 w-4" />
                     Website
@@ -1386,7 +1758,7 @@ export default function HomePage() {
                     href="https://github.com/jatinkrmalik/vocawin"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 bg-zinc-100 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-600 px-4 py-2 rounded-lg text-sm font-medium transition-all"
+                    className="inline-flex items-center gap-1.5 rounded-lg bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-700 transition-all hover:bg-zinc-200 dark:bg-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-600"
                   >
                     <Github className="h-4 w-4" />
                     GitHub
@@ -1399,20 +1771,21 @@ export default function HomePage() {
       </section>
 
       {/* CTA Section */}
-      <section className="py-16 sm:py-24 px-4 sm:px-6 bg-gradient-to-br from-primary/10 via-cyan-500/10 to-primary/10">
-        <div className="max-w-4xl mx-auto text-center">
+      <section className="from-primary/10 to-primary/10 bg-gradient-to-br via-cyan-500/10 px-4 py-16 sm:px-6 sm:py-24">
+        <div className="mx-auto max-w-4xl text-center">
           <FadeInSection>
-            <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-6">
+            <h2 className="mb-6 text-3xl font-bold sm:text-4xl md:text-5xl">
               Ready to Ditch Your Keyboard?
             </h2>
-            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Join the growing community of Linux users who have discovered the power of voice dictation.
-              It&apos;s free, it&apos;s private, and it just works.
+            <p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
+              Join the growing community of Linux users who have discovered the
+              power of voice dictation. It&apos;s free, it&apos;s private, and
+              it just works.
             </p>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+            <div className="flex flex-col justify-center gap-4 sm:flex-row">
               <a
                 href="#install"
-                className="inline-flex items-center justify-center gap-2 bg-primary text-white dark:text-zinc-900 hover:bg-primary/90 px-8 py-4 rounded-xl text-lg font-semibold transition-all hover:scale-105 shadow-lg shadow-primary/25"
+                className="hover:bg-primary/90 shadow-primary/25 inline-flex items-center justify-center gap-2 rounded-xl bg-primary px-8 py-4 text-lg font-semibold text-white shadow-lg transition-all hover:scale-105 dark:text-zinc-900"
               >
                 <Download className="h-5 w-5" />
                 Install Vocalinux
@@ -1421,7 +1794,7 @@ export default function HomePage() {
                 href="https://github.com/jatinkrmalik/vocalinux"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center justify-center gap-2 bg-zinc-900 text-white hover:bg-zinc-800 px-8 py-4 rounded-xl text-lg font-semibold transition-all"
+                className="inline-flex items-center justify-center gap-2 rounded-xl bg-zinc-900 px-8 py-4 text-lg font-semibold text-white transition-all hover:bg-zinc-800"
               >
                 <Star className="h-5 w-5" />
                 Star on GitHub
@@ -1432,23 +1805,24 @@ export default function HomePage() {
       </section>
 
       {/* Footer */}
-      <footer className="py-12 px-4 sm:px-6 bg-zinc-900 text-white">
-        <div className="max-w-7xl mx-auto">
-          <div className="grid grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
-            <div className="col-span-2 lg:col-span-1 mb-4 lg:mb-0">
-              <Link href="/" className="flex items-center gap-2 mb-4">
+      <footer className="bg-zinc-900 px-4 py-12 text-white sm:px-6">
+        <div className="mx-auto max-w-7xl">
+          <div className="mb-12 grid grid-cols-2 gap-8 md:grid-cols-3 lg:grid-cols-6">
+            <div className="col-span-2 mb-4 lg:col-span-1 lg:mb-0">
+              <Link href="/" className="mb-4 flex items-center gap-2">
                 <VocalinuxLogo width={32} height={32} className="h-8 w-8" />
                 <span className="text-xl font-bold">Vocalinux</span>
               </Link>
-              <p className="text-zinc-400 mb-4 text-sm max-w-xs">
-                Free, open-source voice dictation for Linux. 100% offline and privacy-focused.
+              <p className="mb-4 max-w-xs text-sm text-zinc-400">
+                Free, open-source voice dictation for Linux. 100% offline and
+                privacy-focused.
               </p>
               <div className="flex items-center gap-4">
                 <a
                   href="https://github.com/jatinkrmalik/vocalinux"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-zinc-400 hover:text-white transition-colors"
+                  className="text-zinc-400 transition-colors hover:text-white"
                   aria-label="GitHub"
                 >
                   <Github className="h-6 w-6" />
@@ -1457,61 +1831,250 @@ export default function HomePage() {
             </div>
 
             <div>
-              <h3 className="font-semibold mb-4 text-xs uppercase tracking-wider text-zinc-400">Get Started</h3>
+              <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-400">
+                Get Started
+              </h3>
               <ul className="space-y-2.5 text-sm">
-                <li><a href="#features" className="text-zinc-400 hover:text-white transition-colors">Features</a></li>
-                <li><Link href="/install/" className="text-zinc-400 hover:text-white transition-colors">Install Guide</Link></li>
-                <li><Link href="/changelog/" className="text-zinc-400 hover:text-white transition-colors">Changelog</Link></li>
-                <li><Link href="/use-cases/" className="text-zinc-400 hover:text-white transition-colors">Use Cases</Link></li>
-                <li><Link href="/autostart/" className="text-zinc-400 hover:text-white transition-colors">Autostart</Link></li>
+                <li>
+                  <a
+                    href="#features"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Features
+                  </a>
+                </li>
+                <li>
+                  <Link
+                    href="/install/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Install Guide
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/changelog/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Changelog
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/autostart/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Autostart
+                  </Link>
+                </li>
               </ul>
             </div>
 
             <div>
-              <h3 className="font-semibold mb-4 text-xs uppercase tracking-wider text-zinc-400">Learn</h3>
+              <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-400">
+                Recognition
+              </h3>
               <ul className="space-y-2.5 text-sm">
-                <li><Link href="/compare/" className="text-zinc-400 hover:text-white transition-colors">Engine Comparison</Link></li>
-                <li><Link href="/whisper-model-guide/" className="text-zinc-400 hover:text-white transition-colors">Whisper Models</Link></li>
-                <li><Link href="/vs-nerd-dictation/" className="text-zinc-400 hover:text-white transition-colors">vs Nerd Dictation</Link></li>
-                <li><Link href="/wayland/" className="text-zinc-400 hover:text-white transition-colors">Wayland Support</Link></li>
-                <li><Link href="/gpu-acceleration/" className="text-zinc-400 hover:text-white transition-colors">GPU Acceleration</Link></li>
+                <li>
+                  <Link
+                    href="/compare/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Engine Comparison
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/remote-api/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Remote API
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/whisper-model-guide/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Whisper Models
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/advanced-settings/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Advanced Settings
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/voice-activity-detection/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Silero VAD
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/vs-nerd-dictation/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    vs Nerd Dictation
+                  </Link>
+                </li>
               </ul>
             </div>
 
             <div>
-              <h3 className="font-semibold mb-4 text-xs uppercase tracking-wider text-zinc-400">Use Cases</h3>
+              <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-400">
+                Desktop
+              </h3>
               <ul className="space-y-2.5 text-sm">
-                <li><Link href="/for-developers/" className="text-zinc-400 hover:text-white transition-colors">For Developers</Link></li>
-                <li><Link href="/writers/" className="text-zinc-400 hover:text-white transition-colors">For Writers</Link></li>
-                <li><Link href="/voice-typing-vscode/" className="text-zinc-400 hover:text-white transition-colors">VS Code</Link></li>
-                <li><Link href="/gnome-kde/" className="text-zinc-400 hover:text-white transition-colors">GNOME vs KDE</Link></li>
-                <li><Link href="/rsi-prevention/" className="text-zinc-400 hover:text-white transition-colors">RSI Prevention</Link></li>
+                <li>
+                  <Link
+                    href="/wayland/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Wayland Support
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/gpu-acceleration/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    GPU Acceleration
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/desktop-reliability/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Desktop Reliability
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/shortcuts/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Voice Commands
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/offline/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    100% Offline
+                  </Link>
+                </li>
               </ul>
             </div>
 
             <div>
-              <h3 className="font-semibold mb-4 text-xs uppercase tracking-wider text-zinc-400">Support</h3>
+              <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-400">
+                Use Cases
+              </h3>
               <ul className="space-y-2.5 text-sm">
-                <li><Link href="/faq/" className="text-zinc-400 hover:text-white transition-colors">FAQ</Link></li>
-                <li><Link href="/troubleshooting/" className="text-zinc-400 hover:text-white transition-colors">Troubleshooting</Link></li>
-                <li><Link href="/shortcuts/" className="text-zinc-400 hover:text-white transition-colors">Voice Commands</Link></li>
-                <li><Link href="/alternatives/" className="text-zinc-400 hover:text-white transition-colors">Alternatives</Link></li>
-                <li><Link href="/privacy/" className="text-zinc-400 hover:text-white transition-colors">Privacy Policy</Link></li>
+                <li>
+                  <Link
+                    href="/for-developers/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    For Developers
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/writers/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    For Writers
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/voice-typing-vscode/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    VS Code
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/gnome-kde/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    GNOME vs KDE
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/rsi-prevention/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    RSI Prevention
+                  </Link>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <h3 className="mb-4 text-xs font-semibold uppercase tracking-wider text-zinc-400">
+                Support
+              </h3>
+              <ul className="space-y-2.5 text-sm">
+                <li>
+                  <Link
+                    href="/faq/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    FAQ
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/troubleshooting/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Troubleshooting
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/alternatives/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Alternatives
+                  </Link>
+                </li>
+                <li>
+                  <Link
+                    href="/privacy/"
+                    className="text-zinc-400 transition-colors hover:text-white"
+                  >
+                    Privacy Policy
+                  </Link>
+                </li>
               </ul>
             </div>
           </div>
 
-          <div className="pt-8 border-t border-zinc-800 flex flex-col sm:flex-row justify-between items-center gap-4">
-            <p className="text-zinc-400 text-sm">
-              © {new Date().getFullYear()} Vocalinux. Open-source under GPL-3.0 License.
+          <div className="flex flex-col items-center justify-between gap-4 border-t border-zinc-800 pt-8 sm:flex-row">
+            <p className="text-sm text-zinc-400">
+              © {new Date().getFullYear()} Vocalinux. Open-source under GPL-3.0
+              License.
             </p>
-            <p className="text-zinc-400 text-sm flex items-center gap-1">
+            <p className="flex items-center gap-1 text-sm text-zinc-400">
               Made with <Heart className="h-4 w-4 text-red-500" /> by{" "}
               <a
                 href="https://x.com/intent/user?screen_name=jatinkrmalik"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-zinc-400 hover:text-white transition-colors"
+                className="text-zinc-400 transition-colors hover:text-white"
               >
                 Jatin K Malik
               </a>
diff --git a/web/src/app/remote-api/page.tsx b/web/src/app/remote-api/page.tsx
new file mode 100644
index 0000000..41e095f
--- /dev/null
+++ b/web/src/app/remote-api/page.tsx
@@ -0,0 +1,280 @@
+import Link from "next/link";
+import { type Metadata } from "next";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  ChevronRight,
+  Globe,
+  Lock,
+  Network,
+  Server,
+  Settings,
+  Terminal,
+} from "lucide-react";
+import { SeoSubpageShell } from "@/components/seo-subpage-shell";
+import { absoluteUrl, buildPageMetadata } from "@/lib/seo";
+
+const protocolOptions = [
+  {
+    name: "OpenAI-compatible",
+    endpoint: "/v1/audio/transcriptions",
+    description:
+      "Use servers that expose the common Whisper transcription API shape, including Speaches, LocalAI, and other compatible backends.",
+  },
+  {
+    name: "whisper.cpp server",
+    endpoint: "/inference",
+    description:
+      "Point Vocalinux at the HTTP server bundled with whisper.cpp when you want a small LAN transcription appliance.",
+  },
+];
+
+const workflowSteps = [
+  "Vocalinux records microphone audio locally as 16 kHz mono PCM.",
+  "Voice activity detection decides when an utterance is ready.",
+  "The utterance is packaged as an in-memory WAV upload.",
+  "The configured server returns JSON with a text field.",
+  "Vocalinux injects the transcription into the focused Linux app.",
+];
+
+const setupSteps = [
+  {
+    title: "Run a trusted transcription server",
+    description:
+      "Start a whisper.cpp server or an OpenAI-compatible Whisper service on a machine your Linux desktop can reach.",
+  },
+  {
+    title: "Open Settings -> Advanced",
+    description:
+      "Remote API is a power-user engine. Enable advanced settings, then configure the Remote Server section.",
+  },
+  {
+    title: "Choose the endpoint format",
+    description:
+      "Select OpenAI-compatible or whisper.cpp so Vocalinux sends the multipart fields your server expects.",
+  },
+  {
+    title: "Test, then dictate",
+    description:
+      "Use the connection test as a reachability check, then start dictating with the same shortcut flow as local engines.",
+  },
+];
+
+export const metadata: Metadata = buildPageMetadata({
+  title: "Remote API Speech Recognition for Linux Dictation",
+  description:
+    "Configure Vocalinux Remote API speech recognition with OpenAI-compatible Whisper servers or whisper.cpp server endpoints for Linux voice dictation.",
+  path: "/remote-api",
+  keywords: [
+    "remote api speech recognition linux",
+    "openai compatible whisper linux dictation",
+    "whisper.cpp server vocalinux",
+    "self hosted transcription linux",
+  ],
+});
+
+export default function RemoteApiPage() {
+  const articleJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "TechArticle",
+    headline: "Remote API Speech Recognition for Linux Dictation",
+    description:
+      "How Vocalinux connects Linux voice dictation to OpenAI-compatible and whisper.cpp remote transcription servers.",
+    dateModified: "2026-06-11",
+    author: {
+      "@type": "Person",
+      name: "Jatin K Malik",
+      url: "https://github.com/jatinkrmalik",
+    },
+    publisher: {
+      "@type": "Organization",
+      name: "Vocalinux",
+      logo: {
+        "@type": "ImageObject",
+        url: absoluteUrl("/vocalinux.png"),
+      },
+    },
+    mainEntityOfPage: absoluteUrl("/remote-api"),
+  };
+
+  return (
+    <SeoSubpageShell>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }}
+      />
+
+      <section>
+        <p className="border-primary/30 bg-primary/10 mb-4 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium text-primary">
+          <Server className="h-4 w-4" />
+          v0.12.0 Remote Engine
+        </p>
+        <h1 className="mb-5 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
+          Remote API Speech Recognition for Linux
+        </h1>
+        <p className="mb-8 max-w-4xl text-lg text-muted-foreground">
+          Vocalinux can offload the heavy transcription step to a trusted HTTP
+          server while keeping desktop capture, voice activity detection,
+          shortcut handling, and text injection on your Linux machine.
+        </p>
+      </section>
+
+      <section className="mb-12 grid gap-6 md:grid-cols-3">
+        {[
+          {
+            icon: Network,
+            title: "Use stronger hardware",
+            description:
+              "Run larger Whisper models on a workstation, mini PC, or server while a lightweight laptop stays responsive.",
+          },
+          {
+            icon: Globe,
+            title: "Open protocol choices",
+            description:
+              "Target OpenAI-compatible transcription services or the native whisper.cpp server endpoint.",
+          },
+          {
+            icon: Settings,
+            title: "Same desktop workflow",
+            description:
+              "Remote API behaves like a Vocalinux engine, so toggle mode, push-to-talk, VAD, and text injection still work normally.",
+          },
+        ].map((item) => {
+          const Icon = item.icon;
+          return (
+            <article
+              key={item.title}
+              className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
+            >
+              <span className="bg-primary/10 mb-4 inline-flex rounded-xl p-3">
+                <Icon className="h-6 w-6 text-primary" />
+              </span>
+              <h2 className="mb-2 text-xl font-semibold">{item.title}</h2>
+              <p className="text-sm text-muted-foreground">
+                {item.description}
+              </p>
+            </article>
+          );
+        })}
+      </section>
+
+      <section className="mb-12 rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+        <h2 className="mb-5 text-2xl font-bold">
+          Supported Remote API Formats
+        </h2>
+        <div className="grid gap-4 md:grid-cols-2">
+          {protocolOptions.map((option) => (
+            <article
+              key={option.endpoint}
+              className="rounded-xl border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-700 dark:bg-zinc-900/60"
+            >
+              <h3 className="mb-2 text-lg font-semibold">{option.name}</h3>
+              <p className="mb-3 text-sm text-muted-foreground">
+                {option.description}
+              </p>
+              <code className="rounded-md bg-zinc-950 px-2.5 py-1.5 text-sm text-green-400">
+                {option.endpoint}
+              </code>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className="mb-12 grid gap-6 lg:grid-cols-[1fr_1.1fr]">
+        <div className="rounded-2xl border border-zinc-200 bg-zinc-50 p-6 dark:border-zinc-700 dark:bg-zinc-900/60">
+          <h2 className="mb-4 flex items-center gap-2 text-2xl font-bold">
+            <Terminal className="h-5 w-5 text-green-500" />
+            How the Request Flows
+          </h2>
+          <ol className="space-y-3 text-sm text-muted-foreground">
+            {workflowSteps.map((step, index) => (
+              <li key={step} className="flex gap-3">
+                <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-primary text-xs font-bold text-primary-foreground dark:text-black">
+                  {index + 1}
+                </span>
+                <span>{step}</span>
+              </li>
+            ))}
+          </ol>
+        </div>
+
+        <div className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+          <h2 className="mb-4 flex items-center gap-2 text-2xl font-bold">
+            <Lock className="h-5 w-5 text-blue-500" />
+            Privacy and Security Notes
+          </h2>
+          <ul className="space-y-3 text-sm text-muted-foreground">
+            <li className="flex items-start gap-2">
+              <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
+              Audio is not written to disk before upload.
+            </li>
+            <li className="flex items-start gap-2">
+              <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0 text-green-500" />
+              Use HTTPS and an API key outside a trusted local network.
+            </li>
+            <li className="flex items-start gap-2">
+              <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-500" />
+              Remote API is not the same as fully offline mode because audio is
+              sent to the server you configure.
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="mb-5 text-2xl font-bold">Remote API Setup Path</h2>
+        <div className="grid gap-5 md:grid-cols-2">
+          {setupSteps.map((step, index) => (
+            <article
+              key={step.title}
+              className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
+            >
+              <span className="mb-4 inline-flex h-8 w-8 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground dark:text-black">
+                {index + 1}
+              </span>
+              <h3 className="mb-2 text-xl font-semibold">{step.title}</h3>
+              <p className="text-sm text-muted-foreground">
+                {step.description}
+              </p>
+            </article>
+          ))}
+        </div>
+      </section>
+
+      <section className="border-primary/20 bg-primary/5 rounded-2xl border p-8">
+        <h2 className="mb-4 text-2xl font-bold">Next Steps</h2>
+        <div className="grid gap-4 md:grid-cols-3">
+          <Link href="/advanced-settings/" className="group">
+            <h3 className="font-semibold">Open advanced settings</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              See where Remote Server options live in the settings dialog.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              Advanced guide <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+          <Link href="/compare/" className="group">
+            <h3 className="font-semibold">Compare all engines</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Decide when remote transcription beats local whisper.cpp, Whisper,
+              or VOSK.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              Engine comparison <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+          <Link href="/privacy/" className="group">
+            <h3 className="font-semibold">Review privacy tradeoffs</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Understand how local and remote recognition differ for sensitive
+              dictation.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              Privacy policy <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+        </div>
+      </section>
+    </SeoSubpageShell>
+  );
+}
diff --git a/web/src/app/troubleshooting/page.tsx b/web/src/app/troubleshooting/page.tsx
index 449b954..736a66d 100644
--- a/web/src/app/troubleshooting/page.tsx
+++ b/web/src/app/troubleshooting/page.tsx
@@ -1,15 +1,27 @@
 import Link from "next/link";
 import { type Metadata } from "next";
-import { AlertTriangle, CheckCircle2, ChevronRight, ExternalLink, Lightbulb, Terminal, Wrench } from "lucide-react";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  ChevronRight,
+  ExternalLink,
+  Lightbulb,
+  Terminal,
+  Wrench,
+} from "lucide-react";
 import { SeoSubpageShell } from "@/components/seo-subpage-shell";
 import { absoluteUrl, buildPageMetadata } from "@/lib/seo";
 
 const troubleshootingItems = [
   {
     title: "Vocalinux won't start",
-    symptoms: ["Command not found", "Module import errors", "Application crashes on launch"],
+    symptoms: [
+      "Command not found",
+      "Module import errors",
+      "Application crashes on launch",
+    ],
     solutions: [
-      "Ensure you ran the installer: curl -fsSL https://raw.githubusercontent.com/jatinkrmalik/vocalinux/main/install.sh | bash",
+      "Ensure you ran the installer from the homepage or install guide",
       "Check if the virtual environment is activated: source ~/.local/share/vocalinux/venv/bin/activate",
       "Verify Python version (3.9+ required): python3 --version",
       "Try reinstalling: ./uninstall.sh && ./install.sh",
@@ -17,7 +29,10 @@ const troubleshootingItems = [
   },
   {
     title: "No audio detected / microphone not working",
-    symptoms: ["Dictation shows no text", "Audio level indicator stays at zero"],
+    symptoms: [
+      "Dictation shows no text",
+      "Audio level indicator stays at zero",
+    ],
     solutions: [
       "Check microphone permissions in your system settings",
       "Verify microphone is detected: arecord -l (Linux)",
@@ -28,7 +43,10 @@ const troubleshootingItems = [
   },
   {
     title: "Text not appearing in applications",
-    symptoms: ["Dictation works but text doesn't appear", "Text injection fails"],
+    symptoms: [
+      "Dictation works but text doesn't appear",
+      "Text injection fails",
+    ],
     solutions: [
       "For Wayland: Ensure IBus is running and Vocalinux IBus is configured",
       "For X11: Verify xdotool is installed: sudo apt install xdotool",
@@ -39,7 +57,11 @@ const troubleshootingItems = [
   },
   {
     title: "High CPU/GPU usage",
-    symptoms: ["System slowdown during dictation", "Fan noise", "Laggy response"],
+    symptoms: [
+      "System slowdown during dictation",
+      "Fan noise",
+      "Laggy response",
+    ],
     solutions: [
       "Use a smaller model (tiny or base instead of medium/large)",
       "Enable GPU acceleration if available (Vulkan for AMD/Intel, CUDA for NVIDIA)",
@@ -59,6 +81,33 @@ const troubleshootingItems = [
       "Set the correct language in settings",
     ],
   },
+  {
+    title: "Remote API transcription fails",
+    symptoms: [
+      "Connection test fails",
+      "HTTP 401/403 errors",
+      "HTTP 404 on transcription",
+    ],
+    solutions: [
+      "Confirm the server URL is reachable from the Vocalinux machine",
+      "Check whether the server expects /inference or /v1/audio/transcriptions",
+      "Set the API key if your server requires bearer token authentication",
+      "Use HTTPS and a firewall when the server is outside a trusted LAN",
+    ],
+  },
+  {
+    title: "Silero VAD is not active",
+    symptoms: [
+      "Recognition tab shows amplitude VAD",
+      "Silence-only buffers still appear",
+    ],
+    solutions: [
+      'Install neural VAD support: pip install "vocalinux[vad]"',
+      "Restart Vocalinux after installing ONNX Runtime support",
+      "Use the VAD sensitivity setting in Recognition to tune quiet speech detection",
+      "If Silero cannot load, Vocalinux falls back safely to amplitude-based VAD",
+    ],
+  },
   {
     title: "Installation fails",
     symptoms: ["Dependency errors", "Package not found", "Permission denied"],
@@ -72,7 +121,10 @@ const troubleshootingItems = [
   },
   {
     title: "Keyboard shortcut not working",
-    symptoms: ["Shortcut mode doesn't start dictation", "Custom shortcuts ignored"],
+    symptoms: [
+      "Shortcut mode doesn't start dictation",
+      "Custom shortcuts ignored",
+    ],
     solutions: [
       "Check if another application is capturing the shortcut",
       "Verify Vocalinux is running (check system tray)",
@@ -134,7 +186,7 @@ export default function TroubleshootingPage() {
     headline: "Vocalinux Troubleshooting Guide",
     description:
       "Complete troubleshooting guide for Vocalinux Linux voice dictation software.",
-    dateModified: "2026-03-30",
+    dateModified: "2026-06-11",
     author: {
       "@type": "Person",
       name: "Jatin K Malik",
@@ -167,8 +219,8 @@ export default function TroubleshootingPage() {
           Troubleshooting Guide
         </h1>
         <p className="mb-8 max-w-4xl text-lg text-muted-foreground">
-          Having issues with Vocalinux? Find solutions to common problems below. Can't find your
-          issue? Open a GitHub issue for help.
+          Having issues with Vocalinux? Find solutions to common problems below.
+          Can't find your issue? Open a GitHub issue for help.
         </p>
       </section>
 
@@ -200,7 +252,9 @@ export default function TroubleshootingPage() {
               </p>
               <ul className="ml-6 list-disc text-sm text-amber-600 dark:text-amber-300">
                 {item.symptoms.map((symptom) => (
-                  <li key={symptom}>{symptom}</li>
+                  <li key={symptom} className="break-words">
+                    {symptom}
+                  </li>
                 ))}
               </ul>
             </div>
@@ -212,7 +266,9 @@ export default function TroubleshootingPage() {
               </p>
               <ul className="ml-6 list-disc text-sm text-green-600 dark:text-green-300">
                 {item.solutions.map((solution) => (
-                  <li key={solution}>{solution}</li>
+                  <li key={solution} className="break-words">
+                    {solution}
+                  </li>
                 ))}
               </ul>
             </div>
@@ -226,37 +282,66 @@ export default function TroubleshootingPage() {
           Still having issues?
         </h2>
         <ul className="space-y-3 text-muted-foreground">
-          <li className="flex items-center gap-2">
-            <ChevronRight className="h-4 w-4 text-primary" />
-            Check the{" "}
-            <Link href="/faq/" className="font-semibold text-primary hover:underline">
-              FAQ page
-            </Link>{" "}
-            for common questions
+          <li className="flex items-start gap-2">
+            <ChevronRight className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary" />
+            <span>
+              Check the{" "}
+              <Link
+                href="/faq/"
+                className="font-semibold text-primary hover:underline"
+              >
+                FAQ page
+              </Link>{" "}
+              for common questions
+            </span>
           </li>
-          <li className="flex items-center gap-2">
-            <ChevronRight className="h-4 w-4 text-primary" />
-            <a
-              href="https://github.com/jatinkrmalik/vocalinux/issues"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-semibold text-primary hover:underline"
-            >
-              Search existing issues on GitHub
-              <ExternalLink className="h-3.5 w-3.5" />
-            </a>
+          <li className="flex items-start gap-2">
+            <ChevronRight className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary" />
+            <span>
+              Review{" "}
+              <Link
+                href="/remote-api/"
+                className="font-semibold text-primary hover:underline"
+              >
+                Remote API setup
+              </Link>{" "}
+              or{" "}
+              <Link
+                href="/voice-activity-detection/"
+                className="font-semibold text-primary hover:underline"
+              >
+                Silero VAD behavior
+              </Link>{" "}
+              for newer recognition features
+            </span>
           </li>
-          <li className="flex items-center gap-2">
-            <ChevronRight className="h-4 w-4 text-primary" />
-            <a
-              href="https://github.com/jatinkrmalik/vocalinux/issues/new"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="inline-flex items-center gap-1 font-semibold text-primary hover:underline"
-            >
-              Open a new issue (include debug logs)
-              <ExternalLink className="h-3.5 w-3.5" />
-            </a>
+          <li className="flex items-start gap-2">
+            <ChevronRight className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary" />
+            <span>
+              <a
+                href="https://github.com/jatinkrmalik/vocalinux/issues"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 font-semibold text-primary hover:underline"
+              >
+                Search existing issues on GitHub
+                <ExternalLink className="h-3.5 w-3.5" />
+              </a>
+            </span>
+          </li>
+          <li className="flex items-start gap-2">
+            <ChevronRight className="mt-0.5 h-4 w-4 flex-shrink-0 text-primary" />
+            <span>
+              <a
+                href="https://github.com/jatinkrmalik/vocalinux/issues/new"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 font-semibold text-primary hover:underline"
+              >
+                Open a new issue (include debug logs)
+                <ExternalLink className="h-3.5 w-3.5" />
+              </a>
+            </span>
           </li>
         </ul>
       </section>
diff --git a/web/src/app/voice-activity-detection/page.tsx b/web/src/app/voice-activity-detection/page.tsx
new file mode 100644
index 0000000..f78a3f4
--- /dev/null
+++ b/web/src/app/voice-activity-detection/page.tsx
@@ -0,0 +1,235 @@
+import Link from "next/link";
+import { type Metadata } from "next";
+import {
+  Activity,
+  CheckCircle2,
+  ChevronRight,
+  Cpu,
+  Mic,
+  Settings,
+  Shield,
+  Volume2,
+} from "lucide-react";
+import { SeoSubpageShell } from "@/components/seo-subpage-shell";
+import { absoluteUrl, buildPageMetadata } from "@/lib/seo";
+
+const vadBenefits = [
+  {
+    title: "Drops silence-only buffers",
+    description:
+      "Silero VAD helps Vocalinux ignore chunks that do not contain speech before they reach the recognition engine.",
+  },
+  {
+    title: "Cleaner dictation sessions",
+    description:
+      "Better speech boundaries reduce empty transcriptions and lower the chance that silence becomes stray text.",
+  },
+  {
+    title: "Same sensitivity control",
+    description:
+      "The existing 1-5 VAD sensitivity setting works for both Silero and the amplitude fallback.",
+  },
+];
+
+const signalFlow = [
+  "Microphone audio is captured locally.",
+  "Vocalinux checks each short chunk for speech activity.",
+  "Speech chunks are kept for transcription.",
+  "Silence-only chunks are dropped before recognition.",
+  "If Silero is unavailable, amplitude-based VAD takes over.",
+];
+
+export const metadata: Metadata = buildPageMetadata({
+  title: "Silero VAD for Cleaner Linux Voice Dictation",
+  description:
+    "Learn how Vocalinux uses Silero neural voice activity detection to drop silence-only buffers and improve Linux speech-to-text dictation.",
+  path: "/voice-activity-detection",
+  keywords: [
+    "silero vad linux dictation",
+    "voice activity detection speech to text",
+    "vocalinux vad sensitivity",
+    "cleaner whisper dictation linux",
+  ],
+});
+
+export default function VoiceActivityDetectionPage() {
+  const articleJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "TechArticle",
+    headline: "Silero VAD for Cleaner Linux Voice Dictation",
+    description:
+      "How Vocalinux uses neural voice activity detection to separate speech from silence before transcription.",
+    dateModified: "2026-06-11",
+    author: {
+      "@type": "Person",
+      name: "Jatin K Malik",
+      url: "https://github.com/jatinkrmalik",
+    },
+    publisher: {
+      "@type": "Organization",
+      name: "Vocalinux",
+      logo: {
+        "@type": "ImageObject",
+        url: absoluteUrl("/vocalinux.png"),
+      },
+    },
+    mainEntityOfPage: absoluteUrl("/voice-activity-detection"),
+  };
+
+  return (
+    <SeoSubpageShell>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(articleJsonLd) }}
+      />
+
+      <section>
+        <p className="border-primary/30 bg-primary/10 mb-4 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium text-primary">
+          <Activity className="h-4 w-4" />
+          v0.12.0 Silero VAD
+        </p>
+        <h1 className="mb-5 text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
+          Silero VAD for Cleaner Linux Voice Dictation
+        </h1>
+        <p className="mb-8 max-w-4xl text-lg text-muted-foreground">
+          Vocalinux now uses Silero neural voice activity detection when ONNX
+          Runtime support is available. It identifies speech before
+          transcription, drops silence-only buffers, and falls back safely when
+          the neural backend is not installed.
+        </p>
+      </section>
+
+      <section className="mb-12 grid gap-6 md:grid-cols-3">
+        {vadBenefits.map((benefit) => (
+          <article
+            key={benefit.title}
+            className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
+          >
+            <span className="mb-4 inline-flex rounded-xl bg-green-500/10 p-3">
+              <CheckCircle2 className="h-6 w-6 text-green-500" />
+            </span>
+            <h2 className="mb-2 text-xl font-semibold">{benefit.title}</h2>
+            <p className="text-sm text-muted-foreground">
+              {benefit.description}
+            </p>
+          </article>
+        ))}
+      </section>
+
+      <section className="mb-12 grid gap-6 lg:grid-cols-[1.05fr_1fr]">
+        <div className="rounded-2xl border border-zinc-200 bg-zinc-50 p-6 dark:border-zinc-700 dark:bg-zinc-900/60">
+          <h2 className="mb-4 flex items-center gap-2 text-2xl font-bold">
+            <Volume2 className="h-5 w-5 text-primary" />
+            How Speech Detection Fits In
+          </h2>
+          <ol className="space-y-3 text-sm text-muted-foreground">
+            {signalFlow.map((step, index) => (
+              <li key={step} className="flex gap-3">
+                <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-primary text-xs font-bold text-primary-foreground dark:text-black">
+                  {index + 1}
+                </span>
+                <span>{step}</span>
+              </li>
+            ))}
+          </ol>
+        </div>
+
+        <div className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
+          <h2 className="mb-4 flex items-center gap-2 text-2xl font-bold">
+            <Settings className="h-5 w-5 text-blue-500" />
+            Settings and Installation
+          </h2>
+          <div className="space-y-4 text-sm text-muted-foreground">
+            <p>
+              The official installer attempts to install neural VAD support. If
+              ONNX Runtime is not available, Vocalinux logs the fallback and
+              continues with amplitude-based VAD.
+            </p>
+            <div className="rounded-lg bg-zinc-950 p-4">
+              <code className="text-green-400">
+                pip install &quot;vocalinux[vad]&quot;
+              </code>
+            </div>
+            <p>
+              The Recognition tab shows which backend is active. Higher VAD
+              sensitivity values are more responsive to quiet speech for both
+              backends.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="mb-12 grid gap-6 md:grid-cols-3">
+        {[
+          {
+            icon: Shield,
+            title: "Local by design",
+            description:
+              "Silero runs on your machine. Voice activity detection does not require a cloud service.",
+          },
+          {
+            icon: Cpu,
+            title: "Small CPU-side helper",
+            description:
+              "The VAD step is a lightweight pre-filter before whisper.cpp, Whisper, VOSK, or Remote API recognition.",
+          },
+          {
+            icon: Mic,
+            title: "Useful for push-to-talk",
+            description:
+              "Cleaner speech boundaries also help short recordings and stop-on-release flows avoid silence-only output.",
+          },
+        ].map((item) => {
+          const Icon = item.icon;
+          return (
+            <article
+              key={item.title}
+              className="rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
+            >
+              <span className="bg-primary/10 mb-4 inline-flex rounded-xl p-3">
+                <Icon className="h-6 w-6 text-primary" />
+              </span>
+              <h2 className="mb-2 text-xl font-semibold">{item.title}</h2>
+              <p className="text-sm text-muted-foreground">
+                {item.description}
+              </p>
+            </article>
+          );
+        })}
+      </section>
+
+      <section className="border-primary/20 bg-primary/5 rounded-2xl border p-8">
+        <h2 className="mb-4 text-2xl font-bold">Related Guides</h2>
+        <div className="grid gap-4 md:grid-cols-3">
+          <Link href="/shortcuts/" className="group">
+            <h3 className="font-semibold">Shortcut modes</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Pair VAD with toggle or push-to-talk activation.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              View shortcuts <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+          <Link href="/advanced-settings/" className="group">
+            <h3 className="font-semibold">Advanced recognition tuning</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              Adjust whisper.cpp thresholds and anti-hallucination controls.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              Tune settings <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+          <Link href="/compare/" className="group">
+            <h3 className="font-semibold">Engine comparison</h3>
+            <p className="mt-1 text-sm text-muted-foreground">
+              See how VAD works before local and remote recognition engines.
+            </p>
+            <span className="mt-3 inline-flex items-center gap-1 text-sm font-semibold text-primary group-hover:underline">
+              Compare engines <ChevronRight className="h-4 w-4" />
+            </span>
+          </Link>
+        </div>
+      </section>
+    </SeoSubpageShell>
+  );
+}
diff --git a/web/src/app/wayland/page.tsx b/web/src/app/wayland/page.tsx
index 84a3428..34fd1c2 100644
--- a/web/src/app/wayland/page.tsx
+++ b/web/src/app/wayland/page.tsx
@@ -1,6 +1,14 @@
 import Link from "next/link";
 import { type Metadata } from "next";
-import { CheckCircle2, ChevronRight, Keyboard, Monitor, Terminal, Zap } from "lucide-react";
+import {
+  CheckCircle2,
+  ChevronRight,
+  Keyboard,
+  Monitor,
+  ShieldCheck,
+  Terminal,
+  Zap,
+} from "lucide-react";
 import { SeoSubpageShell } from "@/components/seo-subpage-shell";
 import { absoluteUrl, buildPageMetadata } from "@/lib/seo";
 
@@ -8,7 +16,7 @@ const waylandFeatures = [
   {
     title: "Native IBus Integration",
     description:
-      "Text injection via IBus engine works seamlessly on Wayland compositors like GNOME, KDE, Sway, and Hyprland.",
+      "Text injection via IBus includes readiness checks, scoped activation, and runtime recovery for modern Wayland sessions.",
     icon: Terminal,
   },
   {
@@ -29,6 +37,12 @@ const waylandFeatures = [
       "Works with GNOME, KDE Plasma, Sway, Hyprland, river, and other Wayland compositors.",
     icon: Zap,
   },
+  {
+    title: "Reliability Hardening",
+    description:
+      "Recent betas improve IBus startup, keyboard layout preservation, non-ASCII fallback, and suspend/resume behavior.",
+    icon: ShieldCheck,
+  },
 ];
 
 const compositorSupport = [
@@ -115,7 +129,7 @@ export default function WaylandPage() {
     headline: "Wayland Voice Dictation Support for Linux",
     description:
       "Complete guide to Vocalinux Wayland support. Voice dictation for GNOME, KDE, Sway, Hyprland, and other Wayland compositors.",
-    dateModified: "2026-03-30",
+    dateModified: "2026-06-11",
     author: {
       "@type": "Person",
       name: "Jatin K Malik",
@@ -140,7 +154,7 @@ export default function WaylandPage() {
       />
 
       <section>
-        <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-1.5 text-sm font-medium text-primary">
+        <p className="border-primary/30 bg-primary/10 mb-4 inline-flex items-center gap-2 rounded-full border px-4 py-1.5 text-sm font-medium text-primary">
           <Monitor className="h-4 w-4" />
           Wayland Support
         </p>
@@ -148,12 +162,12 @@ export default function WaylandPage() {
           Voice Dictation on Wayland
         </h1>
         <p className="mb-8 max-w-4xl text-lg text-muted-foreground">
-          Full voice dictation support for modern Wayland compositors. Works with GNOME, KDE Plasma,
-          Sway, Hyprland, and more. No X11 required.
+          Full voice dictation support for modern Wayland compositors. Works
+          with GNOME, KDE Plasma, Sway, Hyprland, and more. No X11 required.
         </p>
       </section>
 
-      <section className="mb-12 grid gap-6 sm:grid-cols-3">
+      <section className="mb-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
         {waylandFeatures.map((feature) => {
           const Icon = feature.icon;
           return (
@@ -163,14 +177,18 @@ export default function WaylandPage() {
             >
               <Icon className="mb-3 h-8 w-8 text-primary" />
               <h3 className="mb-2 font-semibold">{feature.title}</h3>
-              <p className="text-sm text-muted-foreground">{feature.description}</p>
+              <p className="text-sm text-muted-foreground">
+                {feature.description}
+              </p>
             </div>
           );
         })}
       </section>
 
       <section className="mb-12 rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800">
-        <h2 className="mb-6 text-2xl font-bold">Supported Wayland Compositors</h2>
+        <h2 className="mb-6 text-2xl font-bold">
+          Supported Wayland Compositors
+        </h2>
         <div className="overflow-x-auto">
           <table className="w-full text-left">
             <thead>
@@ -188,7 +206,9 @@ export default function WaylandPage() {
                   className="border-b border-zinc-100 dark:border-zinc-700/70"
                 >
                   <td className="py-3 pr-4 font-medium">{item.name}</td>
-                  <td className="py-3 pr-4 text-muted-foreground">{item.method}</td>
+                  <td className="py-3 pr-4 text-muted-foreground">
+                    {item.method}
+                  </td>
                   <td className="py-3 pr-4">
                     <span className="inline-flex items-center gap-1.5 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/30 dark:text-green-400">
                       <CheckCircle2 className="h-3 w-3" />
@@ -217,7 +237,9 @@ export default function WaylandPage() {
                 </span>
                 <h3 className="font-semibold">{step.title}</h3>
               </div>
-              <p className="mb-3 ml-10 text-sm text-muted-foreground">{step.description}</p>
+              <p className="mb-3 ml-10 text-sm text-muted-foreground">
+                {step.description}
+              </p>
               <div className="ml-10 rounded-lg bg-zinc-950 p-3">
                 <code className="text-sm text-green-400">{step.command}</code>
               </div>
@@ -225,8 +247,8 @@ export default function WaylandPage() {
           ))}
         </div>
         <p className="mt-4 text-sm text-muted-foreground">
-          If text doesn&apos;t appear, ensure IBus is your active input method (System Settings →
-          Keyboard → Input Methods).
+          If text doesn&apos;t appear, ensure IBus is your active input method
+          (System Settings → Keyboard → Input Methods).
         </p>
       </section>
 
@@ -235,19 +257,21 @@ export default function WaylandPage() {
           How Wayland Text Injection Works
         </h2>
         <p className="mb-4 text-sm text-blue-700 dark:text-blue-400">
-          Unlike X11 where applications can simulate keyboard input globally, Wayland&apos;s security
-          model requires a different approach. Vocalinux uses:
+          Unlike X11 where applications can simulate keyboard input globally,
+          Wayland&apos;s security model requires a different approach. Vocalinux
+          uses:
         </p>
         <ul className="space-y-2 text-sm text-blue-700 dark:text-blue-400">
           <li className="flex items-start gap-2">
             <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0" />
-            <strong>IBus Engine</strong> - A custom IBus input method that receives text from
-            Vocalinux and types it into the focused application
+            <strong>IBus Engine</strong> - A custom IBus input method that
+            receives text from Vocalinux and types it into the focused
+            application
           </li>
           <li className="flex items-start gap-2">
             <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0" />
-            <strong>wtype</strong> - Native Wayland typing tool for compositors that support the
-            virtual keyboard protocol
+            <strong>wtype</strong> - Native Wayland typing tool for compositors
+            that support the virtual keyboard protocol
           </li>
           <li className="flex items-start gap-2">
             <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0" />
@@ -255,22 +279,27 @@ export default function WaylandPage() {
           </li>
         </ul>
         <p className="mt-4 text-sm text-blue-700 dark:text-blue-400">
-          v0.9.0+ includes clipboard fallback for Wayland compositors without virtual keyboard
-          support. Copy-to-clipboard is now disabled by default for privacy - enable in Settings
-          if needed.
+          v0.9.0+ includes clipboard fallback for Wayland compositors without
+          virtual keyboard support. Copy-to-clipboard is now disabled by default
+          for privacy - enable in Settings if needed.
+        </p>
+        <p className="mt-3 text-sm text-blue-700 dark:text-blue-400">
+          v0.10.2+ also improves IBus detection without legacy environment
+          variables and handles non-ASCII ydotool paths with clipboard paste
+          fallback.
         </p>
       </section>
 
       <section className="rounded-2xl border border-zinc-200 bg-zinc-50 p-8 dark:border-zinc-700 dark:bg-zinc-900/60">
         <h2 className="mb-4 text-2xl font-bold">Start Dictating on Wayland</h2>
         <p className="mb-6 text-muted-foreground">
-          Vocalinux automatically detects your display server and configures the appropriate text
-          injection method. Just install and run.
+          Vocalinux automatically detects your display server and configures the
+          appropriate text injection method. Just install and run.
         </p>
         <div className="flex flex-wrap gap-4">
           <Link
             href="/install/"
-            className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground dark:text-black hover:bg-primary/90"
+            className="hover:bg-primary/90 inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground dark:text-black"
           >
             Install Now
             <ChevronRight className="h-4 w-4" />
@@ -281,6 +310,12 @@ export default function WaylandPage() {
           >
             Troubleshooting Guide
           </Link>
+          <Link
+            href="/desktop-reliability/"
+            className="inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-4 py-2 text-sm font-semibold hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-800 dark:hover:bg-zinc-700"
+          >
+            Reliability Improvements
+          </Link>
         </div>
       </section>
     </SeoSubpageShell>
diff --git a/web/src/components/seo-subpage-shell.tsx b/web/src/components/seo-subpage-shell.tsx
index fe2df89..0d614ab 100644
--- a/web/src/components/seo-subpage-shell.tsx
+++ b/web/src/components/seo-subpage-shell.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
   BookOpen,
+  Activity,
   ChevronDown,
   ChevronRight,
   Code2,
@@ -16,6 +17,9 @@ import {
   Menu,
   Monitor,
   Power,
+  Server,
+  ShieldCheck,
+  SlidersHorizontal,
   Shield,
   Sun,
   X,
@@ -42,9 +46,25 @@ const navCategories = [
     label: "Features",
     items: [
       { href: "/compare/", label: "Engine Comparison", icon: Cpu },
+      { href: "/remote-api/", label: "Remote API", icon: Server },
       { href: "/languages/", label: "Multilingual", icon: Globe },
       { href: "/wayland/", label: "Wayland Support", icon: Monitor },
       { href: "/gpu-acceleration/", label: "GPU Acceleration", icon: Cpu },
+      {
+        href: "/voice-activity-detection/",
+        label: "Silero VAD",
+        icon: Activity,
+      },
+      {
+        href: "/advanced-settings/",
+        label: "Advanced Settings",
+        icon: SlidersHorizontal,
+      },
+      {
+        href: "/desktop-reliability/",
+        label: "Desktop Reliability",
+        icon: ShieldCheck,
+      },
       { href: "/autostart/", label: "Autostart", icon: Power },
     ],
   },
@@ -61,7 +81,11 @@ const navCategories = [
   {
     label: "Comparisons",
     items: [
-      { href: "/vs-nerd-dictation/", label: "vs Nerd Dictation", icon: BookOpen },
+      {
+        href: "/vs-nerd-dictation/",
+        label: "vs Nerd Dictation",
+        icon: BookOpen,
+      },
       { href: "/whisper-model-guide/", label: "Whisper Models", icon: Cpu },
       { href: "/voice-typing-vscode/", label: "VS Code", icon: Code2 },
     ],
@@ -85,11 +109,7 @@ const navCategories = [
   },
 ];
 
-function DropdownMenu({
-  category,
-}: {
-  category: (typeof navCategories)[0];
-}) {
+function DropdownMenu({ category }: { category: (typeof navCategories)[0] }) {
   return (
     <div className="group relative">
       <button
@@ -97,12 +117,10 @@ function DropdownMenu({
         className="inline-flex items-center gap-1 rounded-lg px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-zinc-100 hover:text-foreground focus:bg-zinc-100 focus:text-foreground focus:outline-none dark:hover:bg-zinc-800 dark:focus:bg-zinc-800"
       >
         {category.label}
-        <ChevronDown
-          className="h-3.5 w-3.5 transition-transform group-hover:rotate-180 group-focus-within:rotate-180"
-        />
+        <ChevronDown className="h-3.5 w-3.5 transition-transform group-focus-within:rotate-180 group-hover:rotate-180" />
       </button>
 
-      <div className="pointer-events-none invisible absolute left-0 top-full z-50 mt-0 w-56 rounded-xl border border-zinc-200 bg-white p-2 opacity-0 shadow-lg transition-all duration-150 group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:visible group-focus-within:opacity-100 dark:border-zinc-700 dark:bg-zinc-800">
+      <div className="pointer-events-none invisible absolute left-0 top-full z-50 mt-0 w-56 rounded-xl border border-zinc-200 bg-white p-2 opacity-0 shadow-lg transition-all duration-150 group-focus-within:pointer-events-auto group-focus-within:visible group-focus-within:opacity-100 group-hover:pointer-events-auto group-hover:visible group-hover:opacity-100 dark:border-zinc-700 dark:bg-zinc-800">
         {category.items.map((item) => {
           const Icon = item.icon;
           return (
@@ -154,20 +172,20 @@ function Breadcrumbs() {
 
   return (
     <nav className="mb-6 flex items-center gap-2 text-sm text-muted-foreground">
-      <Link href="/" className="hover:text-foreground transition-colors">
+      <Link href="/" className="transition-colors hover:text-foreground">
         Home
       </Link>
       {breadcrumbs.map((crumb, index) => (
         <React.Fragment key={crumb.href}>
           <ChevronRight className="h-4 w-4" />
           {index === breadcrumbs.length - 1 ? (
-            <span className="text-foreground font-medium">
+            <span className="font-medium text-foreground">
               {getPageTitle(crumb.href)}
             </span>
           ) : (
             <Link
               href={crumb.href}
-              className="hover:text-foreground transition-colors"
+              className="transition-colors hover:text-foreground"
             >
               {crumb.label}
             </Link>
@@ -200,9 +218,25 @@ export function SeoSubpageShell({ children }: SeoSubpageShellProps) {
       label: "Features",
       items: [
         { href: "/compare/", label: "Engine Comparison", icon: Cpu },
+        { href: "/remote-api/", label: "Remote API", icon: Server },
         { href: "/whisper-model-guide/", label: "Whisper Models", icon: Cpu },
         { href: "/wayland/", label: "Wayland", icon: Monitor },
         { href: "/gpu-acceleration/", label: "GPU Acceleration", icon: Cpu },
+        {
+          href: "/voice-activity-detection/",
+          label: "Silero VAD",
+          icon: Activity,
+        },
+        {
+          href: "/advanced-settings/",
+          label: "Advanced Settings",
+          icon: SlidersHorizontal,
+        },
+        {
+          href: "/desktop-reliability/",
+          label: "Reliability",
+          icon: ShieldCheck,
+        },
       ],
     },
     {
@@ -218,7 +252,11 @@ export function SeoSubpageShell({ children }: SeoSubpageShellProps) {
     {
       label: "Compare",
       items: [
-        { href: "/vs-nerd-dictation/", label: "vs Nerd Dictation", icon: BookOpen },
+        {
+          href: "/vs-nerd-dictation/",
+          label: "vs Nerd Dictation",
+          icon: BookOpen,
+        },
         { href: "/alternatives/", label: "Alternatives", icon: BookOpen },
         { href: "/offline/", label: "100% Offline", icon: Shield },
         { href: "/open-source/", label: "Open Source", icon: Code2 },
@@ -237,7 +275,7 @@ export function SeoSubpageShell({ children }: SeoSubpageShellProps) {
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-zinc-50 to-white dark:from-zinc-900 dark:to-zinc-950">
-      <header className="sticky top-0 z-50 border-b border-zinc-200/80 bg-background/95 backdrop-blur-md dark:border-zinc-800/80">
+      <header className="bg-background/95 sticky top-0 z-50 border-b border-zinc-200/80 backdrop-blur-md dark:border-zinc-800/80">
         <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3 sm:px-6">
           <Link href="/" className="group flex items-center gap-2">
             <VocalinuxLogo
@@ -249,7 +287,7 @@ export function SeoSubpageShell({ children }: SeoSubpageShellProps) {
           </Link>
 
           {/* Desktop nav with dropdowns */}
-          <nav className="hidden items-center gap-1 md:flex">
+          <nav className="hidden items-center gap-1 lg:flex">
             {mainNavCategories.map((category) => (
               <DropdownMenu key={category.label} category={category} />
             ))}
@@ -260,7 +298,7 @@ export function SeoSubpageShell({ children }: SeoSubpageShellProps) {
             {mounted && (
               <button
                 onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-                className="w-8 h-8 sm:w-9 sm:h-9 bg-muted hover:bg-muted/80 rounded-md flex items-center justify-center transition-all"
+                className="hover:bg-muted/80 flex h-8 w-8 items-center justify-center rounded-md bg-muted transition-all sm:h-9 sm:w-9"
                 aria-label="Toggle theme"
               >
                 {theme === "dark" ? (
@@ -275,7 +313,7 @@ export function SeoSubpageShell({ children }: SeoSubpageShellProps) {
                 e.stopPropagation();
                 setMobileMenuOpen(!mobileMenuOpen);
               }}
-              className="flex items-center justify-center rounded-lg p-2 text-muted-foreground transition-colors hover:bg-zinc-100 hover:text-foreground dark:hover:bg-zinc-800 md:hidden"
+              className="flex items-center justify-center rounded-lg p-2 text-muted-foreground transition-colors hover:bg-zinc-100 hover:text-foreground dark:hover:bg-zinc-800 lg:hidden"
               aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
             >
               {mobileMenuOpen ? (
@@ -289,7 +327,7 @@ export function SeoSubpageShell({ children }: SeoSubpageShellProps) {
 
         {/* Mobile menu */}
         {mobileMenuOpen && (
-          <div className="border-t border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 md:hidden">
+          <div className="border-t border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900 lg:hidden">
             <nav className="max-h-[calc(100vh-4rem)] overflow-y-auto px-4 py-4">
               {mainNavCategories.map((category) => (
                 <div key={category.label} className="mb-4">
@@ -328,14 +366,17 @@ export function SeoSubpageShell({ children }: SeoSubpageShellProps) {
         <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6">
           <div className="mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
             <div>
-              <p className="text-sm font-semibold">Want the full product overview?</p>
+              <p className="text-sm font-semibold">
+                Want the full product overview?
+              </p>
               <p className="text-sm text-muted-foreground">
-                Go back to the homepage for the live demo and one-command installer.
+                Go back to the homepage for the live demo and one-command
+                installer.
               </p>
             </div>
             <Link
               href="/"
-              className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground dark:text-black hover:bg-primary/90"
+              className="hover:bg-primary/90 inline-flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground dark:text-black"
             >
               Home Page
               <ChevronRight className="h-4 w-4" />
@@ -353,7 +394,7 @@ export function SeoSubpageShell({ children }: SeoSubpageShellProps) {
                     <li key={item.href}>
                       <Link
                         href={item.href}
-                        className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                        className="text-sm text-muted-foreground transition-colors hover:text-foreground"
                       >
                         {item.label}
                       </Link>