client/src/App.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import ViolationForm from './components/ViolationForm';
 import Dashboard     from './components/Dashboard';
+import ReadmeModal   from './components/ReadmeModal';
 
 const tabs = [
   { id: 'dashboard', label: '📊 Dashboard' },
@@ -20,11 +21,29 @@ const s = {
     cursor: 'pointer', fontWeight: active ? 700 : 400, fontSize: '14px',
     background: 'none', border: 'none',
   }),
+  // Docs button sits flush-right in the nav
+  docsBtn: {
+    marginLeft: 'auto',
+    background: 'none',
+    border: '1px solid #2a2b3a',
+    color: '#9ca0b8',
+    borderRadius: '6px',
+    padding: '6px 14px',
+    fontSize: '12px',
+    cursor: 'pointer',
+    fontWeight: 600,
+    letterSpacing: '0.3px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+  },
   card: { maxWidth: '1100px', margin: '30px auto', background: '#111217', borderRadius: '10px', boxShadow: '0 2px 16px rgba(0,0,0,0.6)', border: '1px solid #222' },
 };
 
 export default function App() {
-  const [tab, setTab] = useState('dashboard');
+  const [tab,        setTab]        = useState('dashboard');
+  const [showReadme, setShowReadme] = useState(false);
+
   return (
     <div style={s.app}>
       <nav style={s.nav}>
@@ -32,15 +51,23 @@ export default function App() {
           <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
           <div style={s.logoText}>CPAS Tracker</div>
         </div>
+
         {tabs.map(t => (
           <button key={t.id} style={s.tab(tab === t.id)} onClick={() => setTab(t.id)}>
             {t.label}
           </button>
         ))}
+
+        <button style={s.docsBtn} onClick={() => setShowReadme(true)} title="Open admin documentation">
+          <span>?</span> Docs
+        </button>
       </nav>
+
       <div style={s.card}>
         {tab === 'dashboard' ? <Dashboard /> : <ViolationForm />}
       </div>
+
+      {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
     </div>
   );
 }