diff --git a/.github/ISSUE_TEMPLATE/elusoc_bug_report.md b/.github/ISSUE_TEMPLATE/elusoc_bug_report.md
index a504a9a1..37a26b6d 100644
--- a/.github/ISSUE_TEMPLATE/elusoc_bug_report.md
+++ b/.github/ISSUE_TEMPLATE/elusoc_bug_report.md
@@ -6,15 +6,19 @@ labels: ""
 ---
 
 ## 🚀 Program
+
 ELUSOC
 
 ## 🐛 Describe the bug
+
 A clear and concise description of what the bug is.
 
 ---
 
 ## 🔁 Steps to Reproduce
+
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '...'
 3. Scroll to '...'
@@ -23,21 +27,25 @@ Steps to reproduce the behavior:
 ---
 
 ## ✅ Expected Behavior
+
 A clear and concise description of what you expected to happen.
 
 ---
 
 ## ❌ Actual Behavior
+
 What actually happens instead.
 
 ---
 
 ## 📸 Screenshots
+
 If applicable, add screenshots to help explain your problem.
 
 ---
 
 ## 🌱 Contributor Checklist
+
 - [ ] I am participating via ELUSOC
 - [ ] I have read the contribution guidelines
 - [ ] I checked for existing issues before creating this
@@ -45,6 +53,7 @@ If applicable, add screenshots to help explain your problem.
 ---
 
 ## 💻 Environment
+
 - Browser: (e.g. Chrome, Firefox)
 - Device: (e.g. Desktop, Mobile)
 - OS: (e.g. Windows, macOS)
@@ -52,4 +61,5 @@ If applicable, add screenshots to help explain your problem.
 ---
 
 ## 📝 Additional Context
+
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/elusoc_feature_request.md b/.github/ISSUE_TEMPLATE/elusoc_feature_request.md
index 0306eb0a..2fe78bb9 100644
--- a/.github/ISSUE_TEMPLATE/elusoc_feature_request.md
+++ b/.github/ISSUE_TEMPLATE/elusoc_feature_request.md
@@ -7,32 +7,42 @@ assignees: ""
 ---
 
 ## 🚀 Program
+
 ELUSOC
 
 ## ✨ Feature Description
+
 <!-- A clear and concise description of the feature you'd like to see -->
 
 ## 🤔 Problem It Solves
+
 <!-- What problem does this feature solve? Who would benefit from it? -->
 
 ## 💡 Proposed Solution
+
 <!-- Describe the solution you have in mind -->
 
 ## 🔄 Alternatives Considered
+
 <!-- Have you considered any alternative solutions or features? -->
 
 ## 📸 Mockups / Examples
+
 <!-- If applicable, add screenshots, mockups, or links to similar features in other projects -->
 
 ## ✅ Acceptance Criteria
+
 <!-- What does "done" look like for this feature? -->
+
 - [ ] ...
 - [ ] ...
 
 ## 📋 Additional Context
+
 <!-- Any other context about the feature request -->
 
 ## 🌱 Contributor Checklist
+
 - [ ] I am participating via ELUSOC
 - [ ] I have read the contribution guidelines
 - [ ] I checked for existing issues before creating this
diff --git a/.github/ISSUE_TEMPLATE/gssoc_bug_report.md b/.github/ISSUE_TEMPLATE/gssoc_bug_report.md
index b0042d29..7292ad5e 100644
--- a/.github/ISSUE_TEMPLATE/gssoc_bug_report.md
+++ b/.github/ISSUE_TEMPLATE/gssoc_bug_report.md
@@ -6,15 +6,19 @@ labels: ""
 ---
 
 ## 🚀 Program
+
 GSSoC
 
 ## 🐛 Describe the bug
+
 A clear and concise description of what the bug is.
 
 ---
 
 ## 🔁 Steps to Reproduce
+
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '...'
 3. Scroll to '...'
@@ -23,21 +27,25 @@ Steps to reproduce the behavior:
 ---
 
 ## ✅ Expected Behavior
+
 A clear and concise description of what you expected to happen.
 
 ---
 
 ## ❌ Actual Behavior
+
 What actually happens instead.
 
 ---
 
 ## 📸 Screenshots
+
 If applicable, add screenshots to help explain your problem.
 
 ---
 
 ## 🌱 Contributor Checklist
+
 - [ ] I am participating via GSSoC
 - [ ] I have read the contribution guidelines
 - [ ] I checked for existing issues before creating this
@@ -45,6 +53,7 @@ If applicable, add screenshots to help explain your problem.
 ---
 
 ## 💻 Environment
+
 - Browser: (e.g. Chrome, Firefox)
 - Device: (e.g. Desktop, Mobile)
 - OS: (e.g. Windows, macOS)
@@ -52,4 +61,5 @@ If applicable, add screenshots to help explain your problem.
 ---
 
 ## 📝 Additional Context
+
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/gssoc_feature_request.md b/.github/ISSUE_TEMPLATE/gssoc_feature_request.md
index 752158d7..5b72ed3f 100644
--- a/.github/ISSUE_TEMPLATE/gssoc_feature_request.md
+++ b/.github/ISSUE_TEMPLATE/gssoc_feature_request.md
@@ -7,32 +7,42 @@ assignees: ""
 ---
 
 ## 🚀 Program
+
 GSSoC
 
 ## ✨ Feature Description
+
 <!-- A clear and concise description of the feature you'd like to see -->
 
 ## 🤔 Problem It Solves
+
 <!-- What problem does this feature solve? Who would benefit from it? -->
 
 ## 💡 Proposed Solution
+
 <!-- Describe the solution you have in mind -->
 
 ## 🔄 Alternatives Considered
+
 <!-- Have you considered any alternative solutions or features? -->
 
 ## 📸 Mockups / Examples
+
 <!-- If applicable, add screenshots, mockups, or links to similar features in other projects -->
 
 ## ✅ Acceptance Criteria
+
 <!-- What does "done" look like for this feature? -->
+
 - [ ] ...
 - [ ] ...
 
 ## 📋 Additional Context
+
 <!-- Any other context about the feature request -->
 
 ## 🌱 Contributor Checklist
+
 - [ ] I am participating via GSSoC
 - [ ] I have read the contribution guidelines
 - [ ] I checked for existing issues before creating this
diff --git a/.github/ISSUE_TEMPLATE/nsoc_bug_report.md b/.github/ISSUE_TEMPLATE/nsoc_bug_report.md
index 1e21c530..96f33746 100644
--- a/.github/ISSUE_TEMPLATE/nsoc_bug_report.md
+++ b/.github/ISSUE_TEMPLATE/nsoc_bug_report.md
@@ -6,15 +6,19 @@ labels: ""
 ---
 
 ## 🚀 Program
+
 NSOC
 
 ## 🐛 Describe the bug
+
 A clear and concise description of what the bug is.
 
 ---
 
 ## 🔁 Steps to Reproduce
+
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '...'
 3. Scroll to '...'
@@ -23,21 +27,25 @@ Steps to reproduce the behavior:
 ---
 
 ## ✅ Expected Behavior
+
 A clear and concise description of what you expected to happen.
 
 ---
 
 ## ❌ Actual Behavior
+
 What actually happens instead.
 
 ---
 
 ## 📸 Screenshots
+
 If applicable, add screenshots to help explain your problem.
 
 ---
 
 ## 🌱 Contributor Checklist
+
 - [ ] I am participating via NSOC
 - [ ] I have read the contribution guidelines
 - [ ] I checked for existing issues before creating this
@@ -45,6 +53,7 @@ If applicable, add screenshots to help explain your problem.
 ---
 
 ## 💻 Environment
+
 - Browser: (e.g. Chrome, Firefox)
 - Device: (e.g. Desktop, Mobile)
 - OS: (e.g. Windows, macOS)
@@ -52,4 +61,5 @@ If applicable, add screenshots to help explain your problem.
 ---
 
 ## 📝 Additional Context
+
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/nsoc_feature_request.md b/.github/ISSUE_TEMPLATE/nsoc_feature_request.md
index f288a931..003b83e9 100644
--- a/.github/ISSUE_TEMPLATE/nsoc_feature_request.md
+++ b/.github/ISSUE_TEMPLATE/nsoc_feature_request.md
@@ -7,32 +7,42 @@ assignees: ""
 ---
 
 ## 🚀 Program
+
 NSOC
 
 ## ✨ Feature Description
+
 <!-- A clear and concise description of the feature you'd like to see -->
 
 ## 🤔 Problem It Solves
+
 <!-- What problem does this feature solve? Who would benefit from it? -->
 
 ## 💡 Proposed Solution
+
 <!-- Describe the solution you have in mind -->
 
 ## 🔄 Alternatives Considered
+
 <!-- Have you considered any alternative solutions or features? -->
 
 ## 📸 Mockups / Examples
+
 <!-- If applicable, add screenshots, mockups, or links to similar features in other projects -->
 
 ## ✅ Acceptance Criteria
+
 <!-- What does "done" look like for this feature? -->
+
 - [ ] ...
 - [ ] ...
 
 ## 📋 Additional Context
+
 <!-- Any other context about the feature request -->
 
 ## 🌱 Contributor Checklist
+
 - [ ] I am participating via NSOC
 - [ ] I have read the contribution guidelines
 - [ ] I checked for existing issues before creating this
diff --git a/.github/ISSUE_TEMPLATE/ssoc_bug_report.md b/.github/ISSUE_TEMPLATE/ssoc_bug_report.md
index b0a668c9..55328b64 100644
--- a/.github/ISSUE_TEMPLATE/ssoc_bug_report.md
+++ b/.github/ISSUE_TEMPLATE/ssoc_bug_report.md
@@ -6,15 +6,19 @@ labels: ""
 ---
 
 ## 🚀 Program
+
 SSOC
 
 ## 🐛 Describe the bug
+
 A clear and concise description of what the bug is.
 
 ---
 
 ## 🔁 Steps to Reproduce
+
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '...'
 3. Scroll to '...'
@@ -23,21 +27,25 @@ Steps to reproduce the behavior:
 ---
 
 ## ✅ Expected Behavior
+
 A clear and concise description of what you expected to happen.
 
 ---
 
 ## ❌ Actual Behavior
+
 What actually happens instead.
 
 ---
 
 ## 📸 Screenshots
+
 If applicable, add screenshots to help explain your problem.
 
 ---
 
 ## 🌱 Contributor Checklist
+
 - [ ] I am participating via SSOC
 - [ ] I have read the contribution guidelines
 - [ ] I checked for existing issues before creating this
@@ -45,6 +53,7 @@ If applicable, add screenshots to help explain your problem.
 ---
 
 ## 💻 Environment
+
 - Browser: (e.g. Chrome, Firefox)
 - Device: (e.g. Desktop, Mobile)
 - OS: (e.g. Windows, macOS)
@@ -52,4 +61,5 @@ If applicable, add screenshots to help explain your problem.
 ---
 
 ## 📝 Additional Context
+
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/ssoc_feature_request.md b/.github/ISSUE_TEMPLATE/ssoc_feature_request.md
index 15bc2976..fca299cf 100644
--- a/.github/ISSUE_TEMPLATE/ssoc_feature_request.md
+++ b/.github/ISSUE_TEMPLATE/ssoc_feature_request.md
@@ -7,32 +7,42 @@ assignees: ""
 ---
 
 ## 🚀 Program
+
 SSOC
 
 ## ✨ Feature Description
+
 <!-- A clear and concise description of the feature you'd like to see -->
 
 ## 🤔 Problem It Solves
+
 <!-- What problem does this feature solve? Who would benefit from it? -->
 
 ## 💡 Proposed Solution
+
 <!-- Describe the solution you have in mind -->
 
 ## 🔄 Alternatives Considered
+
 <!-- Have you considered any alternative solutions or features? -->
 
 ## 📸 Mockups / Examples
+
 <!-- If applicable, add screenshots, mockups, or links to similar features in other projects -->
 
 ## ✅ Acceptance Criteria
+
 <!-- What does "done" look like for this feature? -->
+
 - [ ] ...
 - [ ] ...
 
 ## 📋 Additional Context
+
 <!-- Any other context about the feature request -->
 
 ## 🌱 Contributor Checklist
+
 - [ ] I am participating via SSOC
 - [ ] I have read the contribution guidelines
 - [ ] I checked for existing issues before creating this
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index caf3bb95..44343785 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,14 +1,19 @@
 ## 🚀 Program
+
 <!-- Choose one: GSSoC, NSOC, SSOC, ELUSOC -->
 
 ## 📝 Description
+
 <!-- Describe what this PR does and why -->
 
 ## 🔗 Related Issue
+
 Closes #<!-- issue number -->
 
 ## 🔄 Type of Change
+
 <!-- Check all that apply -->
+
 - [ ] 🐛 Bug fix
 - [ ] ✨ New feature
 - [ ] 🔍 SEO improvement
@@ -19,14 +24,18 @@ Closes #<!-- issue number -->
 - [ ] 🧹 Refactor / cleanup
 
 ## 🧪 How to Test
+
 <!-- Steps to verify your change works correctly -->
+
 1. Open `http://localhost:5173` in a browser
 2. ...
 
 ## 📸 Screenshots (if applicable)
+
 <!-- Before and after screenshots for UI changes -->
 
 ## ✅ Checklist
+
 - [ ] I am contributing under GSSoC, NSOC, SSOC, or ELUSOC
 - [ ] My code follows the project's existing style
 - [ ] I have tested my changes in a browser
diff --git a/.github/PULL_REQUEST_TEMPLATE/elusoc.md b/.github/PULL_REQUEST_TEMPLATE/elusoc.md
index 626a789e..5675b8a4 100644
--- a/.github/PULL_REQUEST_TEMPLATE/elusoc.md
+++ b/.github/PULL_REQUEST_TEMPLATE/elusoc.md
@@ -1,14 +1,19 @@
 ## 🚀 Program
+
 ELUSOC
 
 ## 📝 Description
+
 <!-- Describe what this PR does and why -->
 
 ## 🔗 Related Issue
+
 Closes #<!-- issue number -->
 
 ## 🔄 Type of Change
+
 <!-- Check all that apply -->
+
 - [ ] 🐛 Bug fix
 - [ ] ✨ New feature
 - [ ] 🔍 SEO improvement
@@ -19,14 +24,18 @@ Closes #<!-- issue number -->
 - [ ] 🧹 Refactor / cleanup
 
 ## 🧪 How to Test
+
 <!-- Steps to verify your change works correctly -->
+
 1. Open `http://localhost:5173` in a browser
 2. ...
 
 ## 📸 Screenshots (if applicable)
+
 <!-- Before and after screenshots for UI changes -->
 
 ## ✅ Checklist
+
 - [ ] I am contributing under ELUSOC
 - [ ] My code follows the project's existing style
 - [ ] I have tested my changes in a browser
diff --git a/.github/PULL_REQUEST_TEMPLATE/gssoc.md b/.github/PULL_REQUEST_TEMPLATE/gssoc.md
index 61f11d11..8c719f5d 100644
--- a/.github/PULL_REQUEST_TEMPLATE/gssoc.md
+++ b/.github/PULL_REQUEST_TEMPLATE/gssoc.md
@@ -1,14 +1,19 @@
 ## 🚀 Program
+
 GSSoC
 
 ## 📝 Description
+
 <!-- Describe what this PR does and why -->
 
 ## 🔗 Related Issue
+
 Closes #<!-- issue number -->
 
 ## 🔄 Type of Change
+
 <!-- Check all that apply -->
+
 - [ ] 🐛 Bug fix
 - [ ] ✨ New feature
 - [ ] 🔍 SEO improvement
@@ -19,14 +24,18 @@ Closes #<!-- issue number -->
 - [ ] 🧹 Refactor / cleanup
 
 ## 🧪 How to Test
+
 <!-- Steps to verify your change works correctly -->
+
 1. Open `http://localhost:5173` in a browser
 2. ...
 
 ## 📸 Screenshots (if applicable)
+
 <!-- Before and after screenshots for UI changes -->
 
 ## ✅ Checklist
+
 - [ ] I am contributing under GSSoC
 - [ ] My code follows the project's existing style
 - [ ] I have tested my changes in a browser
diff --git a/.github/PULL_REQUEST_TEMPLATE/nsoc.md b/.github/PULL_REQUEST_TEMPLATE/nsoc.md
index 26e4bd3c..48aeadfb 100644
--- a/.github/PULL_REQUEST_TEMPLATE/nsoc.md
+++ b/.github/PULL_REQUEST_TEMPLATE/nsoc.md
@@ -1,14 +1,19 @@
 ## 🚀 Program
+
 NSOC
 
 ## 📝 Description
+
 <!-- Describe what this PR does and why -->
 
 ## 🔗 Related Issue
+
 Closes #<!-- issue number -->
 
 ## 🔄 Type of Change
+
 <!-- Check all that apply -->
+
 - [ ] 🐛 Bug fix
 - [ ] ✨ New feature
 - [ ] 🔍 SEO improvement
@@ -19,14 +24,18 @@ Closes #<!-- issue number -->
 - [ ] 🧹 Refactor / cleanup
 
 ## 🧪 How to Test
+
 <!-- Steps to verify your change works correctly -->
+
 1. Open `http://localhost:5173` in a browser
 2. ...
 
 ## 📸 Screenshots (if applicable)
+
 <!-- Before and after screenshots for UI changes -->
 
 ## ✅ Checklist
+
 - [ ] I am contributing under NSOC
 - [ ] My code follows the project's existing style
 - [ ] I have tested my changes in a browser
diff --git a/.github/PULL_REQUEST_TEMPLATE/ssoc.md b/.github/PULL_REQUEST_TEMPLATE/ssoc.md
index 4ddb218a..bb70c843 100644
--- a/.github/PULL_REQUEST_TEMPLATE/ssoc.md
+++ b/.github/PULL_REQUEST_TEMPLATE/ssoc.md
@@ -1,14 +1,19 @@
 ## 🚀 Program
+
 SSOC
 
 ## 📝 Description
+
 <!-- Describe what this PR does and why -->
 
 ## 🔗 Related Issue
+
 Closes #<!-- issue number -->
 
 ## 🔄 Type of Change
+
 <!-- Check all that apply -->
+
 - [ ] 🐛 Bug fix
 - [ ] ✨ New feature
 - [ ] 🔍 SEO improvement
@@ -19,14 +24,18 @@ Closes #<!-- issue number -->
 - [ ] 🧹 Refactor / cleanup
 
 ## 🧪 How to Test
+
 <!-- Steps to verify your change works correctly -->
+
 1. Open `http://localhost:5173` in a browser
 2. ...
 
 ## 📸 Screenshots (if applicable)
+
 <!-- Before and after screenshots for UI changes -->
 
 ## ✅ Checklist
+
 - [ ] I am contributing under SSOC
 - [ ] My code follows the project's existing style
 - [ ] I have tested my changes in a browser
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 00000000..f2d0698d
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,35 @@
+name: Lint and Format
+
+on:
+  pull_request:
+    branches:
+      - main
+      - master
+  push:
+    branches:
+      - main
+      - master
+
+jobs:
+  lint:
+    name: Run ESLint and Prettier
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Run Lint
+        run: npm run lint
+
+      - name: Run Prettier Check
+        run: npm run format:check || npx prettier --check .
diff --git a/.github/workflows/mentor-merge-eligibility.yml b/.github/workflows/mentor-merge-eligibility.yml
index d0de4dd9..b469344a 100644
--- a/.github/workflows/mentor-merge-eligibility.yml
+++ b/.github/workflows/mentor-merge-eligibility.yml
@@ -23,7 +23,7 @@ on:
 permissions:
   contents: read
   pull-requests: read
-  statuses: write   # needed to post commit statuses
+  statuses: write # needed to post commit statuses
 
 concurrency:
   group: mentor-eligibility-${{ github.event.pull_request.number }}
@@ -152,4 +152,3 @@ jobs:
           name: pr_number
           path: pr/
           retention-days: 1
-
diff --git a/.github/workflows/pr-review-handler.yml b/.github/workflows/pr-review-handler.yml
index 43bfa2d9..ba5cdcfe 100644
--- a/.github/workflows/pr-review-handler.yml
+++ b/.github/workflows/pr-review-handler.yml
@@ -122,12 +122,12 @@ jobs:
               core.info('Could not determine pull request associated with this workflow run. Skipping.');
               return;
             }
-            
+
             issue_number = pr.number;
             const prHeadSha = pr.head?.sha || headSha;
-            
+
             core.info(`Processing review state for PR #${issue_number} (SHA: ${headSha})`);
-            
+
             // ─────────────────────────────────────────────────────────────
             // CONFIGURATION: keep in sync with other workflows
             // ─────────────────────────────────────────────────────────────
@@ -162,7 +162,7 @@ jobs:
             const ADMINS = ['itzzavdhesh'];
             const STATUS_CONTEXT = 'voiceforge/mentor-approved';
             // ─────────────────────────────────────────────────────────────
-            
+
             // 1. Fetch current labels on the PR fresh from the API
             let currentLabelsLower = [];
             try {
@@ -287,7 +287,7 @@ jobs:
             // 4. Update mentor label logic
             const labelsToAdd = [];
             const labelsToRemove = [];
-            
+
             for (const mentor of MENTORS) {
               const state = latestReviewByUser[mentor.toLowerCase()];
               const label = mentorLabelMap[mentor];
@@ -299,11 +299,11 @@ jobs:
                 labelsToRemove.push(label);
               }
             }
-            
+
             // 5. Check if any mentor approved/changes requested
             let hasApproved = false;
             let hasChangesRequested = false;
-            
+
             for (const user in latestReviewByUser) {
               const state = latestReviewByUser[user];
               const isMentor = MENTORS.map(m => m.toLowerCase()).includes(user);
@@ -327,7 +327,7 @@ jobs:
                 }
               }
             }
-            
+
             if (hasChangesRequested) {
               labelsToAdd.push('needs revision');
               labelsToRemove.push('ready for review');
@@ -370,7 +370,7 @@ jobs:
               const state = latestReviewByUser[m.toLowerCase()];
               return state === 'APPROVED' || state === 'COMMENTED' || state === 'CHANGES_REQUESTED';
             });
-            
+
             if (reviewingMentors.length > 0) {
               const names = reviewingMentors.join(', ');
               await setStatus('success', `Reviewed by mentor(s): ${names} — eligible to merge.`);
diff --git a/.lintstagedrc b/.lintstagedrc
new file mode 100644
index 00000000..0257341b
--- /dev/null
+++ b/.lintstagedrc
@@ -0,0 +1,4 @@
+{
+  "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
+  "*.{json,md,yml,yaml,css,scss}": ["prettier --write"]
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2fd1126d..aa09c10e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,4 +1,5 @@
 <!-- Explains how contributors can run VoiceForge locally and pick scoped starter issues. -->
+
 # Contributing To VoiceForge
 
 Thanks for helping build an assistive open source tool with care. Please keep consent, privacy, and accessibility at the center of every contribution.
@@ -56,11 +57,11 @@ MOCK_CHATTERBOX=true
 
 With this flag active the server behaves as follows:
 
-| Endpoint | Live mode | Mock mode |
-|---|---|---|
-| `POST /api/voice/clone` | Stores reference audio, returns `voice_id` | Returns fixture `voice_id` instantly |
-| `POST /api/voice/speak` | Enqueues real Chatterbox TTS stream | Enqueues mock stream |
-| `GET /api/voice/speak/stream` | Proxies audio from Hugging Face | Streams a short silent MP3 locally |
+| Endpoint                      | Live mode                                  | Mock mode                            |
+| ----------------------------- | ------------------------------------------ | ------------------------------------ |
+| `POST /api/voice/clone`       | Stores reference audio, returns `voice_id` | Returns fixture `voice_id` instantly |
+| `POST /api/voice/speak`       | Enqueues real Chatterbox TTS stream        | Enqueues mock stream                 |
+| `GET /api/voice/speak/stream` | Proxies audio from Hugging Face            | Streams a short silent MP3 locally   |
 
 You can exercise the **complete UI flow** — record → clone → type text → Speak
 → download — entirely offline.
@@ -76,12 +77,12 @@ PR description:
 
 ```markdown
 ## Testing Notes
+
 Tested clone and TTS end-to-end using MOCK_CHATTERBOX=true.
 Live Chatterbox path verified locally with MOCK_CHATTERBOX=false.
 UI logic confirmed with mock blob in CI.
 ```
 
-
 ## Program Contributions
 
 VoiceForge accepts contributions through GSSoC, NSOC, SSOC, and ELUSOC. Program contributors must use the matching issue and pull request templates.
@@ -121,7 +122,6 @@ Polite assignment requests such as "please assign this issue to me" or "I would
 
 ## Good First Issues
 
-
 ## Pull Request Checklist
 
 - The app runs with `npm install && npm run dev`.
diff --git a/README.md b/README.md
index 7c42abea..e7b5f6ad 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,5 @@
 <!-- Documents the VoiceForge local development workflow, browser constraints, and MVP roadmap. -->
+
 # VoiceForge
 
 VoiceForge is a browser-based assistive video tool that lets a user type during calls and output cloned speech with a lip-synced face preview.
@@ -72,7 +73,7 @@ npm install
 cp .env.example .env
 ```
 
-4. *(Optional)* Open `.env` and review the settings. The defaults run in offline mock mode, so no API key or internet access is needed. See [Environment Variables](#environment-variables) for the full reference.
+4. _(Optional)_ Open `.env` and review the settings. The defaults run in offline mock mode, so no API key or internet access is needed. See [Environment Variables](#environment-variables) for the full reference.
 5. Start the client and server together:
 
 ```bash
@@ -87,13 +88,13 @@ npm run dev
 
 All variables live in your local `.env` file (copy from `.env.example`). **None of them require a paid account or API key.**
 
-| Variable | Default | Description |
-| --- | --- | --- |
-| `VOICE_ENGINE_SPACE` | *(commented out)* | The Hugging Face Gradio space used for voice synthesis. See the dual-mode setup below. |
-| `MOCK_CHATTERBOX` | `true` | Controls whether the live AI or an offline test stub is used. See below. |
-| `PORT` | `3001` | Express API port. |
-| `CLIENT_URL` | `http://localhost:5173` | Allowed CORS origin for the Vite dev server. |
-| `STREAM_SECRET` | *(auto-generated)* | AES-256-GCM signing key for speech stream tokens. Set a fixed value to survive server restarts. |
+| Variable             | Default                 | Description                                                                                     |
+| -------------------- | ----------------------- | ----------------------------------------------------------------------------------------------- |
+| `VOICE_ENGINE_SPACE` | _(commented out)_       | The Hugging Face Gradio space used for voice synthesis. See the dual-mode setup below.          |
+| `MOCK_CHATTERBOX`    | `true`                  | Controls whether the live AI or an offline test stub is used. See below.                        |
+| `PORT`               | `3001`                  | Express API port.                                                                               |
+| `CLIENT_URL`         | `http://localhost:5173` | Allowed CORS origin for the Vite dev server.                                                    |
+| `STREAM_SECRET`      | _(auto-generated)_      | AES-256-GCM signing key for speech stream tokens. Set a fixed value to survive server restarts. |
 
 ### Dual-Mode Voice Engine Setup
 
@@ -182,15 +183,13 @@ Go to Settings > Devices > Camera and select **OBS Virtual Camera**.
 
 ## API
 
-| Method | Endpoint | Description |
-| --- | --- | --- |
-| `POST` | `/api/voice/clone` | Upload reference audio. Stores it server-side and returns a `voice_id`. No external API call in mock mode. |
-| `POST` | `/api/voice/speak` | Send text, `voice_id`, and optional voice settings. Returns a signed `speechId` and streaming `audioUrl`. |
-| `GET` | `/api/voice/speak/stream?t=<speechId>` | Stream the Chatterbox-generated audio for a pending signed speech token (`t`). Proxied from the Hugging Face Space. |
-| `GET` | `/api/voice/status` | Returns current engine mode (`isMock`, `space`) for debugging. |
-| `GET` | `/api/health` | Returns local API health status. |
-
-
+| Method | Endpoint                               | Description                                                                                                         |
+| ------ | -------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `POST` | `/api/voice/clone`                     | Upload reference audio. Stores it server-side and returns a `voice_id`. No external API call in mock mode.          |
+| `POST` | `/api/voice/speak`                     | Send text, `voice_id`, and optional voice settings. Returns a signed `speechId` and streaming `audioUrl`.           |
+| `GET`  | `/api/voice/speak/stream?t=<speechId>` | Stream the Chatterbox-generated audio for a pending signed speech token (`t`). Proxied from the Hugging Face Space. |
+| `GET`  | `/api/voice/status`                    | Returns current engine mode (`isMock`, `space`) for debugging.                                                      |
+| `GET`  | `/api/health`                          | Returns local API health status.                                                                                    |
 
 ## Roadmap
 
diff --git a/client/index.html b/client/index.html
index a4516d60..bb12eb22 100644
--- a/client/index.html
+++ b/client/index.html
@@ -5,7 +5,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/models/logo5.png" />
-    <meta name="description" content="VoiceForge turns typed text into cloned speech and lip-synced call video." />
+    <meta
+      name="description"
+      content="VoiceForge turns typed text into cloned speech and lip-synced call video."
+    />
     <title>VoiceForge</title>
   </head>
   <body>
diff --git a/client/postcss.config.js b/client/postcss.config.js
index 6900a54a..d55cab13 100644
--- a/client/postcss.config.js
+++ b/client/postcss.config.js
@@ -2,6 +2,6 @@
 export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {}
-  }
+    autoprefixer: {},
+  },
 };
diff --git a/client/public/404.html b/client/public/404.html
index 81f67fe1..04437317 100644
--- a/client/public/404.html
+++ b/client/public/404.html
@@ -6,23 +6,29 @@
     <meta name="description" content="Page not found — VoiceForge" />
     <title>404 — VoiceForge</title>
     <style>
-      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
 
       :root {
-        --bg-page:   #f6f8f5;
-        --bg-card:   #ffffff;
+        --bg-page: #f6f8f5;
+        --bg-card: #ffffff;
         --text-base: #16201d;
-        --text-muted:#4b5563;
-        --border:    rgba(22, 32, 29, 0.1);
+        --text-muted: #4b5563;
+        --border: rgba(22, 32, 29, 0.1);
       }
 
       @media (prefers-color-scheme: dark) {
         :root {
-          --bg-page:   #000000;
-          --bg-card:   #080808;
+          --bg-page: #000000;
+          --bg-card: #080808;
           --text-base: #f5f5f5;
-          --text-muted:#a3a3a3;
-          --border:    rgba(255, 255, 255, 0.12);
+          --text-muted: #a3a3a3;
+          --border: rgba(255, 255, 255, 0.12);
         }
       }
 
@@ -30,7 +36,14 @@
         min-height: 100vh;
         background: var(--bg-page);
         color: var(--text-base);
-        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        font-family:
+          Inter,
+          ui-sans-serif,
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          "Segoe UI",
+          sans-serif;
         -webkit-font-smoothing: antialiased;
         display: flex;
         align-items: center;
@@ -46,7 +59,7 @@
         max-width: 480px;
         width: 100%;
         text-align: center;
-        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
       }
 
       .code {
@@ -85,21 +98,22 @@
         transition: opacity 0.15s ease;
       }
 
-      .btn:hover, 
-      .btn:focus-visible { 
-        opacity: 0.85; 
-        outline: 2px solid #000000; 
-        outline-offset: 3px; 
+      .btn:hover,
+      .btn:focus-visible {
+        opacity: 0.85;
+        outline: 2px solid #000000;
+        outline-offset: 3px;
       }
 
-
       .btn:focus:not(:focus-visible) {
         outline: none;
       }
 
-
       @media (prefers-color-scheme: dark) {
-        .btn { background: #ffffff; color: #16201d; }
+        .btn {
+          background: #ffffff;
+          color: #16201d;
+        }
       }
 
       .brand {
@@ -120,9 +134,7 @@
         The page you're looking for doesn't exist or has been moved.<br />
         Head back to VoiceForge to continue.
       </p>
-      <a href="/" class="btn">
-        ← Back to VoiceForge
-      </a>
+      <a href="/" class="btn"> ← Back to VoiceForge </a>
       <div class="brand">VoiceForge — AI-powered voice for everyone</div>
     </div>
   </body>
diff --git a/client/src/App.jsx b/client/src/App.jsx
index e5e5198c..b17fd40a 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,13 +1,25 @@
 // Coordinates top-level navigation, saved voice state, and page rendering for VoiceForge.
 import React from "react";
-import { Camera, Mic2, Settings as SettingsIcon, MessageSquare, Sun, Moon, Menu, X, Users, Info, BarChart2 } from "lucide-react";
+import {
+  Camera,
+  Mic2,
+  Settings as SettingsIcon,
+  MessageSquare,
+  Sun,
+  Moon,
+  Menu,
+  X,
+  Users,
+  Info,
+  BarChart2,
+} from "lucide-react";
 import Onboarding from "./pages/Onboarding.jsx";
 import Call from "./pages/Call.jsx";
 import Settings from "./pages/Settings.jsx";
 import Analytics from "./pages/Analytics.jsx";
 import VoiceForge from "./components/VoiceForge";
 import { useTheme } from "./components/ThemeContext.jsx";
-import Footer from './components/Footer.jsx';
+import Footer from "./components/Footer.jsx";
 import KeyboardShortcutsModal from "./components/KeyboardShortcutsModal.jsx";
 import ScrollToBottomButton from "./components/ScrollToBottomButton.jsx";
 import ScrollToTopButton from "./components/ScrollToTopButton";
@@ -16,12 +28,12 @@ import About from "./pages/About";
 import PrivacyPolicy from "./pages/PrivacyPolicy";
 
 const tabs = [
-  { id: "onboarding",   label: "Onboarding",   icon: Mic2 },
-  { id: "call",         label: "Call",          icon: Camera },
-  { id: "compose",      label: "Compose",       icon: MessageSquare },
-  { id: "analytics",    label: "Analytics",     icon: BarChart2 },
-  { id: "settings",     label: "Settings",      icon: SettingsIcon },
-  { id: "contributors", label: "Contributors",  icon: Users },
+  { id: "onboarding", label: "Onboarding", icon: Mic2 },
+  { id: "call", label: "Call", icon: Camera },
+  { id: "compose", label: "Compose", icon: MessageSquare },
+  { id: "analytics", label: "Analytics", icon: BarChart2 },
+  { id: "settings", label: "Settings", icon: SettingsIcon },
+  { id: "contributors", label: "Contributors", icon: Users },
   { id: "about", label: "About", icon: Info },
 ];
 
@@ -79,8 +91,6 @@ export default function App() {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [shortcutsOpen]);
 
-
-
   function selectTab(tab) {
     if (!tabIds.has(tab)) return;
     saveActiveTab(tab);
@@ -99,7 +109,10 @@ export default function App() {
   // On initial load, honor direct links to /privacy-policy
   React.useEffect(() => {
     try {
-      if (typeof window !== "undefined" && window.location?.pathname === "/privacy-policy") {
+      if (
+        typeof window !== "undefined" &&
+        window.location?.pathname === "/privacy-policy"
+      ) {
         setActiveTab("privacy-policy");
       }
     } catch {
@@ -109,24 +122,25 @@ export default function App() {
 
   return (
     <div className="min-h-screen flex flex-col bg-cloud text-ink dark:bg-night dark:text-neutral-100">
-      
       {/* Global Header */}
       <header className="sticky top-0 z-40 border-b border-ink/10 bg-white/70 backdrop-blur-md dark:border-border dark:bg-surface/70">
         <div className="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-3 sm:px-6 lg:px-8">
           {/* Logo + Title */}
-            <div
-              className="flex items-center gap-3 min-w-0 cursor-pointer"
-              onClick={() => selectTab("onboarding")}
-              role="button"
-              tabIndex={0}
-              aria-label="Go to home"
-              onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && selectTab("onboarding")}
-            >
-              <img
-                src="/models/logo5.png"
-                alt="VoiceForge Logo"
-                className="h-10 w-10 flex-shrink-0 object-contain sm:h-12 sm:w-12"
-              />
+          <div
+            className="flex items-center gap-3 min-w-0 cursor-pointer"
+            onClick={() => selectTab("onboarding")}
+            role="button"
+            tabIndex={0}
+            aria-label="Go to home"
+            onKeyDown={(e) =>
+              (e.key === "Enter" || e.key === " ") && selectTab("onboarding")
+            }
+          >
+            <img
+              src="/models/logo5.png"
+              alt="VoiceForge Logo"
+              className="h-10 w-10 flex-shrink-0 object-contain sm:h-12 sm:w-12"
+            />
             <div className="min-w-0">
               <p className="hidden text-xs font-semibold uppercase tracking-[0.18em] text-moss dark:text-glow sm:block">
                 Open source assistive video
@@ -142,10 +156,16 @@ export default function App() {
             type="button"
             onClick={toggleTheme}
             aria-pressed={theme === "dark"}
-            aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+            aria-label={
+              theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+            }
             className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-ink/15 bg-white text-ink transition hover:border-moss focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss dark:border-border dark:bg-black dark:text-neutral-200 dark:focus-visible:ring-glow sm:hidden"
           >
-            {theme === "dark" ? <Sun size={17} aria-hidden="true" /> : <Moon size={17} aria-hidden="true" />}
+            {theme === "dark" ? (
+              <Sun size={17} aria-hidden="true" />
+            ) : (
+              <Moon size={17} aria-hidden="true" />
+            )}
           </button>
 
           {/* Desktop nav + theme toggle */}
@@ -175,16 +195,22 @@ export default function App() {
               type="button"
               onClick={toggleTheme}
               aria-pressed={theme === "dark"}
-              aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+              aria-label={
+                theme === "dark"
+                  ? "Switch to light mode"
+                  : "Switch to dark mode"
+              }
               title={theme === "dark" ? "Light mode" : "Dark mode"}
               className="inline-flex h-10 w-10 items-center justify-center rounded-md border border-ink/15 bg-white text-ink transition hover:border-moss hover:text-moss focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss dark:border-border dark:bg-black dark:text-neutral-200 dark:hover:border-glow dark:hover:text-glow dark:focus-visible:ring-glow"
             >
-              {theme === "dark" ? <Sun size={18} aria-hidden="true" /> : <Moon size={18} aria-hidden="true" />}
+              {theme === "dark" ? (
+                <Sun size={18} aria-hidden="true" />
+              ) : (
+                <Moon size={18} aria-hidden="true" />
+              )}
             </button>
           </div>
-
         </div>
-
       </header>
 
       {/* Main Content Area */}
@@ -193,15 +219,16 @@ export default function App() {
 
         {activeTab !== "compose" && (
           <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-            {activeTab === "onboarding" && <Onboarding onReady={() => selectTab("call")} />}
-            {activeTab === "call"       && <Call />}
-            {activeTab === "settings"   && <Settings />}
-            {activeTab === "analytics"  && <Analytics />}
+            {activeTab === "onboarding" && (
+              <Onboarding onReady={() => selectTab("call")} />
+            )}
+            {activeTab === "call" && <Call />}
+            {activeTab === "settings" && <Settings />}
+            {activeTab === "analytics" && <Analytics />}
             {activeTab === "contributors" && <Contributors />}
             {activeTab === "about" && <About onNavigate={selectTab} />}
-            {activeTab === "privacy-policy" && (<PrivacyPolicy
-              onBackHome={() => selectTab("onboarding")}
-             />
+            {activeTab === "privacy-policy" && (
+              <PrivacyPolicy onBackHome={() => selectTab("onboarding")} />
             )}
           </div>
         )}
@@ -236,11 +263,18 @@ export default function App() {
 
       {/* Bottom padding so content isn't hidden behind bottom nav on mobile */}
       <div className="h-16 sm:hidden" aria-hidden="true" />
-      
-      <KeyboardShortcutsModal isOpen={shortcutsOpen} onClose={() => setShortcutsOpen(false)} />
+
+      <KeyboardShortcutsModal
+        isOpen={shortcutsOpen}
+        onClose={() => setShortcutsOpen(false)}
+      />
       <ScrollToBottomButton activeTab={activeTab} />
       <ScrollToTopButton activeTab={activeTab} />
-      <Footer onNavigate={navigateTo} tabs={tabs} onOpenShortcuts={() => setShortcutsOpen(true)} />
+      <Footer
+        onNavigate={navigateTo}
+        tabs={tabs}
+        onOpenShortcuts={() => setShortcutsOpen(true)}
+      />
     </div>
   );
 }
diff --git a/client/src/components/AudioTrimmer.jsx b/client/src/components/AudioTrimmer.jsx
index b2a385b0..5b1723a3 100644
--- a/client/src/components/AudioTrimmer.jsx
+++ b/client/src/components/AudioTrimmer.jsx
@@ -7,14 +7,14 @@ export function AudioTrimmer({ audioBlob, onTrimComplete }) {
   const [audioBuffer, setAudioBuffer] = useState(null);
   const [duration, setDuration] = useState(0);
   const [peaks, setPeaks] = useState([]);
-  
+
   const [startRatio, setStartRatio] = useState(0.0);
   const [endRatio, setEndRatio] = useState(1.0);
   const [dragging, setDragging] = useState(null); // 'start' | 'end' | null
-  
+
   const [isPlaying, setIsPlaying] = useState(false);
   const [playbackProgress, setPlaybackProgress] = useState(0); // ratio relative to duration
-  
+
   const canvasRef = useRef(null);
   const audioCtxRef = useRef(null);
   const activeSourceRef = useRef(null);
@@ -42,13 +42,13 @@ export function AudioTrimmer({ audioBlob, onTrimComplete }) {
         if (active) {
           setAudioBuffer(buffer);
           setDuration(buffer.duration);
-          
+
           // Extract peaks for drawing the waveform
           const channelData = buffer.getChannelData(0);
           const barCount = 150;
           const step = Math.floor(channelData.length / barCount) || 1;
           const tempPeaks = [];
-          
+
           for (let i = 0; i < barCount; i++) {
             let max = 0;
             const start = i * step;
@@ -145,7 +145,7 @@ export function AudioTrimmer({ audioBlob, onTrimComplete }) {
       ctx.moveTo(progressX, 0);
       ctx.lineTo(progressX, h);
       ctx.stroke();
-      
+
       // Cursor head
       ctx.fillStyle = "#40916C";
       ctx.beginPath();
@@ -164,7 +164,9 @@ export function AudioTrimmer({ audioBlob, onTrimComplete }) {
     // Start handle tag
     ctx.fillStyle = "#2EC4B6";
     ctx.beginPath();
-    ctx.roundRect ? ctx.roundRect(startX - 6, h / 2 - 12, 12, 24, 4) : ctx.rect(startX - 6, h / 2 - 12, 12, 24);
+    ctx.roundRect
+      ? ctx.roundRect(startX - 6, h / 2 - 12, 12, 24, 4)
+      : ctx.rect(startX - 6, h / 2 - 12, 12, 24);
     ctx.fill();
     // Inner handle lines
     ctx.fillStyle = "#ffffff";
@@ -181,13 +183,14 @@ export function AudioTrimmer({ audioBlob, onTrimComplete }) {
     // End handle tag
     ctx.fillStyle = "#FF6B6B";
     ctx.beginPath();
-    ctx.roundRect ? ctx.roundRect(endX - 6, h / 2 - 12, 12, 24, 4) : ctx.rect(endX - 6, h / 2 - 12, 12, 24);
+    ctx.roundRect
+      ? ctx.roundRect(endX - 6, h / 2 - 12, 12, 24, 4)
+      : ctx.rect(endX - 6, h / 2 - 12, 12, 24);
     ctx.fill();
     // Inner handle lines
     ctx.fillStyle = "#ffffff";
     ctx.fillRect(endX - 2, h / 2 - 6, 1, 12);
     ctx.fillRect(endX + 1, h / 2 - 6, 1, 12);
-
   }, [peaks, startRatio, endRatio, isPlaying, playbackProgress]);
 
   // Handle pointer down on handles
@@ -234,7 +237,7 @@ export function AudioTrimmer({ audioBlob, onTrimComplete }) {
   // Play preview of the selected segment
   function startPreview() {
     if (!audioBuffer || !audioCtxRef.current) return;
-    
+
     stopPreview();
 
     const ctx = audioCtxRef.current;
@@ -248,15 +251,15 @@ export function AudioTrimmer({ audioBlob, onTrimComplete }) {
     source.start(0, start, length);
     activeSourceRef.current = source;
     setIsPlaying(true);
-    
+
     const startTime = ctx.currentTime;
     startTimeRef.current = startTime;
     setPlaybackProgress(startRatio);
 
     playbackIntervalRef.current = window.setInterval(() => {
       const elapsed = ctx.currentTime - startTime;
-      const currentProgress = startRatio + (elapsed / duration);
-      
+      const currentProgress = startRatio + elapsed / duration;
+
       if (currentProgress >= endRatio) {
         stopPreview();
       } else {
@@ -287,7 +290,7 @@ export function AudioTrimmer({ audioBlob, onTrimComplete }) {
   // Truncate and commit changes
   function handleApplyTrim() {
     if (!audioBuffer) return;
-    
+
     const startSec = startRatio * duration;
     const endSec = endRatio * duration;
     const sliceLenSec = endSec - startSec;
@@ -341,7 +344,9 @@ export function AudioTrimmer({ audioBlob, onTrimComplete }) {
             type="button"
             onClick={isPlaying ? stopPreview : startPreview}
             className={`inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-xs font-bold text-white transition ${
-              isPlaying ? "bg-neutral-600 hover:bg-neutral-700" : "bg-moss hover:bg-moss/90"
+              isPlaying
+                ? "bg-neutral-600 hover:bg-neutral-700"
+                : "bg-moss hover:bg-moss/90"
             }`}
           >
             {isPlaying ? (
@@ -369,10 +374,16 @@ export function AudioTrimmer({ audioBlob, onTrimComplete }) {
 
         <div className="flex items-center gap-4 text-xs font-bold text-neutral-500 dark:text-neutral-400">
           <div>
-            Start: <span className="text-neutral-700 dark:text-neutral-300">{(startRatio * duration).toFixed(1)}s</span>
+            Start:{" "}
+            <span className="text-neutral-700 dark:text-neutral-300">
+              {(startRatio * duration).toFixed(1)}s
+            </span>
           </div>
           <div>
-            End: <span className="text-neutral-700 dark:text-neutral-300">{(endRatio * duration).toFixed(1)}s</span>
+            End:{" "}
+            <span className="text-neutral-700 dark:text-neutral-300">
+              {(endRatio * duration).toFixed(1)}s
+            </span>
           </div>
           <div className="rounded-full bg-coral/10 text-coral px-2.5 py-0.5 border border-coral/20">
             Selected: {((endRatio - startRatio) * duration).toFixed(1)}s
diff --git a/client/src/components/FavoriteMessages.jsx b/client/src/components/FavoriteMessages.jsx
index 306e8588..71b3a7b3 100644
--- a/client/src/components/FavoriteMessages.jsx
+++ b/client/src/components/FavoriteMessages.jsx
@@ -18,7 +18,11 @@ export function FavoriteMessages({ history, favorites, onReuse, onUnpin }) {
       className="flex-shrink-0 border-b border-amber-200 bg-amber-50 px-4 py-2.5 dark:border-amber-500/25 dark:bg-black"
     >
       <div className="mb-1.5 flex items-center gap-1.5">
-        <Pin size={14} aria-hidden="true" className="text-amber-600 dark:text-amber-400" />
+        <Pin
+          size={14}
+          aria-hidden="true"
+          className="text-amber-600 dark:text-amber-400"
+        />
         <h3
           id="fav-heading"
           className="text-[11px] font-semibold uppercase tracking-widest text-amber-700 dark:text-amber-400"
@@ -27,7 +31,11 @@ export function FavoriteMessages({ history, favorites, onReuse, onUnpin }) {
         </h3>
       </div>
 
-      <div className="flex flex-wrap items-center gap-1.5" role="list" aria-label="Pinned phrases">
+      <div
+        className="flex flex-wrap items-center gap-1.5"
+        role="list"
+        aria-label="Pinned phrases"
+      >
         {displayed.map((message) => (
           <div
             key={message.id}
@@ -56,7 +64,11 @@ export function FavoriteMessages({ history, favorites, onReuse, onUnpin }) {
           <button
             onClick={() => setExpanded((value) => !value)}
             className="rounded-full border border-amber-200 bg-white px-2.5 py-1 text-xs text-amber-700 transition hover:bg-amber-100 focus:outline-none focus:ring-1 focus:ring-amber-400 dark:border-amber-500/30 dark:bg-surface dark:text-amber-300 dark:hover:bg-amber-500/15"
-            aria-label={expanded ? "Show fewer pinned phrases" : `Show ${pinned.length - FEW_SHOWN} more pinned phrases`}
+            aria-label={
+              expanded
+                ? "Show fewer pinned phrases"
+                : `Show ${pinned.length - FEW_SHOWN} more pinned phrases`
+            }
           >
             {expanded ? "Show less" : `+${pinned.length - FEW_SHOWN} more`}
           </button>
diff --git a/client/src/components/Footer.jsx b/client/src/components/Footer.jsx
index 33042c2a..94407170 100644
--- a/client/src/components/Footer.jsx
+++ b/client/src/components/Footer.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const Footer = ({ onNavigate, tabs, onOpenShortcuts }) => {
   const currentYear = new Date().getFullYear();
@@ -7,10 +7,8 @@ const Footer = ({ onNavigate, tabs, onOpenShortcuts }) => {
     <footer className="w-full mx-auto max-w-7xl px-3 pb-6 pt-2 sm:px-4">
       {/* The Styled Black Box */}
       <div className="w-full bg-white text-ink border border-ink/20 rounded-xl px-5 py-6 flex flex-col gap-6 shadow-md dark:bg-surface dark:text-white dark:border-border md:px-8 md:py-8 md:gap-8">
-
         {/* Top Section: 3 Columns */}
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-10 w-full">
-
           {/* Column 1: Brand */}
           <div className="flex flex-col gap-4">
             <div>
@@ -22,7 +20,8 @@ const Footer = ({ onNavigate, tabs, onOpenShortcuts }) => {
               </p>
             </div>
             <p className="text-sm text-ink/70 dark:text-neutral-400 leading-relaxed">
-              Browser-based assistive communication platform helping deaf and speech-impaired users participate naturally in video calls.
+              Browser-based assistive communication platform helping deaf and
+              speech-impaired users participate naturally in video calls.
             </p>
             {/* Social Icons */}
             <div className="flex items-center gap-4 mt-1">
@@ -34,8 +33,16 @@ const Footer = ({ onNavigate, tabs, onOpenShortcuts }) => {
                 aria-label="GitHub"
                 className="text-ink/70 hover:text-ink dark:text-neutral-400 dark:hover:text-white transition-colors duration-150"
               >
-                <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" aria-hidden="true">
-                  <path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.48 0-.236-.009-.866-.014-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.137 20.162 22 16.418 22 12c0-5.523-4.477-10-10-10z" />
+                <svg
+                  className="w-5 h-5 fill-current"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
+                  <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.48 0-.236-.009-.866-.014-1.7-2.782.603-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.137 20.162 22 16.418 22 12c0-5.523-4.477-10-10-10z"
+                  />
                 </svg>
               </a>
               {/* Twitter/X — replace href with actual link when available */}
@@ -46,7 +53,11 @@ const Footer = ({ onNavigate, tabs, onOpenShortcuts }) => {
                 aria-label="Twitter / X"
                 className="text-ink/70 hover:text-ink dark:text-neutral-400 dark:hover:text-white transition-colors duration-150"
               >
-                <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" aria-hidden="true">
+                <svg
+                  className="w-5 h-5 fill-current"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
                   <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.737-8.835L2.25 2.25h6.897l4.265 5.638L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z" />
                 </svg>
               </a>
@@ -58,7 +69,11 @@ const Footer = ({ onNavigate, tabs, onOpenShortcuts }) => {
                 aria-label="LinkedIn"
                 className="text-ink/70 hover:text-ink dark:text-neutral-400 dark:hover:text-white transition-colors duration-150"
               >
-                <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" aria-hidden="true">
+                <svg
+                  className="w-5 h-5 fill-current"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
                   <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                 </svg>
               </a>
@@ -70,7 +85,11 @@ const Footer = ({ onNavigate, tabs, onOpenShortcuts }) => {
                 aria-label="Discord"
                 className="text-ink/70 hover:text-ink dark:text-neutral-400 dark:hover:text-white transition-colors duration-150"
               >
-                <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24" aria-hidden="true">
+                <svg
+                  className="w-5 h-5 fill-current"
+                  viewBox="0 0 24 24"
+                  aria-hidden="true"
+                >
                   <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028 14.09 14.09 0 001.226-1.994.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
                 </svg>
               </a>
@@ -141,7 +160,6 @@ const Footer = ({ onNavigate, tabs, onOpenShortcuts }) => {
               )}
             </nav>
           </div>
-
         </div>
 
         {/* Divider */}
@@ -154,10 +172,9 @@ const Footer = ({ onNavigate, tabs, onOpenShortcuts }) => {
             ♿ Built for accessibility
           </span>
         </div>
-
       </div>
     </footer>
   );
 };
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/client/src/components/KeyboardShortcutsModal.jsx b/client/src/components/KeyboardShortcutsModal.jsx
index 5444535c..030995ee 100644
--- a/client/src/components/KeyboardShortcutsModal.jsx
+++ b/client/src/components/KeyboardShortcutsModal.jsx
@@ -122,7 +122,11 @@ export default function KeyboardShortcutsModal({ isOpen, onClose }) {
       >
         <div className="flex items-center justify-between border-b border-ink/10 px-6 py-4 dark:border-border">
           <div className="flex items-center gap-2">
-            <Keyboard size={18} aria-hidden="true" className="text-ink dark:text-neutral-200" />
+            <Keyboard
+              size={18}
+              aria-hidden="true"
+              className="text-ink dark:text-neutral-200"
+            />
             <h2
               id={HEADING_ID}
               className="text-base font-semibold text-ink dark:text-neutral-100"
@@ -189,4 +193,4 @@ export default function KeyboardShortcutsModal({ isOpen, onClose }) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/LanguageSelector.jsx b/client/src/components/LanguageSelector.jsx
index a68edcfa..8ea5653c 100644
--- a/client/src/components/LanguageSelector.jsx
+++ b/client/src/components/LanguageSelector.jsx
@@ -3,7 +3,13 @@
 // Used on the Call page, Compose page (compact mode), and Settings page
 // as the unified way to select an output language for Chatterbox TTS.
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { ChevronDown, Check, Search, Globe, X } from "lucide-react";
 import {
   SUPPORTED_LANGUAGES,
@@ -40,7 +46,7 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
       (l) =>
         l.name.toLowerCase().includes(q) ||
         l.nativeName.toLowerCase().includes(q) ||
-        l.code.toLowerCase().includes(q)
+        l.code.toLowerCase().includes(q),
     );
   }, [search]);
 
@@ -48,7 +54,7 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
   const flatItems = useMemo(() => {
     const items = [{ type: "auto", code: "", name: "Auto-detect" }];
     const filteredRegions = regions.filter((r) =>
-      filtered.some((l) => l.region === r)
+      filtered.some((l) => l.region === r),
     );
     for (const region of filteredRegions) {
       items.push({ type: "header", region });
@@ -61,11 +67,12 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
 
   // Only selectable items (skip headers) for keyboard focus
   const selectableIndices = useMemo(
-    () => flatItems.reduce((acc, item, i) => {
-      if (item.type !== "header") acc.push(i);
-      return acc;
-    }, []),
-    [flatItems]
+    () =>
+      flatItems.reduce((acc, item, i) => {
+        if (item.type !== "header") acc.push(i);
+        return acc;
+      }, []),
+    [flatItems],
   );
 
   // ── Open / Close ──────────────────────────────────────────────────────
@@ -106,7 +113,7 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
       onChange(code);
       closeDropdown();
     },
-    [onChange, closeDropdown]
+    [onChange, closeDropdown],
   );
 
   // ── Keyboard nav ──────────────────────────────────────────────────────
@@ -128,7 +135,10 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
         case "ArrowDown": {
           e.preventDefault();
           const currentSelIdx = selectableIndices.indexOf(focusIndex);
-          const nextSelIdx = Math.min(currentSelIdx + 1, selectableIndices.length - 1);
+          const nextSelIdx = Math.min(
+            currentSelIdx + 1,
+            selectableIndices.length - 1,
+          );
           const next = selectableIndices[nextSelIdx];
           if (next !== undefined) {
             setFocusIndex(next);
@@ -158,7 +168,15 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
           break;
       }
     },
-    [isOpen, focusIndex, flatItems, selectableIndices, openDropdown, closeDropdown, selectLanguage]
+    [
+      isOpen,
+      focusIndex,
+      flatItems,
+      selectableIndices,
+      openDropdown,
+      closeDropdown,
+      selectLanguage,
+    ],
   );
 
   function scrollToItem(index) {
@@ -188,9 +206,7 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
         className={[
           "group inline-flex items-center gap-2 rounded-lg border font-medium transition-all duration-200",
           "focus:outline-none focus:ring-2 focus:ring-moss/40 dark:focus:ring-glow/40",
-          compact
-            ? "px-3 py-2 text-sm"
-            : "w-full px-4 py-3 text-sm",
+          compact ? "px-3 py-2 text-sm" : "w-full px-4 py-3 text-sm",
           isOpen
             ? "border-moss bg-mint/20 text-ink dark:border-glow dark:bg-glow/10 dark:text-neutral-100"
             : "border-neutral-200 bg-white text-neutral-700 hover:border-moss/50 hover:bg-moss/5 dark:border-border dark:bg-black dark:text-neutral-200 dark:hover:border-glow/50 dark:hover:bg-glow/5",
@@ -217,7 +233,9 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
             "border-neutral-200/80 bg-white dark:border-border dark:bg-surface",
             "animate-fade-in-up",
             "max-w-[calc(100vw-2rem)]",
-            compact ? "left-0 w-72" : "left-0 right-0 min-w-0 sm:min-w-[320px] sm:w-96", 
+            compact
+              ? "left-0 w-72"
+              : "left-0 right-0 min-w-0 sm:min-w-[320px] sm:w-96",
           ].join(" ")}
           style={{ maxHeight: "420px" }}
         >
@@ -243,7 +261,10 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
             {search && (
               <button
                 type="button"
-                onClick={() => { setSearch(""); searchRef.current?.focus(); }}
+                onClick={() => {
+                  setSearch("");
+                  searchRef.current?.focus();
+                }}
                 className="rounded p-0.5 text-neutral-400 hover:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-300"
                 aria-label="Clear search"
               >
@@ -289,13 +310,21 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
                         : "text-neutral-700 dark:text-neutral-300",
                     ].join(" ")}
                   >
-                    <Globe size={18} aria-hidden="true" className="flex-shrink-0 text-neutral-400 dark:text-neutral-500" />
+                    <Globe
+                      size={18}
+                      aria-hidden="true"
+                      className="flex-shrink-0 text-neutral-400 dark:text-neutral-500"
+                    />
                     <span className="flex-1">Auto-detect</span>
                     <span className="text-[11px] text-neutral-400 dark:text-neutral-500">
                       Let AI detect
                     </span>
                     {isSelected && (
-                      <Check size={15} aria-hidden="true" className="flex-shrink-0 text-moss dark:text-glow" />
+                      <Check
+                        size={15}
+                        aria-hidden="true"
+                        className="flex-shrink-0 text-moss dark:text-glow"
+                      />
                     )}
                   </button>
                 );
@@ -335,7 +364,10 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
                       : "text-neutral-700 dark:text-neutral-300",
                   ].join(" ")}
                 >
-                  <span className="flex-shrink-0 text-lg leading-none" aria-hidden="true">
+                  <span
+                    className="flex-shrink-0 text-lg leading-none"
+                    aria-hidden="true"
+                  >
                     {item.flag}
                   </span>
                   <span className="flex-1 truncate">
@@ -348,7 +380,11 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
                     {item.code}
                   </span>
                   {isSelected && (
-                    <Check size={15} aria-hidden="true" className="flex-shrink-0 text-moss dark:text-glow" />
+                    <Check
+                      size={15}
+                      aria-hidden="true"
+                      className="flex-shrink-0 text-moss dark:text-glow"
+                    />
                   )}
                 </button>
               );
@@ -358,11 +394,17 @@ export function LanguageSelector({ value, onChange, id, compact = false }) {
           {/* Footer hint */}
           <div className="border-t border-neutral-100 px-4 py-2 dark:border-border">
             <p className="text-[11px] text-neutral-400 dark:text-neutral-500">
-              <kbd className="rounded border border-neutral-200 px-1 font-mono text-[10px] dark:border-border">↑↓</kbd>{" "}
+              <kbd className="rounded border border-neutral-200 px-1 font-mono text-[10px] dark:border-border">
+                ↑↓
+              </kbd>{" "}
               navigate{" · "}
-              <kbd className="rounded border border-neutral-200 px-1 font-mono text-[10px] dark:border-border">Enter</kbd>{" "}
+              <kbd className="rounded border border-neutral-200 px-1 font-mono text-[10px] dark:border-border">
+                Enter
+              </kbd>{" "}
               select{" · "}
-              <kbd className="rounded border border-neutral-200 px-1 font-mono text-[10px] dark:border-border">Esc</kbd>{" "}
+              <kbd className="rounded border border-neutral-200 px-1 font-mono text-[10px] dark:border-border">
+                Esc
+              </kbd>{" "}
               close
             </p>
           </div>
diff --git a/client/src/components/MessageCard.jsx b/client/src/components/MessageCard.jsx
index 599c771a..b38808ab 100644
--- a/client/src/components/MessageCard.jsx
+++ b/client/src/components/MessageCard.jsx
@@ -47,7 +47,9 @@ export function MessageCard({
       className={[
         "group relative rounded-md border bg-white p-3 text-sm shadow-none",
         "transition-all duration-150 hover:border-blue-400 dark:bg-surface",
-        isPinned ? "border-l-4 border-l-amber-400 border-neutral-200 dark:border-border dark:border-l-amber-400" : "border-neutral-200 dark:border-border",
+        isPinned
+          ? "border-l-4 border-l-amber-400 border-neutral-200 dark:border-border dark:border-l-amber-400"
+          : "border-neutral-200 dark:border-border",
       ].join(" ")}
       aria-label={`Message: ${text}`}
     >
@@ -74,7 +76,10 @@ export function MessageCard({
         ))}
 
         {isAddingTag ? (
-          <form onSubmit={handleAddTagSubmit} className="inline-flex items-center gap-1">
+          <form
+            onSubmit={handleAddTagSubmit}
+            className="inline-flex items-center gap-1"
+          >
             <input
               type="text"
               value={newTagText}
@@ -85,8 +90,19 @@ export function MessageCard({
               className="rounded border border-neutral-300 px-1.5 py-0.5 text-[9px] outline-none dark:border-neutral-700 dark:bg-black dark:text-neutral-100"
               style={{ width: "70px" }}
             />
-            <button type="submit" className="text-[9px] font-bold text-blue-600 dark:text-blue-400 hover:underline">Add</button>
-            <button type="button" onClick={() => setIsAddingTag(false)} className="text-[9px] text-neutral-400 hover:underline">Cancel</button>
+            <button
+              type="submit"
+              className="text-[9px] font-bold text-blue-600 dark:text-blue-400 hover:underline"
+            >
+              Add
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsAddingTag(false)}
+              className="text-[9px] text-neutral-400 hover:underline"
+            >
+              Cancel
+            </button>
           </form>
         ) : (
           <button
@@ -112,16 +128,32 @@ export function MessageCard({
           role="group"
           aria-label="Message actions"
         >
-          <ActionButton onClick={() => onReplay(text)} aria-label="Replay this message" title="Replay">
+          <ActionButton
+            onClick={() => onReplay(text)}
+            aria-label="Replay this message"
+            title="Replay"
+          >
             <Play size={14} aria-hidden="true" fill="currentColor" />
           </ActionButton>
-          <ActionButton onClick={() => onReuse(text)} aria-label="Load this message into the composer" title="Reuse">
+          <ActionButton
+            onClick={() => onReuse(text)}
+            aria-label="Load this message into the composer"
+            title="Reuse"
+          >
             <RotateCcw size={14} aria-hidden="true" />
           </ActionButton>
-          <ActionButton onClick={() => onCopy(text)} aria-label="Copy message to clipboard" title="Copy">
+          <ActionButton
+            onClick={() => onCopy(text)}
+            aria-label="Copy message to clipboard"
+            title="Copy"
+          >
             <Copy size={14} aria-hidden="true" />
           </ActionButton>
-          <ActionButton onClick={() => onAddToQuickReplies(text)} aria-label="Promote to Quick Replies" title="Promote to Quick Reply">
+          <ActionButton
+            onClick={() => onAddToQuickReplies(text)}
+            aria-label="Promote to Quick Replies"
+            title="Promote to Quick Reply"
+          >
             <Zap size={14} aria-hidden="true" />
           </ActionButton>
           <ActionButton
@@ -131,7 +163,11 @@ export function MessageCard({
             title={isPinned ? "Unpin" : "Pin"}
             className={isPinned ? "text-amber-500" : ""}
           >
-            <Pin size={14} aria-hidden="true" fill={isPinned ? "currentColor" : "none"} />
+            <Pin
+              size={14}
+              aria-hidden="true"
+              fill={isPinned ? "currentColor" : "none"}
+            />
           </ActionButton>
           <ActionButton
             onClick={() => onDelete(id)}
diff --git a/client/src/components/PrivacyModeToggle.jsx b/client/src/components/PrivacyModeToggle.jsx
index 0be66f2a..9680775f 100644
--- a/client/src/components/PrivacyModeToggle.jsx
+++ b/client/src/components/PrivacyModeToggle.jsx
@@ -55,7 +55,11 @@ function loadImage(dataUrl) {
   });
 }
 
-export default function PrivacyModeToggle({ onModeChange, onAvatarChange, showToast }) {
+export default function PrivacyModeToggle({
+  onModeChange,
+  onAvatarChange,
+  showToast,
+}) {
   const [enabled, setEnabled] = React.useState(loadPersistedMode);
   const [avatarUrl, setAvatarUrl] = React.useState(loadPersistedAvatar);
   const [isDragOver, setIsDragOver] = React.useState(false);
@@ -241,7 +245,9 @@ export default function PrivacyModeToggle({ onModeChange, onAvatarChange, showTo
               </div>
               <div>
                 <p className="text-sm font-semibold text-ink dark:text-neutral-200">
-                  {isDragOver ? "Drop your image here" : "Drag & drop or click to upload"}
+                  {isDragOver
+                    ? "Drop your image here"
+                    : "Drag & drop or click to upload"}
                 </p>
                 <p className="mt-1 text-xs text-ink/50 dark:text-muted">
                   PNG, JPEG, or WebP · Max 2 MB
diff --git a/client/src/components/ProfileCard.jsx b/client/src/components/ProfileCard.jsx
index 59e28672..27472a3b 100644
--- a/client/src/components/ProfileCard.jsx
+++ b/client/src/components/ProfileCard.jsx
@@ -31,7 +31,7 @@ export function ProfileCard({ profile, onDelete, onShare }) {
     }
   };
 
-  const formattedDate = profile.createdAt 
+  const formattedDate = profile.createdAt
     ? new Date(profile.createdAt).toLocaleDateString()
     : "Unknown date";
 
@@ -50,7 +50,7 @@ export function ProfileCard({ profile, onDelete, onShare }) {
           {profile.name.substring(0, 2)}
         </div>
       </div>
-      
+
       <div className="flex flex-1 flex-col p-4">
         <p className="mb-4 text-xs font-mono text-ink/50 dark:text-muted truncate">
           ID: {profile.voice_id}
@@ -63,12 +63,20 @@ export function ProfileCard({ profile, onDelete, onShare }) {
               onClick={togglePlay}
               className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-moss text-white hover:bg-moss/90 dark:bg-glow dark:text-black"
             >
-              {isPlaying ? <Pause size={14} fill="currentColor" /> : <Play size={14} fill="currentColor" className="ml-0.5" />}
+              {isPlaying ? (
+                <Pause size={14} fill="currentColor" />
+              ) : (
+                <Play size={14} fill="currentColor" className="ml-0.5" />
+              )}
             </button>
             <div className="h-6 flex-1 rounded-sm bg-ink/10 dark:bg-white/10 relative overflow-hidden flex items-center justify-between px-1">
               {/* Fake waveform for visual aesthetics */}
               {[...Array(20)].map((_, i) => (
-                <div key={i} className="w-1 bg-moss dark:bg-glow rounded-full opacity-50" style={{ height: `${Math.max(20, Math.random() * 100)}%` }}></div>
+                <div
+                  key={i}
+                  className="w-1 bg-moss dark:bg-glow rounded-full opacity-50"
+                  style={{ height: `${Math.max(20, Math.random() * 100)}%` }}
+                ></div>
               ))}
               {isPlaying && (
                 <div className="absolute inset-0 bg-moss/20 dark:bg-glow/20 animate-pulse pointer-events-none"></div>
diff --git a/client/src/components/QuickReplies.jsx b/client/src/components/QuickReplies.jsx
index b82abbb6..7485db29 100644
--- a/client/src/components/QuickReplies.jsx
+++ b/client/src/components/QuickReplies.jsx
@@ -7,12 +7,42 @@ const generateId = () => Math.random().toString(36).substr(2, 9);
 
 const DEFAULT_QUICK_REPLIES = [
   { id: generateId(), label: "Hello", phrase: "Hello", category: "Social" },
-  { id: generateId(), label: "Thank you", phrase: "Thank you", category: "Social" },
-  { id: generateId(), label: "Please wait", phrase: "Please wait", category: "Urgent" },
-  { id: generateId(), label: "I need help", phrase: "I need help", category: "Urgent" },
-  { id: generateId(), label: "Can you repeat that?", phrase: "Can you repeat that?", category: "Needs" },
-  { id: generateId(), label: "Yes, I understand", phrase: "Yes, I understand", category: "Social" },
-  { id: generateId(), label: "No, thank you", phrase: "No, thank you", category: "Needs" },
+  {
+    id: generateId(),
+    label: "Thank you",
+    phrase: "Thank you",
+    category: "Social",
+  },
+  {
+    id: generateId(),
+    label: "Please wait",
+    phrase: "Please wait",
+    category: "Urgent",
+  },
+  {
+    id: generateId(),
+    label: "I need help",
+    phrase: "I need help",
+    category: "Urgent",
+  },
+  {
+    id: generateId(),
+    label: "Can you repeat that?",
+    phrase: "Can you repeat that?",
+    category: "Needs",
+  },
+  {
+    id: generateId(),
+    label: "Yes, I understand",
+    phrase: "Yes, I understand",
+    category: "Social",
+  },
+  {
+    id: generateId(),
+    label: "No, thank you",
+    phrase: "No, thank you",
+    category: "Needs",
+  },
 ];
 
 const STORAGE_KEY = "vf_quick_replies";
@@ -25,12 +55,20 @@ export function QuickReplies({ onSelect, showToast }) {
       const parsed = JSON.parse(saved);
       if (
         Array.isArray(parsed) &&
-        parsed.every((item) => item && typeof item.phrase === "string" && typeof item.label === "string")
+        parsed.every(
+          (item) =>
+            item &&
+            typeof item.phrase === "string" &&
+            typeof item.label === "string",
+        )
       ) {
         return parsed.map((item) => ({
           ...item,
           id: item.id || generateId(),
-          category: item.category && CATEGORIES.includes(item.category) ? item.category : "General",
+          category:
+            item.category && CATEGORIES.includes(item.category)
+              ? item.category
+              : "General",
         }));
       }
       return DEFAULT_QUICK_REPLIES;
@@ -51,7 +89,7 @@ export function QuickReplies({ onSelect, showToast }) {
     try {
       localStorage.setItem(STORAGE_KEY, JSON.stringify(replies));
     } catch {
-      console.error('Failed to persist quick replies to localStorage');
+      console.error("Failed to persist quick replies to localStorage");
     }
   }, [replies]);
 
@@ -94,7 +132,7 @@ export function QuickReplies({ onSelect, showToast }) {
     }
 
     const isDuplicate = replies.some(
-      (r) => r.phrase.toLowerCase() === cleanPhrase.toLowerCase()
+      (r) => r.phrase.toLowerCase() === cleanPhrase.toLowerCase(),
     );
 
     if (isDuplicate) {
@@ -102,7 +140,12 @@ export function QuickReplies({ onSelect, showToast }) {
       return;
     }
 
-    const newReply = { id: generateId(), label: cleanPhrase, phrase: cleanPhrase, category: newCategory };
+    const newReply = {
+      id: generateId(),
+      label: cleanPhrase,
+      phrase: cleanPhrase,
+      category: newCategory,
+    };
     setReplies((prev) => [...prev, newReply]);
     setNewPhrase("");
     setNewCategory("General");
@@ -118,7 +161,10 @@ export function QuickReplies({ onSelect, showToast }) {
   const handleEditStart = (id, reply) => {
     setIsAdding(false);
     setEditingReplyId(id);
-    setEditingReplyData({ phrase: reply.phrase, category: reply.category || "General" });
+    setEditingReplyData({
+      phrase: reply.phrase,
+      category: reply.category || "General",
+    });
   };
 
   const handleEditSave = (e) => {
@@ -136,7 +182,9 @@ export function QuickReplies({ onSelect, showToast }) {
     }
 
     const isDuplicate = replies.some(
-      (r) => r.id !== editingReplyId && r.phrase.toLowerCase() === cleanPhrase.toLowerCase()
+      (r) =>
+        r.id !== editingReplyId &&
+        r.phrase.toLowerCase() === cleanPhrase.toLowerCase(),
     );
 
     if (isDuplicate) {
@@ -144,12 +192,19 @@ export function QuickReplies({ onSelect, showToast }) {
       return;
     }
 
-    setReplies((prev) => prev.map(r => {
-      if (r.id === editingReplyId) {
-        return { ...r, label: cleanPhrase, phrase: cleanPhrase, category: editingReplyData.category };
-      }
-      return r;
-    }));
+    setReplies((prev) =>
+      prev.map((r) => {
+        if (r.id === editingReplyId) {
+          return {
+            ...r,
+            label: cleanPhrase,
+            phrase: cleanPhrase,
+            category: editingReplyData.category,
+          };
+        }
+        return r;
+      }),
+    );
 
     setEditingReplyId(null);
     setEditingReplyData(null);
@@ -197,7 +252,11 @@ export function QuickReplies({ onSelect, showToast }) {
               setNewPhrase("");
             }}
             className="text-[11px] font-semibold uppercase tracking-widest text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300 transition-colors"
-            aria-label={isEditing ? "Done customizing quick replies" : "Customize quick replies"}
+            aria-label={
+              isEditing
+                ? "Done customizing quick replies"
+                : "Customize quick replies"
+            }
           >
             {isEditing ? "Done" : "Customize"}
           </button>
@@ -228,7 +287,11 @@ export function QuickReplies({ onSelect, showToast }) {
         ))}
       </div>
 
-      <div className="flex flex-wrap items-center gap-2" role="group" aria-label="Quick reply phrases">
+      <div
+        className="flex flex-wrap items-center gap-2"
+        role="group"
+        aria-label="Quick reply phrases"
+      >
         {filteredReplies.map(({ id, label, phrase, category }) => {
           const isCurrentlyEditing = editingReplyId === id;
 
@@ -243,19 +306,33 @@ export function QuickReplies({ onSelect, showToast }) {
                   <input
                     type="text"
                     value={editingReplyData.phrase}
-                    onChange={(e) => setEditingReplyData({ ...editingReplyData, phrase: e.target.value })}
+                    onChange={(e) =>
+                      setEditingReplyData({
+                        ...editingReplyData,
+                        phrase: e.target.value,
+                      })
+                    }
                     maxLength={120}
                     autoFocus
                     className="flex-1 min-w-[5rem] max-w-[10rem] bg-transparent text-sm text-neutral-800 placeholder:text-neutral-400 focus:outline-none dark:text-neutral-100 dark:placeholder:text-neutral-500"
                   />
                   <select
                     value={editingReplyData.category}
-                    onChange={(e) => setEditingReplyData({ ...editingReplyData, category: e.target.value })}
+                    onChange={(e) =>
+                      setEditingReplyData({
+                        ...editingReplyData,
+                        category: e.target.value,
+                      })
+                    }
                     aria-label="Category"
                     className="bg-transparent text-xs text-neutral-500 dark:text-neutral-400 focus:outline-none border-l border-neutral-200 dark:border-neutral-700 pl-1.5 mr-1 cursor-pointer"
                   >
                     {CATEGORIES.map((cat) => (
-                      <option key={cat} value={cat} className="dark:bg-neutral-900 dark:text-neutral-100">
+                      <option
+                        key={cat}
+                        value={cat}
+                        className="dark:bg-neutral-900 dark:text-neutral-100"
+                      >
                         {cat}
                       </option>
                     ))}
@@ -350,7 +427,11 @@ export function QuickReplies({ onSelect, showToast }) {
               className="bg-transparent text-xs text-neutral-500 dark:text-neutral-400 focus:outline-none border-l border-neutral-200 dark:border-neutral-700 pl-1.5 mr-1 cursor-pointer"
             >
               {CATEGORIES.map((cat) => (
-                <option key={cat} value={cat} className="dark:bg-neutral-900 dark:text-neutral-100">
+                <option
+                  key={cat}
+                  value={cat}
+                  className="dark:bg-neutral-900 dark:text-neutral-100"
+                >
                   {cat}
                 </option>
               ))}
@@ -380,11 +461,10 @@ export function QuickReplies({ onSelect, showToast }) {
           <p className="text-xs text-neutral-400 dark:text-neutral-500 italic">
             {isEditing
               ? `No quick replies in this category. Click "Add" to create one.`
-              : 'No quick replies in this category.'}
+              : "No quick replies in this category."}
           </p>
         )}
       </div>
     </section>
   );
 }
-
diff --git a/client/src/components/ReceiveProfileModal.jsx b/client/src/components/ReceiveProfileModal.jsx
index 15c6e0c9..3b33af86 100644
--- a/client/src/components/ReceiveProfileModal.jsx
+++ b/client/src/components/ReceiveProfileModal.jsx
@@ -32,7 +32,7 @@ export function ReceiveProfileModal({ onClose, onSuccess }) {
       const offer = JSON.parse(decoded);
 
       const pc = new RTCPeerConnection({
-        iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
+        iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
       });
       pcRef.current = pc;
 
@@ -54,11 +54,17 @@ export function ReceiveProfileModal({ onClose, onSuccess }) {
               }
               audioBlob = new Blob([u8arr], { type: mime });
             }
-            
-            await saveVoiceProfile({
-              voice_id: payload.voice_id + "-received-" + Date.now().toString().slice(-4),
-              name: payload.name + " (Shared)",
-            }, audioBlob);
+
+            await saveVoiceProfile(
+              {
+                voice_id:
+                  payload.voice_id +
+                  "-received-" +
+                  Date.now().toString().slice(-4),
+                name: payload.name + " (Shared)",
+              },
+              audioBlob,
+            );
 
             setStep("done");
             if (onSuccess) onSuccess();
@@ -79,7 +85,6 @@ export function ReceiveProfileModal({ onClose, onSuccess }) {
       await pc.setRemoteDescription(new RTCSessionDescription(offer));
       const answer = await pc.createAnswer();
       await pc.setLocalDescription(answer);
-
     } catch (err) {
       setError("Invalid offer format: " + err.message);
       setStep("waiting_for_offer");
@@ -96,12 +101,16 @@ export function ReceiveProfileModal({ onClose, onSuccess }) {
     setStep("scanning_offer");
     try {
       codeReaderRef.current = new BrowserQRCodeReader();
-      codeReaderRef.current.decodeFromVideoDevice(null, videoRef.current, (result, err) => {
-        if (result) {
-          codeReaderRef.current.releaseAllStreams();
-          processOffer(result.getText());
-        }
-      });
+      codeReaderRef.current.decodeFromVideoDevice(
+        null,
+        videoRef.current,
+        (result, err) => {
+          if (result) {
+            codeReaderRef.current.releaseAllStreams();
+            processOffer(result.getText());
+          }
+        },
+      );
     } catch (err) {
       setError("Camera error: " + err.message);
       setStep("waiting_for_offer");
@@ -117,7 +126,10 @@ export function ReceiveProfileModal({ onClose, onSuccess }) {
       <div className="w-full max-w-md overflow-hidden rounded-xl bg-white shadow-xl dark:bg-surface dark:text-neutral-100">
         <div className="flex items-center justify-between border-b border-ink/10 p-4 dark:border-border">
           <h2 className="text-xl font-bold">Receive Voice Profile</h2>
-          <button onClick={onClose} className="rounded p-1 hover:bg-ink/10 dark:hover:bg-white/10">
+          <button
+            onClick={onClose}
+            className="rounded p-1 hover:bg-ink/10 dark:hover:bg-white/10"
+          >
             <X size={20} />
           </button>
         </div>
@@ -141,8 +153,8 @@ export function ReceiveProfileModal({ onClose, onSuccess }) {
                 >
                   <Camera size={16} /> Scan Offer
                 </button>
-                <input 
-                  type="text" 
+                <input
+                  type="text"
                   placeholder="Or paste offer here"
                   value={offerText}
                   onChange={handlePasteOffer}
@@ -154,8 +166,11 @@ export function ReceiveProfileModal({ onClose, onSuccess }) {
 
           {step === "scanning_offer" && (
             <div className="flex flex-col items-center">
-              <video ref={videoRef} className="w-full max-w-sm rounded-lg bg-black object-cover aspect-square" />
-              <button 
+              <video
+                ref={videoRef}
+                className="w-full max-w-sm rounded-lg bg-black object-cover aspect-square"
+              />
+              <button
                 onClick={() => {
                   codeReaderRef.current?.releaseAllStreams();
                   setStep("waiting_for_offer");
@@ -167,7 +182,11 @@ export function ReceiveProfileModal({ onClose, onSuccess }) {
             </div>
           )}
 
-          {step === "generating_answer" && <div className="text-center py-8">Generating connection code...</div>}
+          {step === "generating_answer" && (
+            <div className="text-center py-8">
+              Generating connection code...
+            </div>
+          )}
 
           {step === "waiting_for_sender" && (
             <div className="flex flex-col items-center">
@@ -177,7 +196,7 @@ export function ReceiveProfileModal({ onClose, onSuccess }) {
               <div className="bg-white p-2 rounded-lg border">
                 <QRCodeSVG value={answerText} size={200} />
               </div>
-              <button 
+              <button
                 onClick={handleCopy}
                 className="mt-4 flex items-center gap-2 text-sm font-bold text-moss hover:underline dark:text-glow"
               >
@@ -189,13 +208,21 @@ export function ReceiveProfileModal({ onClose, onSuccess }) {
             </div>
           )}
 
-          {step === "receiving" && <div className="text-center py-8">Receiving profile data...</div>}
-          
+          {step === "receiving" && (
+            <div className="text-center py-8">Receiving profile data...</div>
+          )}
+
           {step === "done" && (
             <div className="flex flex-col items-center py-8">
-              <CheckCircle2 size={48} className="text-moss dark:text-glow mb-4" />
+              <CheckCircle2
+                size={48}
+                className="text-moss dark:text-glow mb-4"
+              />
               <p className="font-bold text-lg">Profile Received!</p>
-              <button onClick={onClose} className="mt-6 rounded bg-moss px-6 py-2 font-bold text-white hover:bg-moss/90 dark:bg-glow dark:text-black">
+              <button
+                onClick={onClose}
+                className="mt-6 rounded bg-moss px-6 py-2 font-bold text-white hover:bg-moss/90 dark:bg-glow dark:text-black"
+              >
                 Close
               </button>
             </div>
diff --git a/client/src/components/ScrollToBottomButton.jsx b/client/src/components/ScrollToBottomButton.jsx
index 093d48b6..28d653d1 100644
--- a/client/src/components/ScrollToBottomButton.jsx
+++ b/client/src/components/ScrollToBottomButton.jsx
@@ -38,4 +38,4 @@ export default function ScrollToBottomButton({ activeTab }) {
       <ChevronDown size={20} aria-hidden="true" />
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/components/ScrollToTopButton.jsx b/client/src/components/ScrollToTopButton.jsx
index a2578972..aab1a0ac 100644
--- a/client/src/components/ScrollToTopButton.jsx
+++ b/client/src/components/ScrollToTopButton.jsx
@@ -6,14 +6,13 @@ export default function ScrollToTopButton({ activeTab }) {
   const [visible, setVisible] = React.useState(false);
   const [atBottom, setAtBottom] = React.useState(false);
 
-
   React.useEffect(() => {
     function handleScroll() {
       const scrolled = window.scrollY + window.innerHeight;
       const total = document.body.scrollHeight;
       setVisible(window.scrollY > 40);
       setAtBottom(scrolled >= total - 40);
-  }
+    }
 
     window.addEventListener("scroll", handleScroll, { passive: true });
     window.addEventListener("resize", handleScroll, { passive: true });
diff --git a/client/src/components/ShareProfileModal.jsx b/client/src/components/ShareProfileModal.jsx
index 086f57eb..c697ec0d 100644
--- a/client/src/components/ShareProfileModal.jsx
+++ b/client/src/components/ShareProfileModal.jsx
@@ -17,7 +17,7 @@ export function ShareProfileModal({ profile, onClose }) {
   useEffect(() => {
     // Generate WebRTC Offer on mount
     const pc = new RTCPeerConnection({
-      iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
+      iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
     });
     pcRef.current = pc;
 
@@ -36,12 +36,12 @@ export function ShareProfileModal({ profile, onClose }) {
             reader.readAsDataURL(profile.audioBlob);
           });
         }
-        
+
         const payload = {
           voice_id: profile.voice_id,
           name: profile.name,
           createdAt: profile.createdAt,
-          audioDataUrl: base64Audio
+          audioDataUrl: base64Audio,
         };
 
         await sendDataInChunks(dc, payload);
@@ -62,8 +62,8 @@ export function ShareProfileModal({ profile, onClose }) {
     };
 
     pc.createOffer()
-      .then(offer => pc.setLocalDescription(offer))
-      .catch(err => setError("Failed to create offer: " + err.message));
+      .then((offer) => pc.setLocalDescription(offer))
+      .catch((err) => setError("Failed to create offer: " + err.message));
 
     return () => {
       if (codeReaderRef.current) {
@@ -82,7 +82,9 @@ export function ShareProfileModal({ profile, onClose }) {
       setStep("connecting");
       const decoded = atob(encodedAnswer);
       const answer = JSON.parse(decoded);
-      await pcRef.current.setRemoteDescription(new RTCSessionDescription(answer));
+      await pcRef.current.setRemoteDescription(
+        new RTCSessionDescription(answer),
+      );
     } catch (err) {
       setError("Invalid answer format.");
       setStep("waiting_for_answer");
@@ -99,12 +101,16 @@ export function ShareProfileModal({ profile, onClose }) {
     setStep("scanning_answer");
     try {
       codeReaderRef.current = new BrowserQRCodeReader();
-      codeReaderRef.current.decodeFromVideoDevice(null, videoRef.current, (result, err) => {
-        if (result) {
-          codeReaderRef.current.releaseAllStreams();
-          processAnswer(result.getText());
-        }
-      });
+      codeReaderRef.current.decodeFromVideoDevice(
+        null,
+        videoRef.current,
+        (result, err) => {
+          if (result) {
+            codeReaderRef.current.releaseAllStreams();
+            processAnswer(result.getText());
+          }
+        },
+      );
     } catch (err) {
       setError("Camera error: " + err.message);
       setStep("waiting_for_answer");
@@ -116,7 +122,10 @@ export function ShareProfileModal({ profile, onClose }) {
       <div className="w-full max-w-md overflow-hidden rounded-xl bg-white shadow-xl dark:bg-surface dark:text-neutral-100">
         <div className="flex items-center justify-between border-b border-ink/10 p-4 dark:border-border">
           <h2 className="text-xl font-bold">Share Voice Profile</h2>
-          <button onClick={onClose} className="rounded p-1 hover:bg-ink/10 dark:hover:bg-white/10">
+          <button
+            onClick={onClose}
+            className="rounded p-1 hover:bg-ink/10 dark:hover:bg-white/10"
+          >
             <X size={20} />
           </button>
         </div>
@@ -129,7 +138,9 @@ export function ShareProfileModal({ profile, onClose }) {
           )}
 
           {step === "generating_offer" && (
-            <div className="text-center py-8">Generating secure sharing link...</div>
+            <div className="text-center py-8">
+              Generating secure sharing link...
+            </div>
           )}
 
           {step === "waiting_for_answer" && (
@@ -140,15 +151,15 @@ export function ShareProfileModal({ profile, onClose }) {
               <div className="bg-white p-2 rounded-lg border">
                 <QRCodeSVG value={offerText} size={200} />
               </div>
-              <button 
+              <button
                 onClick={handleCopy}
                 className="mt-4 flex items-center gap-2 text-sm font-bold text-moss hover:underline dark:text-glow"
               >
                 <Copy size={16} /> Copy Code Text
               </button>
-              
+
               <hr className="w-full my-6 border-ink/10 dark:border-border" />
-              
+
               <p className="text-sm text-center mb-4 text-ink/70 dark:text-muted">
                 2. After they scan it, they will give you an Answer Code.
               </p>
@@ -159,8 +170,8 @@ export function ShareProfileModal({ profile, onClose }) {
                 >
                   <Camera size={16} /> Scan Answer
                 </button>
-                <input 
-                  type="text" 
+                <input
+                  type="text"
                   placeholder="Or paste answer here"
                   value={answerText}
                   onChange={handlePasteAnswer}
@@ -172,8 +183,11 @@ export function ShareProfileModal({ profile, onClose }) {
 
           {step === "scanning_answer" && (
             <div className="flex flex-col items-center">
-              <video ref={videoRef} className="w-full max-w-sm rounded-lg bg-black object-cover aspect-square" />
-              <button 
+              <video
+                ref={videoRef}
+                className="w-full max-w-sm rounded-lg bg-black object-cover aspect-square"
+              />
+              <button
                 onClick={() => {
                   codeReaderRef.current?.releaseAllStreams();
                   setStep("waiting_for_answer");
@@ -185,14 +199,26 @@ export function ShareProfileModal({ profile, onClose }) {
             </div>
           )}
 
-          {step === "connecting" && <div className="text-center py-8">Connecting peer-to-peer...</div>}
-          {step === "sending" && <div className="text-center py-8">Transferring profile securely...</div>}
-          
+          {step === "connecting" && (
+            <div className="text-center py-8">Connecting peer-to-peer...</div>
+          )}
+          {step === "sending" && (
+            <div className="text-center py-8">
+              Transferring profile securely...
+            </div>
+          )}
+
           {step === "done" && (
             <div className="flex flex-col items-center py-8">
-              <CheckCircle2 size={48} className="text-moss dark:text-glow mb-4" />
+              <CheckCircle2
+                size={48}
+                className="text-moss dark:text-glow mb-4"
+              />
               <p className="font-bold text-lg">Transfer Complete!</p>
-              <button onClick={onClose} className="mt-6 rounded bg-moss px-6 py-2 font-bold text-white hover:bg-moss/90 dark:bg-glow dark:text-black">
+              <button
+                onClick={onClose}
+                className="mt-6 rounded bg-moss px-6 py-2 font-bold text-white hover:bg-moss/90 dark:bg-glow dark:text-black"
+              >
                 Close
               </button>
             </div>
diff --git a/client/src/components/SpeechHistory.jsx b/client/src/components/SpeechHistory.jsx
index 2b28007b..70d26ad2 100644
--- a/client/src/components/SpeechHistory.jsx
+++ b/client/src/components/SpeechHistory.jsx
@@ -1,9 +1,18 @@
 import React, { useMemo, useState } from "react";
-import { ChevronLeft, ChevronRight, Inbox, Pin, Search, Trash2, Download } from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Inbox,
+  Pin,
+  Search,
+  Trash2,
+  Download,
+} from "lucide-react";
 import { MessageCard } from "./MessageCard";
 import useDebounce from "../hooks/useDebounce";
 
-export function SpeechHistory({history,
+export function SpeechHistory({
+  history,
   favorites,
   sessionTranscript = [],
   onReuse,
@@ -103,17 +112,24 @@ export function SpeechHistory({history,
   };
 
   const visible = useMemo(() => {
-    let messages = tab === "pinned" ? history.filter((message) => favorites.has(message.id)) : history;
+    let messages =
+      tab === "pinned"
+        ? history.filter((message) => favorites.has(message.id))
+        : history;
 
     if (selectedTag !== "All Tags") {
-      messages = messages.filter((message) => message.tags && message.tags.includes(selectedTag));
+      messages = messages.filter(
+        (message) => message.tags && message.tags.includes(selectedTag),
+      );
     }
 
     if (debouncedSearch.trim()) {
       const query = debouncedSearch.toLowerCase();
-      messages = messages.filter((message) => 
-        message.text.toLowerCase().includes(query) ||
-        (message.tags && message.tags.some(t => t.toLowerCase().includes(query)))
+      messages = messages.filter(
+        (message) =>
+          message.text.toLowerCase().includes(query) ||
+          (message.tags &&
+            message.tags.some((t) => t.toLowerCase().includes(query))),
       );
     }
 
@@ -125,69 +141,72 @@ export function SpeechHistory({history,
   function handleTabKeyDown(event, currentIndex) {
     let nextIndex = currentIndex;
 
-    if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % tabs.length;
-    if (event.key === "ArrowLeft") nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+    if (event.key === "ArrowRight")
+      nextIndex = (currentIndex + 1) % tabs.length;
+    if (event.key === "ArrowLeft")
+      nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
 
     if (nextIndex !== currentIndex) setTab(tabs[nextIndex]);
   }
 
   function handleClearHistory() {
-    if (window.confirm("Clear all history? Pinned messages will also be removed.")) {
+    if (
+      window.confirm("Clear all history? Pinned messages will also be removed.")
+    ) {
       onClearHistory();
     }
   }
 
   function handleExportTranscript() {
-  if (!sessionTranscript || sessionTranscript.length === 0) return;
+    if (!sessionTranscript || sessionTranscript.length === 0) return;
 
-  const formattedText = sessionTranscript
-    .map(
-      (item) =>
-        `[${new Date(item.timestamp).toLocaleTimeString()}] ${item.text} - ${
-          item.status ?? "unknown"
-        }`
-    )
-    .join("\n");
+    const formattedText = sessionTranscript
+      .map(
+        (item) =>
+          `[${new Date(item.timestamp).toLocaleTimeString()}] ${item.text} - ${
+            item.status ?? "unknown"
+          }`,
+      )
+      .join("\n");
 
-  const blob = new Blob([formattedText], { type: "text/plain" });
-  const url = URL.createObjectURL(blob);
+    const blob = new Blob([formattedText], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
 
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = `Transcript-${new Date().toISOString().split("T")[0]}.txt`;
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `Transcript-${new Date().toISOString().split("T")[0]}.txt`;
 
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
 
-  URL.revokeObjectURL(url);
-}
-function handleExportJson() {
-  if (!sessionTranscript || sessionTranscript.length === 0) return;
-
-  const exportData = sessionTranscript.map((item) => ({
-    command: item.text,
-    timestamp: new Date(item.timestamp).toISOString(),
-    status: item.status ?? "unknown",
-  }));
-
-  const blob = new Blob(
-    [JSON.stringify(exportData, null, 2)],
-    { type: "application/json" }
-  );
+    URL.revokeObjectURL(url);
+  }
+  function handleExportJson() {
+    if (!sessionTranscript || sessionTranscript.length === 0) return;
 
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
+    const exportData = sessionTranscript.map((item) => ({
+      command: item.text,
+      timestamp: new Date(item.timestamp).toISOString(),
+      status: item.status ?? "unknown",
+    }));
 
-  a.href = url;
-  a.download = `Transcript-${new Date().toISOString().split("T")[0]}.json`;
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], {
+      type: "application/json",
+    });
 
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
 
-  URL.revokeObjectURL(url);
-}
+    a.href = url;
+    a.download = `Transcript-${new Date().toISOString().split("T")[0]}.json`;
+
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+
+    URL.revokeObjectURL(url);
+  }
   return (
     <aside
       className={[
@@ -200,11 +219,17 @@ function handleExportJson() {
       <div className="flex flex-shrink-0 items-center gap-2 border-b border-neutral-200 px-3 py-3 dark:border-border">
         <button
           onClick={() => setCollapsed((value) => !value)}
-          aria-label={collapsed ? "Expand history panel" : "Collapse history panel"}
+          aria-label={
+            collapsed ? "Expand history panel" : "Collapse history panel"
+          }
           aria-expanded={!collapsed}
           className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded border border-neutral-200 bg-white text-neutral-500 transition hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-border dark:bg-surface dark:text-neutral-400 dark:hover:bg-neutral-900"
         >
-          {collapsed ? <ChevronRight size={15} aria-hidden="true" /> : <ChevronLeft size={15} aria-hidden="true" />}
+          {collapsed ? (
+            <ChevronRight size={15} aria-hidden="true" />
+          ) : (
+            <ChevronLeft size={15} aria-hidden="true" />
+          )}
         </button>
 
         {!collapsed && (
@@ -228,7 +253,11 @@ function handleExportJson() {
               Search history
             </label>
             <div className="relative">
-              <Search size={14} aria-hidden="true" className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-400" />
+              <Search
+                size={14}
+                aria-hidden="true"
+                className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-400"
+              />
               <input
                 id="vf-search"
                 type="search"
@@ -247,30 +276,49 @@ function handleExportJson() {
               aria-expanded={analyticsOpen}
               className="flex w-full items-center justify-between text-xs font-semibold text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-300"
             >
-              <span className="flex items-center gap-1">📊 Conversation Stats</span>
+              <span className="flex items-center gap-1">
+                📊 Conversation Stats
+              </span>
               <span>{analyticsOpen ? "Hide ▲" : "Show ▼"}</span>
             </button>
-            
+
             {analyticsOpen && (
               <div className="mt-2 rounded bg-neutral-100 p-2.5 text-[11px] text-neutral-600 dark:bg-neutral-900 dark:text-neutral-400 space-y-2 border border-neutral-200 dark:border-border">
                 <div className="grid grid-cols-2 gap-2 text-center">
                   <div className="rounded bg-white p-1 dark:bg-surface border border-neutral-200 dark:border-border">
-                    <p className="font-bold text-neutral-800 dark:text-neutral-200 text-xs">{analyticsData.totalSentences}</p>
-                    <p className="text-[9px] uppercase tracking-wider text-neutral-400">Phrases</p>
+                    <p className="font-bold text-neutral-800 dark:text-neutral-200 text-xs">
+                      {analyticsData.totalSentences}
+                    </p>
+                    <p className="text-[9px] uppercase tracking-wider text-neutral-400">
+                      Phrases
+                    </p>
                   </div>
                   <div className="rounded bg-white p-1 dark:bg-surface border border-neutral-200 dark:border-border">
-                    <p className="font-bold text-neutral-800 dark:text-neutral-200 text-xs">{analyticsData.totalWords}</p>
-                    <p className="text-[9px] uppercase tracking-wider text-neutral-400">Total Words</p>
+                    <p className="font-bold text-neutral-800 dark:text-neutral-200 text-xs">
+                      {analyticsData.totalWords}
+                    </p>
+                    <p className="text-[9px] uppercase tracking-wider text-neutral-400">
+                      Total Words
+                    </p>
                   </div>
                 </div>
                 {analyticsData.top.length > 0 && (
                   <div>
-                    <p className="font-semibold text-neutral-700 dark:text-neutral-300 mb-1">Top Phrases:</p>
+                    <p className="font-semibold text-neutral-700 dark:text-neutral-300 mb-1">
+                      Top Phrases:
+                    </p>
                     <ul className="space-y-1">
                       {analyticsData.top.map(({ text, count }) => (
-                        <li key={text} className="flex justify-between items-start gap-1 py-0.5 border-b border-neutral-200/50 dark:border-border/30 last:border-0">
-                          <span className="truncate flex-1" title={text}>{text}</span>
-                          <span className="font-bold shrink-0 bg-neutral-200 dark:bg-neutral-800 px-1 rounded text-[9px]">{count}x</span>
+                        <li
+                          key={text}
+                          className="flex justify-between items-start gap-1 py-0.5 border-b border-neutral-200/50 dark:border-border/30 last:border-0"
+                        >
+                          <span className="truncate flex-1" title={text}>
+                            {text}
+                          </span>
+                          <span className="font-bold shrink-0 bg-neutral-200 dark:bg-neutral-800 px-1 rounded text-[9px]">
+                            {count}x
+                          </span>
                         </li>
                       ))}
                     </ul>
@@ -283,14 +331,16 @@ function handleExportJson() {
           {/* Dynamic Tag Filters Row */}
           {allUniqueTags.length > 0 && (
             <div className="flex-shrink-0 border-b border-neutral-200 px-3 py-2 dark:border-border overflow-x-auto no-scrollbar flex items-center gap-1.5 scroll-smooth">
-              <span className="text-[10px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase mr-1 shrink-0">Tags:</span>
+              <span className="text-[10px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase mr-1 shrink-0">
+                Tags:
+              </span>
               <button
                 onClick={() => setSelectedTag("All Tags")}
                 className={[
                   "rounded-full px-2.5 py-0.5 text-[10px] font-semibold transition shrink-0",
                   selectedTag === "All Tags"
                     ? "bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
-                    : "bg-neutral-200 text-neutral-600 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-400"
+                    : "bg-neutral-200 text-neutral-600 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-400",
                 ].join(" ")}
               >
                 All
@@ -303,7 +353,7 @@ function handleExportJson() {
                     "rounded-full px-2.5 py-0.5 text-[10px] font-semibold transition shrink-0",
                     selectedTag === tag
                       ? "bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300"
-                      : "bg-neutral-200 text-neutral-600 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-400"
+                      : "bg-neutral-200 text-neutral-600 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-400",
                   ].join(" ")}
                 >
                   #{tag}
@@ -352,7 +402,10 @@ function handleExportJson() {
             tabIndex={0}
           >
             {visible.length === 0 ? (
-              <EmptyState tab={tab} hasSearch={Boolean(debouncedSearch.trim())} />
+              <EmptyState
+                tab={tab}
+                hasSearch={Boolean(debouncedSearch.trim())}
+              />
             ) : (
               <ul className="space-y-2" aria-label="Message list">
                 {visible.map((message) => (
@@ -375,37 +428,37 @@ function handleExportJson() {
             )}
           </div>
 
-         {sessionTranscript?.length > 0 && (
-  <div className="flex flex-col gap-2 flex-shrink-0 border-t border-neutral-200 p-2 dark:border-border">
-    <button
-      onClick={handleExportTranscript}
-      className="flex w-full items-center justify-center gap-1.5 rounded-md border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600 transition hover:border-blue-300 hover:bg-blue-50 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:border-border dark:text-neutral-300 dark:hover:border-blue-800 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
-    >
-      <Download size={13} aria-hidden="true" />
-      Export TXT
-    </button>
+          {sessionTranscript?.length > 0 && (
+            <div className="flex flex-col gap-2 flex-shrink-0 border-t border-neutral-200 p-2 dark:border-border">
+              <button
+                onClick={handleExportTranscript}
+                className="flex w-full items-center justify-center gap-1.5 rounded-md border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600 transition hover:border-blue-300 hover:bg-blue-50 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:border-border dark:text-neutral-300 dark:hover:border-blue-800 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
+              >
+                <Download size={13} aria-hidden="true" />
+                Export TXT
+              </button>
 
-    <button
-      onClick={handleExportJson}
-      className="flex w-full items-center justify-center gap-1.5 rounded-md border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600 transition hover:border-blue-300 hover:bg-blue-50 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:border-border dark:text-neutral-300 dark:hover:border-blue-800 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
-    >
-      <Download size={13} aria-hidden="true" />
-      Export JSON
-    </button>
-  </div>
-)}
-
-{history.length > 0 && (
-  <div className="flex-shrink-0 border-t border-neutral-200 p-2 dark:border-border">
-    <button
-      onClick={handleClearHistory}
-      className="flex w-full items-center justify-center gap-1.5 rounded-md border border-neutral-200 px-3 py-1.5 text-xs text-neutral-500 transition hover:border-red-300 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 dark:border-border dark:hover:border-red-800 dark:hover:bg-red-500/15 dark:hover:text-red-400"
-    >
-      <Trash2 size={13} aria-hidden="true" />
-      Clear all history
-    </button>
-  </div>
-)}
+              <button
+                onClick={handleExportJson}
+                className="flex w-full items-center justify-center gap-1.5 rounded-md border border-neutral-200 px-3 py-1.5 text-xs text-neutral-600 transition hover:border-blue-300 hover:bg-blue-50 hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:border-border dark:text-neutral-300 dark:hover:border-blue-800 dark:hover:bg-blue-900/20 dark:hover:text-blue-400"
+              >
+                <Download size={13} aria-hidden="true" />
+                Export JSON
+              </button>
+            </div>
+          )}
+
+          {history.length > 0 && (
+            <div className="flex-shrink-0 border-t border-neutral-200 p-2 dark:border-border">
+              <button
+                onClick={handleClearHistory}
+                className="flex w-full items-center justify-center gap-1.5 rounded-md border border-neutral-200 px-3 py-1.5 text-xs text-neutral-500 transition hover:border-red-300 hover:bg-red-50 hover:text-red-600 focus:outline-none focus:ring-2 focus:ring-red-300 dark:border-border dark:hover:border-red-800 dark:hover:bg-red-500/15 dark:hover:text-red-400"
+              >
+                <Trash2 size={13} aria-hidden="true" />
+                Clear all history
+              </button>
+            </div>
+          )}
         </>
       )}
     </aside>
diff --git a/client/src/components/TextToSpeech.jsx b/client/src/components/TextToSpeech.jsx
index cb0bc6e3..4e941982 100644
--- a/client/src/components/TextToSpeech.jsx
+++ b/client/src/components/TextToSpeech.jsx
@@ -65,33 +65,36 @@ const EMOTION_PRESETS = [
 
 const MAX_CHARS = 300;
 
-export default function TextToSpeech({ onSpeak, disabled = false, status = "idle" }) {
+export default function TextToSpeech({
+  onSpeak,
+  disabled = false,
+  status = "idle",
+}) {
   const [text, setText] = React.useState("");
   const [activeEmotion, setActiveEmotion] = React.useState("neutral");
   const trimmedText = text.trim();
 
-const characterCount = text.length;
-const charsLeft = MAX_CHARS - characterCount;
+  const characterCount = text.length;
+  const charsLeft = MAX_CHARS - characterCount;
 
-const wordCount = trimmedText
-  ? trimmedText.split(/\s+/).length
-  : 0;
+  const wordCount = trimmedText ? trimmedText.split(/\s+/).length : 0;
 
-const estimatedDuration = wordCount
-  ? ((wordCount / 150) * 60).toFixed(1)
-  : "0.0";
+  const estimatedDuration = wordCount
+    ? ((wordCount / 150) * 60).toFixed(1)
+    : "0.0";
 
-let durationCategory = "Short";
+  let durationCategory = "Short";
 
-if (estimatedDuration > 15) {
-  durationCategory = "Medium";
-}
+  if (estimatedDuration > 15) {
+    durationCategory = "Medium";
+  }
 
-if (estimatedDuration > 30) {
-  durationCategory = "Long";
-}
+  if (estimatedDuration > 30) {
+    durationCategory = "Long";
+  }
 
-  const activePreset = EMOTION_PRESETS.find((p) => p.id === activeEmotion) || EMOTION_PRESETS[0];
+  const activePreset =
+    EMOTION_PRESETS.find((p) => p.id === activeEmotion) || EMOTION_PRESETS[0];
 
   function getCounterColor() {
     if (charsLeft < 0) return "text-red-500 font-bold";
@@ -101,25 +104,25 @@ if (estimatedDuration > 30) {
   }
 
   async function submit() {
-  if (!trimmedText || disabled) return;
-
-  // Build the final text with the emotion prompt prefix
-  const finalText = activePreset.promptPrefix
-    ? `${activePreset.promptPrefix}${trimmedText}`
-    : trimmedText;
-
-  // Merge emotion overrides on top of the user's saved voice settings
-  let voice_settings_override = undefined;
-  if (Object.keys(activePreset.settingsOverride).length > 0) {
-    const base = loadVoiceSettings();
-    voice_settings_override = { ...base, ...activePreset.settingsOverride };
-  }
+    if (!trimmedText || disabled) return;
 
-  await onSpeak(finalText, voice_settings_override);
-  if (!trimmedText || disabled || characterCount > MAX_CHARS) return;
-  await onSpeak(trimmedText);
-  setText("");
-}
+    // Build the final text with the emotion prompt prefix
+    const finalText = activePreset.promptPrefix
+      ? `${activePreset.promptPrefix}${trimmedText}`
+      : trimmedText;
+
+    // Merge emotion overrides on top of the user's saved voice settings
+    let voice_settings_override = undefined;
+    if (Object.keys(activePreset.settingsOverride).length > 0) {
+      const base = loadVoiceSettings();
+      voice_settings_override = { ...base, ...activePreset.settingsOverride };
+    }
+
+    await onSpeak(finalText, voice_settings_override);
+    if (!trimmedText || disabled || characterCount > MAX_CHARS) return;
+    await onSpeak(trimmedText);
+    setText("");
+  }
 
   function handleKeyDown(event) {
     if (event.key === "Enter" && !event.shiftKey) {
@@ -133,12 +136,19 @@ if (estimatedDuration > 30) {
       <div className="mb-4 flex items-center justify-between gap-3">
         <div>
           <h2 className="text-lg font-bold">Type to speak</h2>
-          <p className="mt-1 text-sm text-ink/65 dark:text-muted">Press Enter to speak. Shift + Enter adds a new line.</p>
+          <p className="mt-1 text-sm text-ink/65 dark:text-muted">
+            Press Enter to speak. Shift + Enter adds a new line.
+          </p>
         </div>
         <div className="text-right">
-  <span className={["rounded-md border border-ink/10 px-3 py-1 text-sm font-semibold dark:border-border", getCounterColor()].join(" ")}>
-    {characterCount} / {MAX_CHARS}
-  </span>
+          <span
+            className={[
+              "rounded-md border border-ink/10 px-3 py-1 text-sm font-semibold dark:border-border",
+              getCounterColor(),
+            ].join(" ")}
+          >
+            {characterCount} / {MAX_CHARS}
+          </span>
 
           <p
             aria-live="polite"
@@ -177,7 +187,9 @@ if (estimatedDuration > 30) {
                     : "border-ink/10 bg-cloud text-ink/70 hover:border-moss/40 hover:bg-mint/40 dark:border-border dark:bg-black dark:text-neutral-400 dark:hover:border-glow/40 dark:hover:bg-glow/10",
                 ].join(" ")}
               >
-                <span aria-hidden="true" className="text-base">{preset.emoji}</span>
+                <span aria-hidden="true" className="text-base">
+                  {preset.emoji}
+                </span>
                 {preset.label}
               </button>
             );
@@ -185,7 +197,9 @@ if (estimatedDuration > 30) {
         </div>
         {activeEmotion !== "neutral" && (
           <p className="mt-2 text-xs text-ink/50 dark:text-muted">
-            <span className="font-semibold">{activePreset.emoji} {activePreset.label}:</span>{" "}
+            <span className="font-semibold">
+              {activePreset.emoji} {activePreset.label}:
+            </span>{" "}
             {activePreset.description}
           </p>
         )}
@@ -197,10 +211,11 @@ if (estimatedDuration > 30) {
         onKeyDown={handleKeyDown}
         disabled={disabled}
         aria-describedby="tts-char-hint"
-        className={["min-h-64 flex-1 resize-none rounded-md border bg-cloud p-4 text-lg leading-8 text-ink outline-none transition focus:ring-4 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-black dark:text-neutral-100 dark:placeholder:text-neutral-500",
+        className={[
+          "min-h-64 flex-1 resize-none rounded-md border bg-cloud p-4 text-lg leading-8 text-ink outline-none transition focus:ring-4 disabled:cursor-not-allowed disabled:opacity-60 dark:bg-black dark:text-neutral-100 dark:placeholder:text-neutral-500",
           charsLeft < 0
             ? "border-red-400 focus:border-red-400 focus:ring-red-100 dark:border-red-700 dark:focus:ring-red-900/30"
-            : "border-ink/15 focus:border-moss focus:ring-mint dark:border-border dark:focus:border-glow dark:focus:ring-glow/25"
+            : "border-ink/15 focus:border-moss focus:ring-mint dark:border-border dark:focus:border-glow dark:focus:ring-glow/25",
         ].join(" ")}
         placeholder="Type what you want to say..."
       />
@@ -210,17 +225,27 @@ if (estimatedDuration > 30) {
       >
         Characters: {characterCount}
       </p>
-      
+
       {charsLeft < 0 && (
-        <p id="tts-char-hint" role="alert" className="mt-2 text-xs font-semibold text-red-500">
-          {Math.abs(charsLeft)} character{Math.abs(charsLeft) !== 1 ? "s" : ""} over the 300-character limit.
+        <p
+          id="tts-char-hint"
+          role="alert"
+          className="mt-2 text-xs font-semibold text-red-500"
+        >
+          {Math.abs(charsLeft)} character{Math.abs(charsLeft) !== 1 ? "s" : ""}{" "}
+          over the 300-character limit.
         </p>
       )}
 
       <button
         type="button"
         onClick={submit}
-        disabled={disabled || !trimmedText || status === "speaking" || characterCount > MAX_CHARS}
+        disabled={
+          disabled ||
+          !trimmedText ||
+          status === "speaking" ||
+          characterCount > MAX_CHARS
+        }
         className="mt-4 inline-flex items-center justify-center gap-2 rounded-md bg-coral px-5 py-3 font-bold text-white transition hover:bg-coral/90 disabled:cursor-not-allowed disabled:opacity-50"
       >
         <SendHorizontal size={18} aria-hidden="true" />
diff --git a/client/src/components/ThemeContext.jsx b/client/src/components/ThemeContext.jsx
index 1d1f20a5..ce061be2 100644
--- a/client/src/components/ThemeContext.jsx
+++ b/client/src/components/ThemeContext.jsx
@@ -12,7 +12,9 @@ function getStoredTheme() {
   }
 
   try {
-    return window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : DEFAULT_THEME;
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : DEFAULT_THEME;
   } catch {
     return DEFAULT_THEME;
   }
@@ -55,7 +57,3 @@ export function useTheme() {
   if (!ctx) throw new Error("useTheme must be used inside <ThemeProvider>");
   return ctx;
 }
-
-
-
-
diff --git a/client/src/components/VideoPreview.jsx b/client/src/components/VideoPreview.jsx
index e4dac1bc..cfc3bdb4 100644
--- a/client/src/components/VideoPreview.jsx
+++ b/client/src/components/VideoPreview.jsx
@@ -5,18 +5,21 @@ import { useEffect, useRef } from "react";
 import { AudioProcessor } from "../utils/audioProcessor";
 import { FaceProcessor } from "../utils/faceProcessor";
 
-export default React.forwardRef(function VideoPreview({
-  webcamStream,
-  audioUrl,
-  isSpeaking,
-  onSpeakingChange,
-  calibration = { xOffset: 0, yOffset: 0, scale: 1.0 },
-  isCalibrating = false,
-  avatarImage = null,
-}, ref) {
+export default React.forwardRef(function VideoPreview(
+  {
+    webcamStream,
+    audioUrl,
+    isSpeaking,
+    onSpeakingChange,
+    calibration = { xOffset: 0, yOffset: 0, scale: 1.0 },
+    isCalibrating = false,
+    avatarImage = null,
+  },
+  ref,
+) {
   const videoRef = React.useRef(null);
   const animationRef = React.useRef(null);
-  const audioRef = useRef(null);   
+  const audioRef = useRef(null);
   const audioProcessorRef = useRef(null);
   const faceProcessorRef = useRef(null);
   const ortSessionRef = useRef(null);
@@ -37,9 +40,11 @@ export default React.forwardRef(function VideoPreview({
   React.useEffect(() => {
     async function initSegmenter() {
       try {
-        const { SelfieSegmentation } = await import("@mediapipe/selfie_segmentation");
+        const { SelfieSegmentation } =
+          await import("@mediapipe/selfie_segmentation");
         const segmenter = new SelfieSegmentation({
-          locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`,
+          locateFile: (file) =>
+            `https://cdn.jsdelivr.net/npm/@mediapipe/selfie_segmentation/${file}`,
         });
         segmenter.setOptions({
           modelSelection: 1,
@@ -52,24 +57,30 @@ export default React.forwardRef(function VideoPreview({
           mCanvas.width = results.image.width;
           mCanvas.height = results.image.height;
           const mCtx = mCanvas.getContext("2d");
-          
+
           mCtx.save();
           mCtx.clearRect(0, 0, mCanvas.width, mCanvas.height);
-          
-          mCtx.drawImage(results.segmentationMask, 0, 0, mCanvas.width, mCanvas.height);
-          
+
+          mCtx.drawImage(
+            results.segmentationMask,
+            0,
+            0,
+            mCanvas.width,
+            mCanvas.height,
+          );
+
           mCtx.globalCompositeOperation = "source-in";
           mCtx.drawImage(results.image, 0, 0, mCanvas.width, mCanvas.height);
-          
+
           mCtx.globalCompositeOperation = "destination-over";
           mCtx.filter = "blur(12px)";
           mCtx.drawImage(results.image, 0, 0, mCanvas.width, mCanvas.height);
-          
+
           mCtx.restore();
-          
+
           isSegmentingRef.current = false;
         });
-        
+
         // Pre-initialize
         await segmenter.initialize();
         segmenterRef.current = segmenter;
@@ -100,7 +111,12 @@ export default React.forwardRef(function VideoPreview({
 
   // Initialize AudioProcessor when audio element is ready
   useEffect(() => {
-    if (audioUrl && audioRef.current && audioProcessorRef.current && !audioRef.current.dataset.audioProcessorInitialized) {
+    if (
+      audioUrl &&
+      audioRef.current &&
+      audioProcessorRef.current &&
+      !audioRef.current.dataset.audioProcessorInitialized
+    ) {
       audioProcessorRef.current.initialize(audioRef.current);
       audioRef.current.dataset.audioProcessorInitialized = "true";
     }
@@ -114,7 +130,7 @@ export default React.forwardRef(function VideoPreview({
         if (!modelResponse.ok || modelBytes[0] === 35) {
           throw new Error("Placeholder Wav2Lip model detected.");
         }
-        
+
         // Initialize processors
         audioProcessorRef.current = new AudioProcessor();
         faceProcessorRef.current = new FaceProcessor();
@@ -159,33 +175,37 @@ export default React.forwardRef(function VideoPreview({
 
     // Derive canvas colors from the active theme
     const isDark = theme === "dark";
-    const bgColor   = isDark ? "#0f172a" : "#dfe8df";
+    const bgColor = isDark ? "#0f172a" : "#dfe8df";
     const textColor = isDark ? "#e2e8f0" : "#16201d";
-    const mouthColor = isDark ? "rgba(226, 232, 240, 0.82)" : "rgba(22, 32, 29, 0.82)";
+    const mouthColor = isDark
+      ? "rgba(226, 232, 240, 0.82)"
+      : "rgba(22, 32, 29, 0.82)";
 
+    let isUnmounted = false;
+    let fallbackTimer;
     let lastSyncTime = 0;
     let audioTimeOffset = null;
 
     function drawSubtitles(ctx, text, fontSettings, bgOpacity) {
       if (!text) return;
-      
+
       const canvasWidth = ctx.canvas.width;
       const canvasHeight = ctx.canvas.height;
-      
+
       let fontSize = 24;
       if (fontSettings === "small") fontSize = 18;
       if (fontSettings === "large") fontSize = 32;
-      
+
       ctx.save();
       ctx.font = `600 ${fontSize}px Inter, sans-serif`;
       ctx.textAlign = "center";
       ctx.textBaseline = "middle";
-      
+
       const maxTextWidth = canvasWidth * 0.8;
       const words = text.split(" ");
       const lines = [];
       let currentLine = "";
-      
+
       for (let n = 0; n < words.length; n++) {
         const testLine = currentLine + words[n] + " ";
         const metrics = ctx.measureText(testLine);
@@ -197,18 +217,18 @@ export default React.forwardRef(function VideoPreview({
         }
       }
       lines.push(currentLine.trim());
-      
+
       const lineHeight = fontSize * 1.35;
       const totalHeight = lines.length * lineHeight;
       const paddingX = 24;
       const paddingY = 14;
-      
+
       const boxWidth = Math.min(canvasWidth * 0.9, maxTextWidth + paddingX * 2);
       const boxHeight = totalHeight + paddingY * 2;
-      
+
       const boxX = (canvasWidth - boxWidth) / 2;
       const boxY = canvasHeight * 0.82 - boxHeight / 2;
-      
+
       if (bgOpacity > 0) {
         ctx.fillStyle = `rgba(0, 0, 0, ${bgOpacity})`;
         ctx.beginPath();
@@ -219,20 +239,22 @@ export default React.forwardRef(function VideoPreview({
         }
         ctx.fill();
       }
-      
+
       ctx.fillStyle = "#ffffff";
       ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
       ctx.shadowBlur = 4;
-      
+
       lines.forEach((line, index) => {
         const lineY = boxY + paddingY + (index + 0.5) * lineHeight;
         ctx.fillText(line, canvasWidth / 2, lineY);
       });
-      
+
       ctx.restore();
     }
 
-    function draw(timestamp) {
+    function draw(now, metadata) {
+      if (isUnmounted) return;
+      const timestamp = metadata ? metadata.mediaTime * 1000 : now;
       context.fillStyle = bgColor;
       context.fillRect(0, 0, canvas.width, canvas.height);
 
@@ -260,7 +282,13 @@ export default React.forwardRef(function VideoPreview({
             });
           }
           if (maskCanvasRef.current) {
-            context.drawImage(maskCanvasRef.current, 0, 0, canvas.width, canvas.height);
+            context.drawImage(
+              maskCanvasRef.current,
+              0,
+              0,
+              canvas.width,
+              canvas.height,
+            );
           } else {
             // Draw video normally if first frame is not ready
             context.drawImage(video, 0, 0, canvas.width, canvas.height);
@@ -282,42 +310,57 @@ export default React.forwardRef(function VideoPreview({
       const drawMouth = isSpeaking || isCalibratingRef.current;
       if (drawMouth) {
         let inferenceSucceeded = false;
-        const useONNX = isSpeaking && ortSessionRef.current && audioProcessorRef.current && faceProcessorRef.current && ortRef.current;
+        const useONNX =
+          isSpeaking &&
+          ortSessionRef.current &&
+          audioProcessorRef.current &&
+          faceProcessorRef.current &&
+          ortRef.current;
 
         // Try ONNX Inference first
-        if (isSpeaking && ortSessionRef.current && audioProcessorRef.current && faceProcessorRef.current) {
+        if (
+          isSpeaking &&
+          ortSessionRef.current &&
+          audioProcessorRef.current &&
+          faceProcessorRef.current
+        ) {
           try {
-             // 1. Get Audio Features
-             const melFeatures = audioProcessorRef.current.getLatestFeatures();
-             
-             // 2. Synchronize visual timestamp to the audio master clock to prevent drift
-             let syncTimestamp = timestamp;
-             const audioTime = audioProcessorRef.current.getAudioTime() * 1000;
-             if (audioTime > 0) {
-                if (audioTimeOffset === null) {
-                   audioTimeOffset = timestamp - audioTime;
-                }
-                const targetSyncTime = audioTime + audioTimeOffset;
-                // MediaPipe requires strictly increasing timestamps
-                syncTimestamp = targetSyncTime <= lastSyncTime ? lastSyncTime + 1 : targetSyncTime;
-                lastSyncTime = syncTimestamp;
-             }
-
-             // 3. Get Face Crop
-             const landmarks = faceProcessorRef.current.detectFace(video, syncTimestamp);
-             
-             if (melFeatures && landmarks) {
-               // TODO: Construct Tensors and run inference when real model is available
-               // const audioTensor = new ort.Tensor('float32', melFeatures, [1, 1, 80, 16]);
-               // const videoCrop = faceProcessorRef.current.cropMouthRegion(canvas, landmarks, tempCanvas);
-               // const videoTensor = ... convert videoCrop to tensor ...
-               // const results = await ortSessionRef.current.run({ audio: audioTensor, video: videoTensor });
-               // ... draw results back to canvas ...
-               
-               // inferenceSucceeded = true;
-             }
+            // 1. Get Audio Features
+            const melFeatures = audioProcessorRef.current.getLatestFeatures();
+
+            // 2. Synchronize visual timestamp to the audio master clock to prevent drift
+            let syncTimestamp = timestamp;
+            const audioTime = audioProcessorRef.current.getAudioTime() * 1000;
+            if (audioTime > 0) {
+              if (audioTimeOffset === null) {
+                audioTimeOffset = timestamp - audioTime;
+              }
+              const targetSyncTime = audioTime + audioTimeOffset;
+              // MediaPipe requires strictly increasing timestamps
+              syncTimestamp =
+                targetSyncTime <= lastSyncTime
+                  ? lastSyncTime + 1
+                  : targetSyncTime;
+              lastSyncTime = syncTimestamp;
+            }
+
+            // 3. Get Face Crop
+            const landmarks = faceProcessorRef.current.detectFace(
+              video,
+              syncTimestamp,
+            );
+
+            if (melFeatures && landmarks) {
+              // TODO: Construct Tensors and run inference when real model is available
+              // const audioTensor = new ort.Tensor('float32', melFeatures, [1, 1, 80, 16]);
+              // const videoCrop = faceProcessorRef.current.cropMouthRegion(canvas, landmarks, tempCanvas);
+              // const videoTensor = ... convert videoCrop to tensor ...
+              // const results = await ortSessionRef.current.run({ audio: audioTensor, video: videoTensor });
+              // ... draw results back to canvas ...
+              // inferenceSucceeded = true;
+            }
           } catch (e) {
-             console.error("Inference loop error:", e);
+            console.error("Inference loop error:", e);
           }
         }
 
@@ -331,25 +374,45 @@ export default React.forwardRef(function VideoPreview({
             mouthOpen = 14 + extraOpen;
           }
           const currentCalibration = calibrationRef.current || {};
-          const xOffset = typeof currentCalibration.xOffset === "number" && !isNaN(currentCalibration.xOffset)
-            ? Math.max(-400, Math.min(400, currentCalibration.xOffset))
-            : 0;
-          const yOffset = typeof currentCalibration.yOffset === "number" && !isNaN(currentCalibration.yOffset)
-            ? Math.max(-250, Math.min(150, currentCalibration.yOffset))
-            : 0;
-          const scale = typeof currentCalibration.scale === "number" && !isNaN(currentCalibration.scale)
-            ? Math.max(0.5, Math.min(2.5, currentCalibration.scale))
-            : 1.0;
-
-          const centerX = Math.max(0, Math.min(canvas.width, canvas.width / 2 + xOffset));
-          const centerY = Math.max(0, Math.min(canvas.height, canvas.height * 0.63 + yOffset));
+          const xOffset =
+            typeof currentCalibration.xOffset === "number" &&
+            !isNaN(currentCalibration.xOffset)
+              ? Math.max(-400, Math.min(400, currentCalibration.xOffset))
+              : 0;
+          const yOffset =
+            typeof currentCalibration.yOffset === "number" &&
+            !isNaN(currentCalibration.yOffset)
+              ? Math.max(-250, Math.min(150, currentCalibration.yOffset))
+              : 0;
+          const scale =
+            typeof currentCalibration.scale === "number" &&
+            !isNaN(currentCalibration.scale)
+              ? Math.max(0.5, Math.min(2.5, currentCalibration.scale))
+              : 1.0;
+
+          const centerX = Math.max(
+            0,
+            Math.min(canvas.width, canvas.width / 2 + xOffset),
+          );
+          const centerY = Math.max(
+            0,
+            Math.min(canvas.height, canvas.height * 0.63 + yOffset),
+          );
           const radiusX = Math.max(0.01, 56 * scale);
           const radiusY = Math.max(0.01, mouthOpen * scale);
 
           context.save();
           context.fillStyle = mouthColor;
           context.beginPath();
-          context.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, Math.PI * 2);
+          context.ellipse(
+            centerX,
+            centerY,
+            radiusX,
+            radiusY,
+            0,
+            0,
+            Math.PI * 2,
+          );
           context.fill();
           context.restore();
         }
@@ -360,7 +423,7 @@ export default React.forwardRef(function VideoPreview({
           context,
           activeTextRef.current,
           subtitleFontSizeRef.current,
-          subtitleBgOpacityRef.current
+          subtitleBgOpacityRef.current,
         );
       }
 
@@ -374,11 +437,40 @@ export default React.forwardRef(function VideoPreview({
         });
       }
 
-      animationRef.current = requestAnimationFrame(draw);
+      if (!isUnmounted) {
+        if (
+          video &&
+          typeof video.requestVideoFrameCallback === "function" &&
+          video.readyState >= 2
+        ) {
+          animationRef.current = video.requestVideoFrameCallback(draw);
+        } else {
+          fallbackTimer = requestAnimationFrame(draw);
+        }
+      }
+    }
+    const video = videoRef.current;
+    if (
+      video &&
+      typeof video.requestVideoFrameCallback === "function" &&
+      video.readyState >= 2
+    ) {
+      animationRef.current = video.requestVideoFrameCallback(draw);
+    } else {
+      fallbackTimer = requestAnimationFrame(draw);
     }
 
-    animationRef.current = requestAnimationFrame(draw);
-    return () => cancelAnimationFrame(animationRef.current);
+    return () => {
+      isUnmounted = true;
+      if (
+        video &&
+        typeof video.cancelVideoFrameCallback === "function" &&
+        animationRef.current
+      ) {
+        video.cancelVideoFrameCallback(animationRef.current);
+      }
+      if (fallbackTimer) cancelAnimationFrame(fallbackTimer);
+    };
   }, [ref, isSpeaking, theme, avatarImage]);
 
   return (
@@ -390,8 +482,8 @@ export default React.forwardRef(function VideoPreview({
             <button
               onClick={() => setBlurEnabled(!blurEnabled)}
               className={`ml-2 rounded-full px-3 py-1 text-xs font-semibold transition-colors ${
-                blurEnabled 
-                  ? "bg-coral text-white" 
+                blurEnabled
+                  ? "bg-coral text-white"
                   : "bg-ink/10 text-ink/70 hover:bg-ink/20 dark:bg-border dark:text-muted dark:hover:bg-border/80"
               }`}
             >
@@ -401,8 +493,8 @@ export default React.forwardRef(function VideoPreview({
               <button
                 onClick={() => setBlurEnabled(!blurEnabled)}
                 className={`ml-2 rounded-full px-3 py-1 text-xs font-semibold transition-colors ${
-                  blurEnabled 
-                    ? "bg-coral text-white" 
+                  blurEnabled
+                    ? "bg-coral text-white"
                     : "bg-ink/10 text-ink/70 hover:bg-ink/20 dark:bg-border dark:text-muted dark:hover:bg-border/80"
                 }`}
               >
diff --git a/client/src/components/VoiceForge.jsx b/client/src/components/VoiceForge.jsx
index a2fc2ae8..ee48f0c0 100644
--- a/client/src/components/VoiceForge.jsx
+++ b/client/src/components/VoiceForge.jsx
@@ -1,9 +1,4 @@
-import React, {
-  useCallback,
-  useRef,
-  useState,
-  useEffect,
-} from "react";
+import React, { useCallback, useRef, useState, useEffect } from "react";
 import { Copy, Eraser, Mic2, History, X } from "lucide-react";
 import { VoiceQuickSettings } from "./VoiceQuickSettings";
 import { FavoriteMessages } from "./FavoriteMessages";
@@ -51,32 +46,38 @@ export default function VoiceForge() {
     }
   });
 
-  const handleAddToQuickReplies = useCallback((text) => {
-    try {
-      const saved = localStorage.getItem("vf_quick_replies");
-      let currentReplies = [];
-      if (saved) {
-        currentReplies = JSON.parse(saved);
-      }
-      if (currentReplies.some((r) => r.phrase.toLowerCase() === text.toLowerCase())) {
-        showToast("Already in Quick Replies", "error");
-        return;
+  const handleAddToQuickReplies = useCallback(
+    (text) => {
+      try {
+        const saved = localStorage.getItem("vf_quick_replies");
+        let currentReplies = [];
+        if (saved) {
+          currentReplies = JSON.parse(saved);
+        }
+        if (
+          currentReplies.some(
+            (r) => r.phrase.toLowerCase() === text.toLowerCase(),
+          )
+        ) {
+          showToast("Already in Quick Replies", "error");
+          return;
+        }
+        const newReply = {
+          id: Math.random().toString(36).substr(2, 9),
+          label: text.length > 25 ? text.slice(0, 22) + "..." : text,
+          phrase: text,
+          category: "General",
+        };
+        const updated = [...currentReplies, newReply];
+        localStorage.setItem("vf_quick_replies", JSON.stringify(updated));
+        window.dispatchEvent(new Event("voiceforge:quickRepliesChanged"));
+        showToast("Added to Quick Replies", "success");
+      } catch (err) {
+        showToast("Failed to add to Quick Replies", "error");
       }
-      const newReply = {
-        id: Math.random().toString(36).substr(2, 9),
-        label: text.length > 25 ? text.slice(0, 22) + "..." : text,
-        phrase: text,
-        category: "General",
-      };
-      const updated = [...currentReplies, newReply];
-      localStorage.setItem("vf_quick_replies", JSON.stringify(updated));
-      window.dispatchEvent(new Event("voiceforge:quickRepliesChanged"));
-      showToast("Added to Quick Replies", "success");
-    } catch (err) {
-      showToast("Failed to add to Quick Replies", "error");
-    }
-  }, [showToast]);
-
+    },
+    [showToast],
+  );
 
   useEffect(() => {
     async function loadActiveProfile() {
@@ -90,44 +91,50 @@ export default function VoiceForge() {
     loadActiveProfile();
   }, []);
 
-  const speak = useCallback(async (text) => {
-    if (!text.trim()) return;
-
-    if (useClonedVoice && activeProfile?.voice_id) {
-      try {
-        setIsSpeaking(true);
-        const result = await ttsSpeak({
-          text,
-          voiceId: activeProfile.voice_id,
-          language_code: language,
-        });
-        if (result?.fallback) {
-          showToast("Using browser voice fallback", "info");
+  const speak = useCallback(
+    async (text) => {
+      if (!text.trim()) return;
+
+      if (useClonedVoice && activeProfile?.voice_id) {
+        try {
+          setIsSpeaking(true);
+          const result = await ttsSpeak({
+            text,
+            voiceId: activeProfile.voice_id,
+            language_code: language,
+          });
+          if (result?.fallback) {
+            showToast("Using browser voice fallback", "info");
+          }
+        } catch (err) {
+          console.error("TTS speech error:", err);
+          showToast("Speech generation failed", "error");
+          setIsSpeaking(false);
+        }
+      } else {
+        if (!("speechSynthesis" in window)) {
+          showToast(
+            "Speech synthesis is not supported in this browser",
+            "error",
+          );
+          return;
         }
-      } catch (err) {
-        console.error("TTS speech error:", err);
-        showToast("Speech generation failed", "error");
-        setIsSpeaking(false);
-      }
-    } else {
-      if (!("speechSynthesis" in window)) {
-        showToast("Speech synthesis is not supported in this browser", "error");
-        return;
-      }
 
-      window.speechSynthesis.cancel();
-      const utterance = new SpeechSynthesisUtterance(text);
-      utterance.lang = language;
-      utterance.rate = 0.95;
-      utterance.onstart = () => setIsSpeaking(true);
-      utterance.onend = () => setIsSpeaking(false);
-      utterance.onerror = () => {
-        setIsSpeaking(false);
-        showToast("Speech playback failed", "error");
-      };
-      window.speechSynthesis.speak(utterance);
-    }
-  }, [ttsSpeak, activeProfile, language, useClonedVoice, showToast]);
+        window.speechSynthesis.cancel();
+        const utterance = new SpeechSynthesisUtterance(text);
+        utterance.lang = language;
+        utterance.rate = 0.95;
+        utterance.onstart = () => setIsSpeaking(true);
+        utterance.onend = () => setIsSpeaking(false);
+        utterance.onerror = () => {
+          setIsSpeaking(false);
+          showToast("Speech playback failed", "error");
+        };
+        window.speechSynthesis.speak(utterance);
+      }
+    },
+    [ttsSpeak, activeProfile, language, useClonedVoice, showToast],
+  );
 
   const handleSpeak = useCallback(() => {
     const text = inputText.trim();
@@ -141,56 +148,70 @@ export default function VoiceForge() {
     showToast("Saved to history", "success");
   }, [inputText, speak, addMessage, showToast, language]);
 
-  const handleReplay = useCallback((text) => {
-    speak(text);
-    showToast("Replaying...", "info");
-  }, [speak, showToast]);
-
-  const handleReuse = useCallback((text) => {
-    setInputText(text);
-    textareaRef.current?.focus();
-    showToast("Loaded into composer", "success");
-  }, [showToast]);
-
-  const handleCopy = useCallback((text) => {
-    const target = text || inputText;
-    if (!target.trim()) {
-      showToast("Nothing to copy", "error");
-      return;
-    }
+  const handleReplay = useCallback(
+    (text) => {
+      speak(text);
+      showToast("Replaying...", "info");
+    },
+    [speak, showToast],
+  );
 
-    navigator.clipboard
-      .writeText(target)
-      .then(() => showToast("Copied to clipboard", "success"))
-      .catch(() => {
-        const ta = document.createElement("textarea");
-        ta.value = target;
-        ta.style.position = "absolute";
-        ta.style.opacity = "0";
-        document.body.appendChild(ta);
-        ta.select();
-        document.execCommand("copy");
-        document.body.removeChild(ta);
-        showToast("Copied", "success");
-      });
-  }, [inputText, showToast]);
-
-  const handleQuickReply = useCallback((phrase) => {
-    speak(phrase);
-    addMessage(phrase, language);
-    showToast("Quick reply sent", "success");
-  }, [speak, addMessage, showToast, language]);
-
-  const handleKeyDown = useCallback((event) => {
-    if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
-      event.preventDefault();
-      handleSpeak();
-    }
-  }, [handleSpeak]);
+  const handleReuse = useCallback(
+    (text) => {
+      setInputText(text);
+      textareaRef.current?.focus();
+      showToast("Loaded into composer", "success");
+    },
+    [showToast],
+  );
+
+  const handleCopy = useCallback(
+    (text) => {
+      const target = text || inputText;
+      if (!target.trim()) {
+        showToast("Nothing to copy", "error");
+        return;
+      }
+
+      navigator.clipboard
+        .writeText(target)
+        .then(() => showToast("Copied to clipboard", "success"))
+        .catch(() => {
+          const ta = document.createElement("textarea");
+          ta.value = target;
+          ta.style.position = "absolute";
+          ta.style.opacity = "0";
+          document.body.appendChild(ta);
+          ta.select();
+          document.execCommand("copy");
+          document.body.removeChild(ta);
+          showToast("Copied", "success");
+        });
+    },
+    [inputText, showToast],
+  );
+
+  const handleQuickReply = useCallback(
+    (phrase) => {
+      speak(phrase);
+      addMessage(phrase, language);
+      showToast("Quick reply sent", "success");
+    },
+    [speak, addMessage, showToast, language],
+  );
+
+  const handleKeyDown = useCallback(
+    (event) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+        event.preventDefault();
+        handleSpeak();
+      }
+    },
+    [handleSpeak],
+  );
 
   const charsLeft = MAX_CHARS - inputText.length;
 
-  
   const hasAnnouncedRef = useRef(false);
 
   // Move focus into the history drawer when it opens (a11y)
@@ -214,14 +235,14 @@ export default function VoiceForge() {
   }, [language]);
 
   function getCounterColor() {
-    if (charsLeft < 50)  return "text-red-500";
+    if (charsLeft < 50) return "text-red-500";
     if (charsLeft < 100) return "text-orange-500";
     if (charsLeft < 200) return "text-yellow-500";
     return "text-neutral-400 dark:text-neutral-500";
   }
 
   function getTextareaBorder() {
-    if (charsLeft < 50)  return "border-red-300 dark:border-red-800";
+    if (charsLeft < 50) return "border-red-300 dark:border-red-800";
     if (charsLeft < 100) return "border-orange-300 dark:border-orange-800";
     if (charsLeft < 200) return "border-yellow-300 dark:border-yellow-800";
     return "border-neutral-200 dark:border-border";
@@ -255,7 +276,10 @@ export default function VoiceForge() {
           history={history}
           favorites={favorites}
           sessionTranscript={sessionTranscript}
-          onReuse={(text) => { handleReuse(text); setHistoryOpen(false); }}
+          onReuse={(text) => {
+            handleReuse(text);
+            setHistoryOpen(false);
+          }}
           onReplay={handleReplay}
           onToggleFav={toggleFavorite}
           onDelete={removeMessage}
@@ -266,7 +290,10 @@ export default function VoiceForge() {
         />
       </div>
 
-      <main className="flex flex-1 flex-col overflow-hidden" aria-label="Speech composer">
+      <main
+        className="flex flex-1 flex-col overflow-hidden"
+        aria-label="Speech composer"
+      >
         <header className="flex flex-shrink-0 items-center gap-2 border-b border-neutral-200 px-4 py-3 dark:border-border dark:bg-black sm:px-5 sm:py-3.5">
           {/* Mobile: history toggle */}
           <button
@@ -274,7 +301,11 @@ export default function VoiceForge() {
             onClick={() => setHistoryOpen((o) => !o)}
             aria-label={historyOpen ? "Close history" : "Open history"}
           >
-            {historyOpen ? <X size={15} aria-hidden="true" /> : <History size={15} aria-hidden="true" />}
+            {historyOpen ? (
+              <X size={15} aria-hidden="true" />
+            ) : (
+              <History size={15} aria-hidden="true" />
+            )}
           </button>
           <h1 className="text-base font-semibold text-neutral-800 dark:text-neutral-100">
             VoiceForge
@@ -315,10 +346,7 @@ export default function VoiceForge() {
               Compose message
             </label>
             <span
-              className={[
-                "text-xs tabular-nums",
-                getCounterColor(),
-              ].join(" ")}
+              className={["text-xs tabular-nums", getCounterColor()].join(" ")}
               aria-live="polite"
             >
               {inputText.length} / {MAX_CHARS}
@@ -332,7 +360,9 @@ export default function VoiceForge() {
             id="vf-compose"
             ref={textareaRef}
             value={inputText}
-            onChange={(event) => setInputText(event.target.value.slice(0, MAX_CHARS))}
+            onChange={(event) =>
+              setInputText(event.target.value.slice(0, MAX_CHARS))
+            }
             onKeyDown={handleKeyDown}
             placeholder="Type your message or select a quick reply..."
             maxLength={MAX_CHARS}
@@ -350,16 +380,31 @@ export default function VoiceForge() {
             rows={6}
           />
 
-          <p id="vf-hint" className="text-xs text-neutral-400 dark:text-neutral-600">
-            Tip: Press <kbd className="rounded border border-neutral-200 px-1 font-mono text-[10px] dark:border-border">Ctrl</kbd> +{" "}
-            <kbd className="rounded border border-neutral-200 px-1 font-mono text-[10px] dark:border-border">Enter</kbd> to speak quickly.
+          <p
+            id="vf-hint"
+            className="text-xs text-neutral-400 dark:text-neutral-600"
+          >
+            Tip: Press{" "}
+            <kbd className="rounded border border-neutral-200 px-1 font-mono text-[10px] dark:border-border">
+              Ctrl
+            </kbd>{" "}
+            +{" "}
+            <kbd className="rounded border border-neutral-200 px-1 font-mono text-[10px] dark:border-border">
+              Enter
+            </kbd>{" "}
+            to speak quickly.
           </p>
 
           <VoiceQuickSettings />
 
           <div className="flex flex-wrap items-center gap-4">
             <div className="flex items-center gap-2">
-              <label htmlFor="vf-language" className="text-sm font-medium text-neutral-600 dark:text-neutral-300">Language:</label>
+              <label
+                htmlFor="vf-language"
+                className="text-sm font-medium text-neutral-600 dark:text-neutral-300"
+              >
+                Language:
+              </label>
               <LanguageSelector
                 id="vf-language"
                 value={language}
@@ -379,7 +424,9 @@ export default function VoiceForge() {
                   className={[
                     "relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent",
                     "transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500/30",
-                    useClonedVoice ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600",
+                    useClonedVoice
+                      ? "bg-blue-600"
+                      : "bg-neutral-300 dark:bg-neutral-600",
                   ].join(" ")}
                   aria-label="Toggle cloned voice use"
                 >
@@ -421,12 +468,16 @@ export default function VoiceForge() {
             <button
               onClick={handleSpeak}
               disabled={!inputText.trim() || isSpeaking}
-              aria-label={isSpeaking ? "Currently speaking" : "Speak and save to history"}
+              aria-label={
+                isSpeaking ? "Currently speaking" : "Speak and save to history"
+              }
               className={[
                 "ml-auto flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium text-white transition",
                 "focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-1 dark:focus:ring-offset-black",
                 "disabled:cursor-not-allowed disabled:opacity-50",
-                isSpeaking ? "bg-blue-400" : "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]",
+                isSpeaking
+                  ? "bg-blue-400"
+                  : "bg-blue-600 hover:bg-blue-700 active:scale-[0.98]",
               ].join(" ")}
             >
               <Mic2 size={16} aria-hidden="true" />
diff --git a/client/src/components/VoiceQuickSettings.jsx b/client/src/components/VoiceQuickSettings.jsx
index 8fdfef3c..48ee35f9 100644
--- a/client/src/components/VoiceQuickSettings.jsx
+++ b/client/src/components/VoiceQuickSettings.jsx
@@ -9,7 +9,16 @@ import {
 /**
  * A single labelled range slider row.
  */
-function SliderRow({ id, label, description, value, onChange, min = 0, max = 1, step = 0.01 }) {
+function SliderRow({
+  id,
+  label,
+  description,
+  value,
+  onChange,
+  min = 0,
+  max = 1,
+  step = 0.01,
+}) {
   return (
     <div className="space-y-1">
       <label
@@ -32,10 +41,22 @@ function SliderRow({ id, label, description, value, onChange, min = 0, max = 1,
         max={max}
         step={step}
         value={value}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (["ArrowRight", "ArrowUp"].includes(e.key)) {
+            e.preventDefault();
+            const nextVal = Math.min(Number(value) + Number(step), Number(max));
+            onChange({ target: { value: nextVal } });
+          } else if (["ArrowLeft", "ArrowDown"].includes(e.key)) {
+            e.preventDefault();
+            const nextVal = Math.max(Number(value) - Number(step), Number(min));
+            onChange({ target: { value: nextVal } });
+          }
+        }}
         onChange={onChange}
         aria-label={label}
         aria-describedby={`${id}-desc`}
-        className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-neutral-200 accent-blue-500 dark:bg-neutral-700 dark:accent-blue-400"
+        className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-neutral-200 accent-blue-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:bg-neutral-700 dark:accent-blue-400"
       />
       <p
         id={`${id}-desc`}
@@ -63,7 +84,10 @@ export function VoiceQuickSettings({ defaultOpen = false }) {
   // Keep in sync when settings change
   useEffect(() => {
     function handleStorage(event) {
-      if (event.key === VOICE_SETTINGS_KEY || event.type === "voiceforge:settingsChanged") {
+      if (
+        event.key === VOICE_SETTINGS_KEY ||
+        event.type === "voiceforge:settingsChanged"
+      ) {
         setSettings(loadVoiceSettings());
       }
     }
@@ -85,7 +109,7 @@ export function VoiceQuickSettings({ defaultOpen = false }) {
         return next;
       });
     },
-    []
+    [],
   );
 
   const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);
@@ -164,8 +188,12 @@ export function VoiceQuickSettings({ defaultOpen = false }) {
           <details className="group border-t border-neutral-100 pt-3 dark:border-neutral-800">
             <summary className="flex cursor-pointer items-center justify-between text-xs font-bold text-neutral-600 dark:text-neutral-400 focus:outline-none">
               <span>Graphic Equalizer (EQ)</span>
-              <span className="text-[10px] text-neutral-400 group-open:hidden">Show</span>
-              <span className="text-[10px] text-neutral-400 hidden group-open:inline">Hide</span>
+              <span className="text-[10px] text-neutral-400 group-open:hidden">
+                Show
+              </span>
+              <span className="text-[10px] text-neutral-400 hidden group-open:inline">
+                Hide
+              </span>
             </summary>
             <div className="space-y-4 mt-3 pl-1">
               <SliderRow
diff --git a/client/src/components/VoiceRecorder.jsx b/client/src/components/VoiceRecorder.jsx
index 1033852a..a6bea212 100644
--- a/client/src/components/VoiceRecorder.jsx
+++ b/client/src/components/VoiceRecorder.jsx
@@ -1,6 +1,13 @@
 // Handles microphone permission, short reference recording, playback, and upload readiness.
 import React from "react";
-import { Mic, Square, Upload, CircleAlert, Loader2, FileUp } from "lucide-react";
+import {
+  Mic,
+  Square,
+  Upload,
+  CircleAlert,
+  Loader2,
+  FileUp,
+} from "lucide-react";
 import { extractAudioFromFile } from "../utils/audioExtractor.js";
 import { AudioTrimmer } from "./AudioTrimmer.jsx";
 
@@ -54,9 +61,9 @@ export default function VoiceRecorder({ onRecordingReady, disabled = false }) {
 
     // Create the final audio Blob
     const blob = new Blob(chunksRef.current, {
-      type: recorderRef.current?.mimeType || "audio/webm"
+      type: recorderRef.current?.mimeType || "audio/webm",
     });
-    
+
     setRawAudioBlob(blob);
 
     const url = URL.createObjectURL(blob);
@@ -121,21 +128,28 @@ export default function VoiceRecorder({ onRecordingReady, disabled = false }) {
       recorder.onstop = () => {
         window.clearInterval(timerRef.current);
         setIsRecording(false);
-        const blob = new Blob(chunksRef.current, { type: recorder.mimeType || "audio/webm" });
+        const blob = new Blob(chunksRef.current, {
+          type: recorder.mimeType || "audio/webm",
+        });
         const url = URL.createObjectURL(blob);
         setAudioUrl((previous) => {
           if (previous) URL.revokeObjectURL(previous);
           return url;
         });
         const finalDuration = durationRef.current;
-        onRecordingReady(blob, { duration: finalDuration, isValid: finalDuration >= MIN_DURATION });
+        onRecordingReady(blob, {
+          duration: finalDuration,
+          isValid: finalDuration >= MIN_DURATION,
+        });
         streamRef.current?.getTracks().forEach((track) => track.stop());
       };
 
       recorder.onerror = (event) => {
         console.error("MediaRecorder runtime error:", event.error);
         if (!isMountedRef.current) return;
-        setRecorderError(`Recording error: ${event.error?.message || "Unknown error"}`);
+        setRecorderError(
+          `Recording error: ${event.error?.message || "Unknown error"}`,
+        );
         handleStopCleanup({ emitReady: false });
       };
 
@@ -163,10 +177,18 @@ export default function VoiceRecorder({ onRecordingReady, disabled = false }) {
       setIsRecording(false);
 
       let friendlyMessage = err?.message || String(err);
-      if (err?.name === "NotAllowedError" || err?.name === "PermissionDeniedError") {
-        friendlyMessage = "Microphone access denied. Please grant permission in your browser settings and try again.";
-      } else if (err?.name === "NotFoundError" || err?.name === "DevicesNotFoundError") {
-        friendlyMessage = "No microphone found. Please connect an input device and try again.";
+      if (
+        err?.name === "NotAllowedError" ||
+        err?.name === "PermissionDeniedError"
+      ) {
+        friendlyMessage =
+          "Microphone access denied. Please grant permission in your browser settings and try again.";
+      } else if (
+        err?.name === "NotFoundError" ||
+        err?.name === "DevicesNotFoundError"
+      ) {
+        friendlyMessage =
+          "No microphone found. Please connect an input device and try again.";
       }
 
       setRecorderError(friendlyMessage);
@@ -180,7 +202,7 @@ export default function VoiceRecorder({ onRecordingReady, disabled = false }) {
   function stopRecording() {
     if (durationRef.current < MIN_DURATION) {
       const confirmStop = window.confirm(
-        `Your recording is only ${durationRef.current} seconds. A minimum of ${MIN_DURATION} seconds is recommended for high-quality voice cloning. Stop recording anyway?`
+        `Your recording is only ${durationRef.current} seconds. A minimum of ${MIN_DURATION} seconds is recommended for high-quality voice cloning. Stop recording anyway?`,
       );
       if (!confirmStop) return;
     }
@@ -232,7 +254,8 @@ export default function VoiceRecorder({ onRecordingReady, disabled = false }) {
 
     (async () => {
       try {
-        const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+        const AudioContextClass =
+          window.AudioContext || window.webkitAudioContext;
         if (!AudioContextClass) {
           throw new Error("Web Audio API is not supported in this browser.");
         }
@@ -292,10 +315,13 @@ export default function VoiceRecorder({ onRecordingReady, disabled = false }) {
     <section className="rounded-lg border border-ink/10 bg-white p-5 shadow-soft dark:border-border dark:bg-surface dark:text-neutral-100 dark:shadow-soft-dk">
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h2 className="text-xl font-bold">Record or upload a 10-second reference</h2>
+          <h2 className="text-xl font-bold">
+            Record or upload a 10-second reference
+          </h2>
           <p className="mt-1 max-w-2xl text-sm leading-6 text-ink/70 dark:text-muted">
             Use your own voice or a trusted reference speaker with consent. Keep
-            background noise low. You can also upload a video (.mp4, .mov) or audio file.
+            background noise low. You can also upload a video (.mp4, .mov) or
+            audio file.
           </p>
         </div>
         <span className="rounded-md bg-mint px-3 py-1 text-sm font-semibold text-ink dark:bg-glow/15 dark:text-glow">
@@ -307,24 +333,30 @@ export default function VoiceRecorder({ onRecordingReady, disabled = false }) {
       <div className="mt-4">
         <div className="flex items-center justify-between text-xs font-semibold text-ink/60 dark:text-muted mb-1.5">
           <span>Recording Progress</span>
-          <span>{duration}s / {MIN_DURATION}s</span>
+          <span>
+            {duration}s / {MIN_DURATION}s
+          </span>
         </div>
         <div className="w-full bg-ink/10 dark:bg-neutral-800 h-2 rounded-full overflow-hidden">
           <div
             className={`h-full transition-all duration-300 ${
               duration >= MIN_DURATION ? "bg-moss dark:bg-glow" : "bg-coral"
             }`}
-            style={{ width: `${Math.min((duration / MIN_DURATION) * 100, 100)}%` }}
+            style={{
+              width: `${Math.min((duration / MIN_DURATION) * 100, 100)}%`,
+            }}
           />
         </div>
         {duration < MIN_DURATION && isRecording && (
           <p className="mt-1.5 text-xs text-coral font-medium">
-            Keep recording! {MIN_DURATION - duration} more second{MIN_DURATION - duration !== 1 ? 's' : ''} needed for voice cloning.
+            Keep recording! {MIN_DURATION - duration} more second
+            {MIN_DURATION - duration !== 1 ? "s" : ""} needed for voice cloning.
           </p>
         )}
         {duration >= MIN_DURATION && isRecording && (
           <p className="mt-1.5 text-xs text-moss dark:text-glow font-medium">
-            Minimum duration met! You can stop recording or continue for a higher quality clone.
+            Minimum duration met! You can stop recording or continue for a
+            higher quality clone.
           </p>
         )}
       </div>
@@ -347,7 +379,11 @@ export default function VoiceRecorder({ onRecordingReady, disabled = false }) {
           ) : (
             <Mic size={18} aria-hidden="true" />
           )}
-          {isInitializing ? "Initializing..." : isRecording ? "Stop recording" : "Start recording"}
+          {isInitializing
+            ? "Initializing..."
+            : isRecording
+              ? "Stop recording"
+              : "Start recording"}
         </button>
 
         <button
@@ -411,24 +447,43 @@ export default function VoiceRecorder({ onRecordingReady, disabled = false }) {
           />
         </div>
       )}
-      
+
       {audioUrl && duration < 10 && (
         <div className="mt-4 rounded-md border border-amber-400/40 bg-amber-50 p-3 text-sm font-semibold text-ink flex items-center gap-2 dark:bg-amber-900/20 dark:text-amber-300">
-          <CircleAlert size={18} aria-hidden="true" className="text-amber-500" />
-          <span>Recording is too short. Please record at least 10 seconds for best results.</span>
+          <CircleAlert
+            size={18}
+            aria-hidden="true"
+            className="text-amber-500"
+          />
+          <span>
+            Recording is too short. Please record at least 10 seconds for best
+            results.
+          </span>
         </div>
-        )}
+      )}
 
       {audioUrl && duration < MIN_DURATION && (
         <div className="mt-4 rounded-md border border-coral/40 bg-coral/10 p-3 text-sm font-semibold text-ink flex items-center gap-2">
           <CircleAlert size={18} aria-hidden="true" className="text-coral" />
-          <span>Warning: Your recording is only {duration}s. A minimum of {MIN_DURATION}s is required for voice cloning. Please record a longer reference.</span>
+          <span>
+            Warning: Your recording is only {duration}s. A minimum of{" "}
+            {MIN_DURATION}s is required for voice cloning. Please record a
+            longer reference.
+          </span>
         </div>
       )}
 
       {recorderError && (
-        <div role="alert" aria-live="polite" className="mt-4 rounded-md border border-coral/40 bg-coral/10 p-3 text-sm font-semibold text-ink flex items-center gap-2">
-          <CircleAlert size={18} aria-hidden="true" className="text-coral shrink-0" />
+        <div
+          role="alert"
+          aria-live="polite"
+          className="mt-4 rounded-md border border-coral/40 bg-coral/10 p-3 text-sm font-semibold text-ink flex items-center gap-2"
+        >
+          <CircleAlert
+            size={18}
+            aria-hidden="true"
+            className="text-coral shrink-0"
+          />
           <span className="flex-1">{recorderError}</span>
           <button
             type="button"
diff --git a/client/src/components/useToast.jsx b/client/src/components/useToast.jsx
index b477cde4..6a18c7a5 100644
--- a/client/src/components/useToast.jsx
+++ b/client/src/components/useToast.jsx
@@ -13,15 +13,18 @@ export function useToast(duration = 2200) {
     };
   }, []);
 
-  const showToast = useCallback((message, type = "success") => {
-    const id = ++nextId;
-    setToasts((previous) => [...previous, { id, message, type }]);
+  const showToast = useCallback(
+    (message, type = "success") => {
+      const id = ++nextId;
+      setToasts((previous) => [...previous, { id, message, type }]);
 
-    timers.current[id] = setTimeout(() => {
-      setToasts((previous) => previous.filter((toast) => toast.id !== id));
-      delete timers.current[id];
-    }, duration);
-  }, [duration]);
+      timers.current[id] = setTimeout(() => {
+        setToasts((previous) => previous.filter((toast) => toast.id !== id));
+        delete timers.current[id];
+      }, duration);
+    },
+    [duration],
+  );
 
   return { toasts, showToast };
 }
@@ -36,7 +39,12 @@ export function ToastContainer({ toasts }) {
       className="pointer-events-none fixed bottom-5 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center gap-2"
     >
       {toasts.map((toast) => {
-        const Icon = toast.type === "error" ? AlertTriangle : toast.type === "info" ? Info : Check;
+        const Icon =
+          toast.type === "error"
+            ? AlertTriangle
+            : toast.type === "info"
+              ? Info
+              : Check;
         return (
           <div
             key={toast.id}
diff --git a/client/src/hooks/useSpeechHistory.js b/client/src/hooks/useSpeechHistory.js
index df4b0350..7cfe0ada 100644
--- a/client/src/hooks/useSpeechHistory.js
+++ b/client/src/hooks/useSpeechHistory.js
@@ -85,10 +85,14 @@ export function useSpeechHistory() {
     }));
   });
   const [favorites, setFavorites] = useState(
-    () => new Set(readStorage(FAVS_KEY, []))
+    () => new Set(readStorage(FAVS_KEY, [])),
+  );
+  const [sessionTranscript, setSessionTranscript] = useState(() =>
+    readSessionStorage(TRANSCRIPT_KEY, []),
+  );
+  const [analyticsHistory, setAnalyticsHistory] = useState(() =>
+    readStorage(ANALYTICS_KEY, []),
   );
-  const [sessionTranscript, setSessionTranscript] = useState(() => readSessionStorage(TRANSCRIPT_KEY, []));
-  const [analyticsHistory, setAnalyticsHistory] = useState(() => readStorage(ANALYTICS_KEY, []));
 
   // ── Persistence ──────────────────────────────────────────────────────────
   useEffect(() => {
@@ -126,60 +130,74 @@ export function useSpeechHistory() {
   // ── Actions ──────────────────────────────────────────────────────────────
 
   /**
- * Adds a message to speech history.
- *
- * Behavior:
- * - trims whitespace
- * - prevents empty messages
- * - preserves existing IDs for duplicates
- * - moves duplicate entries to top
- * - enforces MAX_HISTORY limit
- *
+   * Adds a message to speech history.
+   *
+   * Behavior:
+   * - trims whitespace
+   * - prevents empty messages
+   * - preserves existing IDs for duplicates
+   * - moves duplicate entries to top
+   * - enforces MAX_HISTORY limit
+   *
    * @param {string} text - Message text to store
    * @param {string} lang - Language code
    */
-const addMessage = useCallback((text, lang = "en-US") => {
-  const trimmed = text.trim();
-
-  if (!trimmed) return;
-
-  const timestamp = Date.now();
-
-  setSessionTranscript((prev) => [
-  ...prev,
-  {
-    text: trimmed,
-    timestamp,
-    status: "success",
-    language: lang,
-  },
-]);
-
-  setAnalyticsHistory((prev) => {
-    const newEntry = { id: crypto.randomUUID(), text: trimmed, timestamp, language: lang };
-    const updated = [newEntry, ...prev];
-    return updated.slice(0, MAX_ANALYTICS);
-  });
-
-  setHistory((prev) => {
-    // Check existing message
-    const existing = prev.find((m) => m.text === trimmed);
-
-    // Preserve existing ID if duplicate found, but update timestamp
-    // so re-spoken messages sort correctly after a page reload.
-    const updatedEntry = existing
-      ? { ...existing, timestamp: Date.now(), tags: Array.isArray(existing.tags) ? existing.tags : [] }
-      : { id: crypto.randomUUID(), text: trimmed, timestamp: Date.now(), tags: [] };
-
-    // Move duplicate to top instead of recreating
-    const updated = [
-      updatedEntry,
-      ...prev.filter((m) => m.id !== updatedEntry.id),
-    ];
+  const addMessage = useCallback((text, lang = "en-US") => {
+    const trimmed = text.trim();
+
+    if (!trimmed) return;
+
+    const timestamp = Date.now();
+
+    setSessionTranscript((prev) => [
+      ...prev,
+      {
+        text: trimmed,
+        timestamp,
+        status: "success",
+        language: lang,
+      },
+    ]);
+
+    setAnalyticsHistory((prev) => {
+      const newEntry = {
+        id: crypto.randomUUID(),
+        text: trimmed,
+        timestamp,
+        language: lang,
+      };
+      const updated = [newEntry, ...prev];
+      return updated.slice(0, MAX_ANALYTICS);
+    });
 
-    return updated.slice(0, MAX_HISTORY);
-  });
-}, []);
+    setHistory((prev) => {
+      // Check existing message
+      const existing = prev.find((m) => m.text === trimmed);
+
+      // Preserve existing ID if duplicate found, but update timestamp
+      // so re-spoken messages sort correctly after a page reload.
+      const updatedEntry = existing
+        ? {
+            ...existing,
+            timestamp: Date.now(),
+            tags: Array.isArray(existing.tags) ? existing.tags : [],
+          }
+        : {
+            id: crypto.randomUUID(),
+            text: trimmed,
+            timestamp: Date.now(),
+            tags: [],
+          };
+
+      // Move duplicate to top instead of recreating
+      const updated = [
+        updatedEntry,
+        ...prev.filter((m) => m.id !== updatedEntry.id),
+      ];
+
+      return updated.slice(0, MAX_HISTORY);
+    });
+  }, []);
 
   /**
    * Removes a message by id and also removes it from favorites.
@@ -190,7 +208,7 @@ const addMessage = useCallback((text, lang = "en-US") => {
       const next = new Set(prev);
       next.delete(id);
       return next;
-      });
+    });
   }, []);
 
   /**
@@ -219,46 +237,49 @@ const addMessage = useCallback((text, lang = "en-US") => {
    * Merges imported items with the existing setup, preventing text duplicates
    * and updating favorite relationships.
    */
-  const importBackup = useCallback((importedHistory, importedFavorites) => {
-    const mergedMap = new Map();
-    // Add existing history
-    history.forEach(m => mergedMap.set(m.text, m));
-
-    const favIdsToAdd = [];
-    importedHistory.forEach((impMsg) => {
-      const isImportedFav = importedFavorites.includes(impMsg.id);
-      if (mergedMap.has(impMsg.text)) {
-        const existingMsg = mergedMap.get(impMsg.text);
-        if (isImportedFav) {
-          favIdsToAdd.push(existingMsg.id);
+  const importBackup = useCallback(
+    (importedHistory, importedFavorites) => {
+      const mergedMap = new Map();
+      // Add existing history
+      history.forEach((m) => mergedMap.set(m.text, m));
+
+      const favIdsToAdd = [];
+      importedHistory.forEach((impMsg) => {
+        const isImportedFav = importedFavorites.includes(impMsg.id);
+        if (mergedMap.has(impMsg.text)) {
+          const existingMsg = mergedMap.get(impMsg.text);
+          if (isImportedFav) {
+            favIdsToAdd.push(existingMsg.id);
+          }
+        } else {
+          mergedMap.set(impMsg.text, impMsg);
+          if (isImportedFav) {
+            favIdsToAdd.push(impMsg.id);
+          }
         }
-      } else {
-        mergedMap.set(impMsg.text, impMsg);
-        if (isImportedFav) {
-          favIdsToAdd.push(impMsg.id);
-        }
-      }
-    });
+      });
 
-    const mergedList = Array.from(mergedMap.values());
-    mergedList.sort((a, b) => b.timestamp - a.timestamp);
-    const finalHistory = mergedList.slice(0, MAX_HISTORY);
+      const mergedList = Array.from(mergedMap.values());
+      mergedList.sort((a, b) => b.timestamp - a.timestamp);
+      const finalHistory = mergedList.slice(0, MAX_HISTORY);
 
-    const nextFavorites = new Set(favorites);
-    favIdsToAdd.forEach(id => nextFavorites.add(id));
+      const nextFavorites = new Set(favorites);
+      favIdsToAdd.forEach((id) => nextFavorites.add(id));
 
-    // Clean up favorites: only keep favorites whose IDs are in the finalHistory
-    const finalHistoryIds = new Set(finalHistory.map(m => m.id));
-    const cleanedFavorites = new Set();
-    nextFavorites.forEach(id => {
-      if (finalHistoryIds.has(id)) {
-        cleanedFavorites.add(id);
-      }
-    });
+      // Clean up favorites: only keep favorites whose IDs are in the finalHistory
+      const finalHistoryIds = new Set(finalHistory.map((m) => m.id));
+      const cleanedFavorites = new Set();
+      nextFavorites.forEach((id) => {
+        if (finalHistoryIds.has(id)) {
+          cleanedFavorites.add(id);
+        }
+      });
 
-    setHistory(finalHistory);
-    setFavorites(cleanedFavorites);
-  }, [history, favorites]);
+      setHistory(finalHistory);
+      setFavorites(cleanedFavorites);
+    },
+    [history, favorites],
+  );
 
   return {
     history,
diff --git a/client/src/hooks/useTTS.js b/client/src/hooks/useTTS.js
index fddd87c5..2978d53b 100644
--- a/client/src/hooks/useTTS.js
+++ b/client/src/hooks/useTTS.js
@@ -16,7 +16,6 @@ export default function useTTS() {
   const [engine, setEngine] = React.useState("chatterbox");
   const abortControllerRef = React.useRef(null);
 
-
   /**
    * Triggers local browser SpeechSynthesis as a fallback engine.
    *
@@ -73,7 +72,13 @@ export default function useTTS() {
    *   it is looked up from the locally saved profile matching voiceId.
    * @returns {Promise<{audioUrl: string, engine: string}|{fallback: boolean, engine: string}>} Result of speech synthesis.
    */
-  async function speak({ text, voiceId, language_code, ownerToken, voice_settings_override }) {
+  async function speak({
+    text,
+    voiceId,
+    language_code,
+    ownerToken,
+    voice_settings_override,
+  }) {
     // Cancel any in-flight request before starting a new one.
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
@@ -91,7 +96,8 @@ export default function useTTS() {
       // authorize use of voice_id (403 otherwise). Use the explicitly
       // passed token if given, else resolve it from the saved profile.
       let activeVoiceId = voiceId;
-      let resolvedOwnerToken = ownerToken || (await findProfileByVoiceId(voiceId))?.ownerToken || null;
+      let resolvedOwnerToken =
+        ownerToken || (await findProfileByVoiceId(voiceId))?.ownerToken || null;
 
       let response = await fetch("/api/voice/speak", {
         method: "POST",
@@ -115,7 +121,11 @@ export default function useTTS() {
         if (profile && profile.audioBlob) {
           // 2. Quietly re-clone (POST /api/voice/clone)
           const formData = new FormData();
-          formData.append("audio", profile.audioBlob, "voiceforge-reference.webm");
+          formData.append(
+            "audio",
+            profile.audioBlob,
+            "voiceforge-reference.webm",
+          );
           formData.append("name", profile.name);
           formData.append("voice_id", voiceId);
 
@@ -145,11 +155,18 @@ export default function useTTS() {
       if (!response.ok) {
         const payload = await response.json().catch(() => ({}));
         // If voice profile is missing on the backend (404), trigger auto-reclone from IndexedDB
-        if (response.status === 404 && (payload.error || "").includes("Voice profile not found")) {
+        if (
+          response.status === 404 &&
+          (payload.error || "").includes("Voice profile not found")
+        ) {
           const profile = await findProfileByVoiceId(voiceId);
           if (profile && profile.audioBlob) {
             const formData = new FormData();
-            formData.append("audio", profile.audioBlob, "voiceforge-reference.webm");
+            formData.append(
+              "audio",
+              profile.audioBlob,
+              "voiceforge-reference.webm",
+            );
             formData.append("name", profile.name);
 
             const cloneResponse = await fetch("/api/voice/clone", {
@@ -173,7 +190,7 @@ export default function useTTS() {
                   owner_token: clonePayload.owner_token,
                   name: clonePayload.name || profile.name,
                 },
-                profile.audioBlob
+                profile.audioBlob,
               );
 
               activeVoiceId = updatedProfile.voice_id;
@@ -246,4 +263,4 @@ export default function useTTS() {
     audioUrl,
     engine,
   };
-}
\ No newline at end of file
+}
diff --git a/client/src/hooks/useVirtualCamera.js b/client/src/hooks/useVirtualCamera.js
index b3d679b3..1ac6be32 100644
--- a/client/src/hooks/useVirtualCamera.js
+++ b/client/src/hooks/useVirtualCamera.js
@@ -7,7 +7,11 @@ export default function useVirtualCamera(canvasRef) {
   const originalTrackRef = React.useRef(null);
 
   function browserSupportsInsertableStreams() {
-    return "MediaStreamTrackProcessor" in window && "MediaStreamTrackGenerator" in window && "TransformStream" in window;
+    return (
+      "MediaStreamTrackProcessor" in window &&
+      "MediaStreamTrackGenerator" in window &&
+      "TransformStream" in window
+    );
   }
 
   async function start() {
@@ -40,7 +44,9 @@ export default function useVirtualCamera(canvasRef) {
       outputStream = new MediaStream([generator]);
       outputTrack = generator;
     } else {
-      setStatus("Canvas stream live; Insertable Streams unavailable in this browser");
+      setStatus(
+        "Canvas stream live; Insertable Streams unavailable in this browser",
+      );
     }
 
     setStream(outputStream);
@@ -63,5 +69,12 @@ export default function useVirtualCamera(canvasRef) {
     };
   }, [stream]);
 
-  return { isLive, status, stream, start, stop, browserSupportsInsertableStreams };
+  return {
+    isLive,
+    status,
+    stream,
+    start,
+    stop,
+    browserSupportsInsertableStreams,
+  };
 }
diff --git a/client/src/hooks/useVoiceClone.js b/client/src/hooks/useVoiceClone.js
index 8d37129d..33255551 100644
--- a/client/src/hooks/useVoiceClone.js
+++ b/client/src/hooks/useVoiceClone.js
@@ -1,6 +1,11 @@
 // Provides a small client-side API for uploading a recording and saving cloned voice profiles.
 import React from "react";
-import { getAllProfiles, saveProfile, deleteProfile, clearStorage } from "../utils/db.js";
+import {
+  getAllProfiles,
+  saveProfile,
+  deleteProfile,
+  clearStorage,
+} from "../utils/db.js";
 
 // Fix (Issue 2): must match the server-side Multer limit in server/middleware/upload.js.
 const MAX_UPLOAD_BYTES = 12 * 1024 * 1024; // 12 MB
@@ -24,7 +29,7 @@ export async function saveVoiceProfile(profile, audioBlob = null) {
     // memory during the clone flow.
     ownerToken: profile.ownerToken || profile.owner_token || null,
     createdAt: new Date().toISOString(),
-    audioBlob // Store the binary reference audio Blob
+    audioBlob, // Store the binary reference audio Blob
   };
   await saveProfile(nextProfile);
   localStorage.setItem(ACTIVE_KEY, nextProfile.voice_id);
@@ -52,7 +57,11 @@ export async function clearAllVoiceProfiles() {
 export async function getActiveVoiceProfile() {
   const profiles = await getSavedProfiles();
   const activeVoiceId = localStorage.getItem(ACTIVE_KEY);
-  return profiles.find((profile) => profile.voice_id === activeVoiceId) || profiles[0] || null;
+  return (
+    profiles.find((profile) => profile.voice_id === activeVoiceId) ||
+    profiles[0] ||
+    null
+  );
 }
 
 export default function useVoiceClone() {
@@ -68,17 +77,19 @@ export default function useVoiceClone() {
       // user gets instant, clear feedback instead of waiting for the full
       // upload to complete before Multer rejects it on the server.
       if (!audioBlob) {
-        throw new Error("No audio recording found. Please record your voice first.");
+        throw new Error(
+          "No audio recording found. Please record your voice first.",
+        );
       }
       if (!audioBlob.type.startsWith("audio/")) {
         throw new Error(
-          `Unsupported file type "${audioBlob.type}". Please upload an audio recording.`
+          `Unsupported file type "${audioBlob.type}". Please upload an audio recording.`,
         );
       }
       if (audioBlob.size > MAX_UPLOAD_BYTES) {
         const sizeMB = (audioBlob.size / (1024 * 1024)).toFixed(1);
         throw new Error(
-          `Recording is ${sizeMB} MB — the maximum allowed size is 12 MB. Please record a shorter clip.`
+          `Recording is ${sizeMB} MB — the maximum allowed size is 12 MB. Please record a shorter clip.`,
         );
       }
 
@@ -88,12 +99,14 @@ export default function useVoiceClone() {
 
       const response = await fetch("/api/voice/clone", {
         method: "POST",
-        body: formData
+        body: formData,
       });
 
       const contentType = response.headers.get("content-type") || "";
       if (!contentType.includes("application/json")) {
-        throw new Error("Could not connect to the VoiceForge server. Please ensure your local backend is running on port 3001.");
+        throw new Error(
+          "Could not connect to the VoiceForge server. Please ensure your local backend is running on port 3001.",
+        );
       }
 
       const payload = await response.json();
@@ -105,11 +118,14 @@ export default function useVoiceClone() {
       // Fix (Broken Voice Synthesis): forward the owner_token returned by
       // the server into saveVoiceProfile so it lands in the stored profile
       // (see ownerToken field above) instead of being silently dropped.
-      const profile = await saveVoiceProfile({
-        voice_id: payload.voice_id,
-        owner_token: payload.owner_token,
-        name: payload.name || name
-      }, audioBlob);
+      const profile = await saveVoiceProfile(
+        {
+          voice_id: payload.voice_id,
+          owner_token: payload.owner_token,
+          name: payload.name || name,
+        },
+        audioBlob,
+      );
 
       setStatus("success");
       return profile;
diff --git a/client/src/main.jsx b/client/src/main.jsx
index bcb0409b..2fed7d6b 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -10,5 +10,5 @@ ReactDOM.createRoot(document.getElementById("root")).render(
     <ThemeProvider>
       <App />
     </ThemeProvider>
-  </React.StrictMode>
-);
\ No newline at end of file
+  </React.StrictMode>,
+);
diff --git a/client/src/pages/About.jsx b/client/src/pages/About.jsx
index 8d228d2a..3f41e418 100644
--- a/client/src/pages/About.jsx
+++ b/client/src/pages/About.jsx
@@ -1,36 +1,62 @@
 const techStack = [
-  { name: "React 18", color: "bg-blue-500/10 text-blue-400 border border-blue-500/20" },
-  { name: "Vite 5", color: "bg-purple-500/10 text-purple-400 border border-purple-500/20" },
-  { name: "Tailwind CSS 3", color: "bg-cyan-500/10 text-cyan-400 border border-cyan-500/20" },
-  { name: "Node.js + Express", color: "bg-green-500/10 text-green-400 border border-green-500/20" },
-  { name: "Chatterbox TTS", color: "bg-yellow-500/10 text-yellow-400 border border-yellow-500/20" },
-  { name: "ONNX Runtime Web", color: "bg-orange-500/10 text-orange-400 border border-orange-500/20" },
-  { name: "IndexedDB", color: "bg-pink-500/10 text-pink-400 border border-pink-500/20" },
-  { name: "WebRTC", color: "bg-red-500/10 text-red-400 border border-red-500/20" },
+  {
+    name: "React 18",
+    color: "bg-blue-500/10 text-blue-400 border border-blue-500/20",
+  },
+  {
+    name: "Vite 5",
+    color: "bg-purple-500/10 text-purple-400 border border-purple-500/20",
+  },
+  {
+    name: "Tailwind CSS 3",
+    color: "bg-cyan-500/10 text-cyan-400 border border-cyan-500/20",
+  },
+  {
+    name: "Node.js + Express",
+    color: "bg-green-500/10 text-green-400 border border-green-500/20",
+  },
+  {
+    name: "Chatterbox TTS",
+    color: "bg-yellow-500/10 text-yellow-400 border border-yellow-500/20",
+  },
+  {
+    name: "ONNX Runtime Web",
+    color: "bg-orange-500/10 text-orange-400 border border-orange-500/20",
+  },
+  {
+    name: "IndexedDB",
+    color: "bg-pink-500/10 text-pink-400 border border-pink-500/20",
+  },
+  {
+    name: "WebRTC",
+    color: "bg-red-500/10 text-red-400 border border-red-500/20",
+  },
 ];
 
 const steps = [
   {
     number: "01",
     title: "Record Your Voice",
-    description: "Record a short 10-second consent-based reference clip. VoiceForge sends it via Chatterbox on Hugging Face to create a unique voice profile stored locally in your browser.",
+    description:
+      "Record a short 10-second consent-based reference clip. VoiceForge sends it via Chatterbox on Hugging Face to create a unique voice profile stored locally in your browser.",
   },
   {
     number: "02",
     title: "Type What You Want to Say",
-    description: "On the Compose or Call tab, type any phrase. VoiceForge converts it to speech using your cloned voice in real time.",
+    description:
+      "On the Compose or Call tab, type any phrase. VoiceForge converts it to speech using your cloned voice in real time.",
   },
   {
     number: "03",
     title: "Join Your Call Naturally",
-    description: "Go Live to expose the lip-synced canvas stream. Use OBS Virtual Camera to route it into Zoom, Google Meet, or Microsoft Teams as your camera feed.",
+    description:
+      "Go Live to expose the lip-synced canvas stream. Use OBS Virtual Camera to route it into Zoom, Google Meet, or Microsoft Teams as your camera feed.",
   },
 ];
 
 export default function About({ onNavigate }) {
   return (
     <div className="min-h-screen bg-background text-foreground px-4 py-12 max-w-4xl mx-auto">
-
       <section className="mb-16 text-center">
         <h1 className="text-4xl font-bold mb-4">About VoiceForge</h1>
         <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
@@ -68,9 +94,13 @@ export default function About({ onNavigate }) {
                 cursor-pointer
               "
             >
-              <span className="text-3xl font-bold text-primary opacity-40">{step.number}</span>
+              <span className="text-3xl font-bold text-primary opacity-40">
+                {step.number}
+              </span>
               <h3 className="mt-2 text-lg font-semibold">{step.title}</h3>
-              <p className="mt-2 text-sm text-muted-foreground">{step.description}</p>
+              <p className="mt-2 text-sm text-muted-foreground">
+                {step.description}
+              </p>
             </div>
           ))}
         </div>
@@ -80,7 +110,10 @@ export default function About({ onNavigate }) {
         <h2 className="text-2xl font-semibold mb-6">Tech Stack</h2>
         <div className="flex flex-wrap gap-3">
           {techStack.map((tech) => (
-            <span key={tech.name} className={`rounded-full px-4 py-1.5 text-sm font-medium ${tech.color}`}>
+            <span
+              key={tech.name}
+              className={`rounded-full px-4 py-1.5 text-sm font-medium ${tech.color}`}
+            >
               {tech.name}
             </span>
           ))}
@@ -88,7 +121,9 @@ export default function About({ onNavigate }) {
       </section>
 
       <section className="rounded-xl border border-border bg-card p-8 text-center">
-        <h2 className="text-2xl font-semibold mb-3">Open Source and Community</h2>
+        <h2 className="text-2xl font-semibold mb-3">
+          Open Source and Community
+        </h2>
         <p className="text-muted-foreground mb-6 max-w-xl mx-auto">
           VoiceForge is built in the open under the MIT license. Whether you are
           fixing a bug, suggesting a feature, or improving accessibility, all
@@ -111,7 +146,6 @@ export default function About({ onNavigate }) {
           </button>
         </div>
       </section>
-
     </div>
   );
 }
diff --git a/client/src/pages/Analytics.jsx b/client/src/pages/Analytics.jsx
index 781813dd..c4a4ee02 100644
--- a/client/src/pages/Analytics.jsx
+++ b/client/src/pages/Analytics.jsx
@@ -1,15 +1,20 @@
-import React, { useMemo } from 'react';
-import { useSpeechHistory } from '../hooks/useSpeechHistory';
-import { Download, BarChart2, MessageSquare, Clock, Globe } from 'lucide-react';
+import React, { useMemo } from "react";
+import { useSpeechHistory } from "../hooks/useSpeechHistory";
+import { Download, BarChart2, MessageSquare, Clock, Globe } from "lucide-react";
 
 export default function Analytics() {
   const { analyticsHistory, sessionTranscript } = useSpeechHistory();
 
   // Metrics Calculations
   const metrics = useMemo(() => {
-    const totalWords = analyticsHistory.reduce((acc, msg) => acc + msg.text.split(/\s+/).length, 0);
-    const avgMessageLength = analyticsHistory.length ? Math.round(totalWords / analyticsHistory.length) : 0;
-    
+    const totalWords = analyticsHistory.reduce(
+      (acc, msg) => acc + msg.text.split(/\s+/).length,
+      0,
+    );
+    const avgMessageLength = analyticsHistory.length
+      ? Math.round(totalWords / analyticsHistory.length)
+      : 0;
+
     // Session Duration
     let sessionDuration = "0m";
     if (sessionTranscript.length >= 2) {
@@ -27,7 +32,7 @@ export default function Analytics() {
   // Most Used Phrases
   const mostUsedPhrases = useMemo(() => {
     const counts = {};
-    analyticsHistory.forEach(msg => {
+    analyticsHistory.forEach((msg) => {
       const text = msg.text.toLowerCase().trim();
       counts[text] = (counts[text] || 0) + 1;
     });
@@ -39,15 +44,15 @@ export default function Analytics() {
   // Language Distribution
   const languageData = useMemo(() => {
     const counts = {};
-    analyticsHistory.forEach(msg => {
+    analyticsHistory.forEach((msg) => {
       const lang = msg.language || "Unknown";
       counts[lang] = (counts[lang] || 0) + 1;
     });
     const total = analyticsHistory.length || 1; // avoid div by 0
     let currentAngle = 0;
-    
+
     const colors = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
-    
+
     const slices = Object.entries(counts).map(([lang, count], index) => {
       const percentage = count / total;
       const slice = {
@@ -55,8 +60,8 @@ export default function Analytics() {
         count,
         percentage: (percentage * 100).toFixed(1),
         startAngle: currentAngle,
-        endAngle: currentAngle + (percentage * 360),
-        color: colors[index % colors.length]
+        endAngle: currentAngle + percentage * 360,
+        color: colors[index % colors.length],
       };
       currentAngle += percentage * 360;
       return slice;
@@ -74,38 +79,41 @@ export default function Analytics() {
       d.setHours(0, 0, 0, 0);
       return {
         date: d,
-        label: d.toLocaleDateString(undefined, { weekday: 'short' }),
-        count: 0
+        label: d.toLocaleDateString(undefined, { weekday: "short" }),
+        count: 0,
       };
     });
 
-    analyticsHistory.forEach(msg => {
+    analyticsHistory.forEach((msg) => {
       const msgDate = new Date(msg.timestamp);
       msgDate.setHours(0, 0, 0, 0);
-      
-      const dayData = data.find(d => d.date.getTime() === msgDate.getTime());
+
+      const dayData = data.find((d) => d.date.getTime() === msgDate.getTime());
       if (dayData) {
         dayData.count++;
       }
     });
 
-    const maxCount = Math.max(...data.map(d => d.count), 1); // Avoid div by 0
+    const maxCount = Math.max(...data.map((d) => d.count), 1); // Avoid div by 0
 
     return { data, maxCount };
   }, [analyticsHistory]);
 
   const exportCSV = () => {
     if (!analyticsHistory.length) return;
-    
+
     const headers = ["ID", "Timestamp", "Language", "Text"];
-    const rows = analyticsHistory.map(msg => [
+    const rows = analyticsHistory.map((msg) => [
       msg.id,
       new Date(msg.timestamp).toISOString(),
       msg.language || "Unknown",
-      `"${msg.text.replace(/"/g, '""')}"`
+      `"${msg.text.replace(/"/g, '""')}"`,
     ]);
 
-    const csvContent = [headers.join(","), ...rows.map(e => e.join(","))].join("\n");
+    const csvContent = [
+      headers.join(","),
+      ...rows.map((e) => e.join(",")),
+    ].join("\n");
     const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
     const link = document.createElement("a");
     const url = URL.createObjectURL(blob);
@@ -154,18 +162,26 @@ export default function Analytics() {
             <MessageSquare size={24} />
           </div>
           <div>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400">Total Words</p>
-            <p className="text-2xl font-bold text-ink dark:text-neutral-100">{metrics.totalWords}</p>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              Total Words
+            </p>
+            <p className="text-2xl font-bold text-ink dark:text-neutral-100">
+              {metrics.totalWords}
+            </p>
           </div>
         </div>
-        
+
         <div className="bg-white dark:bg-surface border border-neutral-200 dark:border-border rounded-xl p-5 shadow-sm flex items-center gap-4 transition-transform hover:-translate-y-1">
           <div className="p-3 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg text-emerald-600 dark:text-emerald-400">
             <Clock size={24} />
           </div>
           <div>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400">Avg. Length (words)</p>
-            <p className="text-2xl font-bold text-ink dark:text-neutral-100">{metrics.avgMessageLength}</p>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              Avg. Length (words)
+            </p>
+            <p className="text-2xl font-bold text-ink dark:text-neutral-100">
+              {metrics.avgMessageLength}
+            </p>
           </div>
         </div>
 
@@ -174,30 +190,38 @@ export default function Analytics() {
             <Globe size={24} />
           </div>
           <div>
-            <p className="text-sm text-neutral-500 dark:text-neutral-400">Session Duration</p>
-            <p className="text-2xl font-bold text-ink dark:text-neutral-100">{metrics.sessionDuration}</p>
+            <p className="text-sm text-neutral-500 dark:text-neutral-400">
+              Session Duration
+            </p>
+            <p className="text-2xl font-bold text-ink dark:text-neutral-100">
+              {metrics.sessionDuration}
+            </p>
           </div>
         </div>
       </div>
 
       {/* Charts Row */}
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        
         {/* Usage Bar Chart */}
         <div className="bg-white dark:bg-surface border border-neutral-200 dark:border-border rounded-xl p-5 shadow-sm flex flex-col">
-          <h3 className="text-lg font-semibold text-ink dark:text-neutral-100 mb-6">Messages (Last 7 Days)</h3>
-          
+          <h3 className="text-lg font-semibold text-ink dark:text-neutral-100 mb-6">
+            Messages (Last 7 Days)
+          </h3>
+
           <div className="flex-1 flex items-end gap-2 sm:gap-4 justify-between h-48 mt-auto pb-2">
             {usageData.data.map((item, i) => {
               const heightPct = (item.count / usageData.maxCount) * 100;
               return (
-                <div key={i} className="flex flex-col items-center gap-2 flex-1 group">
+                <div
+                  key={i}
+                  className="flex flex-col items-center gap-2 flex-1 group"
+                >
                   <div className="relative w-full flex justify-center h-full items-end">
-                    <div 
+                    <div
                       className="w-full max-w-[40px] bg-moss/20 dark:bg-glow/20 rounded-t-sm group-hover:bg-moss/40 dark:group-hover:bg-glow/40 transition-colors relative"
                       style={{ height: `${Math.max(heightPct, 2)}%` }} // min height 2%
                     >
-                      <div 
+                      <div
                         className="absolute bottom-0 w-full bg-moss dark:bg-glow rounded-t-sm transition-all"
                         style={{ height: `${heightPct}%` }}
                       ></div>
@@ -207,7 +231,9 @@ export default function Analytics() {
                       {item.count} messages
                     </div>
                   </div>
-                  <span className="text-xs text-neutral-500 dark:text-neutral-400">{item.label}</span>
+                  <span className="text-xs text-neutral-500 dark:text-neutral-400">
+                    {item.label}
+                  </span>
                 </div>
               );
             })}
@@ -216,21 +242,36 @@ export default function Analytics() {
 
         {/* Most Used Phrases Table */}
         <div className="bg-white dark:bg-surface border border-neutral-200 dark:border-border rounded-xl p-5 shadow-sm">
-          <h3 className="text-lg font-semibold text-ink dark:text-neutral-100 mb-4">Most Used Phrases</h3>
-          
+          <h3 className="text-lg font-semibold text-ink dark:text-neutral-100 mb-4">
+            Most Used Phrases
+          </h3>
+
           {mostUsedPhrases.length > 0 ? (
             <div className="overflow-x-auto">
               <table className="w-full text-sm text-left">
                 <thead className="text-xs text-neutral-500 uppercase bg-neutral-50 dark:bg-neutral-900/50 dark:text-neutral-400">
                   <tr>
-                    <th scope="col" className="px-4 py-3 rounded-tl-lg">Phrase</th>
-                    <th scope="col" className="px-4 py-3 rounded-tr-lg text-right">Frequency</th>
+                    <th scope="col" className="px-4 py-3 rounded-tl-lg">
+                      Phrase
+                    </th>
+                    <th
+                      scope="col"
+                      className="px-4 py-3 rounded-tr-lg text-right"
+                    >
+                      Frequency
+                    </th>
                   </tr>
                 </thead>
                 <tbody>
                   {mostUsedPhrases.map(([phrase, count], idx) => (
-                    <tr key={idx} className="border-b border-neutral-100 dark:border-neutral-800 last:border-0 hover:bg-neutral-50 dark:hover:bg-neutral-900/30 transition-colors">
-                      <td className="px-4 py-3 font-medium text-ink dark:text-neutral-200 max-w-[200px] truncate" title={phrase}>
+                    <tr
+                      key={idx}
+                      className="border-b border-neutral-100 dark:border-neutral-800 last:border-0 hover:bg-neutral-50 dark:hover:bg-neutral-900/30 transition-colors"
+                    >
+                      <td
+                        className="px-4 py-3 font-medium text-ink dark:text-neutral-200 max-w-[200px] truncate"
+                        title={phrase}
+                      >
                         {phrase}
                       </td>
                       <td className="px-4 py-3 text-right text-moss dark:text-glow font-bold">
@@ -251,31 +292,45 @@ export default function Analytics() {
 
       {/* Language Distribution */}
       <div className="bg-white dark:bg-surface border border-neutral-200 dark:border-border rounded-xl p-5 shadow-sm">
-        <h3 className="text-lg font-semibold text-ink dark:text-neutral-100 mb-6">Language Distribution</h3>
-        
+        <h3 className="text-lg font-semibold text-ink dark:text-neutral-100 mb-6">
+          Language Distribution
+        </h3>
+
         {languageData.length > 0 && analyticsHistory.length > 0 ? (
           <div className="flex flex-col sm:flex-row items-center justify-center gap-8 lg:gap-16">
             {/* Pie Chart SVG */}
             <div className="relative w-48 h-48 sm:w-64 sm:h-64 flex-shrink-0">
-              <svg viewBox="-1 -1 2 2" className="w-full h-full transform -rotate-90">
+              <svg
+                viewBox="-1 -1 2 2"
+                className="w-full h-full transform -rotate-90"
+              >
                 {languageData.map((slice, index) => {
                   if (slice.percentage === "100.0") {
-                    return <circle key={index} cx="0" cy="0" r="1" fill={slice.color} />;
+                    return (
+                      <circle
+                        key={index}
+                        cx="0"
+                        cy="0"
+                        r="1"
+                        fill={slice.color}
+                      />
+                    );
                   }
-                  
+
                   const startPercent = slice.startAngle / 360;
                   const endPercent = slice.endAngle / 360;
-                  
-                  const [startX, startY] = getCoordinatesForPercent(startPercent);
+
+                  const [startX, startY] =
+                    getCoordinatesForPercent(startPercent);
                   const [endX, endY] = getCoordinatesForPercent(endPercent);
-                  
+
                   const largeArcFlag = endPercent - startPercent > 0.5 ? 1 : 0;
-                  
+
                   const pathData = [
                     `M ${startX} ${startY}`, // Move
                     `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
                     `L 0 0`, // Line to center
-                  ].join(' ');
+                  ].join(" ");
 
                   return (
                     <path
@@ -284,20 +339,25 @@ export default function Analytics() {
                       fill={slice.color}
                       className="hover:opacity-80 transition-opacity cursor-pointer stroke-white dark:stroke-surface stroke-[0.02]"
                     >
-                      <title>{slice.lang}: {slice.percentage}%</title>
+                      <title>
+                        {slice.lang}: {slice.percentage}%
+                      </title>
                     </path>
                   );
                 })}
               </svg>
             </div>
-            
+
             {/* Legend */}
             <div className="flex flex-col gap-3 min-w-[150px]">
               {languageData.map((slice, index) => (
-                <div key={index} className="flex items-center justify-between gap-4">
+                <div
+                  key={index}
+                  className="flex items-center justify-between gap-4"
+                >
                   <div className="flex items-center gap-2">
-                    <span 
-                      className="w-3 h-3 rounded-full flex-shrink-0" 
+                    <span
+                      className="w-3 h-3 rounded-full flex-shrink-0"
                       style={{ backgroundColor: slice.color }}
                     ></span>
                     <span className="text-sm font-medium text-ink dark:text-neutral-200 truncate max-w-[120px]">
@@ -317,7 +377,6 @@ export default function Analytics() {
           </div>
         )}
       </div>
-
     </div>
   );
 }
diff --git a/client/src/pages/Call.jsx b/client/src/pages/Call.jsx
index bfa3bc25..f089a824 100644
--- a/client/src/pages/Call.jsx
+++ b/client/src/pages/Call.jsx
@@ -1,6 +1,13 @@
 // Renders the main call workspace for webcam preview, typed speech, output video, and virtual camera controls.
 import React from "react";
-import { Camera, CircleAlert, Sliders, ChevronDown, RotateCcw, ShieldCheck } from "lucide-react";
+import {
+  Camera,
+  CircleAlert,
+  Sliders,
+  ChevronDown,
+  RotateCcw,
+  ShieldCheck,
+} from "lucide-react";
 import TextToSpeech from "../components/TextToSpeech.jsx";
 import VideoPreview from "../components/VideoPreview.jsx";
 import VirtualCamera from "../components/VirtualCamera.jsx";
@@ -47,50 +54,53 @@ export default function Call() {
     window.addEventListener("storage", loadActiveProfile);
 
     return () => {
-      window.removeEventListener("voiceforge:profileChanged", loadActiveProfile);
+      window.removeEventListener(
+        "voiceforge:profileChanged",
+        loadActiveProfile,
+      );
       window.removeEventListener("storage", loadActiveProfile);
     };
   }, []);
 
   const [isCalibrationOpen, setIsCalibrationOpen] = React.useState(false);
   const [calibration, setCalibration] = React.useState(() => {
-  try {
-    const savedX     = localStorage.getItem("voiceforge:calibrationXOffset");
-    const savedY     = localStorage.getItem("voiceforge:calibrationYOffset");
-    const savedScale = localStorage.getItem("voiceforge:calibrationScale");
-
-    let x = savedX !== null ? parseInt(savedX, 10) : 0;
-    let y = savedY !== null ? parseInt(savedY, 10) : 0;
-    let scale = savedScale !== null ? parseFloat(savedScale) : 1.0;
-
-    // Sanitize and clamp values to default limits
-    if (isNaN(x)) {
-      x = 0;
-    } else {
-      x = Math.max(-400, Math.min(400, x));
-    }
+    try {
+      const savedX = localStorage.getItem("voiceforge:calibrationXOffset");
+      const savedY = localStorage.getItem("voiceforge:calibrationYOffset");
+      const savedScale = localStorage.getItem("voiceforge:calibrationScale");
+
+      let x = savedX !== null ? parseInt(savedX, 10) : 0;
+      let y = savedY !== null ? parseInt(savedY, 10) : 0;
+      let scale = savedScale !== null ? parseFloat(savedScale) : 1.0;
+
+      // Sanitize and clamp values to default limits
+      if (isNaN(x)) {
+        x = 0;
+      } else {
+        x = Math.max(-400, Math.min(400, x));
+      }
 
-    if (isNaN(y)) {
-      y = 0;
-    } else {
-      y = Math.max(-250, Math.min(150, y));
-    }
+      if (isNaN(y)) {
+        y = 0;
+      } else {
+        y = Math.max(-250, Math.min(150, y));
+      }
 
-    if (isNaN(scale)) {
-      scale = 1.0;
-    } else {
-      scale = Math.max(0.5, Math.min(2.5, scale));
-    }
+      if (isNaN(scale)) {
+        scale = 1.0;
+      } else {
+        scale = Math.max(0.5, Math.min(2.5, scale));
+      }
 
-    return {
-      xOffset: x,
-      yOffset: y,
-      scale
-    };
-  } catch {
-    return { xOffset: 0, yOffset: 0, scale: 1.0 };
-  }
-});
+      return {
+        xOffset: x,
+        yOffset: y,
+        scale,
+      };
+    } catch {
+      return { xOffset: 0, yOffset: 0, scale: 1.0 };
+    }
+  });
 
   const handleCalibrationChange = (key, value) => {
     let parsedValue = typeof value === "string" ? parseFloat(value) : value;
@@ -110,9 +120,11 @@ export default function Call() {
       try {
         localStorage.setItem(
           `voiceforge:calibration${key.charAt(0).toUpperCase() + key.slice(1)}`,
-          parsedValue.toString()
+          parsedValue.toString(),
         );
-      } catch { /* storage unavailable – continue without persisting */ }
+      } catch {
+        /* storage unavailable – continue without persisting */
+      }
       return updated;
     });
   };
@@ -125,58 +137,58 @@ export default function Call() {
     localStorage.setItem("voiceforge:calibrationScale", "1.0");
   };
 
- React.useEffect(() => {
-  let activeStream = null;
-  let isMounted = true;
-
-  async function openCamera() {
-    if (privacyMode) {
-      setWebcamStream(null);
-      if (localVideoRef.current) {
-        localVideoRef.current.srcObject = null;
-      }
-      return;
-    }
-
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        video: true,
-        audio: false,
-      });
-
-      // Prevent webcam resource leak if component unmounts
-      // before getUserMedia resolves.
-      if (!isMounted) {
-        stream.getTracks().forEach((track) => track.stop());
+  React.useEffect(() => {
+    let activeStream = null;
+    let isMounted = true;
+
+    async function openCamera() {
+      if (privacyMode) {
+        setWebcamStream(null);
+        if (localVideoRef.current) {
+          localVideoRef.current.srcObject = null;
+        }
         return;
       }
 
-      activeStream = stream;
-      setWebcamStream(stream);
-
-      if (localVideoRef.current) {
-        localVideoRef.current.srcObject = stream;
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: true,
+          audio: false,
+        });
+
+        // Prevent webcam resource leak if component unmounts
+        // before getUserMedia resolves.
+        if (!isMounted) {
+          stream.getTracks().forEach((track) => track.stop());
+          return;
+        }
+
+        activeStream = stream;
+        setWebcamStream(stream);
+
+        if (localVideoRef.current) {
+          localVideoRef.current.srcObject = stream;
+        }
+
+        setCameraError("");
+      } catch (webcamError) {
+        if (!isMounted) return;
+
+        setCameraError(webcamError?.message || String(webcamError));
+        showToast("Camera access failed", "error");
       }
-
-      setCameraError("");
-    } catch (webcamError) {
-      if (!isMounted) return;
-
-      setCameraError(webcamError?.message || String(webcamError));
-      showToast("Camera access failed", "error");
     }
-  }
 
-  openCamera();
+    openCamera();
 
-  return () => {
-    isMounted = false;
+    return () => {
+      isMounted = false;
 
-    if (activeStream) {
-      activeStream.getTracks().forEach((track) => track.stop());
-    }
-  };
-}, [showToast, privacyMode]);
+      if (activeStream) {
+        activeStream.getTracks().forEach((track) => track.stop());
+      }
+    };
+  }, [showToast, privacyMode]);
 
   async function handleSpeak(text, voice_settings_override) {
     if (!activeProfile?.voice_id) return;
@@ -202,10 +214,10 @@ export default function Call() {
     <div className="space-y-5">
       {/* ── Header card ───────────────────────────────────────────────────── */}
       {engine === "browser" && (
-      <div className="rounded-md border border-yellow-300 bg-yellow-50 p-3 text-sm font-medium text-yellow-800">
-        Using Browser Voice (Offline Mode)
-      </div>
-    )}
+        <div className="rounded-md border border-yellow-300 bg-yellow-50 p-3 text-sm font-medium text-yellow-800">
+          Using Browser Voice (Offline Mode)
+        </div>
+      )}
       <section className="rounded-lg border border-ink/10 bg-white p-4 shadow-soft dark:border-border dark:bg-surface dark:shadow-soft-dk">
         <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
           <div>
@@ -230,7 +242,10 @@ export default function Call() {
       {dbError && (
         <div className="flex items-center gap-2 rounded-md border border-coral/40 bg-coral/10 p-4 text-sm font-semibold text-ink">
           <CircleAlert size={18} aria-hidden="true" />
-          <span>Database Error: {dbError}. Please ensure IndexedDB is enabled and not blocked.</span>
+          <span>
+            Database Error: {dbError}. Please ensure IndexedDB is enabled and
+            not blocked.
+          </span>
         </div>
       )}
 
@@ -269,16 +284,23 @@ export default function Call() {
         {isCalibrationOpen && (
           <div className="mt-4 border-t border-ink/10 pt-4">
             <p className="text-sm text-ink/65 mb-4">
-              Calibrate the audio-driven mouth position and size overlay to align with your camera.
+              Calibrate the audio-driven mouth position and size overlay to
+              align with your camera.
             </p>
             <div className="grid gap-4 sm:gap-6 sm:grid-cols-3">
               <div>
                 <div className="flex justify-between items-center mb-2">
-                  <label htmlFor="calibration-x-slider" className="text-sm font-bold text-ink">
+                  <label
+                    htmlFor="calibration-x-slider"
+                    className="text-sm font-bold text-ink"
+                  >
                     Horizontal Position (X Offset)
                   </label>
                   <span className="text-xs font-semibold px-2 py-0.5 rounded bg-cloud border border-ink/10 text-moss">
-                    {calibration.xOffset > 0 ? `+${calibration.xOffset}` : calibration.xOffset}px
+                    {calibration.xOffset > 0
+                      ? `+${calibration.xOffset}`
+                      : calibration.xOffset}
+                    px
                   </span>
                 </div>
                 <input
@@ -288,17 +310,28 @@ export default function Call() {
                   max="400"
                   step="1"
                   value={calibration.xOffset}
-                  onChange={(e) => handleCalibrationChange("xOffset", parseInt(e.target.value, 10))}
+                  onChange={(e) =>
+                    handleCalibrationChange(
+                      "xOffset",
+                      parseInt(e.target.value, 10),
+                    )
+                  }
                   className="w-full h-2 rounded-lg bg-cloud border border-ink/10 appearance-none cursor-pointer accent-moss focus:outline-none"
                 />
               </div>
               <div>
                 <div className="flex justify-between items-center mb-2">
-                  <label htmlFor="calibration-y-slider" className="text-sm font-bold text-ink">
+                  <label
+                    htmlFor="calibration-y-slider"
+                    className="text-sm font-bold text-ink"
+                  >
                     Vertical Position (Y Offset)
                   </label>
                   <span className="text-xs font-semibold px-2 py-0.5 rounded bg-cloud border border-ink/10 text-moss">
-                    {calibration.yOffset > 0 ? `+${calibration.yOffset}` : calibration.yOffset}px
+                    {calibration.yOffset > 0
+                      ? `+${calibration.yOffset}`
+                      : calibration.yOffset}
+                    px
                   </span>
                 </div>
                 <input
@@ -308,13 +341,21 @@ export default function Call() {
                   max="150"
                   step="1"
                   value={calibration.yOffset}
-                  onChange={(e) => handleCalibrationChange("yOffset", parseInt(e.target.value, 10))}
+                  onChange={(e) =>
+                    handleCalibrationChange(
+                      "yOffset",
+                      parseInt(e.target.value, 10),
+                    )
+                  }
                   className="w-full h-2 rounded-lg bg-cloud border border-ink/10 appearance-none cursor-pointer accent-moss focus:outline-none"
                 />
               </div>
               <div>
                 <div className="flex justify-between items-center mb-2">
-                  <label htmlFor="calibration-scale-slider" className="text-sm font-bold text-ink">
+                  <label
+                    htmlFor="calibration-scale-slider"
+                    className="text-sm font-bold text-ink"
+                  >
                     Mouth Size (Scale)
                   </label>
                   <span className="text-xs font-semibold px-2 py-0.5 rounded bg-cloud border border-ink/10 text-moss">
@@ -328,7 +369,9 @@ export default function Call() {
                   max="2.5"
                   step="0.1"
                   value={calibration.scale}
-                  onChange={(e) => handleCalibrationChange("scale", parseFloat(e.target.value))}
+                  onChange={(e) =>
+                    handleCalibrationChange("scale", parseFloat(e.target.value))
+                  }
                   className="w-full h-2 rounded-lg bg-cloud border border-ink/10 appearance-none cursor-pointer accent-moss focus:outline-none"
                 />
               </div>
@@ -364,7 +407,10 @@ export default function Call() {
         <div className="flex items-center justify-between mb-4">
           <div>
             <h2 className="text-base font-bold">Subtitles Overlay Settings</h2>
-            <p className="text-xs text-neutral-400 dark:text-neutral-500">Overlay spoken words on the webcam video preview sent to the virtual camera.</p>
+            <p className="text-xs text-neutral-400 dark:text-neutral-500">
+              Overlay spoken words on the webcam video preview sent to the
+              virtual camera.
+            </p>
           </div>
           <label className="relative inline-flex items-center cursor-pointer">
             <input
@@ -372,7 +418,10 @@ export default function Call() {
               checked={subtitlesEnabled}
               onChange={(e) => {
                 setSubtitlesEnabled(e.target.checked);
-                localStorage.setItem("voiceforge:subtitlesEnabled", e.target.checked.toString());
+                localStorage.setItem(
+                  "voiceforge:subtitlesEnabled",
+                  e.target.checked.toString(),
+                );
               }}
               className="sr-only peer"
             />
@@ -382,11 +431,14 @@ export default function Call() {
             </span>
           </label>
         </div>
-        
+
         {subtitlesEnabled && (
           <div className="grid gap-4 sm:grid-cols-2 pt-3 border-t border-neutral-200 dark:border-neutral-700">
             <div>
-              <label htmlFor="sub-font-size" className="block text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-2">
+              <label
+                htmlFor="sub-font-size"
+                className="block text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-2"
+              >
                 Font Size
               </label>
               <select
@@ -394,7 +446,10 @@ export default function Call() {
                 value={subtitleFontSize}
                 onChange={(e) => {
                   setSubtitleFontSize(e.target.value);
-                  localStorage.setItem("voiceforge:subtitleFontSize", e.target.value);
+                  localStorage.setItem(
+                    "voiceforge:subtitleFontSize",
+                    e.target.value,
+                  );
                 }}
                 className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-coral/45 dark:border-border dark:bg-black dark:text-neutral-200"
               >
@@ -403,9 +458,12 @@ export default function Call() {
                 <option value="large">Large (32px)</option>
               </select>
             </div>
-            
+
             <div>
-              <label htmlFor="sub-bg-opacity" className="block text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-2">
+              <label
+                htmlFor="sub-bg-opacity"
+                className="block text-xs font-semibold text-neutral-500 uppercase tracking-wider mb-2"
+              >
                 Background Box Opacity
               </label>
               <select
@@ -413,7 +471,10 @@ export default function Call() {
                 value={subtitleBgOpacity}
                 onChange={(e) => {
                   setSubtitleBgOpacity(e.target.value);
-                  localStorage.setItem("voiceforge:subtitleBgOpacity", e.target.value);
+                  localStorage.setItem(
+                    "voiceforge:subtitleBgOpacity",
+                    e.target.value,
+                  );
                 }}
                 className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-coral/45 dark:border-border dark:bg-black dark:text-neutral-200"
               >
diff --git a/client/src/pages/Contributors.jsx b/client/src/pages/Contributors.jsx
index 0289909b..21b91d2b 100644
--- a/client/src/pages/Contributors.jsx
+++ b/client/src/pages/Contributors.jsx
@@ -14,7 +14,7 @@ export default function Contributors() {
       try {
         const res = await fetch(
           `https://api.github.com/repos/${REPO}/contributors?per_page=100`,
-          { signal: controller.signal }
+          { signal: controller.signal },
         );
         if (res.status === 403) {
           throw new Error("rate_limited");
@@ -46,14 +46,21 @@ export default function Contributors() {
       </section>
 
       {status === "loading" && (
-        <p role="status" aria-live="polite" className="text-center text-sm text-neutral-500">
+        <p
+          role="status"
+          aria-live="polite"
+          className="text-center text-sm text-neutral-500"
+        >
           Loading contributors…
         </p>
       )}
 
       {status === "rate_limited" && (
         <div className="flex flex-col items-center gap-3 text-center">
-          <p role="alert" className="text-sm text-yellow-600 dark:text-yellow-400">
+          <p
+            role="alert"
+            className="text-sm text-yellow-600 dark:text-yellow-400"
+          >
             GitHub API rate limit reached. Please wait a moment and try again.
           </p>
           <button
@@ -98,7 +105,8 @@ export default function Contributors() {
                 {contributor.login}
               </span>
               <span className="text-xs text-neutral-500">
-                {contributor.contributions} commit{contributor.contributions !== 1 ? "s" : ""}
+                {contributor.contributions} commit
+                {contributor.contributions !== 1 ? "s" : ""}
               </span>
             </a>
           ))}
@@ -106,4 +114,4 @@ export default function Contributors() {
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/pages/Onboarding.jsx b/client/src/pages/Onboarding.jsx
index ffa06995..f6bd92c5 100644
--- a/client/src/pages/Onboarding.jsx
+++ b/client/src/pages/Onboarding.jsx
@@ -1,6 +1,12 @@
 // Renders the first-time setup flow for recording and cloning a reference voice.
 import React from "react";
-import { CheckCircle2, Loader2, CircleAlert, ArrowRight, RotateCcw } from "lucide-react";
+import {
+  CheckCircle2,
+  Loader2,
+  CircleAlert,
+  ArrowRight,
+  RotateCcw,
+} from "lucide-react";
 import VoiceRecorder from "../components/VoiceRecorder.jsx";
 import useVoiceClone from "../hooks/useVoiceClone.js";
 import { useToast, ToastContainer } from "../components/useToast.jsx";
@@ -201,7 +207,10 @@ export default function Onboarding({ onReady }) {
   const { cloneVoice, status, error: apiError } = useVoiceClone();
   const { toasts, showToast } = useToast();
   const isCloning = status === "cloning";
-  const [serverStatus, setServerStatus] = React.useState({ isMock: false, space: "" });
+  const [serverStatus, setServerStatus] = React.useState({
+    isMock: false,
+    space: "",
+  });
 
   React.useEffect(() => {
     fetch("/api/voice/status")
@@ -214,21 +223,20 @@ export default function Onboarding({ onReady }) {
   const hasKey = React.useMemo(() => {
     return serverStatus.isMock || Boolean(serverStatus.space);
   }, [serverStatus]);
-  
-  const nameError = React.useMemo(() => {
-  const trimmed = voiceName.trim();
-  if (trimmed.length === 0) {
-    return "Voice name is required.";
-  }
-  if (trimmed.length < MIN_NAME_LENGTH) {
-    return `Voice name must be at least ${MIN_NAME_LENGTH} characters.`;
-  }
-  if (trimmed.length > MAX_NAME_LENGTH) {
-    return `Voice name must be ${MAX_NAME_LENGTH} characters or fewer.`;
-  }
-  return "";
-}, [voiceName]);
 
+  const nameError = React.useMemo(() => {
+    const trimmed = voiceName.trim();
+    if (trimmed.length === 0) {
+      return "Voice name is required.";
+    }
+    if (trimmed.length < MIN_NAME_LENGTH) {
+      return `Voice name must be at least ${MIN_NAME_LENGTH} characters.`;
+    }
+    if (trimmed.length > MAX_NAME_LENGTH) {
+      return `Voice name must be ${MAX_NAME_LENGTH} characters or fewer.`;
+    }
+    return "";
+  }, [voiceName]);
 
   // Track the highest milestone step the user is allowed to navigate to
   const [maxUnlockedStep, setMaxUnlockedStep] = React.useState(() => {
@@ -240,10 +248,10 @@ export default function Onboarding({ onReady }) {
   const [activeStep, setActiveStep] = React.useState(() => {
     const savedStep = localStorage.getItem("voiceforge:onboardingStep");
     const savedMax = localStorage.getItem("voiceforge:maxUnlockedStep");
-    
+
     const parsedStep = savedStep ? parseInt(savedStep, 10) : 1;
     const parsedMax = savedMax ? parseInt(savedMax, 10) : 1;
-    
+
     // Clamp initialization target securely underneath the highest unlocked milestone
     return Math.min(parsedStep, parsedMax);
   });
@@ -252,19 +260,22 @@ export default function Onboarding({ onReady }) {
   const stepContent = {
     1: {
       title: "Create your voice profile",
-      description: "Record a short, consent-based reference clip. VoiceForge sends it via the Chatterbox engine on Hugging Face through your local server and saves the returned voice ID in this browser.",
-      labels: ["Record", "Clone", "Next"]
+      description:
+        "Record a short, consent-based reference clip. VoiceForge sends it via the Chatterbox engine on Hugging Face through your local server and saves the returned voice ID in this browser.",
+      labels: ["Record", "Clone", "Next"],
     },
     2: {
       title: "Configure voice settings",
-      description: "Fine-tune your workspace properties, adjust stability and clarity parameters, and establish your initial system instructions.",
-      labels: ["Stability", "Clarity", "Next"]
+      description:
+        "Fine-tune your workspace properties, adjust stability and clarity parameters, and establish your initial system instructions.",
+      labels: ["Stability", "Clarity", "Next"],
     },
     3: {
       title: "Finalize setup & test",
-      description: "Review your configurations, connect your local server pipeline, and prepare to place your very first AI companion voice call.",
-      labels: ["Review", "Pipeline", "Launch"]
-    }
+      description:
+        "Review your configurations, connect your local server pipeline, and prepare to place your very first AI companion voice call.",
+      labels: ["Review", "Pipeline", "Launch"],
+    },
   };
 
   // Persist values to localStorage on step changes
@@ -273,7 +284,10 @@ export default function Onboarding({ onReady }) {
   }, [activeStep]);
 
   React.useEffect(() => {
-    localStorage.setItem("voiceforge:maxUnlockedStep", maxUnlockedStep.toString());
+    localStorage.setItem(
+      "voiceforge:maxUnlockedStep",
+      maxUnlockedStep.toString(),
+    );
   }, [maxUnlockedStep]);
 
   async function handleClone() {
@@ -298,15 +312,19 @@ export default function Onboarding({ onReady }) {
               {stepContent[activeStep].description}
             </p>
           </div>
-          
+
           {/* STEP PROGRESS INDICATORS COMPONENT GRID */}
-          <div className="grid w-full grid-cols-3 gap-2 sm:max-w-xs lg:max-w-sm" aria-label="Onboarding progress indicators">
+          <div
+            className="grid w-full grid-cols-3 gap-2 sm:max-w-xs lg:max-w-sm"
+            aria-label="Onboarding progress indicators"
+          >
             {stepContent[activeStep].labels.map((label, index) => {
               let isBarFilled = false;
               if (activeStep === 1) {
                 if (index === 0) isBarFilled = true;
                 if (index === 1 && recording) isBarFilled = true;
-                if (index === 2 && (successProfile || maxUnlockedStep >= 2)) isBarFilled = true;
+                if (index === 2 && (successProfile || maxUnlockedStep >= 2))
+                  isBarFilled = true;
               } else if (activeStep === 2) {
                 if (index === 0) isBarFilled = true;
                 if (index === 1) isBarFilled = true;
@@ -327,24 +345,34 @@ export default function Onboarding({ onReady }) {
         </div>
       </section>
 
-
       {/* STEP 1: PROFILE MANAGEMENT CONTROLS */}
       {activeStep === 1 && (
         <>
           {!hasKey && (
             <div className="flex items-center gap-2 rounded-md border border-coral/40 bg-coral/10 p-4 text-sm font-semibold text-ink dark:text-neutral-100">
-              <CircleAlert size={18} aria-hidden="true" className="shrink-0 text-coral" />
+              <CircleAlert
+                size={18}
+                aria-hidden="true"
+                className="shrink-0 text-coral"
+              />
               <span>
-              No voice engine available. Ensure your local server is running on port 3001. Check your{" "}
-                <strong>.env</strong> file and the README.
+                No voice engine available. Ensure your local server is running
+                on port 3001. Check your <strong>.env</strong> file and the
+                README.
               </span>
             </div>
           )}
 
-          <VoiceRecorder onRecordingReady={handleRecordingReady} disabled={isCloning} />
+          <VoiceRecorder
+            onRecordingReady={handleRecordingReady}
+            disabled={isCloning}
+          />
 
           <section className="rounded-lg border border-ink/10 bg-white p-5 shadow-soft dark:border-border dark:bg-surface dark:shadow-soft-dk">
-            <label className="block text-sm font-bold text-ink dark:text-neutral-100" htmlFor="voice-name">
+            <label
+              className="block text-sm font-bold text-ink dark:text-neutral-100"
+              htmlFor="voice-name"
+            >
               Voice profile name
             </label>
             <div className="mt-2 flex flex-col gap-3 sm:flex-row">
@@ -368,7 +396,13 @@ export default function Onboarding({ onReady }) {
               <button
                 type="button"
                 onClick={handleClone}
-                disabled={isCloning || !hasKey || !recording || recordingDuration < 10 || Boolean(nameError)}
+                disabled={
+                  isCloning ||
+                  !hasKey ||
+                  !recording ||
+                  recordingDuration < 10 ||
+                  Boolean(nameError)
+                }
                 className="inline-flex min-h-11 items-center justify-center gap-2 rounded-md bg-coral px-5 font-bold text-white transition hover:bg-coral/90 disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {isCloning && <Loader2 className="animate-spin" size={18} />}
@@ -382,7 +416,10 @@ export default function Onboarding({ onReady }) {
               className="mt-1.5 flex items-center justify-between gap-2 text-xs"
             >
               {nameError ? (
-                <p className="flex items-center gap-1 font-semibold text-coral" role="alert">
+                <p
+                  className="flex items-center gap-1 font-semibold text-coral"
+                  role="alert"
+                >
                   <CircleAlert size={13} aria-hidden="true" />
                   {nameError}
                 </p>
@@ -405,16 +442,22 @@ export default function Onboarding({ onReady }) {
 
             {/* Render actual API errors transparently instead of swallowing failures */}
             {apiError && (
-              <p className="mt-3 text-sm font-semibold text-coral flex items-center gap-1.5" role="alert">
+              <p
+                className="mt-3 text-sm font-semibold text-coral flex items-center gap-1.5"
+                role="alert"
+              >
                 <CircleAlert size={16} />
                 {apiError}
               </p>
             )}
-            
+
             {(successProfile || maxUnlockedStep >= 2) && (
               <div className="mt-4 flex flex-col gap-3 rounded-md bg-mint p-4 sm:flex-row sm:items-center sm:justify-between dark:bg-glow/15">
                 <p className="inline-flex items-center gap-2 font-bold text-ink dark:text-neutral-50">
-                  <CheckCircle2 size={20} className="text-moss dark:text-glow" />
+                  <CheckCircle2
+                    size={20}
+                    className="text-moss dark:text-glow"
+                  />
                   Voice profile setup verified!
                 </p>
                 <button
@@ -435,23 +478,39 @@ export default function Onboarding({ onReady }) {
       {activeStep === 2 && (
         <Step2VoiceSettings
           onBack={() => setActiveStep(1)}
-          onContinue={() => { setMaxUnlockedStep(3); setActiveStep(3); }}
+          onContinue={() => {
+            setMaxUnlockedStep(3);
+            setActiveStep(3);
+          }}
         />
       )}
 
       {/* STEP 3: PIPELINE DEPLOYMENT CHECKLIST */}
       {activeStep === 3 && (
         <section className="rounded-lg border border-ink/10 bg-white p-6 shadow-soft dark:border-border dark:bg-surface">
-          <h3 className="text-xl font-bold text-ink dark:text-neutral-100">Ready for Activation</h3>
-          <p className="mt-2 text-sm text-neutral-500">Your custom voice template setup is complete.</p>
+          <h3 className="text-xl font-bold text-ink dark:text-neutral-100">
+            Ready for Activation
+          </h3>
+          <p className="mt-2 text-sm text-neutral-500">
+            Your custom voice template setup is complete.
+          </p>
           <div className="my-6 p-12 border-2 border-dashed border-ink/10 rounded-md text-center text-neutral-400">
-            Pipeline deployment status diagnostics verify operational conditions are ideal.
+            Pipeline deployment status diagnostics verify operational conditions
+            are ideal.
           </div>
           <div className="flex justify-between items-center border-t pt-4">
-            <button type="button" onClick={() => setActiveStep(2)} className="text-sm font-bold text-ink dark:text-neutral-300 hover:underline">
+            <button
+              type="button"
+              onClick={() => setActiveStep(2)}
+              className="text-sm font-bold text-ink dark:text-neutral-300 hover:underline"
+            >
               ← Back to Settings
             </button>
-            <button type="button" onClick={onReady} className="rounded-md bg-black px-5 py-2 font-bold text-white dark:bg-glow dark:text-black">
+            <button
+              type="button"
+              onClick={onReady}
+              className="rounded-md bg-black px-5 py-2 font-bold text-white dark:bg-glow dark:text-black"
+            >
               Complete Setup & Go to Call
             </button>
           </div>
diff --git a/client/src/pages/PrivacyPolicy.jsx b/client/src/pages/PrivacyPolicy.jsx
index 7a705e1f..558dc054 100644
--- a/client/src/pages/PrivacyPolicy.jsx
+++ b/client/src/pages/PrivacyPolicy.jsx
@@ -1,117 +1,121 @@
 import { useEffect } from "react";
 export default function PrivacyPolicy({ onBackHome }) {
-
   const lastUpdated = "June 13, 2026"; // Update this when the policy text changes
 
   useEffect(() => {
     window.scrollTo({
-    top: 0,
-    left: 0,
-    behavior: "instant",
+      top: 0,
+      left: 0,
+      behavior: "instant",
     });
   }, []);
 
   return (
     <div className="min-h-screen bg-background text-foreground">
-        <div className="max-w-4xl mx-auto px-6 py-16">
-
-      <section className="mb-10 rounded-xl border border-border bg-card p-6">
-        <div className="border-b border-border pb-6 mb-10"></div>
-        <h1 className="text-4xl font-bold mb-2">Privacy Policy</h1>
-        <p className="text-sm text-muted-foreground">Last updated: {lastUpdated}</p>
-        <div className="mt-6 border-b border-border" />
-      </section>
+      <div className="max-w-4xl mx-auto px-6 py-16">
+        <section className="mb-10 rounded-xl border border-border bg-card p-6">
+          <div className="border-b border-border pb-6 mb-10"></div>
+          <h1 className="text-4xl font-bold mb-2">Privacy Policy</h1>
+          <p className="text-sm text-muted-foreground">
+            Last updated: {lastUpdated}
+          </p>
+          <div className="mt-6 border-b border-border" />
+        </section>
 
-      <section className="mb-10">
-        <h2 className="text-2xl font-semibold mb-3">Introduction</h2>
-        <p className="text-muted-foreground leading-relaxed">
-          VoiceForge is committed to protecting the privacy of our users. This
-          Privacy Policy explains how we collect, use, and disclose information
-          when you use VoiceForge's web application.
-        </p>
-      </section>
+        <section className="mb-10">
+          <h2 className="text-2xl font-semibold mb-3">Introduction</h2>
+          <p className="text-muted-foreground leading-relaxed">
+            VoiceForge is committed to protecting the privacy of our users. This
+            Privacy Policy explains how we collect, use, and disclose
+            information when you use VoiceForge's web application.
+          </p>
+        </section>
 
-      <section className="mb-10">
-        <h2 className="text-2xl font-semibold mb-3">Information We Collect</h2>
-        <p className="text-muted-foreground leading-relaxed">
-          We may collect information that you provide directly (for example,
-          voice samples you choose to record) and technical information
-          generated by your device or browser (such as browser type and
-          settings). Whenever possible, we keep processing local to your
-          browser.
-        </p>
-      </section>
+        <section className="mb-10">
+          <h2 className="text-2xl font-semibold mb-3">
+            Information We Collect
+          </h2>
+          <p className="text-muted-foreground leading-relaxed">
+            We may collect information that you provide directly (for example,
+            voice samples you choose to record) and technical information
+            generated by your device or browser (such as browser type and
+            settings). Whenever possible, we keep processing local to your
+            browser.
+          </p>
+        </section>
 
-      <section className="mb-10">
-        <h2 className="text-2xl font-semibold mb-3">How We Use Information</h2>
-        <p className="text-muted-foreground leading-relaxed">
-          We use information to provide, operate, and improve VoiceForge, to
-          enable features (such as voice cloning and text-to-speech), and to
-          communicate with you. We do not sell personal information.
-        </p>
-      </section>
+        <section className="mb-10">
+          <h2 className="text-2xl font-semibold mb-3">
+            How We Use Information
+          </h2>
+          <p className="text-muted-foreground leading-relaxed">
+            We use information to provide, operate, and improve VoiceForge, to
+            enable features (such as voice cloning and text-to-speech), and to
+            communicate with you. We do not sell personal information.
+          </p>
+        </section>
 
-      <section className="mb-10">
-        <h2 className="text-2xl font-semibold mb-3">Audio & Voice Data</h2>
-        <p className="text-muted-foreground leading-relaxed">
-          Voice samples you record may be sent to third-party speech services
-          (Hugging Face / Chatterbox Multilingual TTS) only when you explicitly choose to clone a
-          voice. Where possible, VoiceForge uses local-first processing and
-          stores generated profiles in your browser's storage unless you
-          explicitly export or upload them.
-        </p>
-      </section>
+        <section className="mb-10">
+          <h2 className="text-2xl font-semibold mb-3">Audio & Voice Data</h2>
+          <p className="text-muted-foreground leading-relaxed">
+            Voice samples you record may be sent to third-party speech services
+            (Hugging Face / Chatterbox Multilingual TTS) only when you
+            explicitly choose to clone a voice. Where possible, VoiceForge uses
+            local-first processing and stores generated profiles in your
+            browser's storage unless you explicitly export or upload them.
+          </p>
+        </section>
 
-      <section className="mb-10">
-        <h2 className="text-2xl font-semibold mb-3">Cookies and Analytics</h2>
-        <p className="text-muted-foreground leading-relaxed">
-          We use cookies and similar technologies only as necessary for basic
-          functionality and to gather anonymous analytics. You can control
-          many of these settings through your browser.
-        </p>
-      </section>
+        <section className="mb-10">
+          <h2 className="text-2xl font-semibold mb-3">Cookies and Analytics</h2>
+          <p className="text-muted-foreground leading-relaxed">
+            We use cookies and similar technologies only as necessary for basic
+            functionality and to gather anonymous analytics. You can control
+            many of these settings through your browser.
+          </p>
+        </section>
 
-      <section className="mb-10">
-        <h2 className="text-2xl font-semibold mb-3">Third-Party Services</h2>
-        <p className="text-muted-foreground leading-relaxed">
-          VoiceForge may rely on third-party services to operate certain
-          features (for example, hosted speech models). These services have
-          their own privacy policies; we encourage you to review them.
-        </p>
-      </section>
+        <section className="mb-10">
+          <h2 className="text-2xl font-semibold mb-3">Third-Party Services</h2>
+          <p className="text-muted-foreground leading-relaxed">
+            VoiceForge may rely on third-party services to operate certain
+            features (for example, hosted speech models). These services have
+            their own privacy policies; we encourage you to review them.
+          </p>
+        </section>
 
-      <section className="mb-10">
-        <h2 className="text-2xl font-semibold mb-3">Data Retention</h2>
-        <p className="text-muted-foreground leading-relaxed">
-          We retain data only as long as necessary to provide the features you
-          use. Local-only profiles stored in your browser remain until you
-          clear them. If you request deletion of server-side data, we will
-          follow the applicable process described in our contact information.
-        </p>
-      </section>
+        <section className="mb-10">
+          <h2 className="text-2xl font-semibold mb-3">Data Retention</h2>
+          <p className="text-muted-foreground leading-relaxed">
+            We retain data only as long as necessary to provide the features you
+            use. Local-only profiles stored in your browser remain until you
+            clear them. If you request deletion of server-side data, we will
+            follow the applicable process described in our contact information.
+          </p>
+        </section>
 
-      <section className="mb-10">
-        <h2 className="text-2xl font-semibold mb-3">User Rights</h2>
-        <p className="text-muted-foreground leading-relaxed">
-          You may access, update, or delete data you have provided. If you
-          have concerns about how your data is handled, contact us using the
-          information below.
-        </p>
-      </section>
+        <section className="mb-10">
+          <h2 className="text-2xl font-semibold mb-3">User Rights</h2>
+          <p className="text-muted-foreground leading-relaxed">
+            You may access, update, or delete data you have provided. If you
+            have concerns about how your data is handled, contact us using the
+            information below.
+          </p>
+        </section>
 
-      <section className="mb-10">
-        <h2 className="text-2xl font-semibold mb-3">Contact Information</h2>
-        <p className="text-muted-foreground leading-relaxed">
-          For questions about this Privacy Policy or to request data access or
-          deletion, please open an issue at our GitHub repository or email the
-          maintainers via the project contact listed in the repository.
-        </p>
-      </section>
-      <button
-        onClick={() => {
-         onBackHome?.();
-        }}
-        className="
+        <section className="mb-10">
+          <h2 className="text-2xl font-semibold mb-3">Contact Information</h2>
+          <p className="text-muted-foreground leading-relaxed">
+            For questions about this Privacy Policy or to request data access or
+            deletion, please open an issue at our GitHub repository or email the
+            maintainers via the project contact listed in the repository.
+          </p>
+        </section>
+        <button
+          onClick={() => {
+            onBackHome?.();
+          }}
+          className="
         inline-flex items-center
         px-4 py-2
         mb-8
@@ -120,10 +124,10 @@ export default function PrivacyPolicy({ onBackHome }) {
         hover:bg-accent
         transition-colors
         "
-      >
-        ← Back to Home
-      </button>
-        </div>
+        >
+          ← Back to Home
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/client/src/pages/Settings.jsx b/client/src/pages/Settings.jsx
index a0d8c11d..42d519fe 100644
--- a/client/src/pages/Settings.jsx
+++ b/client/src/pages/Settings.jsx
@@ -37,13 +37,7 @@ function AudioPlayback({ blob }) {
   }, [blob]);
 
   if (!audioUrl) return null;
-  return (
-    <audio
-      src={audioUrl}
-      controls
-      className="mt-2 h-8 w-full max-w-xs"
-    />
-  );
+  return <audio src={audioUrl} controls className="mt-2 h-8 w-full max-w-xs" />;
 }
 
 export default function Settings() {
@@ -65,13 +59,11 @@ export default function Settings() {
     loadProfiles();
   }, []);
 
-
   const defaultSettings = DEFAULT_VOICE_SETTINGS;
   const [voiceSettings, setVoiceSettings] = React.useState(loadVoiceSettings);
   const [language, setLanguage] = React.useState(loadLanguage);
   const selectedLangObj = getLanguageByCode(language);
 
-
   function saveVoiceSettings(newSettings) {
     setVoiceSettings(newSettings);
     persistVoiceSettings(newSettings);
@@ -120,8 +112,12 @@ export default function Settings() {
         quick_replies: localStorage.getItem("vf_quick_replies"),
         voiceSettings: localStorage.getItem("voiceforge:voiceSettings"),
         language: localStorage.getItem(LANGUAGE_STORAGE_KEY),
-        calibrationXOffset: localStorage.getItem("voiceforge:calibrationXOffset"),
-        calibrationYOffset: localStorage.getItem("voiceforge:calibrationYOffset"),
+        calibrationXOffset: localStorage.getItem(
+          "voiceforge:calibrationXOffset",
+        ),
+        calibrationYOffset: localStorage.getItem(
+          "voiceforge:calibrationYOffset",
+        ),
         calibrationScale: localStorage.getItem("voiceforge:calibrationScale"),
       };
 
@@ -143,7 +139,7 @@ export default function Settings() {
             createdAt: p.createdAt,
             audioDataUrl: base64Audio,
           };
-        })
+        }),
       );
 
       const backup = {
@@ -153,7 +149,9 @@ export default function Settings() {
         profiles: profilesData,
       };
 
-      const blob = new Blob([JSON.stringify(backup, null, 2)], { type: "application/json" });
+      const blob = new Blob([JSON.stringify(backup, null, 2)], {
+        type: "application/json",
+      });
       const url = URL.createObjectURL(blob);
       const link = document.createElement("a");
       link.href = url;
@@ -181,7 +179,7 @@ export default function Settings() {
 
       // 2. Overwrite confirmation
       const confirmOverwrite = window.confirm(
-        "Importing this backup will overwrite your current settings, speech history, and voice profiles. Do you want to continue?"
+        "Importing this backup will overwrite your current settings, speech history, and voice profiles. Do you want to continue?",
       );
       if (!confirmOverwrite) {
         event.target.value = "";
@@ -191,7 +189,12 @@ export default function Settings() {
       const text = await file.text();
       const backup = JSON.parse(text);
 
-      if (!backup || backup.version !== 1 || !backup.storage || !Array.isArray(backup.profiles)) {
+      if (
+        !backup ||
+        backup.version !== 1 ||
+        !backup.storage ||
+        !Array.isArray(backup.profiles)
+      ) {
         throw new Error("Invalid backup file format.");
       }
 
@@ -203,11 +206,17 @@ export default function Settings() {
         let audioBlob = null;
         if (p.audioDataUrl) {
           try {
-            if (typeof p.audioDataUrl === "string" && p.audioDataUrl.startsWith("data:audio/")) {
+            if (
+              typeof p.audioDataUrl === "string" &&
+              p.audioDataUrl.startsWith("data:audio/")
+            ) {
               const res = await fetch(p.audioDataUrl);
               audioBlob = await res.blob();
             } else {
-              console.warn("Skipped invalid or non-audio DataURL in voice profile backup:", p.name);
+              console.warn(
+                "Skipped invalid or non-audio DataURL in voice profile backup:",
+                p.name,
+              );
             }
           } catch (e) {
             console.error("Failed to parse audio DataURL:", e);
@@ -276,9 +285,11 @@ export default function Settings() {
   }
 
   async function removeAllProfiles() {
-    const confirmOverwrite = window.confirm("Are you sure you want to delete all saved voice profiles? This action cannot be undone and will free up storage space.");
+    const confirmOverwrite = window.confirm(
+      "Are you sure you want to delete all saved voice profiles? This action cannot be undone and will free up storage space.",
+    );
     if (!confirmOverwrite) return;
-    
+
     try {
       const next = await clearAllVoiceProfiles();
       setProfiles(next);
@@ -302,37 +313,23 @@ export default function Settings() {
         </p>
       </section>
       {dbError && (
-      <div className="flex items-center gap-2 rounded-md border border-coral/40 bg-coral/10 p-4 text-sm font-semibold text-ink">
-        <CircleAlert size={18} aria-hidden="true" />
-        <span>Database error: {dbError}</span>
-      </div>
-    )}
+        <div className="flex items-center gap-2 rounded-md border border-coral/40 bg-coral/10 p-4 text-sm font-semibold text-ink">
+          <CircleAlert size={18} aria-hidden="true" />
+          <span>Database error: {dbError}</span>
+        </div>
+      )}
 
       <section className="rounded-lg border border-ink/10 bg-white p-5 shadow-soft dark:border-border dark:bg-surface dark:text-neutral-100 dark:shadow-soft-dk">
         <h2 className="text-xl font-bold">Voice Synthesis Settings</h2>
-        <p className="mt-1 text-sm text-ink/65 mb-5">Adjust how Chatterbox generates your cloned speech.</p>
+        <p className="mt-1 text-sm text-ink/65 mb-5">
+          Adjust how Chatterbox generates your cloned speech.
+        </p>
 
         <div className="mb-5">
-          <label htmlFor="voice-preset" className="mb-2 block text-sm font-bold text-ink dark:text-neutral-200">
-            Voice Preset
-          </label>
-          <select
-            id="voice-preset"
-            value={currentPresetKey}
-            onChange={(e) => handlePresetChange(e.target.value)}
-            className="w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-700 focus:outline-none focus:ring-2 focus:ring-moss/40 dark:border-border dark:bg-black dark:text-neutral-200 dark:focus:ring-glow/40"
+          <label
+            htmlFor="voice-preset"
+            className="mb-2 block text-sm font-bold text-ink dark:text-neutral-200"
           >
-            <option value="custom" disabled>Custom</option>
-            {Object.entries(VOICE_PRESETS).map(([key, preset]) => (
-              <option key={key} value={key}>
-                {preset.name}
-              </option>
-            ))}
-          </select>
-        </div>
-        
-        <div className="mb-5">
-          <label htmlFor="voice-preset" className="mb-2 block text-sm font-bold text-ink dark:text-neutral-200">
             Voice Preset
           </label>
           <select
@@ -341,7 +338,9 @@ export default function Settings() {
             onChange={(e) => handlePresetChange(e.target.value)}
             className="w-full rounded-lg border border-neutral-200 bg-white px-4 py-3 text-sm text-neutral-700 focus:outline-none focus:ring-2 focus:ring-moss/40 dark:border-border dark:bg-black dark:text-neutral-200 dark:focus:ring-glow/40"
           >
-            <option value="custom" disabled>Custom</option>
+            <option value="custom" disabled>
+              Custom
+            </option>
             {Object.entries(VOICE_PRESETS).map(([key, preset]) => (
               <option key={key} value={key}>
                 {preset.name}
@@ -352,137 +351,287 @@ export default function Settings() {
 
         <div className="space-y-4">
           <div>
-            <label className="flex justify-between text-sm font-bold" htmlFor="stability">
+            <label
+              className="flex justify-between text-sm font-bold"
+              htmlFor="stability"
+            >
               <span>Stability</span>
               <span className="text-ink/65">{voiceSettings.stability}</span>
             </label>
             <input
               id="stability"
               type="range"
-              min="0" max="1" step="0.01"
+              min="0"
+              max="1"
+              step="0.01"
               value={voiceSettings.stability}
-              onChange={(e) => saveVoiceSettings({ ...voiceSettings, stability: parseFloat(e.target.value) })}
+              onChange={(e) =>
+                saveVoiceSettings({
+                  ...voiceSettings,
+                  stability: parseFloat(e.target.value),
+                })
+              }
               className="w-full mt-2"
             />
-            <p className="text-xs text-ink/50 mt-1">Lower values are more expressive; higher values are more consistent.</p>
+            <p className="text-xs text-ink/50 mt-1">
+              Lower values are more expressive; higher values are more
+              consistent.
+            </p>
           </div>
-          
+
           <div>
-            <label className="flex justify-between text-sm font-bold" htmlFor="temperature">
+            <label
+              className="flex justify-between text-sm font-bold"
+              htmlFor="temperature"
+            >
               <span>Temperature</span>
               <span className="text-ink/65">{voiceSettings.temperature}</span>
             </label>
             <input
               id="temperature"
               type="range"
-              min="0" max="1" step="0.01"
+              min="0"
+              max="1"
+              step="0.01"
               value={voiceSettings.temperature}
-              onChange={(e) => saveVoiceSettings({ ...voiceSettings, temperature: parseFloat(e.target.value) })}
+              onChange={(e) =>
+                saveVoiceSettings({
+                  ...voiceSettings,
+                  temperature: parseFloat(e.target.value),
+                })
+              }
               className="w-full mt-2"
             />
-            <p className="text-xs text-ink/50 mt-1">Lower values are steadier; higher values allow more variation.</p>
+            <p className="text-xs text-ink/50 mt-1">
+              Lower values are steadier; higher values allow more variation.
+            </p>
           </div>
 
           <div>
-            <label className="flex justify-between text-sm font-bold" htmlFor="style">
+            <label
+              className="flex justify-between text-sm font-bold"
+              htmlFor="style"
+            >
               <span>Style Exaggeration</span>
               <span className="text-ink/65">{voiceSettings.style}</span>
             </label>
             <input
               id="style"
               type="range"
-              min="0" max="1" step="0.01"
+              min="0"
+              max="1"
+              step="0.01"
               value={voiceSettings.style}
-              onChange={(e) => saveVoiceSettings({ ...voiceSettings, style: parseFloat(e.target.value) })}
+              onChange={(e) =>
+                saveVoiceSettings({
+                  ...voiceSettings,
+                  style: parseFloat(e.target.value),
+                })
+              }
               className="w-full mt-2"
             />
-            <p className="text-xs text-ink/50 mt-1">Higher values exaggerate the style of the reference audio.</p>
+            <p className="text-xs text-ink/50 mt-1">
+              Higher values exaggerate the style of the reference audio.
+            </p>
           </div>
 
           <hr className="border-ink/10 dark:border-border my-4" />
-          <h3 className="text-sm font-bold uppercase tracking-wider text-moss dark:text-glow mb-3">Real-time Voice Modifiers (DSP)</h3>
+          <h3 className="text-sm font-bold uppercase tracking-wider text-moss dark:text-glow mb-3">
+            Real-time Voice Modifiers (DSP)
+          </h3>
 
           <div>
-            <label className="flex justify-between text-sm font-bold" htmlFor="dsp-pitch">
+            <label
+              className="flex justify-between text-sm font-bold"
+              htmlFor="dsp-pitch"
+            >
               <span>Voice Pitch</span>
               <span className="text-ink/65">{voiceSettings.dspPitch}x</span>
             </label>
             <input
               id="dsp-pitch"
               type="range"
-              min="0.5" max="1.5" step="0.05"
+              min="0.5"
+              max="1.5"
+              step="0.05"
               value={voiceSettings.dspPitch}
-              onChange={(e) => saveVoiceSettings({ ...voiceSettings, dspPitch: parseFloat(e.target.value) })}
-              className="w-full mt-2"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (["ArrowRight", "ArrowUp"].includes(e.key)) {
+                  e.preventDefault();
+                  const nextVal = Math.min(
+                    Number(voiceSettings.dspPitch) + 0.05,
+                    1.5,
+                  );
+                  saveVoiceSettings({
+                    ...voiceSettings,
+                    dspPitch: parseFloat(nextVal.toFixed(2)),
+                  });
+                } else if (["ArrowLeft", "ArrowDown"].includes(e.key)) {
+                  e.preventDefault();
+                  const nextVal = Math.max(
+                    Number(voiceSettings.dspPitch) - 0.05,
+                    0.5,
+                  );
+                  saveVoiceSettings({
+                    ...voiceSettings,
+                    dspPitch: parseFloat(nextVal.toFixed(2)),
+                  });
+                }
+              }}
+              onChange={(e) =>
+                saveVoiceSettings({
+                  ...voiceSettings,
+                  dspPitch: parseFloat(e.target.value),
+                })
+              }
+              className="w-full mt-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-coral rounded-full"
             />
-            <p className="text-xs text-ink/50 mt-1">Pitch transposition. Lower → deeper voice; higher → higher voice.</p>
+            <p className="text-xs text-ink/50 mt-1">
+              Pitch transposition. Lower → deeper voice; higher → higher voice.
+            </p>
           </div>
 
           <div>
-            <label className="flex justify-between text-sm font-bold" htmlFor="dsp-speed">
+            <label
+              className="flex justify-between text-sm font-bold"
+              htmlFor="dsp-speed"
+            >
               <span>Speech Pace (Speed)</span>
               <span className="text-ink/65">{voiceSettings.dspSpeed}x</span>
             </label>
             <input
               id="dsp-speed"
               type="range"
-              min="0.5" max="2.0" step="0.05"
+              min="0.5"
+              max="2.0"
+              step="0.05"
               value={voiceSettings.dspSpeed}
-              onChange={(e) => saveVoiceSettings({ ...voiceSettings, dspSpeed: parseFloat(e.target.value) })}
-              className="w-full mt-2"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (["ArrowRight", "ArrowUp"].includes(e.key)) {
+                  e.preventDefault();
+                  const nextVal = Math.min(
+                    Number(voiceSettings.dspSpeed) + 0.05,
+                    2.0,
+                  );
+                  saveVoiceSettings({
+                    ...voiceSettings,
+                    dspSpeed: parseFloat(nextVal.toFixed(2)),
+                  });
+                } else if (["ArrowLeft", "ArrowDown"].includes(e.key)) {
+                  e.preventDefault();
+                  const nextVal = Math.max(
+                    Number(voiceSettings.dspSpeed) - 0.05,
+                    0.5,
+                  );
+                  saveVoiceSettings({
+                    ...voiceSettings,
+                    dspSpeed: parseFloat(nextVal.toFixed(2)),
+                  });
+                }
+              }}
+              onChange={(e) =>
+                saveVoiceSettings({
+                  ...voiceSettings,
+                  dspSpeed: parseFloat(e.target.value),
+                })
+              }
+              className="w-full mt-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-coral rounded-full"
             />
-            <p className="text-xs text-ink/50 mt-1">Adjust speech speed. Lower → slower; higher → faster speech.</p>
+            <p className="text-xs text-ink/50 mt-1">
+              Adjust speech speed. Lower → slower; higher → faster speech.
+            </p>
           </div>
 
           <div className="pt-2">
-            <h4 className="text-xs font-bold uppercase tracking-wider text-neutral-500 mb-3">3-Band Graphic Equalizer</h4>
+            <h4 className="text-xs font-bold uppercase tracking-wider text-neutral-500 mb-3">
+              3-Band Graphic Equalizer
+            </h4>
             <div className="grid gap-4 sm:grid-cols-3">
               <div>
-                <label className="flex justify-between text-xs font-bold" htmlFor="dsp-bass">
+                <label
+                  className="flex justify-between text-xs font-bold"
+                  htmlFor="dsp-bass"
+                >
                   <span>Bass (200 Hz)</span>
-                  <span className="text-ink/65">{voiceSettings.dspBass} dB</span>
+                  <span className="text-ink/65">
+                    {voiceSettings.dspBass} dB
+                  </span>
                 </label>
                 <input
                   id="dsp-bass"
                   type="range"
-                  min="-10" max="10" step="1"
+                  min="-10"
+                  max="10"
+                  step="1"
                   value={voiceSettings.dspBass}
-                  onChange={(e) => saveVoiceSettings({ ...voiceSettings, dspBass: parseInt(e.target.value) })}
+                  onChange={(e) =>
+                    saveVoiceSettings({
+                      ...voiceSettings,
+                      dspBass: parseInt(e.target.value),
+                    })
+                  }
                   className="w-full mt-1.5"
                 />
               </div>
 
               <div>
-                <label className="flex justify-between text-xs font-bold" htmlFor="dsp-mid">
+                <label
+                  className="flex justify-between text-xs font-bold"
+                  htmlFor="dsp-mid"
+                >
                   <span>Mid (1000 Hz)</span>
                   <span className="text-ink/65">{voiceSettings.dspMid} dB</span>
                 </label>
                 <input
                   id="dsp-mid"
                   type="range"
-                  min="-10" max="10" step="1"
+                  min="-10"
+                  max="10"
+                  step="1"
                   value={voiceSettings.dspMid}
-                  onChange={(e) => saveVoiceSettings({ ...voiceSettings, dspMid: parseInt(e.target.value) })}
+                  onChange={(e) =>
+                    saveVoiceSettings({
+                      ...voiceSettings,
+                      dspMid: parseInt(e.target.value),
+                    })
+                  }
                   className="w-full mt-1.5"
                 />
               </div>
 
               <div>
-                <label className="flex justify-between text-xs font-bold" htmlFor="dsp-treble">
+                <label
+                  className="flex justify-between text-xs font-bold"
+                  htmlFor="dsp-treble"
+                >
                   <span>Treble (4000 Hz)</span>
-                  <span className="text-ink/65">{voiceSettings.dspTreble} dB</span>
+                  <span className="text-ink/65">
+                    {voiceSettings.dspTreble} dB
+                  </span>
                 </label>
                 <input
                   id="dsp-treble"
                   type="range"
-                  min="-10" max="10" step="1"
+                  min="-10"
+                  max="10"
+                  step="1"
                   value={voiceSettings.dspTreble}
-                  onChange={(e) => saveVoiceSettings({ ...voiceSettings, dspTreble: parseInt(e.target.value) })}
+                  onChange={(e) =>
+                    saveVoiceSettings({
+                      ...voiceSettings,
+                      dspTreble: parseInt(e.target.value),
+                    })
+                  }
                   className="w-full mt-1.5"
                 />
               </div>
             </div>
-            <p className="text-xs text-ink/50 mt-2">Sculpt voice tone in real-time. Bass controls depth; mid controls presence; treble controls clarity.</p>
+            <p className="text-xs text-ink/50 mt-2">
+              Sculpt voice tone in real-time. Bass controls depth; mid controls
+              presence; treble controls clarity.
+            </p>
           </div>
         </div>
       </section>
@@ -490,7 +639,11 @@ export default function Settings() {
       {/* ── Language & Region ─────────────────────────────────────────── */}
       <section className="rounded-lg border border-ink/10 bg-white p-5 shadow-soft dark:border-border dark:bg-surface dark:text-neutral-100 dark:shadow-soft-dk">
         <div className="flex items-center gap-2 mb-1">
-          <Globe size={20} aria-hidden="true" className="text-moss dark:text-glow" />
+          <Globe
+            size={20}
+            aria-hidden="true"
+            className="text-moss dark:text-glow"
+          />
           <h2 className="text-xl font-bold">Language &amp; Region</h2>
         </div>
         <p className="mt-1 text-sm text-ink/65 mb-5 dark:text-muted">
@@ -516,20 +669,23 @@ export default function Settings() {
                   code
                     ? `Language set to ${getLanguageByCode(code)?.name || code}`
                     : "Language set to Auto-detect",
-                  "success"
+                  "success",
                 );
               }}
             />
           </div>
           {selectedLangObj && (
             <div className="flex items-center gap-2 rounded-lg border border-ink/10 px-4 py-3 dark:border-border">
-              <span className="text-2xl" aria-hidden="true">{selectedLangObj.flag}</span>
+              <span className="text-2xl" aria-hidden="true">
+                {selectedLangObj.flag}
+              </span>
               <div>
                 <p className="text-sm font-bold text-ink dark:text-neutral-200">
                   {selectedLangObj.name}
                 </p>
                 <p className="text-xs text-ink/55 dark:text-muted">
-                  {selectedLangObj.nativeName} · <code className="font-mono">{selectedLangObj.code}</code>
+                  {selectedLangObj.nativeName} ·{" "}
+                  <code className="font-mono">{selectedLangObj.code}</code>
                 </p>
               </div>
             </div>
@@ -537,15 +693,17 @@ export default function Settings() {
         </div>
 
         <p className="mt-3 text-xs text-ink/50 dark:text-muted">
-          Powered by Chatterbox Multilingual TTS - supports 23 languages.
-          Choose &ldquo;Auto-detect&rdquo; to let the AI infer the language from your text.
+          Powered by Chatterbox Multilingual TTS - supports 23 languages. Choose
+          &ldquo;Auto-detect&rdquo; to let the AI infer the language from your
+          text.
         </p>
       </section>
 
       <section className="rounded-lg border border-ink/10 bg-white p-5 shadow-soft dark:border-border dark:bg-surface dark:text-neutral-100 dark:shadow-soft-dk">
         <h2 className="text-xl font-bold">Backup & Restore</h2>
         <p className="mt-1 text-sm text-ink/65 mb-5 dark:text-muted">
-          Save your speech history, custom quick replies, and calibration settings to a file, or restore them.
+          Save your speech history, custom quick replies, and calibration
+          settings to a file, or restore them.
         </p>
 
         <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
@@ -613,16 +771,16 @@ export default function Settings() {
           ))}
         </div>
       </section>
-      
+
       {sharingProfile && (
-        <ShareProfileModal 
-          profile={sharingProfile} 
-          onClose={() => setSharingProfile(null)} 
+        <ShareProfileModal
+          profile={sharingProfile}
+          onClose={() => setSharingProfile(null)}
         />
       )}
 
       {isReceiving && (
-        <ReceiveProfileModal 
+        <ReceiveProfileModal
           onClose={() => setIsReceiving(false)}
           onSuccess={async () => {
             const loaded = await getSavedProfiles();
diff --git a/client/src/styles.css b/client/src/styles.css
index 1dfd4662..c6d76d91 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -5,18 +5,24 @@
 
 /* Light mode CSS variables */
 :root {
-  --bg-page:    #f6f8f5;
-  --bg-card:    #ffffff;
-  --bg-input:   #f6f8f5;
-  --text-base:  #16201d;
+  --bg-page: #f6f8f5;
+  --bg-card: #ffffff;
+  --bg-input: #f6f8f5;
+  --text-base: #16201d;
   --text-muted: #4b5563;
-  --border:     rgba(22, 32, 29, 0.1);
-  --ring:       #c9ead7;
+  --border: rgba(22, 32, 29, 0.1);
+  --ring: #c9ead7;
 
   color: var(--text-base);
   background: var(--bg-page);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", sans-serif;
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
   font-synthesis: none;
   text-rendering: optimizelegibility;
   -webkit-font-smoothing: antialiased;
@@ -26,13 +32,13 @@
 /* Dark mode CSS variables */
 /* Applied when ThemeContext adds "dark" to <html> */
 .dark {
-  --bg-page:    #000000;
-  --bg-card:    #080808;
-  --bg-input:   #030303;
-  --text-base:  #f5f5f5;
+  --bg-page: #000000;
+  --bg-card: #080808;
+  --bg-input: #030303;
+  --text-base: #f5f5f5;
   --text-muted: #a3a3a3;
-  --border:     rgba(255, 255, 255, 0.12);
-  --ring:       rgba(34, 197, 94, 0.35);
+  --border: rgba(255, 255, 255, 0.12);
+  --ring: rgba(34, 197, 94, 0.35);
 
   color: var(--text-base);
   background: var(--bg-page);
@@ -43,7 +49,9 @@ body {
   min-height: 100vh;
   margin: 0;
   /* Smooth background transition when toggling theme */
-  transition: background-color 0.2s ease, color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
 }
 
 html,
@@ -93,20 +101,39 @@ textarea {
   animation: recording-wave 900ms ease-in-out infinite;
   transform-origin: bottom;
 }
-.recording-wave span:nth-child(2) { animation-delay: 90ms; }
-.recording-wave span:nth-child(3) { animation-delay: 180ms; }
-.recording-wave span:nth-child(4) { animation-delay: 270ms; }
-.recording-wave span:nth-child(5) { animation-delay: 360ms; }
+.recording-wave span:nth-child(2) {
+  animation-delay: 90ms;
+}
+.recording-wave span:nth-child(3) {
+  animation-delay: 180ms;
+}
+.recording-wave span:nth-child(4) {
+  animation-delay: 270ms;
+}
+.recording-wave span:nth-child(5) {
+  animation-delay: 360ms;
+}
 
 @keyframes recording-wave {
-  0%, 100% { transform: scaleY(0.35); }
-  50%       { transform: scaleY(1); }
+  0%,
+  100% {
+    transform: scaleY(0.35);
+  }
+  50% {
+    transform: scaleY(1);
+  }
 }
 
 /* Toast fade-in-up animation */
 @keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 .animate-fade-in-up {
   animation: fade-in-up 0.2s ease-out;
@@ -114,14 +141,26 @@ textarea {
 
 /* Privacy Mode: subtle pulse on the shield icon when first activated */
 @keyframes privacy-pulse {
-  0%   { box-shadow: 0 0 0 0 rgba(63, 95, 77, 0.45); }
-  70%  { box-shadow: 0 0 0 10px rgba(63, 95, 77, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(63, 95, 77, 0); }
+  0% {
+    box-shadow: 0 0 0 0 rgba(63, 95, 77, 0.45);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(63, 95, 77, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(63, 95, 77, 0);
+  }
 }
 @keyframes privacy-pulse-dark {
-  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
-  70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
+  0% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+  }
 }
 .animate-privacy-pulse {
   animation: privacy-pulse 1.2s ease-out 1;
diff --git a/client/src/utils/audioExtractor.js b/client/src/utils/audioExtractor.js
index 5b9db931..d6158aa4 100644
--- a/client/src/utils/audioExtractor.js
+++ b/client/src/utils/audioExtractor.js
@@ -8,21 +8,26 @@ export async function extractAudioFromFile(file) {
   // If it's a video file, decode it using Web Audio API
   if (file.type.startsWith("video/")) {
     const AudioContextClass = window.AudioContext || window.webkitAudioContext;
-    if (!AudioContextClass) throw new Error("Web Audio API not supported in this browser.");
-    
+    if (!AudioContextClass)
+      throw new Error("Web Audio API not supported in this browser.");
+
     const ctx = new AudioContextClass();
     const arrayBuffer = await file.arrayBuffer();
-    
+
     try {
       const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
       const wavBlob = audioBufferToWav(audioBuffer);
       return { blob: wavBlob, duration: Math.round(audioBuffer.duration) };
     } catch (err) {
-      throw new Error("Failed to extract audio track from video. " + err.message);
+      throw new Error(
+        "Failed to extract audio track from video. " + err.message,
+      );
     }
   }
 
-  throw new Error("Unsupported file type. Please upload an audio or video file.");
+  throw new Error(
+    "Unsupported file type. Please upload an audio or video file.",
+  );
 }
 
 function getAudioDuration(blob) {
@@ -46,7 +51,7 @@ function audioBufferToWav(buffer) {
   const sampleRate = buffer.sampleRate;
   const format = 1; // PCM
   const bitDepth = 16;
-  
+
   const result = new Float32Array(buffer.length * numChannels);
   for (let channel = 0; channel < numChannels; channel++) {
     const channelData = buffer.getChannelData(channel);
@@ -54,22 +59,22 @@ function audioBufferToWav(buffer) {
       result[i * numChannels + channel] = channelData[i];
     }
   }
-  
+
   const dataLength = result.length * (bitDepth / 8);
   const bufferLength = 44 + dataLength;
   const arrayBuffer = new ArrayBuffer(bufferLength);
   const view = new DataView(arrayBuffer);
-  
+
   const writeString = (view, offset, string) => {
     for (let i = 0; i < string.length; i++) {
       view.setUint8(offset + i, string.charCodeAt(i));
     }
   };
-  
-  writeString(view, 0, 'RIFF');
+
+  writeString(view, 0, "RIFF");
   view.setUint32(4, 36 + dataLength, true);
-  writeString(view, 8, 'WAVE');
-  writeString(view, 12, 'fmt ');
+  writeString(view, 8, "WAVE");
+  writeString(view, 12, "fmt ");
   view.setUint32(16, 16, true);
   view.setUint16(20, format, true);
   view.setUint16(22, numChannels, true);
@@ -77,14 +82,14 @@ function audioBufferToWav(buffer) {
   view.setUint32(28, sampleRate * numChannels * (bitDepth / 8), true);
   view.setUint16(32, numChannels * (bitDepth / 8), true);
   view.setUint16(34, bitDepth, true);
-  writeString(view, 36, 'data');
+  writeString(view, 36, "data");
   view.setUint32(40, dataLength, true);
-  
+
   const offset = 44;
   for (let i = 0; i < result.length; i++) {
     const s = Math.max(-1, Math.min(1, result[i]));
-    view.setInt16(offset + i * 2, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+    view.setInt16(offset + i * 2, s < 0 ? s * 0x8000 : s * 0x7fff, true);
   }
-  
-  return new Blob([view], { type: 'audio/wav' });
+
+  return new Blob([view], { type: "audio/wav" });
 }
diff --git a/client/src/utils/audioProcessor.js b/client/src/utils/audioProcessor.js
index 72720cca..8cc2ab05 100644
--- a/client/src/utils/audioProcessor.js
+++ b/client/src/utils/audioProcessor.js
@@ -26,9 +26,11 @@ export class AudioProcessor {
   async initialize(audioElement) {
     if (!this.audioContext) {
       // Must be created after a user gesture
-      this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+      this.audioContext = new (
+        window.AudioContext || window.webkitAudioContext
+      )();
     }
-    
+
     if (this.audioContext.state === "suspended") {
       await this.audioContext.resume();
     }
@@ -112,7 +114,7 @@ export class AudioProcessor {
   getLatestFeatures() {
     const history = this.melHistory || [];
     const flat = new Float32Array(80 * 16);
-    
+
     // Fill the flat array in shape [1, 1, 80, 16] where time step changes fastest.
     // Flat index = b * 16 + t
     const missing = 16 - history.length;
diff --git a/client/src/utils/db.js b/client/src/utils/db.js
index c585abec..92d978bc 100644
--- a/client/src/utils/db.js
+++ b/client/src/utils/db.js
@@ -11,7 +11,9 @@ function getDB() {
 
   dbPromise = new Promise((resolve, reject) => {
     if (typeof window === "undefined" || !window.indexedDB) {
-      reject(new Error("IndexedDB is not supported in this browser environment."));
+      reject(
+        new Error("IndexedDB is not supported in this browser environment."),
+      );
       return;
     }
 
@@ -20,12 +22,21 @@ function getDB() {
 
       request.onerror = (event) => {
         dbPromise = null; // reset so next call retries
-        reject(new Error("Failed to open database: " + (event.target.error?.message || "Unknown error")));
+        reject(
+          new Error(
+            "Failed to open database: " +
+              (event.target.error?.message || "Unknown error"),
+          ),
+        );
       };
 
       request.onblocked = () => {
         dbPromise = null; // reset so next call retries
-        reject(new Error("Database access is blocked. Please close other open tabs."));
+        reject(
+          new Error(
+            "Database access is blocked. Please close other open tabs.",
+          ),
+        );
       };
 
       request.onsuccess = (event) => {
@@ -40,7 +51,11 @@ function getDB() {
       };
     } catch (err) {
       dbPromise = null;
-      reject(new Error("Failed to initialize IndexedDB: " + (err?.message || String(err))));
+      reject(
+        new Error(
+          "Failed to initialize IndexedDB: " + (err?.message || String(err)),
+        ),
+      );
     }
   });
 
@@ -63,7 +78,12 @@ export async function getAllProfiles() {
     };
 
     request.onerror = (event) => {
-      reject(new Error("Failed to retrieve profiles: " + (event.target.error?.message || "Unknown error")));
+      reject(
+        new Error(
+          "Failed to retrieve profiles: " +
+            (event.target.error?.message || "Unknown error"),
+        ),
+      );
     };
   });
 }
@@ -81,7 +101,12 @@ export async function getProfile(voiceId) {
     };
 
     request.onerror = (event) => {
-      reject(new Error("Failed to retrieve profile: " + (event.target.error?.message || "Unknown error")));
+      reject(
+        new Error(
+          "Failed to retrieve profile: " +
+            (event.target.error?.message || "Unknown error"),
+        ),
+      );
     };
   });
 }
@@ -98,7 +123,12 @@ export async function saveProfile(profile) {
     };
 
     request.onerror = (event) => {
-      reject(new Error("Failed to save profile: " + (event.target.error?.message || "Unknown error")));
+      reject(
+        new Error(
+          "Failed to save profile: " +
+            (event.target.error?.message || "Unknown error"),
+        ),
+      );
     };
   });
 }
@@ -115,7 +145,12 @@ export async function deleteProfile(voiceId) {
     };
 
     request.onerror = (event) => {
-      reject(new Error("Failed to delete profile: " + (event.target.error?.message || "Unknown error")));
+      reject(
+        new Error(
+          "Failed to delete profile: " +
+            (event.target.error?.message || "Unknown error"),
+        ),
+      );
     };
   });
 }
@@ -132,7 +167,12 @@ export async function clearStorage() {
     };
 
     request.onerror = (event) => {
-      reject(new Error("Failed to clear storage: " + (event.target.error?.message || "Unknown error")));
+      reject(
+        new Error(
+          "Failed to clear storage: " +
+            (event.target.error?.message || "Unknown error"),
+        ),
+      );
     };
   });
 }
diff --git a/client/src/utils/faceProcessor.js b/client/src/utils/faceProcessor.js
index d8a5968e..7b2ba62c 100644
--- a/client/src/utils/faceProcessor.js
+++ b/client/src/utils/faceProcessor.js
@@ -18,17 +18,17 @@ export class FaceProcessor {
     try {
       // Create the vision task
       const vision = await FilesetResolver.forVisionTasks(
-        "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.35/wasm"
+        "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.35/wasm",
       );
-      
+
       this.faceLandmarker = await FaceLandmarker.createFromOptions(vision, {
         baseOptions: {
           modelAssetPath: `https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task`,
-          delegate: "GPU"
+          delegate: "GPU",
         },
         outputFaceBlendshapes: false,
         runningMode: "VIDEO",
-        numFaces: 1
+        numFaces: 1,
       });
 
       this.isInitialized = true;
@@ -48,7 +48,10 @@ export class FaceProcessor {
     if (!this.isInitialized || !this.faceLandmarker) return null;
 
     try {
-      const results = this.faceLandmarker.detectForVideo(videoElement, timestamp);
+      const results = this.faceLandmarker.detectForVideo(
+        videoElement,
+        timestamp,
+      );
       if (results.faceLandmarks && results.faceLandmarks.length > 0) {
         return results.faceLandmarks[0];
       }
@@ -71,9 +74,9 @@ export class FaceProcessor {
 
     // Mouth landmarks indices in MediaPipe FaceMesh
     const MOUTH_LANDMARKS = [
-      0, 13, 14, 17, 37, 39, 40, 61, 78, 80, 81, 82, 83, 84, 87, 88, 91, 95, 96, 146,
-      178, 181, 185, 191, 267, 269, 270, 291, 308, 310, 311, 312, 313, 314, 317, 318,
-      321, 324, 326, 375, 402, 405, 409, 415
+      0, 13, 14, 17, 37, 39, 40, 61, 78, 80, 81, 82, 83, 84, 87, 88, 91, 95, 96,
+      146, 178, 181, 185, 191, 267, 269, 270, 291, 308, 310, 311, 312, 313, 314,
+      317, 318, 321, 324, 326, 375, 402, 405, 409, 415,
     ];
 
     let minX = Infinity;
@@ -119,14 +122,25 @@ export class FaceProcessor {
     ctx.clearRect(0, 0, targetCanvas.width, targetCanvas.height);
     ctx.drawImage(
       sourceCanvas,
-      x, y, w, h,
-      0, 0, targetCanvas.width, targetCanvas.height
+      x,
+      y,
+      w,
+      h,
+      0,
+      0,
+      targetCanvas.width,
+      targetCanvas.height,
     );
 
-    const imageData = ctx.getImageData(0, 0, targetCanvas.width, targetCanvas.height);
+    const imageData = ctx.getImageData(
+      0,
+      0,
+      targetCanvas.width,
+      targetCanvas.height,
+    );
     return {
       imageData,
-      coords: { x, y, w, h }
+      coords: { x, y, w, h },
     };
   }
   /**
diff --git a/client/src/utils/formatTime.js b/client/src/utils/formatTime.js
index 675a4a12..b5b53cc6 100644
--- a/client/src/utils/formatTime.js
+++ b/client/src/utils/formatTime.js
@@ -1,6 +1,7 @@
 // Pure utility — no React or JSX dependency so it can be unit tested in isolation.
 export function formatTime(timestamp) {
-  if (typeof timestamp !== "number" || !Number.isFinite(timestamp)) return "Just now";
+  if (typeof timestamp !== "number" || !Number.isFinite(timestamp))
+    return "Just now";
   const diff = Date.now() - timestamp;
   if (diff < 60_000) return "Just now";
   if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
@@ -10,5 +11,8 @@ export function formatTime(timestamp) {
       minute: "2-digit",
     });
   }
-  return new Date(timestamp).toLocaleDateString([], { month: "short", day: "numeric" });
+  return new Date(timestamp).toLocaleDateString([], {
+    month: "short",
+    day: "numeric",
+  });
 }
diff --git a/client/src/utils/languages.js b/client/src/utils/languages.js
index 8a079572..8dc78119 100644
--- a/client/src/utils/languages.js
+++ b/client/src/utils/languages.js
@@ -16,32 +16,170 @@ export const LANGUAGE_STORAGE_KEY = "voiceforge:language";
  * Each entry: { code, name, nativeName, flag, region }
  */
 export const SUPPORTED_LANGUAGES = [
-  { code: "en", name: "English", nativeName: "English", flag: "EN", region: "Europe" },
-  { code: "fr", name: "French", nativeName: "Francais", flag: "FR", region: "Europe" },
-  { code: "de", name: "German", nativeName: "Deutsch", flag: "DE", region: "Europe" },
-  { code: "es", name: "Spanish", nativeName: "Espanol", flag: "ES", region: "Europe" },
-  { code: "pt", name: "Portuguese", nativeName: "Portugues", flag: "PT", region: "Europe" },
-  { code: "it", name: "Italian", nativeName: "Italiano", flag: "IT", region: "Europe" },
-  { code: "nl", name: "Dutch", nativeName: "Nederlands", flag: "NL", region: "Europe" },
-  { code: "pl", name: "Polish", nativeName: "Polski", flag: "PL", region: "Europe" },
-  { code: "sv", name: "Swedish", nativeName: "Svenska", flag: "SV", region: "Europe" },
-  { code: "da", name: "Danish", nativeName: "Dansk", flag: "DA", region: "Europe" },
-  { code: "fi", name: "Finnish", nativeName: "Suomi", flag: "FI", region: "Europe" },
-  { code: "el", name: "Greek", nativeName: "Greek", flag: "EL", region: "Europe" },
-  { code: "ru", name: "Russian", nativeName: "Russian", flag: "RU", region: "Europe" },
-  { code: "no", name: "Norwegian", nativeName: "Norsk", flag: "NO", region: "Europe" },
-  { code: "tr", name: "Turkish", nativeName: "Turkce", flag: "TR", region: "Europe" },
+  {
+    code: "en",
+    name: "English",
+    nativeName: "English",
+    flag: "EN",
+    region: "Europe",
+  },
+  {
+    code: "fr",
+    name: "French",
+    nativeName: "Francais",
+    flag: "FR",
+    region: "Europe",
+  },
+  {
+    code: "de",
+    name: "German",
+    nativeName: "Deutsch",
+    flag: "DE",
+    region: "Europe",
+  },
+  {
+    code: "es",
+    name: "Spanish",
+    nativeName: "Espanol",
+    flag: "ES",
+    region: "Europe",
+  },
+  {
+    code: "pt",
+    name: "Portuguese",
+    nativeName: "Portugues",
+    flag: "PT",
+    region: "Europe",
+  },
+  {
+    code: "it",
+    name: "Italian",
+    nativeName: "Italiano",
+    flag: "IT",
+    region: "Europe",
+  },
+  {
+    code: "nl",
+    name: "Dutch",
+    nativeName: "Nederlands",
+    flag: "NL",
+    region: "Europe",
+  },
+  {
+    code: "pl",
+    name: "Polish",
+    nativeName: "Polski",
+    flag: "PL",
+    region: "Europe",
+  },
+  {
+    code: "sv",
+    name: "Swedish",
+    nativeName: "Svenska",
+    flag: "SV",
+    region: "Europe",
+  },
+  {
+    code: "da",
+    name: "Danish",
+    nativeName: "Dansk",
+    flag: "DA",
+    region: "Europe",
+  },
+  {
+    code: "fi",
+    name: "Finnish",
+    nativeName: "Suomi",
+    flag: "FI",
+    region: "Europe",
+  },
+  {
+    code: "el",
+    name: "Greek",
+    nativeName: "Greek",
+    flag: "EL",
+    region: "Europe",
+  },
+  {
+    code: "ru",
+    name: "Russian",
+    nativeName: "Russian",
+    flag: "RU",
+    region: "Europe",
+  },
+  {
+    code: "no",
+    name: "Norwegian",
+    nativeName: "Norsk",
+    flag: "NO",
+    region: "Europe",
+  },
+  {
+    code: "tr",
+    name: "Turkish",
+    nativeName: "Turkce",
+    flag: "TR",
+    region: "Europe",
+  },
 
-  { code: "hi", name: "Hindi", nativeName: "Hindi", flag: "HI", region: "Asia & Pacific" },
-  { code: "ja", name: "Japanese", nativeName: "Japanese", flag: "JA", region: "Asia & Pacific" },
-  { code: "ko", name: "Korean", nativeName: "Korean", flag: "KO", region: "Asia & Pacific" },
-  { code: "zh", name: "Chinese", nativeName: "Chinese", flag: "ZH", region: "Asia & Pacific" },
-  { code: "ms", name: "Malay", nativeName: "Bahasa Melayu", flag: "MS", region: "Asia & Pacific" },
+  {
+    code: "hi",
+    name: "Hindi",
+    nativeName: "Hindi",
+    flag: "HI",
+    region: "Asia & Pacific",
+  },
+  {
+    code: "ja",
+    name: "Japanese",
+    nativeName: "Japanese",
+    flag: "JA",
+    region: "Asia & Pacific",
+  },
+  {
+    code: "ko",
+    name: "Korean",
+    nativeName: "Korean",
+    flag: "KO",
+    region: "Asia & Pacific",
+  },
+  {
+    code: "zh",
+    name: "Chinese",
+    nativeName: "Chinese",
+    flag: "ZH",
+    region: "Asia & Pacific",
+  },
+  {
+    code: "ms",
+    name: "Malay",
+    nativeName: "Bahasa Melayu",
+    flag: "MS",
+    region: "Asia & Pacific",
+  },
 
-  { code: "ar", name: "Arabic", nativeName: "Arabic", flag: "AR", region: "Middle East" },
-  { code: "he", name: "Hebrew", nativeName: "Hebrew", flag: "HE", region: "Middle East" },
+  {
+    code: "ar",
+    name: "Arabic",
+    nativeName: "Arabic",
+    flag: "AR",
+    region: "Middle East",
+  },
+  {
+    code: "he",
+    name: "Hebrew",
+    nativeName: "Hebrew",
+    flag: "HE",
+    region: "Middle East",
+  },
 
-  { code: "sw", name: "Swahili", nativeName: "Kiswahili", flag: "SW", region: "Africa" },
+  {
+    code: "sw",
+    name: "Swahili",
+    nativeName: "Kiswahili",
+    flag: "SW",
+    region: "Africa",
+  },
 ];
 
 /** Set of all valid language codes for O(1) lookups. */
@@ -55,9 +193,7 @@ export function isValidLanguageCode(code) {
   return !code || VALID_CODES.has(code);
 }
 
-const BY_CODE = Object.fromEntries(
-  SUPPORTED_LANGUAGES.map((l) => [l.code, l])
-);
+const BY_CODE = Object.fromEntries(SUPPORTED_LANGUAGES.map((l) => [l.code, l]));
 
 /** Returns the language object for a given code, or undefined. */
 export function getLanguageByCode(code) {
@@ -83,7 +219,7 @@ export function loadLanguage() {
     }
 
     const legacyNameToCode = Object.fromEntries(
-      SUPPORTED_LANGUAGES.map(({ name, code }) => [name, code])
+      SUPPORTED_LANGUAGES.map(({ name, code }) => [name, code]),
     );
     const normalized = legacyNameToCode[current] ?? current;
 
diff --git a/client/src/utils/pitchShifter.js b/client/src/utils/pitchShifter.js
index 57c9e576..dafccafc 100644
--- a/client/src/utils/pitchShifter.js
+++ b/client/src/utils/pitchShifter.js
@@ -26,7 +26,9 @@ export class PitchShifter {
     this.fade2 = context.createDelay(1.0);
 
     // Constant Source
-    this.constSource = context.createConstantSource ? context.createConstantSource() : null;
+    this.constSource = context.createConstantSource
+      ? context.createConstantSource()
+      : null;
     if (this.constSource) {
       this.constSource.offset.value = 1.0;
       this.constSource.start();
@@ -43,8 +45,8 @@ export class PitchShifter {
     this.gain2.connect(this.output);
 
     // Pitch shifting modulation parameters
-    this.delayTime = 0.100; // 100ms
-    this.fadeTime = 0.050; // 50ms
+    this.delayTime = 0.1; // 100ms
+    this.fadeTime = 0.05; // 50ms
 
     // Set delay values
     this.delay1.delayTime.value = 0.025;
@@ -101,13 +103,13 @@ export class PitchShifter {
     // Start LFO oscillators
     this.osc1.start();
     this.osc2.start();
-    
+
     this.setPitch(1.0);
   }
 
   setPitch(pitch) {
     this._pitch = pitch;
-    
+
     if (Math.abs(pitch - 1.0) < 0.01) {
       // Direct pass-through
       this.oscGain1.gain.value = 0;
diff --git a/client/src/utils/voiceSettings.js b/client/src/utils/voiceSettings.js
index dadcc4f7..2aff20c7 100644
--- a/client/src/utils/voiceSettings.js
+++ b/client/src/utils/voiceSettings.js
@@ -31,9 +31,9 @@ export const DEFAULT_VOICE_SETTINGS = {
 export const VOICE_PRESETS = {
   neutral: {
     name: "Narrator / Neutral",
-    stability: 0.70,
-    temperature: 0.60,
-    style: 0.30,
+    stability: 0.7,
+    temperature: 0.6,
+    style: 0.3,
     dspPitch: 1.0,
     dspSpeed: 1.0,
     dspBass: 0.0,
@@ -42,10 +42,10 @@ export const VOICE_PRESETS = {
   },
   excited: {
     name: "Excited / Energetic",
-    stability: 0.40,
+    stability: 0.4,
     temperature: 0.95,
     style: 0.75,
-    dspPitch: 1.10,
+    dspPitch: 1.1,
     dspSpeed: 1.15,
     dspBass: -2.0,
     dspMid: 1.0,
@@ -54,9 +54,9 @@ export const VOICE_PRESETS = {
   robotic: {
     name: "Robotic / Flat",
     stability: 0.95,
-    temperature: 0.10,
+    temperature: 0.1,
     style: 0.05,
-    dspPitch: 0.90,
+    dspPitch: 0.9,
     dspSpeed: 0.95,
     dspBass: 2.0,
     dspMid: -3.0,
@@ -65,8 +65,8 @@ export const VOICE_PRESETS = {
   soft: {
     name: "Soft / Whispering",
     stability: 0.55,
-    temperature: 0.50,
-    style: 0.20,
+    temperature: 0.5,
+    style: 0.2,
     dspPitch: 1.05,
     dspSpeed: 0.85,
     dspBass: -4.0,
@@ -75,8 +75,6 @@ export const VOICE_PRESETS = {
   },
 };
 
-
-
 /**
  * Reads voice settings from localStorage and returns a fully sanitized object.
  *
@@ -95,7 +93,11 @@ export function loadVoiceSettings() {
     const raw = localStorage.getItem(VOICE_SETTINGS_KEY);
     if (raw) {
       const candidate = JSON.parse(raw);
-      if (candidate !== null && typeof candidate === "object" && !Array.isArray(candidate)) {
+      if (
+        candidate !== null &&
+        typeof candidate === "object" &&
+        !Array.isArray(candidate)
+      ) {
         parsed = candidate;
       }
     }
@@ -132,7 +134,8 @@ export function loadVoiceSettings() {
       result[key] = typeof parsed[key] === "boolean" ? parsed[key] : defaultVal;
     } else {
       // For any future non-numeric, non-boolean key, copy only on type match.
-      result[key] = typeof parsed[key] === typeof defaultVal ? parsed[key] : defaultVal;
+      result[key] =
+        typeof parsed[key] === typeof defaultVal ? parsed[key] : defaultVal;
     }
   }
   return result;
diff --git a/client/src/utils/voiceSettings.test.js b/client/src/utils/voiceSettings.test.js
index 16428ce3..0e9582fb 100644
--- a/client/src/utils/voiceSettings.test.js
+++ b/client/src/utils/voiceSettings.test.js
@@ -12,9 +12,15 @@ const localStorageMock = (() => {
   let store = {};
   return {
     getItem: (key) => store[key] || null,
-    setItem: (key, value) => { store[key] = String(value); },
-    clear: () => { store = {}; },
-    removeItem: (key) => { delete store[key]; },
+    setItem: (key, value) => {
+      store[key] = String(value);
+    },
+    clear: () => {
+      store = {};
+    },
+    removeItem: (key) => {
+      delete store[key];
+    },
   };
 })();
 global.localStorage = localStorageMock;
@@ -28,9 +34,9 @@ describe("voiceSettings utility", () => {
     expect(VOICE_PRESETS).toBeDefined();
     expect(VOICE_PRESETS.neutral).toEqual({
       name: "Narrator / Neutral",
-      stability: 0.70,
-      temperature: 0.60,
-      style: 0.30,
+      stability: 0.7,
+      temperature: 0.6,
+      style: 0.3,
       dspPitch: 1.0,
       dspSpeed: 1.0,
       dspBass: 0.0,
@@ -39,10 +45,10 @@ describe("voiceSettings utility", () => {
     });
     expect(VOICE_PRESETS.excited).toEqual({
       name: "Excited / Energetic",
-      stability: 0.40,
+      stability: 0.4,
       temperature: 0.95,
       style: 0.75,
-      dspPitch: 1.10,
+      dspPitch: 1.1,
       dspSpeed: 1.15,
       dspBass: -2.0,
       dspMid: 1.0,
@@ -51,9 +57,9 @@ describe("voiceSettings utility", () => {
     expect(VOICE_PRESETS.robotic).toEqual({
       name: "Robotic / Flat",
       stability: 0.95,
-      temperature: 0.10,
+      temperature: 0.1,
       style: 0.05,
-      dspPitch: 0.90,
+      dspPitch: 0.9,
       dspSpeed: 0.95,
       dspBass: 2.0,
       dspMid: -3.0,
@@ -62,8 +68,8 @@ describe("voiceSettings utility", () => {
     expect(VOICE_PRESETS.soft).toEqual({
       name: "Soft / Whispering",
       stability: 0.55,
-      temperature: 0.50,
-      style: 0.20,
+      temperature: 0.5,
+      style: 0.2,
       dspPitch: 1.05,
       dspSpeed: 0.85,
       dspBass: -4.0,
diff --git a/client/src/utils/wavEncoder.js b/client/src/utils/wavEncoder.js
index 02e389fd..a4cdfa63 100644
--- a/client/src/utils/wavEncoder.js
+++ b/client/src/utils/wavEncoder.js
@@ -4,29 +4,30 @@
 export function encodeWAV(audioBuffer, startOffset = 0, endOffset = null) {
   const sampleRate = audioBuffer.sampleRate;
   const numChannels = audioBuffer.numberOfChannels;
-  
+
   const startSample = Math.floor(startOffset * sampleRate);
-  const endSample = endOffset === null 
-    ? audioBuffer.length 
-    : Math.min(audioBuffer.length, Math.floor(endOffset * sampleRate));
-  
+  const endSample =
+    endOffset === null
+      ? audioBuffer.length
+      : Math.min(audioBuffer.length, Math.floor(endOffset * sampleRate));
+
   const numSamples = Math.max(0, endSample - startSample);
-  
+
   // Create output buffer
   const buffer = new ArrayBuffer(44 + numSamples * numChannels * 2);
   const view = new DataView(buffer);
-  
+
   // Write WAV RIFF header
   /* ChunkID */
-  writeString(view, 0, 'RIFF');
+  writeString(view, 0, "RIFF");
   /* ChunkSize */
   view.setUint32(4, 36 + numSamples * numChannels * 2, true);
   /* Format */
-  writeString(view, 8, 'WAVE');
-  
+  writeString(view, 8, "WAVE");
+
   // Write format chunk (fmt)
   /* Subchunk1ID */
-  writeString(view, 12, 'fmt ');
+  writeString(view, 12, "fmt ");
   /* Subchunk1Size */
   view.setUint32(16, 16, true);
   /* AudioFormat (1 = PCM) */
@@ -41,19 +42,19 @@ export function encodeWAV(audioBuffer, startOffset = 0, endOffset = null) {
   view.setUint16(32, numChannels * 2, true);
   /* BitsPerSample */
   view.setUint16(34, 16, true);
-  
+
   // Write data chunk
   /* Subchunk2ID */
-  writeString(view, 36, 'data');
+  writeString(view, 36, "data");
   /* Subchunk2Size */
   view.setUint32(40, numSamples * numChannels * 2, true);
-  
+
   // Write PCM samples
   const channelData = [];
   for (let c = 0; c < numChannels; c++) {
     channelData.push(audioBuffer.getChannelData(c));
   }
-  
+
   let offset = 44;
   for (let i = 0; i < numSamples; i++) {
     for (let c = 0; c < numChannels; c++) {
@@ -61,13 +62,13 @@ export function encodeWAV(audioBuffer, startOffset = 0, endOffset = null) {
       // Clamp sample to [-1, 1]
       const clamped = Math.max(-1, Math.min(1, sample));
       // Convert to 16-bit PCM integer
-      const pcmSample = clamped < 0 ? clamped * 0x8000 : clamped * 0x7FFF;
+      const pcmSample = clamped < 0 ? clamped * 0x8000 : clamped * 0x7fff;
       view.setInt16(offset, pcmSample, true);
       offset += 2;
     }
   }
-  
-  return new Blob([buffer], { type: 'audio/wav' });
+
+  return new Blob([buffer], { type: "audio/wav" });
 }
 
 function writeString(view, offset, string) {
diff --git a/client/src/utils/webrtc.js b/client/src/utils/webrtc.js
index 419567a4..5904a8ce 100644
--- a/client/src/utils/webrtc.js
+++ b/client/src/utils/webrtc.js
@@ -8,13 +8,15 @@ export async function sendDataInChunks(dataChannel, data) {
   const bytes = encoder.encode(jsonStr);
 
   // Send metadata (total size)
-  dataChannel.send(JSON.stringify({ type: 'metadata', size: bytes.length }));
+  dataChannel.send(JSON.stringify({ type: "metadata", size: bytes.length }));
 
   let offset = 0;
   return new Promise((resolve, reject) => {
     const sendChunk = () => {
       while (offset < bytes.length) {
-        if (dataChannel.bufferedAmount > dataChannel.bufferedAmountLowThreshold) {
+        if (
+          dataChannel.bufferedAmount > dataChannel.bufferedAmountLowThreshold
+        ) {
           dataChannel.onbufferedamountlow = () => {
             dataChannel.onbufferedamountlow = null;
             sendChunk();
@@ -27,11 +29,11 @@ export async function sendDataInChunks(dataChannel, data) {
         offset += chunk.length;
       }
       // Send EOF
-      dataChannel.send(JSON.stringify({ type: 'eof' }));
+      dataChannel.send(JSON.stringify({ type: "eof" }));
       resolve();
     };
 
-    if (dataChannel.readyState === 'open') {
+    if (dataChannel.readyState === "open") {
       sendChunk();
     } else {
       dataChannel.onopen = sendChunk;
@@ -45,12 +47,12 @@ export function receiveDataInChunks(dataChannel, onComplete) {
   let currentSize = 0;
 
   dataChannel.onmessage = (event) => {
-    if (typeof event.data === 'string') {
+    if (typeof event.data === "string") {
       try {
         const msg = JSON.parse(event.data);
-        if (msg.type === 'metadata') {
+        if (msg.type === "metadata") {
           expectedSize = msg.size;
-        } else if (msg.type === 'eof') {
+        } else if (msg.type === "eof") {
           // Reconstruct
           const totalBuffer = new Uint8Array(currentSize);
           let offset = 0;
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 5eb4dd16..432938ee 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -8,25 +8,25 @@ export default {
     extend: {
       colors: {
         // ── Light mode tokens (unchanged) ───────────────────────────────
-        ink:   "#16201d",
-        moss:  "#3f5f4d",
-        mint:  "#c9ead7",
+        ink: "#16201d",
+        moss: "#3f5f4d",
+        mint: "#c9ead7",
         coral: "#f26f63",
         amber: "#f3bc51",
         cloud: "#f6f8f5",
 
         // ── Dark mode surface tokens ─────────────────────────────────────
         // Use these as: dark:bg-night, dark:bg-surface, etc.
-        night:   "#000000",   // page background
-        surface: "#080808",   // card / panel background
-        border:  "#242424",   // subtle border
-        muted:   "#a3a3a3",   // secondary text
+        night: "#000000", // page background
+        surface: "#080808", // card / panel background
+        border: "#242424", // subtle border
+        muted: "#a3a3a3", // secondary text
 
         // ── Dark mode accent (bright green, visible on dark bg) ──────────
         glow: "#22c55e",
       },
       boxShadow: {
-        soft:     "0 18px 60px rgba(22, 32, 29, 0.12)",
+        soft: "0 18px 60px rgba(22, 32, 29, 0.12)",
         "soft-dk": "0 18px 60px rgba(0, 0, 0, 0.45)",
       },
     },
diff --git a/client/vite.config.js b/client/vite.config.js
index 3c6879c6..0562c7ad 100644
--- a/client/vite.config.js
+++ b/client/vite.config.js
@@ -7,7 +7,7 @@ export default defineConfig({
   server: {
     port: 5173,
     proxy: {
-      "/api": "http://localhost:3001"
-    }
-  }
+      "/api": "http://localhost:3001",
+    },
+  },
 });
diff --git a/docs/virtual-camera.md b/docs/virtual-camera.md
index 10b1fd81..6e4f2294 100644
--- a/docs/virtual-camera.md
+++ b/docs/virtual-camera.md
@@ -21,7 +21,7 @@ This guide covers step-by-step instructions for configuring VoiceForge with OBS
 4. In the **Camera** dropdown menu, select **OBS Virtual Camera**.
 5. Click **Test Video** to preview your camera feed. You should see the cropped VoiceForge face preview.
 
-*(Screenshot placeholder: Discord Voice & Video settings showing OBS Virtual Camera selected)*
+_(Screenshot placeholder: Discord Voice & Video settings showing OBS Virtual Camera selected)_
 
 ---
 
@@ -32,28 +32,32 @@ This guide covers step-by-step instructions for configuring VoiceForge with OBS
 3. Select **OBS Virtual Camera** from the list of available cameras.
 4. If your video preview appears mirrored (which is common in Webex), click on **Video Settings...** and toggle the **Mirror my video** option.
 
-*(Screenshot placeholder: Webex camera picker showing OBS Virtual Camera)*
+_(Screenshot placeholder: Webex camera picker showing OBS Virtual Camera)_
 
 ---
 
 ## 🛠️ 4. Troubleshooting Common OBS Issues
 
 ### Issue: Virtual camera not detected
+
 - **Solution**: Make sure you have clicked **Start Virtual Camera** in OBS Studio. Sometimes, restarting the video conferencing app (Discord, Webex, Zoom) is required after starting the virtual camera for the first time.
 
 ### Issue: Mirrored video
+
 - **Solution**: Many platforms mirror your camera locally for your convenience, but others see it normally. If you need to fix it:
   - **In App**: Check the video settings of Discord/Webex/Zoom for a "Mirror my video" toggle.
   - **In OBS**: Right-click the Browser Source in OBS > **Transform** > **Flip Horizontal**.
 
 ### Issue: Aspect ratio and cropping issues
+
 - **Solution**: VoiceForge is best viewed when cropped closely to the face. If the screen has black bars:
   - In OBS, right-click the Browser Source > **Transform** > **Edit Transform...** and adjust the crop settings manually.
   - Alternatively, hold `Alt` (or `Option` on Mac) and drag the red borders in the preview window to crop out the UI.
   - Ensure the OBS Base (Canvas) Resolution matches your desired output (e.g., 1920x1080) in Settings > Video.
 
 ### Issue: Black screen or frozen camera feed
-- **Solution**: 
+
+- **Solution**:
   - Verify that the Browser Source URL is correct and VoiceForge is running (`npm run dev`).
   - Double-click the Browser Source in OBS and click **Refresh cache of current page**.
   - Check if the camera feed is active on the VoiceForge browser tab.
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 00000000..8bbe614d
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,10 @@
+module.exports = [
+  {
+    ignores: [
+      "node_modules/",
+      "client/dist/",
+      "client/node_modules/",
+      "server/node_modules/",
+    ],
+  },
+];
diff --git a/package-lock.json b/package-lock.json
index 64921a0f..ed859ba6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1176,7 +1176,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1190,7 +1189,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1204,7 +1202,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1218,7 +1215,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1232,7 +1228,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1246,7 +1241,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1260,7 +1254,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1274,7 +1267,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1288,7 +1280,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1302,7 +1293,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1316,7 +1306,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1330,7 +1319,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1344,7 +1332,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1358,7 +1345,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1372,7 +1358,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1386,7 +1371,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1400,7 +1384,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1414,7 +1397,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1428,7 +1410,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1442,7 +1423,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1456,7 +1436,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1470,7 +1449,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1484,7 +1462,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1498,7 +1475,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1512,7 +1488,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3009,7 +2984,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
diff --git a/package.json b/package.json
index 264c277a..fb0b87d2 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,9 @@
     "dev:client": "npm run dev --workspace client",
     "dev:server": "npm run dev --workspace server",
     "build": "npm run build --workspace client",
-    "start": "npm run start --workspace server"
+    "start": "npm run start --workspace server",
+    "lint": "npx eslint .",
+    "format:check": "npx prettier --check ."
   },
   "devDependencies": {
     "@playwright/test": "^1.61.0",
diff --git a/playwright.config.js b/playwright.config.js
index 60665aaa..8bb86b59 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -1,26 +1,26 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 export default defineConfig({
-  testDir: './tests',
+  testDir: "./tests",
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
+  reporter: "html",
   use: {
-    baseURL: 'http://localhost:5173',
-    trace: 'on-first-retry',
+    baseURL: "http://localhost:5173",
+    trace: "on-first-retry",
   },
 
   projects: [
     {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
     },
   ],
   webServer: {
-    command: 'npm run dev',
-    url: 'http://localhost:5173',
+    command: "npm run dev",
+    url: "http://localhost:5173",
     reuseExistingServer: !process.env.CI,
     timeout: 120 * 1000,
   },
diff --git a/pr_body.md b/pr_body.md
index 96bb38dc..03bef3b7 100644
--- a/pr_body.md
+++ b/pr_body.md
@@ -1,7 +1,9 @@
 ## Description
+
 This PR implements a robust auto-recloning recovery flow for VoiceForge cloned voice profiles when the backend session expires, cache limits are reached, or the server restarts.
 
 ## Key Changes
+
 - **Client-Provided `voice_id` Support**: Modified the backend `/api/voice/clone` route to accept an optional client-supplied `voice_id`. This allows the client to re-register the voice with the exact same ID so that active voice settings and references remain intact.
 - **Check Voice Existence in Speak**: Modified `/api/voice/speak` to validate that the voice profile is loaded in `voiceStore` cache (returning a `404` status with a structured error when not in mock mode).
 - **Test Suite Updates**: Seeded the `voiceStore` cache with a mock entry for `voice_1` inside `voiceController.secure-id.test.js` to ensure the automated security tests continue to pass correctly.
@@ -11,5 +13,6 @@ This PR implements a robust auto-recloning recovery flow for VoiceForge cloned v
   3. Transparently retries the `/api/voice/speak` request.
 
 ## Testing
+
 - Verified all server-side tests pass: `npm run test --workspace server`
 - Verified production build builds cleanly: `npm run build`
diff --git a/server/controllers/voiceController.js b/server/controllers/voiceController.js
index 186fd745..68a7db1a 100644
--- a/server/controllers/voiceController.js
+++ b/server/controllers/voiceController.js
@@ -2,7 +2,10 @@
 // Uses the Hugging Face Gradio client to call ResembleAI/Chatterbox-Multilingual-TTS.
 import crypto from "crypto";
 import { getIsMock } from "../utils/mock.js";
-import { isValidLanguageCode, toChatterboxLanguageCode } from "../utils/languages.js";
+import {
+  isValidLanguageCode,
+  toChatterboxLanguageCode,
+} from "../utils/languages.js";
 
 // ---------------------------------------------------------------------------
 // In-memory voice store: maps voice_id to { name, audioBuffer, mimeType, expiresAt }
@@ -15,23 +18,27 @@ function parseBoundedNumber(rawValue, fallback, min) {
   return Number.isFinite(numeric) ? Math.max(min, numeric) : fallback;
 }
 
-const MAX_STORED_VOICES = parseBoundedNumber(process.env.VOICE_STORE_MAX, 20, 1);
+const MAX_STORED_VOICES = parseBoundedNumber(
+  process.env.VOICE_STORE_MAX,
+  20,
+  1,
+);
 const VOICE_STORE_TTL_MS = parseBoundedNumber(
   process.env.VOICE_STORE_TTL_MS,
   2 * 60 * 60 * 1000,
-  60_000
+  60_000,
 );
 
 const PENDING_STREAMS_MAX = parseBoundedNumber(
   process.env.PENDING_STREAMS_MAX,
   1000,
-  1
+  1,
 );
 
 const PENDING_STREAM_TTL_MS = parseBoundedNumber(
   process.env.PENDING_STREAM_TTL_MS,
   60_000,
-  1
+  1,
 );
 
 // Fix: bound the size of reference-audio uploads so a single (or repeated)
@@ -47,29 +54,35 @@ const PENDING_STREAM_TTL_MS = parseBoundedNumber(
 const MAX_VOICE_UPLOAD_BYTES = parseBoundedNumber(
   process.env.MAX_VOICE_UPLOAD_BYTES,
   12 * 1024 * 1024, // 12 MB - matches the multer limit on the clone route
-  1
+  1,
 );
 const ALLOWED_AUDIO_MIME_PREFIX = "audio/";
 
 const MOCK_AUDIO_MP3 = Buffer.from(
   "SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjYwLjE2LjEwMAAAAAAAAAAAAAAA" +
-  "//uQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8A" +
-  "AAABAAAB/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
-  "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
-  "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-  "base64"
+    "//uQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8A" +
+    "AAABAAAB/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
+    "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" +
+    "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+  "base64",
 );
 
-const STREAM_SECRET = process.env.STREAM_SECRET ?? (() => {
-  console.warn(
-    "[VoiceForge] STREAM_SECRET not set - using ephemeral key. " +
-    "All speech tokens will be invalidated on server restart. " +
-    "Set STREAM_SECRET in .env for stability."
-  );
-  return crypto.randomBytes(32).toString("hex");
-})();
+const STREAM_SECRET =
+  process.env.STREAM_SECRET ??
+  (() => {
+    console.warn(
+      "[VoiceForge] STREAM_SECRET not set - using ephemeral key. " +
+        "All speech tokens will be invalidated on server restart. " +
+        "Set STREAM_SECRET in .env for stability.",
+    );
+    return crypto.randomBytes(32).toString("hex");
+  })();
 
-const ENCRYPTION_KEY = crypto.scryptSync(STREAM_SECRET, "voiceforge-stream-salt", 32);
+const ENCRYPTION_KEY = crypto.scryptSync(
+  STREAM_SECRET,
+  "voiceforge-stream-salt",
+  32,
+);
 const IV_LENGTH = 12;
 const ALGORITHM = "aes-256-gcm";
 
@@ -82,8 +95,11 @@ function createTimeoutSignal(ms = 30000) {
 function withTimeout(promise, ms, label, abortSignal = null) {
   let timeoutId;
   const timeoutPromise = new Promise((_, reject) => {
-    timeoutId = setTimeout(() => reject(new Error(`${label} timed out after ${ms}ms`)), ms);
-    
+    timeoutId = setTimeout(
+      () => reject(new Error(`${label} timed out after ${ms}ms`)),
+      ms,
+    );
+
     if (abortSignal) {
       if (abortSignal.aborted) {
         clearTimeout(timeoutId);
@@ -96,7 +112,9 @@ function withTimeout(promise, ms, label, abortSignal = null) {
       }
     }
   });
-  return Promise.race([promise, timeoutPromise]).finally(() => clearTimeout(timeoutId));
+  return Promise.race([promise, timeoutPromise]).finally(() =>
+    clearTimeout(timeoutId),
+  );
 }
 
 function encryptToken(payload) {
@@ -111,7 +129,7 @@ function encryptToken(payload) {
   const tokenData = {
     iv: iv.toString("base64"),
     tag: authTag,
-    data: encrypted
+    data: encrypted,
   };
 
   return Buffer.from(JSON.stringify(tokenData)).toString("base64url");
@@ -125,7 +143,7 @@ function decryptToken(token) {
     const decipher = crypto.createDecipheriv(
       ALGORITHM,
       ENCRYPTION_KEY,
-      Buffer.from(iv, "base64")
+      Buffer.from(iv, "base64"),
     );
     decipher.setAuthTag(Buffer.from(tag, "base64"));
 
@@ -172,7 +190,7 @@ async function generateClonedVoice(
   targetText,
   languageCode = "en",
   voiceSettings = {},
-  abortSignal = null
+  abortSignal = null,
 ) {
   const normalizedVoiceSettings =
     voiceSettings && typeof voiceSettings === "object" ? voiceSettings : {};
@@ -180,28 +198,39 @@ async function generateClonedVoice(
     process.env.VOICE_ENGINE_SPACE || "ResembleAI/Chatterbox-Multilingual-TTS";
 
   const { client } = await import("@gradio/client");
-  const app = await withTimeout(client(spaceIdentifier), 10000, "Chatterbox client init");
+  const app = await withTimeout(
+    client(spaceIdentifier),
+    10000,
+    "Chatterbox client init",
+  );
 
   // Wrap the raw Buffer in a Blob so Gradio treats it as a file upload.
   const referenceBlob = new Blob([audioBuffer], { type: mimeType });
   const exaggeration = clampNumber(normalizedVoiceSettings.style, 0.25, 2, 0.5);
   const cfgWeight = clampNumber(normalizedVoiceSettings.stability, 0.2, 1, 0.5);
-  const temperature = clampNumber(normalizedVoiceSettings.temperature, 0.05, 5, 0.8);
-  const seed = Number.isInteger(normalizedVoiceSettings.seed) ? normalizedVoiceSettings.seed : 0;
+  const temperature = clampNumber(
+    normalizedVoiceSettings.temperature,
+    0.05,
+    5,
+    0.8,
+  );
+  const seed = Number.isInteger(normalizedVoiceSettings.seed)
+    ? normalizedVoiceSettings.seed
+    : 0;
 
   const result = await withTimeout(
     app.predict("/generate_tts_audio", [
-      targetText,       // Text string to synthesize (max 300 chars)
-      languageCode,     // Language code string (e.g. "en", "hi")
-      referenceBlob,    // Reference audio Blob
-      exaggeration,     // Exaggeration intensity float (Default: 0.5)
-      temperature,      // Generation temperature float (Default: 0.8)
-      seed,             // Seed integer (0 = randomised)
-      cfgWeight         // CFG weight / Pace factor float (Default: 0.5)
+      targetText, // Text string to synthesize (max 300 chars)
+      languageCode, // Language code string (e.g. "en", "hi")
+      referenceBlob, // Reference audio Blob
+      exaggeration, // Exaggeration intensity float (Default: 0.5)
+      temperature, // Generation temperature float (Default: 0.8)
+      seed, // Seed integer (0 = randomised)
+      cfgWeight, // CFG weight / Pace factor float (Default: 0.5)
     ]),
     30000,
     "Chatterbox predict",
-    abortSignal
+    abortSignal,
   );
 
   const audioUrl = result.data[0].url;
@@ -264,22 +293,29 @@ export async function cloneVoice(request, response, next) {
     // point, but without this check any client could still push
     // MAX_STORED_VOICES worth of arbitrarily large files (or non-audio
     // files) into `voiceStore`, where they'd be retained for VOICE_STORE_TTL_MS.
-    if (!audioFile.mimetype || !audioFile.mimetype.startsWith(ALLOWED_AUDIO_MIME_PREFIX)) {
-      response.status(400).json({ error: "Reference audio must be an audio file." });
+    if (
+      !audioFile.mimetype ||
+      !audioFile.mimetype.startsWith(ALLOWED_AUDIO_MIME_PREFIX)
+    ) {
+      response
+        .status(400)
+        .json({ error: "Reference audio must be an audio file." });
       return;
     }
     if (audioFile.buffer.length > MAX_VOICE_UPLOAD_BYTES) {
       response.status(413).json({
-        error: `Reference audio exceeds maximum allowed size of ${MAX_VOICE_UPLOAD_BYTES} bytes.`
+        error: `Reference audio exceeds maximum allowed size of ${MAX_VOICE_UPLOAD_BYTES} bytes.`,
       });
       return;
     }
 
     if (getIsMock()) {
-      console.warn("[VoiceForge] MOCK_CHATTERBOX: skipping real voice clone, returning fixture.");
+      console.warn(
+        "[VoiceForge] MOCK_CHATTERBOX: skipping real voice clone, returning fixture.",
+      );
       response.json({
         voice_id: request.body.voice_id || "mock-voice-id-00000000",
-        name: request.body.name || "VoiceForge Voice (mock)"
+        name: request.body.name || "VoiceForge Voice (mock)",
       });
       return;
     }
@@ -295,20 +331,23 @@ export async function cloneVoice(request, response, next) {
     // hash; speak() must present the matching plaintext token to use this
     // voice. The plaintext token is returned once, here, and never again.
     const ownerToken = crypto.randomBytes(24).toString("base64url");
-    const ownerTokenHash = crypto.createHash("sha256").update(ownerToken).digest("hex");
+    const ownerTokenHash = crypto
+      .createHash("sha256")
+      .update(ownerToken)
+      .digest("hex");
 
     voiceStore.set(voiceId, {
       name: request.body.name || "VoiceForge Voice",
       audioBuffer: audioFile.buffer,
       mimeType: audioFile.mimetype,
       ownerTokenHash,
-      expiresAt: Date.now() + VOICE_STORE_TTL_MS
+      expiresAt: Date.now() + VOICE_STORE_TTL_MS,
     });
 
     response.json({
       voice_id: voiceId,
       owner_token: ownerToken,
-      name: request.body.name || "VoiceForge Voice"
+      name: request.body.name || "VoiceForge Voice",
     });
   } catch (error) {
     next(error);
@@ -351,13 +390,13 @@ export async function speak(request, response, next) {
       voice_id: voiceId,
       owner_token: ownerToken,
       language_code,
-      voice_settings
+      voice_settings,
     } = request.body;
 
     if (pendingStreams.size >= PENDING_STREAMS_MAX) {
       response.status(503).json({
         error:
-          "Too many pending speech requests. Please retry after retrieving or cancelling existing audio streams."
+          "Too many pending speech requests. Please retry after retrieving or cancelling existing audio streams.",
       });
       return;
     }
@@ -367,29 +406,39 @@ export async function speak(request, response, next) {
     const trimmedVoiceId = typeof voiceId === "string" ? voiceId.trim() : "";
 
     if (!trimmedText && !trimmedVoiceId) {
-      response.status(400).json({ error: "Both text and voice_id are required." });
+      response
+        .status(400)
+        .json({ error: "Both text and voice_id are required." });
       return;
     }
     if (!trimmedText) {
-      response.status(400).json({ error: "text is required and must not be blank." });
+      response
+        .status(400)
+        .json({ error: "text is required and must not be blank." });
       return;
     }
     if (!trimmedVoiceId) {
-      response.status(400).json({ error: "voice_id is required and must not be blank." });
+      response
+        .status(400)
+        .json({ error: "voice_id is required and must not be blank." });
       return;
     }
     pruneVoiceStore();
     if (!getIsMock() && !voiceStore.has(trimmedVoiceId)) {
-      response.status(404).json({ error: "Voice profile not found. Please re-clone your voice." });
+      response.status(404).json({
+        error: "Voice profile not found. Please re-clone your voice.",
+      });
       return;
     }
     if (trimmedText.length > 300) {
-      response.status(400).json({ error: "Text too long; maximum 300 characters for Chatterbox TTS." });
+      response.status(400).json({
+        error: "Text too long; maximum 300 characters for Chatterbox TTS.",
+      });
       return;
     }
     if (!isValidLanguageCode(language_code)) {
       response.status(400).json({
-        error: `Unsupported language code "${language_code}". See Chatterbox Multilingual docs for supported codes.`
+        error: `Unsupported language code "${language_code}". See Chatterbox Multilingual docs for supported codes.`,
       });
       return;
     }
@@ -401,19 +450,27 @@ export async function speak(request, response, next) {
       pruneVoiceStore();
       const voiceEntry = voiceStore.get(trimmedVoiceId);
       if (!voiceEntry) {
-        response.status(404).json({ error: "Voice profile not found. Please re-clone your voice." });
+        response.status(404).json({
+          error: "Voice profile not found. Please re-clone your voice.",
+        });
         return;
       }
-      const trimmedOwnerToken = typeof ownerToken === "string" ? ownerToken.trim() : "";
+      const trimmedOwnerToken =
+        typeof ownerToken === "string" ? ownerToken.trim() : "";
       const providedHash = trimmedOwnerToken
         ? crypto.createHash("sha256").update(trimmedOwnerToken).digest("hex")
         : null;
       const isAuthorized =
         !!providedHash &&
         providedHash.length === voiceEntry.ownerTokenHash.length &&
-        crypto.timingSafeEqual(Buffer.from(providedHash), Buffer.from(voiceEntry.ownerTokenHash));
+        crypto.timingSafeEqual(
+          Buffer.from(providedHash),
+          Buffer.from(voiceEntry.ownerTokenHash),
+        );
       if (!isAuthorized) {
-        response.status(403).json({ error: "Invalid or missing owner_token for this voice_id." });
+        response
+          .status(403)
+          .json({ error: "Invalid or missing owner_token for this voice_id." });
         return;
       }
     }
@@ -421,38 +478,60 @@ export async function speak(request, response, next) {
     const defaultVoiceSettings = {
       stability: 0.45,
       style: 0.2,
-      temperature: 0.8
+      temperature: 0.8,
     };
 
-    
     const sanitizedSettings = {};
-if (voice_settings !== undefined && voice_settings !== null) {
-  if (typeof voice_settings !== "object" || Array.isArray(voice_settings)) {
-    response.status(400).json({ error: "voice_settings must be a plain object." });
-    return;
-  }
-  if (voice_settings.stability !== undefined) {
-    if (typeof voice_settings.stability !== "number" || !Number.isFinite(voice_settings.stability) || voice_settings.stability < 0 || voice_settings.stability > 1) {
-      response.status(400).json({ error: "stability must be a finite number between 0 and 1." });
-      return;
-    }
-    sanitizedSettings.stability = voice_settings.stability;
-  }
-  if (voice_settings.style !== undefined) {
-    if (typeof voice_settings.style !== "number" || !Number.isFinite(voice_settings.style) || voice_settings.style < 0 || voice_settings.style > 1) {
-      response.status(400).json({ error: "style must be a finite number between 0 and 1." });
-      return;
-    }
-    sanitizedSettings.style = voice_settings.style;
-  }
-  if (voice_settings.temperature !== undefined) {
-    if (typeof voice_settings.temperature !== "number" || !Number.isFinite(voice_settings.temperature) || voice_settings.temperature < 0.05 || voice_settings.temperature > 5) {
-      response.status(400).json({ error: "temperature must be a finite number between 0.05 and 5." });
-      return;
+    if (voice_settings !== undefined && voice_settings !== null) {
+      if (typeof voice_settings !== "object" || Array.isArray(voice_settings)) {
+        response
+          .status(400)
+          .json({ error: "voice_settings must be a plain object." });
+        return;
+      }
+      if (voice_settings.stability !== undefined) {
+        if (
+          typeof voice_settings.stability !== "number" ||
+          !Number.isFinite(voice_settings.stability) ||
+          voice_settings.stability < 0 ||
+          voice_settings.stability > 1
+        ) {
+          response.status(400).json({
+            error: "stability must be a finite number between 0 and 1.",
+          });
+          return;
+        }
+        sanitizedSettings.stability = voice_settings.stability;
+      }
+      if (voice_settings.style !== undefined) {
+        if (
+          typeof voice_settings.style !== "number" ||
+          !Number.isFinite(voice_settings.style) ||
+          voice_settings.style < 0 ||
+          voice_settings.style > 1
+        ) {
+          response
+            .status(400)
+            .json({ error: "style must be a finite number between 0 and 1." });
+          return;
+        }
+        sanitizedSettings.style = voice_settings.style;
+      }
+      if (voice_settings.temperature !== undefined) {
+        if (
+          typeof voice_settings.temperature !== "number" ||
+          !Number.isFinite(voice_settings.temperature) ||
+          voice_settings.temperature < 0.05 ||
+          voice_settings.temperature > 5
+        ) {
+          response.status(400).json({
+            error: "temperature must be a finite number between 0.05 and 5.",
+          });
+          return;
+        }
+        sanitizedSettings.temperature = voice_settings.temperature;
+      }
     }
-    sanitizedSettings.temperature = voice_settings.temperature;
-  }
-}
     const mergedSettings = { ...defaultVoiceSettings, ...sanitizedSettings };
 
     // Cryptographically secure, 128-bit identifier. Unlike Math.random(), this
@@ -465,11 +544,18 @@ if (voice_settings !== undefined && voice_settings !== null) {
     }, PENDING_STREAM_TTL_MS);
     // Do not keep the event loop alive solely for this cleanup timer.
     timeout.unref?.();
-    
-    pendingStreams.set(speechId, { text: trimmedText, voiceId: trimmedVoiceId, mergedSettings, timeout });
+
+    pendingStreams.set(speechId, {
+      text: trimmedText,
+      voiceId: trimmedVoiceId,
+      mergedSettings,
+      timeout,
+    });
 
     if (getIsMock()) {
-      console.warn(`[VoiceForge] MOCK_CHATTERBOX: speak enqueued mock stream for speechId=${speechId}`);
+      console.warn(
+        `[VoiceForge] MOCK_CHATTERBOX: speak enqueued mock stream for speechId=${speechId}`,
+      );
     }
     const expiresAt = Date.now() + 60000;
     const token = encryptToken({
@@ -478,12 +564,12 @@ if (voice_settings !== undefined && voice_settings !== null) {
       voiceId: trimmedVoiceId,
       language_code,
       voice_settings: mergedSettings,
-      expiresAt
+      expiresAt,
     });
 
     response.json({
       speechId: token,
-      audioUrl: `/api/voice/speak/stream?t=${token}`
+      audioUrl: `/api/voice/speak/stream?t=${token}`,
     });
   } catch (error) {
     next(error);
@@ -506,7 +592,8 @@ export async function streamSpeech(request, response, next) {
       response.status(400).json({ error: "Missing stream token." });
       return;
     }
-    const { speechId, text, voiceId, language_code, voice_settings } = decryptToken(token);
+    const { speechId, text, voiceId, language_code, voice_settings } =
+      decryptToken(token);
 
     // Fix (replay protection): decryptToken only checks that the token is
     // authentic and not expired - it does not check that it hasn't already
@@ -525,7 +612,8 @@ export async function streamSpeech(request, response, next) {
     const pendingEntry = speechId ? deletePendingStream(speechId) : undefined;
     if (!pendingEntry) {
       response.status(410).json({
-        error: "This speech token has already been used or has expired. Please request a new one."
+        error:
+          "This speech token has already been used or has expired. Please request a new one.",
       });
       return;
     }
@@ -543,7 +631,9 @@ export async function streamSpeech(request, response, next) {
     pruneVoiceStore();
     const voiceEntry = voiceStore.get(voiceId);
     if (!voiceEntry) {
-      response.status(404).json({ error: "Voice profile not found. Please re-clone your voice." });
+      response.status(404).json({
+        error: "Voice profile not found. Please re-clone your voice.",
+      });
       return;
     }
 
@@ -567,7 +657,7 @@ export async function streamSpeech(request, response, next) {
         text,
         chatterboxLanguage,
         voice_settings,
-        generateController.signal
+        generateController.signal,
       );
     } catch (error) {
       if (error.message === "Request aborted by client") {
@@ -594,13 +684,18 @@ export async function streamSpeech(request, response, next) {
       clearTimeout(timer);
     } catch (error) {
       if (error.name === "AbortError") {
-        response.status(504).json({ error: "Failed to fetch generated audio from Chatterbox due to timeout." });
+        response.status(504).json({
+          error:
+            "Failed to fetch generated audio from Chatterbox due to timeout.",
+        });
         return;
       }
       throw error;
     }
     if (!upstream.ok) {
-      response.status(502).json({ error: "Failed to fetch generated audio from Chatterbox." });
+      response
+        .status(502)
+        .json({ error: "Failed to fetch generated audio from Chatterbox." });
       return;
     }
 
@@ -611,7 +706,11 @@ export async function streamSpeech(request, response, next) {
     const reader = upstream.body.getReader();
 
     request.on("close", () => {
-      reader.cancel().catch((err) => console.error("Error cancelling Chatterbox reader:", err));
+      reader
+        .cancel()
+        .catch((err) =>
+          console.error("Error cancelling Chatterbox reader:", err),
+        );
     });
 
     while (true) {
@@ -635,6 +734,8 @@ export function getStatus(request, response) {
   response.json({
     isMock: getIsMock(),
     engine: "ResembleAI/Chatterbox-Multilingual-TTS",
-    space: process.env.VOICE_ENGINE_SPACE || "ResembleAI/Chatterbox-Multilingual-TTS"
+    space:
+      process.env.VOICE_ENGINE_SPACE ||
+      "ResembleAI/Chatterbox-Multilingual-TTS",
   });
 }
diff --git a/server/data/voiceforge.db b/server/data/voiceforge.db
new file mode 100644
index 00000000..d7d4f0bb
Binary files /dev/null and b/server/data/voiceforge.db differ
diff --git a/server/index.js b/server/index.js
index 4a40b385..4d4c1d61 100644
--- a/server/index.js
+++ b/server/index.js
@@ -16,8 +16,8 @@ dotenv.config({ path: path.resolve(__dirname, "../.env") });
 if (getIsMock()) {
   console.warn(
     "\x1b[33m[VoiceForge] Mock mode active — Chatterbox calls are stubbed." +
-    " Voice clone returns a fixture voice_id; TTS streams silent audio." +
-    " Set MOCK_CHATTERBOX=false to use the real Hugging Face engine.\x1b[0m"
+      " Voice clone returns a fixture voice_id; TTS streams silent audio." +
+      " Set MOCK_CHATTERBOX=false to use the real Hugging Face engine.\x1b[0m",
   );
 }
 
@@ -31,8 +31,7 @@ const globalLimiter = rateLimit({
   max: 100,
   standardHeaders: true,
   legacyHeaders: false,
-  handler: (_req, res) =>
-    res.status(429).json({ error: "Too Many Requests" })
+  handler: (_req, res) => res.status(429).json({ error: "Too Many Requests" }),
 });
 
 app.use(globalLimiter);
@@ -53,7 +52,7 @@ app.use("/api/voice", voiceRoutes);
 app.use((error, _request, response, _next) => {
   console.error(error);
   response.status(error.status || 500).json({
-    error: error.message || "Unexpected VoiceForge server error."
+    error: error.message || "Unexpected VoiceForge server error.",
   });
 });
 
diff --git a/server/middleware/upload.js b/server/middleware/upload.js
index 42afc09f..cfd6d264 100644
--- a/server/middleware/upload.js
+++ b/server/middleware/upload.js
@@ -7,7 +7,7 @@ const ALLOWED_MIME_TYPES = [
   "audio/mpeg",
   "audio/mp4",
   "audio/ogg",
-  "audio/flac"
+  "audio/flac",
 ];
 
 const upload = multer({
@@ -16,19 +16,19 @@ const upload = multer({
     fileSize: 12 * 1024 * 1024,
     files: 1,
     fields: 5,
-    parts: 6
+    parts: 6,
   },
   fileFilter: (_request, file, callback) => {
     if (!ALLOWED_MIME_TYPES.includes(file.mimetype)) {
       callback(
         new Error(
-          "Invalid audio format. Allowed types: webm, wav, mp3, mp4, ogg, flac."
-        )
+          "Invalid audio format. Allowed types: webm, wav, mp3, mp4, ogg, flac.",
+        ),
       );
       return;
     }
     callback(null, true);
-  }
+  },
 });
 
-export default upload;
\ No newline at end of file
+export default upload;
diff --git a/server/routes/voice.js b/server/routes/voice.js
index a4ffec7a..86a4fc65 100644
--- a/server/routes/voice.js
+++ b/server/routes/voice.js
@@ -1,7 +1,12 @@
 // Defines VoiceForge voice cloning and speech generation API routes.
 import { Router } from "express";
 import rateLimit from "express-rate-limit";
-import { cloneVoice, speak, streamSpeech, getStatus } from "../controllers/voiceController.js";
+import {
+  cloneVoice,
+  speak,
+  streamSpeech,
+  getStatus,
+} from "../controllers/voiceController.js";
 import upload from "../middleware/upload.js";
 
 const router = Router();
@@ -12,7 +17,9 @@ const cloneRateLimit = rateLimit({
   max: 5,
   standardHeaders: true,
   legacyHeaders: false,
-  message: { error: "Too many voice clone requests. Please try again in an hour." },
+  message: {
+    error: "Too many voice clone requests. Please try again in an hour.",
+  },
 });
 
 // Limit TTS/speak requests: allow 30 per minute per IP.
@@ -33,17 +40,17 @@ router.get("/status", getStatus);
 router.use((err, req, res, next) => {
   if (err.code === "LIMIT_FILE_SIZE") {
     return res.status(413).json({
-      error: "Audio file too large. Maximum allowed size is 12MB."
+      error: "Audio file too large. Maximum allowed size is 12MB.",
     });
   }
   if (err.code === "LIMIT_FILE_COUNT") {
     return res.status(400).json({
-      error: "Only one audio file is allowed per request."
+      error: "Only one audio file is allowed per request.",
     });
   }
   if (err.code === "LIMIT_UNEXPECTED_FILE") {
     return res.status(400).json({
-      error: "Unexpected file field received."
+      error: "Unexpected file field received.",
     });
   }
   if (
diff --git a/server/test/helpers.js b/server/test/helpers.js
index a1e0fa21..80a099d7 100644
--- a/server/test/helpers.js
+++ b/server/test/helpers.js
@@ -1,7 +1,12 @@
 // Shared lightweight Express request/response mocks and a fetch
 // stub used by the voiceController test suites. Keeps tests dependency-free.
 
-export function createRequest({ headers = {}, body = {}, params = {}, query = {} } = {}) {
+export function createRequest({
+  headers = {},
+  body = {},
+  params = {},
+  query = {},
+} = {}) {
   const lowerHeaders = {};
   for (const [key, value] of Object.entries(headers)) {
     lowerHeaders[key.toLowerCase()] = value;
@@ -15,7 +20,7 @@ export function createRequest({ headers = {}, body = {}, params = {}, query = {}
     },
     on() {
       // No-op: streamSpeech registers a "close" listener we do not exercise.
-    }
+    },
   };
 }
 
@@ -47,13 +52,17 @@ export function createResponse() {
     },
     end() {
       this.ended = true;
-    }
+    },
   };
 }
 
 // Returns a fetch stub that yields a single-chunk audio stream and records
 // the upstream call so tests can assert on the request body.
-export function createFetchStub({ ok = true, status = 200, chunk = "audio-bytes" } = {}) {
+export function createFetchStub({
+  ok = true,
+  status = 200,
+  chunk = "audio-bytes",
+} = {}) {
   const calls = [];
   const stub = async (url, options) => {
     calls.push({ url, options });
@@ -63,7 +72,7 @@ export function createFetchStub({ ok = true, status = 200, chunk = "audio-bytes"
         status,
         async text() {
           return "upstream error";
-        }
+        },
       };
     }
     let delivered = false;
@@ -80,10 +89,10 @@ export function createFetchStub({ ok = true, status = 200, chunk = "audio-bytes"
               delivered = true;
               return { done: false, value: Buffer.from(chunk) };
             },
-            async cancel() {}
+            async cancel() {},
           };
-        }
-      }
+        },
+      },
     };
   };
   stub.calls = calls;
diff --git a/server/test/voiceController.mock-mode.test.js b/server/test/voiceController.mock-mode.test.js
index a368e90c..93738169 100644
--- a/server/test/voiceController.mock-mode.test.js
+++ b/server/test/voiceController.mock-mode.test.js
@@ -14,7 +14,7 @@ import {
   cloneVoice,
   speak,
   streamSpeech,
-  getStatus
+  getStatus,
 } from "../controllers/voiceController.js";
 
 // ---------------------------------------------------------------------------
@@ -50,12 +50,16 @@ test("MOCK_CHATTERBOX: cloneVoice returns fixture voice_id", async (t) => {
   request.file = {
     buffer: Buffer.from("fake-audio"),
     mimetype: "audio/webm",
-    originalname: "test.webm"
+    originalname: "test.webm",
   };
   const response = createResponse();
 
   const err = await invoke(cloneVoice, request, response);
-  assert.equal(err, undefined, "cloneVoice must not call next(error) in mock mode");
+  assert.equal(
+    err,
+    undefined,
+    "cloneVoice must not call next(error) in mock mode",
+  );
   assert.equal(response.jsonBody?.voice_id, "mock-voice-id-00000000");
   assert.equal(response.jsonBody?.name, "Contributor test voice");
 });
@@ -79,7 +83,7 @@ test("MOCK_CHATTERBOX: speak enqueues a stream", async (t) => {
   t.after(restore);
 
   const request = createRequest({
-    body: { text: "Hello from mock", voice_id: "mock-voice-id-00000000" }
+    body: { text: "Hello from mock", voice_id: "mock-voice-id-00000000" },
   });
   const response = createResponse();
 
@@ -88,7 +92,7 @@ test("MOCK_CHATTERBOX: speak enqueues a stream", async (t) => {
   assert.ok(response.jsonBody?.speechId, "speechId must be present");
   assert.ok(
     response.jsonBody?.audioUrl?.includes(response.jsonBody.speechId),
-    "audioUrl must embed the speechId"
+    "audioUrl must embed the speechId",
   );
 });
 
@@ -96,7 +100,9 @@ test("MOCK_CHATTERBOX: speak still rejects when text is missing", async (t) => {
   const restore = withEnv({ MOCK_CHATTERBOX: "true", NODE_ENV: "development" });
   t.after(restore);
 
-  const request = createRequest({ body: { voice_id: "mock-voice-id-00000000" } });
+  const request = createRequest({
+    body: { voice_id: "mock-voice-id-00000000" },
+  });
   const response = createResponse();
   await invoke(speak, request, response);
   assert.equal(response.statusCode, 400);
@@ -112,7 +118,7 @@ test("MOCK_CHATTERBOX: streamSpeech responds with audio/mpeg and a non-empty bod
 
   // 1. Enqueue a mock speech entry.
   const speakReq = createRequest({
-    body: { text: "Hello mock stream", voice_id: "mock-voice-id-00000000" }
+    body: { text: "Hello mock stream", voice_id: "mock-voice-id-00000000" },
   });
   const speakRes = createResponse();
   const speakErr = await invoke(speak, speakReq, speakRes);
@@ -124,9 +130,16 @@ test("MOCK_CHATTERBOX: streamSpeech responds with audio/mpeg and a non-empty bod
   const streamRes = createResponse();
   const err = await invoke(streamSpeech, streamReq, streamRes);
 
-  assert.equal(err, undefined, "streamSpeech must not call next(error) in mock mode");
+  assert.equal(
+    err,
+    undefined,
+    "streamSpeech must not call next(error) in mock mode",
+  );
   assert.equal(streamRes.headers["Content-Type"], "audio/mpeg");
-  assert.ok(streamRes.ended, "response must be ended after streaming mock audio");
+  assert.ok(
+    streamRes.ended,
+    "response must be ended after streaming mock audio",
+  );
 });
 
 test("MOCK_CHATTERBOX: streamSpeech returns 400 for an invalid speechId", async (t) => {
@@ -152,12 +165,16 @@ test("MOCK_CHATTERBOX is ignored in production: cloneVoice still runs (no key re
   request.file = {
     buffer: Buffer.from("fake-audio"),
     mimetype: "audio/webm",
-    originalname: "test.webm"
+    originalname: "test.webm",
   };
   const response = createResponse();
   const err = await invoke(cloneVoice, request, response);
   // Chatterbox requires no API key so cloneVoice should succeed even in production.
-  assert.equal(err, undefined, "cloneVoice must not error in production — no key needed");
+  assert.equal(
+    err,
+    undefined,
+    "cloneVoice must not error in production — no key needed",
+  );
   assert.ok(response.jsonBody?.voice_id, "must return a voice_id");
 });
 
@@ -168,7 +185,7 @@ test("MOCK_CHATTERBOX is ignored in production: cloneVoice still runs (no key re
 test("getStatus returns correct flags when in development and mock is true", async (t) => {
   const restore = withEnv({
     MOCK_CHATTERBOX: "true",
-    NODE_ENV: "development"
+    NODE_ENV: "development",
   });
   t.after(restore);
 
@@ -183,7 +200,7 @@ test("getStatus returns correct flags when in development and mock is true", asy
 test("getStatus returns correct flags when in production and mock is true (ignored in production)", async (t) => {
   const restore = withEnv({
     MOCK_CHATTERBOX: "true",
-    NODE_ENV: "production"
+    NODE_ENV: "production",
   });
   t.after(restore);
 
diff --git a/server/test/voiceController.secure-id.test.js b/server/test/voiceController.secure-id.test.js
index 42e454ef..560e5925 100644
--- a/server/test/voiceController.secure-id.test.js
+++ b/server/test/voiceController.secure-id.test.js
@@ -11,7 +11,7 @@ voiceStore.set("voice_1", {
   name: "voice_1",
   audioBuffer: Buffer.from("fake-audio"),
   mimeType: "audio/webm",
-  expiresAt: Date.now() + 2 * 60 * 60 * 1000
+  expiresAt: Date.now() + 2 * 60 * 60 * 1000,
 });
 
 // Fix (Broken Server Unit Tests): these tests exercise token generation,
@@ -25,7 +25,7 @@ process.env.MOCK_CHATTERBOX = "true";
 
 async function callSpeak(speak, overrides = {}) {
   const request = createRequest({
-    body: { text: "Hello there", voice_id: "voice_1", ...overrides }
+    body: { text: "Hello there", voice_id: "voice_1", ...overrides },
   });
   const response = createResponse();
   const error = await invoke(speak, request, response);
@@ -36,7 +36,7 @@ async function callSpeak(speak, overrides = {}) {
 test("speechId is a cryptographically secure token", async () => {
   const { speak } = await import("../controllers/voiceController.js");
   const payload = await callSpeak(speak);
-  
+
   // Verify it is a valid base64url-encoded JSON object representing our token metadata
   const rawJson = Buffer.from(payload.speechId, "base64url").toString("utf8");
   const parsed = JSON.parse(rawJson);
@@ -61,7 +61,7 @@ test("audioUrl embeds the matching speechId", async () => {
   assert.equal(
     payload.audioUrl,
     `/api/voice/speak/stream?t=${payload.speechId}`,
-    "audioUrl should reference the generated speechId via query parameter"
+    "audioUrl should reference the generated speechId via query parameter",
   );
 });
 
@@ -101,16 +101,16 @@ test("pending-stream store rejects new /speak calls when full", async (t) => {
   await invoke(
     speak,
     createRequest({ body: { text: "Hello there", voice_id: "voice_1" } }),
-    overflowResponse
+    overflowResponse,
   );
   assert.equal(
     overflowResponse.statusCode,
     503,
-    "new /speak requests should be rejected when the pending stream store is full"
+    "new /speak requests should be rejected when the pending stream store is full",
   );
   assert.equal(
     overflowResponse.jsonBody.error,
-    "Too many pending speech requests. Please retry after retrieving or cancelling existing audio streams."
+    "Too many pending speech requests. Please retry after retrieving or cancelling existing audio streams.",
   );
 
   const oldest = created[0];
@@ -118,22 +118,31 @@ test("pending-stream store rejects new /speak calls when full", async (t) => {
   await invoke(
     streamSpeech,
     createRequest({ query: { t: oldest.speechId } }),
-    oldestResponse
+    oldestResponse,
+  );
+  assert.equal(
+    oldestResponse.ended,
+    true,
+    "oldest entry should still stream when the store is full",
   );
-  assert.equal(oldestResponse.ended, true, "oldest entry should still stream when the store is full");
 
   const newest = created[created.length - 1];
   const newestResponse = createResponse();
   await invoke(
     streamSpeech,
     createRequest({ query: { t: newest.speechId } }),
-    newestResponse
+    newestResponse,
+  );
+  assert.equal(
+    newestResponse.ended,
+    true,
+    "newest entry should still stream when the store is full",
   );
-  assert.equal(newestResponse.ended, true, "newest entry should still stream when the store is full");
 });
 
 test("expired speech token throws 403 error", async (t) => {
-  const { speak, streamSpeech } = await import("../controllers/voiceController.js");
+  const { speak, streamSpeech } =
+    await import("../controllers/voiceController.js");
 
   const originalNow = Date.now;
   t.after(() => {
@@ -150,7 +159,7 @@ test("expired speech token throws 403 error", async (t) => {
   const streamReq = createRequest({ query: { t: payload.speechId } });
   const streamRes = createResponse();
   const err = await invoke(streamSpeech, streamReq, streamRes);
-  
+
   assert.ok(err, "should call next with an error for expired token");
   assert.equal(err.status, 403);
   assert.equal(err.message, "Speech stream has expired.");
diff --git a/tests/permissions.spec.js b/tests/permissions.spec.js
index be1e1c13..c2f95148 100644
--- a/tests/permissions.spec.js
+++ b/tests/permissions.spec.js
@@ -1,34 +1,44 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from "@playwright/test";
 
-test.describe('Hardware Permissions', () => {
-
-  test('Should proceed to Call screen and show video when permissions are granted', async ({ context, page }) => {
+test.describe("Hardware Permissions", () => {
+  test("Should proceed to Call screen and show video when permissions are granted", async ({
+    context,
+    page,
+  }) => {
     // Grant both camera and microphone permissions
-    await context.grantPermissions(['camera', 'microphone']);
+    await context.grantPermissions(["camera", "microphone"]);
 
-    await page.goto('/');
+    await page.goto("/");
 
     // Navigate to the Call tab using the specific nav bar button
-    await page.getByLabel('VoiceForge pages').getByRole('button', { name: 'Call' }).click();
+    await page
+      .getByLabel("VoiceForge pages")
+      .getByRole("button", { name: "Call" })
+      .click();
 
     // Verify we are on the Call page by looking for specific heading
-    const heading = page.getByRole('heading', { name: /Call control room/i });
+    const heading = page.getByRole("heading", { name: /Call control room/i });
     await expect(heading).toBeVisible();
 
     // Verify that the video element is present
-    const videoElement = page.locator('video').first();
+    const videoElement = page.locator("video").first();
     await expect(videoElement).toBeVisible();
 
     // Ensure there is no camera error message
     await expect(page.getByText(/Camera access failed/i)).not.toBeVisible();
   });
 
-  test('Should show error messages when permissions are denied', async ({ page }) => {
+  test("Should show error messages when permissions are denied", async ({
+    page,
+  }) => {
     // Mock the browser denying hardware access
     await page.addInitScript(() => {
       // Override getUserMedia to always reject with a permission denied error
-      const mockGetUserMedia = () => Promise.reject(new DOMException('Permission denied', 'NotAllowedError'));
-      
+      const mockGetUserMedia = () =>
+        Promise.reject(
+          new DOMException("Permission denied", "NotAllowedError"),
+        );
+
       if (navigator.mediaDevices) {
         navigator.mediaDevices.getUserMedia = mockGetUserMedia;
       } else {
@@ -37,10 +47,10 @@ test.describe('Hardware Permissions', () => {
     });
 
     // Start on the main page (Onboarding)
-    await page.goto('/');
+    await page.goto("/");
 
     // Try to start recording (microphone)
-    const recordBtn = page.getByRole('button', { name: /Start recording/i });
+    const recordBtn = page.getByRole("button", { name: /Start recording/i });
     await expect(recordBtn).toBeVisible();
     await recordBtn.click();
 
@@ -48,10 +58,13 @@ test.describe('Hardware Permissions', () => {
     await expect(page.getByText(/Microphone access denied/i)).toBeVisible();
 
     // Navigate to the Call tab (camera)
-    await page.getByLabel('VoiceForge pages').getByRole('button', { name: 'Call' }).click();
+    await page
+      .getByLabel("VoiceForge pages")
+      .getByRole("button", { name: "Call" })
+      .click();
 
     // Verify we reached the Call page
-    const heading = page.getByRole('heading', { name: /Call control room/i });
+    const heading = page.getByRole("heading", { name: /Call control room/i });
     await expect(heading).toBeVisible();
 
     // Verify camera error appears