diff --git a/.gitmodules b/.gitmodules
index c2c1104c238..c434de0873c 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,6 +1,6 @@
 [submodule "EspruinoAppLoaderCore"]
 	path = core
-	url = https://github.com/espruino/EspruinoAppLoaderCore.git
+	url = https://github.com/RKBoss6/EspruinoAppLoaderCore.git
 [submodule "webtools"]
 	path = webtools
 	url = https://github.com/espruino/EspruinoWebTools.git
diff --git a/README.md b/README.md
index 21ff15e107d..a713bbe413d 100644
--- a/README.md
+++ b/README.md
@@ -371,6 +371,7 @@ version of what's in `metadata.json`:
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
     <p><button id="upload" class="btn btn-primary">Upload</button></p>
diff --git a/apps/a_clock_timer/custom.html b/apps/a_clock_timer/custom.html
index b6222634010..825342d445d 100644
--- a/apps/a_clock_timer/custom.html
+++ b/apps/a_clock_timer/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
       <p>You can set the 2 additional timezones displayed by the clock.</p>
diff --git a/apps/airqualityci/custom.html b/apps/airqualityci/custom.html
index d615d45bcf9..eff1f90f1be 100644
--- a/apps/airqualityci/custom.html
+++ b/apps/airqualityci/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
     <style>
       input.offset {
           width: 80px;
diff --git a/apps/assistedgps/custom.html b/apps/assistedgps/custom.html
index 39290c2e670..e051719a65f 100644
--- a/apps/assistedgps/custom.html
+++ b/apps/assistedgps/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
 
diff --git a/apps/beer/custom.html b/apps/beer/custom.html
index f0895f93f61..2a62ad614da 100644
--- a/apps/beer/custom.html
+++ b/apps/beer/custom.html
@@ -2,6 +2,7 @@
   <head>
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
     <style>
       body {
diff --git a/apps/contourclock/custom.html b/apps/contourclock/custom.html
index 71cc788c724..a2acc102fc3 100644
--- a/apps/contourclock/custom.html
+++ b/apps/contourclock/custom.html
@@ -1,6 +1,7 @@
 <html>
 <head>
   <link rel="stylesheet" href="../../css/spectre.min.css">
+  <link rel="stylesheet" href="../../css/main.css">
   <style>
     input[type=checkbox] {
       opacity:0;
diff --git a/apps/custom/custom.html b/apps/custom/custom.html
index 307f2fd2f60..45ff9c1a5a1 100644
--- a/apps/custom/custom.html
+++ b/apps/custom/custom.html
@@ -2,6 +2,7 @@
 
 <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/lint/lint.min.css">
 </head>
diff --git a/apps/espruinoctrl/custom.html b/apps/espruinoctrl/custom.html
index 27ef1eb53f5..257131fc789 100644
--- a/apps/espruinoctrl/custom.html
+++ b/apps/espruinoctrl/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
     <link rel="stylesheet" href="../../css/spectre-exp.min.css">
     <link rel="stylesheet" href="../../css/spectre-icons.min.css">
     <style>
diff --git a/apps/espruinoprog/custom.html b/apps/espruinoprog/custom.html
index c6c51ca3e22..6f90aee3137 100644
--- a/apps/espruinoprog/custom.html
+++ b/apps/espruinoprog/custom.html
@@ -2,6 +2,7 @@
 
 <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/lint/lint.min.css">
 </head>
diff --git a/apps/fontclock/custom.html b/apps/fontclock/custom.html
index 6a013a00337..33cdeb64899 100644
--- a/apps/fontclock/custom.html
+++ b/apps/fontclock/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
       
diff --git a/apps/fwupdate/custom.html b/apps/fwupdate/custom.html
index d012fa2fafa..4319e2b5608 100644
--- a/apps/fwupdate/custom.html
+++ b/apps/fwupdate/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
     <p>This tool allows you to update the firmware on <a href="https://www.espruino.com/Bangle.js2" target="_blank">Bangle.js 2</a> devices
diff --git a/apps/golfview/custom.html b/apps/golfview/custom.html
index f80e8dee519..7e857a668a5 100644
--- a/apps/golfview/custom.html
+++ b/apps/golfview/custom.html
@@ -2,6 +2,7 @@
 
 <head>
   <link rel="stylesheet" href="../../css/spectre.min.css">
+  <link rel="stylesheet" href="../../css/main.css">
   <script src="https://cdn.jsdelivr.net/gh/mourner/simplify-js@1.2.4/simplify.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"
     integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
diff --git a/apps/hasensors/custom.html b/apps/hasensors/custom.html
index 265f80f4674..1c2d298fa1a 100644
--- a/apps/hasensors/custom.html
+++ b/apps/hasensors/custom.html
@@ -1,6 +1,7 @@
 <html lang="en">
 <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
     <title>Home Assistant Sensors configuration</title>
     <style>
         label {
diff --git a/apps/heatsuite/custom.html b/apps/heatsuite/custom.html
index 5017913de36..75526fcd220 100644
--- a/apps/heatsuite/custom.html
+++ b/apps/heatsuite/custom.html
@@ -2,6 +2,7 @@
 
 <head>
   <link rel="stylesheet" href="../../css/spectre.min.css">
+  <link rel="stylesheet" href="../../css/main.css">
   <link rel="stylesheet" href="../../css/spectre-icons.min.css">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
   <style>
diff --git a/apps/hrmaccevents/custom.html b/apps/hrmaccevents/custom.html
index c6776cb7109..cb9f5fcd082 100644
--- a/apps/hrmaccevents/custom.html
+++ b/apps/hrmaccevents/custom.html
@@ -2,6 +2,7 @@
  <head>
   <title>Bangle.js Accelerometer streaming</title>
   <link rel="stylesheet" href="../../css/spectre.min.css">
+  <link rel="stylesheet" href="../../css/main.css">
  </head>
  <body>
 <script src="../../core/lib/customize.js"></script>
diff --git a/apps/hworldclock/custom.html b/apps/hworldclock/custom.html
index 3e6d0b90132..9961032e017 100644
--- a/apps/hworldclock/custom.html
+++ b/apps/hworldclock/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
       
diff --git a/apps/imageclock/custom.html b/apps/imageclock/custom.html
index 784e6cbddc2..661d6e6e47a 100644
--- a/apps/imageclock/custom.html
+++ b/apps/imageclock/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
 
diff --git a/apps/imgclock/custom.html b/apps/imgclock/custom.html
index 23d73bb417d..6436ab6863a 100644
--- a/apps/imgclock/custom.html
+++ b/apps/imgclock/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
     <div class="container">
diff --git a/apps/mywelcome/custom.html b/apps/mywelcome/custom.html
index 513ffbb7779..883d1d0c4f7 100644
--- a/apps/mywelcome/custom.html
+++ b/apps/mywelcome/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
 <div class="form-group">
diff --git a/apps/openhaystack/custom.html b/apps/openhaystack/custom.html
index 27353e4cbab..637b5e8dc5b 100644
--- a/apps/openhaystack/custom.html
+++ b/apps/openhaystack/custom.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
     <p>Follow the steps on <a href="https://github.com/seemoo-lab/openhaystack#how-to-use-openhaystack">https://github.com/seemoo-lab/openhaystack</a> to install OpenHaystack and get a unique base64 code</p>
diff --git a/apps/osmpoi/custom.html b/apps/osmpoi/custom.html
index 1625acabe75..ec7721ff410 100644
--- a/apps/osmpoi/custom.html
+++ b/apps/osmpoi/custom.html
@@ -2,6 +2,7 @@
   <head>
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
     <style>
       body {
diff --git a/apps/patriotclk/custom.html b/apps/patriotclk/custom.html
index a6fc36abce7..947aa740e59 100644
--- a/apps/patriotclk/custom.html
+++ b/apps/patriotclk/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
     <style>
       .flag {
         width : 100px;
diff --git a/apps/qrcode/custom.html b/apps/qrcode/custom.html
index 2ff1cd9db9d..bf436213194 100644
--- a/apps/qrcode/custom.html
+++ b/apps/qrcode/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
     <b>Datasource: </b></br>
diff --git a/apps/route/custom.html b/apps/route/custom.html
index 9e721a95b2d..92f9171b95c 100644
--- a/apps/route/custom.html
+++ b/apps/route/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
     <style>li {line-height: 1;}</style>
   </head>
   <body>
diff --git a/apps/schoolCalendar/custom.html b/apps/schoolCalendar/custom.html
index b007d16e34a..c9c9240c58d 100644
--- a/apps/schoolCalendar/custom.html
+++ b/apps/schoolCalendar/custom.html
@@ -1,416 +1,417 @@
-<html>
-  <head>
-    <style>
-      body {
-        padding: 0;
-        margin: 0;
-      }
-      html, body, #map {
-        height: 100%;
-        width: 100%;
-      }
-      #controls {
-        padding: 10px;
-        margin: 10px;
-        border: 1px solid black;
-        position:absolute;
-        right:0px;bottom:0px;
-        background-color: rgb(255, 255, 255);
-        z-index: 100;
-      }
-    </style>
-     <link href='fullcalendar/main.css' rel='stylesheet' />
-     <link rel="stylesheet" href="../../css/spectre.min.css">
-  </head>
-  <body>
-    <div>
-      <p>Create your events on the week shown. Keep in note that your events repeat weekly.</p>
-      <p>One you have created your events, Click <button id="upload" class="btn btn-primary">Upload</button>.</p>
-      <p>All day events are not supported. A feature that lets you get the calendar from your watch will be added in a future update.</p>
-    </div>
-    
-    <script src='fullcalendar/main.js'></script>
-    <script src="../../core/lib/customize.js"></script>
-
-    <script>
-      var calendar;
-      document.addEventListener('DOMContentLoaded', function() {
-        var calendarEl = document.getElementById('calendar');
-        calendar = new FullCalendar.Calendar(calendarEl, {
-          initialView: 'timeGridWeek',
-          headerToolbar: {
-            left: '',
-            center: 'title',
-            right: 'timeGridWeek,listWeek'
-          },
-        navLinks: true, // can click day/week names to navigate views
-        editable: true,
-        selectable: true,
-        selectMirror: true,
-        nowIndicator: true,
-        editable: true,
-        height: 600,
-        initialDate: '2018-06-03', // will be parsed as local
-        select: function(arg) {
-          var title = prompt('Event Title:');
-          if (title) {
-            calendar.addEvent({
-              title: title,
-              start: arg.start,
-              end: arg.end,
-              allDay: arg.allDay
-            })
-          }
-          calendar.unselect()
-         
-        },
-        eventClick: function(arg) {
-          if (confirm('Are you sure you want to delete this event?')) {
-            arg.event.remove()
-          }
-        },
-        });
-        calendar.render();
-      });
-      
-        // When the 'upload' button is clicked...
-        document.getElementById("upload").addEventListener("click", function () {
-            //Cacultate data:
-            var calendarEvents = calendar.getEvents();
-            let schedule = []
-            //--------------------
-            for(i=0;i<calendarEvents.length;i++){
-              var calendarEntry = {}
-              calendarEntry['cn'] = calendarEvents[i].title;
-              calendarEntry['dow'] = calendarEvents[i].start.getDate()-3;
-              calendarEntry['sh'] = calendarEvents[i].start.getHours();
-              calendarEntry['sm'] = calendarEvents[i].start.getMinutes();
-              calendarEntry['eh'] = calendarEvents[i].end.getHours();
-              calendarEntry['em'] = calendarEvents[i].end.getMinutes();
-              schedule.push(calendarEntry)
-            }
-            // build the app's text using a templated String
-            var app = `
-require("Font8x12").add(Graphics);
-require("Font7x11Numeric7Seg", 2).add(Graphics);
-var file = require("Storage").open("calendarItems.csv","w");
-let nIntervId;
-function redrawScreen() {
-  layout.render(layout.background);
-  layout.render(layout.buttons);
-  draw();
-}
-function updateDay(ffunction,day){
-  if(ffunction == 1){
-    switch (day) {
-    case 0:
-      return "Sunday";
-    case 1:
-      day = "Monday";
-      break;
-    case 2:
-      day = "Tuesday";
-      break;
-    case 3:
-      day = "Wednesday";
-      break;
-    case 4:
-      day = "Thursday";
-      break;
-    case 5:
-      day = "Friday";
-      break;
-    case 6:
-      day = "Saturday";
-    }
-    return day;
-  }else if(ffunction == 2){
-    switch (day) {
-    case 0:
-      return "Sun";
-    case 1:
-      day = "Mon";
-      break;
-    case 2:
-      day = "Tue";
-      break;
-    case 3:
-      day = "Wed";
-      break;
-    case 4:
-      day = "Thu";
-      break;
-    case 5:
-      day = "Fri";
-      break;
-    case 6:
-      day = "Sat";
-    }
-    return day;
-  }else if(ffunction == 3){
-    switch (day) {
-    case 0:
-      return "S";
-    case 1:
-      day = "M";
-      break;
-    case 2:
-      day = "T";
-      break;
-    case 3:
-      day = "W";
-      break;
-    case 4:
-      day = "R";
-      break;
-    case 5:
-      day = "F";
-      break;
-    case 6:
-      day = "S";
-    }
-    return day;
-  }
-}
-function getScheduleTable() {
-  let schedule = ${JSON.stringify(schedule)};
-  logDebug(JSON.stringify(schedule));
-  return schedule;
-}
-
-function findNextScheduleIndex() {
-  var schedule = getScheduleTable();
-  var currentDate = new Date();
-  var minuteOfWeek = (currentDate.getDay()*3600)+(currentDate.getHours()*60)+currentDate.getMinutes();
-  //var minuteOfWeek = (4*3600)+(16*60)+0;
-  var currentPosition;
-  for(currentPosition = 0;currentPosition < schedule.length; currentPosition++){
-    var scheduleItemStartMinuteOfWeek = schedule[currentPosition].dow*3600 + schedule[currentPosition].eh*60+schedule[currentPosition].em;
-    if(scheduleItemStartMinuteOfWeek > minuteOfWeek) {
-      return currentPosition;
-    }
-  }
-  return 0;
-}
-function getUpArrow() {return require("heatshrink").decompress(atob("hkOyANKmv9AIIjRCoYZRlvdAI8U3YVK3oBJC4Mc7YVRC4sc7gVCzoBNC4oZDGowXGR58lvoBFC9FcAIoXongBFC58dngBFC6EcAIoPHA"));}
-function getDownArrow() {return require("heatshrink").decompress(atob("hkOyALImv9AIojPmvdAIoXPlvdAIoXQ3oBFC9GdAIoXnkt9AIoPPAI8U3cc7cc7gBBDIVcAJYXFGYwXOLpU8AI4XBO5sdjgBFR54ZFBpIA=="));}
-function getMenuIcon() {return require("heatshrink").decompress(atob("iEQyBC/AEU+rwBEn02js17st3stvklrkljkc/cc3cUzYBBD5AdUD4oA/P/4A/P/4A/ADoA=="));}
-function getDotIcon() {return require("heatshrink").decompress(atob("iEQyBC/AA0t3oBBA4ndAIIPGA4gAFkt9lt9AYIHEzoBBBIwRED41cks8AYIJGA44RGP8xtGP44RJBYh1CAIIHHBJJ/KroBBPoqBFB4YRDAA8dngHHBJKdq3oBDBI4RNP4l9AIYHHBJJBJks8AIIHTAH4ABA="));}
-var currentPositionTable = 0;
-var numberOfItemsShown = 8;
-//Table Positions:
-var rectStart = 45;
-var rectEnd = 65;
-var rectStartX = 10;
-var rectEndX = 210;
-//Scences:
-LIST = 1;
-INFORMATION = 2;
-currentStage = LIST;
-function splitter(str, l){
-    var strs = [];
-    while(str.length > l){
-        var pos = str.substring(0, l).lastIndexOf(' ');
-        pos = pos <= 0 ? l : pos;
-        strs.push(str.substring(0, pos));
-        var i = str.indexOf(' ', pos)+1;
-        if(i < pos || i > pos+l)
-            i = pos;
-        str = str.substring(i);
-    }
-    strs.push(str);
-    return strs;
-}
-function updateMinutesToCurrentTime(currentMinuteFunction) {
-  if (currentMinuteFunction<10){
-   currentMinuteUpdatedFunction = "0"+currentMinuteFunction;
-  }else{
-   currentMinuteUpdatedFunction = currentMinuteFunction;
-  }
-  return currentMinuteUpdatedFunction;
-}
-function renderBackground(l) {
-  g.clearRect(0,0,240,20);
-  g.drawImage(getBackgroundImage(),110,130,{scale:9,rotate:0});
-}
-function renderTable(l) {
-  var foundNumber = findNextScheduleIndex();
-  var yellowIndex = 3;
-  if (foundNumber < 3) { yellowIndex = foundNumber; }
-  for(var x = 0;x<=numberOfItemsShown;x++){
-    g.setColor(255,255,255);
-    g.drawRect(rectStartX,rectStart+(x*20),rectEndX,rectEnd+(20*x));
-  }
-  g.setColor(255,205,0);
-  g.drawRect(rectStartX,rectStart+(yellowIndex*20),rectEndX,rectEnd+(20*yellowIndex));
-  g.setColor(255,0,0);
-  g.drawRect(rectStartX,rectStart+(currentPositionTable*20),rectEndX,rectEnd+(20*currentPositionTable));
-}
-function renderTableText(l) {
-  var foundSchedule = getScheduleTable();
-  var foundNumber = findNextScheduleIndex();
-  var startNumber = foundNumber - 2;
-  if (startNumber < 0) { startNumber = 0; }
-  var endNumber = startNumber + 8 - (foundNumber - startNumber);
-  if (endNumber > foundSchedule.length-1) { endNumber = foundSchedule.length-1; }
-  var scheduleHourUpdated;
-  var scheduleMinuteUpdated;
-  for(var currentNumber = startNumber; currentNumber<=endNumber; currentNumber++){
-    scheduleMinuteUpdatedStart = updateMinutesToCurrentTime(foundSchedule[currentNumber].sm);
-    scheduleHourUpdatedStart = foundSchedule[currentNumber].sh;
-    scheduleMinuteUpdatedEnd = updateMinutesToCurrentTime(foundSchedule[currentNumber].em);
-    scheduleHourUpdatedEnd = foundSchedule[currentNumber].eh;
-    scheduleDecriptionUpdated = foundSchedule[currentNumber].cn.substring(0, 20);
-    if(foundSchedule[currentNumber].cn.length >= 15){
-      scheduleDecriptionUpdated = foundSchedule[currentNumber].cn.substring(0, 20)+"...";
-    }
-    schduleDay = updateDay(3,foundSchedule[currentNumber].dow);
-    g.setFont("8x12");
-    g.drawString(scheduleHourUpdatedStart+":"+scheduleMinuteUpdatedStart+"-"+scheduleHourUpdatedEnd+":"+scheduleMinuteUpdatedEnd+" "+schduleDay+" "+scheduleDecriptionUpdated,13,50+(currentNumber*20));
-  }
-}
-function buttonsF(l){
-  if(currentStage == LIST){
-    g.drawImage(getDotIcon(),223.5,115);
-  }else{
-     g.drawImage(getMenuIcon(),223.5,115);
-  }
-  g.drawImage(getUpArrow(),225,30);
-  g.drawImage(getDownArrow(),225,215);
-}
-function draw() {
-  var currentDate = new Date();
-  var currentDayOfWeek = currentDate.getDay();
-  var currentHour = currentDate.getHours();
-  var currentMinute = currentDate.getMinutes();
-  var currentMinuteUpdated = updateMinutesToCurrentTime(currentMinute);
-  if (layout) {
-    if(currentStage == LIST){
-      layout.time.label = currentHour+":"+currentMinuteUpdated;
-      layout.time.x = 147;
-      layout.time.y = 10;
-      layout.render(layout.table);
-      layout.render(layout.tableText);
-      logDebug("Rendered"+currentPositionTable);
-    }else{
-      layout.time.label = currentHour+":"+currentMinuteUpdated;
-      layout.time.x = 147;
-      layout.time.y = 10;
-      layout.render(layout.info);
-      logDebug("Rendered"+currentPositionTable);
-    }
-    g.clearRect(150,0,220,35);
-    layout.render(layout.time);
-  }
-}
-function RedRectDown() {
-  if(currentPositionTable > 0){
-    currentPositionTable -= 1;
-    if(currentStage == INFORMATION){
-      redrawScreen();
-    }else{
-      draw();
-    }
-  }
-}
-function RedRectUp() {
-  if(currentPositionTable < numberOfItemsShown){
-    currentPositionTable += 1;
-    if(currentStage == INFORMATION){
-      redrawScreen();
-    }else{
-      draw();
-    }
-  }
-}
-function renderMiniBackground(l){
-  for(var i = 233;i<=240;i++){
-    g.drawImage(getBackgroundImage(),i,123,{scale:10,rotate:0});
-  }
-}
-function renderLoading(l){
-  g.setFont("8x12");
-  g.drawString("Loading...",240/2-20,240/2-20);
-}
-function renderInformation(l){
-  var foundNumber = findNextScheduleIndex();
-  var foundSchedule = getScheduleTable();
-  var startNumber = foundNumber - 2;
-  if (startNumber < 0) { startNumber = 0; }
-  if ((startNumber+currentPositionTable) <= foundSchedule.length-1) {
-    scheduleMinuteUpdatedStart = updateMinutesToCurrentTime(foundSchedule[foundNumber].sm);
-    scheduleHourUpdatedStart = foundSchedule[foundNumber].sh;
-    scheduleMinuteUpdatedEnd = updateMinutesToCurrentTime(foundSchedule[foundNumber].em);
-    scheduleHourUpdatedEnd = foundSchedule[foundNumber].eh;
-    scheduleDay = updateDay(1,foundSchedule[(startNumber+currentPositionTable)].dow);
-    g.setColor(255,255,255);
-    g.setFont("8x12",2);
-    var splitClassNames = splitter(foundSchedule[(startNumber+currentPositionTable)].cn, 15);
-    var currentY = 5;
-    for (var j=0; j < splitClassNames.length; j++) {
-      g.drawString(splitClassNames[j],13,currentY+50);
-      currentY = currentY + 25;
-    }
-    g.setFont("8x12");
-    g.drawString(schduleDay,13,currentY+50);
-    g.drawString(scheduleHourUpdatedStart+":"+scheduleMinuteUpdatedStart+"-"+scheduleHourUpdatedEnd+":"+scheduleMinuteUpdatedEnd,13,currentY+15+50);
-  }
-}
-var Layout = require("Layout");
-var layout = new Layout(
-  {type:"h", c: [
-    {type:"custom", render:renderTableText, id:"tableText"},
-    {type:"custom", render:buttonsF, id:"buttons"},
-    {type:"custom", render:renderBackground, id:"background"},
-    {type:"custom", render:renderTable, id:"table"},
-    {type:"custom", render:renderMiniBackground, id:"miniBackground"},
-    {type:"custom", render:renderLoading, id:"loading"},
-    {type:"custom", render:renderInformation, id:"info"},
-    {type:"txt", font:"7x11Numeric7Seg:2", label:"00:00", id:"time"},
-  ]},
-  {type:"v", c:[
-  ]},
-  {btns:[
-    {label:"", cb: RedRectUp()},
-    {label:"", cb: l=>print("Two")},
-    {label:"", cb: RedRectDown()}
-]});
-function getBackgroundImage() {return require("heatshrink").decompress(atob("j0ZyEKIf4A4gIB6gQB6gYB6ggB6goB6gwB6g4B6hAABAYIBHBZIVLAK8IhIBXgAThhQB6hYB6hgB6hoB6hwB6h4B6iAB6iIB6iQBHiAJOB54XSiYB6igB6ioB6iwB6i4B5A="));}
-function logDebug(message) {console.log(message);}
-function changeScene(){
-  layout.render(layout.buttons);
-  if(currentStage == INFORMATION){
-    currentStage = LIST;
-    nIntervId = setInterval(redrawScreen, 100000);
-  }else if(currentStage == LIST){
-    currentStage = INFORMATION;
-    clearInterval();
-  }
-  layout.render(layout.background);
-  layout.render(layout.buttons);
-  draw();
-}
-// timeout used to update every minute
-var drawTimeout;
-setInterval(draw, 15000);
-setWatch(RedRectUp, BTN3, { repeat:true, edge:'rising', debounce : 50 });
-setWatch(RedRectDown, BTN1, { repeat:true, edge:'rising', debounce : 50 });
-setWatch(changeScene, BTN2, { repeat:true, edge:'rising', debounce : 50 });
-layout.update();
-layout.render(layout.loading);
-layout.render(layout.background);
-layout.render(layout.buttons);
-draw();
-file.write(JSON.stringify(schedule));
-`;
-            // send finished app (in addition to contents of app.json)
-            sendCustomizedApp({
-                storage: [
-                    { name: "schoolCalendar.app.js", url: "app.js", content: app },
-                ]
-            });
-        });
-    </script>
-    <div id='calendar'></div>
-  </body>
-</html>
+<html>
+  <head>
+    <style>
+      body {
+        padding: 0;
+        margin: 0;
+      }
+      html, body, #map {
+        height: 100%;
+        width: 100%;
+      }
+      #controls {
+        padding: 10px;
+        margin: 10px;
+        border: 1px solid black;
+        position:absolute;
+        right:0px;bottom:0px;
+        background-color: rgb(255, 255, 255);
+        z-index: 100;
+      }
+    </style>
+     <link href='fullcalendar/main.css' rel='stylesheet' />
+     <link rel="stylesheet" href="../../css/spectre.min.css">
+     <link rel="stylesheet" href="../../css/main.css">
+  </head>
+  <body>
+    <div>
+      <p>Create your events on the week shown. Keep in note that your events repeat weekly.</p>
+      <p>One you have created your events, Click <button id="upload" class="btn btn-primary">Upload</button>.</p>
+      <p>All day events are not supported. A feature that lets you get the calendar from your watch will be added in a future update.</p>
+    </div>
+    
+    <script src='fullcalendar/main.js'></script>
+    <script src="../../core/lib/customize.js"></script>
+
+    <script>
+      var calendar;
+      document.addEventListener('DOMContentLoaded', function() {
+        var calendarEl = document.getElementById('calendar');
+        calendar = new FullCalendar.Calendar(calendarEl, {
+          initialView: 'timeGridWeek',
+          headerToolbar: {
+            left: '',
+            center: 'title',
+            right: 'timeGridWeek,listWeek'
+          },
+        navLinks: true, // can click day/week names to navigate views
+        editable: true,
+        selectable: true,
+        selectMirror: true,
+        nowIndicator: true,
+        editable: true,
+        height: 600,
+        initialDate: '2018-06-03', // will be parsed as local
+        select: function(arg) {
+          var title = prompt('Event Title:');
+          if (title) {
+            calendar.addEvent({
+              title: title,
+              start: arg.start,
+              end: arg.end,
+              allDay: arg.allDay
+            })
+          }
+          calendar.unselect()
+         
+        },
+        eventClick: function(arg) {
+          if (confirm('Are you sure you want to delete this event?')) {
+            arg.event.remove()
+          }
+        },
+        });
+        calendar.render();
+      });
+      
+        // When the 'upload' button is clicked...
+        document.getElementById("upload").addEventListener("click", function () {
+            //Cacultate data:
+            var calendarEvents = calendar.getEvents();
+            let schedule = []
+            //--------------------
+            for(i=0;i<calendarEvents.length;i++){
+              var calendarEntry = {}
+              calendarEntry['cn'] = calendarEvents[i].title;
+              calendarEntry['dow'] = calendarEvents[i].start.getDate()-3;
+              calendarEntry['sh'] = calendarEvents[i].start.getHours();
+              calendarEntry['sm'] = calendarEvents[i].start.getMinutes();
+              calendarEntry['eh'] = calendarEvents[i].end.getHours();
+              calendarEntry['em'] = calendarEvents[i].end.getMinutes();
+              schedule.push(calendarEntry)
+            }
+            // build the app's text using a templated String
+            var app = `
+require("Font8x12").add(Graphics);
+require("Font7x11Numeric7Seg", 2).add(Graphics);
+var file = require("Storage").open("calendarItems.csv","w");
+let nIntervId;
+function redrawScreen() {
+  layout.render(layout.background);
+  layout.render(layout.buttons);
+  draw();
+}
+function updateDay(ffunction,day){
+  if(ffunction == 1){
+    switch (day) {
+    case 0:
+      return "Sunday";
+    case 1:
+      day = "Monday";
+      break;
+    case 2:
+      day = "Tuesday";
+      break;
+    case 3:
+      day = "Wednesday";
+      break;
+    case 4:
+      day = "Thursday";
+      break;
+    case 5:
+      day = "Friday";
+      break;
+    case 6:
+      day = "Saturday";
+    }
+    return day;
+  }else if(ffunction == 2){
+    switch (day) {
+    case 0:
+      return "Sun";
+    case 1:
+      day = "Mon";
+      break;
+    case 2:
+      day = "Tue";
+      break;
+    case 3:
+      day = "Wed";
+      break;
+    case 4:
+      day = "Thu";
+      break;
+    case 5:
+      day = "Fri";
+      break;
+    case 6:
+      day = "Sat";
+    }
+    return day;
+  }else if(ffunction == 3){
+    switch (day) {
+    case 0:
+      return "S";
+    case 1:
+      day = "M";
+      break;
+    case 2:
+      day = "T";
+      break;
+    case 3:
+      day = "W";
+      break;
+    case 4:
+      day = "R";
+      break;
+    case 5:
+      day = "F";
+      break;
+    case 6:
+      day = "S";
+    }
+    return day;
+  }
+}
+function getScheduleTable() {
+  let schedule = ${JSON.stringify(schedule)};
+  logDebug(JSON.stringify(schedule));
+  return schedule;
+}
+
+function findNextScheduleIndex() {
+  var schedule = getScheduleTable();
+  var currentDate = new Date();
+  var minuteOfWeek = (currentDate.getDay()*3600)+(currentDate.getHours()*60)+currentDate.getMinutes();
+  //var minuteOfWeek = (4*3600)+(16*60)+0;
+  var currentPosition;
+  for(currentPosition = 0;currentPosition < schedule.length; currentPosition++){
+    var scheduleItemStartMinuteOfWeek = schedule[currentPosition].dow*3600 + schedule[currentPosition].eh*60+schedule[currentPosition].em;
+    if(scheduleItemStartMinuteOfWeek > minuteOfWeek) {
+      return currentPosition;
+    }
+  }
+  return 0;
+}
+function getUpArrow() {return require("heatshrink").decompress(atob("hkOyANKmv9AIIjRCoYZRlvdAI8U3YVK3oBJC4Mc7YVRC4sc7gVCzoBNC4oZDGowXGR58lvoBFC9FcAIoXongBFC58dngBFC6EcAIoPHA"));}
+function getDownArrow() {return require("heatshrink").decompress(atob("hkOyALImv9AIojPmvdAIoXPlvdAIoXQ3oBFC9GdAIoXnkt9AIoPPAI8U3cc7cc7gBBDIVcAJYXFGYwXOLpU8AI4XBO5sdjgBFR54ZFBpIA=="));}
+function getMenuIcon() {return require("heatshrink").decompress(atob("iEQyBC/AEU+rwBEn02js17st3stvklrkljkc/cc3cUzYBBD5AdUD4oA/P/4A/P/4A/ADoA=="));}
+function getDotIcon() {return require("heatshrink").decompress(atob("iEQyBC/AA0t3oBBA4ndAIIPGA4gAFkt9lt9AYIHEzoBBBIwRED41cks8AYIJGA44RGP8xtGP44RJBYh1CAIIHHBJJ/KroBBPoqBFB4YRDAA8dngHHBJKdq3oBDBI4RNP4l9AIYHHBJJBJks8AIIHTAH4ABA="));}
+var currentPositionTable = 0;
+var numberOfItemsShown = 8;
+//Table Positions:
+var rectStart = 45;
+var rectEnd = 65;
+var rectStartX = 10;
+var rectEndX = 210;
+//Scences:
+LIST = 1;
+INFORMATION = 2;
+currentStage = LIST;
+function splitter(str, l){
+    var strs = [];
+    while(str.length > l){
+        var pos = str.substring(0, l).lastIndexOf(' ');
+        pos = pos <= 0 ? l : pos;
+        strs.push(str.substring(0, pos));
+        var i = str.indexOf(' ', pos)+1;
+        if(i < pos || i > pos+l)
+            i = pos;
+        str = str.substring(i);
+    }
+    strs.push(str);
+    return strs;
+}
+function updateMinutesToCurrentTime(currentMinuteFunction) {
+  if (currentMinuteFunction<10){
+   currentMinuteUpdatedFunction = "0"+currentMinuteFunction;
+  }else{
+   currentMinuteUpdatedFunction = currentMinuteFunction;
+  }
+  return currentMinuteUpdatedFunction;
+}
+function renderBackground(l) {
+  g.clearRect(0,0,240,20);
+  g.drawImage(getBackgroundImage(),110,130,{scale:9,rotate:0});
+}
+function renderTable(l) {
+  var foundNumber = findNextScheduleIndex();
+  var yellowIndex = 3;
+  if (foundNumber < 3) { yellowIndex = foundNumber; }
+  for(var x = 0;x<=numberOfItemsShown;x++){
+    g.setColor(255,255,255);
+    g.drawRect(rectStartX,rectStart+(x*20),rectEndX,rectEnd+(20*x));
+  }
+  g.setColor(255,205,0);
+  g.drawRect(rectStartX,rectStart+(yellowIndex*20),rectEndX,rectEnd+(20*yellowIndex));
+  g.setColor(255,0,0);
+  g.drawRect(rectStartX,rectStart+(currentPositionTable*20),rectEndX,rectEnd+(20*currentPositionTable));
+}
+function renderTableText(l) {
+  var foundSchedule = getScheduleTable();
+  var foundNumber = findNextScheduleIndex();
+  var startNumber = foundNumber - 2;
+  if (startNumber < 0) { startNumber = 0; }
+  var endNumber = startNumber + 8 - (foundNumber - startNumber);
+  if (endNumber > foundSchedule.length-1) { endNumber = foundSchedule.length-1; }
+  var scheduleHourUpdated;
+  var scheduleMinuteUpdated;
+  for(var currentNumber = startNumber; currentNumber<=endNumber; currentNumber++){
+    scheduleMinuteUpdatedStart = updateMinutesToCurrentTime(foundSchedule[currentNumber].sm);
+    scheduleHourUpdatedStart = foundSchedule[currentNumber].sh;
+    scheduleMinuteUpdatedEnd = updateMinutesToCurrentTime(foundSchedule[currentNumber].em);
+    scheduleHourUpdatedEnd = foundSchedule[currentNumber].eh;
+    scheduleDecriptionUpdated = foundSchedule[currentNumber].cn.substring(0, 20);
+    if(foundSchedule[currentNumber].cn.length >= 15){
+      scheduleDecriptionUpdated = foundSchedule[currentNumber].cn.substring(0, 20)+"...";
+    }
+    schduleDay = updateDay(3,foundSchedule[currentNumber].dow);
+    g.setFont("8x12");
+    g.drawString(scheduleHourUpdatedStart+":"+scheduleMinuteUpdatedStart+"-"+scheduleHourUpdatedEnd+":"+scheduleMinuteUpdatedEnd+" "+schduleDay+" "+scheduleDecriptionUpdated,13,50+(currentNumber*20));
+  }
+}
+function buttonsF(l){
+  if(currentStage == LIST){
+    g.drawImage(getDotIcon(),223.5,115);
+  }else{
+     g.drawImage(getMenuIcon(),223.5,115);
+  }
+  g.drawImage(getUpArrow(),225,30);
+  g.drawImage(getDownArrow(),225,215);
+}
+function draw() {
+  var currentDate = new Date();
+  var currentDayOfWeek = currentDate.getDay();
+  var currentHour = currentDate.getHours();
+  var currentMinute = currentDate.getMinutes();
+  var currentMinuteUpdated = updateMinutesToCurrentTime(currentMinute);
+  if (layout) {
+    if(currentStage == LIST){
+      layout.time.label = currentHour+":"+currentMinuteUpdated;
+      layout.time.x = 147;
+      layout.time.y = 10;
+      layout.render(layout.table);
+      layout.render(layout.tableText);
+      logDebug("Rendered"+currentPositionTable);
+    }else{
+      layout.time.label = currentHour+":"+currentMinuteUpdated;
+      layout.time.x = 147;
+      layout.time.y = 10;
+      layout.render(layout.info);
+      logDebug("Rendered"+currentPositionTable);
+    }
+    g.clearRect(150,0,220,35);
+    layout.render(layout.time);
+  }
+}
+function RedRectDown() {
+  if(currentPositionTable > 0){
+    currentPositionTable -= 1;
+    if(currentStage == INFORMATION){
+      redrawScreen();
+    }else{
+      draw();
+    }
+  }
+}
+function RedRectUp() {
+  if(currentPositionTable < numberOfItemsShown){
+    currentPositionTable += 1;
+    if(currentStage == INFORMATION){
+      redrawScreen();
+    }else{
+      draw();
+    }
+  }
+}
+function renderMiniBackground(l){
+  for(var i = 233;i<=240;i++){
+    g.drawImage(getBackgroundImage(),i,123,{scale:10,rotate:0});
+  }
+}
+function renderLoading(l){
+  g.setFont("8x12");
+  g.drawString("Loading...",240/2-20,240/2-20);
+}
+function renderInformation(l){
+  var foundNumber = findNextScheduleIndex();
+  var foundSchedule = getScheduleTable();
+  var startNumber = foundNumber - 2;
+  if (startNumber < 0) { startNumber = 0; }
+  if ((startNumber+currentPositionTable) <= foundSchedule.length-1) {
+    scheduleMinuteUpdatedStart = updateMinutesToCurrentTime(foundSchedule[foundNumber].sm);
+    scheduleHourUpdatedStart = foundSchedule[foundNumber].sh;
+    scheduleMinuteUpdatedEnd = updateMinutesToCurrentTime(foundSchedule[foundNumber].em);
+    scheduleHourUpdatedEnd = foundSchedule[foundNumber].eh;
+    scheduleDay = updateDay(1,foundSchedule[(startNumber+currentPositionTable)].dow);
+    g.setColor(255,255,255);
+    g.setFont("8x12",2);
+    var splitClassNames = splitter(foundSchedule[(startNumber+currentPositionTable)].cn, 15);
+    var currentY = 5;
+    for (var j=0; j < splitClassNames.length; j++) {
+      g.drawString(splitClassNames[j],13,currentY+50);
+      currentY = currentY + 25;
+    }
+    g.setFont("8x12");
+    g.drawString(schduleDay,13,currentY+50);
+    g.drawString(scheduleHourUpdatedStart+":"+scheduleMinuteUpdatedStart+"-"+scheduleHourUpdatedEnd+":"+scheduleMinuteUpdatedEnd,13,currentY+15+50);
+  }
+}
+var Layout = require("Layout");
+var layout = new Layout(
+  {type:"h", c: [
+    {type:"custom", render:renderTableText, id:"tableText"},
+    {type:"custom", render:buttonsF, id:"buttons"},
+    {type:"custom", render:renderBackground, id:"background"},
+    {type:"custom", render:renderTable, id:"table"},
+    {type:"custom", render:renderMiniBackground, id:"miniBackground"},
+    {type:"custom", render:renderLoading, id:"loading"},
+    {type:"custom", render:renderInformation, id:"info"},
+    {type:"txt", font:"7x11Numeric7Seg:2", label:"00:00", id:"time"},
+  ]},
+  {type:"v", c:[
+  ]},
+  {btns:[
+    {label:"", cb: RedRectUp()},
+    {label:"", cb: l=>print("Two")},
+    {label:"", cb: RedRectDown()}
+]});
+function getBackgroundImage() {return require("heatshrink").decompress(atob("j0ZyEKIf4A4gIB6gQB6gYB6ggB6goB6gwB6g4B6hAABAYIBHBZIVLAK8IhIBXgAThhQB6hYB6hgB6hoB6hwB6h4B6iAB6iIB6iQBHiAJOB54XSiYB6igB6ioB6iwB6i4B5A="));}
+function logDebug(message) {console.log(message);}
+function changeScene(){
+  layout.render(layout.buttons);
+  if(currentStage == INFORMATION){
+    currentStage = LIST;
+    nIntervId = setInterval(redrawScreen, 100000);
+  }else if(currentStage == LIST){
+    currentStage = INFORMATION;
+    clearInterval();
+  }
+  layout.render(layout.background);
+  layout.render(layout.buttons);
+  draw();
+}
+// timeout used to update every minute
+var drawTimeout;
+setInterval(draw, 15000);
+setWatch(RedRectUp, BTN3, { repeat:true, edge:'rising', debounce : 50 });
+setWatch(RedRectDown, BTN1, { repeat:true, edge:'rising', debounce : 50 });
+setWatch(changeScene, BTN2, { repeat:true, edge:'rising', debounce : 50 });
+layout.update();
+layout.render(layout.loading);
+layout.render(layout.background);
+layout.render(layout.buttons);
+draw();
+file.write(JSON.stringify(schedule));
+`;
+            // send finished app (in addition to contents of app.json)
+            sendCustomizedApp({
+                storage: [
+                    { name: "schoolCalendar.app.js", url: "app.js", content: app },
+                ]
+            });
+        });
+    </script>
+    <div id='calendar'></div>
+  </body>
+</html>
diff --git a/apps/solarclock/custom.html b/apps/solarclock/custom.html
index 25fd52d7b33..ea3d3a8b65e 100644
--- a/apps/solarclock/custom.html
+++ b/apps/solarclock/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
       
diff --git a/apps/storageanalyzer/custom.html b/apps/storageanalyzer/custom.html
index 2adefd29a60..ca81ac57cf2 100644
--- a/apps/storageanalyzer/custom.html
+++ b/apps/storageanalyzer/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
     <script src="../../core/lib/customize.js"></script>
diff --git a/apps/worldclkinfo/custom.html b/apps/worldclkinfo/custom.html
index 8989cd586f2..95224110216 100644
--- a/apps/worldclkinfo/custom.html
+++ b/apps/worldclkinfo/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
     <style>
       input.offset {
           width: 80px;
diff --git a/apps/worldclock/custom.html b/apps/worldclock/custom.html
index a857b2f726a..c3c28d21db8 100644
--- a/apps/worldclock/custom.html
+++ b/apps/worldclock/custom.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="../../css/spectre.min.css">
+    <link rel="stylesheet" href="../../css/main.css">
   </head>
   <body>
       
diff --git a/bin/add-main-css-to-custom-html.py b/bin/add-main-css-to-custom-html.py
new file mode 100644
index 00000000000..3a942c9216b
--- /dev/null
+++ b/bin/add-main-css-to-custom-html.py
@@ -0,0 +1,76 @@
+#!/usr/bin/env python3
+
+from __future__ import annotations
+
+import argparse
+from pathlib import Path
+import re
+import sys
+
+
+REPO_ROOT = Path(__file__).resolve().parent.parent
+APPS_DIR = REPO_ROOT / "apps"
+SPECTRE_LINK = '<link rel="stylesheet" href="../../css/spectre.min.css">'
+MAIN_LINK = '<link rel="stylesheet" href="../../css/main.css">'
+
+
+def iter_custom_html_files(base_dir: Path):
+    for path in base_dir.rglob("custom.html"):
+        if path.is_file():
+            yield path
+
+
+def update_file(file_path: Path, dry_run: bool) -> tuple[bool, str | None]:
+    original = file_path.read_text(encoding="utf-8")
+
+    if MAIN_LINK in original:
+        return False, "already has main.css"
+
+    line_ending = "\r\n" if "\r\n" in original else "\n"
+    spectre_pattern = re.compile(
+        rf"^([ \t]*){re.escape(SPECTRE_LINK)}$",
+        re.MULTILINE,
+    )
+    match = spectre_pattern.search(original)
+    if not match:
+        return False, "no matching spectre link"
+
+    updated = spectre_pattern.sub(
+        lambda found: f"{found.group(0)}{line_ending}{found.group(1)}{MAIN_LINK}",
+        original,
+        count=1,
+    )
+
+    if updated == original:
+        return False, "no content change"
+
+    if not dry_run:
+        file_path.write_text(updated, encoding="utf-8")
+
+    return True, None
+
+
+def main(argv: list[str]) -> int:
+    parser = argparse.ArgumentParser(
+        description="Insert main.css after spectre.min.css in app custom.html files."
+    )
+    parser.add_argument("--dry-run", action="store_true", help="Show matches without writing files.")
+    args = parser.parse_args(argv)
+
+    changed_count = 0
+    skipped_count = 0
+
+    for file_path in iter_custom_html_files(APPS_DIR):
+        changed, reason = update_file(file_path, args.dry_run)
+        if changed:
+            changed_count += 1
+            print(f"{'would update' if args.dry_run else 'updated'} {file_path}")
+        else:
+            skipped_count += 1
+
+    print(f"{'Dry run' if args.dry_run else 'Done'}: {changed_count} updated, {skipped_count} skipped")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main(sys.argv[1:]))
\ No newline at end of file
diff --git a/core b/core
index 35ffc4c2a5b..4fb873a3cc3 160000
--- a/core
+++ b/core
@@ -1 +1 @@
-Subproject commit 35ffc4c2a5bdbebf0ddbe0cf7d6a739379a6d235
+Subproject commit 4fb873a3cc37465d255017eca5728de399e8ec52
diff --git a/css/main.css b/css/main.css
index 988275ef4ae..a7d391c8ba2 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,12 +1,17 @@
-/* NAVIGATION BAR AND GENERAL STYLES */
+    /* NAVIGATION BAR AND GENERAL STYLES */
+    :root {
+      color-scheme: light dark; /* Informs the browser the site supports both schemes */
+      --hero-img-filter: invert(0%);
+    }
     body {
-      color: #3c3c3c;
+      background-color: light-dark(rgb(253, 253, 255), rgb(44, 44, 44)); /* Background for iFrames, index.html injects its own background with <style> */
+      color: light-dark(#3c3c3c, #b8b8b8);
       padding-left: 1em;
       padding-right: 1em;
     }
 
     .navbar {
-      background-color: #5755d9;
+      background-color: light-dark(#5755d9, #3a386f);
       padding: 1em 1em 1em 1em;
     }
 
@@ -51,9 +56,11 @@
       border-radius: 1em;
       padding: 0.5em;
       padding-left: 1em;
-      border: solid 1px #dadee4;
+      background-color: light-dark(#fff, #2d2d2d);
+      border: solid 1px light-dark(#dadee4, #3a386f);
       box-shadow: none;
       margin: 0;
+      color: light-dark(#3c3c3c, #cacaca);
     }
 
     .panel-header {
@@ -64,7 +71,7 @@
       border-radius: 1em;
       padding-left: 0rem;
       padding-right: 0rem;
-
+      margin: 0px !important;
       border: none;
     }
 
@@ -89,17 +96,33 @@
 
     .btn {
       border-radius: 0.4em;
+      background-color: light-dark(#ffffff, #232323);
     }
 
     #connectmydevice {
       margin-right: 1.5em;
+      background-color:#fff;
     }
-
+    .card{
+      background-color: light-dark(#ffffff, #2c2c2c);
+      border:light-dark(#d8d8d8, #505050), 1px solid;
+    }
+    .menu{
+      background-color:light-dark(#ffffff, #313131);
+      color: light-dark(#3c3c3c, #cacaca);
+    }
+    
     .btn.input-group-btn {
       border-bottom-right-radius: 1em;
       border-top-right-radius: 1em;
     }
-
+	.btn.btn-clear{
+      color:light-dark(#000000,#FFFFFF);
+    }
+    .form-select{
+      background-color:light-dark(#ffffff, #232323)!important;
+      border-radius:0.4em;
+    }
     .menu-item {
       cursor: pointer;
     }
@@ -114,13 +137,16 @@
     }
 
     .dropdowns-pill {
-      background-color: rgba(87, 85, 217, 0.066);
+      background-color: light-dark(rgba(87, 85, 217, 0.066), rgba(71, 71, 96, 0.293));
       border-radius: 1em;
       padding-left: 1em;
       padding-right: 1em;
 
     }
-
+    .form-select{
+      background-color:light-dark(#ffffff, #232323)!important;
+      border-radius:0.4em;
+    }
     .btn.btn-favourite:focus,
     .btn.btn-favourite:focus-visible,
     .btn-favourite:focus,
@@ -288,10 +314,12 @@
       will-change: transform, width;
     }
 
+    /* Move the indicator to the second tab */
     #tab-navigate:has(li:nth-child(2).active)::after {
       transform: translateX(100%);
     }
 
+    /* Move the indicator to the third tab */
     #tab-navigate:has(li:nth-child(3).active)::after {
       transform: translateX(200%);
     }
@@ -337,9 +365,12 @@
       padding-left: 0.01em;
     }
 
+    .avatar {
+      background-color: transparent!important;
+    }
     .avatar img {
-      border-radius: 5px 5px 5px 5px;
-      background: #fff;
+      background-color: transparent!important;
+      border-radius: 0.3em!important;
     }
 
     #toastcontainer {
@@ -378,11 +409,13 @@
       border-bottom: 1px solid #EEE;
       margin-bottom: 4px;
       min-height: 11em;
+      /* reduced so tiles can be thinner */
     }
 
     .tile-content {
       position: relative;
       overflow-wrap: anywhere;
+      /* stop long text like links pushing the width out too far*/
     }
 
     /* DROPDOWNS */
@@ -426,14 +459,17 @@
     .tile.column.col-6.col-sm-12.col-xs-12.app-tile {
       background-color: rgba(87, 85, 217, 0.025);
       box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.025);
-      border: solid 1.3px #dadee47c;
+      
+      border: solid 1.3px light-dark(#dadee47c,#484848);
       margin: 0;
+      /* spacing handled by container gap */
       padding: 0.9em;
       border-radius: 1em;
       box-sizing: border-box;
+      /* allow tiles to be two columns on wide screens, collapse to one on small screens */
       flex: 1 1 calc(50% - 0.75rem);
       max-width: calc(50% - 0.75rem);
-      min-width: 220px;
+      min-width: 220px; /* ensures tiles wrap down to one column when viewport is too narrow */
     }
 
     .tile.column.col-6.col-sm-12.col-xs-12.app-tile.updateTile {
@@ -443,8 +479,35 @@
 
     .chip {
       border-radius: 0.7em;
+      background-color: light-dark(#EEF0F3,#424242);
+    }
+    code{
+      background-color: light-dark(#fdf2f2,#2f2e2e);
+    }
+    .hero-img {
+      filter: invert(0%);
     }
 
+    html[data-theme="dark"] {
+      --hero-img-filter: invert(100%);
+    }
+    .hero-img {
+      filter: var(--hero-img-filter);
+    }
+    .modal-title{
+      color: light-dark(#000000,#FFFFFF);
+    }
+    .modal-overlay {
+      background: light-dark(#9292928c,#4a4a4ad0)!important;
+      /* Add the blur effect */
+      /* Apply the blur to the backdrop */
+      backdrop-filter: blur(5px);
+      -webkit-backdrop-filter: blur(5px); /* Safari support */
+    }
+    .hero.bg-gray{
+      background-color: light-dark(#F7F7F9,#2C2C2C)!important;
+      border-radius:1em;
+    }
     .link-github {
       position: absolute;
       top: 36px;
@@ -469,7 +532,7 @@
       justify-content: flex-end;
       padding: 0em 1em;
       margin-right: 0.05em;
-      background-color: rgba(87, 85, 217, 0.055);
+      background-color: light-dark(rgba(87, 85, 217, 0.055), rgba(87, 85, 217, 0.152));
       border-radius: 999px;
       font-family: sans-serif;
       height: auto;
@@ -477,8 +540,9 @@
 
     .modal-container {
       border-radius: 1.5em;
-      background-color: rgb(253, 253, 255);
+      background-color: light-dark(rgb(253, 253, 255), rgb(44, 44, 44));
       padding: 1em;
+      box-shadow: 0px 7px 54px rgba(0, 0, 0, 0.307);
     }
 
     .bar {
@@ -487,10 +551,15 @@
 
     .devicechooser {
       border-radius: 1em;
+      justify-content: center;
       display: flex;
       justify-content: center;
+      /* Centers horizontally */
       align-items: center;
+      /* Centers vertically */
       text-align: left;
+      color: light-dark(#3c3c3c, #cacaca);
+
     }
 
     .btn.btn-favourite .icon.icon-favourite span {
@@ -514,6 +583,9 @@
       max-width: 99%;
     }
 
+
+
+    /*override spectre*/
     .icon.icon-interface::before {
       position: absolute;
       left: 50%;
diff --git a/img/bjs1-thumb.png b/img/bjs1-thumb.png
new file mode 100644
index 00000000000..19c2eeec92d
Binary files /dev/null and b/img/bjs1-thumb.png differ
diff --git a/img/bjs2-thumb.png b/img/bjs2-thumb.png
new file mode 100644
index 00000000000..f3d18519c78
Binary files /dev/null and b/img/bjs2-thumb.png differ
diff --git a/index.html b/index.html
index 5dbbb501063..3bcb362f425 100644
--- a/index.html
+++ b/index.html
@@ -18,6 +18,11 @@
     <meta name="msapplication-TileColor" content="#5755d9">
     <meta name="theme-color" content="#5755d9">
     <title>Bangle.js App Loader</title>
+    <style>
+      body {
+        background-color: light-dark(#ffffff, #232323);
+      }
+    </style>
   </head>
   <body>
     <header class="navbar-primary navbar">
@@ -113,7 +118,7 @@
     <div class="container apploader-tab" id="myappscontainer" style="display:none">
       <div class="panel">
         <div class="panel-header" style="text-align:right">
-          <button class="btn refresh">Refresh...</button>
+          <button class="btn refresh">Refresh</button>
           <button class="btn btn-primary updateapps hidden">Update X apps</button>
         </div>
         <div class="panel-body columns"><!-- apps go here --></div>
@@ -123,7 +128,7 @@
     <div class="container apploader-tab" id="morecontainer" style="display:none">
       <div class="hero bg-gray">
         <div class="hero-body">
-          <a href="https://banglejs.com" target="_blank"><img src="img/banglejs-logo-mid.png" alt="Bangle.js"></a>
+          <a class="hero-img"href="https://banglejs.com" target="_blank"><img src="img/banglejs-logo-mid.png" alt="Bangle.js"></a>
           <h2>App Loader</h2>
           <p>A tool for uploading and removing apps from <a href="https://banglejs.com" target="_blank">Bangle.js Smart Watches</a></p>
         </div>
@@ -175,13 +180,20 @@ <h3>Settings</h3>
             <i class="form-icon"></i> Send app analytics to banglejs.com (apps installed, favourites, firmware version).<br/>
               <small>Used for 'Sort by Installed/Favourited' functionality. See the <a href="http://www.espruino.com/Privacy">privacy policy</a></small>.
           </label>
-          <div class="form-group">
-            <select class="form-select form-inline" id="settings-lang" style="width: 10em">
-              <option value="">None (English)</option>
-            </select>&nbsp;&nbsp;<span>Translations (<a href="https://github.com/espruino/BangleApps/issues/1311" target="_blank">BETA - more info</a>). Any apps that are uploaded to Bangle.js after changing this will have any text automatically translated.</span>
-          </div>
+          <select class="form-select form-inline" id="settings-theme" style="width: 10em">
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+            <option value="device">Device</option>            
+          </select>&nbsp;&nbsp;<span>App Loader Theme</span>
+        </div>
+        <div class="form-group">
+          <select class="form-select form-inline"  id="settings-lang" style="width: 10em">
+            <option value="">None (English)</option>
+          </select>&nbsp;&nbsp;<span>Translations (<a href="https://github.com/espruino/BangleApps/issues/1311" target="_blank">BETA - more info</a>). Any apps that are uploaded to Bangle.js after changing this will have any text automatically translated.</span>
+        </div>
+        <div class="form-group">
           <details>
-            <summary>Advanced Options</summary>
+            <summary style="cursor: pointer;">Advanced Options</summary>
             <label class="form-switch">
               <input type="checkbox" id="settings-minify">
               <i class="form-icon"></i> Minify apps before upload (⚠️DANGER⚠️: Not recommended. Uploads smaller, faster apps but this <b>will</b> break many apps)
diff --git a/webtools b/webtools
index c6a4cfceff0..0e8cf1c4717 160000
--- a/webtools
+++ b/webtools
@@ -1 +1 @@
-Subproject commit c6a4cfceff0a3e34400fd3b4d7ac4b6db513197c
+Subproject commit 0e8cf1c471737d7e88a95d8eafc3aa45b294176b
