diff --git a/client/src/App.jsx b/client/src/App.jsx
index 8639fb6..b3645c2 100755
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import ViolationForm from './components/ViolationForm';
 import Dashboard     from './components/Dashboard';
 import ReadmeModal   from './components/ReadmeModal';
+import ToastProvider from './components/ToastProvider';
 
 const tabs = [
   { id: 'dashboard', label: '📊 Dashboard' },
@@ -45,29 +46,31 @@ export default function App() {
   const [showReadme, setShowReadme] = useState(false);
 
   return (
-    <div style={s.app}>
-      <nav style={s.nav}>
-        <div style={s.logoWrap}>
-          <img src="/static/mpm-logo.png" alt="MPM" style={s.logoImg} />
-          <div style={s.logoText}>CPAS Tracker</div>
+    <ToastProvider>
+      <div style={s.app}>
+        <nav style={s.nav}>
+          <div style={s.logoWrap}>
+            <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>
 
-        {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 />}
+        {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
       </div>
-
-      {showReadme && <ReadmeModal onClose={() => setShowReadme(false)} />}
-    </div>
+    </ToastProvider>
   );
 }