diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..c1965c2
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+.github/workflows/*.lock.yml linguist-generated=true merge=ours
\ No newline at end of file
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
new file mode 100644
index 0000000..ab8ae1a
--- /dev/null
+++ b/.github/CONTRIBUTING.md
@@ -0,0 +1,114 @@
+# Contributing
+
+> [!NOTE]
+> This guide serves to track changes to CI/CD and inform contributors and new maintainers of those patterns so they aren't repeated or causing confusion during development.
+
+`main` is the code deployed to production, Vercel auto-deploys every commit to it. All human changes reach `main` through a pull request (no direct pushes). The one exception is the sync-docs automation bot, which pushes generated documentation commits (`sync: update documentation from voxkit-desktop`) directly to `main` when new application code is deployed from [voxkit-desktop](https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop).
+
+This contribution guide is split by role:
+
+- **[For developers](#for-developers)**: writing and shipping code.
+- **[For repo & Vercel owners](#for-repo--vercel-owners)**: setting the guardrails that control inflow.
+
+---
+
+## For developers
+
+- **Internal members** (collaborators with write access) create a branch in this repo.
+- **External contributors** fork the repo, branch in the fork, and open a PR from the fork against `main`.
+
+### Contribution model (GitHub Flow)
+
+```
+branch-name ──PR──► main ──auto-deploy──► Vercel production
+```
+
+1. Branch off `main` (in this repo if internal, in your fork if external): `git checkout -b <short-descriptive-name>`
+2. Commit work locally, the pre-commit hook enforces lint-staged (lint + format on staged files) + repo-wide format:check + typecheck on every commit.
+3. Push the branch; the pre-push hook enforces full lint + format:check + typecheck + `next build`, so a broken branch doesn't even reach GitHub.
+4. Open a PR against `main`. Vercel posts a preview URL on the PR.
+5. Merge via Squash and merge once review + checks pass. Keeps `main` history linear; 1 commit = 1 shipped change.
+6. Delete the branch after merge. Vercel deploys the new `main` to production automatically.
+
+### Useful scripts
+
+| Command                | What it does                                  |
+| ---------------------- | --------------------------------------------- |
+| `npm run dev`          | Local dev server (`USE_FAKE_RELEASES=false`). |
+| `npm run build`        | Production build.                             |
+| `npm run lint`         | ESLint over the project.                      |
+| `npm run typecheck`    | `tsc --noEmit`.                               |
+| `npm run format`       | Prettier-format the whole project.            |
+| `npm run format:check` | Prettier check (no writes); fails on drift.   |
+
+---
+
+## For repo & Vercel owners
+
+You own the guardrails that make the developer workflow safe. The rules below are authoritative.
+
+### GitHub branch protection (`main`)
+
+We use **Rulesets**, not the legacy "Branch protection rules". Rulesets supersede branch protection and are required for app-based bypass (see [Automation bot bypass](#automation-bot-bypass) below).
+
+`Settings → Rules → Rulesets → New branch ruleset`
+
+Configure the ruleset:
+
+- **Name**: `main protection` (or similar).
+- **Enforcement status**: `Active`.
+- **Target branches**: `Include default branch` (or add `refs/heads/main` explicitly).
+- **Bypass list**: add the **Repository admin** role so the someone can land emergency fixes or rollbacks if PR review is unavailable. The sync-docs bot is added in the next section. No other humans should be on this list.
+
+Branch rules to enable:
+
+- **Restrict deletions**: prevents `main` from being deleted.
+- **Require linear history**: pairs with squash-merge to keep history flat.
+- **Require a pull request before merging**:
+  - Required approvals: **1**.
+  - **Dismiss stale pull request approvals when new commits are pushed**: on.
+  - **Require approval of the most recent reviewable push**: on.
+- **Require status checks to pass**:
+  - **Require branches to be up to date before merging**: on.
+  - Add each required check by name once the CI workflow exists (lint, typecheck, format, Vercel).
+- **Block force pushes**: on.
+
+Anything not in the Bypass list is subject to all of the above. The Repository admin can bypass for genuine emergencies; routine work still goes through PRs.
+
+### Automation bot bypass
+
+The docs-sync workflow in [`voxkit-desktop`](https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop) pushes generated docs to `main` here using `secrets.PRIVATE_REPO_TOKEN`. The push is authenticated as the **owner of that PAT**, not as `github-actions[bot]`, so the PAT must be issued by the Repository admin (already in the Bypass list above). No separate bypass entry is needed.
+
+Also in `Settings → General → Pull Requests`:
+
+- **Allow squash merging**: on.
+- **Allow merge commits**: off.
+- **Allow rebase merging**: off.
+- **Automatically delete head branches**: on.
+
+### Vercel project
+
+- **Production branch**: `main`. Every commit triggers a production deployment.
+- **Preview deployments**: enabled for every PR and every non-`main` branch push. Vercel posts the preview URL as a PR check.
+- **Environment variables**: managed in the Vercel dashboard.
+  - Production secrets must be scoped **Production only** so PR previews can't read them.
+  - Preview-safe variables can be scoped to Preview + Development.
+- **GitHub integration**: the Vercel GitHub App must have access to this repo so it can post deployment statuses (these become required checks in branch protection).
+
+### Rollback
+
+Production is `main`. Two paths:
+
+1. **Preferred**: revert the bad commit on `main` via a PR; `git revert <sha>` → PR → squash-merge. Vercel auto-redeploys. History stays linear and the revert is auditable.
+2. **Emergency**: in the Vercel dashboard, promote a prior production deployment to current. Do this when a revert PR would be too slow. Immediately follow with a revert PR so `main` and production are back in sync.
+
+### Enforcement summary
+
+| Stage             | Enforced by              | Gate                                                | Authoritative?     |
+| ----------------- | ------------------------ | --------------------------------------------------- | ------------------ |
+| Each commit       | Husky `pre-commit`       | lint-staged + format:check + typecheck              | No (`--no-verify`) |
+| Each push         | Husky `pre-push`         | full lint + format:check + typecheck + `next build` | No (`--no-verify`) |
+| Reaching `main`   | GitHub branch protection | PR + approval + CI checks                           | **Yes**            |
+| Production deploy | Vercel                   | auto on `main`                                      | **Yes**            |
+
+The hooks make the common case fast and pleasant. Branch protection is what actually keeps `main` clean.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..f3fa4ee
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,43 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+jobs:
+  lint:
+    name: lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+
+  typecheck:
+    name: typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run typecheck
+
+  format:
+    name: format
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run format:check
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100755
index 0000000..4913520
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1,3 @@
+npx lint-staged
+npm run format:check
+npm run typecheck
diff --git a/.husky/pre-push b/.husky/pre-push
new file mode 100755
index 0000000..d434665
--- /dev/null
+++ b/.husky/pre-push
@@ -0,0 +1,4 @@
+npm run lint
+npm run format:check
+npm run typecheck
+npm run build
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..20ed00c
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,8 @@
+.next/
+out/
+build/
+node_modules/
+next-env.d.ts
+public/
+tsconfig.tsbuildinfo
+package-lock.json
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..98349d5
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1 @@
+See [.github/CONTRIBUTING.md](.github/CONTRIBUTING.md) for the contribution guide, CI/CD layout, and guardrails. Agents should follow the same rules as human contributors.
diff --git a/app/api/releases/route.ts b/app/api/releases/route.ts
index 1598453..5ef663c 100644
--- a/app/api/releases/route.ts
+++ b/app/api/releases/route.ts
@@ -1,4 +1,4 @@
-import { NextResponse } from 'next/server';
+import { NextResponse } from "next/server";
 import type {
   GitHubRelease,
   GitHubAsset,
@@ -7,8 +7,8 @@ import type {
   OperatingSystem,
   ReleaseAsset,
   ReleasesAPIResponse,
-} from '../../../types/releases';
-import { fakeGitHubReleases } from '../../../lib/fakeReleases';
+} from "../../../types/releases";
+import { fakeGitHubReleases } from "../../../lib/fakeReleases";
 
 const OS_EXTENSIONS: Record<OperatingSystem, RegExp> = {
   macos: /\.(dmg|pkg)$/i,
@@ -29,8 +29,8 @@ function parseVersion(tag: string): string | null {
 }
 
 function compareVersions(v1: string, v2: string): number {
-  const parts1 = v1.split('.').map(Number);
-  const parts2 = v2.split('.').map(Number);
+  const parts1 = v1.split(".").map(Number);
+  const parts2 = v2.split(".").map(Number);
   for (let i = 0; i < 3; i++) {
     if (parts1[i] > parts2[i]) return 1;
     if (parts1[i] < parts2[i]) return -1;
@@ -50,7 +50,7 @@ export async function GET() {
   try {
     let releases: GitHubRelease[];
 
-    if (process.env.USE_FAKE_RELEASES === 'true') {
+    if (process.env.USE_FAKE_RELEASES === "true") {
       releases = fakeGitHubReleases;
     } else {
       const owner = process.env.GITHUB_OWNER;
@@ -58,25 +58,25 @@ export async function GET() {
 
       if (!owner || !repo) {
         return NextResponse.json(
-          { error: 'GITHUB_OWNER or GITHUB_REPO is not configured' },
-          { status: 500 }
+          { error: "GITHUB_OWNER or GITHUB_REPO is not configured" },
+          { status: 500 },
         );
       }
 
       const response = await fetch(
         `https://api.github.com/repos/${owner}/${repo}/releases`,
         {
-          headers: { Accept: 'application/vnd.github+json' },
+          headers: { Accept: "application/vnd.github+json" },
           next: { revalidate: 5000 },
-        }
+        },
       );
 
       if (!response.ok) {
         const errorText = await response.text();
-        console.error('GitHub API error:', response.status, errorText);
+        console.error("GitHub API error:", response.status, errorText);
         return NextResponse.json(
           { error: `Failed to fetch releases from GitHub: ${response.status}` },
-          { status: response.status }
+          { status: response.status },
         );
       }
 
@@ -121,10 +121,10 @@ export async function GET() {
 
     return NextResponse.json(apiResponse);
   } catch (error) {
-    console.error('Error fetching releases:', error);
+    console.error("Error fetching releases:", error);
     return NextResponse.json(
-      { error: 'Internal server error' },
-      { status: 500 }
+      { error: "Internal server error" },
+      { status: 500 },
     );
   }
 }
diff --git a/app/docs/page.tsx b/app/docs/page.tsx
index 4cab87e..f4db611 100644
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -4,27 +4,24 @@ import { Footer, Navbar } from "../../layout";
 export default function DocsPage() {
   return (
     <>
-    <div className="h-screen flex flex-col bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white overflow-hidden">
-      <Navbar view="Docs" />
+      <div className="h-screen flex flex-col bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white overflow-hidden">
+        <Navbar view="Docs" />
 
-      {/* Documentation iframe container */}
-      <div className="flex-1 px-4 sm:px-6 lg:px-8 pt-24 pb-8 overflow-hidden">
-        <div className="max-w-7xl w-full h-full mx-auto">
-
-          {/* Iframe wrapper with styling */}
-          <div className="h-full rounded-lg overflow-hidden shadow-2xl border border-slate-700 bg-white">
-            <iframe
-              src="/docs/index.html"
-              className="w-full h-full border-none"
-              title="VoxKit API Documentation"
-            />
+        {/* Documentation iframe container */}
+        <div className="flex-1 px-4 sm:px-6 lg:px-8 pt-24 pb-8 overflow-hidden">
+          <div className="max-w-7xl w-full h-full mx-auto">
+            {/* Iframe wrapper with styling */}
+            <div className="h-full rounded-lg overflow-hidden shadow-2xl border border-slate-700 bg-white">
+              <iframe
+                src="/docs/index.html"
+                className="w-full h-full border-none"
+                title="VoxKit API Documentation"
+              />
+            </div>
           </div>
         </div>
       </div>
-
-      
-    </div>
-    <Footer />
+      <Footer />
     </>
   );
 }
diff --git a/app/download/page.tsx b/app/download/page.tsx
index e8a077c..927162e 100644
--- a/app/download/page.tsx
+++ b/app/download/page.tsx
@@ -1,6 +1,6 @@
-"use client"
-import { Footer, Navbar } from '../../layout';
-import DownloadButton from '../../components/DownloadButton';
+"use client";
+import { Footer, Navbar } from "../../layout";
+import DownloadButton from "../../components/DownloadButton";
 
 export default function DownloadPage() {
   return (
@@ -20,4 +20,4 @@ export default function DownloadPage() {
       <Footer />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/features/page.tsx b/app/features/page.tsx
index 5283ad3..5d5bda5 100644
--- a/app/features/page.tsx
+++ b/app/features/page.tsx
@@ -1,99 +1,120 @@
-"use client"
-import { Footer, Navbar } from '../../layout';
-import { Cpu, Layers, BarChart3, Zap, Lock, Puzzle } from 'lucide-react';
-import GridButton from '../../components/GridButton';
+"use client";
+import { Footer, Navbar } from "../../layout";
+import { Cpu, Layers, BarChart3, Zap, Lock, Puzzle } from "lucide-react";
+import GridButton from "../../components/GridButton";
 export default function FeaturesPage() {
   // Easy to add/remove engines
   const engines = [
     {
       name: "Montreal Forced Aligner (MFA)",
       status: "production",
-      description: "Industry-standard forced alignment with speaker-adaptive training. Achieves human-level reliability on diverse speech samples.",
-      capabilities: ["Forced Alignment", "Model Training"]
+      description:
+        "Industry-standard forced alignment with speaker-adaptive training. Achieves human-level reliability on diverse speech samples.",
+      capabilities: ["Forced Alignment", "Model Training"],
     },
     {
       name: "Wav2TextGrid (W2TG)",
       status: "production",
-      description: "Alternative alignment engine implementing state-of-the-art Wav2Vec2 based phonetic alignment.",
-      capabilities: ["Forced Alignment", "Model Training"]
+      description:
+        "Alternative alignment engine implementing state-of-the-art Wav2Vec2 based phonetic alignment.",
+      capabilities: ["Forced Alignment", "Model Training"],
     },
     {
       name: "Faster Whisper",
       status: "development",
-      description: "Lightweight automatic speech recognition (ASR) engine for transcription tasks, optimized for speed and efficiency.",
-      capabilities: ["Transcription"]
-    }
+      description:
+        "Lightweight automatic speech recognition (ASR) engine for transcription tasks, optimized for speed and efficiency.",
+      capabilities: ["Transcription"],
+    },
   ];
 
   // Easy to add/remove analyzers
   const analyzers = [
     {
       name: "Default Analyzer",
-      description: "Extracts core dataset metadata including file counts, and speaker count.",
-      outputs: ["CSV summary", "Bar chart"]
+      description:
+        "Extracts core dataset metadata including file counts, and speaker count.",
+      outputs: ["CSV summary", "Bar chart"],
     },
     {
       name: "Custom Analyzers",
-      description: "Extensible analyzer system allows researchers to add more...",
-      outputs: ["CSV Summary", "Bar chart"]
-    }
+      description:
+        "Extensible analyzer system allows researchers to add more...",
+      outputs: ["CSV Summary", "Bar chart"],
+    },
   ];
 
   // Easy to add/remove pipeline stackers
   const stackers = [
     {
-      name: 'Transcription',
+      name: "Transcription",
       icon: <Cpu className="w-6 h-6" />,
-      description: "Generate text transcriptions from audio datasets using integrated ASR engines.",
-      workflow: ["Dataset selection", "ASR engine configuration", "Transcription execution"] 
+      description:
+        "Generate text transcriptions from audio datasets using integrated ASR engines.",
+      workflow: [
+        "Dataset selection",
+        "ASR engine configuration",
+        "Transcription execution",
+      ],
     },
     {
       name: "Training",
       icon: <Zap className="w-6 h-6" />,
-      description: "Train custom acoustic models on your datasets with configurable hyperparameters.",
-      workflow: ["Dataset selection", "Model configuration", "Training execution"]
+      description:
+        "Train custom acoustic models on your datasets with configurable hyperparameters.",
+      workflow: [
+        "Dataset selection",
+        "Model configuration",
+        "Training execution",
+      ],
     },
     {
       name: "Predicting",
       icon: <Cpu className="w-6 h-6" />,
-      description: "Generate phoneme-level alignments using trained or pretrained models.",
-      workflow: ["Model selection", "Dataset alignment", "TextGrid generation"]
+      description:
+        "Generate phoneme-level alignments using trained or pretrained models.",
+      workflow: ["Model selection", "Dataset alignment", "TextGrid generation"],
     },
     {
       name: "GOP Extraction",
       icon: <BarChart3 className="w-6 h-6" />,
-      description: "Extract Goodness of Pronunciation scores for pronunciation assessment and speech disorder analysis.",
-      workflow: ["Dataset selection", "Alignment selection", "GOP computation"]
-    }
+      description:
+        "Extract Goodness of Pronunciation scores for pronunciation assessment and speech disorder analysis.",
+      workflow: ["Dataset selection", "Alignment selection", "GOP computation"],
+    },
   ];
 
   const coreFeatures = [
     {
       icon: <Puzzle className="w-8 h-8" />,
       title: "Low level Abstraction",
-      description: "Abstract base class patterns allow for the rapid addition of new alignment toolkits and graphical components."
+      description:
+        "Abstract base class patterns allow for the rapid addition of new alignment toolkits and graphical components.",
     },
     {
       icon: <BarChart3 className="w-8 h-8" />,
       title: "High Level Configuration",
-      description: "Quickly adjust visual flow and guidance to fit the needs of specific research studies and user groups."
+      description:
+        "Quickly adjust visual flow and guidance to fit the needs of specific research studies and user groups.",
     },
     {
       icon: <Layers className="w-8 h-8" />,
       title: "Layered Architecture",
-      description: "Clean separation between GUI, storage, engine, and analyzer layers enables independent development and testing of each component."
+      description:
+        "Clean separation between GUI, storage, engine, and analyzer layers enables independent development and testing of each component.",
     },
     {
       icon: <Lock className="w-8 h-8" />,
       title: "Metadata Tracking",
-      description: "Every dataset, model, and alignment stores provenance information for reproducibility and data sharing."
-    }
+      description:
+        "Every dataset, model, and alignment stores provenance information for reproducibility and data sharing.",
+    },
   ];
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
       <Navbar view="Features" />
