diff --git a/web/static/css/c2.css b/web/static/css/c2.css
index 236dcaf9..d500fe27 100644
--- a/web/static/css/c2.css
+++ b/web/static/css/c2.css
@@ -120,6 +120,63 @@ html[data-theme="dark"] .c2-session-main-empty__icon {
     border-color: rgba(96, 165, 250, 0.35) !important;
 }
 
+html[data-theme="dark"] .c2-listener-card-actions {
+    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, var(--c2-surface-alt) 100%);
+}
+
+html[data-theme="dark"] .c2-listener-pill--running {
+    color: var(--c2-green);
+}
+
+html[data-theme="dark"] .c2-listener-pill--error {
+    color: var(--c2-amber);
+}
+
+html[data-theme="dark"] .c2-listener-profile-badge {
+    color: #c4b5fd;
+    background: rgba(139, 92, 246, 0.16);
+    border-color: rgba(139, 92, 246, 0.32);
+}
+
+html[data-theme="dark"] .c2-listener-profile-dot {
+    background: #a78bfa;
+}
+
+html[data-theme="dark"] .c2-listener-card-actions .btn-secondary {
+    background: var(--c2-surface-alt);
+    border: 1px solid var(--c2-border);
+    color: var(--c2-text);
+}
+
+html[data-theme="dark"] .c2-listener-card-actions .btn-secondary:hover {
+    background: #1f2937;
+    border-color: var(--c2-border-hover);
+    color: var(--c2-accent);
+}
+
+html[data-theme="dark"] .c2-listener-card-actions .btn-danger {
+    background: var(--c2-red-dim);
+    border: 1px solid rgba(248, 113, 113, 0.35);
+    color: var(--c2-red);
+}
+
+html[data-theme="dark"] .c2-listener-card-actions .btn-danger:hover {
+    background: rgba(248, 113, 113, 0.2);
+    border-color: var(--c2-red);
+}
+
+html[data-theme="dark"] .c2-modal-overlay {
+    background: rgba(2, 6, 23, 0.72);
+}
+
+html[data-theme="dark"] .c2-form-group .form-hint--warning {
+    color: var(--c2-amber);
+}
+
+html[data-theme="dark"] .c2-checkbox-label {
+    color: var(--c2-text);
+}
+
 /* ============================================================================
    Form Controls (scoped to C2 pages)
    ============================================================================ */
@@ -158,9 +215,9 @@ html[data-theme="dark"] .c2-session-main-empty__icon {
     box-shadow: 0 0 0 3px var(--c2-accent-dim);
 }
 
-#page-c2-payloads select.form-control,
-#page-c2-sessions select.form-control,
-.c2-modal select.form-control {
+#page-c2-payloads select.form-control:not(.c2-form-select-native),
+#page-c2-sessions select.form-control:not(.c2-form-select-native),
+.c2-modal select.form-control:not(.c2-form-select-native) {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: right 12px center;
@@ -233,15 +290,36 @@ html[data-theme="dark"] .c2-session-main-empty__icon {
     box-shadow: 0 0 0 3px var(--c2-accent-dim);
 }
 
-html[data-theme="dark"] .c2-modal .c2-form-select-trigger {
+html[data-theme="dark"] .c2-modal .c2-form-select-trigger,
+html[data-theme="dark"] #page-c2-payloads .c2-form-select-trigger {
     background: var(--c2-surface);
     border-color: var(--c2-border);
 }
 
-html[data-theme="dark"] .c2-modal .c2-form-select-ui.open .c2-form-select-trigger {
+html[data-theme="dark"] .c2-modal .c2-form-select-ui.open .c2-form-select-trigger,
+html[data-theme="dark"] #page-c2-payloads .c2-form-select-ui.open .c2-form-select-trigger {
     border-color: var(--c2-accent);
 }
 
+html[data-theme="dark"] #page-c2-payloads .c2-form-select-dropdown {
+    background: var(--c2-surface);
+    border-color: var(--c2-border);
+    box-shadow: var(--c2-shadow-lg);
+}
+
+html[data-theme="dark"] #page-c2-payloads .c2-form-select-option:hover {
+    background: var(--c2-surface-alt);
+}
+
+html[data-theme="dark"] #page-c2-payloads .c2-form-select-option.is-selected {
+    background: var(--c2-accent-dim);
+    color: var(--c2-accent);
+}
+
+#page-c2-payloads .c2-form-group {
+    position: relative;
+}
+
 .c2-form-select-ui.open {
     z-index: 120;
 }
