diff --git a/css/date.css b/css/date.css
index 94fcf211..f5290d72 100644
--- a/css/date.css
+++ b/css/date.css
@@ -9,7 +9,7 @@
   min-height: 2.5em;
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: flex-start;
   flex-wrap: nowrap;
 }
 
@@ -20,7 +20,7 @@
 .date-year {
   font-size: 1.5em;
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 }
 
diff --git a/css/greeting.css b/css/greeting.css
new file mode 100644
index 00000000..a00653b4
--- /dev/null
+++ b/css/greeting.css
@@ -0,0 +1,28 @@
+.greeting {
+  margin: 0;
+  padding: 0;
+  border-radius: var(--radius);
+  font-size: 1em;
+  font-family: var(--font-fjalla);
+  color: rgb(var(--white));
+  width: 100%;
+  min-height: 2.5em;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+
+.greeting-item {
+  font-size: 1.5em;
+  max-width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.greeting-item-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/css/header.css b/css/header.css
index a7f246ce..426e6e4b 100644
--- a/css/header.css
+++ b/css/header.css
@@ -51,9 +51,10 @@
 
 .header-item {
   margin: var(--gutter);
+  max-width: calc(100% - var(--gutter) * 2);
   display: flex;
   flex-wrap: nowrap;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
   position: relative;
 }
@@ -102,6 +103,7 @@
 .header-search,
 .header-edit-add,
 .header-accent,
+.header-greeting,
 .header-menu {
   display: none;
 }
@@ -111,6 +113,7 @@
 .is-header-clock-show .header-clock,
 .is-header-edit-add .header-edit-add,
 .is-header-accent .header-accent,
+.is-header-greeting .header-greeting,
 .is-menu .header-menu {
   display: flex;
 }
diff --git a/index.html b/index.html
index cf8f3e77..44fd8812 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,4 @@
+﻿
 <!DOCTYPE html>
 <html lang="en">
 
@@ -25,6 +26,7 @@
   <link rel="stylesheet" href="css/header.css">
   <link rel="stylesheet" href="css/date.css">
   <link rel="stylesheet" href="css/clock.css">
+  <link rel="stylesheet" href="css/greeting.css">
   <link rel="stylesheet" href="css/search.css">
   <link rel="stylesheet" href="css/background.css">
   <link rel="stylesheet" href="css/link.css">
@@ -42,6 +44,9 @@
     <div class="header-border"></div>
     <div class="container">
       <div class="header-area">
+        <div class="header-item header-greeting">
+          <p class="greeting"></p>
+        </div>
         <div class="header-item header-clock">
           <p class="clock"></p>
         </div>
@@ -111,6 +116,29 @@
       <div class="menu-content">
 
         <div class="menu-content-area menu-content-area-header">
+          <div class="menu-item">
+            <h1 class="menu-header">Greeting</h1>
+            <div class="checkbox-wrap">
+              <input id="control-header-greeting-show" class="control-header-greeting-show" type="checkbox" tabindex="1">
+              <label for="control-header-greeting-show"><span class="label-icon"></span>Show</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-header-greeting-type-good" class="control-header-greeting-type-good" type="radio" name="control-header-greeting-type" value="good" tabindex="1">
+              <label for="control-header-greeting-type-good"><span class="label-icon"></span>"Good morning..."</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-header-greeting-type-hello" class="control-header-greeting-type-hello" type="radio" name="control-header-greeting-type" value="hello" tabindex="1">
+              <label for="control-header-greeting-type-hello"><span class="label-icon"></span>"Hello..."</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-header-greeting-type-hi" class="control-header-greeting-type-hi" type="radio" name="control-header-greeting-type" value="hi" tabindex="1">
+              <label for="control-header-greeting-type-hi"><span class="label-icon"></span>"Hi..."</label>
+            </div>
+            <div class="input-wrap form-indent-1">
+              <label for="control-header-greeting-name">Name</label>
+              <input id="control-header-greeting-name" class="control-header-greeting-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Nickname, alias or superhero name" tabindex="1">
+            </div>
+          </div>
           <div class="menu-item">
             <h1 class="menu-header">Clock</h1>
             <div class="checkbox-wrap">
@@ -203,7 +231,7 @@
             </div>
             <div class="input-wrap form-indent-2">
               <label for="control-header-search-engine-custom-url">URL</label>
-              <input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
+              <input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="1">
             </div>
           </div>
           <div class="menu-item">
@@ -282,7 +310,6 @@
             </div>
           </div>
         </div>
-
         <div class="menu-content-area menu-content-area-bookmarks is-hidden">
           <div class="menu-item">
             <h1 class="menu-header">Bookmarks</h1>
@@ -447,6 +474,7 @@
 <script src="js/shade.js"></script>
 <script src="js/theme.js"></script>
 <script src="js/date.js"></script>
+<script src="js/greeting.js"></script>
 <script src="js/clock.js"></script>
 <script src="js/search.js"></script>
 <script src="js/link.js"></script>
diff --git a/js/control.js b/js/control.js
index 4647d81c..d572c69e 100644
--- a/js/control.js
+++ b/js/control.js
@@ -359,6 +359,61 @@ var control = (function() {
       render();
       dependents();
     }
+  }, {
+    element: helper.e(".control-header-greeting-show"),
+    path: "header.greeting.show",
+    type: "checkbox",
+    func: function() {
+      render();
+      dependents();
+      greeting.clear();
+      greeting.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-greeting-type-good"),
+    path: "header.greeting.type",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      greeting.clear();
+      greeting.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-greeting-type-hello"),
+    path: "header.greeting.type",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      greeting.clear();
+      greeting.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-greeting-type-hi"),
+    path: "header.greeting.type",
+    type: "radio",
+    func: function() {
+      render();
+      dependents();
+      greeting.clear();
+      greeting.render();
+      header.render();
+    }
+  }, {
+    element: helper.e(".control-header-greeting-name"),
+    path: "header.greeting.name",
+    type: "text",
+    func: function() {
+      render();
+      dependents();
+      greeting.clear();
+      greeting.render();
+      header.render();
+    }
   }, {
     element: helper.e(".control-bookmarks-show-url"),
     path: "bookmarks.show.url",
@@ -729,6 +784,13 @@ var control = (function() {
         helper.removeClass(html, "is-header-accent");
       };
     };
+    var _greeting = function() {
+      if (state.get().header.greeting.show) {
+        helper.addClass(html, "is-header-greeting");
+      } else {
+        helper.removeClass(html, "is-header-greeting");
+      };
+    };
     var _background = function() {
       if (state.get().background.image.show) {
         helper.addClass(html, "is-background-image-show");
@@ -761,6 +823,7 @@ var control = (function() {
     _menu();
     _alignment();
     _edit();
+    _greeting();
     _date();
     _clock();
     _search();
@@ -802,6 +865,21 @@ var control = (function() {
         helper.e(".control-header-date-character-length-long").disabled = true;
       };
     };
+    var _greeting = function() {
+      if (state.get().header.greeting.show) {
+        helper.e("[for=control-header-greeting-name]").removeAttribute("disabled", "");
+        helper.e(".control-header-greeting-name").disabled = false;
+        helper.e(".control-header-greeting-type-good").disabled = false;
+        helper.e(".control-header-greeting-type-hello").disabled = false;
+        helper.e(".control-header-greeting-type-hi").disabled = false;
+      } else {
+        helper.e("[for=control-header-greeting-name]").setAttribute("disabled", "");
+        helper.e(".control-header-greeting-name").disabled = true;
+        helper.e(".control-header-greeting-type-good").disabled = true;
+        helper.e(".control-header-greeting-type-hello").disabled = true;
+        helper.e(".control-header-greeting-type-hi").disabled = true;
+      };
+    };
     var _clock = function() {
       var activeCount = 0;
       var toCheck = [state.get().header.clock.show.seconds, state.get().header.clock.show.minutes, state.get().header.clock.show.hours];
@@ -941,6 +1019,7 @@ var control = (function() {
       };
     };
     _edit();
+    _greeting();
     _date();
     _clock();
     _search();
diff --git a/js/greeting.js b/js/greeting.js
new file mode 100644
index 00000000..aa441fbf
--- /dev/null
+++ b/js/greeting.js
@@ -0,0 +1,64 @@
+var greeting = (function() {
+
+  var clear = function() {
+    var greeting = helper.e(".greeting");
+    while (greeting.lastChild) {
+      greeting.removeChild(greeting.lastChild);
+    };
+  };
+
+  var render = function() {
+    var _greeting = function() {
+      var greeting = helper.e(".greeting");
+      var message = {
+        hi: function() {
+          return "Hi";
+        },
+        hello: function() {
+          return "Hello";
+        },
+        good: function() {
+          var time = helper.getDateTime();
+          var message = ["Good night", "Good morning", "Good afternoon", "Good evening"];
+          return message[Math.floor(time.hours / 6)];
+        }
+      };
+      var greetingMessage = message[state.get().header.greeting.type]();
+      if (state.get().header.greeting.name != "" && state.get().header.greeting.name != undefined) {
+        greetingMessage = greetingMessage + ", " + state.get().header.greeting.name;
+      };
+      var greetingItem = helper.makeNode({
+        tag: "span",
+        attr: [{
+          key: "class",
+          value: "greeting-item"
+        }]
+      });
+      var greetingItemText = helper.makeNode({
+        tag: "span",
+        text: greetingMessage,
+        attr: [{
+          key: "class",
+          value: "greeting-item-text"
+        }]
+      });
+      greetingItem.appendChild(greetingItemText);
+      greeting.appendChild(greetingItem);
+    };
+    if (state.get().header.greeting.show) {
+      _greeting();
+    };
+  };
+
+  var init = function() {
+    render();
+  };
+
+  // exposed methods
+  return {
+    init: init,
+    render: render,
+    clear: clear
+  };
+
+})();
diff --git a/js/init.js b/js/init.js
index 31554f4d..d6c5f08d 100644
--- a/js/init.js
+++ b/js/init.js
@@ -27,6 +27,10 @@ link.init();
 // render states
 control.init();
 
+// render date
+// bind date update
+greeting.init();
+
 // render date
 // bind date update
 date.init();
diff --git a/js/state.js b/js/state.js
index fa4b4125..061df8f6 100644
--- a/js/state.js
+++ b/js/state.js
@@ -63,6 +63,11 @@ var state = (function() {
           top: false,
           bottom: false
         }
+      },
+      greeting: {
+        show: false,
+        type: "good",
+        name: ""
       }
     },
     bookmarks: {
diff --git a/js/update.js b/js/update.js
index 485dbe77..ba4dee45 100644
--- a/js/update.js
+++ b/js/update.js
@@ -197,13 +197,17 @@ var update = (function() {
         console.log("\t -- running update", "2.10.0");
         data.version = "2.10.0";
       };
-    } else if (typeof data.version == "string") {
-      // new updates will go here
-      // example update compare check
-      // if (version.compare(data.version, "2.11.0") == -1) {
-      //   console.log("\t -- running update", "2.11.0");
-      //   data.version = "2.11.0";
-      // };
+    };
+    if (typeof data.version == "string") {
+      if (version.compare(data.version, "2.11.0") == -1) {
+        console.log("\t -- running update", "2.11.0");
+        data.state.header.greeting = {
+          show: false,
+          type: "good",
+          name: ""
+        };
+        data.version = "2.11.0";
+      };
     };
     // if no update is needed
     // version bump
diff --git a/js/version.js b/js/version.js
index 748a8b05..08f628dc 100644
--- a/js/version.js
+++ b/js/version.js
@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "2.10.0";
+  var current = "2.11.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");
