diff --git a/css/style.css b/css/style.css
index 593edf1..7ebeee0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -195,7 +195,7 @@ textarea:focus {
 
 #form-list label.title,
 .form label.title {
-  margin-bottom: 0.2rem;
+  margin-bottom: 0.5rem;
 }
 
 #form-list label small,
@@ -210,6 +210,16 @@ textarea:focus {
   min-height: 20rem;
 }
 
+#options .item small {
+  display: block;
+  font-size: 10px;
+  color: #888;
+  text-align: left;
+  margin-top: 0.25rem;
+  line-height: 1.3;
+  font-weight: normal;
+}
+
 .copyright {
   position: fixed;
   bottom: 0;
@@ -258,7 +268,7 @@ textarea:focus {
   position: absolute;
   right: .25rem;
   margin: 0 auto;
-  top: 50%;
+  top: 65%;
   transform: translateY(-50%);
   border: 0;
   background: transparent;
@@ -282,8 +292,8 @@ textarea:focus {
 
 #form-list .item span.timer {
   position: absolute;
-  right: 2rem;
-  top: 50%;
+  right: 2.25rem;
+  top: 65%;
   transform: translateY(-50%);
   font-size: 16px;
 }
diff --git a/js/options.js b/js/options.js
index b58ff18..0246da7 100644
--- a/js/options.js
+++ b/js/options.js
@@ -3,12 +3,14 @@ const saveOptions = () => {
   const dynamic_tasks = document.getElementById('dynamic_tasks').checked;
   const sort_by = document.getElementById('sort_by').value ?? 'id';
   const sort_direction = document.getElementById('sort_direction').value ?? 'asc';
+  const time_format = document.getElementById('time_format').value.trim() || '{H}:{M}:{S}';
 
   chrome.storage.local.set(
     {
       dynamic_tasks: dynamic_tasks,
       sort_by: sort_by,
-      sort_direction: sort_direction
+      sort_direction: sort_direction,
+      time_format: time_format
     },
     () => {
       // Update status to let user know options were saved.
@@ -28,12 +30,14 @@ const restoreOptions = () => {
     {
       dynamic_tasks: false,
       sort_by: 'id',
-      sort_direction: 'asc'
+      sort_direction: 'asc',
+      time_format: '{H}:{M}:{S}'
     },
     (items) => {
       document.getElementById('dynamic_tasks').checked = items.dynamic_tasks;
       document.getElementById('sort_by').value = items.sort_by;
       document.getElementById('sort_direction').value = items.sort_direction;
+      document.getElementById('time_format').value = items.time_format;
     }
   );
 };
diff --git a/js/tasks.js b/js/tasks.js
index 2b30328..108798b 100644
--- a/js/tasks.js
+++ b/js/tasks.js
@@ -184,7 +184,8 @@ let taskInterface = {
             {
               dynamic_tasks: false,
               sort_by: "id",
-              sort_direction: "asc"
+              sort_direction: "asc",
+              time_format: "{H}:{M}:{S}"
             },
             (items) => {
               self.options = items;
@@ -469,9 +470,9 @@ let taskInterface = {
         if (task.running === 1) {
           let start = new Date(task.start);
           let dif = Number(task.time) + Math.floor((new Date().getTime() - start.getTime()) / 1000)
-          out += '<span class="timer">' + taskInterface.hms(dif) + '</span>';
+          out += '<span class="timer">' + taskInterface.displayTime(dif) + '</span>';
         } else {
-          out += '<span class="timer">' + taskInterface.hms(task.time) + '</span>';
+          out += '<span class="timer">' + taskInterface.displayTime(task.time) + '</span>';
         }
 
         out += '<a href="#" class="power play ' + (task.running === 1 ? 'running' : '') + '" title="Timer on/off" rel="' + task.id + '"></a>';
@@ -502,7 +503,7 @@ let taskInterface = {
       })
     }
 
-    $("#total-time-counter").html(taskInterface.hms(totalTime));
+    $("#total-time-counter").html(taskInterface.displayTime(totalTime));
   },
 
   init: async function () {
@@ -565,7 +566,7 @@ let taskInterface = {
     // setup interval for counter
     taskInterface.intervals[task.id] = window.setInterval(function () {
       let dif = Number(task.time) + Math.floor((new Date().getTime() - start.getTime()) / 1000)
-      $('#item' + task.id + ' .timer').text(taskInterface.hms(dif));
+      $('#item' + task.id + ' .timer').text(taskInterface.displayTime(dif));
     }, 500);
   },
 
@@ -578,7 +579,7 @@ let taskInterface = {
     start = new Date(task.start); // read from DB
     stop = new Date(); // now
     dif = Number(task.time) + Math.floor((stop.getTime() - start.getTime()) / 1000); // time diff in seconds
-    $('#item' + task.id + ' .timer').text(taskInterface.hms(dif));
+    $('#item' + task.id + ' .timer').text(taskInterface.displayTime(dif));
 
     // update record
     await tasks.update(
@@ -612,17 +613,29 @@ let taskInterface = {
     }
   },
 
-  hms: function (secs) {
-    //secs = secs % 86400; // fix 24:00:00 overlay
-    let time = [0, 0, secs], i;
+  formatTime: function (secs, template) {
+    let time = [0, 0, Math.max(0, Math.floor(secs))], i;
     for (i = 2; i > 0; i--) {
       time[i - 1] = Math.floor(time[i] / 60);
       time[i] = time[i] % 60;
-      if (time[i] < 10) {
-        time[i] = '0' + time[i];
-      }
     }
-    return time.join(':');
+    const pad = (n) => (n < 10 ? '0' + n : String(n));
+    return String(template)
+      .replace(/\{H\}/g, time[0])
+      .replace(/\{M\}/g, pad(time[1]))
+      .replace(/\{S\}/g, pad(time[2]))
+      .replace(/\{h\}/g, time[0])
+      .replace(/\{m\}/g, time[1])
+      .replace(/\{s\}/g, time[2]);
+  },
+
+  displayTime: function (secs) {
+    const template = this.options?.time_format ?? '{H}:{M}:{S}';
+    return this.formatTime(secs, template);
+  },
+
+  hms: function (secs) {
+    return this.formatTime(secs, '{H}:{M}:{S}');
   },
 
   sec: function (hms) {
diff --git a/options.html b/options.html
index ae13b6a..58ebf34 100644
--- a/options.html
+++ b/options.html
@@ -40,6 +40,17 @@
                 </select>
             </div>
 
+            <div class="item">
+                <label for="time_format">Timer display format</label>
+                <input type="text" id="time_format" class="text">
+                <small>
+                    Use placeholders: {H} hours, {M} minutes (padded), {S} seconds (padded).
+                    Without padding: {h}, {m}, {s}. <br>
+                    Default: {H}:{M}:{S} → 1:23:45. <br>
+                    Example: {H} hours {M} minutes {S} seconds → 1 hours 23 minutes 45 seconds.
+                </small>
+            </div>
+
             <p id="status"></p>
             <div class="buttons">
                 <input type="button" id="save" value="Save">