diff --git a/web/src/pages/UsersPage.module.css b/web/src/pages/UsersPage.module.css
index 31817b8..3ce9caf 100644
--- a/web/src/pages/UsersPage.module.css
+++ b/web/src/pages/UsersPage.module.css
@@ -47,6 +47,20 @@
 .enableBtn { background: transparent; border: 1px solid var(--color-success); color: var(--color-success); }
 .enableBtn:hover { background: var(--color-success-bg-hover); }
 
+/* Toggle switch — 用于编辑用户 modal 内的「设为观察者」等 boolean 字段 */
+.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
+.switch input { opacity: 0; width: 0; height: 0; }
+.slider {
+  position: absolute; cursor: pointer; inset: 0;
+  background: var(--color-border-card); border-radius: 24px; transition: 0.3s;
+}
+.slider::before {
+  content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
+  background: var(--color-on-primary); border-radius: 50%; transition: 0.3s;
+}
+.switch input:checked + .slider { background: var(--color-primary); }
+.switch input:checked + .slider::before { transform: translateX(20px); }
+
 .empty { text-align: center; color: var(--color-text-secondary); padding: 40px; }
 .skeletonCell { height: 16px; background: var(--color-border-card); border-radius: 4px; animation: pulse 1.5s ease-in-out infinite; }
 @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
diff --git a/web/src/pages/UsersPage.tsx b/web/src/pages/UsersPage.tsx
index 11b3404..34d5cc7 100644
--- a/web/src/pages/UsersPage.tsx
+++ b/web/src/pages/UsersPage.tsx
@@ -360,15 +360,20 @@ export function UsersPage() {
             </div>
             {editUser.is_team_admin && editUser.team_id && (
               <div className={styles.formGroup}>
-                <label>
-                  <input
-                    type="checkbox"
-                    checked={editIsObserver}
-                    onChange={(e) => setEditIsObserver(e.target.checked)}
-                    style={{ marginRight: 8, verticalAlign: 'middle' }}
-                  />
-                  设为观察者（可查看全部团队的内容资产，不显示费用；需该用户重新登录后生效）
-                </label>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
+                  <span style={{ fontSize: 14, color: 'var(--color-text-primary)' }}>设为观察者</span>
+                  <label className={styles.switch}>
+                    <input
+                      type="checkbox"
+                      checked={editIsObserver}
+                      onChange={(e) => setEditIsObserver(e.target.checked)}
+                    />
+                    <span className={styles.slider}></span>
+                  </label>
+                </div>
+                <div style={{ fontSize: 12, color: 'var(--color-text-secondary)', marginTop: 6, lineHeight: 1.5 }}>
+                  可查看全部团队的内容资产，不显示费用；需该用户重新登录后生效
+                </div>
               </div>
             )}
             <div className={styles.formGroup}>