diff --git a/app.py b/app.py
index b3da398..0d28680 100644
--- a/app.py
+++ b/app.py
@@ -1,4 +1,4 @@
-from flask import Flask, request, redirect, jsonify, render_template
+from flask import Flask, request, redirect, jsonify, render_template, Response
 import json
 from pprint import pprint as pp
 from pathlib import Path
@@ -19,22 +19,73 @@ def index():
         set_list.append(info_file)
     return render_template('frontpage.html',set_list=set_list)
 
-@app.route('/<tmp>')
+@app.route('/<tmp>', methods=['GET', 'POST'])
 def sets(tmp):
+   
     with open('./static/sets/'+tmp+'/info.json') as info:
           info_file = json.loads(info.read())
     with open('./static/sets/'+tmp+'/inventory.json') as inventory:
           inventory_file = json.loads(inventory.read())
     with open('./info/'+tmp+'.json') as info:
           json_file = json.loads(info.read())
-    return render_template('bootstrap_table.html', tmp=tmp,title=info_file['name'],
-                           info_file=info_file,inventory_file=inventory_file,json_file=json_file)
+
+    if request.method == 'POST':
+        part_num = request.form.get('brickpartpart_num')
+        color = request.form.get('brickcolorname')
+        index = request.form.get('index')
+        number = request.form.get('numberInput')
+        is_spare = request.form.get('is_spare')
+
+        # print(part_num)
+        # print(color)
+        # print(index)
+        # print(number)
+        # print(is_spare)
+        
+        if number is not None:
+
+            print(part_num)
+            print(color)
+            print(number)
+            print(is_spare)
+
+            with open('./info/'+tmp+'.json') as info:
+                json_file = json.loads(info.read())
+            print(json_file['count'])
+
+            data = '{"brick" : {"ID":"' + part_num + '","is_spare": "' + is_spare + '","color_name": "' + color + '","amount":"' + number + '"}}'
+            
+            if len(json_file['unit'][int(index)]['bricks']['missing']) == 0:
+                json_file['unit'][int(index)]['bricks']['missing'].append(json.loads(data))
+                print(json_file)
+            elif number == '':
+                for idx,i in enumerate(json_file['unit'][int(index)]['bricks']['missing']):
+                    if i['brick']['ID'] == part_num and i['brick']['is_spare'] == is_spare and i['brick']['color_name'] == color:
+                        json_file['unit'][int(index)]['bricks']['missing'].pop(idx)
+            else:
+                found = False
+                for idx,i in enumerate(json_file['unit'][int(index)]['bricks']['missing']):
+                    if not found and i['brick']['ID'] == part_num and i['brick']['is_spare'] == is_spare and i['brick']['color_name'] == color:
+                        json_file['unit'][int(index)]['bricks']['missing'][idx]['brick']['amount'] = number
+                        found = True
+                if not found:
+                    json_file['unit'][int(index)]['bricks']['missing'].append(json.loads(data))
+
+            
+            with open('./info/'+tmp+'.json', 'w') as dump_file:
+                json.dump(json_file,dump_file)
+        #return Response(status=200)
+        return ('', 204)
+    else:
+       return render_template('bootstrap_table.html', tmp=tmp,title=info_file['name'],
+                       info_file=info_file,inventory_file=inventory_file,json_file=json_file)
+
 
 
 @app.route('/<tmp>/saveNumber', methods=['POST'])
 def save_number(tmp):
-    part_num = request.form.get('brick.part.part_num')
-    color = request.form.get('brick.color.name')
+    part_num = request.form.get('brickpartpart_num')
+    color = request.form.get('brickcolorname')
     index = request.form.get('index')
     number = request.form.get('numberInput')
     is_spare = request.form.get('is_spare')
@@ -48,14 +99,13 @@ def save_number(tmp):
 
         with open('./info/'+tmp+'.json') as info:
             json_file = json.loads(info.read())
-        print(json_file['count'])
 
         data = '{"brick" : {"ID":"' + part_num + '","is_spare": "' + is_spare + '","color_name": "' + color + '","amount":"' + number + '"}}'
         
         if len(json_file['unit'][int(index)]['bricks']['missing']) == 0:
             json_file['unit'][int(index)]['bricks']['missing'].append(json.loads(data))
             print(json_file)
-        elif number == '0' or number == '':
+        elif number == '':
             for idx,i in enumerate(json_file['unit'][int(index)]['bricks']['missing']):
                 if i['brick']['ID'] == part_num and i['brick']['is_spare'] == is_spare and i['brick']['color_name'] == color:
                     json_file['unit'][int(index)]['bricks']['missing'].pop(idx)
