diff --git a/.gitignore b/.gitignore
index e621bec..4a87a79 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 .vscode
 .idea
 venv
+*.html
diff --git a/esp32-timed-switch.ino b/esp32-timed-switch.ino
index 0ea2726..8f69922 100644
--- a/esp32-timed-switch.ino
+++ b/esp32-timed-switch.ino
@@ -13,7 +13,7 @@
 // --------------------------------------------
 
 
-const char* html_app="<html><head><title>ESP32 timed Switch</title><script src=https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js></script></head><body><h1>Scheduler</h1><script>class Schedule{constructor(scheduleArray){if(scheduleArray&&scheduleArray.length===24){this.schedule=scheduleArray.slice();}else{this.schedule=[24].fill(0x000)}}loadFromArrayBuffer=function(buffer){var view=new DataView(buffer);for(var i=0;i<24;i+=1){this.schedule[i]=view.getUint32(i*4)}};updateSegment(hour,segment,state){if(hour<0||hour>=24){throw new Error('Hour must be between 0 and 23.')}if(segment<0||segment>=12){throw new Error('Segment must be between 0 and 11.')}const bitPosition=11-segment;if(state){this.schedule[hour]|=(1<<bitPosition)}else{this.schedule[hour]&= ~(1<<bitPosition)}}serializeForDisplay(){return this.schedule.map(hour=>{if(hour===0xFFF){return{displayValue:' ',class:'on'}}else if(hour===0x000){return{displayValue:' ',class:'off'}}else{return{displayValue:' ',class:'partial'}}})}prepareEditMatrix(){const editMatrix=[];for(let hour=0;hour<24;hour+=1){const hourSegments=[];for(let segment=0;segment<12;segment+=1){hourSegments.push({value:(this.schedule[hour]&(1<<segment))!==0?1:0})}editMatrix.push(hourSegments.reverse())}return editMatrix}updateFromEditMatrix(editMatrix){for(let hour=0;hour<24;hour+=1){let hourValue=0;for(let segment=0;segment<12;segment+=1){if(editMatrix[hour][11-segment].value){hourValue|=(1<<segment)}}this.schedule[hour]=hourValue}}serializeToArrayBuffer=function(){var buffer=new ArrayBuffer(24*4);var view=new DataView(buffer);for(var i=0;i<this.schedule.length;i+=1){view.setUint32(i*4,this.schedule[i])}return buffer}}var app=angular.module('plugSchedulerApp',[]);app.controller('PlugScheduleController',['$http',function($http){var ctrl=this;ctrl.editMode=false;ctrl.$onInit=function(){ctrl.scheduleObj=new Schedule();ctrl.getSchedule()};ctrl.getSchedule=function(){if(ctrl.plugId===undefined){throw new Error('plugId is not defined')}var url=`/api/schedule/${ctrl.plugId }`;$http.get(url,{responseType:'arraybuffer'}).then(function(response){ctrl.scheduleObj.loadFromArrayBuffer(response.data);ctrl.displaySchedule=ctrl.scheduleObj.serializeForDisplay()}).catch(function(error){console.error('Error fetching schedule:',error)})};ctrl.modifySchedule=function(){ctrl.editMode=true;ctrl.editMatrix=ctrl.scheduleObj.prepareEditMatrix()};ctrl.saveSchedule=function(){ctrl.editMode=false;ctrl.scheduleObj.updateFromEditMatrix(ctrl.editMatrix);ctrl.updateSchedule()};ctrl.updateSchedule=function(){var url=`/api/schedule/${ctrl.plugId }`;var serializedSchedule=ctrl.scheduleObj.serializeToArrayBuffer();$http.post(url,serializedSchedule,{headers:{'Content-Type':'application/octet-stream'},responseType:'arraybuffer',transformRequest:[]}).then(function(response){console.log(\"successfully updated\");ctrl.displaySchedule=ctrl.scheduleObj.serializeForDisplay()},function(error){console.error('Error updating schedule:',error)})};ctrl.checkAll=function(hourIndex){ctrl.editMatrix[hourIndex].forEach(segment=>{segment.value=1})};ctrl.uncheckAll=function(hourIndex){ctrl.editMatrix[hourIndex].forEach(segment=>{segment.value=0})}}]);app.component('plugScheduleWidget',{bindings:{plugId:'<'},template:`<div class=plug-schedule-widget><h3>Schedule for Plug {{ $ctrl.plugId }}</h3><div ng-if=!$ctrl.editMode><div class=hour-cell ng-class=hour.class ng-repeat=\"hour in $ctrl.displaySchedule track by $index\">{{ hour.displayValue }}</div><button ng-click=$ctrl.modifySchedule()>Modify Schedule</button></div><div ng-if=$ctrl.editMode><table><tr ng-repeat=\"hourSegments in $ctrl.editMatrix track by $index\"><td ng-repeat=\"segment in hourSegments track by $index\"><input ng-false-value=0 ng-model=segment.value ng-true-value=1 type=checkbox><td><button ng-click=$ctrl.checkAll($index)>Check All</button> <button ng-click=$ctrl.uncheckAll($index)>Uncheck All</button></table><button ng-click=$ctrl.saveSchedule()>Save Schedule</button></div></div>`,controller:'PlugScheduleController'});</script><div ng-app=plugSchedulerApp><plug-schedule-widget plug-id=1></plug-schedule-widget><plug-schedule-widget plug-id=2></plug-schedule-widget><plug-schedule-widget plug-id=3></plug-schedule-widget><plug-schedule-widget plug-id=4></plug-schedule-widget><plug-schedule-widget plug-id=5></plug-schedule-widget><plug-schedule-widget plug-id=6></plug-schedule-widget><plug-schedule-widget plug-id=7></plug-schedule-widget><plug-schedule-widget plug-id=8></plug-schedule-widget></div><style>*{font-family:Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;padding:0;border-spacing:0;border:transparent;text-align:center;color:#aaa;font-weight:400}body{width:80%;margin:auto;background:#333340}button{padding:4px 8px;margin-left:5px;vertical-align:top;border-radius:12px;background:#696983;color:eee;margin-top:5px}.hour-cell{display:inline-block;width:10px;height:25px;margin-top:4px}.off{background-color:#eee}.on{background-color:#8e8}.partial{background-color:#bdc}table{margin:auto}</style></body></html>";
+const char* html_app="<html><head><title>ESP32 timed Switch</title><script src=\"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js\"></script><link rel=\"manifest\" href=\"manifest.json\" /></head><body><h1>Scheduler</h1><script>class Schedule {constructor(scheduleArray) {if (scheduleArray && scheduleArray.length === 24) {this.schedule = scheduleArray.slice();} else {this.schedule = new Array(24).fill(0x000);}}loadFromArrayBuffer = function(buffer) {var view = new DataView(buffer);for (var i = 0; i < 24; i++) {this.schedule[i] = view.getUint16(i * 2);}};updateSegment(hour, segment, state) {if (hour < 0 || hour >= 24) {throw new Error('Hour must be between 0 and 23.');}if (segment < 0 || segment >= 12) {throw new Error('Segment must be between 0 and 11.');}const bitPosition = 11 - segment;if (state) {this.schedule[hour] |= (1 << bitPosition);} else {this.schedule[hour] &= ~(1 << bitPosition);}}serializeForDisplay() {return this.schedule.map(hour => {if (hour === 0xFFF) {return { displayValue: ' ', class: 'on' };} else if (hour === 0x00) {return { displayValue: ' ', class: 'off' };} else {return { displayValue: ' ', class: 'partial' };}});}prepareEditMatrix() {const editMatrix = [];for (let hour = 0; hour < 24; hour++) {const hourSegments = [];for (let segment = 0; segment < 12; segment++) {hourSegments.push({value: (this.schedule[hour] & (1 << segment)) !== 0 ? 1 : 0});}editMatrix.push(hourSegments.reverse());}return editMatrix;}updateFromEditMatrix(editMatrix) {for (let hour = 0; hour < 24; hour++) {let hourValue = 0;for (let segment = 0; segment < 12; segment++) {if (editMatrix[hour][11 - segment].value) {hourValue |= (1 << segment);}}this.schedule[hour] = hourValue;}}serializeToArrayBuffer = function() {var buffer = new ArrayBuffer(24 * 2);var view = new DataView(buffer);for (var i = 0; i < this.schedule.length; i++) {view.setUint16(i * 2, this.schedule[i]);}return view;};}var app = angular.module('plugSchedulerApp', []);app.value('api_host', window.location.host);app.factory(\"data\", function(){var sharedData = { api_host: window.location.host};return {getSharedData: function () {return sharedData;}};});app.controller('ApiHostController', ['$scope', 'api_host', 'data', function( $scope, api_host, data) {var ctrl = this;$scope.data = data.getSharedData();window.ctrl = $scope}]);app.controller('PlugScheduleController', ['$scope', '$http', 'data', function( $scope, $http, data) {var ctrl = this;ctrl.editMode = false;$scope.data = data.getSharedData();ctrl.$onInit = function() {ctrl.scheduleObj = new Schedule();ctrl.getSchedule();};ctrl.getSchedule = function() {if (ctrl.plugId === undefined) {return;}var url = `http://${$scope.data.api_host}/api/schedule/${ctrl.plugId}`;$http.get(url, { responseType: 'arraybuffer' }).then(function(response) {ctrl.scheduleObj.loadFromArrayBuffer(response.data);ctrl.displaySchedule = ctrl.scheduleObj.serializeForDisplay();}).catch(function(error) {console.error('Error fetching schedule:', error);});};ctrl.modifySchedule = function() {ctrl.editMode = true;ctrl.editMatrix = ctrl.scheduleObj.prepareEditMatrix();};ctrl.saveSchedule = function() {ctrl.editMode = false;ctrl.scheduleObj.updateFromEditMatrix(ctrl.editMatrix);ctrl.updateSchedule();};ctrl.updateSchedule = function() {var url = `http://${$scope.data.api_host}/api/schedule/${ctrl.plugId}`;var serializedSchedule = ctrl.scheduleObj.serializeToArrayBuffer();$http.post(url, serializedSchedule, {headers: {'Content-Type': 'application/octet-stream'},responseType: 'arraybuffer',transformRequest: []}).then(function(response) {console.log(\"successfully updated\");ctrl.displaySchedule = ctrl.scheduleObj.serializeForDisplay();}, function(error) {alert('Error updating schedule:', error);});};ctrl.checkAll = function(hourIndex) {ctrl.editMatrix[hourIndex].forEach(segment => {segment.value = 1;});};ctrl.uncheckAll = function(hourIndex) {ctrl.editMatrix[hourIndex].forEach(segment => {segment.value = 0;});};ctrl.invertAll = function(hourIndex) {ctrl.editMatrix[hourIndex].forEach(segment => {var inverted = Math.abs( segment.value - 1);segment.value = inverted;});};ctrl.checkPattern = function(hourIndex, results) {for( index = 0; index < ctrl.editMatrix[hourIndex].length; index++){ctrl.editMatrix[hourIndex][index] = { value : results[index] };}};ctrl.checkHalf = function(hourIndex) {ctrl.checkPattern( hourIndex, [1,1,1,1,1,1,0,0,0,0,0,0]);};ctrl.checkFourth = function(hourIndex) {ctrl.checkPattern( hourIndex, [1,1,1,0,0,0,1,1,1,0,0,0]);};ctrl.checkSixth = function(hourIndex) {ctrl.checkPattern( hourIndex, [1,1,0,0,1,1,0,0,1,1,0,0]);};ctrl.checkTwelveth = function(hourIndex) {ctrl.checkPattern( hourIndex, [1,0,1,0,1,0,1,0,1,0,1,0]);};}]);app.component('plugScheduleWidget', {bindings: {plugId: '<'},template: `<div class=\"plug-schedule-widget\"><h3>Plug {{ $ctrl.plugId }}</h3><div ng-if=\"!$ctrl.editMode\"><div ng-repeat=\"hour in $ctrl.displaySchedule track by $index\" class=\"hour-cell\" ng-class=\"hour.class\">{{ hour.displayValue }}</div><button class=\"modify\" ng-click=\"$ctrl.modifySchedule()\">Modify</button></div><div ng-if=\"$ctrl.editMode\"><table><tr><td class=></td><td class=\"minutes\" ng-repeat=\"segment in [0,1,2,3,4,5,6,7,8,9,10,11]\">{{ segment * 5 }}</td></tr><tr ng-repeat=\"hourSegments in $ctrl.editMatrix track by $index\"><td class=\"hours\">{{ $index }}</td><td class=\"cell\" ng-repeat=\"segment in hourSegments track by $index\"><input type=\"checkbox\" ng-model=\"segment.value\" ng-true-value=\"1\" ng-false-value=\"0\"></td><td><button ng-click=\"$ctrl.checkAll($index)\">1</button><button ng-click=\"$ctrl.uncheckAll($index)\">0</button><button ng-click=\"$ctrl.checkHalf($index)\">½</button><button ng-click=\"$ctrl.checkFourth($index)\">¼</button><button ng-click=\"$ctrl.checkSixth($index)\">⅙</button><button ng-click=\"$ctrl.checkTwelveth($index)\">¹⁄₁₂</button><button ng-click=\"$ctrl.invertAll($index)\">∨</button></td></tr></table><button ng-click=\"$ctrl.saveSchedule()\">Save Schedule</button></div></div>`,controller: 'PlugScheduleController'});</script><div ng-app=\"plugSchedulerApp\" id=\"main_container\"><div ng-controller=\"PlugScheduleController\"><plug-schedule-widget plug-id=\"1\"></plug-schedule-widget><plug-schedule-widget plug-id=\"2\"></plug-schedule-widget><plug-schedule-widget plug-id=\"3\"></plug-schedule-widget><plug-schedule-widget plug-id=\"4\"></plug-schedule-widget><plug-schedule-widget plug-id=\"5\"></plug-schedule-widget><plug-schedule-widget plug-id=\"6\"></plug-schedule-widget><plug-schedule-widget plug-id=\"7\"></plug-schedule-widget><plug-schedule-widget plug-id=\"8\"></plug-schedule-widget></div><!--<div  ng-controller=\"ApiHostController\"><h3>Change Host<input type=\"text\" ng-model=\"data.api_host\" value=\"{{data.api_host}}\" style=\"margin: 10px;padding: 3px; font-size: 14pt; color: #333340; border-radius: 6px;\"></h3></div>--></div><style>* {font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;padding: 0px;border-spacing: 0px;border: transparent;text-align: center;color: #aaa;font-weight: normal;font-size: 20pt;}body {margin: auto;background: #333340;}button {background: #696983;border-radius: 6px;box-shadow: 1px 1px 3px rgba(0,0,0,0.6);color: eee;font-size: 0.8em;margin-left: 4px;margin-top: 16px;padding: 14px;vertical-align: top;}button.modify {margin: 4px;}button.modifiers {width: 40px;}button:hover {background: #9f9fc4;box-shadow: inset 1px 1px 3px rgba(0,0,0,0.6);}.hour-cell {display: inline-block;width: 25px;height: 50px;margin-top: 4px;}.minutes, .hours {font-size: 0.6em;color: rgba(255, 255, 255, .5);padding: 6px;}table tr td {padding: 3px;}tr:nth-child(2n) {box-shadow: inset 1px 1px 4px 1px rgba(0,0,0,0.54);background: rgba(0, 0, 0, 0.07);}tr td.cell {border-left: 1px solid rgba(61, 61, 78, .61);}div#main_container {margin: auto;}.off {background-color: #eee;}.on {background-color: #8e8;}.partial {background-color: #bdc;}table {margin: auto;}</style></body></html>";
 
 
 // PREFERENCES
