diff --git a/src/PowderCoating.Web/wwwroot/js/item-wizard.js b/src/PowderCoating.Web/wwwroot/js/item-wizard.js
index 127a2cc..bb7d3f5 100644
--- a/src/PowderCoating.Web/wwwroot/js/item-wizard.js
+++ b/src/PowderCoating.Web/wwwroot/js/item-wizard.js
@@ -691,7 +691,7 @@ function renderSalesFields() {
                     </button>
                 </div>
                 <div id="wzMerchDropdown"
-                     style="display:none;max-height:220px;overflow-y:auto;z-index:1060;background:#fff;border:1px solid #dee2e6;border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);position:fixed;">
+                     style="display:none;max-height:220px;overflow-y:auto;z-index:1060;background:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);position:fixed;">
                 </div>
             </div>
             <div class="text-danger d-none mt-1" id="err_salesCatalogItemId">Please select an item.</div>
@@ -773,7 +773,7 @@ function wzMerchComboRender(query) {
             `<div class="wz-merch-opt" style="padding:.35rem .75rem .35rem 1.25rem;font-size:.875rem;cursor:pointer;"
                   data-id="${m.id}" data-name="${escHtml(m.name)}" data-price="${m.price}" data-sku="${escHtml(m.sku || '')}"
                   onmousedown="event.preventDefault();wzMerchComboSelect(this)"
-                  onmouseenter="this.style.background='#f0f4ff'"
+                  onmouseenter="this.style.background='var(--bs-secondary-bg)'"
                   onmouseleave="this.style.background=''">
                 ${escHtml(m.name)}${m.sku ? ` <span class="text-muted">[${escHtml(m.sku)}]</span>` : ''} <span class="text-muted">— $${parseFloat(m.price).toFixed(2)}</span>
              </div>`
@@ -1909,7 +1909,7 @@ function buildCoatRowHtml(i, coat) {
                         <input type="hidden" id="coat_inventoryItemId_${i}">
                         <div id="coat_powder_dropdown_${i}"
                              class="powder-combo-dropdown"
-                             style="display:none;max-height:220px;overflow-y:auto;z-index:1060;border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);">
+                             style="display:none;max-height:220px;overflow-y:auto;z-index:1060;background:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);">
                         </div>
                     </div>
                 </div>
@@ -1968,7 +1968,7 @@ function buildCoatRowHtml(i, coat) {
                     </div>
                     <div id="coat_catalog_results_${i}"
                          class="powder-combo-dropdown"
-                         style="display:none;max-height:220px;overflow-y:auto;z-index:1060;border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);">
+                         style="display:none;max-height:220px;overflow-y:auto;z-index:1060;background:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);border-radius:0.375rem;box-shadow:0 4px 12px rgba(0,0,0,.12);">
                     </div>
                 </div>
                 <div class="col-sm-6">
@@ -2166,7 +2166,7 @@ function powderComboRender(i, query) {
               data-val="${escHtml(String(p.value))}"
               data-txt="${escHtml(p.text)}"
               onmousedown="event.preventDefault(); powderComboSelect(${i}, this.dataset.val, this.dataset.txt)"
-              onmouseenter="this.style.background=document.documentElement.getAttribute('data-bs-theme')==='dark'?'#2c3a5a':'#f0f4ff'"
+              onmouseenter="this.style.background='var(--bs-secondary-bg)'"
               onmouseleave="this.classList.contains('pw-active')?null:this.style.background=''">
             ${escHtml(displayText)}${badge}
          </div>`;
@@ -2214,12 +2214,12 @@ function powderComboKey(event, i) {
         event.preventDefault();
         idx = Math.min(idx + 1, items.length - 1);
         items.forEach(it => { it.classList.remove('pw-active'); it.style.background = ''; });
-        if (items[idx]) { items[idx].classList.add('pw-active'); items[idx].style.background = '#e8eeff'; items[idx].scrollIntoView({ block: 'nearest' }); }
+        if (items[idx]) { items[idx].classList.add('pw-active'); items[idx].style.background = 'var(--bs-primary-bg-subtle)'; items[idx].scrollIntoView({ block: 'nearest' }); }
     } else if (event.key === 'ArrowUp') {
         event.preventDefault();
         idx = Math.max(idx - 1, 0);
         items.forEach(it => { it.classList.remove('pw-active'); it.style.background = ''; });
-        if (items[idx]) { items[idx].classList.add('pw-active'); items[idx].style.background = '#e8eeff'; items[idx].scrollIntoView({ block: 'nearest' }); }
+        if (items[idx]) { items[idx].classList.add('pw-active'); items[idx].style.background = 'var(--bs-primary-bg-subtle)'; items[idx].scrollIntoView({ block: 'nearest' }); }
     } else if (event.key === 'Enter') {
         event.preventDefault();
         const active = dd.querySelector('.pw-active') || items[0];
@@ -2272,7 +2272,7 @@ function customPowderCatalogSearch(i, query) {
                 const price = r.unitPrice ? `<span class="text-muted small ms-1">$${parseFloat(r.unitPrice).toFixed(2)}/lb</span>` : '';
                 return `<div class="powder-opt" style="padding:.4rem .75rem;font-size:.83rem;white-space:normal;line-height:1.3;cursor:pointer;"
                         onmousedown="event.preventDefault(); applyCustomCatalogResult(${i}, ${JSON.stringify(r).replace(/"/g, '&quot;')})"
-                        onmouseenter="this.style.background='#f0f4ff'"
+                        onmouseenter="this.style.background='var(--bs-secondary-bg)'"
                         onmouseleave="this.style.background=''">
                     <strong>${escHtml(r.colorName)}</strong> — ${escHtml(r.vendorName)}
                     <span class="text-muted small ms-1">${escHtml(r.sku || '')}</span>
@@ -2363,7 +2363,7 @@ function powderCatalogSearch(i, query) {
                         : '';
                     return `<div class="powder-opt" style="padding:.35rem .75rem;font-size:.83rem;white-space:normal;line-height:1.3;cursor:pointer;"
                             onmousedown="event.preventDefault(); createIncomingFromCatalog(${i}, ${r.id})"
-                            onmouseenter="this.style.background='#fff8e1'"
+                            onmouseenter="this.style.background='var(--bs-warning-bg-subtle)'"
                             onmouseleave="this.style.background=''">
                         <i class="bi bi-truck text-warning me-1"></i>
                         <strong>${escHtml(r.colorName)}</strong> — ${escHtml(r.vendorName)} ${escHtml(r.sku || '')}