diff --git a/css/clock.css b/css/clock.css
index 401b8fab..042eda12 100644
--- a/css/clock.css
+++ b/css/clock.css
@@ -13,7 +13,7 @@
   flex-wrap: nowrap;
 }
 
-.clock-seperator,
+.clock-separator,
 .clock-hours,
 .clock-minutes,
 .clock-seconds,
@@ -24,7 +24,7 @@
   align-items: center;
 }
 
-.clock-seperator {
+.clock-separator {
   min-width: 0.5em;
   color: rgb(var(--accent));
 }
diff --git a/css/date.css b/css/date.css
index 32a970bd..15be7812 100644
--- a/css/date.css
+++ b/css/date.css
@@ -13,7 +13,7 @@
   flex-wrap: nowrap;
 }
 
-.date-seperator,
+.date-separator,
 .date-date,
 .date-day,
 .date-month,
@@ -24,7 +24,7 @@
   align-items: center;
 }
 
-.date-seperator {
+.date-separator {
   min-width: 0.5em;
   color: rgb(var(--accent));
 }
diff --git a/index.html b/index.html
index 3b9092af..b10b5663 100644
--- a/index.html
+++ b/index.html
@@ -115,8 +115,8 @@
               <label for="control-header-clock-show-seconds"><span class="label-icon"></span>Seconds</label>
             </div>
             <div class="checkbox-wrap">
-              <input id="control-header-clock-show-seperator" class="control-header-clock-show-seperator" type="checkbox" tabindex="1">
-              <label for="control-header-clock-show-seperator"><span class="label-icon"></span>Seperators</label>
+              <input id="control-header-clock-show-separator" class="control-header-clock-show-separator" type="checkbox" tabindex="1">
+              <label for="control-header-clock-show-separator"><span class="label-icon"></span>Separators</label>
             </div>
             <div class="checkbox-wrap">
               <input id="control-header-clock-24" class="control-header-clock-24" type="checkbox" tabindex="1">
@@ -146,8 +146,8 @@
               <label for="control-header-date-show-year"><span class="label-icon"></span>Year</label>
             </div>
             <div class="checkbox-wrap">
-              <input id="control-header-date-show-seperator" class="control-header-date-show-seperator" type="checkbox" tabindex="1">
-              <label for="control-header-date-show-seperator"><span class="label-icon"></span>Seperators</label>
+              <input id="control-header-date-show-separator" class="control-header-date-show-separator" type="checkbox" tabindex="1">
+              <label for="control-header-date-show-separator"><span class="label-icon"></span>Separators</label>
             </div>
             <div class="radio-wrap">
               <input id="control-header-date-character-length-short" class="control-header-date-character-length-short" type="radio" tabindex="1" name="control-header-date-character-length" value="short">
diff --git a/js/clock.js b/js/clock.js
index d61af38d..171d6d83 100644
--- a/js/clock.js
+++ b/js/clock.js
@@ -88,20 +88,20 @@ var clock = (function() {
       if (!state.get().header.clock.hour24 && state.get().header.clock.show.meridiem) {
         clock.appendChild(meridiem);
       };
-      if (state.get().header.clock.show.seperator) {
+      if (state.get().header.clock.show.separator) {
         var parts = clock.querySelectorAll("span");
         if (parts.length > 1) {
           parts.forEach(function(arrayItem, index) {
             if (index > 0 && !arrayItem.classList.contains("clock-meridiem")) {
-              var seperator = helper.makeNode({
+              var separator = helper.makeNode({
                 tag: "span",
                 text: sepCha,
                 attr: [{
                   key: "class",
-                  value: "clock-seperator"
+                  value: "clock-separator"
                 }]
               });
-              clock.insertBefore(seperator, arrayItem);
+              clock.insertBefore(separator, arrayItem);
             };
           });
         };
diff --git a/js/control.js b/js/control.js
index 73b411aa..05c0c49a 100644
--- a/js/control.js
+++ b/js/control.js
@@ -118,9 +118,9 @@ var control = (function() {
         };
       });
       if (activeCount >= 2 && (state.get().header.date.show.date || state.get().header.date.show.day || state.get().header.date.show.month || state.get().header.date.show.year)) {
-        helper.e(".control-header-date-show-seperator").disabled = false;
+        helper.e(".control-header-date-show-separator").disabled = false;
       } else {
-        helper.e(".control-header-date-show-seperator").disabled = true;
+        helper.e(".control-header-date-show-separator").disabled = true;
       };
       if (state.get().header.date.show.day || state.get().header.date.show.month) {
         helper.e(".control-header-date-character-length-short").disabled = false;
@@ -139,9 +139,9 @@ var control = (function() {
         };
       });
       if (activeCount >= 2 && (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours)) {
-        helper.e(".control-header-clock-show-seperator").disabled = false;
+        helper.e(".control-header-clock-show-separator").disabled = false;
       } else {
-        helper.e(".control-header-clock-show-seperator").disabled = true;
+        helper.e(".control-header-clock-show-separator").disabled = true;
       };
       if (state.get().header.clock.show.seconds || state.get().header.clock.show.minutes || state.get().header.clock.show.hours) {
         helper.e(".control-header-clock-24").disabled = false;
@@ -327,9 +327,9 @@ var control = (function() {
       header.render();
       data.save();
     }, false);
-    helper.e(".control-header-date-show-seperator").addEventListener("change", function() {
+    helper.e(".control-header-date-show-separator").addEventListener("change", function() {
       state.change({
-        path: "header.date.show.seperator",
+        path: "header.date.show.separator",
         value: this.checked
       });
       render();
@@ -388,9 +388,9 @@ var control = (function() {
       header.render();
       data.save();
     }, false);
-    helper.e(".control-header-clock-show-seperator").addEventListener("change", function() {
+    helper.e(".control-header-clock-show-separator").addEventListener("change", function() {
       state.change({
-        path: "header.clock.show.seperator",
+        path: "header.clock.show.separator",
         value: this.checked
       });
       clock.clear();
@@ -482,11 +482,11 @@ var control = (function() {
     helper.e(".control-header-date-show-day").checked = state.get().header.date.show.day;
     helper.e(".control-header-date-show-month").checked = state.get().header.date.show.month;
     helper.e(".control-header-date-show-year").checked = state.get().header.date.show.year;
-    helper.e(".control-header-date-show-seperator").checked = state.get().header.date.show.seperator;
+    helper.e(".control-header-date-show-separator").checked = state.get().header.date.show.separator;
     helper.e(".control-header-clock-show-seconds").checked = state.get().header.clock.show.seconds;
     helper.e(".control-header-clock-show-minutes").checked = state.get().header.clock.show.minutes;
     helper.e(".control-header-clock-show-hours").checked = state.get().header.clock.show.hours;
-    helper.e(".control-header-clock-show-seperator").checked = state.get().header.clock.show.seperator;
+    helper.e(".control-header-clock-show-separator").checked = state.get().header.clock.show.separator;
     helper.e(".control-header-clock-24").checked = state.get().header.clock.hour24;
     helper.e(".control-header-clock-show-meridiem").checked = state.get().header.clock.show.meridiem;
     helper.e(".control-header-edit-add-active").checked = state.get().header.editAdd.active;
diff --git a/js/date.js b/js/date.js
index 9b04d6ca..1edd1e41 100644
--- a/js/date.js
+++ b/js/date.js
@@ -74,20 +74,20 @@ var date = (function() {
       if (state.get().header.date.show.year) {
         date.appendChild(year);
       };
-      if (state.get().header.date.show.seperator) {
+      if (state.get().header.date.show.separator) {
         var parts = date.querySelectorAll("span");
         if (parts.length > 1) {
           parts.forEach(function(arrayItem, index) {
             if (index > 0) {
-              var seperator = helper.makeNode({
+              var separator = helper.makeNode({
                 tag: "span",
                 text: sepCha,
                 attr: [{
                   key: "class",
-                  value: "date-seperator"
+                  value: "date-separator"
                 }]
               });
-              date.insertBefore(seperator, arrayItem);
+              date.insertBefore(separator, arrayItem);
             };
           });
         };
diff --git a/js/state.js b/js/state.js
index f805513c..198f85f6 100644
--- a/js/state.js
+++ b/js/state.js
@@ -9,7 +9,7 @@ var state = (function() {
           day: false,
           month: true,
           year: false,
-          seperator: true
+          separator: true
         }
       },
       clock: {
@@ -18,7 +18,7 @@ var state = (function() {
           seconds: true,
           minutes: true,
           hours: true,
-          seperator: true,
+          separator: true,
           meridiem: true
         }
       },