@@ -361,8 +361,8 @@ void loop(){
 
   // GET request
   if (request.indexOf("GET /api/schedule/") >= 0) {
-    int startIdIndex = 18; 
-    int endIdIndex = 19; 
+    int startIdIndex = 18;
+    int endIdIndex = 19;
 
     String plug_idStr = request.substring(startIdIndex, endIdIndex);
     int plug_id = plug_idStr.toInt() - 1; // Adjust for 0 index
@@ -410,7 +410,7 @@ void loop(){
         }
       }
       Serial.println("Done reading. Going for binary.");
-    
+
       char post_body[24];
       client.readBytes(post_body, 24);
       Serial.print("Read post_body: ");
diff --git a/html/index.html b/html/index.html
index 004b461..18286c9 100644
--- a/html/index.html
+++ b/html/index.html
@@ -9,12 +9,14 @@
 <h1>Scheduler</h1>
 
                 <script>
+
 class Schedule {
 
   constructor(scheduleArray) {
 
     if (scheduleArray && scheduleArray.length === 24) {
-      this.schedule = scheduleArray.slice(); // Copy the array to prevent direct mutation
+      // Copy the array to prevent direct mutation
+      this.schedule = scheduleArray.slice();
     } else {
       // Initialize with all hours turned off if no valid array is provided
       this.schedule = new Array(24).fill(0x000);
@@ -53,9 +55,11 @@ class Schedule {
   serializeForDisplay() {
     // Converts the schedule array into a display format with the appropriate class for coloring
     return this.schedule.map(hour => {
-      if (hour === 0xFFF) { // All segments on
+      // All segments on
+      if (hour === 0xFFF) {
         return { displayValue: ' ', class: 'on' };
-      } else if (hour === 0x00) { // All segments off
+      // All segments off
+      } else if (hour === 0x00) {
         return { displayValue: ' ', class: 'off' };
       } else {
         return { displayValue: ' ', class: 'partial' };
@@ -112,7 +116,7 @@ class Schedule {
 var app = angular.module('plugSchedulerApp', []);
 app.value('api_host', window.location.host);
 app.factory("data", function(){
-    var sharedData = { api_host: window.location.host}
+    var sharedData = { api_host: window.location.host};
     return {
         getSharedData: function () {
             return sharedData;
@@ -124,7 +128,7 @@ app.controller('ApiHostController', ['$scope', 'api_host', 'data', function( $sc
     var ctrl = this;
     $scope.data = data.getSharedData();
     window.ctrl = $scope
-}])
+}]);
 
 app.controller('PlugScheduleController', ['$scope', '$http', 'data', function( $scope, $http, data) {
   var ctrl = this;
@@ -132,7 +136,8 @@ app.controller('PlugScheduleController', ['$scope', '$http', 'data', function( $
   $scope.data = data.getSharedData();
 
   ctrl.$onInit = function() {
-    ctrl.scheduleObj = new Schedule(); // Initialize with a default schedule
+    // Initialize with a default schedule
+    ctrl.scheduleObj = new Schedule();
     ctrl.getSchedule();
   };
 
@@ -142,7 +147,7 @@ app.controller('PlugScheduleController', ['$scope', '$http', 'data', function( $
     }
 
     // Fetch the schedule from the server for a given plug ID
-    var url = `http://${$scope.data.api_host}/api/schedule/${ctrl.plugId}`
+    var url = `http://${$scope.data.api_host}/api/schedule/${ctrl.plugId}`;
     $http.get(url, { responseType: 'arraybuffer' }).then(function(response) {
       ctrl.scheduleObj.loadFromArrayBuffer(response.data);
       ctrl.displaySchedule = ctrl.scheduleObj.serializeForDisplay();
@@ -166,7 +171,7 @@ app.controller('PlugScheduleController', ['$scope', '$http', 'data', function( $
 
   // Send the updated schedule to the server
   ctrl.updateSchedule = function() {
-    var url = `http://${$scope.data.api_host}/api/schedule/${ctrl.plugId}`
+    var url = `http://${$scope.data.api_host}/api/schedule/${ctrl.plugId}`;
     var serializedSchedule = ctrl.scheduleObj.serializeToArrayBuffer();
 
     $http.post(url, serializedSchedule, {
@@ -199,7 +204,7 @@ app.controller('PlugScheduleController', ['$scope', '$http', 'data', function( $
   };
   ctrl.invertAll = function(hourIndex) {
     ctrl.editMatrix[hourIndex].forEach(segment => {
-      var inverted = Math.abs( segment.value - 1)
+      var inverted = Math.abs( segment.value - 1);
       segment.value = inverted;
     });
   };
diff --git a/html/minify.sh b/html/minify.sh
new file mode 100755
index 0000000..e499062
--- /dev/null
+++ b/html/minify.sh
@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+APP_PATH=$(cd $(dirname $0) && pwd)
+TMP_FILE=$(mktemp)
+FINAL_FILE=minify.html
+cp "$APP_PATH/index.html" "$TMP_FILE"
+sed -ri "s/^\s+//" "$TMP_FILE"
+sed -ri "s=^//.*$==" "$TMP_FILE"
+sed -ri 's="=\\"=g' "$TMP_FILE"
+tr -d '\n' < "$TMP_FILE" > "$FINAL_FILE"
+cat "$FINAL_FILE"
\ No newline at end of file
