diff --git a/index.html b/index.html
index a3f47c7..6da0bcc 100644
--- a/index.html
+++ b/index.html
@@ -56,9 +56,9 @@ function autoCorrelate(buf, sr) {
 }
 
 const CHORDS = {
-  Em:{ dots:[{s:1,f:2,n:"2"},{s:2,f:2,n:"3"}], open:[3,4,5], muted:[], label:"x x 0 2 2 0" },
-  Am:{ dots:[{s:4,f:2,n:"1"},{s:3,f:2,n:"2"},{s:2,f:2,n:"3"}], open:[4,5], muted:[0], label:"x 0 2 2 1 0" },
-  G: { dots:[{s:0,f:3,n:"2"},{s:5,f:3,n:"4"},{s:1,f:2,n:"1"},{s:4,f:2,n:"3"}], open:[2,3], muted:[], label:"3 2 0 0 3 3" },
+  Em:{ dots:[{s:2,f:2,n:"2"},{s:3,f:2,n:"3"}], open:[0,1,4,5], muted:[], label:"0 0 2 2 0 0" },
+  Am:{ dots:[{s:2,f:2,n:"2"},{s:3,f:2,n:"3"},{s:4,f:2,n:"1"}], open:[1,5], muted:[0], label:"x 0 2 2 1 0" },
+  G: { dots:[{s:0,f:3,n:"2"},{s:1,f:2,n:"1"},{s:4,f:3,n:"3"},{s:5,f:3,n:"4"}], open:[2,3], muted:[], label:"3 2 0 0 3 3" },
   C: { dots:[{s:1,f:3,n:"3"},{s:2,f:2,n:"2"},{s:4,f:1,n:"1"}], open:[3,5], muted:[0], label:"x 3 2 0 1 0" },
   D: { dots:[{s:3,f:2,n:"1"},{s:4,f:3,n:"3"},{s:5,f:2,n:"2"}], open:[2], muted:[0,1], label:"x x 0 2 3 2" },
 };