-      
+
       <div className="pt-32 pb-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="text-center mb-16">
@@ -101,32 +122,42 @@ export default function FeaturesPage() {
             VoxKit Features
           </h1>
           <p className="text-xl text-slate-300 max-w-3xl mx-auto">
-            Enabling cross-functional teams to conduct phonetic research with ease.
+            Enabling cross-functional teams to conduct phonetic research with
+            ease.
           </p>
         </div>
 
         {/* Mission Statement */}
         <div className="mb-20 bg-gradient-to-r from-slate-800/80 to-slate-700/80 backdrop-blur-sm border border-slate-500 rounded-2xl p-10 tile">
-          <h2 className="text-3xl font-bold mb-4 text-white text-center">Mission</h2>
+          <h2 className="text-3xl font-bold mb-4 text-white text-center">
+            Mission
+          </h2>
           <p className="text-lg text-slate-200 text-center max-w-4xl mx-auto leading-relaxed">
-            To accelerate discovery and improve care in speech-language pathology by providing an intuitive, transparent platform for advanced forced alignment, pronunciation assessment, and phonetic research. Accessible to every researcher, not just programmers.
+            To accelerate discovery and improve care in speech-language
+            pathology by providing an intuitive, transparent platform for
+            advanced forced alignment, pronunciation assessment, and phonetic
+            research. Accessible to every researcher, not just programmers.
           </p>
         </div>
 
         {/* Core Features Grid */}
         <div className="mb-20">
-          <h2 className="text-3xl font-bold mb-8 text-center">Bridging Complexity</h2>
+          <h2 className="text-3xl font-bold mb-8 text-center">
+            Bridging Complexity
+          </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             {coreFeatures.map((feature, index) => (
               <div
                 key={index}
                 className="bg-slate-800/50 backdrop-blur-sm border border-slate-600 rounded-xl p-8 transition-all tile"
               >
-                <div className="text-cyan-400 mb-4">
-                  {feature.icon}
-                </div>
-                <h3 className="text-xl font-semibold mb-3 text-white">{feature.title}</h3>
-                <p className="text-slate-200 leading-relaxed">{feature.description}</p>
+                <div className="text-cyan-400 mb-4">{feature.icon}</div>
+                <h3 className="text-xl font-semibold mb-3 text-white">
+                  {feature.title}
+                </h3>
+                <p className="text-slate-200 leading-relaxed">
+                  {feature.description}
+                </p>
               </div>
             ))}
           </div>
@@ -137,7 +168,9 @@ export default function FeaturesPage() {
           <div className="text-center mb-10">
             <h2 className="text-3xl font-bold mb-4">Speech Engines</h2>
             <p className="text-slate-300 max-w-2xl mx-auto">
-              VoxKit&apos;s modular api enables seamless integration of speech processing engines (toolkits), from established libraries at the cutting edge and beyond.
+              VoxKit&apos;s modular api enables seamless integration of speech
+              processing engines (toolkits), from established libraries at the
+              cutting edge and beyond.
             </p>
           </div>
           <div className="space-y-6">
@@ -148,17 +181,25 @@ export default function FeaturesPage() {
               >
                 <div className="flex items-start justify-between mb-4">
                   <div>
-                    <h3 className="text-2xl font-semibold text-white mb-2">{engine.name}</h3>
-                    <span className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${
-                      engine.status === 'production' 
-                        ? 'bg-green-500/20 text-green-300 border border-green-500/30' 
-                        : 'bg-amber-500/20 text-amber-300 border border-amber-500/30'
-                    }`}>
-                      {engine.status === 'production' ? 'Production Ready' : 'In Development'}
+                    <h3 className="text-2xl font-semibold text-white mb-2">
+                      {engine.name}
+                    </h3>
+                    <span
+                      className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${
+                        engine.status === "production"
+                          ? "bg-green-500/20 text-green-300 border border-green-500/30"
+                          : "bg-amber-500/20 text-amber-300 border border-amber-500/30"
+                      }`}
+                    >
+                      {engine.status === "production"
+                        ? "Production Ready"
+                        : "In Development"}
                     </span>
                   </div>
                 </div>
-                <p className="text-slate-200 mb-4 leading-relaxed">{engine.description}</p>
+                <p className="text-slate-200 mb-4 leading-relaxed">
+                  {engine.description}
+                </p>
                 <div className="space-y-2">
                   <p className="text-sm font-semibold text-cyan-300">Tools:</p>
                   <div className="flex flex-wrap gap-2">
@@ -183,7 +224,9 @@ export default function FeaturesPage() {
           <div className="text-center mb-10">
             <h2 className="text-3xl font-bold mb-4">UI Stackers</h2>
             <p className="text-slate-300 max-w-2xl mx-auto">
-              Multi-step capabilities for common research tasks, from model training to alignment generation and pronunciation assessment. Stackers are ordered, added and removed to build custom pipelines.
+              Multi-step capabilities for common research tasks, from model
+              training to alignment generation and pronunciation assessment.
+              Stackers are ordered, added and removed to build custom pipelines.
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
@@ -192,16 +235,23 @@ export default function FeaturesPage() {
                 key={index}
                 className="bg-slate-800/50 backdrop-blur-sm border border-slate-600 rounded-xl p-8 transition-all tile"
               >
-                <div className="text-cyan-400 mb-4">
-                  {stacker.icon}
-                </div>
-                <h3 className="text-xl font-semibold mb-3 text-white">{stacker.name}</h3>
-                <p className="text-slate-200 mb-4 leading-relaxed">{stacker.description}</p>
+                <div className="text-cyan-400 mb-4">{stacker.icon}</div>
+                <h3 className="text-xl font-semibold mb-3 text-white">
+                  {stacker.name}
+                </h3>
+                <p className="text-slate-200 mb-4 leading-relaxed">
+                  {stacker.description}
+                </p>
                 <div className="space-y-2">
-                  <p className="text-sm font-semibold text-cyan-300">Workflow Steps:</p>
+                  <p className="text-sm font-semibold text-cyan-300">
+                    Workflow Steps:
+                  </p>
                   <ul className="space-y-1">
                     {stacker.workflow.map((step, idx) => (
-                      <li key={idx} className="text-sm text-slate-300 flex items-start">
+                      <li
+                        key={idx}
+                        className="text-sm text-slate-300 flex items-start"
+                      >
                         <span className="text-cyan-400 mr-2">→</span>
                         {step}
                       </li>
@@ -218,7 +268,8 @@ export default function FeaturesPage() {
           <div className="text-center mb-10">
             <h2 className="text-3xl font-bold mb-4">Dataset Analyzers</h2>
             <p className="text-slate-300 max-w-2xl mx-auto">
-              Extract structured metadata from datasets at registration time, enabling quality assurance and a tailored method of visualization.
+              Extract structured metadata from datasets at registration time,
+              enabling quality assurance and a tailored method of visualization.
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -227,13 +278,22 @@ export default function FeaturesPage() {
                 key={index}
                 className="bg-slate-800/50 backdrop-blur-sm border border-slate-600 rounded-xl p-8 transition-all tile"
               >
-                <h3 className="text-xl font-semibold mb-3 text-white">{analyzer.name}</h3>
-                <p className="text-slate-200 mb-4 leading-relaxed">{analyzer.description}</p>
+                <h3 className="text-xl font-semibold mb-3 text-white">
+                  {analyzer.name}
+                </h3>
+                <p className="text-slate-200 mb-4 leading-relaxed">
+                  {analyzer.description}
+                </p>
                 <div className="space-y-2">
-                  <p className="text-sm font-semibold text-cyan-300">Analyzer Outputs:</p>
+                  <p className="text-sm font-semibold text-cyan-300">
+                    Analyzer Outputs:
+                  </p>
                   <ul className="space-y-1">
                     {analyzer.outputs.map((output, idx) => (
-                      <li key={idx} className="text-sm text-slate-300 flex items-start">
+                      <li
+                        key={idx}
+                        className="text-sm text-slate-300 flex items-start"
+                      >
                         <span className="text-cyan-400 mr-2">•</span>
                         {output}
                       </li>
@@ -247,15 +307,28 @@ export default function FeaturesPage() {
 
         {/* Key Differentiators */}
         <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-600 rounded-xl p-8 transition-all tile">
-          <h2 className="text-2xl font-bold mb-6 text-white text-center">Key Differentiators</h2>
+          <h2 className="text-2xl font-bold mb-6 text-white text-center">
+            Key Differentiators
+          </h2>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-slate-200">
             <div>
-              <h3 className="text-cyan-400 font-semibold mb-2">For Non-Technical Researchers</h3>
-              <p>Graphical interface eliminates command-line barriers while maintaining full control over analysis parameters and model configurations.</p>
+              <h3 className="text-cyan-400 font-semibold mb-2">
+                For Non-Technical Researchers
+              </h3>
+              <p>
+                Graphical interface eliminates command-line barriers while
+                maintaining full control over analysis parameters and model
+                configurations.
+              </p>
             </div>
             <div>
-              <h3 className="text-cyan-400 font-semibold mb-2">For Technical Teams</h3>
-              <p>Extensible architecture with well-documented APIs enables integration of proprietary tools and custom analysis pipelines.</p>
+              <h3 className="text-cyan-400 font-semibold mb-2">
+                For Technical Teams
+              </h3>
+              <p>
+                Extensible architecture with well-documented APIs enables
+                integration of proprietary tools and custom analysis pipelines.
+              </p>
             </div>
           </div>
         </div>
@@ -266,25 +339,24 @@ export default function FeaturesPage() {
             Ready to explore VoxKit&apos;s capabilities in depth?
           </p>
           <div className="flex flex-wrap justify-center gap-4">
-      
             <GridButton
-  href="/docs"
-  className="text-lg px-8 py-4 rounded-lg text-cyan-400 border-cyan-400"
->
-  API Documentation
-</GridButton>
+              href="/docs"
+              className="text-lg px-8 py-4 rounded-lg text-cyan-400 border-cyan-400"
+            >
+              API Documentation
+            </GridButton>
+            <GridButton
+              href="/foundations"
+              className="text-lg px-8 py-4 rounded-lg text-cyan-400 border-cyan-400"
+            >
+              Research Foundations
+            </GridButton>
             <GridButton
-   href="/foundations"
-  className="text-lg px-8 py-4 rounded-lg text-cyan-400 border-cyan-400"
->
-  Research Foundations
-</GridButton>
-<GridButton
-  href="/download"
-  className="text-lg px-8 py-4 rounded-lg text-cyan-400 border-cyan-400"
->
-  Download VoxKit
-</GridButton>
+              href="/download"
+              className="text-lg px-8 py-4 rounded-lg text-cyan-400 border-cyan-400"
+            >
+              Download VoxKit
+            </GridButton>
           </div>
         </div>
       </div>
@@ -292,4 +364,4 @@ export default function FeaturesPage() {
       <Footer />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/foundations/page.tsx b/app/foundations/page.tsx
index 682dc21..7920392 100644
--- a/app/foundations/page.tsx
+++ b/app/foundations/page.tsx
@@ -1,6 +1,6 @@
-"use client"
-import { Footer, Navbar } from '../../layout';
-import { BookOpen, Users, AlertCircle, TrendingUp } from 'lucide-react';
+"use client";
+import { Footer, Navbar } from "../../layout";
+import { BookOpen, Users, AlertCircle, TrendingUp } from "lucide-react";
 
 export default function InspirationPage() {
   const researchFindings = [
@@ -8,49 +8,64 @@ export default function InspirationPage() {
       icon: <BookOpen className="w-6 h-6" />,
       title: "MFA Achieves Human-Level Reliability",
       source: "Mahr et al., 2021",
-      finding: "MFA-SAT reached 86% accuracy on child speech (ages 3-6), the only system approaching human interrater agreement.",
-      implementation: "VoxKit defaults to MFA while supporting alternative engines for comparative research.",
-      limitation: "MFA-SAT was trained on adult speech; researchers should validate performance on their specific datasets."
+      finding:
+        "MFA-SAT reached 86% accuracy on child speech (ages 3-6), the only system approaching human interrater agreement.",
+      implementation:
+        "VoxKit defaults to MFA while supporting alternative engines for comparative research.",
+      limitation:
+        "MFA-SAT was trained on adult speech; researchers should validate performance on their specific datasets.",
     },
     {
       icon: <TrendingUp className="w-6 h-6" />,
       title: "Phoneme Class Reliability Varies",
       source: "Mahr et al., 2021",
-      finding: "Vowels showed 83% accuracy across systems. Fricative accuracy improved significantly with child age (OR = 1.29/year).",
-      implementation: "VoxKit tracks alignment metadata and speaker age, enabling age-stratified accuracy analysis.",
-      limitation: "These patterns emerged from elicited single-word productions and may not generalize to spontaneous speech."
+      finding:
+        "Vowels showed 83% accuracy across systems. Fricative accuracy improved significantly with child age (OR = 1.29/year).",
+      implementation:
+        "VoxKit tracks alignment metadata and speaker age, enabling age-stratified accuracy analysis.",
+      limitation:
+        "These patterns emerged from elicited single-word productions and may not generalize to spontaneous speech.",
     },
     {
       icon: <AlertCircle className="w-6 h-6" />,
       title: "Clinical AI Often Overfits Small Datasets",
       source: "Berisha & Liss, 2024",
-      finding: "Most clinical speech datasets contain only minutes to hours of audio with uncertain labels, leading to poor generalization.",
-      implementation: "VoxKit enables comprehensive metadata tracking and versioned provenance for transparent reporting.",
-      limitation: "VoxKit facilitates rigorous documentation but cannot solve fundamental overfitting—researchers must apply appropriate validation."
+      finding:
+        "Most clinical speech datasets contain only minutes to hours of audio with uncertain labels, leading to poor generalization.",
+      implementation:
+        "VoxKit enables comprehensive metadata tracking and versioned provenance for transparent reporting.",
+      limitation:
+        "VoxKit facilitates rigorous documentation but cannot solve fundamental overfitting—researchers must apply appropriate validation.",
     },
     {
       icon: <Users className="w-6 h-6" />,
       title: "Interpretable Measures Outperform Black Boxes",
       source: "Berisha & Liss, 2024",
-      finding: "Low-dimensional, clinically grounded measures (e.g., hypernasality, articulatory precision) outperform opaque embeddings.",
-      implementation: "VoxKit's analyzer architecture supports custom, interpretable feature extraction from alignment outputs.",
-      limitation: "Alignment errors can propagate to downstream measures. Researchers must validate that phonetic boundaries are reliable for their specific analyses."
-    }
+      finding:
+        "Low-dimensional, clinically grounded measures (e.g., hypernasality, articulatory precision) outperform opaque embeddings.",
+      implementation:
+        "VoxKit's analyzer architecture supports custom, interpretable feature extraction from alignment outputs.",
+      limitation:
+        "Alignment errors can propagate to downstream measures. Researchers must validate that phonetic boundaries are reliable for their specific analyses.",
+    },
   ];
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
       <Navbar view="Foundations" />
-      
+
       <div className="pt-32 pb-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="text-center mb-16">
           <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-400 via-blue-300 to-cyan-400 bg-clip-text text-transparent">
             Research Foundations
           </h1>
-            <p className="text-xl text-slate-300 max-w-3xl mx-auto">
-            VoxKit acts on (and interprets) findings from key research studies in speech pathology to <span className="text-blue-300">support research teams</span> and <span className="text-blue-300">reduce technical barriers</span>.
-            </p>
+          <p className="text-xl text-slate-300 max-w-3xl mx-auto">
+            VoxKit acts on (and interprets) findings from key research studies
+            in speech pathology to{" "}
+            <span className="text-blue-300">support research teams</span> and{" "}
+            <span className="text-blue-300">reduce technical barriers</span>.
+          </p>
         </div>
 
         {/* Research Findings Grid */}
@@ -65,24 +80,32 @@ export default function InspirationPage() {
                   {item.icon}
                 </div>
                 <div>
-                  <h3 className="text-xl font-semibold text-white mb-1">{item.title}</h3>
+                  <h3 className="text-xl font-semibold text-white mb-1">
+                    {item.title}
+                  </h3>
                   <p className="text-sm text-slate-400 italic">{item.source}</p>
                 </div>
               </div>
-              
+
               <div className="space-y-4 ml-10">
                 <div>
-                  <p className="text-sm font-semibold text-cyan-300 mb-1">Key Finding</p>
+                  <p className="text-sm font-semibold text-cyan-300 mb-1">
+                    Key Finding
+                  </p>
                   <p className="text-slate-200">{item.finding}</p>
                 </div>
-                
+
                 <div>
-                  <p className="text-sm font-semibold text-green-300 mb-1">VoxKit Implementation</p>
+                  <p className="text-sm font-semibold text-green-300 mb-1">
+                    VoxKit Implementation
+                  </p>
                   <p className="text-slate-200">{item.implementation}</p>
                 </div>
-                
+
                 <div>
-                  <p className="text-sm font-semibold text-amber-300 mb-1">Critical Consideration</p>
+                  <p className="text-sm font-semibold text-amber-300 mb-1">
+                    Critical Consideration
+                  </p>
                   <p className="text-slate-200">{item.limitation}</p>
                 </div>
               </div>
@@ -92,24 +115,44 @@ export default function InspirationPage() {
 
         {/* Summary Box */}
         <div className="bg-gradient-to-r from-slate-800/80 to-slate-700/80 backdrop-blur-sm border border-slate-500 rounded-2xl p-10 tile">
-          <h2 className="text-2xl font-bold mb-4 text-white">VoxKit&apos;s Research-Driven Design</h2>
+          <h2 className="text-2xl font-bold mb-4 text-white">
+            VoxKit&apos;s Research-Driven Design
+          </h2>
           <div className="space-y-3 text-slate-200">
             <p>
-              <span className="text-cyan-400 font-semibold">Guided workflows:</span> Guidance and layout can be customized to fit the direction and use case for specific studies/research
+              <span className="text-cyan-400 font-semibold">
+                Guided workflows:
+              </span>{" "}
+              Guidance and layout can be customized to fit the direction and use
+              case for specific studies/research
             </p>
             <p>
-              <span className="text-cyan-400 font-semibold">Flexible architecture:</span> Base classes and modular components allow developers to extend and adapt VoxKit
+              <span className="text-cyan-400 font-semibold">
+                Flexible architecture:
+              </span>{" "}
+              Base classes and modular components allow developers to extend and
+              adapt VoxKit
             </p>
             <p>
-              <span className="text-cyan-400 font-semibold">Metadata-rich outputs:</span> Metadata tracking enables reportable results and and reduces overhead
+              <span className="text-cyan-400 font-semibold">
+                Metadata-rich outputs:
+              </span>{" "}
+              Metadata tracking enables reportable results and and reduces
+              overhead
             </p>
             <p>
-              <span className="text-cyan-400 font-semibold">Honest positioning:</span> VoxKit is research infrastructure, not a clinical decision-support system, it reduces technical barriers while maintaining scientific rigor
+              <span className="text-cyan-400 font-semibold">
+                Honest positioning:
+              </span>{" "}
+              VoxKit is research infrastructure, not a clinical decision-support
+              system, it reduces technical barriers while maintaining scientific
+              rigor
             </p>
-          </div> 
+          </div>
           <div className="mt-8 pt-6 border-t border-slate-600">
             <p className="text-sm text-slate-300 italic">
-              VoxKit prioritizes usability, flexibility, and transparency to empower researchers to utilize the cutting edge.
+              VoxKit prioritizes usability, flexibility, and transparency to
+              empower researchers to utilize the cutting edge.
             </p>
           </div>
         </div>
@@ -118,4 +161,4 @@ export default function InspirationPage() {
       <Footer />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/globals.css b/app/globals.css
index cd5fee4..f54bba4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,7 +1,7 @@
 @import "tailwindcss";
 
 :root {
-  --background: #141d32; 
+  --background: #141d32;
   --foreground: #171717;
 }
 
@@ -46,20 +46,31 @@ body {
 .fall-in {
   display: inline-block;
   transform-origin: center;
-  animation: fallIn 760ms cubic-bezier(.2,.9,.2,1) both;
+  animation: fallIn 760ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
+}
+.fall-in.delay-1 {
+  animation-delay: 90ms;
+}
+.fall-in.delay-2 {
+  animation-delay: 180ms;
 }
-.fall-in.delay-1 { animation-delay: 90ms; }
-.fall-in.delay-2 { animation-delay: 180ms; }
 
 /* @media (prefers-reduced-motion: reduce) {
   .fall-in { animation: none !important; transform: none !important; }
 } */
 
 @keyframes gradient-shift {
-  0%, 100% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+.animate-gradient-shift {
+  animation: gradient-shift 20s ease infinite;
 }
-.animate-gradient-shift { animation: gradient-shift 20s ease infinite; }
 /* Tile overlay to introduce the subtle white/grey highlights used in the wave */
 .tile {
   position: relative;
@@ -72,7 +83,12 @@ body {
   inset: 0;
   pointer-events: none;
   /* subtle white/grey highlight gradient matching wave accents */
-  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(254,254,254,0.1) 50%, rgba(255,255,255,0.03) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.18) 0%,
+    rgba(254, 254, 254, 0.1) 50%,
+    rgba(255, 255, 255, 0.03) 100%
+  );
   mix-blend-mode: overlay;
   border-radius: inherit;
 }
@@ -142,7 +158,7 @@ nav *::after {
   background: #f1f5f9;
   padding: 0.125rem 0.375rem;
   border-radius: 0.25rem;
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   font-size: 0.875em;
   color: #dc2626;
 }
@@ -190,6 +206,3 @@ nav *::after {
 .api-docs-content a:hover {
   text-decoration: underline;
 }
-
-
-
diff --git a/app/help/[topic]/page.tsx b/app/help/[topic]/page.tsx
index b5016ce..dcd5d3e 100644
--- a/app/help/[topic]/page.tsx
+++ b/app/help/[topic]/page.tsx
@@ -1,10 +1,10 @@
-"use client"
+"use client";
 
-import { use } from 'react';
-import { notFound } from 'next/navigation';
-import { Footer, Navbar } from '../../../layout';
-import helpContent from '../../../data/help-content.json';
-import Link from 'next/link';
+import { use } from "react";
+import { notFound } from "next/navigation";
+import { Footer, Navbar } from "../../../layout";
+import helpContent from "../../../data/help-content.json";
+import Link from "next/link";
 
 interface Section {
   type: string;
@@ -22,7 +22,7 @@ interface HelpTopic {
 
 type HelpContent = {
   [key: string]: HelpTopic;
-}
+};
 
 const typedHelpContent = helpContent as HelpContent;
 
@@ -41,26 +41,33 @@ export default function HelpTopicPage({ params }: PageProps) {
   const allTopics = Object.keys(typedHelpContent);
   const currentIndex = allTopics.indexOf(topic);
   const previousTopic = currentIndex > 0 ? allTopics[currentIndex - 1] : null;
-  const nextTopic = currentIndex < allTopics.length - 1 ? allTopics[currentIndex + 1] : null;
+  const nextTopic =
+    currentIndex < allTopics.length - 1 ? allTopics[currentIndex + 1] : null;
 
   const renderSection = (section: Section, index: number) => {
     switch (section.type) {
-      case 'text':
+      case "text":
         return (
-          <p key={index} className="text-lg text-slate-300 leading-relaxed mb-6">
+          <p
+            key={index}
+            className="text-lg text-slate-300 leading-relaxed mb-6"
+          >
             {section.content}
           </p>
         );
-      
-      case 'heading':
+
+      case "heading":
         return (
-          <h2 key={index} className="text-2xl font-bold text-white mt-10 mb-4 flex items-center">
+          <h2
+            key={index}
+            className="text-2xl font-bold text-white mt-10 mb-4 flex items-center"
+          >
             <span className="w-1 h-8 bg-blue-500 mr-3 rounded"></span>
             {section.content}
           </h2>
         );
-      
-      case 'list':
+
+      case "list":
         return (
           <ul key={index} className="space-y-3 mb-6 ml-4">
             {section.items?.map((item, itemIndex) => (
@@ -71,14 +78,21 @@ export default function HelpTopicPage({ params }: PageProps) {
             ))}
           </ul>
         );
-      
-      case 'code':
+
+      case "code":
         return (
-          <div key={index} className="mb-6 rounded-lg overflow-hidden border border-slate-700">
+          <div
+            key={index}
+            className="mb-6 rounded-lg overflow-hidden border border-slate-700"
+          >
             <div className="bg-slate-800 px-4 py-2 flex items-center justify-between border-b border-slate-700">
-              <span className="text-sm text-slate-400 font-mono">{section.language || 'code'}</span>
-              <button 
-                onClick={() => navigator.clipboard.writeText(section.content || '')}
+              <span className="text-sm text-slate-400 font-mono">
+                {section.language || "code"}
+              </span>
+              <button
+                onClick={() =>
+                  navigator.clipboard.writeText(section.content || "")
+                }
                 className="text-xs text-blue-400 hover:text-blue-300 transition-colors"
               >
                 Copy
@@ -91,7 +105,7 @@ export default function HelpTopicPage({ params }: PageProps) {
             </pre>
           </div>
         );
-      
+
       default:
         return null;
     }
@@ -100,100 +114,171 @@ export default function HelpTopicPage({ params }: PageProps) {
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
       <Navbar view="Help" />
-      
+
       <div className="pt-24 pb-16 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Breadcrumb */}
         <div className="mb-8">
-          <Link 
-        href="/help" 
-        className="text-blue-400 hover:text-blue-300 transition-colors inline-flex items-center"
+          <Link
+            href="/help"
+            className="text-blue-400 hover:text-blue-300 transition-colors inline-flex items-center"
           >
-        <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-        </svg>
-        Back to Help Center
+            <svg
+              className="w-4 h-4 mr-2"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+            Back to Help Center
           </Link>
         </div>
 
         {/* Header */}
         <div className="mb-12">
           <div className="flex items-center justify-center mb-4">
-        <span className="text-6xl mr-4">{helpTopic.icon}</span>
-        <div>
-          <h1 className="text-4xl md:text-5xl font-bold text-white mb-2">
-            {helpTopic.title}
-          </h1>
-          <p className="text-xl text-slate-400">
-            {helpTopic.description}
-          </p>
-        </div>
+            <span className="text-6xl mr-4">{helpTopic.icon}</span>
+            <div>
+              <h1 className="text-4xl md:text-5xl font-bold text-white mb-2">
+                {helpTopic.title}
+              </h1>
+              <p className="text-xl text-slate-400">{helpTopic.description}</p>
+            </div>
           </div>
         </div>
 
         {/* Content */}
         <div className="bg-slate-800/50 backdrop-blur-sm rounded-2xl p-8 md:p-12 border border-slate-700 shadow-2xl mb-12">
-          {helpTopic.sections.map((section, index) => renderSection(section, index))}
+          {helpTopic.sections.map((section, index) =>
+            renderSection(section, index),
+          )}
         </div>
 
         {/* Navigation */}
         <div className="flex justify-between items-center pt-8 border-t border-slate-700">
           <div className="flex-1">
-        {previousTopic && (
-          <Link 
-            href={`/help/${previousTopic}`}
-            className="group inline-flex items-center text-slate-300 hover:text-white transition-colors"
-          >
-            <svg className="w-5 h-5 mr-2 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-            </svg>
-            <div className="text-left">
-          <div className="text-xs text-slate-500 uppercase tracking-wide">Previous</div>
-          <div className="font-medium">{typedHelpContent[previousTopic].title}</div>
-            </div>
-          </Link>
-        )}
+            {previousTopic && (
+              <Link
+                href={`/help/${previousTopic}`}
+                className="group inline-flex items-center text-slate-300 hover:text-white transition-colors"
+              >
+                <svg
+                  className="w-5 h-5 mr-2 group-hover:-translate-x-1 transition-transform"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 19l-7-7 7-7"
+                  />
+                </svg>
+                <div className="text-left">
+                  <div className="text-xs text-slate-500 uppercase tracking-wide">
+                    Previous
+                  </div>
+                  <div className="font-medium">
+                    {typedHelpContent[previousTopic].title}
+                  </div>
+                </div>
+              </Link>
+            )}
           </div>
-          
+
           <div className="flex-1 text-right">
-        {nextTopic && (
-          <Link 
-            href={`/help/${nextTopic}`}
-            className="group inline-flex items-center text-slate-300 hover:text-white transition-colors"
-          >
-            <div className="text-right">
-          <div className="text-xs text-slate-500 uppercase tracking-wide">Next</div>
-          <div className="font-medium">{typedHelpContent[nextTopic].title}</div>
-            </div>
-            <svg className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-          </Link>
-        )}
+            {nextTopic && (
+              <Link
+                href={`/help/${nextTopic}`}
+                className="group inline-flex items-center text-slate-300 hover:text-white transition-colors"
+              >
+                <div className="text-right">
+                  <div className="text-xs text-slate-500 uppercase tracking-wide">
+                    Next
+                  </div>
+                  <div className="font-medium">
+                    {typedHelpContent[nextTopic].title}
+                  </div>
+                </div>
+                <svg
+                  className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
+                </svg>
+              </Link>
+            )}
           </div>
         </div>
 
         {/* Quick Links */}
         <div className="mt-12 p-6 bg-blue-900/20 border border-blue-800/30 rounded-xl">
-            <div className="grid md:grid-cols-3 gap-4 text-sm ">
-          <a href="https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop/issues" className="text-slate-300 hover:text-white transition-colors flex items-center justify-center">
-            <svg className="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-            </svg>
-            GitHub Issues
-          </a>
-          <a href="mailto:support@voxkit.dev" className="text-slate-300 hover:text-white transition-colors flex items-center justify-center">
-            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-            </svg>
-            Email Support
-          </a>
-          <Link href="/docs" className="text-slate-300 hover:text-white transition-colors flex items-center justify-center">
-            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-            Documentation
-          </Link>
-            </div>
+          <div className="grid md:grid-cols-3 gap-4 text-sm ">
+            <a
+              href="https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop/issues"
+              className="text-slate-300 hover:text-white transition-colors flex items-center justify-center"
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+              </svg>
+              GitHub Issues
+            </a>
+            <a
+              href="mailto:support@voxkit.dev"
+              className="text-slate-300 hover:text-white transition-colors flex items-center justify-center"
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                />
+              </svg>
+              Email Support
+            </a>
+            <Link
+              href="/docs"
+              className="text-slate-300 hover:text-white transition-colors flex items-center justify-center"
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                />
+              </svg>
+              Documentation
+            </Link>
+          </div>
         </div>
       </div>
 
diff --git a/app/help/page.tsx b/app/help/page.tsx
index 2d02c38..45a3eda 100644
--- a/app/help/page.tsx
+++ b/app/help/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { Footer, Navbar } from '../../layout';
-import helpContent from '../../data/help-content.json';
-import Link from 'next/link';
-import GridBackground from '../../components/GridBackground';
+import { Footer, Navbar } from "../../layout";
+import helpContent from "../../data/help-content.json";
+import Link from "next/link";
+import GridBackground from "../../components/GridBackground";
 
 interface HelpTopic {
   title: string;
@@ -23,7 +23,7 @@ export default function HelpPage() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
       <Navbar view="Help" />
-      
+
       <div className="pt-24 pb-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Header */}
         <div className="text-center mb-16">
@@ -31,7 +31,8 @@ export default function HelpPage() {
             Help Center
           </h1>
           <p className="text-xl text-slate-300 max-w-3xl mx-auto">
-            Find answers, learn features, and get the most out of VoxKit with our comprehensive guides and documentation.
+            Find answers, learn features, and get the most out of VoxKit with
+            our comprehensive guides and documentation.
           </p>
         </div>
 
@@ -43,26 +44,39 @@ export default function HelpPage() {
               placeholder="Search help topics..."
               className="w-full px-6 py-4 bg-slate-800/70 border border-slate-600 rounded-2xl text-white placeholder-slate-400 focus:outline-none focus:border-cyan-400 focus:ring-2 focus:ring-cyan-400/20 transition-all backdrop-blur-sm"
               onInput={(e) => {
-                const searchTerm = (e.target as HTMLInputElement).value.toLowerCase();
-                document.querySelectorAll('[data-topic]').forEach((card) => {
-                  const topic = card.getAttribute('data-topic') || '';
-                  const title = card.querySelector('h3')?.textContent?.toLowerCase() || '';
-                  const desc = card.querySelector('p')?.textContent?.toLowerCase() || '';
-                  if (title.includes(searchTerm) || desc.includes(searchTerm) || topic.includes(searchTerm)) {
-                    (card as HTMLElement).style.display = '';
+                const searchTerm = (
+                  e.target as HTMLInputElement
+                ).value.toLowerCase();
+                document.querySelectorAll("[data-topic]").forEach((card) => {
+                  const topic = card.getAttribute("data-topic") || "";
+                  const title =
+                    card.querySelector("h3")?.textContent?.toLowerCase() || "";
+                  const desc =
+                    card.querySelector("p")?.textContent?.toLowerCase() || "";
+                  if (
+                    title.includes(searchTerm) ||
+                    desc.includes(searchTerm) ||
+                    topic.includes(searchTerm)
+                  ) {
+                    (card as HTMLElement).style.display = "";
                   } else {
-                    (card as HTMLElement).style.display = 'none';
+                    (card as HTMLElement).style.display = "none";
                   }
                 });
               }}
             />
-            <svg 
+            <svg
               className="absolute right-6 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400"
-              fill="none" 
-              stroke="currentColor" 
+              fill="none"
+              stroke="currentColor"
               viewBox="0 0 24 24"
             >
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              />
             </svg>
           </div>
         </div>
@@ -90,13 +104,18 @@ export default function HelpPage() {
                       {topic.title}
                     </h3>
                   </div>
-                  <svg 
+                  <svg
                     className="w-5 h-5 text-slate-500"
-                    fill="none" 
-                    stroke="currentColor" 
+                    fill="none"
+                    stroke="currentColor"
                     viewBox="0 0 24 24"
                   >
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5l7 7-7 7"
+                    />
                   </svg>
                 </div>
                 <p className="text-slate-400 leading-relaxed">
@@ -109,7 +128,9 @@ export default function HelpPage() {
 
         {/* Quick Access Section */}
         <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-600 rounded-2xl p-8 md:p-12 shadow-xl shadow-black/20">
-          <h2 className="text-3xl font-bold mb-8 text-center text-white">Quick Access</h2>
+          <h2 className="text-3xl font-bold mb-8 text-center text-white">
+            Quick Access
+          </h2>
           <div className="grid md:grid-cols-3 gap-6">
             <GridBackground
               cellSize={26}
@@ -118,19 +139,27 @@ export default function HelpPage() {
               hoverRadius={140}
               className="rounded-xl border border-slate-700 overflow-hidden bg-slate-900/30"
             >
-              <a 
+              <a
                 href="https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="flex flex-col items-center text-center p-6 h-full"
               >
                 <div className="w-16 h-16 bg-blue-500/10 rounded-full flex items-center justify-center mb-4">
-                  <svg className="w-8 h-8 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                  <svg
+                    className="w-8 h-8 text-blue-400"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
                   </svg>
                 </div>
-                <h3 className="text-lg font-semibold mb-2 text-white">GitHub</h3>
-                <p className="text-sm text-slate-400">Report issues and contribute</p>
+                <h3 className="text-lg font-semibold mb-2 text-white">
+                  GitHub
+                </h3>
+                <p className="text-sm text-slate-400">
+                  Report issues and contribute
+                </p>
               </a>
             </GridBackground>
 
@@ -141,16 +170,28 @@ export default function HelpPage() {
               hoverRadius={140}
               className="rounded-xl border border-slate-700 overflow-hidden bg-slate-900/30"
             >
-              <a 
+              <a
                 href="mailto:bfrey6@wisc.edu"
                 className="flex flex-col items-center text-center p-6 h-full"
               >
                 <div className="w-16 h-16 bg-purple-500/10 rounded-full flex items-center justify-center mb-4">
-                  <svg className="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                  <svg
+                    className="w-8 h-8 text-purple-400"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+                    />
                   </svg>
                 </div>
-                <h3 className="text-lg font-semibold mb-2 text-white">Email Support</h3>
+                <h3 className="text-lg font-semibold mb-2 text-white">
+                  Email Support
+                </h3>
                 <p className="text-sm text-slate-400">Get help from our team</p>
               </a>
             </GridBackground>
@@ -162,16 +203,28 @@ export default function HelpPage() {
               hoverRadius={140}
               className="rounded-xl border border-slate-700 overflow-hidden bg-slate-900/30"
             >
-              <Link 
+              <Link
                 href="/docs"
                 className="flex flex-col items-center text-center p-6 h-full"
               >
                 <div className="w-16 h-16 bg-green-500/10 rounded-full flex items-center justify-center mb-4">
-                  <svg className="w-8 h-8 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                  <svg
+                    className="w-8 h-8 text-green-400"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                    />
                   </svg>
                 </div>
-                <h3 className="text-lg font-semibold mb-2 text-white">Documentation</h3>
+                <h3 className="text-lg font-semibold mb-2 text-white">
+                  Documentation
+                </h3>
                 <p className="text-sm text-slate-400">Complete API reference</p>
               </Link>
             </GridBackground>
@@ -182,4 +235,4 @@ export default function HelpPage() {
       <Footer />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 6267fac..0168b5b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -20,7 +20,8 @@ const poppins = Poppins({
 
 export const metadata: Metadata = {
   title: "VoxKit - Audio Toolkit",
-  description: "A professional GUI for speech pathology researchers. Access cutting-edge alignment and analysis tools without the technical complexity.",
+  description:
+    "A professional GUI for speech pathology researchers. Access cutting-edge alignment and analysis tools without the technical complexity.",
 };
 
 export default function RootLayout({
@@ -33,7 +34,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} ${poppins.variable} antialiased`}
       >
-        {children} 
+        {children}
       </body>
     </html>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 21f7ef8..4518cf7 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,50 +1,58 @@
-"use client"
-import { Download, ChevronDown, Clock, FileCheck, FolderSync, Users } from 'lucide-react';
-import WaveSeparator from '../components/WaveSeparator';
-import GridButton from '../components/GridButton';
-import { Footer, Navbar } from '../layout';
+"use client";
+import {
+  Download,
+  ChevronDown,
+  Clock,
+  FileCheck,
+  FolderSync,
+  Users,
+} from "lucide-react";
+import WaveSeparator from "../components/WaveSeparator";
+import GridButton from "../components/GridButton";
+import { Footer, Navbar } from "../layout";
 
 export default function VoxKitLanding() {
-
   const features = [
     {
       icon: <Clock className="w-8 h-8" />,
       title: "Save Time & Money",
-      description: "Face it, you didn't get into speech pathology to sit hunched over in a computer terminal all day. What once took days of scripting and debugging now takes minutes. Spend your time on research, not wrestling with command-line tools."
+      description:
+        "Face it, you didn't get into speech pathology to sit hunched over in a computer terminal all day. What once took days of scripting and debugging now takes minutes. Spend your time on research, not wrestling with command-line tools.",
     },
     {
       icon: <FileCheck className="w-8 h-8" />,
       title: "Publish-Ready Outputs",
-      description: "TextGrids, alignments, analysis reports—all formatted and ready to go. Your reviewers will never know how easy it was."
+      description:
+        "TextGrids, alignments, analysis reports—all formatted and ready to go. Your reviewers will never know how easy it was.",
     },
     {
       icon: <FolderSync className="w-8 h-8" />,
       title: "Works With Your Data",
-      description: "Got existing datasets? Bring them. VoxKit plays nice with what you've already built. No reformatting marathons required."
+      description:
+        "Got existing datasets? Bring them. VoxKit plays nice with what you've already built. No reformatting marathons required.",
     },
     {
       icon: <Users className="w-8 h-8" />,
       title: "Built by Researchers",
-      description: "We've been in your shoes—late nights, broken scripts, looming deadlines. VoxKit exists because we needed it too."
-    }
+      description:
+        "We've been in your shoes—late nights, broken scripts, looming deadlines. VoxKit exists because we needed it too.",
+    },
   ];
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-750 via-slate-800 to-slate-900 text-white snap-y snap-mandatory overflow-x-hidden">
       <Navbar />
 
-
-  {/* Hero Section */}
-  <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
-    
-          <div className="max-w-7xl mx-auto text-center">
+      {/* Hero Section */}
+      <section className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
+        <div className="max-w-7xl mx-auto text-center">
           {/* iMessage-style Bubble */}
           <div className="flex justify-start mb-6 max-w-4xl mx-auto">
             <div
               className="relative text-white px-5 py-2.5 rounded-[20px] text-sm font-medium"
               style={{
-                background: 'linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)',
-                maxWidth: '255px',
+                background: "linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%)",
+                maxWidth: "255px",
               }}
             >
               Dear SLP Researchers,
@@ -52,153 +60,160 @@ export default function VoxKitLanding() {
               <span
                 className="absolute bottom-0 -left-[7px] w-5 h-5"
                 style={{
-                  background: '#06b6d4',
-                  borderBottomRightRadius: '16px 14px',
+                  background: "#06b6d4",
+                  borderBottomRightRadius: "16px 14px",
                 }}
               />
               {/* Tail cutout */}
               <span
                 className="absolute bottom-0 -left-[26px] w-[26px] h-5"
                 style={{
-                  background: '#182338',
-                  borderBottomRightRadius: '10px',
+                  background: "#182338",
+                  borderBottomRightRadius: "10px",
                 }}
               />
             </div>
           </div>
           <h1 className="text-5xl sm:text-6xl lg:text-7xl font-bold mb-6 leading-tight relative z-10">
-    <span className="block overflow-visible">
-      <span className="fall-in hero-font text-depth bg-gradient-to-r from-blue-400 via-blue-300 to-cyan-400 bg-clip-text text-transparent">
-        Stop Fighting Tools
-      </span>
-    </span>
-    <span className="block mt-0 overflow-visible">
-      <span className="fall-in delay-1 hero-font text-depth bg-gradient-to-r from-blue-400 via-blue-300 to-cyan-400 bg-clip-text text-transparent">
-        Start Driving Progress
-      </span>
-    </span>
-  </h1>
+            <span className="block overflow-visible">
+              <span className="fall-in hero-font text-depth bg-gradient-to-r from-blue-400 via-blue-300 to-cyan-400 bg-clip-text text-transparent">
+                Stop Fighting Tools
+              </span>
+            </span>
+            <span className="block mt-0 overflow-visible">
+              <span className="fall-in delay-1 hero-font text-depth bg-gradient-to-r from-blue-400 via-blue-300 to-cyan-400 bg-clip-text text-transparent">
+                Start Driving Progress
+              </span>
+            </span>
+          </h1>
           <p className="text-xl sm:text-2xl text-slate-300 mb-8 max-w-3xl mx-auto leading-relaxed">
-            We built VoxKit so you can focus on the science, not the software. Powerful alignment and analysis tools, zero command-line headaches.
+            We built VoxKit so you can focus on the science, not the software.
+            Powerful alignment and analysis tools, zero command-line headaches.
           </p>
 
           {/* CTA Buttons */}
 
-         <GridButton
-  href="/help/getting-started"
-  className="text-lg px-8 py-4 rounded-lg text-cyan-400 border-cyan-400"
->
-  Get Started Today
-</GridButton>
+          <GridButton
+            href="/help/getting-started"
+            className="text-lg px-8 py-4 rounded-lg text-cyan-400 border-cyan-400"
+          >
+            Get Started Today
+          </GridButton>
         </div>
         <div className="absolute bottom-0 left-0 right-0 -mb-1">
-
-      
-    <WaveSeparator 
-      color="#0ea5e9" 
-      height={40} 
-      waveOffset={20} 
-      className="w-full"
-    />
-  </div>
+          <WaveSeparator
+            color="#0ea5e9"
+            height={40}
+            waveOffset={20}
+            className="w-full"
+          />
+        </div>
       </section>
 
-
       {/* Features Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-[#0ea5e9]/18 via-[#0ea5e9]/8 to-[#0ea5e9]/2">
-  <div className="max-w-7xl mx-auto">
-    <div className="text-center mb-16">
-      <h2 className="text-4xl sm:text-5xl font-bold mb-4">
-        Why <span className="text-cyan-400">You&apos;ll Love It</span>
-      </h2>
-      <p className="text-xl text-slate-300 max-w-2xl mx-auto">
-        Seriously, here&apos;s what we&apos;ve been hearing from labs like yours.
-      </p>
-    </div>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl sm:text-5xl font-bold mb-4">
+              Why <span className="text-cyan-400">You&apos;ll Love It</span>
+            </h2>
+            <p className="text-xl text-slate-300 max-w-2xl mx-auto">
+              Seriously, here&apos;s what we&apos;ve been hearing from labs like
+              yours.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             {features.map((feature, index) => (
               <div
                 key={index}
                 className="bg-slate-800/50 backdrop-blur-sm border border-slate-600 rounded-xl p-8 transition-all tile"
               >
-          <div className="text-cyan-400 mb-4">
-            {feature.icon}
+                <div className="text-cyan-400 mb-4">{feature.icon}</div>
+                <h3 className="text-2xl font-semibold mb-3 text-white">
+                  {feature.title}
+                </h3>
+                <p className="text-slate-200 leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+          </div>
+          <div className="flex justify-center mt-12">
+            <GridButton
+              href="/features"
+              className="text-lg px-8 py-4 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white border-white"
+              rippleColor="rgba(255, 255, 255, 0.5)"
+            >
+              See What&apos;s Possible{" "}
+              <ChevronDown className="w-5 h-5 -rotate-90" />
+            </GridButton>
           </div>
-          <h3 className="text-2xl font-semibold mb-3 text-white">{feature.title}</h3>
-          <p className="text-slate-200 leading-relaxed">{feature.description}</p>
         </div>
-      ))}
-    </div>
-    <div className="flex justify-center mt-12">
-      <GridButton
-        href="/features"
-        className="text-lg px-8 py-4 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white border-white"
-        rippleColor='rgba(255, 255, 255, 0.5)'
-      >
-        See What&apos;s Possible  <ChevronDown className="w-5 h-5 -rotate-90" />
-      </GridButton>
-    </div>
-  </div>
-</section>
-
+      </section>
 
       {/* Technical Details Section */}
       <section className="py-20 px-4 sm:px-6 lg:px-8">
-        
         <div className="max-w-7xl mx-auto">
-            <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-600 border rounded-xl p-12 text-center shadow-xl shadow-black/20 tile">
+          <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-600 border rounded-xl p-12 text-center shadow-xl shadow-black/20 tile">
             <h2 className="text-3xl sm:text-4xl font-bold mb-6 text-white">
               The Good Stuff Under the Hood
             </h2>
             <p className="text-lg text-slate-100 max-w-3xl mx-auto mb-8">
-              You&apos;re not getting some watered-down toy. VoxKit wraps battle-tested tools like Montreal Forced Aligner (MFA) in a friendly interface. Same powerful algorithms the big labs use, minus the command-line gymnastics.
+              You&apos;re not getting some watered-down toy. VoxKit wraps
+              battle-tested tools like Montreal Forced Aligner (MFA) in a
+              friendly interface. Same powerful algorithms the big labs use,
+              minus the command-line gymnastics.
             </p>
 
-              <GridButton
-  href="/docs"
-  className="text-lg px-8 py-4 rounded-lg text-cyan-400 border-cyan-400"
->
-  Peek under the Hood
-</GridButton>
+            <GridButton
+              href="/docs"
+              className="text-lg px-8 py-4 rounded-lg text-cyan-400 border-cyan-400"
+            >
+              Peek under the Hood
+            </GridButton>
           </div>
         </div>
       </section>
-      <WaveSeparator className="-mt-6 md:-mt-8" color="#0ea5e9" height={40} waveOffset={20}/>
+      <WaveSeparator
+        className="-mt-6 md:-mt-8"
+        color="#0ea5e9"
+        height={40}
+        waveOffset={20}
+      />
 
       {/* Call to Action Section */}
-<section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-[#0ea5e9]/18 via-[#0ea5e9]/8 to-[#0ea5e9]/2">
-  <div className="max-w-7xl mx-auto text-center">      
+      <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-[#0ea5e9]/18 via-[#0ea5e9]/8 to-[#0ea5e9]/2">
+        <div className="max-w-7xl mx-auto text-center">
           <h2 className="text-3xl sm:text-4xl font-bold mb-6">
             Ready to Try It?
           </h2>
           <p className="text-lg text-slate-300 mb-10 max-w-2xl mx-auto">
-            Grab VoxKit and see for yourself. We think you&apos;ll wonder how you ever managed without it.
+            Grab VoxKit and see for yourself. We think you&apos;ll wonder how
+            you ever managed without it.
           </p>
           <div className="flex flex-wrap items-center justify-center gap-4">
-      <GridButton
-  href="/help/expected-workflow"
-  className="text-lg px-8 py-4 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white border-white"
->
-  Expected Workflow
-</GridButton>
-      <GridButton
-  href="/help/getting-started"
-  className="text-lg px-8 py-4 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white border-white"
->
-  <Users className="w-5 h-5" /> Getting Started
-</GridButton>
-      <GridButton
-  href="/download"
-  className="text-lg px-8 py-4 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white border-white"
->
-  <Download className="w-5 h-5" /> Download Now
-</GridButton>
-  
+            <GridButton
+              href="/help/expected-workflow"
+              className="text-lg px-8 py-4 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white border-white"
+            >
+              Expected Workflow
+            </GridButton>
+            <GridButton
+              href="/help/getting-started"
+              className="text-lg px-8 py-4 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white border-white"
+            >
+              <Users className="w-5 h-5" /> Getting Started
+            </GridButton>
+            <GridButton
+              href="/download"
+              className="text-lg px-8 py-4 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 text-white border-white"
+            >
+              <Download className="w-5 h-5" /> Download Now
+            </GridButton>
           </div>
         </div>
       </section>
       <Footer />
-      
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/components/DecisionTree.tsx b/components/DecisionTree.tsx
index b516edf..3616c30 100644
--- a/components/DecisionTree.tsx
+++ b/components/DecisionTree.tsx
@@ -1,9 +1,9 @@
 /**
  * Decision Tree Module
- * 
+ *
  * A module for creating interactive decision trees where users navigate through
  * questions to reach helpful explanations or resources.
- * 
+ *
  * Example usage:
  * ```typescript
  * const tree = new DecisionTree("What do you need help with?");
@@ -11,9 +11,9 @@
  *   "Technical Problem": "technical",
  *   "Account Issue": "account"
  * }, true);
- * tree.addExplanation("technical", "Technical Support", 
+ * tree.addExplanation("technical", "Technical Support",
  *                     "Visit our technical docs at...");
- * 
+ *
  * const widget = new DecisionTreeWidget(tree, document.getElementById('container'));
  * ```
  */
@@ -31,10 +31,10 @@ export type ActionCallback = () => void;
 export abstract class DecisionNode {
   constructor(
     public readonly nodeId: string,
-    public readonly title: string
+    public readonly title: string,
   ) {}
 
-  abstract getType(): 'question' | 'explanation';
+  abstract getType(): "question" | "explanation";
 }
 
 /**
@@ -45,13 +45,13 @@ export class QuestionNode extends DecisionNode {
     nodeId: string,
     title: string,
     public readonly question: string,
-    public readonly choices: Map<string, string>
+    public readonly choices: Map<string, string>,
   ) {
     super(nodeId, title);
   }
 
-  getType(): 'question' {
-    return 'question';
+  getType(): "question" {
+    return "question";
   }
 }
 
@@ -64,13 +64,13 @@ export class ExplanationNode extends DecisionNode {
     title: string,
     public readonly content: string,
     public readonly links: ResourceLink[] = [],
-    public readonly actionCallback?: ActionCallback
+    public readonly actionCallback?: ActionCallback,
   ) {
     super(nodeId, title);
   }
 
-  getType(): 'explanation' {
-    return 'explanation';
+  getType(): "explanation" {
+    return "explanation";
   }
 }
 
@@ -91,7 +91,7 @@ export class DecisionTree {
     title: string,
     question: string,
     choices: Record<string, string>,
-    isRoot: boolean = false
+    isRoot: boolean = false,
   ): this {
     const choicesMap = new Map(Object.entries(choices));
     const node = new QuestionNode(nodeId, title, question, choicesMap);
@@ -112,9 +112,15 @@ export class DecisionTree {
     title: string,
     content: string,
     links?: ResourceLink[],
-    actionCallback?: ActionCallback
+    actionCallback?: ActionCallback,
   ): this {
-    const node = new ExplanationNode(nodeId, title, content, links, actionCallback);
+    const node = new ExplanationNode(
+      nodeId,
+      title,
+      content,
+      links,
+      actionCallback,
+    );
     this.nodes.set(nodeId, node);
     return this;
   }
@@ -162,7 +168,7 @@ export class DecisionTreeWidget {
   constructor(
     tree: DecisionTree,
     container: HTMLElement,
-    listeners: DecisionTreeEventListeners = {}
+    listeners: DecisionTreeEventListeners = {},
   ) {
     this.tree = tree;
     this.container = container;
@@ -174,49 +180,49 @@ export class DecisionTreeWidget {
 
   private setupUI(): void {
     // Clear container
-    this.container.innerHTML = '';
-    this.container.className = 'decision-tree-widget';
+    this.container.innerHTML = "";
+    this.container.className = "decision-tree-widget";
 
     // Apply base styles
     this.applyStyles();
 
     // Create main wrapper
-    const wrapper = document.createElement('div');
-    wrapper.className = 'dt-wrapper';
+    const wrapper = document.createElement("div");
+    wrapper.className = "dt-wrapper";
 
     // Header with title and back button
-    const header = document.createElement('div');
-    header.className = 'dt-header';
+    const header = document.createElement("div");
+    header.className = "dt-header";
 
-    this.backButton = document.createElement('button');
-    this.backButton.className = 'dt-back-button';
-    this.backButton.innerHTML = '← Back';
+    this.backButton = document.createElement("button");
+    this.backButton.className = "dt-back-button";
+    this.backButton.innerHTML = "← Back";
     this.backButton.disabled = true;
-    this.backButton.addEventListener('click', () => this.goBack());
+    this.backButton.addEventListener("click", () => this.goBack());
 
-    this.titleLabel = document.createElement('h2');
-    this.titleLabel.className = 'dt-title';
+    this.titleLabel = document.createElement("h2");
+    this.titleLabel.className = "dt-title";
 
     header.appendChild(this.backButton);
     header.appendChild(this.titleLabel);
 
     // Scrollable content area
-    const scrollContainer = document.createElement('div');
-    scrollContainer.className = 'dt-scroll-container';
+    const scrollContainer = document.createElement("div");
+    scrollContainer.className = "dt-scroll-container";
 
-    this.contentArea = document.createElement('div');
-    this.contentArea.className = 'dt-content';
+    this.contentArea = document.createElement("div");
+    this.contentArea.className = "dt-content";
 
     scrollContainer.appendChild(this.contentArea);
 
     // Footer with reset button
-    const footer = document.createElement('div');
-    footer.className = 'dt-footer';
+    const footer = document.createElement("div");
+    footer.className = "dt-footer";
 
-    this.resetButton = document.createElement('button');
-    this.resetButton.className = 'dt-reset-button';
-    this.resetButton.textContent = 'Start Over';
-    this.resetButton.addEventListener('click', () => this.navigateToRoot());
+    this.resetButton = document.createElement("button");
+    this.resetButton.className = "dt-reset-button";
+    this.resetButton.textContent = "Start Over";
+    this.resetButton.addEventListener("click", () => this.navigateToRoot());
 
     footer.appendChild(this.resetButton);
 
@@ -228,7 +234,7 @@ export class DecisionTreeWidget {
   }
 
   private applyStyles(): void {
-    const style = document.createElement('style');
+    const style = document.createElement("style");
     style.textContent = `
       .decision-tree-widget {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
@@ -403,7 +409,7 @@ export class DecisionTreeWidget {
   }
 
   private clearContent(): void {
-    this.contentArea.innerHTML = '';
+    this.contentArea.innerHTML = "";
   }
 
   private navigateToRoot(): void {
@@ -453,43 +459,43 @@ export class DecisionTreeWidget {
 
   private displayQuestion(node: QuestionNode): void {
     // Question text
-    const questionText = document.createElement('div');
-    questionText.className = 'dt-question-text';
+    const questionText = document.createElement("div");
+    questionText.className = "dt-question-text";
     questionText.textContent = node.question;
     this.contentArea.appendChild(questionText);
 
     // Choice buttons
     node.choices.forEach((nextNodeId, choiceText) => {
-      const button = document.createElement('button');
-      button.className = 'dt-choice-button';
+      const button = document.createElement("button");
+      button.className = "dt-choice-button";
       button.textContent = choiceText;
-      button.addEventListener('click', () => this.navigateTo(nextNodeId));
+      button.addEventListener("click", () => this.navigateTo(nextNodeId));
       this.contentArea.appendChild(button);
     });
   }
 
   private displayExplanation(node: ExplanationNode): void {
     // Content text
-    const content = document.createElement('div');
-    content.className = 'dt-explanation-content';
+    const content = document.createElement("div");
+    content.className = "dt-explanation-content";
     content.textContent = node.content;
     this.contentArea.appendChild(content);
 
     // Links section
     if (node.links.length > 0) {
-      const linksSection = document.createElement('div');
-      linksSection.className = 'dt-links-section';
+      const linksSection = document.createElement("div");
+      linksSection.className = "dt-links-section";
 
-      const linksTitle = document.createElement('div');
-      linksTitle.className = 'dt-links-title';
-      linksTitle.textContent = 'Resources:';
+      const linksTitle = document.createElement("div");
+      linksTitle.className = "dt-links-title";
+      linksTitle.textContent = "Resources:";
       linksSection.appendChild(linksTitle);
 
-      node.links.forEach(link => {
-        const linkButton = document.createElement('button');
-        linkButton.className = 'dt-link-button';
+      node.links.forEach((link) => {
+        const linkButton = document.createElement("button");
+        linkButton.className = "dt-link-button";
         linkButton.innerHTML = `🔗 ${link.text}`;
-        linkButton.addEventListener('click', () => {
+        linkButton.addEventListener("click", () => {
           this.listeners.onLinkClick?.(link.url);
         });
         linksSection.appendChild(linkButton);
@@ -500,10 +506,10 @@ export class DecisionTreeWidget {
 
     // Custom action button
     if (node.actionCallback) {
-      const actionButton = document.createElement('button');
-      actionButton.className = 'dt-action-button';
-      actionButton.textContent = 'Take Action';
-      actionButton.addEventListener('click', node.actionCallback);
+      const actionButton = document.createElement("button");
+      actionButton.className = "dt-action-button";
+      actionButton.textContent = "Take Action";
+      actionButton.addEventListener("click", node.actionCallback);
       this.contentArea.appendChild(actionButton);
     }
   }
@@ -533,6 +539,6 @@ export class DecisionTreeWidget {
    * Destroy the widget and clean up
    */
   public destroy(): void {
-    this.container.innerHTML = '';
+    this.container.innerHTML = "";
   }
-}
\ No newline at end of file
+}
diff --git a/components/DownloadButton.tsx b/components/DownloadButton.tsx
index 26ad1dc..20d53e2 100644
--- a/components/DownloadButton.tsx
+++ b/components/DownloadButton.tsx
@@ -29,7 +29,9 @@ const isPreReleaseVersion = (version: string): boolean => {
 };
 
 export default function DownloadButton() {
-  const [releasesData, setReleasesData] = useState<ReleasesAPIResponse | null>(null);
+  const [releasesData, setReleasesData] = useState<ReleasesAPIResponse | null>(
+    null,
+  );
   const [detectedOS] = useState<OS>(detectOS);
   const [selectedOS, setSelectedOS] = useState<OS>(detectOS);
   const [loading, setLoading] = useState(true);
@@ -57,7 +59,10 @@ export default function DownloadButton() {
     return releasesData.releases[selectedOS];
   };
 
-  const selectBestAsset = (assets: ReleaseAsset[], os: OS): ReleaseAsset | null => {
+  const selectBestAsset = (
+    assets: ReleaseAsset[],
+    os: OS,
+  ): ReleaseAsset | null => {
     if (!assets || assets.length === 0) return null;
     if (assets.length === 1) return assets[0];
 
@@ -96,7 +101,9 @@ export default function DownloadButton() {
   if (loading) {
     return (
       <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-600 rounded-2xl p-8 max-w-4xl mx-auto">
-        <div className="text-center text-slate-400">Loading release information...</div>
+        <div className="text-center text-slate-400">
+          Loading release information...
+        </div>
       </div>
     );
   }
@@ -104,14 +111,17 @@ export default function DownloadButton() {
   if (error || !releasesData) {
     return (
       <div className="bg-slate-800/50 backdrop-blur-sm border border-slate-600 rounded-2xl p-8 max-w-4xl mx-auto">
-        <div className="text-center text-red-400">{error || "No release data available"}</div>
+        <div className="text-center text-red-400">
+          {error || "No release data available"}
+        </div>
       </div>
     );
   }
 
   const currentRelease = getReleaseForOS();
   const availableOSes = Object.keys(releasesData.releases);
-  const hasPreReleaseVersion = !!currentRelease &&
+  const hasPreReleaseVersion =
+    !!currentRelease &&
     (currentRelease.prerelease || isPreReleaseVersion(currentRelease.version));
   const bestAsset = currentRelease
     ? selectBestAsset(currentRelease.assets, selectedOS)
@@ -168,7 +178,9 @@ export default function DownloadButton() {
                     <div className="text-xs text-cyan-400 mt-1">Detected</div>
                   )}
                   {!isAvailable && (
-                    <div className="text-xs text-red-400 mt-1">Not Available</div>
+                    <div className="text-xs text-red-400 mt-1">
+                      Not Available
+                    </div>
                   )}
                 </div>
               </GridButton>
@@ -185,7 +197,8 @@ export default function DownloadButton() {
                   {getOSDisplayName(selectedOS)} • v{currentRelease.version}
                 </h5>
                 <p className="text-sm text-slate-400">
-                  Released {new Date(currentRelease.publishedAt).toLocaleDateString()}
+                  Released{" "}
+                  {new Date(currentRelease.publishedAt).toLocaleDateString()}
                 </p>
                 {bestAsset && (
                   <p className="text-xs text-slate-500 mt-1">
@@ -204,7 +217,9 @@ export default function DownloadButton() {
                     Download
                   </GridButton>
                 ) : (
-                  <span className="text-slate-400 text-sm px-6 py-2">No assets</span>
+                  <span className="text-slate-400 text-sm px-6 py-2">
+                    No assets
+                  </span>
                 )}
                 <GridButton
                   onClick={() => window.open(currentRelease.htmlUrl, "_blank")}
@@ -217,7 +232,8 @@ export default function DownloadButton() {
           </div>
         ) : (
           <div className="bg-slate-700/30 border border-slate-600 rounded-lg p-4 text-center text-slate-400">
-            No release available for {getOSDisplayName(selectedOS) || "this OS"}.
+            No release available for {getOSDisplayName(selectedOS) || "this OS"}
+            .
           </div>
         )}
 
@@ -227,7 +243,7 @@ export default function DownloadButton() {
             Last updated: {new Date(releasesData.lastUpdated).toLocaleString()}
           </p>
           <a
-            href={`https://github.com/${process.env.NEXT_PUBLIC_GITHUB_OWNER || 'owner'}/${process.env.NEXT_PUBLIC_GITHUB_REPO || 'repo'}/releases`}
+            href={`https://github.com/${process.env.NEXT_PUBLIC_GITHUB_OWNER || "owner"}/${process.env.NEXT_PUBLIC_GITHUB_REPO || "repo"}/releases`}
             target="_blank"
             rel="noopener noreferrer"
             className="text-cyan-400 text-sm underline mt-2 inline-block"
diff --git a/components/GridBackground.tsx b/components/GridBackground.tsx
index ebfcebc..eb54ca1 100644
--- a/components/GridBackground.tsx
+++ b/components/GridBackground.tsx
@@ -62,7 +62,7 @@ export default function GridBackground({
     setRipples((r) => [...r, { id, cx: x, cy: y }]);
     const maxDist = Math.hypot(
       Math.max(x, rect.width - x),
-      Math.max(y, rect.height - y)
+      Math.max(y, rect.height - y),
     );
     const lifetime = maxDist / waveSpeed + 400;
     setTimeout(() => {
@@ -76,7 +76,15 @@ export default function GridBackground({
     setHover({ x: e.clientX - rect.left, y: e.clientY - rect.top });
   };
 
-  const cells: { key: string; left: number; top: number; w: number; h: number; cx: number; cy: number }[] = [];
+  const cells: {
+    key: string;
+    left: number;
+    top: number;
+    w: number;
+    h: number;
+    cx: number;
+    cy: number;
+  }[] = [];
   if (size.w > 0 && size.h > 0) {
     for (let r = 0; r < rows; r++) {
       for (let c = 0; c < cols; c++) {
@@ -155,10 +163,18 @@ export default function GridBackground({
 
       <style jsx>{`
         @keyframes gridCellFlash {
-          0% { opacity: 0; }
-          15% { opacity: 0.9; }
-          60% { opacity: 0.3; }
-          100% { opacity: 0; }
+          0% {
+            opacity: 0;
+          }
+          15% {
+            opacity: 0.9;
+          }
+          60% {
+            opacity: 0.3;
+          }
+          100% {
+            opacity: 0;
+          }
         }
         :global(.grid-cell-flash) {
           opacity: 0;
diff --git a/components/GridButton.tsx b/components/GridButton.tsx
index 8f5a519..fc67910 100644
--- a/components/GridButton.tsx
+++ b/components/GridButton.tsx
@@ -74,7 +74,7 @@ export default function GridButton({
 
     const maxDist = Math.hypot(
       Math.max(x, rect.width - x),
-      Math.max(y, rect.height - y)
+      Math.max(y, rect.height - y),
     );
     const lifetime = maxDist / waveSpeed + 650;
 
@@ -196,10 +196,18 @@ export default function GridButton({
       {/* Animation styles */}
       <style jsx global>{`
         @keyframes gridCellFlash {
-          0% { opacity: 0; }
-          12% { opacity: 0.85; }
-          55% { opacity: 0.25; }
-          100% { opacity: 0; }
+          0% {
+            opacity: 0;
+          }
+          12% {
+            opacity: 0.85;
+          }
+          55% {
+            opacity: 0.25;
+          }
+          100% {
+            opacity: 0;
+          }
         }
         .grid-cell-flash {
           opacity: 0;
@@ -208,4 +216,4 @@ export default function GridButton({
       `}</style>
     </Element>
   );
-}
\ No newline at end of file
+}
diff --git a/components/HelpChat.tsx b/components/HelpChat.tsx
index b7fb0b3..2c56a4d 100644
--- a/components/HelpChat.tsx
+++ b/components/HelpChat.tsx
@@ -1,7 +1,7 @@
-"use client"
-import { useEffect, useRef, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { DecisionTree, DecisionTreeWidget } from './DecisionTree';
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { DecisionTree, DecisionTreeWidget } from "./DecisionTree";
 
 export default function HelpChat() {
   const [isOpen, setIsOpen] = useState(false);
@@ -23,9 +23,9 @@ export default function HelpChat() {
           "Learn about VoxKit features": "features",
           "Get help with workflows": "workflows",
           "Troubleshoot issues": "troubleshoot",
-          "Understand concepts": "concepts"
+          "Understand concepts": "concepts",
         },
-        true
+        true,
       );
 
       // Features branch
@@ -38,8 +38,8 @@ export default function HelpChat() {
           "Model training": "training-explain",
           "Dataset management": "datasets-explain",
           "Analysis tools": "analysis-explain",
-          "Go back": "root"
-        }
+          "Go back": "root",
+        },
       );
 
       // Workflows branch
@@ -52,8 +52,8 @@ export default function HelpChat() {
           "Running alignments": "alignment-explain",
           "Running analyses": "analysis-explain",
           "Extracting features": "extraction-explain",
-          "Go back": "root"
-        }
+          "Go back": "root",
+        },
       );
 
       // Troubleshoot branch
@@ -66,8 +66,8 @@ export default function HelpChat() {
           "Configuration issues": "config-explain",
           "Model not working": "models-explain",
           "Dataset errors": "datasets-explain",
-          "Go back": "root"
-        }
+          "Go back": "root",
+        },
       );
 
       // Concepts branch
@@ -80,8 +80,8 @@ export default function HelpChat() {
           "Alignment models": "models-explain",
           "Dataset structure": "datasets-explain",
           "Configuration files": "config-explain",
-          "Go back": "root"
-        }
+          "Go back": "root",
+        },
       );
 
       // Explanation nodes with navigation
@@ -89,67 +89,72 @@ export default function HelpChat() {
         "stackers-explain",
         "Pipeline Stackers",
         "Stackers are VoxKit's main workflow pages that guide you through multi-step speech processing tasks. Each stacker uses numbered steps to help you complete specific workflows.\n\nReady to learn more?",
-        [{ text: "View Complete Stackers Guide", url: "/help/leverage-voxkit" }]
+        [
+          {
+            text: "View Complete Stackers Guide",
+            url: "/help/leverage-voxkit",
+          },
+        ],
       );
 
       tree.addExplanation(
         "training-explain",
         "Model Training",
         "The TrainingStacker helps you train or fine-tune alignment models using existing datasets and alignments. This is perfect for adapting models to your specific research needs.\n\nWant to learn how?",
-        [{ text: "View Training Guide", url: "/help/leverage-voxkit" }]
+        [{ text: "View Training Guide", url: "/help/leverage-voxkit" }],
       );
 
       tree.addExplanation(
         "alignment-explain",
         "Forced Alignment",
         "The AlignmentStacker performs forced alignment on audio files, matching your audio with text transcripts to create precise TextGrids.\n\nLet me show you how.",
-        [{ text: "View Alignment Guide", url: "/help/leverage-voxkit" }]
+        [{ text: "View Alignment Guide", url: "/help/leverage-voxkit" }],
       );
 
       tree.addExplanation(
         "analysis-explain",
         "Acoustic Analysis",
         "The AnalysisStacker runs acoustic analyses on aligned files, extracting valuable measurements from your speech data.\n\nReady to explore?",
-        [{ text: "View Analysis Guide", url: "/help/leverage-voxkit" }]
+        [{ text: "View Analysis Guide", url: "/help/leverage-voxkit" }],
       );
 
       tree.addExplanation(
         "extraction-explain",
         "Feature Extraction",
         "The ExtractionStacker extracts acoustic features from alignments, preparing your data for further statistical analysis.\n\nLet me guide you.",
-        [{ text: "View Extraction Guide", url: "/help/leverage-voxkit" }]
+        [{ text: "View Extraction Guide", url: "/help/leverage-voxkit" }],
       );
 
       tree.addExplanation(
         "install-explain",
         "Installation",
         "Having installation issues? The installation guide covers system requirements, setup steps, and common troubleshooting tips.\n\nGet VoxKit running smoothly!",
-        [{ text: "View Installation Guide", url: "/help/install-voxkit" }]
+        [{ text: "View Installation Guide", url: "/help/install-voxkit" }],
       );
 
       tree.addExplanation(
         "config-explain",
         "Configuration",
         "Configuration is key to VoxKit's flexibility. Learn how to customize settings, manage preferences, and optimize your workflow.\n\nMake VoxKit work for you!",
-        [{ text: "View Configuration Guide", url: "/help/configure-voxkit" }]
+        [{ text: "View Configuration Guide", url: "/help/configure-voxkit" }],
       );
 
       tree.addExplanation(
         "models-explain",
         "Model Management",
         "Managing models properly ensures smooth workflows. Learn how to register, organize, and troubleshoot alignment models.\n\nMaster model management!",
-        [{ text: "View Model Management Guide", url: "/help/manage-models" }]
+        [{ text: "View Model Management Guide", url: "/help/manage-models" }],
       );
 
       tree.addExplanation(
         "datasets-explain",
         "Dataset Management",
         "Datasets are the foundation of your research. Learn how to register, organize, and work with datasets in VoxKit.\n\nOrganize your data!",
-        [{ text: "View Dataset Guide", url: "/help/manage-datasets" }]
+        [{ text: "View Dataset Guide", url: "/help/manage-datasets" }],
       );
 
       // Import widget class dynamically (since it uses DOM)
-      import('./DecisionTree').then(({ DecisionTreeWidget }) => {
+      import("./DecisionTree").then(({ DecisionTreeWidget }) => {
         widgetRef.current = new DecisionTreeWidget(
           tree,
           containerRef.current!,
@@ -157,8 +162,8 @@ export default function HelpChat() {
             onLinkClick: (url) => {
               router.push(url);
               setIsOpen(false);
-            }
-          }
+            },
+          },
         );
       });
     }
@@ -179,17 +184,17 @@ export default function HelpChat() {
         className="fixed bottom-8 right-8 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full p-4 shadow-2xl hover:shadow-blue-500/50 hover:scale-110 transition-all duration-300 z-40"
         aria-label="Open help assistant"
       >
-        <svg 
-          className="w-6 h-6" 
-          fill="none" 
-          stroke="currentColor" 
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
           viewBox="0 0 24 24"
         >
-          <path 
-            strokeLinecap="round" 
-            strokeLinejoin="round" 
-            strokeWidth={2} 
-            d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" 
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
           />
         </svg>
         <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full animate-pulse"></span>
@@ -204,11 +209,24 @@ export default function HelpChat() {
               className="absolute top-2 right-2 z-10 text-slate-600 hover:text-slate-900 bg-white rounded-full p-2 shadow-md transition-colors"
               aria-label="Close help assistant"
             >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              <svg
+                className="w-5 h-5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
               </svg>
             </button>
-            <div ref={containerRef} className="h-full [&_.dt-wrapper]:text-slate-900 [&_.dt-title]:text-slate-900 [&_.dt-question-text]:text-slate-900 [&_.dt-explanation-content]:text-slate-900 [&_.dt-links-title]:text-slate-900" />
+            <div
+              ref={containerRef}
+              className="h-full [&_.dt-wrapper]:text-slate-900 [&_.dt-title]:text-slate-900 [&_.dt-question-text]:text-slate-900 [&_.dt-explanation-content]:text-slate-900 [&_.dt-links-title]:text-slate-900"
+            />
           </div>
         </div>
       )}
diff --git a/components/OSIcons.tsx b/components/OSIcons.tsx
index f5cc93f..c6d2cf4 100644
--- a/components/OSIcons.tsx
+++ b/components/OSIcons.tsx
@@ -1,20 +1,35 @@
 // OS Icons
 const AppleIcon = () => (
-  <svg className="os-icon" viewBox="0 0 24 24" fill="currentColor" style={{ width: '24px', height: '24px' }}>
-    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
+  <svg
+    className="os-icon"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    style={{ width: "24px", height: "24px" }}
+  >
+    <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z" />
   </svg>
 );
 
 const WindowsIcon = () => (
-  <svg className="os-icon" viewBox="0 0 24 24" fill="currentColor" style={{ width: '24px', height: '24px' }}>
-    <path d="M3,12V6.75L9,5.43V11.91L3,12M20,3V11.75L10,11.9V5.21L20,3M3,13L9,13.09V19.9L3,18.75V13M20,13.25V22L10,20.09V13.1L20,13.25Z"/>
+  <svg
+    className="os-icon"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    style={{ width: "24px", height: "24px" }}
+  >
+    <path d="M3,12V6.75L9,5.43V11.91L3,12M20,3V11.75L10,11.9V5.21L20,3M3,13L9,13.09V19.9L3,18.75V13M20,13.25V22L10,20.09V13.1L20,13.25Z" />
   </svg>
 );
 
 const LinuxIcon = () => (
-  <svg className="os-icon" viewBox="0 0 24 24" fill="currentColor" style={{ width: '24px', height: '24px' }}>
-    <path d="M13.61 14.14c0 1.17-.35 1.9-.98 2.35-.56.39-1.26.56-2.11.56-1.64 0-2.64-.62-3.1-1.88l1.46-.59c.18.54.65 1.14 1.65 1.14.91 0 1.39-.52 1.39-1.46v-.15c-.36.36-.95.64-1.73.64-1.55 0-2.71-1.21-2.71-2.84s1.15-2.84 2.71-2.84c.78 0 1.37.28 1.73.65v-.51h1.68v4.93zm-3.29-.52c.77 0 1.35-.65 1.35-1.48s-.58-1.5-1.35-1.5c-.79 0-1.36.66-1.36 1.5 0 .82.57 1.48 1.36 1.48zm8.28-.23c0 1.74-.87 3.11-2.8 3.11s-2.8-1.37-2.8-3.11c0-1.73.88-3.08 2.8-3.08s2.8 1.35 2.8 3.08zm-4.01 0c0 1.03.39 1.75 1.21 1.75.83 0 1.2-.72 1.2-1.75 0-1-.37-1.72-1.2-1.72-.82 0-1.21.72-1.21 1.72zM22 3v18H2V3h20m.67-2H1.33C.6 1 0 1.6 0 2.33v19.34C0 22.4.6 23 1.33 23h20.34c.73 0 1.33-.6 1.33-1.33V2.33C24 1.6 23.4 1 22.67 1z"/>
+  <svg
+    className="os-icon"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    style={{ width: "24px", height: "24px" }}
+  >
+    <path d="M13.61 14.14c0 1.17-.35 1.9-.98 2.35-.56.39-1.26.56-2.11.56-1.64 0-2.64-.62-3.1-1.88l1.46-.59c.18.54.65 1.14 1.65 1.14.91 0 1.39-.52 1.39-1.46v-.15c-.36.36-.95.64-1.73.64-1.55 0-2.71-1.21-2.71-2.84s1.15-2.84 2.71-2.84c.78 0 1.37.28 1.73.65v-.51h1.68v4.93zm-3.29-.52c.77 0 1.35-.65 1.35-1.48s-.58-1.5-1.35-1.5c-.79 0-1.36.66-1.36 1.5 0 .82.57 1.48 1.36 1.48zm8.28-.23c0 1.74-.87 3.11-2.8 3.11s-2.8-1.37-2.8-3.11c0-1.73.88-3.08 2.8-3.08s2.8 1.35 2.8 3.08zm-4.01 0c0 1.03.39 1.75 1.21 1.75.83 0 1.2-.72 1.2-1.75 0-1-.37-1.72-1.2-1.72-.82 0-1.21.72-1.21 1.72zM22 3v18H2V3h20m.67-2H1.33C.6 1 0 1.6 0 2.33v19.34C0 22.4.6 23 1.33 23h20.34c.73 0 1.33-.6 1.33-1.33V2.33C24 1.6 23.4 1 22.67 1z" />
   </svg>
 );
 
-export { AppleIcon, WindowsIcon, LinuxIcon };
\ No newline at end of file
+export { AppleIcon, WindowsIcon, LinuxIcon };
diff --git a/components/WaveSeparator.tsx b/components/WaveSeparator.tsx
index 3738ec7..ea735ee 100644
--- a/components/WaveSeparator.tsx
+++ b/components/WaveSeparator.tsx
@@ -4,9 +4,9 @@ import React, { useEffect, useRef, useState } from "react";
 type Props = {
   className?: string;
   color?: string;
-  height?: number;     
+  height?: number;
   samples?: number;
-  waveOffset?: number;          
+  waveOffset?: number;
 };
 
 /**
@@ -72,7 +72,7 @@ export default function WaveSeparator({
     if (!pathRef.current || width <= 0) return;
 
     const h = height;
-    const half = h / 2;                    
+    const half = h / 2;
     const amp = ampRef.current;
     const base = Math.max(12, h * 0.28);
     const amplitude = base * amp;
@@ -86,11 +86,13 @@ export default function WaveSeparator({
       const x = t * width;
 
       const waveY =
-          Math.sin((t * freq - phaseRef.current) * Math.PI * 2) * amplitude * 1.0 +
-          Math.sin((t * freq * 1.7 - phaseRef.current * 0.6) * Math.PI * 2) *
-            (amplitude * 0.55) +
-          Math.sin((t * freq * 0.7 - phaseRef.current * 1.3) * Math.PI * 2) *
-            (amplitude * 0.5);
+        Math.sin((t * freq - phaseRef.current) * Math.PI * 2) *
+          amplitude *
+          1.0 +
+        Math.sin((t * freq * 1.7 - phaseRef.current * 0.6) * Math.PI * 2) *
+          (amplitude * 0.55) +
+        Math.sin((t * freq * 0.7 - phaseRef.current * 1.3) * Math.PI * 2) *
+          (amplitude * 0.5);
 
       topPts.push([x, half - waveY]);
 
@@ -132,14 +134,16 @@ export default function WaveSeparator({
   return (
     <div
       className={`relative w-full ${className}`}
-      style={{
-        height,                    
-        margin: 0,
-        padding: 0,
-        lineHeight: 0,
-        fontSize: 0,
-        "--wave-color": color,
-      } as React.CSSProperties}
+      style={
+        {
+          height,
+          margin: 0,
+          padding: 0,
+          lineHeight: 0,
+          fontSize: 0,
+          "--wave-color": color,
+        } as React.CSSProperties
+      }
     >
       {/* The SVG is positioned so its centre line sits on the container’s bottom edge */}
       <svg
@@ -154,15 +158,30 @@ export default function WaveSeparator({
       >
         <defs>
           <linearGradient id="waveGrad" x1="0" x2="1">
-            <stop offset="0%"   style={{ stopColor: "var(--wave-color)", stopOpacity: 0.18 }} />
-            <stop offset="30%"  style={{ stopColor: "var(--wave-color)", stopOpacity: 0.12 }} />
-            <stop offset="48%"  style={{ stopColor: "var(--wave-color)", stopOpacity: 0.08 }} />
-            <stop offset="60%"  style={{ stopColor: "var(--wave-color)", stopOpacity: 0.08 }} />
-            <stop offset="100%" style={{ stopColor: "var(--wave-color)", stopOpacity: 0.02 }} />
+            <stop
+              offset="0%"
+              style={{ stopColor: "var(--wave-color)", stopOpacity: 0.18 }}
+            />
+            <stop
+              offset="30%"
+              style={{ stopColor: "var(--wave-color)", stopOpacity: 0.12 }}
+            />
+            <stop
+              offset="48%"
+              style={{ stopColor: "var(--wave-color)", stopOpacity: 0.08 }}
+            />
+            <stop
+              offset="60%"
+              style={{ stopColor: "var(--wave-color)", stopOpacity: 0.08 }}
+            />
+            <stop
+              offset="100%"
+              style={{ stopColor: "var(--wave-color)", stopOpacity: 0.02 }}
+            />
           </linearGradient>
         </defs>
         <path ref={pathRef} fill="url(#waveGrad)" opacity="0.95" />
       </svg>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/data/help-content.json b/data/help-content.json
index 43f4371..9c0d85e 100644
--- a/data/help-content.json
+++ b/data/help-content.json
@@ -145,7 +145,7 @@
       }
     ]
   },
-    "high-level-terms": {
+  "high-level-terms": {
     "title": "High Level Terminology",
     "description": "The medium by which the developer can communicate capability with the PI",
     "icon": "📚",
@@ -212,7 +212,7 @@
       }
     ]
   },
-"configuration": {
+  "configuration": {
     "title": "Configuration Options",
     "description": "Customize VoxKit to match your workflow and requirements",
     "icon": "⚙️",
@@ -399,4 +399,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/layout/Footer.tsx b/layout/Footer.tsx
index 217f76c..9c614ae 100644
--- a/layout/Footer.tsx
+++ b/layout/Footer.tsx
@@ -1,56 +1,64 @@
-import Image from 'next/image';
-import Link from 'next/link';
+import Image from "next/image";
+import Link from "next/link";
 
 type FooterLink = { label: string; href: string; external?: boolean };
 type FooterColumn = { title: string; links: FooterLink[] };
 
-const GITHUB_URL = 'https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop';
+const GITHUB_URL =
+  "https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop";
 
 const columns: FooterColumn[] = [
   {
-    title: 'Product',
+    title: "Product",
     links: [
-      { label: 'Features', href: '/features' },
-      { label: 'Download', href: '/download' },
-      { label: 'Documentation', href: '/docs' },
+      { label: "Features", href: "/features" },
+      { label: "Download", href: "/download" },
+      { label: "Documentation", href: "/docs" },
     ],
   },
   {
-    title: 'Support',
+    title: "Support",
     links: [
-      { label: 'Help Center', href: '/help' },
-      { label: 'Tutorials', href: '/help/getting-started' },
-      { label: 'Contact', href: `${GITHUB_URL}/issues`, external: true },
+      { label: "Help Center", href: "/help" },
+      { label: "Tutorials", href: "/help/getting-started" },
+      { label: "Contact", href: `${GITHUB_URL}/issues`, external: true },
     ],
   },
   {
-    title: 'Resources',
+    title: "Resources",
     links: [
-      { label: 'User Guides', href: '/help/expected-workflow' },
-      { label: 'MFA', href: 'https://montreal-forced-aligner.readthedocs.io/en/latest/index.html', external: true },
-      { label: 'FAQ', href: '/help/troubleshooting' },
+      { label: "User Guides", href: "/help/expected-workflow" },
+      {
+        label: "MFA",
+        href: "https://montreal-forced-aligner.readthedocs.io/en/latest/index.html",
+        external: true,
+      },
+      { label: "FAQ", href: "/help/troubleshooting" },
     ],
   },
   {
-    title: 'Community',
+    title: "Community",
     links: [
-      { label: 'Forum', href: `${GITHUB_URL}/discussions`, external: true },
-      { label: 'Research Papers', href: '/foundations' },
-      { label: 'Contribute', href: GITHUB_URL, external: true },
+      { label: "Forum", href: `${GITHUB_URL}/discussions`, external: true },
+      { label: "Research Papers", href: "/foundations" },
+      { label: "Contribute", href: GITHUB_URL, external: true },
     ],
   },
 ];
 
 export default function Footer() {
-    return (
+  return (
     <footer className="pt-12 pb-4 px-4 sm:px-6 lg:px-8 border-t border-slate-700/50">
-        <div className="max-w-7xl mx-auto">
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
-            {columns.map((col) => (
-              <div key={col.title} className="flex flex-col items-center text-center">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
+          {columns.map((col) => (
+            <div
+              key={col.title}
+              className="flex flex-col items-center text-center"
+            >
               <h4 className="font-semibold text-white mb-4">{col.title}</h4>
               <div className="space-y-2">
-                {col.links.map((link) => (
+                {col.links.map((link) =>
                   link.external ? (
                     <a
                       key={link.label}
@@ -69,32 +77,44 @@ export default function Footer() {
                     >
                       {link.label}
                     </Link>
-                  )
-                ))}
+                  ),
+                )}
               </div>
-              </div>
-            ))}
-            </div>
-            <div className="flex flex-col md:flex-row items-center md:items-stretch pt-4 border-t border-slate-700/50 text-sm">
-            <div className="w-full md:w-1/3 text-center px-4 mb-0 md:mb-0 flex items-center justify-center">
-              <Image src="/collab.png" alt="Collaboration" width={160} height={80} className="hidden md:block mt-2 mb-0 h-20 w-auto object-contain" />
             </div>
+          ))}
+        </div>
+        <div className="flex flex-col md:flex-row items-center md:items-stretch pt-4 border-t border-slate-700/50 text-sm">
+          <div className="w-full md:w-1/3 text-center px-4 mb-0 md:mb-0 flex items-center justify-center">
+            <Image
+              src="/collab.png"
+              alt="Collaboration"
+              width={160}
+              height={80}
+              className="hidden md:block mt-2 mb-0 h-20 w-auto object-contain"
+            />
+          </div>
 
-            {/* vertical separator */}
-            <div aria-hidden="true" className="hidden md:block border-l border-slate-700/50 mx-4"></div>
+          {/* vertical separator */}
+          <div
+            aria-hidden="true"
+            className="hidden md:block border-l border-slate-700/50 mx-4"
+          ></div>
 
-            <div className="w-full md:w-1/3 text-slate-400 text-center px-4 mb-0 md:mb-0 flex items-center justify-center">
-              © 2026 WiscLab x BrainBehaviorAnalyticsLab
-            </div>
+          <div className="w-full md:w-1/3 text-slate-400 text-center px-4 mb-0 md:mb-0 flex items-center justify-center">
+            © 2026 WiscLab x BrainBehaviorAnalyticsLab
+          </div>
 
-            {/* vertical separator */}
-            <div aria-hidden="true" className="hidden md:block border-l border-slate-700/50 mx-4"></div>
+          {/* vertical separator */}
+          <div
+            aria-hidden="true"
+            className="hidden md:block border-l border-slate-700/50 mx-4"
+          ></div>
 
-            <div className="w-full md:w-1/3 text-slate-400 text-center px-4 flex items-center justify-center">
-              Built with ❤️ by the VoxKit Team
-            </div>
-            </div>
+          <div className="w-full md:w-1/3 text-slate-400 text-center px-4 flex items-center justify-center">
+            Built with ❤️ by the VoxKit Team
+          </div>
         </div>
-      </footer>
-      );
+      </div>
+    </footer>
+  );
 }
diff --git a/layout/Navbar.tsx b/layout/Navbar.tsx
index 31c276f..a564eff 100644
--- a/layout/Navbar.tsx
+++ b/layout/Navbar.tsx
@@ -1,87 +1,93 @@
+import { useState } from "react";
+import Link from "next/link";
 
-import { useState } from 'react';
-import Link from 'next/link';
+const ALL_VIEWS = [
+  "Home",
+  "Download",
+  "Features",
+  "Foundations",
+  "Docs",
+  "Help",
+] as const;
 
-const ALL_VIEWS = ['Home', 'Download', 'Features', 'Foundations', 'Docs', 'Help'] as const;
+export default function Navbar({ view = "Home" }) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const selectedView = view;
 
-export default function Navbar({ view = 'Home' }) {
-    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-    const selectedView = view;
-
-    return (
-        <nav className="fixed w-full bg-slate-900/95 backdrop-blur-sm border-b border-slate-600 z-50 shadow-lg shadow-slate-900/50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex items-center justify-between h-16">
-
-            {/* Logo and Desktop Navigation */}
-            <div className="flex items-center space-x-8">
-              {/* Logo */}
-              <div className="flex items-center space-x-3">
-                <div className="flex items-center space-x-1">
-                  <div className="w-1 h-4 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
-                  <div className="w-1 h-6 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
-                  <div className="w-1 h-8 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
-                  <div className="w-1 h-10 bg-blue-500 rounded-full shadow-md shadow-blue-500/50"></div>
-                  <div className="w-1 h-8 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
-                  <div className="w-1 h-6 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
-                  <div className="w-1 h-4 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
-                </div>
-                <span className="text-2xl font-semibold text-white">VoxKit</span>
-              </div>
-
-              {/* Desktop Navigation */}
-              <div className="hidden md:flex items-center space-x-1">
-                {ALL_VIEWS.map((item) => {
-                  const isCurrent = selectedView === item;
-                  return (
-                    <Link
-                      href={item === 'Home' ? '/' : `/${item.toLowerCase()}`}
-                      key={item}
-                      className={
-                        isCurrent
-                          ? "px-4 py-2 text-white bg-white/10 rounded-lg font-medium cursor-default pointer-events-none"
-                          : "px-4 py-2 text-slate-200 hover:text-white hover:bg-white/10 rounded-lg transition-all duration-200 font-medium"
-                      }
-                      aria-current={isCurrent ? 'page' : undefined}
-                      tabIndex={isCurrent ? -1 : 0}
-                    >
-                      {item}
-                    </Link>
-                  );
-                })}
+  return (
+    <nav className="fixed w-full bg-slate-900/95 backdrop-blur-sm border-b border-slate-600 z-50 shadow-lg shadow-slate-900/50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center justify-between h-16">
+          {/* Logo and Desktop Navigation */}
+          <div className="flex items-center space-x-8">
+            {/* Logo */}
+            <div className="flex items-center space-x-3">
+              <div className="flex items-center space-x-1">
+                <div className="w-1 h-4 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
+                <div className="w-1 h-6 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
+                <div className="w-1 h-8 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
+                <div className="w-1 h-10 bg-blue-500 rounded-full shadow-md shadow-blue-500/50"></div>
+                <div className="w-1 h-8 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
+                <div className="w-1 h-6 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
+                <div className="w-1 h-4 bg-blue-400 rounded-full shadow-sm shadow-blue-400/50"></div>
               </div>
+              <span className="text-2xl font-semibold text-white">VoxKit</span>
             </div>
 
-          </div>
-        </div>
-
-        {/* Mobile Navigation */}
-        {mobileMenuOpen && (
-          <div className="border-t border-slate-600 bg-slate-900/95 backdrop-blur-sm">
-            <div className="px-4 py-6 max-w-7xl mx-auto">
-              {ALL_VIEWS.map((item, index) => {
+            {/* Desktop Navigation */}
+            <div className="hidden md:flex items-center space-x-1">
+              {ALL_VIEWS.map((item) => {
                 const isCurrent = selectedView === item;
                 return (
-                  <div key={item}>
-                    <Link
-                      href={item === 'Home' ? '/' : `/${item.toLowerCase()}`}
-                      className={
-                        isCurrent
-                          ? "block w-full text-left px-5 py-3 text-white bg-white/10 rounded-lg font-medium text-lg pointer-events-none"
-                          : "block w-full text-left px-5 py-3 text-slate-200 hover:text-white hover:bg-white/10 rounded-lg transition-all duration-200 font-medium text-lg"
-                      }
-                      aria-current={isCurrent ? 'page' : undefined}
-                      onClick={() => setMobileMenuOpen(false)}
-                    >
-                      {item}
-                    </Link>
-                    {index < ALL_VIEWS.length - 1 && <div className="h-px bg-white/20 my-2 mx-4"></div>}
-                  </div>
+                  <Link
+                    href={item === "Home" ? "/" : `/${item.toLowerCase()}`}
+                    key={item}
+                    className={
+                      isCurrent
+                        ? "px-4 py-2 text-white bg-white/10 rounded-lg font-medium cursor-default pointer-events-none"
+                        : "px-4 py-2 text-slate-200 hover:text-white hover:bg-white/10 rounded-lg transition-all duration-200 font-medium"
+                    }
+                    aria-current={isCurrent ? "page" : undefined}
+                    tabIndex={isCurrent ? -1 : 0}
+                  >
+                    {item}
+                  </Link>
                 );
               })}
             </div>
           </div>
-        )}
-      </nav>
-    );
+        </div>
+      </div>
+
+      {/* Mobile Navigation */}
+      {mobileMenuOpen && (
+        <div className="border-t border-slate-600 bg-slate-900/95 backdrop-blur-sm">
+          <div className="px-4 py-6 max-w-7xl mx-auto">
+            {ALL_VIEWS.map((item, index) => {
+              const isCurrent = selectedView === item;
+              return (
+                <div key={item}>
+                  <Link
+                    href={item === "Home" ? "/" : `/${item.toLowerCase()}`}
+                    className={
+                      isCurrent
+                        ? "block w-full text-left px-5 py-3 text-white bg-white/10 rounded-lg font-medium text-lg pointer-events-none"
+                        : "block w-full text-left px-5 py-3 text-slate-200 hover:text-white hover:bg-white/10 rounded-lg transition-all duration-200 font-medium text-lg"
+                    }
+                    aria-current={isCurrent ? "page" : undefined}
+                    onClick={() => setMobileMenuOpen(false)}
+                  >
+                    {item}
+                  </Link>
+                  {index < ALL_VIEWS.length - 1 && (
+                    <div className="h-px bg-white/20 my-2 mx-4"></div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </nav>
+  );
 }
diff --git a/layout/index.tsx b/layout/index.tsx
index 0d9845e..e056c3f 100644
--- a/layout/index.tsx
+++ b/layout/index.tsx
@@ -1,4 +1,4 @@
-import Footer from './Footer';
-import Navbar from './Navbar';
+import Footer from "./Footer";
+import Navbar from "./Navbar";
 
-export { Footer, Navbar };
\ No newline at end of file
+export { Footer, Navbar };
diff --git a/lib/fakeReleases.ts b/lib/fakeReleases.ts
index 7b09ec2..8d52967 100644
--- a/lib/fakeReleases.ts
+++ b/lib/fakeReleases.ts
@@ -1,4 +1,4 @@
-import type { GitHubRelease } from '../types/releases';
+import type { GitHubRelease } from "../types/releases";
 
 /**
  * Fake release data for local development. Used when USE_FAKE_RELEASES=true.
@@ -7,88 +7,92 @@ import type { GitHubRelease } from '../types/releases';
  */
 
 export const PRE_RELEASE_DISCLAIMER =
-  'Versions below 1.0.0 are pre-release; these are provided as-is and should be used at your own risk. ' +
-  'No warranties or guarantees are provided for pre-release software.';
+  "Versions below 1.0.0 are pre-release; these are provided as-is and should be used at your own risk. " +
+  "No warranties or guarantees are provided for pre-release software.";
 
 export const fakeGitHubReleases: GitHubRelease[] = [
   {
-    tag_name: 'v1.3.0',
-    name: 'VoxKit v1.3.0',
-    published_at: '2026-04-20T10:00:00Z',
+    tag_name: "v1.3.0",
+    name: "VoxKit v1.3.0",
+    published_at: "2026-04-20T10:00:00Z",
     draft: false,
     prerelease: false,
-    html_url: 'https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop/releases/tag/v1.3.0',
-    body: 'Latest stable release.',
+    html_url:
+      "https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop/releases/tag/v1.3.0",
+    body: "Latest stable release.",
     assets: [
       {
-        name: 'VoxKit-1.3.0-arm64.dmg',
-        browser_download_url: 'https://example.com/VoxKit-1.3.0-arm64.dmg',
+        name: "VoxKit-1.3.0-arm64.dmg",
+        browser_download_url: "https://example.com/VoxKit-1.3.0-arm64.dmg",
         size: 85_000_000,
-        content_type: 'application/x-apple-diskimage',
-        created_at: '2026-04-20T10:00:00Z',
-        updated_at: '2026-04-20T10:00:00Z',
+        content_type: "application/x-apple-diskimage",
+        created_at: "2026-04-20T10:00:00Z",
+        updated_at: "2026-04-20T10:00:00Z",
       },
       {
-        name: 'VoxKit-1.3.0-x64.exe',
-        browser_download_url: 'https://example.com/VoxKit-1.3.0-x64.exe',
+        name: "VoxKit-1.3.0-x64.exe",
+        browser_download_url: "https://example.com/VoxKit-1.3.0-x64.exe",
         size: 75_000_000,
-        content_type: 'application/x-msdownload',
-        created_at: '2026-04-20T10:00:00Z',
-        updated_at: '2026-04-20T10:00:00Z',
+        content_type: "application/x-msdownload",
+        created_at: "2026-04-20T10:00:00Z",
+        updated_at: "2026-04-20T10:00:00Z",
       },
     ],
   },
   {
-    tag_name: 'v1.2.0',
-    name: 'VoxKit v1.2.0',
-    published_at: '2026-02-28T10:00:00Z',
+    tag_name: "v1.2.0",
+    name: "VoxKit v1.2.0",
+    published_at: "2026-02-28T10:00:00Z",
     draft: false,
     prerelease: false,
-    html_url: 'https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop/releases/tag/v1.2.0',
-    body: 'Previous stable release.',
+    html_url:
+      "https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop/releases/tag/v1.2.0",
+    body: "Previous stable release.",
     assets: [
       {
-        name: 'VoxKit-1.2.0-arm64.dmg',
-        browser_download_url: 'https://example.com/VoxKit-1.2.0-arm64.dmg',
+        name: "VoxKit-1.2.0-arm64.dmg",
+        browser_download_url: "https://example.com/VoxKit-1.2.0-arm64.dmg",
         size: 84_000_000,
-        content_type: 'application/x-apple-diskimage',
-        created_at: '2026-02-28T10:00:00Z',
-        updated_at: '2026-02-28T10:00:00Z',
+        content_type: "application/x-apple-diskimage",
+        created_at: "2026-02-28T10:00:00Z",
+        updated_at: "2026-02-28T10:00:00Z",
       },
       {
-        name: 'VoxKit-1.2.0-x64.exe',
-        browser_download_url: 'https://example.com/VoxKit-1.2.0-x64.exe',
+        name: "VoxKit-1.2.0-x64.exe",
+        browser_download_url: "https://example.com/VoxKit-1.2.0-x64.exe",
         size: 74_000_000,
-        content_type: 'application/x-msdownload',
-        created_at: '2026-02-28T10:00:00Z',
-        updated_at: '2026-02-28T10:00:00Z',
+        content_type: "application/x-msdownload",
+        created_at: "2026-02-28T10:00:00Z",
+        updated_at: "2026-02-28T10:00:00Z",
       },
       {
-        name: 'VoxKit-1.2.0-x86_64.AppImage',
-        browser_download_url: 'https://example.com/VoxKit-1.2.0-x86_64.AppImage',
+        name: "VoxKit-1.2.0-x86_64.AppImage",
+        browser_download_url:
+          "https://example.com/VoxKit-1.2.0-x86_64.AppImage",
         size: 82_000_000,
-        content_type: 'application/x-executable',
-        created_at: '2026-02-28T10:00:00Z',
-        updated_at: '2026-02-28T10:00:00Z',
+        content_type: "application/x-executable",
+        created_at: "2026-02-28T10:00:00Z",
+        updated_at: "2026-02-28T10:00:00Z",
       },
     ],
   },
   {
-    tag_name: 'v0.9.0',
-    name: 'VoxKit v0.9.0',
-    published_at: '2026-01-10T10:00:00Z',
+    tag_name: "v0.9.0",
+    name: "VoxKit v0.9.0",
+    published_at: "2026-01-10T10:00:00Z",
     draft: false,
     prerelease: true,
-    html_url: 'https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop/releases/tag/v0.9.0',
-    body: 'Early preview.',
+    html_url:
+      "https://github.com/BrainBehaviorAnalyticsLab/voxkit-desktop/releases/tag/v0.9.0",
+    body: "Early preview.",
     assets: [
       {
-        name: 'voxkit_0.9.0_amd64.deb',
-        browser_download_url: 'https://example.com/voxkit_0.9.0_amd64.deb',
+        name: "voxkit_0.9.0_amd64.deb",
+        browser_download_url: "https://example.com/voxkit_0.9.0_amd64.deb",
         size: 80_000_000,
-        content_type: 'application/vnd.debian.binary-package',
-        created_at: '2026-01-10T10:00:00Z',
-        updated_at: '2026-01-10T10:00:00Z',
+        content_type: "application/vnd.debian.binary-package",
+        created_at: "2026-01-10T10:00:00Z",
+        updated_at: "2026-01-10T10:00:00Z",
       },
     ],
   },
diff --git a/package-lock.json b/package-lock.json
index 845154e..8a823f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,9 @@
         "@types/react-dom": "^19",
         "eslint": "^9",
         "eslint-config-next": "16.0.1",
+        "husky": "^9.1.7",
+        "lint-staged": "^16.4.0",
+        "prettier": "^3.8.3",
         "tailwindcss": "^4",
         "typescript": "^5"
       }
@@ -2154,6 +2157,35 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ansi-escapes": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.3.0.tgz",
+      "integrity": "sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -2571,6 +2603,39 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.2.0.tgz",
+      "integrity": "sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^8.0.0",
+        "string-width": "^8.2.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -2597,6 +2662,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
+      "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz",
+      "integrity": "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -2821,6 +2903,19 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/environment": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
+      "integrity": "sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.24.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
@@ -3445,6 +3540,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -3647,6 +3749,19 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-east-asian-width": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
+      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -3891,6 +4006,22 @@
         "hermes-estree": "0.25.1"
       }
     },
+    "node_modules/husky": {
+      "version": "9.1.7",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
+      "integrity": "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "husky": "bin.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4127,6 +4258,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-generator-function": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
@@ -4788,6 +4935,61 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lint-staged": {
+      "version": "16.4.0",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.4.0.tgz",
+      "integrity": "sha512-lBWt8hujh/Cjysw5GYVmZpFHXDCgZzhrOm8vbcUdobADZNOK/bRshr2kM3DfgrrtR1DQhfupW9gnIXOfiFi+bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^14.0.3",
+        "listr2": "^9.0.5",
+        "picomatch": "^4.0.3",
+        "string-argv": "^0.3.2",
+        "tinyexec": "^1.0.4",
+        "yaml": "^2.8.2"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": ">=20.17"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/lint-staged/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
+      "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cli-truncate": "^5.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.1.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -4811,6 +5013,56 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
+      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -4887,6 +5139,19 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mimic-function": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz",
+      "integrity": "sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5169,6 +5434,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -5345,6 +5626,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz",
+      "integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -5501,6 +5798,23 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -5512,6 +5826,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -5813,6 +6134,49 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/slice-ansi": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-8.0.0.tgz",
+      "integrity": "sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.3",
+        "is-fullwidth-code-point": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -5843,6 +6207,33 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.1.tgz",
+      "integrity": "sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -5956,6 +6347,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/strip-bom": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
@@ -6049,6 +6456,16 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tinyexec": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.2.tgz",
+      "integrity": "sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -6501,6 +6918,62 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -6508,6 +6981,22 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index 4d0ae5c..e422712 100644
--- a/package.json
+++ b/package.json
@@ -3,10 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "USE_FAKE_RELEASES=true next dev",
+    "dev": "USE_FAKE_RELEASES=false next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,mjs}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,css,md}": [
+      "prettier --write"
+    ]
   },
   "dependencies": {
     "lucide-react": "^0.553.0",
@@ -21,6 +34,9 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "16.0.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "prettier": "^3.8.3",
     "tailwindcss": "^4",
     "typescript": "^5"
   }
diff --git a/types/help.ts b/types/help.ts
index e668080..5cd6c71 100644
--- a/types/help.ts
+++ b/types/help.ts
@@ -1,5 +1,5 @@
 export interface HelpSection {
-  type: 'text' | 'heading' | 'list' | 'code';
+  type: "text" | "heading" | "list" | "code";
   content?: string;
   items?: string[];
   language?: string;