diff --git a/STRUCTURE.md b/STRUCTURE.md
index b241942..de5d2d5 100644
--- a/STRUCTURE.md
+++ b/STRUCTURE.md
@@ -244,7 +244,7 @@ Authority:
 
 **Mandatory Adherence Checklist:**
 1.  **Always** refer to `projects-requirements.md` for the definitive ruleset.
-2.  Never implement functionality that contradicts the approved Tech Stack (Next.js App Router, React, Tailwind CSS, shadcn/ui, SQLite).
+2.  Never implement functionality that contradicts the approved Tech Stack (Vite, React, React Router, Tailwind CSS, shadcn/ui, Sonner, SQLite via better-sqlite3, Express).
 3.  Treat security and performance checks (per `projects-requirements.md`) as *primary* considerations, not secondary checks.
 
 ---
diff --git a/client/components/ui/sonner.jsx b/client/components/ui/sonner.jsx
new file mode 100644
index 0000000..9e9d7b9
--- /dev/null
+++ b/client/components/ui/sonner.jsx
@@ -0,0 +1,37 @@
+import { Toaster as Sonner } from 'sonner';
+import { useTheme } from '../../contexts/ThemeContext';
+
+export function Toaster() {
+  const { theme } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme}
+      position="top-right"
+      closeButton
+      expand={false}
+      visibleToasts={5}
+      duration={3500}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            'group toast group-[.toaster]:rounded-xl group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-card group-[.toaster]:text-card-foreground group-[.toaster]:shadow-lg group-[.toaster]:backdrop-blur-sm group-[.toaster]:border-l-4',
+          title: 'group-[.toast]:text-sm group-[.toast]:font-semibold group-[.toast]:text-foreground',
+          description: 'group-[.toast]:text-sm group-[.toast]:text-muted-foreground',
+          actionButton:
+            'group-[.toast]:rounded-md group-[.toast]:bg-primary group-[.toast]:px-3 group-[.toast]:py-1.5 group-[.toast]:text-sm group-[.toast]:font-medium group-[.toast]:text-primary-foreground',
+          cancelButton:
+            'group-[.toast]:rounded-md group-[.toast]:bg-muted group-[.toast]:px-3 group-[.toast]:py-1.5 group-[.toast]:text-sm group-[.toast]:font-medium group-[.toast]:text-muted-foreground',
+          closeButton:
+            'group-[.toast]:border-border group-[.toast]:bg-card group-[.toast]:text-muted-foreground group-[.toast]:hover:bg-accent group-[.toast]:hover:text-accent-foreground',
+          success: 'group-[.toaster]:border-l-emerald-500',
+          error: 'group-[.toaster]:border-l-destructive',
+          warning: 'group-[.toaster]:border-l-amber-500',
+          info: 'group-[.toaster]:border-l-sky-500',
+          default: 'group-[.toaster]:border-l-primary',
+        },
+      }}
+    />
+  );
+}
diff --git a/client/main.jsx b/client/main.jsx
index 3ceeeee..5b65e64 100644
--- a/client/main.jsx
+++ b/client/main.jsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { Toaster } from 'sonner';
 import App from './App';
+import { Toaster } from './components/ui/sonner';
 import { AuthProvider } from './hooks/useAuth';
 import { ThemeProvider } from './contexts/ThemeContext';
+import 'sonner/dist/styles.css';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
@@ -15,29 +16,8 @@ ReactDOM.createRoot(document.getElementById('root')).render(
           <App />
         </AuthProvider>
 
-        {/* Global Toast System - placed at root level for proper z-index and positioning */}
-        <Toaster
-          position="top-right"
-          richColors
-          closeButton
-          theme="system"
-          toastOptions={{
-            duration: 3500,
-            className: 'bg-card text-card-foreground border border-border shadow-lg',
-            success: {
-              className: 'border-l-emerald-500',
-            },
-            error: {
-              className: 'border-l-red-500',
-            },
-            warning: {
-              className: 'border-l-amber-500',
-            },
-            info: {
-              className: 'border-l-blue-500',
-            },
-          }}
-        />
+        {/* Global shadcn/Sonner toast system */}
+        <Toaster />
       </BrowserRouter>
     </ThemeProvider>
   </React.StrictMode>
diff --git a/docs/Engineering_Reference_Manual.md b/docs/Engineering_Reference_Manual.md
index 529bc09..b3318f8 100644
--- a/docs/Engineering_Reference_Manual.md
+++ b/docs/Engineering_Reference_Manual.md
@@ -3,7 +3,7 @@
 **Status:** Current code reference
 **Last Updated:** 2026-05-10
 **Version:** 0.23.2
-**Primary stack:** Node.js + Express, React + Vite, SQLite via `better-sqlite3`
+**Primary stack:** Node.js + Express, React + Vite, Tailwind CSS + shadcn/ui, Sonner, SQLite via `better-sqlite3`
 
 This manual reflects the current application code in `server.js`, `routes/`, `services/`, `middleware/`, `db/`, `client/`, `package.json`, `Dockerfile`, and `docker-compose.yml`. It is written as a current-state reference, not a changelog.
 
@@ -1037,8 +1037,8 @@ Use this pattern for database-layer audit calls instead of a top-level `require(
 - React Router `^6.26.2`
 - TanStack Query `^5.100.9`
 - Tailwind CSS `^3.4.14`
-- Radix/shadcn-style UI primitives
-- `sonner` for toasts
+- shadcn/ui component primitives, backed by Radix UI where applicable
+- Sonner/shadcn toast notifications via `sonner`
 - `react-markdown`, `remark-gfm`, `rehype-sanitize` for markdown rendering
 
 ### `client/main.jsx`
@@ -1167,7 +1167,7 @@ Key runtime dependencies:
 - nodemailer.
 - node-cron.
 - React, React DOM, React Router, TanStack Query.
-- Radix UI primitives, lucide-react, Tailwind utilities.
+- shadcn/ui component primitives, Radix UI primitives, lucide-react, Tailwind utilities, Sonner toasts.
 - xlsx for spreadsheet import/export.
 
 ### Dockerfile