diff --git a/front/css/app.css b/front/css/app.css
index 306f8dde..abfae4b2 100755
--- a/front/css/app.css
+++ b/front/css/app.css
@@ -1238,6 +1238,13 @@ input[readonly] {
     /* background-color:red; */
 }
 
+.sort-btn {
+    
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+}
 
 
 /* ----------------------------------------------------------------- */
diff --git a/front/js/ui_components.js b/front/js/ui_components.js
index 10292579..20da9d48 100755
--- a/front/js/ui_components.js
+++ b/front/js/ui_components.js
@@ -270,6 +270,43 @@ function copyToClipboard(buttonElement) {
   }
 }
 
+// -----------------------------------------------------------------------------
+// Simple Sortable Table columns 
+// -----------------------------------------------------------------------------
+
+function sortColumn(element) {
+  var th = $(element).closest('th');
+  var table = th.closest('table');
+  var columnIndex = th.index();
+  var ascending = !th.data('asc');
+  sortTable(table, columnIndex, ascending);
+  th.data('asc', ascending);
+}
+
+function sortTable(table, columnIndex, ascending) {
+  var tbody = table.find('tbody');
+  var rows = tbody.find('tr').toArray().sort(comparer(columnIndex));
+  if (!ascending) {
+    rows = rows.reverse();
+  }
+  for (var i = 0; i < rows.length; i++) {
+    tbody.append(rows[i]);
+  }
+}
+
+function comparer(index) {
+  return function(a, b) {
+    var valA = getCellValue(a, index);
+    var valB = getCellValue(b, index);
+    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
+  };
+}
+
+function getCellValue(row, index) {
+  return $(row).children('td').eq(index).text();
+}
+
+
 // -----------------------------------------------------------------------------
 // initialize
 // -----------------------------------------------------------------------------
diff --git a/front/network.php b/front/network.php
index 76804b70..41243882 100755
--- a/front/network.php
+++ b/front/network.php
@@ -7,6 +7,7 @@
   define('badge_offline', '<div class="badge bg-red text-white" style="width: 60px;">Offline</div>');
   define('circle_online', '<div class="badge bg-green text-white" style="width: 10px; height: 10px; padding:2px; margin-top: -25px;">&nbsp;</div>');
   define('circle_offline', '<div class="badge bg-red text-white" style="width: 10px;  height: 10px; padding:2px; margin-top: -25px;">&nbsp;</div>'); 
+  define('sortable_column', ' <span class="sort-btn" onclick="sortColumn(this)"><i class="fa-solid fa-arrow-up-short-wide"></i></span>'); 
   
 ?>
 
@@ -140,13 +141,18 @@
                              ';
 
         $str_table =      '   <table class="table table-striped">
+                                <thead>
+                                  <tr>
+                                    <th  class="col-sm-1" >Port</th>
+                                    <th  class="col-sm-1" >'.lang('Network_Table_State').'</th>
+                                    <th  class="col-sm-2" >'.lang('Network_Table_Hostname').sortable_column.'</th>
+                                    <th  class="col-sm-1" >'.lang('Network_Table_IP').sortable_column.'</th>
+                                    <th  class="col-sm-3" >'.lang('Network_ManageLeaf').'</th>
+                                  </tr>
+                                </thead>
                                 <tbody>
                                 <tr>
-                                  <th class="col-sm-1" >Port</th>
-                                  <th class="col-sm-1" >'.lang('Network_Table_State').'</th>
-                                  <th class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
-                                  <th class="col-sm-1" >'.lang('Network_Table_IP').'</th>
-                                  <th class="col-sm-3" >'.lang('Network_ManageLeaf').'</th>
+
                                 </tr>';
         
         // Prepare Array for Devices with Port value
@@ -383,13 +389,18 @@
                                 <i class="fa fa-laptop"></i> '.lang('Network_UnassignedDevices').'
                               </h3>
                               <table class="table table-striped">
+                                <thead>
+                                  <tr>
+                                    <th  class="col-sm-1" ></th>
+                                    <th  class="col-sm-1" >'.lang('Network_Table_State').'</th>
+                                    <th  class="col-sm-2" >'.lang('Network_Table_Hostname').sortable_column.'</th>
+                                    <th  class="col-sm-1" >'.lang('Network_Table_IP').sortable_column.'</th>
+                                    <th  class="col-sm-3" >'.lang('Network_Assign').'</th>
+                                  </tr>
+                                </thead>
                                 <tbody>
                                 <tr>                              
-                                  <th  class="col-sm-1" ></th>
-                                  <th  class="col-sm-1" >'.lang('Network_Table_State').'</th>
-                                  <th  class="col-sm-2" >'.lang('Network_Table_Hostname').'</th>
-                                  <th  class="col-sm-1" >'.lang('Network_Table_IP').'</th>
-                                  <th  class="col-sm-3" >'.lang('Network_Assign').'</th>
+
                                 </tr>';   
 
       $str_table_rows = "";        
@@ -852,7 +863,6 @@
   // init Assign/Unassign buttons
   initButtons()
 
-
 </script>