diff --git a/docs/DESIGN.md b/docs/DESIGN.md
index 9c4a8ac..5265d63 100644
--- a/docs/DESIGN.md
+++ b/docs/DESIGN.md
@@ -57,7 +57,8 @@ MVP - Minimum Viable Product Task List
 - [ ] Web UI
   - [ ] Progresive Web App
   - [ ] Editable Dashboard
-  
+  - [ ] Panel Icon
+
 
 **Resource Management**
 - [ ] CPU Reserve Capacity Allocation
diff --git a/sdl-mgr/app/package.json b/sdl-mgr/app/package.json
index 55ad9ed..80ce4c7 100644
--- a/sdl-mgr/app/package.json
+++ b/sdl-mgr/app/package.json
@@ -25,6 +25,7 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "aedes": "^0.51.3",
     "bootstrap": "^5.3.7",
+    "bootstrap-icons": "^1.13.1",
     "chart.js": "^4.5.1",
     "csv-parse": "^5.6.0",
     "d3": "^7.9.0",
diff --git a/sdl-mgr/conf/modules/web.json b/sdl-mgr/conf/modules/web.json
index f3710bb..992a2bf 100644
--- a/sdl-mgr/conf/modules/web.json
+++ b/sdl-mgr/conf/modules/web.json
@@ -5,6 +5,7 @@
     "open_browser": false,
     "weblibs": {
         "bootstrap":"bootstrap/dist",
+        "bootstrap-icons":"bootstrap-icons",
         "chartjs":"chart.js/dist",
         "d3":"d3/dist",
         "fontawesome":"@fortawesome/fontawesome-free",
diff --git a/sdl-mgr/html/index.html b/sdl-mgr/html/index.html
index cdb154d..7c66dfe 100644
--- a/sdl-mgr/html/index.html
+++ b/sdl-mgr/html/index.html
@@ -9,6 +9,9 @@
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
 
+  <!-- Bootstrap Icons -->
+  <link rel="stylesheet" href="/bootstrap-icons/font/bootstrap-icons.min.css">
+
   <!-- Font Awesome -->
   <link rel="stylesheet" href="/fontawesome/css/all.min.css">
 
diff --git a/sdl-mgr/html/js/weblib.js b/sdl-mgr/html/js/weblib.js
index dc6b7c4..46125dc 100644
--- a/sdl-mgr/html/js/weblib.js
+++ b/sdl-mgr/html/js/weblib.js
@@ -371,54 +371,99 @@ function loadNavTabs() {
   // ===============================
 // Side Panel (layout-collapsing)
 // ===============================
-async function loadSidePanel() {
-  // console.log('DEBUG: loadSidePanel() called');
+// async function loadSidePanel() {
+//   // console.log('DEBUG: loadSidePanel() called');
 
+//   const panel = document.getElementById('sidepanel');
+//   const inner = document.getElementById('sidepanel-inner');
+//   const toggleBtn = document.getElementById('sidepanel-toggle');
+
+//   if (!panel || !inner || !toggleBtn) return;
+
+//   const currentPage =
+//     new URLSearchParams(window.location.search).get('page') || 'index';
+
+//   const isCollapsed =
+//     localStorage.getItem('sidepanel_collapsed') === 'true';
+
+//   if (isCollapsed) {
+//     panel.classList.add('collapsed');
+//     // toggleBtn.innerHTML = `<i class="fa-solid fa-folder-plus"></i>`;
+//     toggleBtn.innerHTML = '<i class="bi bi-layout-sidebar"></i>';
+//   } else {
+//     // toggleBtn.innerHTML = `<i class="fa-solid fa-folder-minus"></i>`;
+//     toggleBtn.innerHTML = '<i class="bi bi-layout-sidebar-reverse"></i>';
+//   }
+
+//   try {
+//     const res = await fetch('/api/nav/sidepanel');
+//     if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+//     const sideNav = await res.json();
+
+//     renderAllSidePanelSections(inner, sideNav, currentPage);
+//   } catch (err) {
+//     console.error('Failed to load side panel:', err);
+//     inner.innerHTML = '';
+//   }
+
+//   // Collapse / expand behavior
+//   toggleBtn.onclick = () => {
+//     const collapsed = panel.classList.toggle('collapsed');
+//     localStorage.setItem('sidepanel_collapsed', collapsed);
+
+//     // toggleBtn.innerHTML = `
+//     //   <i class="fa-solid ${
+//     //     collapsed ? 'fa-folder-plus' : 'fa-folder-minus'
+//     //   }"></i>
+//     // `;
+
+//     toggleBtn.innerHTML = `
+//       <i class="bi ${
+//         collapsed ? 'bi-layout-sidebar' : 'bi-layout-sidebar-reverse'
+//       }"></i>
+//     `;
+//   };
+// }
+async function loadSidePanel() {
   const panel = document.getElementById('sidepanel');
   const inner = document.getElementById('sidepanel-inner');
   const toggleBtn = document.getElementById('sidepanel-toggle');
-
+  
   if (!panel || !inner || !toggleBtn) return;
-
+  
   const currentPage =
     new URLSearchParams(window.location.search).get('page') || 'index';
-
   const isCollapsed =
     localStorage.getItem('sidepanel_collapsed') === 'true';
-
+  
   if (isCollapsed) {
     panel.classList.add('collapsed');
-    toggleBtn.innerHTML = `<i class="fa-solid fa-folder-plus"></i>`;
+    toggleBtn.innerHTML = '<i class="bi bi-layout-sidebar"></i>';
   } else {
-    toggleBtn.innerHTML = `<i class="fa-solid fa-folder-minus"></i>`;
+    toggleBtn.innerHTML = '<i class="bi bi-layout-sidebar-reverse"></i>';
   }
-
+  
   try {
     const res = await fetch('/api/nav/sidepanel');
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);  // ✅ Fixed template literal
     const sideNav = await res.json();
-
     renderAllSidePanelSections(inner, sideNav, currentPage);
   } catch (err) {
     console.error('Failed to load side panel:', err);
     inner.innerHTML = '';
   }
-
+  
   // Collapse / expand behavior
   toggleBtn.onclick = () => {
     const collapsed = panel.classList.toggle('collapsed');
     localStorage.setItem('sidepanel_collapsed', collapsed);
-
     toggleBtn.innerHTML = `
-      <i class="fa-solid ${
-        collapsed ? 'fa-folder-plus' : 'fa-folder-minus'
-      }"></i>
+      <i class="bi ${collapsed ? 'bi-layout-sidebar' : 'bi-layout-sidebar-reverse'}"></i>
     `;
   };
 }
 
-
 // -------------------------------
 // Find matching section by page
 // -------------------------------