diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index b52086356..383c5c4bb 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -2031,7 +2031,7 @@ select.input {
 .stat-card:hover {
   transform: translateY(-1px);
   box-shadow: var(--shadow-sm);
-  border-color: var(--color-border);
+  border-color: var(--color-border-strong);
 }
 
 .stat-card__body {
@@ -2401,52 +2401,6 @@ select.input {
   background: var(--color-surface-hover);
 }
 
-/* Toggle switch */
-.toggle {
-  position: relative;
-  display: inline-block;
-  width: 36px;
-  height: 20px;
-}
-
-.toggle input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  inset: 0;
-  background: var(--color-toggle-off, #CBD5E1);
-  border-radius: var(--radius-full);
-  transition: background var(--duration-fast);
-}
-
-.toggle-slider::before {
-  content: '';
-  position: absolute;
-  height: 14px;
-  width: 14px;
-  left: 2px;
-  bottom: 2px;
-  background: white;
-  border-radius: 50%;
-  transition: transform var(--duration-fast);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.toggle input:checked + .toggle-slider {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-}
-
-.toggle input:checked + .toggle-slider::before {
-  transform: translateX(16px);
-  background: white;
-}
-
 /* Model checkbox list */
 .model-list {
   display: flex;
diff --git a/core/http/react-ui/src/pages/AgentChat.jsx b/core/http/react-ui/src/pages/AgentChat.jsx
index 13b83f2b0..83bd56415 100644
--- a/core/http/react-ui/src/pages/AgentChat.jsx
+++ b/core/http/react-ui/src/pages/AgentChat.jsx
@@ -556,7 +556,7 @@ export default function AgentChat() {
           <label className="canvas-mode-toggle" title="Extract code blocks and media into a side panel for preview, copy, and download">
             <i className="fas fa-columns" />
             <span className="canvas-mode-label">Canvas</span>
-            <span className="toggle">
+            <span className={`toggle${canvasMode ? ' toggle--on' : ''}`}>
               <input
                 type="checkbox"
                 checked={canvasMode}
@@ -565,7 +565,9 @@ export default function AgentChat() {
                   if (!e.target.checked) setCanvasOpen(false)
                 }}
               />
-              <span className="toggle-slider" />
+              <span className="toggle__track">
+                <span className="toggle__thumb" />
+              </span>
             </span>
           </label>
           {canvasMode && artifacts.length > 0 && !canvasOpen && (
diff --git a/core/http/react-ui/src/pages/Chat.jsx b/core/http/react-ui/src/pages/Chat.jsx
index c00625447..0cfed4d47 100644
--- a/core/http/react-ui/src/pages/Chat.jsx
+++ b/core/http/react-ui/src/pages/Chat.jsx
@@ -7,6 +7,7 @@ import ModelSelector from '../components/ModelSelector'
 import { renderMarkdown, highlightAll } from '../utils/markdown'
 import { extractCodeArtifacts, renderMarkdownWithArtifacts } from '../utils/artifacts'
 import CanvasPanel from '../components/CanvasPanel'
+import Toggle from '../components/Toggle'
 import { fileToBase64, modelsApi, mcpApi } from '../utils/api'
 import { CAP_CHAT } from '../utils/capabilities'
 import { useMCPClient } from '../hooks/useMCPClient'
@@ -966,14 +967,10 @@ export default function Chat() {
                     {t('settings.manageModeDesc')}
                   </span>
                 </div>
-                <label className="toggle">
-                  <input
-                    type="checkbox"
-                    checked={!!activeChat.localaiAssistant}
-                    onChange={(e) => updateChatSettings(activeChat.id, { localaiAssistant: e.target.checked })}
-                  />
-                  <span className="toggle-slider" />
-                </label>
+                <Toggle
+                  checked={!!activeChat.localaiAssistant}
+                  onChange={(next) => updateChatSettings(activeChat.id, { localaiAssistant: next })}
+                />
               </div>
             )}
             <div className="form-group">
diff --git a/core/http/react-ui/src/pages/Users.jsx b/core/http/react-ui/src/pages/Users.jsx
index f43664f7a..4d4964492 100644
--- a/core/http/react-ui/src/pages/Users.jsx
+++ b/core/http/react-ui/src/pages/Users.jsx
@@ -6,6 +6,7 @@ import { adminUsersApi, adminInvitesApi } from '../utils/api'
 import LoadingSpinner from '../components/LoadingSpinner'
 import Modal from '../components/Modal'
 import ConfirmDialog from '../components/ConfirmDialog'
+import Toggle from '../components/Toggle'
 import './auth.css'
 
 function RoleBadge({ role }) {
@@ -289,14 +290,10 @@ function PermissionsModal({ user, featureMeta, availableModels, onClose, onSave,
           </div>
           <div style={{ marginBottom: 'var(--spacing-sm)' }}>
             <label className="perm-toggle-label">
-              <label className="toggle" style={{ flexShrink: 0 }}>
-                <input
-                  type="checkbox"
-                  checked={allowedModels.enabled}
-                  onChange={() => setAllowedModels(prev => ({ ...prev, enabled: !prev.enabled }))}
-                />
-                <span className="toggle-slider" />
-              </label>
+              <Toggle
+                checked={allowedModels.enabled}
+                onChange={next => setAllowedModels(prev => ({ ...prev, enabled: next }))}
+              />
               Restrict to specific models
             </label>
           </div>