diff --git a/web/bun.lock b/web/bun.lock
index 543652b..2859893 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -19,6 +19,7 @@
         "react-dom": "^19",
         "react-router-dom": "^7.12.0",
         "recharts": "^3.6.0",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
       },
       "devDependencies": {
@@ -241,6 +242,8 @@
 
     "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="],
 
+    "sonner": ["sonner@2.0.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w=="],
+
     "tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
 
     "tailwindcss": ["tailwindcss@4.1.18", "", {}, "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw=="],
diff --git a/web/package.json b/web/package.json
index 9222ca4..2dbb1e5 100644
--- a/web/package.json
+++ b/web/package.json
@@ -23,6 +23,7 @@
     "react-dom": "^19",
     "react-router-dom": "^7.12.0",
     "recharts": "^3.6.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
diff --git a/web/src/App.tsx b/web/src/App.tsx
index d9528e9..bbcab54 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -5,9 +5,12 @@ import { Activity } from "./pages/Activity";
 import { Settings } from "./pages/Settings";
 import "./index.css";
 
+import { Toaster } from "sonner";
+
 export function App() {
   return (
     <BrowserRouter>
+      <Toaster richColors position="top-right" theme="dark" />
       <Routes>
         <Route path="/" element={<DashboardLayout />}>
           <Route index element={<Dashboard />} />
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index be1ae01..fb5bb3e 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { toast } from "sonner";
 import { Loader2, Save, RefreshCw, Smartphone, Coins, Trophy, Shield, Users, Terminal, MessageSquare } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -56,6 +57,7 @@ export function Settings() {
 
     const handleSave = async () => {
         setSaving(true);
+        const toastId = toast.loading("Saving configuration...");
         try {
             const response = await fetch("/api/settings", {
                 method: "POST",
@@ -66,8 +68,13 @@ export function Settings() {
             if (!response.ok) throw new Error("Failed to save");
             // Reload to satisfy any server-side transformations
             await fetchData();
+            toast.success("Settings saved successfully", { id: toastId });
         } catch (error) {
             console.error("Failed to save settings:", error);
+            toast.error("Failed to save settings", {
+                id: toastId,
+                description: "Please check your input and try again."
+            });
         } finally {
             setSaving(false);
         }