diff --git a/App.tsx b/App.tsx
index 519a5ea..8c20fc8 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,11 +1,10 @@
-
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import TypingArea from './components/TypingArea';
 import StatsOverlay from './components/StatsOverlay';
-import { TestStatus, TypingStats, TestConfig, Quote } from './types';
+import { TestStatus, InputMode, TypingStats, TestConfig, Quote } from './types';
 import { DEFAULT_QUOTES, DURATIONS } from './constants';
 
-// Add type definition for Web Speech API
+// Web Speech API type declarations
 declare global {
   interface Window {
     SpeechRecognition: any;
@@ -13,52 +12,48 @@ declare global {
   }
 }
 
+const EMPTY_STATS: TypingStats = {
+  wpm: 0,
+  accuracy: 100,
+  charactersTyped: 0,
+  totalKeystrokes: 0,
+  incorrectKeystrokes: 0,
+  timeTaken: 0,
+  wordsTyped: 0,
+};
+
 const App: React.FC = () => {
-  // State
   const [isDark, setIsDark] = useState(true);
   const [status, setStatus] = useState<TestStatus>(TestStatus.IDLE);
+  const [inputMode, setInputMode] = useState<InputMode>(InputMode.VOICE);
   const [config, setConfig] = useState<TestConfig>({ duration: 30 });
   const [quote, setQuote] = useState<Quote>(DEFAULT_QUOTES[0]);
   const [userInput, setUserInput] = useState('');
   const [timeLeft, setTimeLeft] = useState(config.duration);
   const [isListening, setIsListening] = useState(false);
+  const [sessionStats, setSessionStats] = useState<TypingStats>({ ...EMPTY_STATS });
 
-  // Cumulative stats for the whole test session
-  const [sessionStats, setSessionStats] = useState<TypingStats>({
-    wpm: 0,
-    accuracy: 100,
-    charactersTyped: 0,
-    totalKeystrokes: 0,
-    incorrectKeystrokes: 0,
-    timeTaken: 0
-  });
-
-  // Refs
   const timerRef = useRef<number | null>(null);
   const startTimeRef = useRef<number | null>(null);
-  const statsRef = useRef(sessionStats);
   const recognitionRef = useRef<any>(null);
 
-  // Ref to hold latest state/handlers to avoid stale closures in event listeners
+  // Synchronously update this ref during render so speech callbacks
+  // always see the freshest state without stale closures.
   const latestRef = useRef({
     status,
     isListening,
     quote,
-    sessionStats,
-    handleSpeechInput: (val: string) => { } // Placeholder
+    handleSpeechInput: (_val: string) => {},
   });
-
-  // Keep ref in sync for interval access
-  useEffect(() => {
-    statsRef.current = sessionStats;
-  }, [sessionStats]);
+  latestRef.current.status = status;
+  latestRef.current.isListening = isListening;
+  latestRef.current.quote = quote;
 
   const getRandomQuote = (currentQuoteText?: string): Quote => {
-    let filtered = DEFAULT_QUOTES;
-    if (currentQuoteText) {
-      filtered = DEFAULT_QUOTES.filter(q => q.text !== currentQuoteText);
-    }
-    return filtered[Math.floor(Math.random() * filtered.length)];
+    const pool = currentQuoteText
+      ? DEFAULT_QUOTES.filter((q) => q.text !== currentQuoteText)
+      : DEFAULT_QUOTES;
+    return pool[Math.floor(Math.random() * pool.length)];
   };
 
   const finishTest = useCallback(() => {
@@ -73,162 +68,209 @@ const App: React.FC = () => {
     setStatus(TestStatus.FINISHED);
   }, []);
 
-  const resetTest = useCallback((newDuration?: number) => {
-    if (timerRef.current) {
-      clearInterval(timerRef.current);
-      timerRef.current = null;
-    }
-    if (recognitionRef.current) {
-      recognitionRef.current.stop();
-    }
-
-    const d = newDuration ?? config.duration;
-    setStatus(TestStatus.IDLE);
-    setUserInput('');
-    setIsListening(false);
-    setTimeLeft(d);
-    setQuote(getRandomQuote());
-    setSessionStats({
-      wpm: 0,
-      accuracy: 100,
-      charactersTyped: 0,
-      totalKeystrokes: 0,
-      incorrectKeystrokes: 0,
-      timeTaken: 0
-    });
-    startTimeRef.current = null;
-  }, [config.duration]);
-
-  // Handle Speech Input Definition
-  const handleSpeechInput = (value: string) => {
-    if (status === TestStatus.FINISHED) return;
-
-    // Normalization helper (lowercase, remove punctuation)
-    const normalize = (str: string) => str.toLowerCase().replace(/[^\w\s]/g, '');
-
-    // Split target into words, keeping their original punctuation for reconstruction if needed
-    // But simply, we want to match against the *words* of the target.
-    const targetWords = quote.text.split(' ');
-    const spokenWords = value.trim().split(' ');
-
-    let matchedWordCount = 0;
+  const resetTest = useCallback(
+    (newDuration?: number) => {
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+      if (recognitionRef.current) {
+        try {
+          recognitionRef.current.stop();
+        } catch (_) {}
+      }
+      const d = newDuration ?? config.duration;
+      setStatus(TestStatus.IDLE);
+      setUserInput('');
+      setIsListening(false);
+      setTimeLeft(d);
+      setQuote(getRandomQuote());
+      setSessionStats({ ...EMPTY_STATS });
+      startTimeRef.current = null;
+    },
+    [config.duration]
+  );
 
-    // Check how many words match from the beginning
-    // We compare normalized spoken words against normalized target words
-    for (let i = 0; i < spokenWords.length && i < targetWords.length; i++) {
-      const spoken = normalize(spokenWords[i]);
-      const target = normalize(targetWords[i]);
+  // ─── Voice input handler ──────────────────────────────────────────────────
+
+  /**
+   * Called on every speech recognition result (including interim).
+   * Builds a prefix-matched input string from the transcript.
+   *
+   * BUG FIXED: original code used .join('') which concatenated speech
+   * segments without spaces. Now we trim each segment and join with ' '.
+   */
+  const handleSpeechInput = useCallback(
+    (value: string) => {
+      // Read the latest quote from the ref to avoid stale closures
+      const currentQuote = latestRef.current.quote;
+      if (latestRef.current.status === TestStatus.FINISHED) return;
+
+      const normalize = (str: string) =>
+        str.toLowerCase().replace(/[^\w\s]/g, '').trim();
+
+      const targetWords = currentQuote.text.split(' ');
+      const spokenWords = value.trim().split(/\s+/).filter(Boolean);
+
+      let matchedWordCount = 0;
+      for (
+        let i = 0;
+        i < spokenWords.length && i < targetWords.length;
+        i++
+      ) {
+        if (normalize(spokenWords[i]) === normalize(targetWords[i])) {
+          matchedWordCount++;
+        } else {
+          break;
+        }
+      }
 
-      if (spoken === target) {
-        matchedWordCount++;
-      } else {
-        break;
+      if (matchedWordCount > 0) {
+        const constructedInput = targetWords
+          .slice(0, matchedWordCount)
+          .join(' ');
+        // Append trailing space if more words remain (visual cue)
+        const displayInput =
+          matchedWordCount < targetWords.length
+            ? constructedInput + ' '
+            : constructedInput;
+
+        setUserInput(displayInput);
+
+        // Completed entire quote
+        if (matchedWordCount === targetWords.length) {
+          setSessionStats((prev) => ({
+            ...prev,
+            charactersTyped: prev.charactersTyped + constructedInput.length,
+            wordsTyped: prev.wordsTyped + matchedWordCount,
+          }));
+
+          setUserInput('');
+          // Stop recognition so the buffer clears; onend will restart it
+          if (recognitionRef.current) {
+            try {
+              recognitionRef.current.stop();
+            } catch (_) {}
+          }
+          setQuote(getRandomQuote(currentQuote.text));
+        }
       }
-    }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [] // intentionally empty — we read all state from latestRef
+  );
 
-    // Reconstruction:
-    let constructedInput = '';
-    if (matchedWordCount > 0) {
-      constructedInput = targetWords.slice(0, matchedWordCount).join(' ');
-      if (matchedWordCount < targetWords.length) {
-        constructedInput += ' ';
+  // Keep the latest handler in latestRef (synchronous, so recognition
+  // callbacks see the current version without waiting for an effect).
+  latestRef.current.handleSpeechInput = handleSpeechInput;
+
+  // ─── Keyboard input handler ───────────────────────────────────────────────
+
+  const handleKeyInput = useCallback(
+    (value: string) => {
+      if (status !== TestStatus.RUNNING) return;
+      setUserInput(value);
+
+      // Check for quote completion (exact match)
+      if (value === quote.text) {
+        setSessionStats((prev) => ({
+          ...prev,
+          charactersTyped: prev.charactersTyped + value.length,
+          wordsTyped: prev.wordsTyped + quote.text.split(' ').length,
+        }));
+        setUserInput('');
+        setQuote(getRandomQuote(quote.text));
       }
-    }
+    },
+    [status, quote]
+  );
+
+  /**
+   * Per-keystroke accuracy tracking for keyboard mode.
+   * Called from TypingArea's onKeyDown before the input value changes.
+   */
+  const handleKeystroke = useCallback((isCorrect: boolean) => {
+    setSessionStats((prev) => {
+      const totalKeystrokes = prev.totalKeystrokes + 1;
+      const incorrectKeystrokes =
+        prev.incorrectKeystrokes + (isCorrect ? 0 : 1);
+      const accuracy =
+        ((totalKeystrokes - incorrectKeystrokes) / totalKeystrokes) * 100;
+      return { ...prev, totalKeystrokes, incorrectKeystrokes, accuracy };
+    });
+  }, []);
 
-    const accuracy = 100;
+  // ─── Start / speech recognition ──────────────────────────────────────────
 
-    if (matchedWordCount > 0) {
-      setSessionStats(prev => ({
-        ...prev,
-        wpm: prev.wpm,
-        accuracy: accuracy,
-        totalKeystrokes: constructedInput.length,
-        incorrectKeystrokes: 0
-      }));
+  const startSpeechRecognition = useCallback(() => {
+    const SpeechRecognition =
+      window.SpeechRecognition || window.webkitSpeechRecognition;
 
-      setUserInput(constructedInput);
+    if (!SpeechRecognition) {
+      alert(
+        'Web Speech API is not supported in this browser. Try Chrome or Edge, or switch to Keyboard mode.'
+      );
+      return;
     }
 
-    // Check if we matched all words
-    if (matchedWordCount === targetWords.length) {
-      setSessionStats(prev => ({
-        ...prev,
-        charactersTyped: prev.charactersTyped + constructedInput.length
-      }));
+    const recognition = new SpeechRecognition();
+    recognition.continuous = true;
+    recognition.interimResults = true;
+    recognition.lang = 'en-US';
+
+    recognition.onresult = (event: any) => {
+      /**
+       * BUG FIXED: original code used .join('') — concatenating all speech
+       * segments without spaces, turning "hello world" into "helloworld".
+       *
+       * Fix: trim each segment's transcript and join with a single space.
+       * This handles both single-segment and multi-segment results correctly.
+       */
+      const transcript = Array.from(event.results as any[])
+        .map((result: any) => result[0].transcript.trim())
+        .filter(Boolean)
+        .join(' ');
+
+      latestRef.current.handleSpeechInput(transcript);
+    };
 
-      setUserInput('');
+    recognition.onerror = (event: any) => {
+      console.error('Speech recognition error:', event.error);
+      if (event.error === 'not-allowed') {
+        alert(
+          'Microphone access denied. Please allow microphone permissions and try again.'
+        );
+        finishTest();
+      }
+    };
 
-      // Stop recognition to clear buffer
-      if (recognitionRef.current) {
-        recognitionRef.current.stop();
+    recognition.onend = () => {
+      // Auto-restart on silence timeouts while the test is still running
+      const { status: s, isListening: listening } = latestRef.current;
+      if (s === TestStatus.RUNNING && listening) {
+        try {
+          recognition.start();
+        } catch (_) {
+          // Already started or recognition ended cleanly — safe to ignore
+        }
       }
+    };
 
-      setQuote(getRandomQuote(quote.text));
+    try {
+      recognition.start();
+      recognitionRef.current = recognition;
+    } catch (e) {
+      console.error('Failed to start recognition:', e);
     }
-  };
+  }, [finishTest]);
 
-  // Update latestRef on every render so callbacks see fresh data/handlers
-  useEffect(() => {
-    latestRef.current = {
-      status,
-      isListening,
-      quote,
-      sessionStats,
-      handleSpeechInput
-    };
-  }, [status, isListening, quote, sessionStats, handleSpeechInput]); // handleSpeechInput is constant if defined outside or depends on these
-
-  const startTest = () => {
+  const startTest = useCallback(() => {
     setStatus(TestStatus.RUNNING);
     startTimeRef.current = Date.now();
-    setIsListening(true);
-
-    // Start Speech Recognition
-    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-    if (SpeechRecognition) {
-      const recognition = new SpeechRecognition();
-      recognition.continuous = true;
-      recognition.interimResults = true;
-      recognition.lang = 'en-US';
-
-      recognition.onresult = (event: any) => {
-        const currentTranscript = Array.from(event.results)
-          .map((result: any) => result[0].transcript)
-          .join('');
-
-        // Use latestRef to call the fresh handler
-        latestRef.current.handleSpeechInput(currentTranscript);
-      };
-
-      recognition.onerror = (event: any) => {
-        console.error('Speech recognition error', event.error);
-        if (event.error === 'not-allowed') {
-          alert('Microphone access denied. Please enable microphone permissions.');
-        }
-      };
-
-      recognition.onend = () => {
-        // Use latestRef to check fresh state
-        const { status, isListening } = latestRef.current;
-
-        // Restart if still running (handles silence timeouts)
-        if (status === TestStatus.RUNNING && isListening) {
-          try {
-            recognition.start();
-          } catch (e) {
-            // ignore
-          }
-        }
-      };
 
-      try {
-        recognition.start();
-        recognitionRef.current = recognition;
-      } catch (e) {
-        console.error('Failed to start recognition', e);
-      }
-    } else {
-      alert('Web Speech API not supported in this browser.');
+    if (inputMode === InputMode.VOICE) {
+      setIsListening(true);
+      startSpeechRecognition();
     }
 
     timerRef.current = window.setInterval(() => {
@@ -240,53 +282,116 @@ const App: React.FC = () => {
         return prev - 1;
       });
     }, 1000);
-  };
+  }, [inputMode, startSpeechRecognition, finishTest]);
 
-  // Clean up on unmount
-  useEffect(() => {
-    return () => {
-      if (recognitionRef.current) recognitionRef.current.stop();
-      if (timerRef.current) clearInterval(timerRef.current);
-    }
-  }, []);
+  // ─── Real-time WPM update ─────────────────────────────────────────────────
 
-  // Real-time WPM calculation
   useEffect(() => {
     if (status !== TestStatus.RUNNING || !startTimeRef.current) return;
 
     const updateWpm = () => {
       const timeElapsedSec = (Date.now() - startTimeRef.current!) / 1000;
       const timeElapsedMin = timeElapsedSec / 60;
+      if (timeElapsedMin <= 0) return;
+
+      setSessionStats((prev) => {
+        // WPM = (completed chars + chars of current in-progress input) / 5 / minutes
+        const totalChars = prev.charactersTyped + userInput.trimEnd().length;
+        const currentWpm = totalChars / 5 / timeElapsedMin;
+        return {
+          ...prev,
+          wpm: currentWpm,
+          timeTaken: timeElapsedMin,
+        };
+      });
+    };
+
+    const interval = setInterval(updateWpm, 200);
+    return () => clearInterval(interval);
+  }, [status, userInput]);
 
-      // WPM = (all previously finished quotes chars + current input chars) / 5 / minutes
-      const totalChars = sessionStats.charactersTyped + userInput.length;
-      const currentWpm = timeElapsedMin > 0 ? (totalChars / 5) / timeElapsedMin : 0;
+  // ─── Cleanup on unmount ───────────────────────────────────────────────────
 
-      setSessionStats(prev => ({
-        ...prev,
-        wpm: currentWpm,
-        timeTaken: timeElapsedMin
-      }));
+  useEffect(() => {
+    return () => {
+      if (recognitionRef.current) recognitionRef.current.stop();
+      if (timerRef.current) clearInterval(timerRef.current);
     };
+  }, []);
 
-    const interval = setInterval(updateWpm, 100);
-    return () => clearInterval(interval);
-  }, [status, userInput.length, sessionStats.charactersTyped]);
+  // ─── Derived display values ───────────────────────────────────────────────
+
+  const themeClass = isDark
+    ? 'bg-[#161617] text-[#f5f5f7]'
+    : 'bg-[#fbfbfd] text-[#1d1d1f]';
+  const navClass = isDark
+    ? 'bg-black/70 border-white/10'
+    : 'bg-white/70 border-gray-200/50';
+
+  const isVoice = inputMode === InputMode.VOICE;
 
-  const themeClass = isDark ? 'bg-[#161617] text-[#f5f5f7]' : 'bg-[#fbfbfd] text-[#1d1d1f]';
-  const navClass = isDark ? 'bg-black/70 border-white/10' : 'bg-white/70 border-gray-200/50';
+  // Compute displayed accuracy: for voice mode it's always 100 (only exact
+  // matches advance the cursor); for keyboard mode it's tracked per keystroke.
+  const displayAccuracy = isVoice ? 100 : Math.round(sessionStats.accuracy);
 
   return (
-    <div className={`min-h-screen flex flex-col transition-colors duration-500 ${themeClass}`}>
-      <nav className={`apple-blur sticky top-0 z-50 px-6 py-4 border-b transition-colors duration-500 ${navClass}`}>
-        <div className="max-w-5xl mx-auto flex items-center justify-between">
+    <div
+      className={`min-h-screen flex flex-col transition-colors duration-500 ${themeClass}`}
+    >
+      {/* ── Nav ── */}
+      <nav
+        className={`apple-blur sticky top-0 z-50 px-4 sm:px-6 py-4 border-b transition-colors duration-500 ${navClass}`}
+      >
+        <div className="max-w-5xl mx-auto flex items-center justify-between gap-4 flex-wrap">
           <div className="flex items-center space-x-2">
-            <img src="/logo.png" alt="SwiftVoice Logo" className="w-10 h-10 rounded-xl" />
-            <h1 className="text-xl font-medium tracking-tight">SwiftVoice</h1>
+            <img
+              src="/logo.png"
+              alt="SwiftType logo"
+              className="w-10 h-10 rounded-xl"
+            />
+            <h1 className="text-xl font-medium tracking-tight">SwiftType</h1>
           </div>
 
-          <div className="flex items-center space-x-6">
-            <div className={`flex p-1 rounded-full border transition-colors duration-300 ${isDark ? 'bg-white/5 border-white/10' : 'bg-gray-100/80 border-gray-200'}`}>
+          <div className="flex items-center gap-3 flex-wrap justify-end">
+            {/* Input mode toggle */}
+            <div
+              className={`flex p-1 rounded-full border transition-colors duration-300 ${
+                isDark
+                  ? 'bg-white/5 border-white/10'
+                  : 'bg-gray-100/80 border-gray-200'
+              }`}
+            >
+              {([InputMode.VOICE, InputMode.KEYBOARD] as const).map((mode) => (
+                <button
+                  key={mode}
+                  onClick={() => {
+                    setInputMode(mode);
+                    resetTest();
+                  }}
+                  aria-pressed={inputMode === mode}
+                  className={`px-3 py-1.5 text-xs font-medium rounded-full transition-all duration-200 ${
+                    inputMode === mode
+                      ? isDark
+                        ? 'bg-white text-black'
+                        : 'bg-white shadow-sm text-blue-600'
+                      : isDark
+                      ? 'text-gray-400 hover:text-white'
+                      : 'text-gray-500 hover:text-gray-900'
+                  }`}
+                >
+                  {mode === InputMode.VOICE ? '🎤 Voice' : '⌨️ Keys'}
+                </button>
+              ))}
+            </div>
+
+            {/* Duration picker */}
+            <div
+              className={`flex p-1 rounded-full border transition-colors duration-300 ${
+                isDark
+                  ? 'bg-white/5 border-white/10'
+                  : 'bg-gray-100/80 border-gray-200'
+              }`}
+            >
               {DURATIONS.map((d) => (
                 <button
                   key={d}
@@ -294,28 +399,55 @@ const App: React.FC = () => {
                     setConfig({ duration: d });
                     resetTest(d);
                   }}
-                  className={`px-4 py-1.5 text-xs font-medium rounded-full transition-all duration-200 ${config.duration === d
-                    ? (isDark ? 'bg-white text-black' : 'bg-white shadow-sm text-blue-600')
-                    : (isDark ? 'text-gray-400 hover:text-white' : 'text-gray-500 hover:text-gray-900')
-                    }`}
+                  aria-pressed={config.duration === d}
+                  aria-label={`${d} second test`}
+                  className={`px-4 py-1.5 text-xs font-medium rounded-full transition-all duration-200 ${
+                    config.duration === d
+                      ? isDark
+                        ? 'bg-white text-black'
+                        : 'bg-white shadow-sm text-blue-600'
+                      : isDark
+                      ? 'text-gray-400 hover:text-white'
+                      : 'text-gray-500 hover:text-gray-900'
+                  }`}
                 >
                   {d}s
                 </button>
               ))}
             </div>
 
+            {/* Dark/light toggle */}
             <button
               onClick={() => setIsDark(!isDark)}
-              className={`p-2 rounded-full border transition-all duration-300 hover:scale-110 active:scale-95 ${isDark ? 'bg-white/10 border-white/20 text-yellow-400' : 'bg-gray-100 border-gray-200 text-gray-600'
-                }`}
-              title={isDark ? "Switch to Light Mode" : "Switch to Dark Mode"}
+              aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+              className={`p-2 rounded-full border transition-all duration-300 hover:scale-110 active:scale-95 ${
+                isDark
+                  ? 'bg-white/10 border-white/20 text-yellow-400'
+                  : 'bg-gray-100 border-gray-200 text-gray-600'
+              }`}
             >
               {isDark ? (
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd" />
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+                    clipRule="evenodd"
+                  />
                 </svg>
               ) : (
-                <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-5 w-5"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                >
                   <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
                 </svg>
               )}
@@ -324,64 +456,157 @@ const App: React.FC = () => {
         </div>
       </nav>
 
-      <main className="flex-grow flex flex-col items-center justify-center px-6 py-12 max-w-5xl mx-auto w-full">
+      {/* ── Main ── */}
+      <main
+        className="flex-grow flex flex-col items-center justify-center px-4 sm:px-6 py-12 max-w-5xl mx-auto w-full"
+        id="typing-instructions"
+      >
         <StatsOverlay
           wpm={sessionStats.wpm}
-          accuracy={sessionStats.accuracy}
+          accuracy={displayAccuracy}
           timeLeft={timeLeft}
+          totalDuration={config.duration}
           isDark={isDark}
         />
 
         <div className="w-full relative min-h-[300px] flex flex-col items-center justify-center">
-          {/* We pass a dummy onInputChange because we handle input via speech */}
           <TypingArea
             targetText={quote.text}
             userInput={userInput}
+            onInputChange={handleKeyInput}
+            onKeystroke={handleKeystroke}
             isFinished={status === TestStatus.FINISHED}
             isActive={status === TestStatus.RUNNING}
             isDark={isDark}
+            enableKeyboard={inputMode === InputMode.KEYBOARD}
           />
 
           <div className="mt-4">
             {status === TestStatus.IDLE && (
               <button
                 onClick={startTest}
-                className={`px-8 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105 ${isDark ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/30' : 'bg-blue-600 text-white shadow-lg shadow-blue-600/30'
-                  }`}
+                aria-label={
+                  isVoice ? 'Start speaking to begin voice test' : 'Start typing to begin keyboard test'
+                }
+                className={`px-8 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105 active:scale-95 ${
+                  isDark
+                    ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/30 hover:bg-blue-400'
+                    : 'bg-blue-600 text-white shadow-lg shadow-blue-600/30 hover:bg-blue-500'
+                }`}
               >
-                Start Speaking
+                {isVoice ? '🎤 Start Speaking' : '⌨️ Start Typing'}
               </button>
             )}
-            {status === TestStatus.RUNNING && (
-              <div className="flex items-center space-x-2 animate-pulse">
-                <div className="w-3 h-3 bg-red-500 rounded-full"></div>
-                <span className={isDark ? 'text-white' : 'text-black'}>Listening...</span>
+
+            {status === TestStatus.RUNNING && isVoice && (
+              <div
+                className="flex items-center space-x-2"
+                role="status"
+                aria-label="Listening for speech"
+              >
+                <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse" aria-hidden="true" />
+                <span className={isDark ? 'text-white' : 'text-black'}>
+                  Listening…
+                </span>
               </div>
             )}
+
+            {status === TestStatus.RUNNING && !isVoice && (
+              <p
+                className={`text-sm ${isDark ? 'text-gray-400' : 'text-gray-500'}`}
+                aria-live="polite"
+              >
+                Click the text area if focus is lost
+              </p>
+            )}
           </div>
 
-          <div className={`mt-8 text-center font-light transition-colors duration-300 ${isDark ? 'text-gray-500' : 'text-gray-400'}`}>
+          <div
+            className={`mt-8 text-center font-light transition-colors duration-300 ${
+              isDark ? 'text-gray-500' : 'text-gray-400'
+            }`}
+            aria-label={`Quote by ${quote.author}`}
+          >
             — {quote.author}
           </div>
         </div>
 
+        {/* ── Results & restart ── */}
         <div className="mt-16 flex flex-col items-center">
           {status === TestStatus.FINISHED && (
-            <div className={`mb-8 p-8 rounded-3xl shadow-xl transition-all duration-500 animate-in fade-in slide-in-from-bottom-4 border ${isDark ? 'bg-white/5 border-white/10 shadow-black/50' : 'bg-white border-gray-100 shadow-gray-200/50'
-              } flex flex-col items-center max-w-md w-full`}>
-              <h2 className={`text-2xl font-medium mb-6 ${isDark ? 'text-white' : 'text-gray-900'}`}>Test Results</h2>
+            <div
+              className={`mb-8 p-8 rounded-3xl shadow-xl transition-all duration-500 animate-in fade-in slide-in-from-bottom-4 border ${
+                isDark
+                  ? 'bg-white/5 border-white/10 shadow-black/50'
+                  : 'bg-white border-gray-100 shadow-gray-200/50'
+              } flex flex-col items-center max-w-md w-full`}
+              role="region"
+              aria-label="Test results"
+            >
+              <h2
+                className={`text-2xl font-medium mb-6 ${
+                  isDark ? 'text-white' : 'text-gray-900'
+                }`}
+              >
+                Test Results
+              </h2>
+
               <div className="grid grid-cols-2 gap-8 w-full">
                 <div className="text-center">
-                  <p className="text-sm text-gray-400 uppercase tracking-widest mb-1">Speed</p>
-                  <p className={`text-4xl font-light ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>{Math.round(sessionStats.wpm)} WPM</p>
+                  <p className="text-sm text-gray-400 uppercase tracking-widest mb-1">
+                    Speed
+                  </p>
+                  <p
+                    className={`text-4xl font-light ${
+                      isDark ? 'text-blue-400' : 'text-blue-600'
+                    }`}
+                    aria-label={`${Math.round(sessionStats.wpm)} words per minute`}
+                  >
+                    {Math.round(sessionStats.wpm)} WPM
+                  </p>
                 </div>
                 <div className="text-center">
-                  <p className="text-sm text-gray-400 uppercase tracking-widest mb-1">Accuracy</p>
-                  <p className={`text-4xl font-light ${isDark ? 'text-white' : 'text-gray-800'}`}>{Math.round(sessionStats.accuracy)}%</p>
+                  <p className="text-sm text-gray-400 uppercase tracking-widest mb-1">
+                    Accuracy
+                  </p>
+                  <p
+                    className={`text-4xl font-light ${
+                      isDark ? 'text-white' : 'text-gray-800'
+                    }`}
+                    aria-label={`${displayAccuracy} percent accuracy`}
+                  >
+                    {displayAccuracy}%
+                  </p>
                 </div>
               </div>
-              <div className="mt-6 pt-6 border-t border-gray-500/10 w-full text-center">
-                <p className="text-xs text-gray-500 uppercase tracking-widest">Total Keystrokes: {sessionStats.totalKeystrokes}</p>
+
+              <div className="mt-6 pt-6 border-t border-gray-500/10 w-full">
+                <div className="grid grid-cols-3 gap-4 text-center">
+                  <div>
+                    <p className="text-xs text-gray-500 uppercase tracking-widest">
+                      Words
+                    </p>
+                    <p className={`text-lg font-light mt-1 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
+                      {sessionStats.wordsTyped}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-gray-500 uppercase tracking-widest">
+                      Chars
+                    </p>
+                    <p className={`text-lg font-light mt-1 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
+                      {sessionStats.charactersTyped}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-xs text-gray-500 uppercase tracking-widest">
+                      {isVoice ? 'Mode' : 'Errors'}
+                    </p>
+                    <p className={`text-lg font-light mt-1 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
+                      {isVoice ? '🎤' : sessionStats.incorrectKeystrokes}
+                    </p>
+                  </div>
+                </div>
               </div>
             </div>
           )}
@@ -389,39 +614,70 @@ const App: React.FC = () => {
           {(status === TestStatus.FINISHED || status === TestStatus.RUNNING) && (
             <button
               onClick={() => resetTest()}
-              className={`group flex items-center space-x-2 px-8 py-3 rounded-full transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] shadow-lg ${isDark ? 'bg-white text-black hover:bg-gray-100 shadow-white/5' : 'bg-gray-900 text-white hover:bg-black shadow-gray-300'
-                }`}
+              aria-label="Restart test"
+              className={`group flex items-center space-x-2 px-8 py-3 rounded-full transition-all duration-200 hover:scale-[1.02] active:scale-[0.98] shadow-lg ${
+                isDark
+                  ? 'bg-white text-black hover:bg-gray-100 shadow-white/5'
+                  : 'bg-gray-900 text-white hover:bg-black shadow-gray-300'
+              }`}
             >
-              <svg xmlns="http://www.w3.org/2000/svg" className={`h-5 w-5 transition-transform duration-500 ${status === TestStatus.FINISHED ? 'rotate-180' : 'group-hover:rotate-180'}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className={`h-5 w-5 transition-transform duration-500 ${
+                  status === TestStatus.FINISHED
+                    ? 'rotate-180'
+                    : 'group-hover:rotate-180'
+                }`}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
               </svg>
-              <span className="font-medium">Restart Test</span>
+              <span className="font-medium">Restart</span>
             </button>
           )}
 
           <p className="mt-4 text-xs text-gray-500 uppercase tracking-widest">
-            Press Tab to reset
+            Press <kbd className="font-mono">Tab</kbd> to reset
           </p>
         </div>
       </main>
 
-      <footer className={`py-8 border-t transition-colors duration-500 ${isDark ? 'border-white/5' : 'border-gray-100'}`}>
+      {/* ── Footer ── */}
+      <footer
+        className={`py-8 border-t transition-colors duration-500 ${
+          isDark ? 'border-white/5' : 'border-gray-100'
+        }`}
+      >
         <div className="max-w-5xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500">
           <div className="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-4">
-            <p>&copy; 2026 SwiftVoice. Pure Focus Voice.</p>
+            <p>&copy; 2026 SwiftType. Privacy-first. No data leaves your browser.</p>
             <div className="flex items-center space-x-1.5">
-              <span>Created by:</span>
+              <span>By</span>
               <a
                 href="https://www.murdawkmedia.com"
                 target="_blank"
                 rel="noopener noreferrer"
-                className={`transition-colors duration-300 font-medium ${isDark ? 'text-gray-400 hover:text-white' : 'text-gray-500 hover:text-black'}`}
+                className={`transition-colors duration-300 font-medium ${
+                  isDark
+                    ? 'text-gray-400 hover:text-white'
+                    : 'text-gray-500 hover:text-black'
+                }`}
               >
                 Murdawk Media
               </a>
             </div>
           </div>
-          <p className="text-xs italic opacity-50 mt-4 md:mt-0">Inspired by tech pioneers, from 1980 to today.</p>
+          <p className="text-xs italic opacity-50 mt-4 md:mt-0">
+            All processing happens locally in your browser.
+          </p>
         </div>
       </footer>
 
diff --git a/components/StatsOverlay.tsx b/components/StatsOverlay.tsx
index 2b8be6a..0c505ed 100644
--- a/components/StatsOverlay.tsx
+++ b/components/StatsOverlay.tsx
@@ -1,34 +1,87 @@
-
 import React from 'react';
 
 interface StatsOverlayProps {
   wpm: number;
   accuracy: number;
   timeLeft: number;
+  totalDuration: number;
   isDark: boolean;
 }
 
-const StatsOverlay: React.FC<StatsOverlayProps> = ({ wpm, accuracy, timeLeft, isDark }) => {
-  const valueClass = isDark ? 'text-white' : 'text-gray-900';
+const StatsOverlay: React.FC<StatsOverlayProps> = ({
+  wpm,
+  accuracy,
+  timeLeft,
+  totalDuration,
+  isDark,
+}) => {
   const labelClass = isDark ? 'text-gray-500' : 'text-gray-400';
+  const valueClass = isDark ? 'text-white' : 'text-gray-900';
+
+  // Format as M:SS for durations >= 60s so 62s shows as 1:02
+  const formatTime = (seconds: number): string => {
+    if (totalDuration >= 60) {
+      const m = Math.floor(seconds / 60);
+      const s = seconds % 60;
+      return `${m}:${s.toString().padStart(2, '0')}`;
+    }
+    return `${seconds}s`;
+  };
+
+  // Color-code WPM: red < 30, amber 30-59, green >= 60
+  const wpmColor = () => {
+    if (wpm === 0) return valueClass;
+    if (wpm >= 60) return isDark ? 'text-green-400' : 'text-green-600';
+    if (wpm >= 30) return isDark ? 'text-yellow-400' : 'text-yellow-600';
+    return isDark ? 'text-red-400' : 'text-red-500';
+  };
 
   return (
-    <div className="flex items-center space-x-12 justify-center mb-8">
+    <div
+      className="flex items-center space-x-12 justify-center mb-8"
+      role="status"
+      aria-label="Test statistics"
+      aria-live="polite"
+      aria-atomic="true"
+    >
       <div className="flex flex-col items-center">
-        <span className={`text-xs font-semibold uppercase tracking-widest mb-1 transition-colors duration-300 ${labelClass}`}>Time</span>
-        <span className={`text-3xl font-light tabular-nums transition-colors duration-300 ${valueClass}`}>
-          {timeLeft}s
+        <span
+          className={`text-xs font-semibold uppercase tracking-widest mb-1 transition-colors duration-300 ${labelClass}`}
+        >
+          Time
+        </span>
+        <span
+          className={`text-3xl font-light tabular-nums transition-colors duration-300 ${valueClass}`}
+          aria-label={`${timeLeft} seconds remaining`}
+        >
+          {formatTime(timeLeft)}
         </span>
       </div>
+
       <div className="flex flex-col items-center">
-        <span className={`text-xs font-semibold uppercase tracking-widest mb-1 transition-colors duration-300 ${labelClass}`}>WPM</span>
-        <span className={`text-3xl font-light tabular-nums transition-colors duration-300 ${valueClass}`}>
+        <span
+          className={`text-xs font-semibold uppercase tracking-widest mb-1 transition-colors duration-300 ${labelClass}`}
+        >
+          WPM
+        </span>
+        <span
+          className={`text-3xl font-light tabular-nums transition-all duration-300 ${wpmColor()}`}
+          aria-label={`${Math.round(wpm)} words per minute`}
+        >
           {Math.round(wpm)}
         </span>
       </div>
+
       <div className="flex flex-col items-center">
-        <span className={`text-xs font-semibold uppercase tracking-widest mb-1 transition-colors duration-300 ${labelClass}`}>Accuracy</span>
-        <span className={`text-3xl font-light tabular-nums transition-colors duration-300 ${valueClass}`}>
+        <span
+          className={`text-xs font-semibold uppercase tracking-widest mb-1 transition-colors duration-300 ${labelClass}`}
+        >
+          Accuracy
+        </span>
+        <span
+          className={`text-3xl font-light tabular-nums transition-colors duration-300 ${valueClass}`}
+          aria-label={`${Math.round(accuracy)} percent accuracy`}
+        >
           {Math.round(accuracy)}%
         </span>
       </div>
diff --git a/components/TypingArea.tsx b/components/TypingArea.tsx
index 0dd1b2a..22ea9fd 100644
--- a/components/TypingArea.tsx
+++ b/components/TypingArea.tsx
@@ -1,42 +1,78 @@
-
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 
 interface TypingAreaProps {
   targetText: string;
   userInput: string;
-  onInputChange: (value: string) => void;
+  onInputChange?: (value: string) => void;
+  onKeystroke?: (isCorrect: boolean) => void;
   isFinished: boolean;
   isActive: boolean;
   isDark: boolean;
+  enableKeyboard?: boolean;
 }
 
 const TypingArea: React.FC<TypingAreaProps> = ({
   targetText,
   userInput,
+  onInputChange,
+  onKeystroke,
   isFinished,
   isActive,
-  isDark
+  isDark,
+  enableKeyboard = false,
 }) => {
-  // No references or input handling needed for voice
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Auto-focus hidden input whenever keyboard mode becomes active
+  useEffect(() => {
+    if (isActive && enableKeyboard && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isActive, enableKeyboard]);
+
+  // Track individual keystrokes for accurate accuracy calculation
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Tab') {
+      // Tab is handled globally for reset; don't let it move focus
+      e.preventDefault();
+      return;
+    }
+    // Count printable character presses and backspace as keystrokes
+    if (e.key.length === 1) {
+      const nextIndex = userInput.length;
+      const isCorrect = e.key === targetText[nextIndex];
+      onKeystroke?.(isCorrect);
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isFinished || !isActive) return;
+    // Never allow typing beyond the target length
+    const val = e.target.value;
+    if (val.length <= targetText.length) {
+      onInputChange?.(val);
+    }
+  };
 
   const renderCharacters = () => {
     return targetText.split('').map((char, index) => {
-      let colorClass = isDark ? 'text-gray-600' : 'text-gray-300';
-      let isCurrent = index === userInput.length;
+      const isCurrent = index === userInput.length;
+      const isTyped = index < userInput.length;
+      const isCorrect = isTyped && userInput[index] === char;
+      const isWrong = isTyped && userInput[index] !== char;
 
-      if (index < userInput.length) {
-        if (userInput[index] === char) {
-          colorClass = isDark ? 'text-white' : 'text-gray-800';
-        } else {
-          colorClass = isDark ? 'text-red-400 bg-red-400/10' : 'text-red-500 bg-red-50';
-        }
-      }
+      let colorClass = isDark ? 'text-gray-600' : 'text-gray-300';
+      if (isCorrect) colorClass = isDark ? 'text-white' : 'text-gray-800';
+      else if (isWrong) colorClass = isDark ? 'text-red-400 bg-red-400/10' : 'text-red-500 bg-red-50';
 
       return (
         <span
           key={index}
-          className={`relative transition-colors duration-150 rounded-[2px] ${colorClass} ${isCurrent && isActive ? (isDark ? 'border-l-2 border-blue-400' : 'border-l-2 border-blue-500') : ''
-            }`}
+          className={`relative transition-colors duration-150 rounded-[2px] ${colorClass} ${
+            isCurrent && isActive
+              ? `cursor-blink border-l-2 ${isDark ? 'border-blue-400' : 'border-blue-500'}`
+              : ''
+          }`}
         >
           {char}
         </span>
@@ -47,14 +83,47 @@ const TypingArea: React.FC<TypingAreaProps> = ({
   return (
     <div
       className="relative w-full max-w-4xl mx-auto py-12 px-8 min-h-[200px]"
+      onClick={() => enableKeyboard && inputRef.current?.focus()}
+      role="region"
+      aria-label="Typing test area"
     >
-      <div className="text-2xl md:text-3xl leading-relaxed tracking-tight font-normal text-left select-none">
+      {/* Hidden input to capture keyboard input on all devices including mobile */}
+      {enableKeyboard && (
+        <input
+          ref={inputRef}
+          type="text"
+          value={userInput}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          className="absolute opacity-0 pointer-events-none"
+          style={{ width: '1px', height: '1px', top: 0, left: 0 }}
+          aria-label="Type the text shown above"
+          aria-live="off"
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck={false}
+          enterKeyHint="next"
+          disabled={!isActive || isFinished}
+        />
+      )}
+
+      <div
+        className="text-2xl md:text-3xl leading-relaxed tracking-tight font-normal text-left select-none"
+        aria-label={`Target text: ${targetText}`}
+        aria-describedby="typing-instructions"
+      >
         {renderCharacters()}
       </div>
 
+      {/* Dimmed overlay while idle */}
       {!isActive && !isFinished && (
-        <div className={`absolute inset-0 flex items-center justify-center rounded-2xl pointer-events-none transition-all duration-300 ${isDark ? 'bg-black/20 backdrop-blur-[1px]' : 'bg-white/40 backdrop-blur-[2px]'}`}>
-        </div>
+        <div
+          className={`absolute inset-0 flex items-center justify-center rounded-2xl pointer-events-none transition-all duration-300 ${
+            isDark ? 'bg-black/20 backdrop-blur-[1px]' : 'bg-white/40 backdrop-blur-[2px]'
+          }`}
+          aria-hidden="true"
+        />
       )}
     </div>
   );
diff --git a/index.html b/index.html
index ccd23b7..24823f1 100644
--- a/index.html
+++ b/index.html
@@ -4,25 +4,25 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>SwiftVoice | Elegant Voice Speed Test</title>
+  <title>SwiftType | Voice &amp; Keyboard Speed Test</title>
   <meta name="description"
-    content="SwiftType is a minimalist, distraction-free typing test designed to help you improve your typing speed and accuracy with elegance and focus.">
+    content="SwiftType is a minimalist, distraction-free speed test for voice and keyboard. Improve your typing speed and accuracy — all processing happens locally in your browser.">
   <meta name="keywords"
-    content="typing test, typing speed, wpm, wpm test, minimalist typing, swift type, typing practice, clean typing test">
+    content="typing test, typing speed, wpm, wpm test, voice typing, speech recognition, minimalist typing, swift type, typing practice, clean typing test, privacy typing test">
 
   <!-- Open Graph / Facebook -->
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://swifttype.pages.dev/">
-  <meta property="og:title" content="SwiftType | Elegant Typing Test">
-  <meta property="og:description" content="A minimalist, distraction-free typing test designed for focus and speed.">
+  <meta property="og:title" content="SwiftType | Voice &amp; Keyboard Speed Test">
+  <meta property="og:description" content="A minimalist, privacy-first speed test for voice and keyboard — no data leaves your browser.">
   <meta property="og:image" content="https://swifttype.pages.dev/og-image.png">
 
   <!-- Twitter -->
   <meta property="twitter:card" content="summary_large_image">
   <meta property="twitter:url" content="https://swifttype.pages.dev/">
-  <meta property="twitter:title" content="SwiftType | Elegant Typing Test">
+  <meta property="twitter:title" content="SwiftType | Voice &amp; Keyboard Speed Test">
   <meta property="twitter:description"
-    content="A minimalist, distraction-free typing test designed for focus and speed.">
+    content="A minimalist, privacy-first speed test for voice and keyboard — no data leaves your browser.">
   <meta property="twitter:image" content="https://swifttype.pages.dev/og-image.png">
 
   <script type="application/ld+json">
@@ -37,8 +37,8 @@
         "price": "0",
         "priceCurrency": "USD"
       },
-      "description": "A minimalist typing test application designed to improve typing speed and accuracy without distractions.",
-      "featureList": "Distraction-free interface, WPM tracking, Accuracy tracking, Dark/Light mode, Multiple durations",
+      "description": "A minimalist, privacy-first speed test for voice and keyboard. All processing is local — no data ever leaves your browser.",
+      "featureList": "Voice input via Web Speech API, Keyboard typing mode, WPM tracking, Accuracy tracking, Dark/Light mode, Multiple durations, Privacy-first (no external services)",
       "author": {
         "@type": "Organization",
         "name": "Murdawk Media",
@@ -64,20 +64,19 @@
     }
 
     .cursor-blink {
-      animation: blink 1s step-end infinite;
+      animation: cursor-blink 1s step-end infinite;
     }
 
-    @keyframes blink {
+    @keyframes cursor-blink {
+      from, to { border-color: transparent; }
+      50% { border-color: inherit; }
+    }
 
-      from,
-      to {
-        border-color: transparent
-      }
+    /* Prevent mobile double-tap zoom on buttons */
+    button { touch-action: manipulation; }
 
-      50% {
-        border-color: #0071e3
-      }
-    }
+    /* Smooth scroll on mobile */
+    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
 
     ::selection {
       background: rgba(0, 113, 227, 0.2);
diff --git a/types.ts b/types.ts
index 3164d35..9db2bbb 100644
--- a/types.ts
+++ b/types.ts
@@ -1,4 +1,3 @@
-
 export enum TestStatus {
   IDLE = 'IDLE',
   STARTING = 'STARTING',
@@ -6,6 +5,11 @@ export enum TestStatus {
   FINISHED = 'FINISHED'
 }
 
+export enum InputMode {
+  VOICE = 'VOICE',
+  KEYBOARD = 'KEYBOARD',
+}
+
 export interface TypingStats {
   wpm: number;
   accuracy: number;
@@ -13,6 +17,7 @@ export interface TypingStats {
   totalKeystrokes: number;
   incorrectKeystrokes: number;
   timeTaken: number;
+  wordsTyped: number;
 }
 
 export interface TestConfig {