@@ -2539,6 +2617,10 @@ html[data-theme="dark"] .c2-modal .c2-form-select-ui.open .c2-form-select-trigge
     margin-top: 6px;
 }
 
+.c2-form-group .form-hint--warning {
+    color: #b45309;
+}
+
 /* ============================================================================
    Modal
    ============================================================================ */
diff --git a/web/static/js/c2.js b/web/static/js/c2.js
index 303b18d9..546aa6bc 100644
--- a/web/static/js/c2.js
+++ b/web/static/js/c2.js
@@ -580,6 +580,7 @@
                 C2.loadTasks();
                 break;
             case 'c2-payloads':
+                C2.refreshFormSelects(document.getElementById('page-c2-payloads'));
                 C2.loadListenersForPayload();
                 break;
             case 'c2-events':
@@ -752,7 +753,7 @@
             const profileOpts = listenerProfileSelectHtml('');
             const emptyProfHintCreate = (C2.profiles && C2.profiles.length > 0)
                 ? ''
-                : `<div class="form-hint" style="margin-bottom:6px;color:#b45309;">${escapeHtml(c2t('c2.listeners.malleableProfileEmptyListHint'))}</div>`;
+                : `<div class="form-hint form-hint--warning" style="margin-bottom:6px;">${escapeHtml(c2t('c2.listeners.malleableProfileEmptyListHint'))}</div>`;
             content.innerHTML = `
             <div class="c2-modal-header">
                 <h3>${escapeHtml(c2t('c2.listeners.modalCreateTitle'))}</h3>
@@ -805,7 +806,7 @@
                         <input type="checkbox" id="c2-listener-legacy-shell">
                         ${escapeHtml(c2t('c2.listeners.allowLegacyShell'))}
                     </label>
-                    <div class="form-hint" style="color:#b45309;">${escapeHtml(c2t('c2.listeners.allowLegacyShellHint'))}</div>
+                    <div class="form-hint form-hint--warning">${escapeHtml(c2t('c2.listeners.allowLegacyShellHint'))}</div>
                 </div>
             </div>
             <div class="c2-modal-footer">
@@ -937,7 +938,7 @@
                 : `<div class="form-hint" style="margin-bottom:6px;">${escapeHtml(c2t('c2.listeners.malleableProfileNonHttpHint'))}</div>`;
             const emptyProfHint = (C2.profiles && C2.profiles.length > 0)
                 ? ''
-                : `<div class="form-hint" style="margin-bottom:6px;color:#b45309;">${escapeHtml(c2t('c2.listeners.malleableProfileEmptyListHint'))}</div>`;
+                : `<div class="form-hint form-hint--warning" style="margin-bottom:6px;">${escapeHtml(c2t('c2.listeners.malleableProfileEmptyListHint'))}</div>`;
             content.innerHTML = `
             <div class="c2-modal-header">
                 <h3>${escapeHtml(c2t('c2.listeners.editTitle'))}</h3>
@@ -979,7 +980,7 @@
                         <input type="checkbox" id="c2-listener-legacy-shell"${legacyShell ? ' checked' : ''}>
                         ${escapeHtml(c2t('c2.listeners.allowLegacyShell'))}
                     </label>