@@ -72,7 +122,7 @@ def save_number(tmp):
         with open('./info/'+tmp+'.json', 'w') as dump_file:
             json.dump(json_file,dump_file)
         
-    return  redirect('/{}'.format(tmp))
+    return Response(status=204)
 
 if __name__ == '__main__':
     app.run(host='192.168.10.109', debug=True, port=3333)
diff --git a/templates/base.html b/templates/base.html
index 105b82f..410a945 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,16 +1,26 @@
 <!doctype html>
-<html>
+<html data-theme="light">
+
+
   <head>
       <title>{{ title }}</title>
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- CSS Reset -->
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    <!-- CSS Reset -->
+<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
+
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
 
+
 <!-- Milligram CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+/>
+
+<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
+<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>
 
 <style>
-
 th {
 	text-align: left;
 	margin: 0px;
@@ -18,6 +28,7 @@ th {
 }
 
 table {
+  
 }
 
 #data {
@@ -137,6 +148,9 @@ td {
   border: 1px solid #d1d1d1;
 }
 
+.highlighted {
+	  background-color: yellow; /* Adjust as needed */
+}
 
 td img{
     display: block;
@@ -164,6 +178,8 @@ td img{
   height: 100%;
 }
 
+
+
 .lightbox-content {
   max-width: 90%;
   max-height: 90%;
diff --git a/templates/bootstrap_table.html b/templates/bootstrap_table.html
index 3387093..16d7e78 100644
--- a/templates/bootstrap_table.html
+++ b/templates/bootstrap_table.html
@@ -34,12 +34,14 @@
     		  <td class="centered-cell">
 			<div class="inputContainer">
     			{% set ns = namespace(count='') %}
-			<form id="number-form" action="/{{ tmp }}/saveNumber" method="post">
-    			<input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}">
-    			<input type="hidden" name="count" value="{{ i }}">
-          <input type="hidden" name="index" value="{{ loop.index0 }}">
-          <input type="hidden" name="is_spare" value="{{ brick.is_spare }}">
-    			<input type="hidden" name="brick.color.name" value="{{ brick.color.name }}">
+      <!-- <form id="number-form" action="/{{ tmp }}" method="post"> -->
+      <form id="number-form">
+          <input type="hidden" name="numberID" id="numberID" value="{{ tmp }}"> 
+          <input type="hidden" name="brickpartpart_num" id="brickpartpart_num" value="{{ brick.part.part_num }}">
+          <input type="hidden" name="count" value="{{ i }}">
+          <input type="hidden" name="index" id="index" value="{{ loop.index0 }}">
+          <input type="hidden" name="is_spare" id="is_spare" value="{{ brick.is_spare }}">
+          <input type="hidden" name="brickcolorname" id="brickcolorname" value="{{ brick.color.name }}">
     			{% for j in json_file['unit'][loop.index0]['bricks']['missing'] %}
     			  {% if j['brick']['ID'] == brick.part.part_num and j['brick']['color_name'] == brick.color.name %}
 
@@ -50,10 +52,12 @@
     			  {% endif %}
     			{% endfor %}
 			<div class='inputField'>
-	<input type="tel" style="text-align:center;" id="numberInput" name="numberInput" value="{{ ns.count }}" pattern="\d+">
-	<button class="square-button" type="submit">
-		<img src="/static/save.svg" alt="Save Icon">
-	</button>
+	<input type="tel" style="text-align:center;font-size: 16px;" id="numberInput" name="numberInput" value="{{ ns.count }}" pattern="\d+">
+	<span style="display:none">{{ ns.count }}</span>
+  <button class="square-button" id="bnumber-form" type="submit">
+    <img src="/static/save.svg" alt="Save Icon">
+  </button>
+
 			</div>
     		      </form>
 			</div>
@@ -68,7 +72,7 @@
 
   <h1>Spares</h1>
 <div class="center-table">
-<table id="data" class="table">
+<table id="sdata" class="table">
     <thead>
       <tr>
         <th></th>
@@ -99,12 +103,13 @@
           <td class="centered-cell">
       <div class="inputContainer">
           {% set ns = namespace(count='') %}
-      <form id="number-form" action="/{{ tmp }}/saveNumber" method="post">
-          <input type="hidden" name="brick.part.part_num" value="{{ brick.part.part_num }}">
+      <form id="number-form" action="/{{ tmp }}" method="post">
+          <input type="hidden" name="numberID" id="numberID" value="{{ tmp }}"> 
+          <input type="hidden" name="brickpartpart_num" value="{{ brick.part.part_num }}">
           <input type="hidden" name="count" value="{{ i }}">
           <input type="hidden" name="index" value="{{ loop.index0 }}">
           <input type="hidden" name="is_spare" value="{{ brick.is_spare }}">
-          <input type="hidden" name="brick.color.name" value="{{ brick.color.name }}">
+          <input type="hidden" name="brickcolor.name" value="{{ brick.color.name }}">
           {% for j in json_file['unit'][loop.index0]['bricks']['missing'] %}
             {% if j['brick']['ID'] == brick.part.part_num and j['brick']['color_name'] == brick.color.name %}
 
@@ -120,8 +125,11 @@
     <img src="/static/save.svg" alt="Save Icon">
   </button>
       </div>
+
               </form>
       </div>
+
+
           </td>
         {% endfor %}
         </tr>
@@ -150,18 +158,47 @@
 
 
 {% block scripts %}
+
 <script>
+// $(document).ready( function () {
+//     $('#data').DataTable();
+// } );
+
+
+
+
+
+// document.addEventListener('DOMContentLoaded', function () {
+//   const myDataTable = document.getElementById('data');
+
+//   myDataTable.addEventListener('click', function (event) {
+//     const clickedRow = event.target.closest('td');
+//     if (clickedRow) {
+//       // Remove highlighting from all rows
+//       const rows = myDataTable.querySelectorAll('tr');
+//       rows.forEach(row => row.classList.remove('highlighted'));
+
+//       // Add highlighting to the clicked row
+// 	if (clickedRow.classList.contains('highlighted')) {
+		
+//       clickedRow.classList.remove('highlighted');
+// 	} else {
+//       clickedRow.classList.add('highlighted');
+// 	}
+//     }
+//   });
+// });
 
 	function goToPage(url) {
 		window.location.href = url;
 	}
 
 	const expandButton = document.getElementById('expand-button');
-const dataTable = document.getElementById('data');
+const myDataTable = document.getElementById('data');
 let isExpanded = false;
 
 expandButton.addEventListener('click', () => {
-  const hiddenColumns = dataTable.querySelectorAll('.hidden-mobile');
+  const hiddenColumns = myDataTable.querySelectorAll('.hidden-mobile');
   hiddenColumns.forEach(column => {
     if (isExpanded) {
       column.style.display = 'none';
@@ -223,7 +260,71 @@ document.addEventListener('DOMContentLoaded', function () {
   numberInput.setAttribute('inputmode', 'numeric');
 });
 
+
+let options = {
+    searchable: true,
+    sortable: true,
+    paging: false,
+    perPage: 10,
+    perPageSelect: [5, 10, 25, 50, ["All", -1]],
+    columns: [
+
+      { select: [0], sortable: false }
+
+
+    ]
+};
+
+let myTable = document.querySelector("#data");
+let dataTable = new simpleDatatables.DataTable(myTable, options);
+
+
+$("body").on("click", "#number-form", function (event) {
+// $('#number-form').submit(function(event) {
+	event.preventDefault();
+	//console.log($(this)[0]);
+
+  brickpartpart_num = $(this)[0][1].value;
+  brickcolorname = $(this)[0][5].value;
+  index = $(this)[0][3].value;
+  numberInput = $(this)[0][6].value;
+  is_spare = $(this)[0][4].value;
+
+  // console.log('ID: ' + brickpartpart_num);
+  // console.log('Color Name: ' + brickcolorname);
+  // console.log('Index: ' + index);
+  // console.log('Number Input: ' + numberInput);
+  // console.log('is_spare: ' + is_spare);
+
+  $.ajax({
+    url: '/'+$(this)[0][0].value,
+    type: 'POST',
+    data: {
+      'brickpartpart_num': brickpartpart_num,
+      'brickcolorname': brickcolorname,
+      'index': index,
+      'numberInput': numberInput,
+      'is_spare': is_spare
+    }
+
+  });
+
+
+
+  // part_num = request.form.get('brickpartpart_num')
+  // color = request.form.get('brickcolorname')
+  // index = request.form.get('index')
+  // number = request.form.get('numberInput')
+  // is_spare = request.form.get('is_spare')
+
+});
+
+
+
+
+
 </script>
 
+
 {% endblock %}
 
diff --git a/templates/frontpage.html b/templates/frontpage.html
index 2b37b68..8b9beb6 100644
--- a/templates/frontpage.html
+++ b/templates/frontpage.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html data-theme="light">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,7 +11,10 @@
 
 <!-- Milligram CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
-
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+/>
 
 <style>
   body {
@@ -96,6 +99,7 @@
   <button class="button button-outline" onclick="dynamicSort('set_parts')">Sort by Parts</button>
   <button class="button button-outline" onclick="dynamicSort('set_name')">Sort by Name</button>
   </center>
+
   <!-- Add more buttons for other text values if needed -->
 	</div>