diff --git a/webui/components/plugins/list/plugin-list.html b/webui/components/plugins/list/plugin-list.html
index b468fda5a..d57d11aa4 100644
--- a/webui/components/plugins/list/plugin-list.html
+++ b/webui/components/plugins/list/plugin-list.html
@@ -116,16 +116,26 @@
                             
                             <div class="plugin-footer-row">
                                 <div class="plugin-description" x-text="plugin.description || 'No description provided.'"></div>
-                                <select class="plugin-status-select"
-                                    @change="$store.pluginListStore.updateToggle(plugin, $event.target.value)"
-                                    @click.stop
-                                    :disabled="plugin.always_enabled">
-                                    <option value="enabled" :selected="plugin.toggle_state === 'enabled'">ON</option>
-                                    <option value="disabled" :selected="plugin.toggle_state === 'disabled'">OFF</option>
-                                    <template x-if="plugin.per_project_config || plugin.per_agent_config">
-                                        <option value="advanced" :selected="plugin.toggle_state === 'advanced'">Advanced</option>
+                                <div class="plugin-status-group">
+                                    <template x-if="plugin.toggle_state === 'advanced'">
+                                        <button type="button" 
+                                                class="button icon-button" 
+                                                title="Open Advanced"
+                                                @click="$store.pluginListStore.openPluginAdvancedToggle(plugin)">
+                                            <span class="icon material-symbols-outlined">rule_settings</span>
+                                        </button>
                                     </template>
-                                </select>
+                                    <select class="plugin-status-select"
+                                        @change="$store.pluginListStore.updateToggle(plugin, $event.target.value)"
+                                        @click.stop
+                                        :disabled="plugin.always_enabled">
+                                        <option value="enabled" :selected="plugin.toggle_state === 'enabled'">ON</option>
+                                        <option value="disabled" :selected="plugin.toggle_state === 'disabled'">OFF</option>
+                                        <template x-if="plugin.per_project_config || plugin.per_agent_config">
+                                            <option value="advanced" :selected="plugin.toggle_state === 'advanced'">Advanced</option>
+                                        </template>
+                                    </select>
+                                </div>
                             </div>
                         </div>
                     </template>
@@ -159,7 +169,7 @@
             color: var(--color-text-primary);
             border-color: var(--color-border);
             border-bottom-color: transparent;
-            background: var(--color-bg-primary);
+            background: var(--color-background);
         }
 
         .plugins-toolbar {
@@ -185,7 +195,7 @@
             border-radius: 4px;
             padding: 0.75rem;
             margin-top: 0.75rem;
-            background: var(--color-bg-primary);
+            background: var(--color-background);
         }
 
         .plugin-header {
@@ -240,12 +250,31 @@
             margin-top: 0.5rem;
         }
 