@@ -897,73 +897,130 @@ function LessonBody({ id, detected, onTarget, listening, onStartMic }) {
       <Tip>Sit with the guitar waist on your right leg. Back straight, neck angled slightly up. Thumb behind the neck, fingers curling over the fretboard.</Tip>
       <p>Your strumming hand hovers over the soundhole. For now use your thumb, sweeping downward across the strings.</p>
       <div style={{height:1,background:C.fret,margin:"20px 0"}}/>
+      <p style={{fontWeight:600,color:C.text,marginBottom:8}}>Finger numbering</p>
+      <p style={{marginBottom:12}}>Throughout this app, the gold circles on chord diagrams show you which finger to use. Here is how they are numbered:</p>
+      <div style={{background:"#0A0A0E",borderRadius:12,border:"1px solid "+C.fret,padding:"16px 8px",marginBottom:16}}>
+        <svg viewBox="0 0 320 220" width="100%" style={{display:"block",maxWidth:320,margin:"0 auto"}}>
+          {/* Palm base */}
+          <ellipse cx={160} cy={188} rx={72} ry={30} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}/>
+
+          {/* Thumb - angled left */}
+          <ellipse cx={76} cy={155} rx={16} ry={32} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}
+            transform="rotate(-35 76 155)"/>
+
+          {/* Index finger */}
+          <rect x={91} y={68} width={30} height={88} rx={15} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}/>
+          {/* Middle finger - tallest */}
+          <rect x={129} y={48} width={30} height={105} rx={15} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}/>
+          {/* Ring finger */}
+          <rect x={167} y={60} width={30} height={95} rx={15} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}/>
+          {/* Pinky */}
+          <rect x={205} y={82} width={26} height={73} rx={13} fill="#2A2018" stroke="#4A3828" strokeWidth={1.5}/>
+
+          {/* Knuckle lines */}
+          <line x1={94} y1={120} x2={118} y2={120} stroke="#4A3828" strokeWidth={1}/>
+          <line x1={94} y1={140} x2={118} y2={140} stroke="#4A3828" strokeWidth={1}/>
+          <line x1={132} y1={118} x2={156} y2={118} stroke="#4A3828" strokeWidth={1}/>
+          <line x1={132} y1={138} x2={156} y2={138} stroke="#4A3828" strokeWidth={1}/>
+          <line x1={170} y1={120} x2={194} y2={120} stroke="#4A3828" strokeWidth={1}/>
+          <line x1={170} y1={140} x2={194} y2={140} stroke="#4A3828" strokeWidth={1}/>
+          <line x1={208} y1={126} x2={228} y2={126} stroke="#4A3828" strokeWidth={1}/>
+          <line x1={208} y1={144} x2={228} y2={144} stroke="#4A3828" strokeWidth={1}/>
+
+          {/* Gold circles on fingertips with numbers */}
+          {/* Index = 1 */}
+          <circle cx={106} cy={80} r={16} fill="rgba(212,168,71,0.15)"/>
+          <circle cx={106} cy={80} r={13} fill={C.amber}/>
+          <text x={106} y={85} textAnchor="middle" fontSize={14} fill="#1A1A1F" fontWeight="900" fontFamily="sans-serif">1</text>
+
+          {/* Middle = 2 */}
+          <circle cx={144} cy={60} r={16} fill="rgba(212,168,71,0.15)"/>
+          <circle cx={144} cy={60} r={13} fill={C.amber}/>
+          <text x={144} y={65} textAnchor="middle" fontSize={14} fill="#1A1A1F" fontWeight="900" fontFamily="sans-serif">2</text>
+
+          {/* Ring = 3 */}
+          <circle cx={182} cy={72} r={16} fill="rgba(212,168,71,0.15)"/>
+          <circle cx={182} cy={72} r={13} fill={C.amber}/>
+          <text x={182} y={77} textAnchor="middle" fontSize={14} fill="#1A1A1F" fontWeight="900" fontFamily="sans-serif">3</text>
+
+          {/* Pinky = 4 */}
+          <circle cx={218} cy={94} r={16} fill="rgba(212,168,71,0.15)"/>
+          <circle cx={218} cy={94} r={13} fill={C.amber}/>
+          <text x={218} y={99} textAnchor="middle" fontSize={14} fill="#1A1A1F" fontWeight="900" fontFamily="sans-serif">4</text>
+
+          {/* Labels below fingers */}
+          <text x={106} y={172} textAnchor="middle" fontSize={11} fill={C.muted} fontFamily="sans-serif">Index</text>
+          <text x={144} y={172} textAnchor="middle" fontSize={11} fill={C.muted} fontFamily="sans-serif">Middle</text>
+          <text x={182} y={172} textAnchor="middle" fontSize={11} fill={C.muted} fontFamily="sans-serif">Ring</text>
+          <text x={218} y={172} textAnchor="middle" fontSize={11} fill={C.muted} fontFamily="sans-serif">Pinky</text>
+
+          {/* Thumb label */}
+          <text x={58} y={175} textAnchor="middle" fontSize={11} fill={C.muted} fontFamily="sans-serif">Thumb</text>
+          <text x={58} y={187} textAnchor="middle" fontSize={10} fill={C.muted} fontFamily="sans-serif">(not numbered)</text>
+        </svg>
+      </div>
+      <Tip>When a chord diagram shows a <strong style={{color:C.amber}}>1</strong> on a string, press that string with your index finger. <strong style={{color:C.amber}}>2</strong> = middle, <strong style={{color:C.amber}}>3</strong> = ring, <strong style={{color:C.amber}}>4</strong> = pinky.</Tip>
+      <div style={{height:1,background:C.fret,margin:"20px 0"}}/>
       <p style={{fontSize:14,color:C.muted}}>Strings thick to thin: <strong style={{color:C.text}}>E A D G B e</strong> - remember with "Elephants And Donkeys Grow Big Ears."</p>
     </div>
   );
   if (id === 1) {
-    const NUM_FRETS=5, NS=6, W=320, H=200;
-    const TOP=44, BOT=H-24, LEFT=44, RIGHT=W-12;
+    // Wider left margin: label col at 14, marker col at 34, nut at 64
+    const NUM_FRETS=5, NS=6, W=340, H=210;
+    const TOP=44, BOT=H-24, LEFT=64, RIGHT=W-10;
     const strGap=(BOT-TOP)/(NS-1);
     const fretGap=(RIGHT-LEFT)/NUM_FRETS;
     const LABELS=["E","A","D","G","B","e"];
-    // Two example notes: open E (str0 fret0), G chord shape highlight (str5 fret3)
-    // Single notes to demo: 1=open E2(str0,fr0), 2=open e(str5,fr0), 3=G chord(str0,fr3 + str5,fr3)
-    const demoNotes=[
-      {str:0,fret:0,label:"1",note:"E2",desc:"Open Low E"},
-      {str:5,fret:0,label:"2",note:"e4",desc:"Open High e"},
-      {str:0,fret:3,label:"3",note:"G",desc:"Fret 3"},
-      {str:5,fret:3,label:"4",note:"G",desc:"Fret 3"},
-      {str:1,fret:2,label:"5",note:"B",desc:"Fret 2"},
+    const markers=[
+      {s:0,type:"open"},{s:1,type:"muted"},{s:2,type:"muted"},
+      {s:3,type:"muted"},{s:4,type:"open"},{s:5,type:"open"}
     ];
     return (
       <div>
         <p style={{color:"#C8C5BE",fontSize:15,lineHeight:1.75,marginBottom:14}}>
           Each line is a string on your guitar. Numbers tell you which fret to press. 0 means open - no fingers needed.
         </p>
-        <div style={{background:"#0A0A0E",borderRadius:10,padding:"10px 6px",border:"1px solid "+C.fret,marginBottom:16}}>
+        <div style={{background:"#0A0A0E",borderRadius:10,padding:"10px 6px",border:"1px solid "+C.fret,marginBottom:16,overflowX:"auto"}}>
           <div style={{textAlign:"center",fontSize:12,color:C.muted,marginBottom:8}}>Example - a G chord</div>
           <svg width={W} height={H} style={{display:"block",margin:"0 auto"}}>
+            {/* Nut */}
             <line x1={LEFT} y1={TOP-2} x2={LEFT} y2={BOT+2} stroke={C.text} strokeWidth={3}/>
+            {/* Fret lines */}
             {Array.from({length:NUM_FRETS+1},(_,f)=>(
               <line key={f} x1={LEFT+f*fretGap} y1={TOP} x2={LEFT+f*fretGap} y2={BOT} stroke={C.fret} strokeWidth={1}/>
             ))}
+            {/* Strings */}
             {Array.from({length:NS},(_,s)=>(
               <line key={s} x1={LEFT} y1={TOP+s*strGap} x2={RIGHT} y2={TOP+s*strGap}
                 stroke={C.string} strokeWidth={s===0?2:s===5?0.8:1.2}/>
             ))}
+            {/* String name labels - col 1 */}
             {LABELS.map((n,s)=>(
-              <text key={s} x={LEFT-10} y={TOP+s*strGap+4} textAnchor="middle"
-                fontSize={10} fill={C.amber} fontFamily="monospace" fontWeight="600">{n}</text>
+              <text key={s} x={14} y={TOP+s*strGap+4} textAnchor="middle"
+                fontSize={11} fill={C.amber} fontFamily="monospace" fontWeight="700">{n}</text>
             ))}
-            {Array.from({length:NUM_FRETS},(_,f)=>(
-              <text key={f} x={LEFT+(f+0.5)*fretGap} y={BOT+16} textAnchor="middle"
-                fontSize={9} fill={C.muted} fontFamily="monospace">{f+1}</text>
-            ))}
-            {/* Per-string markers left of nut: O=open, X=muted, nothing=fretted */}
-            {[
-              {s:0, type:"open"},
-              {s:1, type:"muted"},
-              {s:2, type:"muted"},
-              {s:3, type:"muted"},
-              {s:4, type:"open"},
-              {s:5, type:"open"},
-            ].map(({s,type})=>{
-              const cy = TOP+s*strGap;
-              const cx = LEFT-16;
+            {/* Open/muted markers - col 2 */}
+            {markers.map(({s,type})=>{
+              const cy=TOP+s*strGap, cx=38;
               if(type==="open") return (
                 <g key={s}>
-                  <circle cx={cx} cy={cy} r={7} fill="none" stroke={C.sage} strokeWidth={2}/>
+                  <circle cx={cx} cy={cy} r={8} fill="none" stroke={C.sage} strokeWidth={2}/>
                   <text x={cx} y={cy+4} textAnchor="middle" fontSize={9}
                     fill={C.sage} fontFamily="monospace" fontWeight="700">0</text>
                 </g>
               );
               return (
                 <g key={s}>
-                  <line x1={cx-5} y1={cy-5} x2={cx+5} y2={cy+5} stroke={C.coral} strokeWidth={2}/>
-                  <line x1={cx+5} y1={cy-5} x2={cx-5} y2={cy+5} stroke={C.coral} strokeWidth={2}/>
+                  <line x1={cx-6} y1={cy-6} x2={cx+6} y2={cy+6} stroke={C.coral} strokeWidth={2.5}/>
+                  <line x1={cx+6} y1={cy-6} x2={cx-6} y2={cy+6} stroke={C.coral} strokeWidth={2.5}/>
                 </g>
               );
             })}
+            {/* Fret numbers */}
+            {Array.from({length:NUM_FRETS},(_,f)=>(
+              <text key={f} x={LEFT+(f+0.5)*fretGap} y={BOT+16} textAnchor="middle"
+                fontSize={9} fill={C.muted} fontFamily="monospace">{f+1}</text>
+            ))}
             {/* Fretted dots */}
             {[{s:0,f:3,n:"3"},{s:1,f:2,n:"2"},{s:4,f:2,n:"1"},{s:5,f:3,n:"4"}].map(({s,f,n},i)=>{
               const cx=LEFT+(f-0.5)*fretGap, cy=TOP+s*strGap;
@@ -978,9 +1035,9 @@ function LessonBody({ id, detected, onTarget, listening, onStartMic }) {
             })}
           </svg>
         </div>
-        <Tip>0 = open string (no fingers). A number = press that fret. X = don't play that string. Green O = open, play it.</Tip>
+        <Tip>0 = open string (no fingers). A number = press that fret. X = don't play that string.</Tip>
         <p style={{color:"#C8C5BE",fontSize:14,lineHeight:1.7,marginTop:12}}>
-          The top string (E) is the thickest - the one closest to you when you hold the guitar. The bottom (e) is the thinnest.
+          The top string (E) is the thickest - closest to you when holding the guitar. The bottom (e) is the thinnest.
         </p>
       </div>
     );