diff --git a/static/js/diag.js b/static/js/diag.js
index 9d13eb9..1422546 100644
--- a/static/js/diag.js
+++ b/static/js/diag.js
@@ -529,30 +529,75 @@ const cleanAll = () => {
 }
 
 $('#showStorage').on('click', () => {
-
     var textarea = $('<textarea>'); // Create a new textarea element
     $('#history').html(textarea); // Append the textarea to the div
 
+    // Extract the data from localStorage
     const dataEntries = Object.entries(localStorage).map(([key, value]) => ({ key, value: JSON.parse(value) }));
 
-    // Sort the data entries by date in descending order
-    dataEntries.sort((a, b) => new Date(b.value.date) - new Date(a.value.date));
-
-    // Populate the table with the sorted data
-    dataEntries.forEach(entry => {
-
-        if (entry.value.date) {
-            const xlsxFormat = entry.value.model + '	' + entry.value.serialNumber + '	' + entry.value.problemList + '	' + entry.value.fixList + '\n'
-            textarea.append(xlsxFormat).attr('rows', '5')   // Set the number of rows to 5
-                .attr('cols', '100');  // Set the number of columns to 50
-        }
-
-        console.log('sorted', entry.value);
-    });
-
+   // Assuming you want to use the parsed 'value' part for table data
+   const tableData = dataEntries.map(entry => entry.value); // Extract values from the entries
+  
+   const table = createHistoryTable(tableData); // Create the table with data from localStorage
+   $('#history').append(table); // Append the table to the div
 
 });
 
+// Function to create the table with records
+function createHistoryTable(data) {
+    const table = document.createElement('table');
+    table.classList.add('custom-table'); // Add custom class for the table
+
+    const headerRow = document.createElement('tr');
+
+    // Create the table headers
+    const headers = ['Model', 'Serial Number', 'Problem List', 'Fix List', 'Date'];
+    headers.forEach((headerText, index) => {
+      const th = document.createElement('th');
+      th.classList.add('custom-th'); // Add custom class for header
+      th.textContent = headerText;
+      th.dataset.index = index; // Add a data attribute for sorting by column index
+      th.addEventListener('click', () => sortTable(table, index)); // Add click listener for sorting
+      headerRow.appendChild(th);
+    });
+    table.appendChild(headerRow);
+
+    // Create the table rows
+    data.forEach(item => {
+      const row = document.createElement('tr');
+      
+      row.innerHTML = `
+        <td class="custom-td">${item.model}</td>
+        <td class="custom-td">${item.serialNumber}</td>
+        <td class="custom-td">${item.problemList}</td>
+        <td class="custom-td">${item.fixList}</td>
+        <td class="custom-td">${new Date(item.date).toLocaleString()}</td>
+      `; 
+      table.appendChild(row);
+    });
+
+    return table;
+  }
+
+  // Function to sort the table by a specific column index
+  function sortTable(table, columnIndex) {
+    const rows = Array.from(table.rows).slice(1); // Get all rows except the header
+    const sortedRows = rows.sort((rowA, rowB) => {
+      const cellA = rowA.cells[columnIndex].textContent;
+      const cellB = rowB.cells[columnIndex].textContent;
+
+      // Sort by date (if the column is 'Date')
+      if (columnIndex === 4) { // Date column index
+        return new Date(cellA) - new Date(cellB);
+      }
+
+      // Sort by text (for other columns)
+      return cellA.localeCompare(cellB);
+    });
+
+    // Remove existing rows and append sorted rows
+    sortedRows.forEach(row => table.appendChild(row));
+  }