diff --git a/_specs/mobile-responsive-layouts.md b/_specs/mobile-responsive-layouts.md
new file mode 100644
index 0000000..2b9ad84
--- /dev/null
+++ b/_specs/mobile-responsive-layouts.md
@@ -0,0 +1,71 @@
+# Spec for mobile-responsive-layouts
+
+branch: claude/feature/mobile-responsive-layouts
+figma_component (if used): N/A
+
+## Summary
+
+Restructure the flashcard session UI so that the video player is the primary focal element across all major mobile form factors and orientations. Each combination of device class and orientation gets its own dedicated React component with its own scoped CSS, making per-view tweaks straightforward for a developer without touching shared styles.
+
+## Functional Requirements
+
+- Detect the current viewport configuration at runtime and render the appropriate layout component:
+  - Phone Portrait
+  - Phone Landscape
+  - Tablet Portrait
+  - Tablet Landscape
+- The video player must be the visually dominant element in every layout — it should occupy the largest share of available screen space without being clipped or obscured.
+- Each layout component must be a standalone React component (e.g. `PhonePortraitLayout`, `PhoneLandscapeLayout`, `TabletPortraitLayout`, `TabletLandscapeLayout`).
+- Each layout component owns its own CSS block (or section in `App.css`) clearly delimited with a comment header so it is easy to find and edit independently.
+- All CSS values that a developer is likely to want to tweak (video size ratios, padding, font sizes, button sizes) must use named CSS custom properties defined at the top of each layout's CSS block.
+- Navigation controls (previous, next, shuffle, etc.) and the term label must remain accessible and usable in every layout, but they may be repositioned or resized to keep the video dominant.
+- The disclaimer / info footer must remain reachable in all layouts (can be collapsed, scrollable, or in a modal — whichever fits the layout best).
+- Layout selection logic must be encapsulated in a single place (a custom hook or a small utility) so the detection rules can be updated without touching the layout components themselves.
+- Breakpoint definitions (device-class thresholds and orientation detection) must be defined as named constants, not magic numbers.
+- Desktop/large-screen behavior must not regress — the existing layout should remain the default for non-mobile viewports.
+
+## Possible Edge Cases
+
+- Device orientation changes mid-session (user rotates phone) — the layout must switch without losing session state (current card index, score, etc.).
+- Tablets that report phone-sized viewport widths in certain browser modes.
+- Browsers that do not support the `Screen Orientation API` — fall back to `window.innerWidth / window.innerHeight` comparison.
+- Very small phones (320 px wide) where landscape video + controls compete for limited vertical space.
+- Foldable devices that change form factor dynamically.
+- Keyboard/split-screen multitasking on tablets that narrows the effective viewport.
+- Videos with non-standard aspect ratios that would overflow or leave large empty areas.
+
+## Acceptance Criteria
+
+- [ ] Rotating a phone between portrait and landscape re-renders the correct layout component without navigating away or resetting the flashcard session.
+- [ ] On a phone in portrait mode the video player occupies at least 55% of the visible viewport height.
+- [ ] On a phone in landscape mode the video player occupies at least 65% of the visible viewport width.
+- [ ] On a tablet in portrait mode the video player occupies at least 50% of the visible viewport height.
+- [ ] On a tablet in landscape mode the video player occupies at least 55% of the visible viewport width.
+- [ ] Each layout's CSS custom properties (tweakable values) are documented with a short inline comment describing what they control.
+- [ ] The layout detection logic is covered by unit tests covering phone portrait, phone landscape, tablet portrait, tablet landscape, and desktop classifications.
+- [ ] No existing desktop functionality regresses (verified by manual walkthrough and ESLint passing).
+- [ ] `yarn lint` passes with no new errors.
+
+## Open Questions
+
+- Should the term label (the sign word being practiced) overlay the video or sit outside it? This affects the layout significantly in landscape mode.
+  - Overlay on phone, outside on tablets
+- Should navigation buttons (prev/next) be gesture-swipe driven on mobile, or remain as tap targets?
+  - gesture-swipe
+- What are the exact pixel breakpoints that define "phone" vs "tablet"? (Common choice: < 768 px = phone, ≥ 768 px = tablet.)
+  - use common 
+- Should each layout component render the full session UI (video + controls + header) or be a layout shell that accepts children for the controls?
+  - layout shell that accepts children for the controls
+- Is there a design mockup / Figma reference that should guide the proportions, or should the developer define them?
+  - allow the developer to define it.
+
+## Testing Guidelines
+
+Create a test file(s) in the `./tests` folder for the new feature, and create meaningful tests for the following cases, without going too heavy:
+
+- Layout detection hook returns `phone-portrait` for a narrow, taller-than-wide viewport.
+- Layout detection hook returns `phone-landscape` for a narrow, wider-than-tall viewport.
+- Layout detection hook returns `tablet-portrait` for a wide, taller-than-wide viewport above the phone threshold.
+- Layout detection hook returns `tablet-landscape` for a wide, wider-than-tall viewport above the phone threshold.
+- Layout detection hook returns `desktop` for a viewport above the tablet threshold.
+- Orientation change event triggers a re-evaluation of the layout classification.
diff --git a/src/components/FlashcardNav.jsx b/src/components/FlashcardNav.jsx
new file mode 100644
index 0000000..3e513cf
--- /dev/null
+++ b/src/components/FlashcardNav.jsx
@@ -0,0 +1,62 @@
+import Tippy from "@tippyjs/react";
+
+export function FlashcardNav({
+    className,
+    onPrev,
+    onNext,
+    onShuffle,
+    onOpenTerms,
+    autoPlay,
+    onToggleAutoPlay,
+    autoPlayActiveLabel,
+    autoPlayInactiveLabel,
+    showPlayerControls,
+    onTogglePlayerControls,
+    playing,
+    onTogglePlaying,
+    playbackRate,
+    onTogglePlaybackRate,
+    repeat,
+    onToggleRepeat,
+}) {
+    return (
+        <div className={`flashcard-nav${className ? ` ${className}` : ''}`}>
+            <button className="btn-nav" onClick={onPrev}>← Prev</button>
+            <button className="btn-nav" onClick={onNext}>Next →</button>
+            <button className="btn-nav" onClick={onShuffle}>⇄ Shuffle</button>
+            {onOpenTerms && (
+                <button className="btn-nav btn-nav--terms" onClick={onOpenTerms}>📋 Terms</button>
+            )}
+            <Tippy content={autoPlay ? 'Cancel Auto-Play' : 'Enable Auto-Play'} placement="top">
+                <button
+                    className={`btn-nav${autoPlay ? ' btn-nav--active' : ''}`}
+                    onClick={onToggleAutoPlay}
+                >{autoPlay ? autoPlayActiveLabel : autoPlayInactiveLabel}</button>
+            </Tippy>
+            <Tippy content={showPlayerControls ? 'Hide Player Controls' : 'Show Player Controls'} placement="top">
+                <button
+                    className={`btn-nav${showPlayerControls ? ' btn-nav--active' : ''}`}
+                    onClick={onTogglePlayerControls}
+                >🎛️ Controls</button>
+            </Tippy>
+            <Tippy content={playing ? 'Pause' : 'Play'} placement="top">
+                <button
+                    className={`btn-nav${playing ? ' btn-nav--active' : ''}`}
+                    onClick={onTogglePlaying}
+                >{playing ? '⏸' : '▶'}</button>
+            </Tippy>
+            <Tippy content={playbackRate === 1 ? 'Slow to ½×' : 'Reset to 1×'} placement="top">
+                <button
+                    className={`btn-nav${playbackRate !== 1 ? ' btn-nav--active' : ''}`}
+                    onClick={onTogglePlaybackRate}
+                >🐢 {playbackRate === 1 ? '1×' : '½×'}</button>
+            </Tippy>
+            <Tippy content={repeat ? 'Stop Looping' : 'Loop Video'} placement="top">
+                <button
+                    className={`btn-nav${repeat ? ' btn-nav--active' : ''}`}
+                    onClick={onToggleRepeat}
+                >🔁 Loop</button>
+            </Tippy>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/FlashcardPlayer.jsx b/src/components/FlashcardPlayer.jsx
new file mode 100644
index 0000000..1e42da7
--- /dev/null
+++ b/src/components/FlashcardPlayer.jsx
@@ -0,0 +1,50 @@
+import ReactPlayer from 'react-player';
+
+export function FlashcardPlayer({
+    url,
+    playing,
+    loop,
+    autoPlay,
+    controls,
+    playbackRate,
+    onPlay,
+    onPause,
+    onEnded,
+    onError,
+}) {
+    return (
+        <div className="flashcard-video">
+            {url ? (
+                <ReactPlayer
+                    className="flashcard-video-iframe"
+                    title="ASL sign video"
+                    src={url}
+                    playing={playing}
+                    loop={loop}
+                    autoPlay={autoPlay}
+                    controls={controls}
+                    playsinline={true}
+                    muted={true}
+                    width="100%"
+                    height="100%"
+                    playbackRate={playbackRate}
+                    onPlay={onPlay}
+                    onPause={onPause}
+                    onEnded={onEnded}
+                    onError={onError}
+                    config={{
+                        file: {
+                            attributes: {
+                                playsinline: true,
+                            },
+                        },
+                    }}
+                />
+            ) : (
+                <div className="flashcard-video-placeholder">
+                    No video available
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/src/components/FlashcardSession.jsx b/src/components/FlashcardSession.jsx
index 32ba3cf..2ee99b9 100644
--- a/src/components/FlashcardSession.jsx
+++ b/src/components/FlashcardSession.jsx
@@ -1,9 +1,9 @@
 import {useState, useEffect, useCallback, useMemo, useRef} from "react";
 import {contrastColor} from "../utils/contrastColor";
 import {shuffle} from "../utils/shuffle";
-import ReactPlayer from 'react-player'
 import toast from "react-hot-toast";
-import Tippy from "@tippyjs/react";
+import {FlashcardNav} from "./FlashcardNav";
+import {FlashcardPlayer} from "./FlashcardPlayer";
 
 export function FlashcardSession({terms, cardColors, onBack, title, description}) {
     const [currentIndex, setCurrentIndex] = useState(0);
@@ -12,6 +12,10 @@ export function FlashcardSession({terms, cardColors, onBack, title, description}
     const [termDrawerOpen, setTermDrawerOpen] = useState(false);
     const [isMobileHorizontal, setIsMobileHorizontal] = useState(false);
     const [autoPlay, setAutoPlay] = useState(false);
+    const [showPlayerControls, setShowPlayerControls] = useState(true);
+    const [playing, setPlaying] = useState(false);
+    const [playbackRate, setPlaybackRate] = useState(1);
+    const [repeat, setRepeat] = useState(false);
     const selectRef = useRef(null);
 
     useEffect(() => {
@@ -30,14 +34,17 @@ export function FlashcardSession({terms, cardColors, onBack, title, description}
     }, []);
 
     const goNext = useCallback(() => {
+        setPlaying(false);
         setCurrentIndex(i => (i + 1) % localTerms.length);
     }, [localTerms.length]);
 
     const goPrev = useCallback(() => {
+        setPlaying(false);
         setCurrentIndex(i => (i - 1 + localTerms.length) % localTerms.length);
     }, [localTerms.length]);
 
     function handleShuffle() {
+        setPlaying(false);
         const indices = shuffle([...localTerms.keys()]);
         setLocalTerms(indices.map(i => localTerms[i]));
         setLocalColors(indices.map(i => localColors[i]));
@@ -86,6 +93,35 @@ export function FlashcardSession({terms, cardColors, onBack, title, description}
         toast.error("Playback error");
     }
 
+    const PLAYBACK_STATE_START = 1
+    const PLAYBACK_STATE_END = 2
+    const PLAYBACK_STATE_PAUSE = 3
+
+    function playingStateChanged(stateChange) {
+        switch(stateChange) {
+            case PLAYBACK_STATE_START:
+                console.log("Playback start");
+                setPlaying(true);
+                break;
+            case PLAYBACK_STATE_END:
+                console.log("Playback end: ", repeat);
+                setPlaying(false);
+                break;
+            case PLAYBACK_STATE_PAUSE:
+                console.log("Playback paused");
+                setPlaying(false);
+                break;
+            default:
+                console.error("Unknown Playback state change: ", stateChange);
+        }
+    }
+
+    function onSelectTerm(e) {
+        setPlaying(false);
+        setCurrentIndex(Number(e.target.value));
+        setTermDrawerOpen(false);
+    }
+
     const bg = localColors[currentIndex];
     const fg = contrastColor(bg);
     const playbackUrl = getPlaybackUrl();
@@ -100,53 +136,45 @@ export function FlashcardSession({terms, cardColors, onBack, title, description}
                             <span className="flashcard-term">{localTerms[currentIndex].term}</span>
                         </div>
                         <p className="flashcard-position">{currentIndex + 1} / {localTerms.length}</p>
-                        <div className="flashcard-nav fcs-landscape__nav">
-                            <button className="btn-nav" onClick={goPrev}>← Prev</button>
-                            <button className="btn-nav" onClick={goNext}>Next →</button>
-                            <button className="btn-nav" onClick={handleShuffle}>⇄ Shuffle</button>
-                            <Tippy key="autoplay" content={autoPlay ? 'Cancel Auto-Play' : 'Enable Auto-Play'} placement="top">
-                                <button
-                                    className={`btn-nav${autoPlay ? ' btn-nav--active' : ''}`}
-                                    onClick={() => setAutoPlay(p => !p)}
-                                >{autoPlay ? '⏸ Auto' : '▶ Auto'}</button>
-                        </Tippy>
-                        </div>
+                        <FlashcardNav
+                            className="fcs-landscape__nav"
+                            onPrev={goPrev}
+                            onNext={goNext}
+                            onShuffle={handleShuffle}
+                            autoPlay={autoPlay}
+                            onToggleAutoPlay={() => setAutoPlay(p => !p)}
+                            autoPlayActiveLabel="⏸ Auto"
+                            autoPlayInactiveLabel="▶ Auto"
+                            showPlayerControls={showPlayerControls}
+                            onTogglePlayerControls={() => setShowPlayerControls(p => !p)}
+                            playing={playing}
+                            onTogglePlaying={() => setPlaying(p => !p)}
+                            playbackRate={playbackRate}
+                            onTogglePlaybackRate={() => setPlaybackRate(r => r === 1 ? 0.5 : 1)}
+                            repeat={repeat}
+                            onToggleRepeat={() => setRepeat(r => !r)}
+                        />
                     </div>
                     <div className="fcs-landscape__video">
-                        <div className="flashcard-video">
-                            {playbackUrl ? (
-                                <ReactPlayer
-                                    className="flashcard-video-iframe"
-                                    title="ASL sign video"
-                                    src={playbackUrl}
-                                    autoPlay={autoPlay}
-                                    controls={true}
-                                    playsinline={true}
-                                    muted={true}
-                                    // width="100%"
-                                    // height="100%"
-                                    onError={playbackError}
-                                    config={{
-                                        file: {
-                                            attributes: {
-                                                playsinline: true
-                                            }
-                                        }
-                                    }}
-                                />
-                            ) : (
-                                <div className="flashcard-video-placeholder">
-                                    No video available
-                                </div>
-                            )}
-                        </div>
+                        <FlashcardPlayer
+                            url={playbackUrl}
+                            playing={playing}
+                            loop={repeat}
+                            autoPlay={autoPlay}
+                            controls={showPlayerControls}
+                            playbackRate={playbackRate}
+                            onPlay={() => playingStateChanged(PLAYBACK_STATE_START)}
+                            onPause={() => playingStateChanged(PLAYBACK_STATE_PAUSE)}
+                            onEnded={() => playingStateChanged(PLAYBACK_STATE_END)}
+                            onError={playbackError}
+                        />
                     </div>
                     <div className="fcs-landscape__termlist">
                         <select
                             ref={selectRef}
                             size={20}
                             className="term-select"
-                            onChange={e => setCurrentIndex(Number(e.target.value))}
+                            onChange={onSelectTerm}
                             value={currentIndex}
                         >
                             {sortedTerms.map(({term, i, fix}) => (
@@ -173,46 +201,38 @@ export function FlashcardSession({terms, cardColors, onBack, title, description}
                     <div className="flashcard-card" style={{backgroundColor: bg, color: fg}}>
                         <span className="flashcard-term">{localTerms[currentIndex].term}</span>
                     </div>
-                    <div className="flashcard-video">
-                        {playbackUrl ? (
-                            <ReactPlayer
-                                className="flashcard-video-iframe"
-                                title="ASL sign video"
-                                src={playbackUrl}
-                                playsinline={true}
-                                autoPlay={autoPlay}
-                                controls={true}
-                                muted={true}
-                                width="100%"
-                                height="100%"
-                                onError={playbackError}
-                                config={{
-                                    file: {
-                                        attributes: {
-                                            playsinline: true
-                                        }
-                                    }
-                                }}
-                            ></ReactPlayer>
-                        ) : (
-                            <div className="flashcard-video-placeholder">
-                                No video available
-                            </div>
-                        )}
-                    </div>
+                    <FlashcardPlayer
+                        url={playbackUrl}
+                        playing={playing}
+                        loop={repeat}
+                        autoPlay={autoPlay}
+                        controls={showPlayerControls}
+                        playbackRate={playbackRate}
+                        onPlay={() => playingStateChanged(PLAYBACK_STATE_START)}
+                        onPause={() => playingStateChanged(PLAYBACK_STATE_PAUSE)}
+                        onEnded={() => playingStateChanged(PLAYBACK_STATE_END)}
+                        onError={playbackError}
+                    />
                     <p className="flashcard-position">{currentIndex + 1} / {localTerms.length}</p>
-                    <div className="flashcard-nav">
-                        <button className="btn-nav" onClick={goPrev}>← Prev</button>
-                        <button className="btn-nav" onClick={goNext}>Next →</button>
-                        <button className="btn-nav" onClick={handleShuffle}>⇄ Shuffle</button>
-                        <button className="btn-nav btn-nav--terms" onClick={() => setTermDrawerOpen(true)}>📋 Terms</button>
-                        <Tippy key="autoplay" content={autoPlay ? 'Cancel Auto-Play' : 'Enable Auto-Play'} placement="top">
-                            <button
-                                className={`btn-nav${autoPlay ? ' btn-nav--active' : ''}`}
-                                onClick={() => setAutoPlay(p => !p)}
-                            >{autoPlay ? '🔁 Auto' : '⏸ Wait'}</button>
-                        </Tippy>
-                    </div>
+                    <FlashcardNav
+                        onPrev={goPrev}
+                        onNext={goNext}
+                        onShuffle={handleShuffle}
+                        onOpenTerms={() => setTermDrawerOpen(true)}
+                        autoPlay={autoPlay}
+                        onToggleAutoPlay={() => setAutoPlay(p => !p)}
+                        autoPlayActiveLabel="🔁 Auto"
+                        autoPlayInactiveLabel="⏸ Wait"
+                        showPlayerControls={showPlayerControls}
+                        onTogglePlayerControls={() => setShowPlayerControls(p => !p)}
+                        playing={playing}
+                        onTogglePlaying={() => setPlaying(p => !p)}
+                        playbackRate={playbackRate}
+                        loop={repeat}
+                        onTogglePlaybackRate={() => setPlaybackRate(r => r === 1 ? 0.5 : 1)}
+                        repeat={repeat}
+                        onToggleRepeat={() => setRepeat(r => !r)}
+                    />
                 </div>
                 <div className={`term-drawer${termDrawerOpen ? ' term-drawer--open' : ''}`}>
                     <div className="term-drawer__backdrop" onClick={() => setTermDrawerOpen(false)} />
@@ -225,7 +245,7 @@ export function FlashcardSession({terms, cardColors, onBack, title, description}
                             ref={selectRef}
                             size={20}
                             className="term-select"
-                            onChange={e => { setCurrentIndex(Number(e.target.value)); setTermDrawerOpen(false); }}
+                            onChange={onSelectTerm}
                             value={currentIndex}
                         >
                             {sortedTerms.map(({term, i, fix}) => (
diff --git a/src/data/faire.json b/src/data/faire.json
index 28918dc..1f6d6bc 100644
--- a/src/data/faire.json
+++ b/src/data/faire.json
@@ -19,14 +19,14 @@
     {"term": "Sword", "code": "https://media.signbsl.com/videos/asl/aslsearch/mp4/sword.mp4"},
     {"term": "Welcome", "code": "https://media.signbsl.com/videos/asl/youtube/mp4/tQBaI8oi6tw.mp4"},
     {"term": "Parents", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/PARENTS-696.mp4"},
-    {"term": "Do you need help?", "code": "https://www.youtube.com/embed/HDwqcA11tx4?rel=0;autoplay=1"},
-    {"term": "Do you understand?", "code": "https://www.youtube.com/embed/plJHFy1RcMI?rel=0;autoplay=1"},
-    {"term": "Do you want to play a game?", "code": "https://www.youtube.com/embed/aRxUSAA_k2w?rel=0;autoplay=1"},
-    {"term": "How are you?", "code": "https://www.youtube.com/embed/JPtdvzvpWMQ?rel=0;autoplay=1"},
-    {"term": "How did you get here?", "code": "https://www.youtube.com/embed/8Gl6aTI1zAQ?rel=0;autoplay=1"},
-    {"term": "How many siblings do you have?", "code": "https://www.youtube.com/embed/gPjmZURJgWg?rel=0;autoplay=1"},
-    {"term": "How much does it cost?", "code": "https://www.youtube.com/embed/wPwZpfA397c?rel=0;autoplay=1"},
-    {"term": "How old are you?", "code": "https://www.youtube.com/embed/yQD5HyEyWkI?rel=0;autoplay=1"},
+    {"term": "Do you need help?", "code": "https://www.youtube.com/embed/HDwqcA11tx4?rel=0"},
+    {"term": "Do you understand?", "code": "https://www.youtube.com/embed/plJHFy1RcMI?rel=0"},
+    {"term": "Do you want to play a game?", "code": "https://www.youtube.com/embed/aRxUSAA_k2w?rel=0"},
+    {"term": "How are you?", "code": "https://www.youtube.com/embed/JPtdvzvpWMQ?rel=0"},
+    {"term": "How did you get here?", "code": "https://www.youtube.com/embed/8Gl6aTI1zAQ?rel=0"},
+    {"term": "How many siblings do you have?", "code": "https://www.youtube.com/embed/gPjmZURJgWg?rel=0"},
+    {"term": "How much does it cost?", "code": "https://www.youtube.com/embed/wPwZpfA397c?rel=0"},
+    {"term": "How old are you?", "code": "https://www.youtube.com/embed/yQD5HyEyWkI?rel=0"},
     {"term": "What is your phone number", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/what-is-your-phone-number.mp4"}
 ]
 
diff --git a/src/data/questions.json b/src/data/questions.json
index c7dcbc3..bb3a0bc 100644
--- a/src/data/questions.json
+++ b/src/data/questions.json
@@ -1,7 +1,7 @@
 [
     {"term": "Who", "code": ""},
-    {"term": "Which", "code": "https://www.youtube.com/embed/wyP-Xcu2p2A?rel=0;autoplay=1"},
-    {"term": "Where", "code": "https://www.youtube.com/embed/4T2BfSwTIl8?rel=0;autoplay=1"},
+    {"term": "Which", "code": "https://www.youtube.com/embed/wyP-Xcu2p2A?rel=0"},
+    {"term": "Where", "code": "https://www.youtube.com/embed/4T2BfSwTIl8?rel=0"},
     {"term": "Why", "code": ""},
     {"term": "Ask You", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/need.mp4"},
     {"term": "Ask Me", "code": "https://media.signbsl.com/videos/asl/aslbricks/mp4/question.mp4"},
@@ -14,16 +14,16 @@
     {"term": "Help", "code": ""},
     {"term": "How", "code": ""},
     {"term": "Again", "code": ""},
-    {"term": "Do you need help?", "code": "https://www.youtube.com/embed/HDwqcA11tx4?rel=0;autoplay=1"},
-    {"term": "Do you understand?", "code": "https://www.youtube.com/embed/plJHFy1RcMI?rel=0;autoplay=1"},
-    {"term": "Do you want to play a game?", "code": "https://www.youtube.com/embed/aRxUSAA_k2w?rel=0;autoplay=1"},
-    {"term": "How are you?", "code": "https://www.youtube.com/embed/JPtdvzvpWMQ?rel=0;autoplay=1"},
-    {"term": "How did you get here?", "code": "https://www.youtube.com/embed/8Gl6aTI1zAQ?rel=0;autoplay=1"},
-    {"term": "How many siblings do you have?", "code": "https://www.youtube.com/embed/gPjmZURJgWg?rel=0;autoplay=1"},
-    {"term": "How much does it cost?", "code": "https://www.youtube.com/embed/wPwZpfA397c?rel=0;autoplay=1"},
+    {"term": "Do you need help?", "code": "https://www.youtube.com/embed/HDwqcA11tx4?rel=0"},
+    {"term": "Do you understand?", "code": "https://www.youtube.com/embed/plJHFy1RcMI?rel=0"},
+    {"term": "Do you want to play a game?", "code": "https://www.youtube.com/embed/aRxUSAA_k2w?rel=0"},
+    {"term": "How did you get here?", "code": "https://www.youtube.com/embed/8Gl6aTI1zAQ?rel=0"},
+    {"term": "How many siblings do you have?", "code": "https://www.youtube.com/embed/gPjmZURJgWg?rel=0"},
+    {"term": "How much does it cost?", "code": "https://www.youtube.com/embed/wPwZpfA397c?rel=0"},
     {"term": "What is your phone number", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/what-is-your-phone-number.mp4"},
     {"term": "What is your name?", "code": "https://media.signbsl.com/videos/asl/startasl/mp4/what-is-your-name.mp4"},
     {"term": "What Happened", "code": "https://www.signasl.org/sign/what-happened#8r4cbjhtns"},
-    {"term": "How old are you?", "code": "https://www.youtube.com/embed/yQD5HyEyWkI?rel=0;autoplay=1"}
+    {"term": "Are you hurt?", "code": "https://www.youtube.com/watch?v=cJRQX5mPV_4&t=2s"},
+    {"term": "How old are you?", "code": "https://www.youtube.com/embed/yQD5HyEyWkI?rel=0"}
 ]
 
diff --git a/src/data/terms.json b/src/data/terms.json
index 37a1cd0..57e5096 100644
--- a/src/data/terms.json
+++ b/src/data/terms.json
@@ -170,7 +170,7 @@
     {"term": "Will", "code": "https://media.signbsl.com/videos/asl/aslbricks/mp4/will.mp4"},
     {"term": "Win", "code": ""},
     {"term": "Winter", "code": ""},
-    {"term": "With", "code": "https://www.youtube.com/embed/l1ujo80sNU0?rel=0;autoplay=1"},
+    {"term": "With", "code": "https://www.youtube.com/embed/l1ujo80sNU0?rel=0"},
     {"term": "Woman", "code": ""},
     {"term": "Workshop", "code": ""},
     {"term": "Wow", "code": ""},
diff --git a/src/data/verbs.json b/src/data/verbs.json
index b97beeb..4fec0e7 100644
--- a/src/data/verbs.json
+++ b/src/data/verbs.json
@@ -24,11 +24,11 @@
     {"term": "See", "code": "https://media.signbsl.com/videos/asl/aslsignbank/mp4/SEE-538.mp4"},
     {"term": "Speak", "code": "https://media.signbsl.com/videos/asl/signlanguagestudent/mp4/speak.mp4"},
     {"term": "Spoke", "code": "", "fix": true},
-    {"term": "Talk", "code": "https://www.youtube.com/embed/6Wg2rCGpGNw?rel=0;autoplay=1"},
-    {"term": "Tell", "code": "https://www.youtube.com/embed/FdSl-UyUpZU?rel=0;autoplay=1"},
+    {"term": "Talk", "code": "https://www.youtube.com/embed/6Wg2rCGpGNw?rel=0"},
+    {"term": "Tell", "code": "https://www.youtube.com/embed/FdSl-UyUpZU?rel=0"},
     {"term": "Told", "code": "https://media.signbsl.com/videos/asl/signlanguagestudent/mp4/told.mp4"},
-    {"term": "Want", "code": "https://www.youtube.com/embed/dZw1yl5Q31I?rel=0;autoplay=1"},
-    {"term": "Was", "code": "https://www.youtube.com/embed/BZ5B8gWwNFs?rel=0;autoplay=1"},
+    {"term": "Want", "code": "https://www.youtube.com/embed/dZw1yl5Q31I?rel=0"},
+    {"term": "Was", "code": "https://www.youtube.com/embed/BZ5B8gWwNFs?rel=0"},
     {"term": "Went", "code": "https://media.signbsl.com/videos/asl/signlanguagestudent/mp4/went.mp4"},
     {"term": "Were", "code": "https://media.signbsl.com/videos/asl/signlanguagestudent/mp4/were.mp4"},
     {"term": "Will", "code": "https://media.signbsl.com/videos/asl/aslbricks/mp4/will.mp4"},
diff --git a/tests/FlashcardNav.test.jsx b/tests/FlashcardNav.test.jsx
new file mode 100644
index 0000000..e0f3b3c
--- /dev/null
+++ b/tests/FlashcardNav.test.jsx
@@ -0,0 +1,185 @@
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {FlashcardNav} from '../src/components/FlashcardNav';
+
+function baseProps(overrides = {}) {
+    return {
+        onPrev: vi.fn(),
+        onNext: vi.fn(),
+        onShuffle: vi.fn(),
+        autoPlay: false,
+        onToggleAutoPlay: vi.fn(),
+        autoPlayActiveLabel: '🔁 Auto',
+        autoPlayInactiveLabel: '⏸ Wait',
+        showPlayerControls: true,
+        onTogglePlayerControls: vi.fn(),
+        playing: false,
+        onTogglePlaying: vi.fn(),
+        playbackRate: 1,
+        onTogglePlaybackRate: vi.fn(),
+        repeat: false,
+        onToggleRepeat: vi.fn(),
+        ...overrides,
+    };
+}
+
+describe('FlashcardNav', () => {
+    it('renders Prev, Next and Shuffle buttons', () => {
+        render(<FlashcardNav {...baseProps()} />);
+        expect(screen.getByText('← Prev')).toBeInTheDocument();
+        expect(screen.getByText('Next →')).toBeInTheDocument();
+        expect(screen.getByText('⇄ Shuffle')).toBeInTheDocument();
+    });
+
+    it('calls onPrev when Prev is clicked', () => {
+        const onPrev = vi.fn();
+        render(<FlashcardNav {...baseProps({onPrev})} />);
+        fireEvent.click(screen.getByText('← Prev'));
+        expect(onPrev).toHaveBeenCalledOnce();
+    });
+
+    it('calls onNext when Next is clicked', () => {
+        const onNext = vi.fn();
+        render(<FlashcardNav {...baseProps({onNext})} />);
+        fireEvent.click(screen.getByText('Next →'));
+        expect(onNext).toHaveBeenCalledOnce();
+    });
+
+    it('calls onShuffle when Shuffle is clicked', () => {
+        const onShuffle = vi.fn();
+        render(<FlashcardNav {...baseProps({onShuffle})} />);
+        fireEvent.click(screen.getByText('⇄ Shuffle'));
+        expect(onShuffle).toHaveBeenCalledOnce();
+    });
+
+    it('does not render Terms button when onOpenTerms is not provided', () => {
+        render(<FlashcardNav {...baseProps()} />);
+        expect(screen.queryByText('📋 Terms')).not.toBeInTheDocument();
+    });
+
+    it('renders Terms button when onOpenTerms is provided', () => {
+        render(<FlashcardNav {...baseProps({onOpenTerms: vi.fn()})} />);
+        expect(screen.getByText('📋 Terms')).toBeInTheDocument();
+    });
+
+    it('calls onOpenTerms when Terms is clicked', () => {
+        const onOpenTerms = vi.fn();
+        render(<FlashcardNav {...baseProps({onOpenTerms})} />);
+        fireEvent.click(screen.getByText('📋 Terms'));
+        expect(onOpenTerms).toHaveBeenCalledOnce();
+    });
+
+    it('shows inactive auto-play label when autoPlay is false', () => {
+        render(<FlashcardNav {...baseProps({autoPlay: false, autoPlayInactiveLabel: '⏸ Wait'})} />);
+        expect(screen.getByText('⏸ Wait')).toBeInTheDocument();
+    });
+
+    it('shows active auto-play label when autoPlay is true', () => {
+        render(<FlashcardNav {...baseProps({autoPlay: true, autoPlayActiveLabel: '🔁 Auto'})} />);
+        expect(screen.getByText('🔁 Auto')).toBeInTheDocument();
+    });
+
+    it('auto-play button has active class when autoPlay is true', () => {
+        render(<FlashcardNav {...baseProps({autoPlay: true, autoPlayActiveLabel: '🔁 Auto'})} />);
+        expect(screen.getByText('🔁 Auto')).toHaveClass('btn-nav--active');
+    });
+
+    it('calls onToggleAutoPlay when auto-play button is clicked', () => {
+        const onToggleAutoPlay = vi.fn();
+        render(<FlashcardNav {...baseProps({onToggleAutoPlay})} />);
+        fireEvent.click(screen.getByText('⏸ Wait'));
+        expect(onToggleAutoPlay).toHaveBeenCalledOnce();
+    });
+
+    it('controls button has active class when showPlayerControls is true', () => {
+        render(<FlashcardNav {...baseProps({showPlayerControls: true})} />);
+        expect(screen.getByText('🎛️ Controls')).toHaveClass('btn-nav--active');
+    });
+
+    it('controls button lacks active class when showPlayerControls is false', () => {
+        render(<FlashcardNav {...baseProps({showPlayerControls: false})} />);
+        expect(screen.getByText('🎛️ Controls')).not.toHaveClass('btn-nav--active');
+    });
+
+    it('calls onTogglePlayerControls when controls button is clicked', () => {
+        const onTogglePlayerControls = vi.fn();
+        render(<FlashcardNav {...baseProps({onTogglePlayerControls})} />);
+        fireEvent.click(screen.getByText('🎛️ Controls'));
+        expect(onTogglePlayerControls).toHaveBeenCalledOnce();
+    });
+
+    it('shows ▶ play icon when not playing', () => {
+        render(<FlashcardNav {...baseProps({playing: false})} />);
+        expect(screen.getByText('▶')).toBeInTheDocument();
+    });
+
+    it('shows ⏸ pause icon when playing', () => {
+        render(<FlashcardNav {...baseProps({playing: true})} />);
+        expect(screen.getByText('⏸')).toBeInTheDocument();
+    });
+
+    it('play button has active class when playing', () => {
+        render(<FlashcardNav {...baseProps({playing: true})} />);
+        expect(screen.getByText('⏸')).toHaveClass('btn-nav--active');
+    });
+
+    it('calls onTogglePlaying when play/pause button is clicked', () => {
+        const onTogglePlaying = vi.fn();
+        render(<FlashcardNav {...baseProps({onTogglePlaying})} />);
+        fireEvent.click(screen.getByText('▶'));
+        expect(onTogglePlaying).toHaveBeenCalledOnce();
+    });
+
+    it('shows 1× speed label at normal rate', () => {
+        render(<FlashcardNav {...baseProps({playbackRate: 1})} />);
+        expect(screen.getByText(/🐢\s*1×/)).toBeInTheDocument();
+    });
+
+    it('shows ½× speed label at half rate and applies active class', () => {
+        render(<FlashcardNav {...baseProps({playbackRate: 0.5})} />);
+        const btn = screen.getByText(/🐢\s*½×/);
+        expect(btn).toBeInTheDocument();
+        expect(btn).toHaveClass('btn-nav--active');
+    });
+
+    it('calls onTogglePlaybackRate when speed button is clicked', () => {
+        const onTogglePlaybackRate = vi.fn();
+        render(<FlashcardNav {...baseProps({onTogglePlaybackRate})} />);
+        fireEvent.click(screen.getByText(/🐢\s*1×/));
+        expect(onTogglePlaybackRate).toHaveBeenCalledOnce();
+    });
+
+    it('applies extra className to the nav container', () => {
+        const {container} = render(<FlashcardNav {...baseProps({className: 'fcs-landscape__nav'})} />);
+        expect(container.firstChild).toHaveClass('flashcard-nav', 'fcs-landscape__nav');
+    });
+
+    it('container has only flashcard-nav class when no extra className is given', () => {
+        const {container} = render(<FlashcardNav {...baseProps()} />);
+        expect(container.firstChild).toHaveClass('flashcard-nav');
+        expect(container.firstChild.className).toBe('flashcard-nav');
+    });
+
+    it('renders Loop button', () => {
+        render(<FlashcardNav {...baseProps()} />);
+        expect(screen.getByText('🔁 Loop')).toBeInTheDocument();
+    });
+
+    it('Loop button lacks active class when repeat is false', () => {
+        render(<FlashcardNav {...baseProps({repeat: false})} />);
+        expect(screen.getByText('🔁 Loop')).not.toHaveClass('btn-nav--active');
+    });
+
+    it('Loop button has active class when repeat is true', () => {
+        render(<FlashcardNav {...baseProps({repeat: true})} />);
+        expect(screen.getByText('🔁 Loop')).toHaveClass('btn-nav--active');
+    });
+
+    it('calls onToggleRepeat when Loop button is clicked', () => {
+        const onToggleRepeat = vi.fn();
+        render(<FlashcardNav {...baseProps({onToggleRepeat})} />);
+        fireEvent.click(screen.getByText('🔁 Loop'));
+        expect(onToggleRepeat).toHaveBeenCalledOnce();
+    });
+});
\ No newline at end of file
diff --git a/tests/FlashcardPlayer.test.jsx b/tests/FlashcardPlayer.test.jsx
new file mode 100644
index 0000000..664236f
--- /dev/null
+++ b/tests/FlashcardPlayer.test.jsx
@@ -0,0 +1,138 @@
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {render, screen, fireEvent} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {FlashcardPlayer} from '../src/components/FlashcardPlayer';
+
+vi.mock('react-player', () => {
+    const MockPlayer = vi.fn(({src, playing, loop, controls, playbackRate, onPlay, onPause, onEnded, onError}) => (
+        <div
+            data-testid="react-player"
+            data-src={src}
+            data-playing={String(playing)}
+            data-loop={String(loop)}
+            data-controls={String(controls)}
+            data-playback-rate={String(playbackRate)}
+        >
+            <button data-testid="trigger-play" onClick={onPlay} />
+            <button data-testid="trigger-pause" onClick={onPause} />
+            <button data-testid="trigger-ended" onClick={onEnded} />
+            <button data-testid="trigger-error" onClick={() => onError && onError(new Error('test error'))} />
+        </div>
+    ));
+    return {default: MockPlayer};
+});
+
+const TEST_URL = 'https://example.com/sign.mp4';
+
+function baseProps(overrides = {}) {
+    return {
+        url: TEST_URL,
+        playing: false,
+        loop: false,
+        autoPlay: false,
+        controls: true,
+        playbackRate: 1,
+        onPlay: vi.fn(),
+        onPause: vi.fn(),
+        onEnded: vi.fn(),
+        onError: vi.fn(),
+        ...overrides,
+    };
+}
+
+beforeEach(() => {
+    vi.clearAllMocks();
+});
+
+describe('FlashcardPlayer', () => {
+    it('renders the flashcard-video container', () => {
+        const {container} = render(<FlashcardPlayer {...baseProps()} />);
+        expect(container.firstChild).toHaveClass('flashcard-video');
+    });
+
+    it('renders the player when url is provided', () => {
+        render(<FlashcardPlayer {...baseProps()} />);
+        expect(screen.getByTestId('react-player')).toBeInTheDocument();
+        expect(screen.queryByText('No video available')).not.toBeInTheDocument();
+    });
+
+    it('renders the placeholder when url is empty string', () => {
+        render(<FlashcardPlayer {...baseProps({url: ''})} />);
+        expect(screen.getByText('No video available')).toBeInTheDocument();
+        expect(screen.queryByTestId('react-player')).not.toBeInTheDocument();
+    });
+
+    it('renders the placeholder when url is null', () => {
+        render(<FlashcardPlayer {...baseProps({url: null})} />);
+        expect(screen.getByText('No video available')).toBeInTheDocument();
+        expect(screen.queryByTestId('react-player')).not.toBeInTheDocument();
+    });
+
+    it('passes url as src to the player', () => {
+        render(<FlashcardPlayer {...baseProps({url: TEST_URL})} />);
+        expect(screen.getByTestId('react-player')).toHaveAttribute('data-src', TEST_URL);
+    });
+
+    it('passes playing=true to the player', () => {
+        render(<FlashcardPlayer {...baseProps({playing: true})} />);
+        expect(screen.getByTestId('react-player')).toHaveAttribute('data-playing', 'true');
+    });
+
+    it('passes playing=false to the player', () => {
+        render(<FlashcardPlayer {...baseProps({playing: false})} />);
+        expect(screen.getByTestId('react-player')).toHaveAttribute('data-playing', 'false');
+    });
+
+    it('passes loop=true to the player', () => {
+        render(<FlashcardPlayer {...baseProps({loop: true})} />);
+        expect(screen.getByTestId('react-player')).toHaveAttribute('data-loop', 'true');
+    });
+
+    it('passes loop=false to the player', () => {
+        render(<FlashcardPlayer {...baseProps({loop: false})} />);
+        expect(screen.getByTestId('react-player')).toHaveAttribute('data-loop', 'false');
+    });
+
+    it('passes controls=true to the player', () => {
+        render(<FlashcardPlayer {...baseProps({controls: true})} />);
+        expect(screen.getByTestId('react-player')).toHaveAttribute('data-controls', 'true');
+    });
+
+    it('passes controls=false to the player', () => {
+        render(<FlashcardPlayer {...baseProps({controls: false})} />);
+        expect(screen.getByTestId('react-player')).toHaveAttribute('data-controls', 'false');
+    });
+
+    it('passes playbackRate to the player', () => {
+        render(<FlashcardPlayer {...baseProps({playbackRate: 0.5})} />);
+        expect(screen.getByTestId('react-player')).toHaveAttribute('data-playback-rate', '0.5');
+    });
+
+    it('calls onPlay when the player fires play', () => {
+        const onPlay = vi.fn();
+        render(<FlashcardPlayer {...baseProps({onPlay})} />);
+        fireEvent.click(screen.getByTestId('trigger-play'));
+        expect(onPlay).toHaveBeenCalledOnce();
+    });
+
+    it('calls onPause when the player fires pause', () => {
+        const onPause = vi.fn();
+        render(<FlashcardPlayer {...baseProps({onPause})} />);
+        fireEvent.click(screen.getByTestId('trigger-pause'));
+        expect(onPause).toHaveBeenCalledOnce();
+    });
+
+    it('calls onEnded when the player fires ended', () => {
+        const onEnded = vi.fn();
+        render(<FlashcardPlayer {...baseProps({onEnded})} />);
+        fireEvent.click(screen.getByTestId('trigger-ended'));
+        expect(onEnded).toHaveBeenCalledOnce();
+    });
+
+    it('calls onError when the player fires an error', () => {
+        const onError = vi.fn();
+        render(<FlashcardPlayer {...baseProps({onError})} />);
+        fireEvent.click(screen.getByTestId('trigger-error'));
+        expect(onError).toHaveBeenCalledOnce();
+    });
+});
diff --git a/tests/FlashcardSession.test.jsx b/tests/FlashcardSession.test.jsx
index f8b8dc4..25796aa 100644
--- a/tests/FlashcardSession.test.jsx
+++ b/tests/FlashcardSession.test.jsx
@@ -1,8 +1,24 @@
-import {describe, it, expect} from 'vitest';
+import {describe, it, expect, beforeEach, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {FlashcardSession} from '../src/components/FlashcardSession';
 
+beforeEach(() => {
+    Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: vi.fn(query => ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            dispatchEvent: vi.fn(),
+        })),
+    });
+});
+
 const TERMS = [
     {term: 'Banana', code: 'https://example.com/banana.mp4'},
     {term: 'Apple', code: 'https://example.com/apple.mp4'},