diff --git a/templates/parts.html b/templates/parts.html
index 81d02a4..15216a1 100644
--- a/templates/parts.html
+++ b/templates/parts.html
@@ -8,6 +8,180 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+      <script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
+
+<style>
+
+table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
+    content: " \25B4\25BE"
+}
+
+
+table.sortable tbody tr:nth-child(2n) td {
+  background: #ffffff;
+}
+table.sortable tbody tr:nth-child(2n+1) td {
+  background: #ecf0f1;
+}
+
+table { 
+    width: 100%; /* Ensure the table takes full width of its container */
+
+}
+
+td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+}
+
+.name-class {
+  max-width: 300px; 
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@media only screen and (min-width: 600px) {
+
+  .hidden-desktop {
+    display: none;
+  }
+
+}
+
+
+@media only screen and (max-width: 480px) {
+    /* horizontal scrollbar for tables if mobile screen */
+    .hidden-mobile {
+  	display: none;
+    }
+
+}
+
+
+
+
+
+      /* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+.header {
+width:100%;
+    text-align:center;
+z-index: 99;
+background-color: white;
+}
+
+.content {
+	padding: 16px;
+}
+
+
+.inputContainer {
+	  display: inline-block; /* Display as an inline block */
+	    vertical-align: middle; /* Center vertically within the cell */
+	    width: 120px;
+}
+
+.inputContainer form {
+	margin: 5% auto 5% auto;
+}
+
+.inputField {
+	  display: flex;
+  align-items: center; /* Align items vertically */
+  width: 100%; /* Ensure inputField fills out inputContainer */
+  height: 100%; /* Ensure inputField fills out inputContainer */
+}
+.inputField input {
+	flex: 1;
+	width: 70%;
+	padding: 0px;
+	margin: auto 2.5px auto 2.5px;
+}
+.inputField button {
+	width: 30%;
+	padding: 0px;
+	margin: 0 2.5px 0 2.5px;
+}
+
+.square-button {
+	background-color: white;
+  border: 1px solid #d1d1d1;
+}
+
+
+      /* Modal Styles */
+      #lightbox-modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  padding-top: 50px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,0.5);
+}
+.lightbox-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+
+
+.lightbox-content {
+  max-width: 90%;
+  max-height: 90%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#lightbox-text {
+  position: absolute;
+  bottom: 20px; /* Adjust as needed */
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.5); /* Adjust background color and opacity */
+  color: white;
+  text-align: center;
+}
+
+
+#lightbox-modal .close {
+  position: absolute;
+  top: 10px;
+  right: 25px;
+  font-size: 50px;
+  color: white;
+  cursor: pointer;
+}
+
+#lightbox-modal img {
+  display: block;
+  margin: 0 auto;
+  max-width: 90%;
+  max-height: 90%;
+}
+
+</style>
+
+
+
   </head>
   <body>
 
@@ -39,10 +213,10 @@
 	</nav>
 	<center>
 	<div class="center-table" >
-		<table id="data" class="table">
+		<table id="data" class="table sortable">
 			<thead>
 			  <tr>
-				<th ></th>
+				<th class="sorttable_nosort"></th>
 				<th >id</th>
 				<th >part_num</th>
 				<th >color_id</th>
@@ -54,9 +228,9 @@
 			  {% for brick in missing_list %}
 				<tr>
 					{% if brick[4] == 'nil' %}
-					<td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
+					<td><img src="{{ '/static/none.jpg' }}" class="lightbox-trigger" alt="id: {{ brick[0] }},  color: {{ brick[2] }}, qty: {{ brick[5] }}" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
 					{% else %}
-					<td><img src="{{ '/static/parts/' + brick[4] + '.jpg' }}" class="lightbox-trigger" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
+					<td><img src="{{ '/static/parts/' + brick[4] + '.jpg' }}" alt="id: {{ brick[0] }},  color: {{ brick[2] }}, qty: {{ brick[5] }}" class="lightbox-trigger" style="height: 50px; width: 50px;margin:0;padding: 0;" loading="lazy"></td>
 					{% endif %}
 				  <td>{{ brick[0] }}</td>
 				  <td>{{ brick[1] }}</td>
@@ -69,7 +243,57 @@
 		  </table>
 		</div>
 	</center>
+<div id="lightbox-modal">
+  <div class="lightbox-wrapper">
+    <span class="close">&times;</span>
+    <img class="lightbox-content" id="lightbox-image">
+    <div class="text-container" id="lightbox-text"></div>
+  </div>
+</div>
+
 	<script>
+
+document.addEventListener('DOMContentLoaded', function () {
+  const lightboxTrigger = document.querySelectorAll('.lightbox-trigger');
+  const lightboxModal = document.getElementById('lightbox-modal');
+  const lightboxImage = document.getElementById('lightbox-image');
+  const lightboxText = document.getElementById('lightbox-text');
+  const closeModal = document.querySelector('.close');
+
+  lightboxTrigger.forEach(function (element) {
+    element.addEventListener('click', function () {
+	const imgSrc = element.getAttribute('src');
+	textContent = '';
+      console.log(element.getAttribute('alt'));
+      textContent = element.getAttribute('alt');
+	    //  textContent  = element.closest('tr').querySelector('td:nth-child(2)').textContent; // Adjust the index accordingly
+      lightboxText.textContent = textContent;
+
+
+      lightboxImage.setAttribute('src', imgSrc);
+      lightboxModal.style.display = 'block';
+    });
+  });
+
+  closeModal.addEventListener('click', function () {
+    lightboxModal.style.display = 'none';
+  });
+
+  lightboxModal.addEventListener('click', function (event) {
+    if (event.target === lightboxModal || event.target === lightboxImage || event.target === lightboxText) {
+      // Dismiss only if the clicked element is part of the content area
+      lightboxModal.style.display = 'none';
+    }
+  });
+
+  // Dismiss the lightbox when clicking outside the content area (i.e., the background)
+  lightboxModal.addEventListener('click', function (event) {
+    if (event.target != lightboxModal) {
+      lightboxModal.style.display = 'none';
+    }
+  });
+});
+
 	</script>
   </body>
 </html>
