diff --git a/templates/base.html b/templates/base.html
index 44dc1b8..f9eb69f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,8 +1,8 @@
 <!doctype html>
 <html>
   <head>
-    <title>{{ title }}</title>
-
+      <title>{{ title }}</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- CSS Reset -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
 
@@ -11,12 +11,74 @@
 
 <style>
 
+th {
+	text-align: left;
+	margin: 0px;
+	padding: 5px 0px 5px 0px;
+}
+
+table {
+}
+
+.center-table {
+}
+
 td {
 	padding: 0px 0px 0px 0px;
 	margin-left: 10px;
 	height: 50px;
+	min-width: 55px;
+  	display: table-cell;
+  	white-space: nowrap; /* Prevent text wrapping */
+  	overflow: hidden; /* Hide overflow content */
+  	text-overflow: ellipsis; /* Display ellipsis for overflow content */
 }
 
+
+.hidden-mobile {
+  display: table-cell;
+}
+
+.table-container {
+  overflow-x: auto; /* Enable horizontal scrolling */
+}
+
+.table-wrapper {
+  overflow-x: auto; /* Enable horizontal scrolling */
+}
+
+@media only screen and (min-width: 600px) {
+
+  .hidden-desktop {
+    display: none;
+  }
+
+}
+@media only screen and (max-width: 600px) {
+  table {
+    width: 100%; /* Expand table to full width on mobile */
+    table-layout: fixed;
+  }
+
+  
+  .fixed-width {
+    width: 100%;
+  }
+
+    td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background-color: #fff; /* Make the first column background white */
+  }
+
+
+  .hidden-mobile {
+    display: none;
+  }
+}
+
+
 .centered-cell {
   text-align: center; /* Center the content horizontally within the cell */
 }
@@ -57,16 +119,46 @@ td {
 td img{
     display: block;
     margin-left: auto;
-    margin-right: auto;
+    margin-right: 5px;
 
 }
 
+
+      /* 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-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>
     <div class="container">
-      <h1>{{ title }}</h1>
+      <h1 style="margin: 20px 0px 0px 0px;">{{ title }}</h1>
       <hr>
       {% block content %}{% endblock %}
     </div>
diff --git a/templates/bootstrap_table.html b/templates/bootstrap_table.html
index 5c9b20c..3bd7339 100644
--- a/templates/bootstrap_table.html
+++ b/templates/bootstrap_table.html
@@ -1,17 +1,18 @@
 {% extends "base.html" %}
 
 {% block content %}
-<h1>Inventory</h1>
-<table id="data" class="table table-striped">
+<center><button class="hidden-desktop" style="background-color: white;border: 1px solid black; color: black;" id="expand-button">Expand Columns</button></center>
+<div class="center-table">
+<table id="data">
     <thead>
       <tr>
         <th></th>
-        <th>ID</th>
-        <th>Name</th>
+        <th style="text-align:center;margin:0px;" class="fixed-width hidden-mobile">ID</th>
+        <th class="fixed-width hidden-mobile">Name</th>
         <th>Color</th>
-        <th>Qty</th>
+        <th style="text-align: center;" class="fixed-width">Qty</th>
         {% for i in json_file['unit'] %}
-          <th>Missing ({{ loop.index }})</th>
+	  <th style="text-align: center;" class="fixed-width">Missing ({{ loop.index }})</th>
         {% endfor %}
       </tr>
     </thead>
@@ -22,12 +23,12 @@
 	  {% if brick.element_id == None %}
 	  <td><img src="{{ '/static/none.jpg' }}" style="height: 50px; width: auto;"></td>
 	  {% else %}
-	  <td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" style="height: 50px; width: auto;"></td>
+	  <td><img src="{{ '/static/parts/' + brick.element_id + '.jpg' }}" class="lightbox-trigger" style="height: 50px; width: auto;"></td>
 	  {% endif %}
-          <td>{{ brick.part.part_num }}</td>
-          <td>{{ brick.part.name }}</td>
+          <td  style="text-align:center;margin:0px;" class="hidden-mobile">{{ brick.part.part_num }}</td>
+          <td class="hidden-mobile">{{ brick.part.name }}</td>
           <td>{{ brick.color.name }}</td>
-          <td>{{ brick.quantity }}</td>
+          <td style="text-align:center;">{{ brick.quantity }}</td>
     	  {% for i in json_file['unit'] %}
         
     		  <td class="centered-cell">
@@ -63,6 +64,7 @@
       {% endfor %}
     </tbody>
   </table>
+</div>
 
   <h1>Spares</h1>
   <table id="data" class="table table-striped">
@@ -114,7 +116,68 @@
     	  {% endfor %}
         </tr>
 	{% endif %}
+
       {% endfor %}
     </tbody>
   </table>
+
+
+<div id="lightbox-modal">
+  <span class="close">&times;</span>
+  <img class="lightbox-content" id="lightbox-image">
+</div>
+
 {% endblock %}
+
+
+
+{% block scripts %}
+<script>
+	const expandButton = document.getElementById('expand-button');
+const dataTable = document.getElementById('data');
+let isExpanded = false;
+
+expandButton.addEventListener('click', () => {
+  const hiddenColumns = dataTable.querySelectorAll('.hidden-mobile');
+  hiddenColumns.forEach(column => {
+    if (isExpanded) {
+      column.style.display = 'none';
+      expandButton.textContent = 'Expand Columns';
+    } else {
+      column.style.display = 'table-cell';
+      expandButton.textContent = 'Hide Columns';
+    }
+  });
+  isExpanded = !isExpanded;
+});
+
+document.addEventListener('DOMContentLoaded', function () {
+  const lightboxTrigger = document.querySelectorAll('.lightbox-trigger');
+  const lightboxModal = document.getElementById('lightbox-modal');
+  const lightboxImage = document.getElementById('lightbox-image');
+  const closeModal = document.querySelector('.close');
+
+  lightboxTrigger.forEach(function (element) {
+    element.addEventListener('click', function () {
+      const imgSrc = element.getAttribute('src');
+      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) {
+      lightboxModal.style.display = 'none';
+    }
+  });
+});
+
+
+</script>
+
+{% endblock %}
+
