diff --git a/views/admin/student-support/index.ejs b/views/admin/student-support/index.ejs
index 3e53fd6..6a87b23 100644
--- a/views/admin/student-support/index.ejs
+++ b/views/admin/student-support/index.ejs
@@ -344,16 +344,28 @@
   //   return html;
   // }
 
+  function iconPickerInputHtml(extraClass, currentValue) {
+    return (
+      '<div class="input-group">' +
+        '<span class="input-group-text icon-preview-cell" style="min-width:38px">' +
+          (currentValue ? '<i class="' + escapeHtml(currentValue) + '"></i>' : '') +
+        '</span>' +
+        '<input type="text" class="form-control ch-icon ' + escapeHtml(extraClass) + '"' +
+          ' value="' + escapeHtml(currentValue || '') + '"' +
+          ' placeholder="Click to pick..." readonly' +
+          ' style="cursor:pointer;background:#fff" onclick="IconPicker.open(this)">' +
+      '</div>'
+    );
+  }
+
   function buildServiceRow(svc) {
     svc = svc || {};
-    var iconSel = '<select class="form-select svc-icon-select">' + iconOptionsHtml(svc.icon) + '</select>';
-    var hoursIconSel = '<select class="form-select svc-hours-icon-select">' + iconOptionsHtml(svc.hoursIcon) + '</select>';
     return (
       '<div class="card service-row border">' +
         '<div class="card-body">' +
           '<div class="row g-2">' +
-            '<div class="col-md-4"><label class="form-label small">Icon</label>' + iconPickerInput('svc-icon-select', svc.icon) + '</div>' +
-            '<div class="col-md-4"><label class="form-label small">Hours icon</label>' + iconPickerInput('svc-hours-icon-select', svc.hoursIcon) + '</div>' +
+            '<div class="col-md-4"><label class="form-label small">Icon</label>' + iconPickerInputHtml('svc-icon-field', svc.icon) + '</div>' +
+            '<div class="col-md-4"><label class="form-label small">Hours icon</label>' + iconPickerInputHtml('svc-hours-icon-field', svc.hoursIcon) + '</div>' +
             '<div class="col-md-4 d-flex align-items-end justify-content-end">' +
               '<button type="button" class="btn btn-outline-danger btn-sm remove-service"><i class="fas fa-trash"></i></button>' +
             '</div>' +
@@ -376,7 +388,7 @@
     return (
       '<div class="card channel-row border"><div class="card-body py-2">' +
         '<div class="row g-2 align-items-end">' +
-          '<div class="col-md-3"><label class="form-label small">Icon</label>' + iconPickerInput('ch-icon-select', ch.icon) + '</div>' +
+          '<div class="col-md-3"><label class="form-label small">Icon</label>' + iconPickerInputHtml('ch-icon-field', ch.icon) + '</div>' +
           '<div class="col-md-3"><label class="form-label small">Title</label>' +
             '<input type="text" class="form-control ch-title" value="' + escapeHtml(ch.title) + '"></div>' +
           '<div class="col-md-5"><label class="form-label small">Detail</label>' +
@@ -427,14 +439,16 @@
 
     var services = [];
     document.querySelectorAll('#servicesContainer .service-row').forEach(function(row) {
+      // Icon inputs: all .ch-icon inside this row — first = service icon, second = hours icon
+      var iconInputs = row.querySelectorAll('.ch-icon');
       services.push({
-        icon: row.querySelector('.svc-icon-select').value,
-        title: row.querySelector('.svc-title').value.trim(),
-        description: row.querySelector('.svc-description').value.trim(),
-        hours: row.querySelector('.svc-hours').value.trim(),
-        hoursIcon: row.querySelector('.svc-hours-icon-select').value,
-        buttonLabel: row.querySelector('.svc-btn-label').value.trim(),
-        buttonHref: row.querySelector('.svc-btn-href').value.trim(),
+        icon: iconInputs[0] ? iconInputs[0].value : '',
+        title: row.querySelector('.svc-title') ? row.querySelector('.svc-title').value.trim() : '',
+        description: row.querySelector('.svc-description') ? row.querySelector('.svc-description').value.trim() : '',
+        hours: row.querySelector('.svc-hours') ? row.querySelector('.svc-hours').value.trim() : '',
+        hoursIcon: iconInputs[1] ? iconInputs[1].value : '',
+        buttonLabel: row.querySelector('.svc-btn-label') ? row.querySelector('.svc-btn-label').value.trim() : '',
+        buttonHref: row.querySelector('.svc-btn-href') ? row.querySelector('.svc-btn-href').value.trim() : '',
       });
     });
     document.getElementById('directoryJson').value = JSON.stringify({
@@ -445,10 +459,11 @@
 
     var channels = [];
     document.querySelectorAll('#channelsContainer .channel-row').forEach(function(row) {
+      var iconInput = row.querySelector('.ch-icon');
       channels.push({
-        icon: row.querySelector('.ch-icon-select').value,
-        title: row.querySelector('.ch-title').value.trim(),
-        detail: row.querySelector('.ch-detail').value.trim(),
+        icon: iconInput ? iconInput.value : '',
+        title: row.querySelector('.ch-title') ? row.querySelector('.ch-title').value.trim() : '',
+        detail: row.querySelector('.ch-detail') ? row.querySelector('.ch-detail').value.trim() : '',
       });
     });
     var departments = [];