-                    <div class="form-hint" style="color:#b45309;">${escapeHtml(c2t('c2.listeners.allowLegacyShellHint'))}</div>
+                    <div class="form-hint form-hint--warning">${escapeHtml(c2t('c2.listeners.allowLegacyShellHint'))}</div>
                 </div>` : ''}
             </div>
             <div class="c2-modal-footer">
@@ -3179,6 +3180,7 @@
                 return '<option value="' + k.value + '">' + k.label + '</option>';
             }).join('');
         }
+        C2.refreshFormSelects(document.getElementById('page-c2-payloads'));
     };
 
     C2.updateLoopbackBuildHint = function() {
@@ -3247,6 +3249,7 @@
         if (buildBtn && !buildBtn.disabled) buildBtn.textContent = c2t('c2.payloads.buildBeaconBtn');
         const genBtn = document.getElementById('c2-generate-oneliner-btn');
         if (genBtn) genBtn.textContent = c2t('c2.payloads.generateOnelinerBtn');
+        C2.refreshFormSelects(document.getElementById('page-c2-payloads'));
     };
 
     C2.generateOneliner = function() {
diff --git a/web/templates/index.html b/web/templates/index.html
index 6144561a..10b83a31 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -2863,11 +2863,11 @@
                                 <p class="c2-payload-desc" data-i18n="c2.payloads.onelinerDesc">快速生成可在目标机直接执行的反弹命令，支持 Bash / Python / PowerShell / Curl</p>
                                 <div class="c2-form-group">
                                     <label data-i18n="c2.payloads.listener">监听器</label>
-                                    <select id="c2-payload-listener" class="form-control"></select>
+                                    <select id="c2-payload-listener" class="form-control c2-form-select-native"></select>
                                 </div>
                                 <div class="c2-form-group">
                                     <label data-i18n="c2.payloads.kind">类型</label>
-                                    <select id="c2-payload-kind" class="form-control"></select>
+                                    <select id="c2-payload-kind" class="form-control c2-form-select-native"></select>
                                 </div>
                                 <div class="c2-form-group">
                                     <label data-i18n="c2.payloads.hostOptional">回连地址 (可选)</label>
@@ -2886,7 +2886,7 @@
                                 <p class="c2-payload-desc" data-i18n="c2.payloads.buildDesc">交叉编译支持多平台的完整 Beacon 可执行文件，支持 Linux / Windows / macOS</p>
                                 <div class="c2-form-group">
                                     <label data-i18n="c2.payloads.listener">监听器</label>
-                                    <select id="c2-build-listener" class="form-control"></select>
+                                    <select id="c2-build-listener" class="form-control c2-form-select-native"></select>
                                     <p id="c2-build-loopback-hint" class="form-hint" style="display:none;margin-top:8px;color:#b45309;"></p>
                                 </div>
                                 <div class="c2-form-group">
@@ -2896,7 +2896,7 @@
                                 <div class="c2-form-row">
                                     <div class="c2-form-group">
                                         <label data-i18n="c2.payloads.os">目标系统</label>
-                                        <select id="c2-build-os" class="form-control">
+                                        <select id="c2-build-os" class="form-control c2-form-select-native">
                                             <option value="linux" data-i18n="c2.payloads.linux">Linux</option>
                                             <option value="windows" data-i18n="c2.payloads.windows">Windows</option>
                                             <option value="darwin" data-i18n="c2.payloads.darwin">macOS</option>
@@ -2904,7 +2904,7 @@
                                     </div>
                                     <div class="c2-form-group">
                                         <label data-i18n="c2.payloads.arch">目标架构</label>
-                                        <select id="c2-build-arch" class="form-control">
+                                        <select id="c2-build-arch" class="form-control c2-form-select-native">
                                             <option value="amd64" data-i18n="c2.payloads.amd64">AMD64</option>
                                             <option value="arm64" data-i18n="c2.payloads.arm64">ARM64</option>
                                             <option value="386" data-i18n="c2.payloads.386">386</option>