diff --git a/apps/shadowclk/app.js b/apps/shadowclk/app.js
index 31d62a87d..7ffdc4683 100644
--- a/apps/shadowclk/app.js
+++ b/apps/shadowclk/app.js
@@ -1,6 +1,6 @@
 // Clock with large colored digits using the "Londrina" font and a slightly larger "Londrina Shadow" font on top
 
-Graphics.prototype.setFontLondrinaSolid = function() {
+Graphics.prototype.setFontLondrinaSolid = function () {
   // Actual height 59 (64 - 6)
   return this.setFontCustom(
     E.toString(require('heatshrink').decompress(atob('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'))),
@@ -10,7 +10,7 @@ Graphics.prototype.setFontLondrinaSolid = function() {
   );
 };
 
-Graphics.prototype.setFontLondrinaShadow = function() {
+Graphics.prototype.setFontLondrinaShadow = function () {
   // Actual height 63 (67 - 5)
   return this.setFontCustom(
     E.toString(require('heatshrink').decompress(atob('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'))),
@@ -20,7 +20,7 @@ Graphics.prototype.setFontLondrinaShadow = function() {
   );
 };
 
-Graphics.prototype.setFontRighteous = function() {
+Graphics.prototype.setFontRighteous = function () {
   // Actual height 16 (15 - 0)
   return this.setFontCustom(
     E.toString(require('heatshrink').decompress(atob('ABN//ABBv0QA4N4AIVwAogACoEC+EH+EP4EOAovACIcPsEfsF7vABBjfghPAjEAv0As0Yv14n/gg+Aj34vP4sPYgH4gFgEgMP8Ef+F7nABBjcwjEwIwZNFEYM//H//3wn3AgwLBwEC8EO/3+v/8E4IfDmMAn+A/8A/0AAYIHBncAGQMDAIUHgEf4ABBBIYAEjwBChgGBB4YBJAAU4AIS1BhAFBgP4h/wHoKPBXYIlDj/gn/wuF4uE4sEYAYLXBBYK9BSwLhDAIKODuP4uYBB3ABDv84n84jgSCEoNzAIIRFFoUc8DFBv/gAIN+A4IBCWoIBBj7XEFoIBDu4BCH4XwsPggPAdIItBf4N+nFOnEOnB/Bg4tBwAmBQINwOoP4u5rB4CNEsEdS4ILBLIMYAIIFBBIINBgFAhznCn/AuPIuHYRIN7N4TnBZQcHnABBgTLBXoOeAIMBdYUHgEPwAZBnvgnHgiFAD4cNwABLCIcwsAbBdILbBg+AeIJoCPIfYTIR7BgABBv8AnwTCgIZB8EHuEP7ABE4EOoEH4CzBCoLNBQ4N48FwAIjvCboYACBIIBDuapBAIQJDnypBQYKBBcIU4vFwnABHmEwFI4PFXoSBCHpoVBsEYCJGAAISZDJY14JZD7BmJhCE48DVIIBEBYYVJgE4AIYJC+F/MYQVHJIXAJISBCoEIFJoBEgDRBToRxCU4wJECYI/Jn8AWIMD8EBG4rjQUILTNuHgAId/EYPAj+AFZ0+vF+n/2FaBhD7ArBjiHBXIM4ue4AI34uLtBoCLDS5YBBHIRbBDIN4dJXgCYNggF+C4JvB/CjBgZLBCIOADwNAFIYJBc4jxJF4YXBoEIRYN8E4SHBToa/BBoIRBvgtBAIOAgfAIIJDCwAJBBoIRBsAnCToKJBGoW4vzEBnFgIIMA//+AIfgh3AgxhBRoJ1BcoMH+AxBLYUACIIVBAIIdDBYMYCAQdBAYMQQoUAgYBMAAUwDY0BHYUP/EOnEOjADBA4ILDWYR5BWoPwCYQBECYMDboQnIAIUPnEGmA3NcogjH/ADBh+4EYcMTIK3C//49kA5gbHnYBCn8P/8H/0P/iFDaoQTBgABDPYRBB/EgCIgFBkEPv/+v/8A4IhFgPggY9Ch14hiwBhARFHYZlCHYgHFNYJBDgYZCB45THXJjhCZoaBC/7fHCYYjBEp3/EIJjLJoIBBgcYh/YAIMMAIf4AIVwCIN/8D3DSoMMjABBh+Ah4/CgChBAIQ1DHYKRCCYUBQISFBh/Ah66CAoQjGEIgHFCIPAhEIOYV4TIaBDJZE7gE/AIMP/0P/hLChBlCGYQBCNYUAjEDRoOAv/8//+/n+8EOAIIfBBIIBBv/+4EGBoYJC/kHwAfBCoMHAIgrBAYMGgA='))),
@@ -30,17 +30,15 @@ Graphics.prototype.setFontRighteous = function() {
   );
 };
 
-// Load and set default appSettings
-let teletextColors = ["#000", "#f00", "#0f0", "#ff0", "#00f", "#f0f", "#0ff", "#fff"];
-let defaultAppSettings = Object.assign({
-  color: teletextColors[6],
-  theme: 'light',
-  enableSuffix: true,
-  enableLeadingZero: false,
-}, require('Storage').readJSON("shadowclk.json", true) || {});
+let appSettings = require("Storage").readJSON("shadowclk.json", 1) || {};
+let settings = require("Storage").readJSON("setting.json", 1) || {};
+let is12Hour = settings["12hour"] !== undefined ? settings["12hour"] : false;
+let color = appSettings.color !== undefined ? appSettings.color : "#0ff";
+let enableLeadingZero = appSettings.enableLeadingZero !== undefined ? appSettings.enableLeadingZero : false;
+let enableSuffix = appSettings.enableSuffix !== undefined ? appSettings.enableSuffix : true;
 
 // Draw the time and date
-(function() {
+(function () {
   let drawTimeout;
 
   function draw() {
@@ -48,36 +46,35 @@ let defaultAppSettings = Object.assign({
     var y = g.getHeight() / 2;
     g.reset().clearRect(Bangle.appRect);
     var date = new Date();
-    var appSettings = require("Storage").readJSON("shadowclk.json", 1) || defaultAppSettings;
-    var settings = require("Storage").readJSON("setting.json", 1) || {};
-    var is12HourFormat = settings["12hour"];
     var hour = date.getHours();
     var minutes = String(date.getMinutes()).padStart(2, '0');
+
     // Handle 12-hour format
-    if (is12HourFormat) {
+    if (is12Hour) {
       hour = hour % 12 || 12; // Convert 0 to 12 for 12-hour format
     } else {
       // If the leading zero option is enabled and hour is less than 10, add leading zero
-      if (appSettings.enableLeadingZero && hour < 10) {
+      if (enableLeadingZero && hour < 10) {
         hour = '0' + hour;
       }
     }
+
     var timeStr = hour + ':' + minutes;
+
     // Handle midnight in 12-hour format specifically
-    if (is12HourFormat && hour === 0) {
+    if (is12Hour && hour === 0) {
       timeStr = '12' + timeStr.substring(2);
     }
-    // Print time in selected color and then the outline
-    var color = appSettings.color;
+
     g.setFontAlign(0, 0).setFont("LondrinaSolid").setColor(color).drawString(timeStr, x - 1, y);
     g.reset().setFontAlign(0, 0).setFont("LondrinaShadow").drawString(timeStr, x - 1, y);
-    // Get full date and format it
+
     var locale = require("locale");
     var dayOfMonth = date.getDate();
     var month = locale.month(date, 1).slice(0, 1).toUpperCase() + locale.month(date, 1).slice(1).toLowerCase();
     var year = date.getFullYear();
     var dayOfMonthStr = dayOfMonth.toString();
-    if (appSettings.enableSuffix) {
+    if (enableSuffix) {
       var suffix = "";
       if (dayOfMonth === 1 || dayOfMonth === 21 || dayOfMonth === 31) {
         suffix = "st";
@@ -90,11 +87,10 @@ let defaultAppSettings = Object.assign({
       }
       dayOfMonthStr += suffix;
     }
-    // Combine and print date string
     var dayOfWeek = locale.dow(date, 0).slice(0, 1).toUpperCase() + locale.dow(date, 0).slice(1).toLowerCase();
     var dateStr = month + " " + dayOfMonthStr + ", " + year + "\n" + dayOfWeek;
     g.setFontAlign(0, 0).setFont("Righteous").drawString(dateStr, x, y + 56);
-    // Time interval set to redraw every 60 seconds
+
     if (drawTimeout) clearTimeout(drawTimeout);
     drawTimeout = setTimeout(() => {
       drawTimeout = undefined;
@@ -103,7 +99,7 @@ let defaultAppSettings = Object.assign({
   }
   Bangle.setUI({
     mode: "clock",
-    remove: function() {
+    remove: function () {
       if (drawTimeout) clearTimeout(drawTimeout);
       drawTimeout = undefined;
       delete Graphics.prototype.setFontLondrinaSolid;
@@ -114,4 +110,4 @@ let defaultAppSettings = Object.assign({
   Bangle.loadWidgets();
   draw();
   setTimeout(Bangle.drawWidgets, 0);
-})();
+})();
\ No newline at end of file
diff --git a/apps/shadowclk/interface.html b/apps/shadowclk/interface.html
index 9a65a4893..53d206ecd 100644
--- a/apps/shadowclk/interface.html
+++ b/apps/shadowclk/interface.html
@@ -6,14 +6,30 @@
   <link rel="stylesheet" href="../../css/spectre.min.css">
   <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">  <title>3-Bit Color Picker</title>
+  <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
+  <title>Shadow Clock Customizer</title>
   <style>
+    .underlined-heading {
+      position: relative;
+      padding-bottom: 5px;
+    }
+
+    .underlined-heading::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      border-bottom: 5px solid;
+    }
+
     .main-container {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       min-height: 100vh;
+      padding-bottom: 100px;
     }
 
     .color-button {
@@ -71,12 +87,39 @@
       display: block;
     }
 
-    #toggle-bg {
-      margin-top: 20px;
+    .button-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 360px;
+      margin-top: 10px;
+    }
+
+    .button-row {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      margin-top: 5px;
+    }
+
+    .btn {
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-basis: 0;
+      margin: 5px;
+      width: 160px;
     }
 
     #upload {
+      width: 150px;
+    }
+
+    #upload-container {
       margin-top: 20px;
+      display: flex;
+      justify-content: center;
+      width: 160px;
     }
 
     #message-container {
@@ -87,23 +130,43 @@
   </style>
 </head>
 
-
 <body>
   <script src="../../core/lib/interface.js"></script>
   <div class="main-container">
-    <h1>3-Bit Color Picker</h1>
+    <h1 class="underlined-heading">Clock Customizer</h1>
     <div id="color-buttons-container"></div>
-    <button id="toggle-bg" class="btn btn-primary" onclick="toggleBackground()">Light/Dark</button>
+    <div class="button-container">
+      <div class="button-row">
+        <button id="toggle-hour-format" class="btn btn-primary" onclick="toggleHourFormat()">Time Mode: 24 Hour</button>
+        <button id="toggle-bg" class="btn btn-primary" onclick="toggleBackground()">Theme: Light</button>
+      </div>
+      <div class="button-row">
+        <button id="toggle-leading-zero" class="btn btn-primary" onclick="toggleLeadingZero()">Leading Zero:
+          OFF</button>
+        <button id="toggle-suffix" class="btn btn-primary" onclick="toggleSuffix()">Suffix: ON</button>
+      </div>
+    </div>
     <div id="preview-box">
       <canvas id="preview-canvas" width="176" height="176"></canvas>
     </div>
-    <button id="upload" class="btn btn-primary">Upload</button>
+    <div id="upload-container">
+      <button id="upload" class="btn btn-primary">Upload</button>
+    </div>
     <div id="message-container">
       <div id="message"></div>
     </div>
   </div>
   <script>
     const messageDiv = document.getElementById('message');
+
+    // Initialize app and system settings
+    let selectedColor = "#0ff";
+    let isDarkBg = false;
+    let leadingZero = false;
+    let prevLeadingZeroState = false;
+    let suffix = true;
+    let is12Hour = false;
+
     // Create and add color buttons to the UI
     let colors = ['#000', '#f00', '#0f0', '#ff0', '#00f', '#f0f', '#0ff', '#fff'];
     let colorButtonsContainer = document.getElementById('color-buttons-container');
@@ -120,25 +183,88 @@
       });
     });
 
-    // Format the current time in the desired format
+    let leadingZeroButton = document.getElementById('toggle-leading-zero');
+    let hourFormatButton = document.getElementById('toggle-hour-format');
+    let suffixButton = document.getElementById('toggle-suffix');
+    let bgButton = document.getElementById('toggle-bg');
+
+    // Function to update the button text based on the current state
+    function updateButtonState() {
+      if (leadingZeroButton.disabled) {
+        leadingZeroButton.textContent = prevLeadingZeroState ? 'Leading Zero: ON' : 'Leading Zero: OFF';
+      } else {
+        leadingZeroButton.textContent = leadingZero ? 'Leading Zero: ON' : 'Leading Zero: OFF';
+      }
+      hourFormatButton.textContent = is12Hour ? 'Time Mode: 12 Hour' : 'Time Mode: 24 Hour';
+      suffixButton.textContent = suffix ? 'Suffix: ON' : 'Suffix: OFF';
+      bgButton.textContent = isDarkBg ? 'Theme: Dark' : 'Theme: Light';
+
+      if (is12Hour) {
+        prevLeadingZeroState = leadingZero; // Store the state before disabling
+        leadingZeroButton.disabled = true;
+        leadingZeroButton.textContent = prevLeadingZeroState ? 'Leading Zero: ON' : 'Leading Zero: OFF';
+      } else {
+        leadingZero = prevLeadingZeroState; // Retrieve the stored state
+        leadingZeroButton.disabled = false;
+        leadingZeroButton.textContent = leadingZero ? 'Leading Zero: ON' : 'Leading Zero: OFF';
+      }
+    }
+
+    function toggleLeadingZero() {
+      if (!is12Hour) { // Only allow toggle if in 24-hour mode
+        leadingZero = !leadingZero;
+        prevLeadingZeroState = leadingZero; // Update previous state on each toggle
+        updateButtonState();
+        drawText(selectedColor);
+      }
+    }
+
+    function toggleHourFormat() {
+      is12Hour = !is12Hour;
+      updateButtonState();  // This will also correctly update leadingZero
+      drawText(selectedColor);
+    }
+
+
+    // Toggle the background color between dark and light
+    function toggleBackground() {
+      isDarkBg = !isDarkBg; // Toggle the background state
+      let previewBox = document.getElementById("preview-box");
+      previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
+      updateButtonState();
+      drawText(selectedColor); // Redraw the text with updated color
+    }
+
+    function toggleSuffix() {
+      suffix = !suffix;
+      document.getElementById("toggle-suffix").textContent = `Suffix: ${suffix ? 'On' : 'Off'}`;
+      updateButtonState();
+      drawText(selectedColor);
+    }
+
     function formatTime(date) {
       let hours = date.getHours();
       let minutes = date.getMinutes();
-      let formattedHours = hours < 10 ? `${hours}` : `${hours}`;
+      // If 12 hour format is selected, adjust hours
+      if (is12Hour) {
+        hours = hours % 12;
+        hours = hours ? hours : 12; // the hour '0' should be '12' in 12h format
+      }
+      let formattedHours = (!is12Hour && leadingZero && hours < 10) ? `0${hours}` : `${hours}`;
       let formattedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
       return `${formattedHours}:${formattedMinutes}`;
     }
 
     // Get the current date as a formatted string
-    function getCurrentDate() {
+    function getCurrentDate(suffix) {
       let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
       let suffixes = ["st", "nd", "rd", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "th", "st", "nd", "rd", "th", "th", "th", "th", "th", "th", "th", "st"];
       let date = new Date();
       let month = months[date.getMonth()];
       let day = date.getDate();
-      let suffix = suffixes[day - 1];
+      let suffixString = suffix ? suffixes[day - 1] : '';
       let year = date.getFullYear();
-      return `${month} ${day}${suffix}, ${year}`;
+      return `${month} ${day}${suffixString}, ${year}`;
     }
 
     // Get the current day of the week as a string
@@ -148,14 +274,6 @@
       return days[date.getDay()];
     }
 
-    // Toggle the background color between dark and light
-    function toggleBackground() {
-      isDarkBg = !isDarkBg; // Toggle the background state
-      let previewBox = document.getElementById("preview-box");
-      previewBox.style.backgroundColor = isDarkBg ? "black" : "white";
-      drawText(selectedColor); // Redraw the text with updated color
-    }
-
     // Draw the time, date, and day of the week on the canvas
     function drawText(color) {
       let canvas = document.getElementById("preview-canvas");
@@ -198,10 +316,10 @@
       ctx.fillText(currentTime, xPos, yPos);
 
       // Set the font for the date
-      ctx.font = "16px Righteous";
+      ctx.font = "13px Righteous";
 
       // Get the current date
-      let currentDate = getCurrentDate();
+      let currentDate = getCurrentDate(suffix);
 
       // Measure the date width and calculate the horizontal position
       let dateWidth = ctx.measureText(currentDate).width;
@@ -219,7 +337,7 @@
       xPos = (canvas.width - dayWidth) / 2;
 
       // Draw the day of the week
-      ctx.fillText(currentDay, xPos, yPos + 18);
+      ctx.fillText(currentDay, xPos, yPos + 12);
     }
 
     // Converts a hexadecimal color code to a 16-bit integer value.
@@ -257,7 +375,7 @@
     }
 
     // Save the provided theme to Bangle.js storage and set Shadow Clock as the default clock
-    function saveThemeToSettings(theme) {
+    function saveThemeToSettings(themeColors) {
       Puck.eval('[require("Storage").readJSON("setting.json", true)]', (dataArray) => {
         let data = dataArray ? dataArray[0] : null;
         if (data) {
@@ -266,10 +384,13 @@
             data.theme = {};
           }
           // Save all theme values
-          for (let key in theme) {
-            data.theme[key] = theme[key];
+          for (let key in themeColors) {
+            data.theme[key] = themeColors[key];
           }
-          data.clock = "shadowclk.app.js"; // Set Shadow Clock as default
+          // Save settings for 12 or 24 hour mode
+          data["12hour"] = is12Hour;
+          // Set Shadow Clock as default
+          data.clock = "shadowclk.app.js";
           Puck.write(`require("Storage").write("setting.json", ${JSON.stringify(data)});\n`, (result) => {
             console.log('Theme saved:', result);
           });
@@ -277,44 +398,33 @@
       });
     }
 
-    // Initialize color and theme settings
-    let selectedColor = "#0ff";
-    let isDarkBg = false;
-
-    // Load settings from Bangle.js storage
     function loadSettings(callback) {
-      // Set a timeout for loading the settings
-      const timeout = new Promise((_, reject) =>
-        setTimeout(() => reject(new Error("Timeout occurred")), 1000)
-      );
-      // Load settings from Bangle.js storage
-      const loadSettingsFromStorage = new Promise((resolve) => {
-        Puck.eval('[require("Storage").readJSON("shadowclk.json", true)]', (dataArray) => {
-          let data = dataArray ? dataArray[0] : null;
-          if (data) {
-            // Apply color and theme from JSON
-            const { color, theme } = data;
-            selectedColor = color;
-            isDarkBg = theme === "dark";
-            displayMessage("Previous settings loaded.", 3000);
-          } else {
-            // Use default values if there is no data for color and theme
-            selectedColor = "#0ff";
-            isDarkBg = false;
-          }
-          resolve();
-        });
+      Puck.eval('[require("Storage").readJSON("shadowclk.json", true)]', (dataArray) => {
+        let data = dataArray ? dataArray[0] : null;
+        if (data) {
+          // Apply color, theme, enableLeadingZero, enableSuffix and timeMode from JSON
+          let { color, theme, enableLeadingZero, enableSuffix, enable12Hour } = data;
+          selectedColor = color !== undefined ? color : selectedColor;
+          isDarkBg = theme !== undefined ? (theme === "dark") : isDarkBg;
+          // Use the JSON values if they exist, otherwise use the current values
+          leadingZero = enableLeadingZero !== undefined ? enableLeadingZero : leadingZero;
+          prevLeadingZeroState = leadingZero; // Store the current state
+          suffix = enableSuffix !== undefined ? enableSuffix : suffix;
+          is12Hour = enable12Hour !== undefined ? enable12Hour : is12Hour; // Update the time mode from the settings
+          displayMessage("Previous settings loaded.", 3000);
+        } else {
+          // If no JSON data, load defaults
+          selectedColor = selectedColor;
+          isDarkBg = isDarkBg;
+          leadingZero = leadingZero;
+          prevLeadingZeroState = leadingZero;
+          suffix = suffix;
+          is12Hour = is12Hour;
+          displayMessage("Defaults loaded.", 3000);
+        }
+        updateButtonState(); // Update button state regardless
+        callback();
       });
-      // Execute the callback after loading the settings, or use default values in case of a timeout or error
-      Promise.race([loadSettingsFromStorage, timeout])
-        .then(() => callback())
-        .catch((error) => {
-          console.error(error);
-          // Use default values in case of a timeout or error
-          selectedColor = "#0ff";
-          isDarkBg = false;
-          callback();
-        });
     }
 
     // Update the time display every second
@@ -341,19 +451,25 @@
       }, timeout);
     }
 
-    // Attach an event listener to the 'upload' button to save theme and color settings to Bangle.js storage
+    // Attach an event listener to the 'upload' button to save color and theme settings to Bangle.js storage
     document.getElementById("upload").addEventListener("click", function () {
       // Save theme settings to Bangle.js
       let themeColors = createThemeColors(isDarkBg);
       saveThemeToSettings(themeColors);
-      // Save Shadow Clock color setting
+      // Save Shadow Clock app setting
       let data = {
         color: selectedColor,
-        theme: isDarkBg ? "dark" : "light"
+        theme: isDarkBg ? "dark" : "light",
+        enableLeadingZero: leadingZero,
+        enableSuffix: suffix,
+        enable12Hour: is12Hour
       };
+
+      // Write the updated settings back to shadowclk.json
       Puck.write(`require("Storage").write("shadowclk.json", ${JSON.stringify(data)});\n`, (result) => {
-        console.log('Color saved:', result);
+        console.log('App settings saved:', result);
       });
+
       // Display the message using displayMessage function
       displayMessage('Configuration sent...<br>Hold button on Bangle.js', 5000);
     });
@@ -363,7 +479,7 @@
       return Promise.all([
         document.fonts.load('81px Londrina Solid'),
         document.fonts.load('81px Londrina Shadow'),
-        document.fonts.load('16px Righteous')
+        document.fonts.load('13px Righteous')
       ]);
     }
 
diff --git a/apps/shadowclk/settings.js b/apps/shadowclk/settings.js
index 93408657c..384710318 100644
--- a/apps/shadowclk/settings.js
+++ b/apps/shadowclk/settings.js
@@ -1,6 +1,7 @@
-(function (back) {
+(function(back) {
   let teletextColors = ["#000", "#f00", "#0f0", "#ff0", "#00f", "#f0f", "#0ff", "#fff"];
   let teletextColorNames = ["Black", "Red", "Green", "Yellow", "Blue", "Magenta", "Cyan", "White"];
+  let sysSettings = require('Storage').readJSON("setting.json", 1) || {};
 
   // Load and set default settings
   let appSettings = Object.assign({
@@ -8,14 +9,9 @@
     theme: 'light',
     enableSuffix: true,
     enableLeadingZero: false,
+    enable12Hour: '24hour' // default time mode
   }, require('Storage').readJSON("shadowclk.json", true) || {});
 
-
-  // Save settings to storage
-  function writeSettings() {
-    require('Storage').writeJSON("shadowclk.json", appSettings);
-  }
-
   // Colors from 'Light BW' and 'Dark BW' themes
   function createThemeColors(mode) {
     let cl = x => g.setColor(x).getColor();
@@ -55,10 +51,10 @@
     writeSettings();
     delete g.reset;
     g._reset = g.reset;
-    g.reset = function (n) {
+    g.reset = function(n) {
       return g._reset().setColor(newTheme.fg).setBgColor(newTheme.bg);
     };
-    g.clear = function (n) {
+    g.clear = function(n) {
       if (n) g.reset();
       return g.clearRect(0, 0, g.getWidth(), g.getHeight());
     };
@@ -69,15 +65,36 @@
 
   // Read the current system theme
   function getCurrentTheme() {
-    let s = require('Storage').readJSON("setting.json", 1) || {};
-    if (!s.theme) {
+    if (!sysSettings.theme) {
       return appSettings.theme; // fallback to appSettings.theme (light or dark)
     }
-    return s.theme.dark ? 'dark' : 'light';
+    return sysSettings.theme.dark ? 'dark' : 'light';
+  }
+
+  // Read the current time mode
+  function getCurrentTimeMode() {
+    if (!sysSettings['12hour']) {
+      return appSettings.enable12Hour; // fallback to appSettings.enable12Hour
+    }
+    return sysSettings['12hour'] ? '12hour' : '24hour';
+  }
+
+  // Save settings to storage
+  function writeSettings() {
+    appSettings.enable12Hour = appSettings.enable12Hour === '12hour' ? '12hour' : '24hour';
+    require('Storage').writeJSON("shadowclk.json", appSettings);
+  }
+
+  // Save time mode to system settings
+  function writeTimeModeSetting() {
+    sysSettings['12hour'] = appSettings.enable12Hour === '12hour';
+    require('Storage').writeJSON("setting.json", sysSettings);
   }
 
   function showMenu() {
     appSettings.theme = getCurrentTheme();
+    appSettings.enable12Hour = getCurrentTimeMode();
+
     E.showMenu({
       "": {
         "title": "Shadow Clock"
@@ -115,6 +132,15 @@
           appSettings.enableLeadingZero = v;
           writeSettings();
         }
+      },
+      'Time Mode:': {
+        value: (appSettings.enable12Hour === '12hour'),
+        format: v => v ? '12 Hr' : '24 Hr',
+        onchange: v => {
+          appSettings.enable12Hour = v ? '12hour' : '24hour';
+          writeSettings();
+          writeTimeModeSetting();
+        }
       }
     });
   }