+        .plugin-status-group {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            flex: 0 0 auto;
+        }
+
+        .plugin-status-group .button {
+            padding: 0.3rem 0.5rem;
+            height: 2.2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .plugin-status-group .button .icon {
+            font-size: 1.1rem;
+        }
+
         .plugin-status-select {
             padding: 0.3rem 2rem 0.3rem 0.6rem;
             font-size: 0.9rem;
             border: 1px solid var(--color-border);
             border-radius: 4px;
-            background: var(--color-bg-primary);
+            background: var(--color-background);
             color: var(--color-text-primary);
             cursor: pointer;
             height: 2.2rem;
diff --git a/webui/components/plugins/plugin-settings.html b/webui/components/plugins/plugin-settings.html
index 3ba231526..8ac718360 100644
--- a/webui/components/plugins/plugin-settings.html
+++ b/webui/components/plugins/plugin-settings.html
@@ -9,7 +9,7 @@
     <div x-data>
         <template x-if="$store.pluginSettings">
             <div x-create="$store.pluginSettings.onModalOpen()"
-                 x-destroy="$store.pluginSettings.cleanup(); $dispatch('plugin-modal-closed')">
+                 x-destroy="$store.pluginSettings.cleanup(); window.dispatchEvent(new Event('plugin-modal-closed'))">
 
                 <!-- Context toolbar: Project + Agent profile (only when at least one scope is configurable) -->
                 <div class="plugin-settings-scope-section"
diff --git a/webui/components/plugins/toggle/plugin-toggle-advanced.html b/webui/components/plugins/toggle/plugin-toggle-advanced.html
index 4cc8c7932..7d744cffc 100644
--- a/webui/components/plugins/toggle/plugin-toggle-advanced.html
+++ b/webui/components/plugins/toggle/plugin-toggle-advanced.html
@@ -9,7 +9,7 @@
     <div x-data>
         <template x-if="$store.pluginToggle">
             <div x-create="$store.pluginToggle.open($store.pluginListStore?.selectedPlugin || '')"
-                 x-destroy="$store.pluginToggle.cleanup(); $dispatch('plugin-modal-closed')">
+                 x-destroy="$store.pluginToggle.cleanup(); window.dispatchEvent(new Event('plugin-modal-closed'))">
 
                 <!-- Error -->
                 <div x-show="$store.pluginToggle.error" class="plugin-settings-error">
@@ -60,10 +60,18 @@
                                 </label>
 
                                 <div class="plugin-settings-toolbar-item plugin-status-toggle-item">
-                                    <label class="toggle">
+                                    <template x-if="!$store.pluginToggle.hasExplicitRuleForScope && !$store.pluginToggle.alwaysEnabled">
+                                        <button type="button" 
+                                                class="button icon-button" 
+                                                title="Add explicit rule for this scope"
+                                                @click="$store.pluginToggle.addRule()">
+                                            <span class="icon material-symbols-outlined">add</span>
+                                        </button>
+                                    </template>
+                                    <label class="toggle" :class="{ 'disabled-appearance': !$store.pluginToggle.hasExplicitRuleForScope && !$store.pluginToggle.alwaysEnabled }">
                                         <input type="checkbox"
                                                :checked="$store.pluginToggle.status === 'enabled'"
-                                               :disabled="$store.pluginToggle.alwaysEnabled || $store.pluginToggle.isSaving"
+                                               :disabled="$store.pluginToggle.alwaysEnabled || $store.pluginToggle.isSaving || !$store.pluginToggle.hasExplicitRuleForScope"
                                                @change="$store.pluginToggle.setEnabled($event.target.checked)">
                                         <span class="toggler"></span>
                                     </label>
@@ -91,10 +99,12 @@
 
     <!-- Footer -->
     <div class="modal-footer" data-modal-footer>
-        <button type="button" class="btn btn-ok footer-btn-left" @click="$store.pluginToggle.openConfigWithScope()">
-            <span class="icon material-symbols-outlined">settings</span>
-            Configure Plugin
-        </button>
+        <template x-if="$store.pluginToggle.hasConfigScreen">
+            <button type="button" class="btn btn-ok footer-btn-left" @click="$store.pluginToggle.openConfigWithScope()">
+                <span class="icon material-symbols-outlined">settings</span>
+                Configure Plugin
+            </button>
+        </template>
         <button class="btn btn-cancel" @click="window.closeModal?.()">
             Close
         </button>
@@ -228,6 +238,22 @@
             flex: 0 0 auto;
         }
 
+        .plugin-status-toggle-item .button {
+            padding: 0.3rem 0.5rem;
+            height: 2.2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .plugin-status-toggle-item .button .icon {
+            font-size: 1.1rem;
+        }
+
+        .disabled-appearance {
+            opacity: 0.6;
+        }
+
         .plugin-toggle-status-text {
             font-weight: 600;
             color: var(--color-text-primary);
diff --git a/webui/components/plugins/toggle/plugin-toggle-store.js b/webui/components/plugins/toggle/plugin-toggle-store.js
index 9f797e9d1..648469992 100644
--- a/webui/components/plugins/toggle/plugin-toggle-store.js
+++ b/webui/components/plugins/toggle/plugin-toggle-store.js
@@ -23,6 +23,7 @@ const model = {
     perProjectConfig: true,
     perAgentConfig: true,
     explicitPath: null,
+    hasExplicitRuleForScope: false,
     configs: [],
 
     async open(plugin) {
@@ -39,14 +40,11 @@ const model = {
         this.alwaysEnabled = typeof plugin === 'object' ? !!plugin.always_enabled : false;
         this.perProjectConfig = typeof plugin === 'object' ? !!plugin.per_project_config : true;
         this.perAgentConfig = typeof plugin === 'object' ? !!plugin.per_agent_config : true;
+        this.hasConfigScreen = typeof plugin === 'object' ? !!plugin.has_config_screen : false;
 
         try {
             await Promise.all([this.loadProjects(), this.loadAgentProfiles()]);
             await this.loadConfigs();
-            // Auto-save ON for the default scope (Global + All profiles)
-            if (!this.explicitPath && !this.alwaysEnabled && this.pluginName) {
-                await this.setEnabled(true);
-            }
         } finally {
             this.isLoading = false;
         }
@@ -61,6 +59,8 @@ const model = {
         this.perProjectConfig = true;
         this.perAgentConfig = true;
         this.alwaysEnabled = false;
+        this.hasConfigScreen = false;
+        this.hasExplicitRuleForScope = false;
     },
 
     async loadProjects() {
@@ -175,6 +175,7 @@ const model = {
     calculateStatus() {
         if (this.alwaysEnabled) {
             this.explicitPath = null;
+            this.hasExplicitRuleForScope = true;
             this.status = 'enabled';
             return;
         }
@@ -187,9 +188,11 @@ const model = {
 
         if (explicit) {
             this.explicitPath = explicit.path;
+            this.hasExplicitRuleForScope = true;
             this.status = explicit.path.endsWith(".toggle-1") ? 'enabled' : 'disabled';
         } else {
             this.explicitPath = null;
+            this.hasExplicitRuleForScope = false;
             this.status = 'enabled'; // default when no explicit config
         }
     },
@@ -223,17 +226,16 @@ const model = {
     async onScopeChanged() {
         this.calculateStatus();
 
-        // Auto-save immediately so the displayed default state is persisted
-        if (!this.explicitPath && !this.alwaysEnabled && this.pluginName) {
-            await this.setEnabled(true);
-        }
-
         // Sync scope with settings store so its loadSettings picks up the right context
         settingsStore.projectName = this.projectName || "";
         settingsStore.agentProfileKey = this.agentProfileKey || "";
         await settingsStore.loadSettings();
     },
 
+    async addRule() {
+        await this.setEnabled(this.status === 'enabled');
+    },
+
     projectLabel(key) {
         if (!key) return "Global";
         const found = (this.projects || []).find(p => p.key === key);
diff --git a/webui/components/settings/plugins/plugins-subsection.html b/webui/components/settings/plugins/plugins-subsection.html
index 1dd62ab0b..e9c334737 100644
--- a/webui/components/settings/plugins/plugins-subsection.html
+++ b/webui/components/settings/plugins/plugins-subsection.html
@@ -100,7 +100,7 @@
             border-radius: 4px;
             padding: 0.75rem;
             margin-top: 0.75rem;
-            background: var(--color-bg-primary);
+            background: var(--color-background);
         }
 
         .plugin-header {
diff --git a/webui/css/settings.css b/webui/css/settings.css
index 677778ad3..7087df813 100644
--- a/webui/css/settings.css
+++ b/webui/css/settings.css
@@ -136,6 +136,11 @@ input:checked + .toggler:before {
 /* Select Styles */
 select {
   cursor: pointer;
+  color-scheme: dark;
+}
+
+.light-mode select {
+  color-scheme: light;
 }
 
 select:disabled {