diff --git a/public/app.js b/public/app.js
index 82b75cc..0e5cc53 100644
--- a/public/app.js
+++ b/public/app.js
@@ -545,6 +545,10 @@ uiModules.get('app/logtrail').directive('clickOutside', function ($document) {
                 e.target.id === 'host-picker-btn' ||
                 e.target.id === 'settings-btn') {
               scope.popup = angular.element('#' + e.target.id.replace('-btn','')).removeClass('ng-hide');
+              var buttonCenter = e.target.getBoundingClientRect().x + (e.target.getBoundingClientRect().width/2);
+              var popupWidth = scope.popup.width();
+              scope.popup.css("left",buttonCenter - (popupWidth/2));
+              scope.popup.css("min-width",popupWidth);
             }
         }
       });
diff --git a/public/css/main.css b/public/css/main.css
index 2ce3f0b..1e88640 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -40,6 +40,10 @@ html,body {
 	margin-left: 1em;
 	font-weight: bold;
 	color: black;
+	max-width: 20em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 .time-option-select-btn {
@@ -128,14 +132,14 @@ html,body {
 }
 
 .host-picker {
-	position: absolute;
+	position: fixed;
 	background: white;
 	border: 4px solid rgb(128,128,128);
-	width: 16em;
+	max-width: 50em;
+	min-width: 15em;
 	height: auto;
 	border-radius: 6px;
 	bottom: 5.5em;
-	left: 71em;
 	padding: 0;
 }
 
@@ -190,11 +194,12 @@ html,body {
 .host-picker-search {
 	border: 2px solid #84BACC;
 	background: white;
+	width: 90%;
 }
 
 
 .date-picker {
-	position: absolute;
+	position: fixed;
 	background: white;
 	border: 4px solid rgb(128,128,128);
 	padding: 1em;
@@ -202,7 +207,6 @@ html,body {
 	height: 7em;
 	border-radius: 6px;
 	bottom: 5.5em;
-	left: 72em;
 }
 
 .date-picker:after, .date-picker:before {
@@ -235,6 +239,7 @@ html,body {
 	margin-left: .2em;
 	font-weight: bold;
 	color: black;
+	background-color: darkgray;
 }
 
 .flex-container-date-picker > .submit:enabled:hover {
@@ -340,14 +345,13 @@ html,body {
 }
 
 .settings {
-	position: absolute;
+	position: fixed;
 	background: white;
 	border: 4px solid rgb(128,128,128);
 	width: 20em;
 	height: auto;
 	border-radius: 6px;
 	bottom: 5.5em;
-	left: 80em;
 	padding: 0;	
 	color: black;
 	padding: 1em;
diff --git a/public/templates/index.html b/public/templates/index.html
index 25c5904..e8250d1 100644
--- a/public/templates/index.html
+++ b/public/templates/index.html
@@ -23,12 +23,11 @@
             placeholder='"access denied" 1.2.3.4 -sshd' title='Default search field : message'></input>
         <div ng-hide="userSearchText !== null && userSearchText.length > 0" class="lucene-hint"><a href="https://www.elastic.co/guide/en/elasticsearch/reference/5.6/query-dsl-query-string-query.html#query-string-syntax" target="_blank">Uses lucene query syntax</a></div>
         <button class="submit btn search-btn flex-item-search" >Search</button>
-        <button type="button" id="host-picker-btn" class="btn host-option-select-btn flex-item-search"
-          ng-click="showHostPicker()">{{selectedHost == null ? 'All Systems' : selectedHost}}</button>
-        <button type="button" id="date-picker-btn" class="time-option-select-btn btn flex-item-search"
-          ng-click="showDatePicker()">{{ isNullorEmpty(userDateTimeSeeked) ? 'Now' : userDateTimeSeeked }}</button>
-        <button type="button" id="settings-btn" class="settings-select-btn btn flex-item-search"
-          ng-click="showSettings()">Settings</button>
+        <button type="button" id="host-picker-btn" class="btn host-option-select-btn flex-item-search">
+          {{selectedHost == null ? 'All Systems' : selectedHost}}</button>
+        <button type="button" id="date-picker-btn" class="time-option-select-btn btn flex-item-search">
+          {{ isNullorEmpty(userDateTimeSeeked) ? 'Now' : userDateTimeSeeked }}</button>
+        <button type="button" id="settings-btn" class="settings-select-btn btn flex-item-search">Settings</button>
       </div>
     </form>
     <div class="date-picker ng-hide" id="date-picker" click-outside>
@@ -47,7 +46,9 @@
 
     <div class="host-picker ng-hide" id="host-picker" click-outside>
       <ul class="host-picker-list">
-        <li ng-repeat="host in hosts" ng-hide="hostSearchText != null && !host.includes(hostSearchText)"><a href ng-click="onHostSelected(host)">{{host}}</a></li>
+        <li ng-repeat="host in hosts" ng-hide="hostSearchText != null && !host.includes(hostSearchText)"><a href ng-click="onHostSelected(host)">{{host}}</a></li>       
+      </ul>
+      <ul class="host-picker-list">
         <li> <a href ng-click="onHostSelected('*')"> [ All Systems ] </a></li>
         <li ng-hide="hosts.length < 11"><input class="host-picker-search" type="search" name="host-search-input" ng-model="hostSearchText"/></li>
       </ul>
diff --git a/server/routes/init_server_context.js b/server/routes/init_server_context.js
index 85e02b3..cd93624 100644
--- a/server/routes/init_server_context.js
+++ b/server/routes/init_server_context.js
@@ -25,10 +25,12 @@ function loadConfigFromES(server,context) {
 function updateKeywordInfo(server,indexPattern, fieldKey) {
   return new Promise((resolve,reject) => {
     var field = indexPattern.fields.mapping[fieldKey];
+    //check if the direct field is of type keyword
     checkIfFieldIsKeyword(server,indexPattern, field).then(async function(result) {
       if (result) {
         indexPattern.fields.mapping[fieldKey + ".keyword"] = field;
       } else {
+        //else check if we have .keyword mapping added by logstash template.
         result = await checkIfFieldIsKeyword(server,indexPattern, field + ".keyword");
         if (result) {
           indexPattern.fields.mapping[fieldKey + ".keyword"] = field + ".keyword";
diff --git a/server/routes/server.js b/server/routes/server.js
index 123afe0..05f0ad8 100644
--- a/server/routes/server.js
+++ b/server/routes/server.js
@@ -3,7 +3,7 @@ import { initServerContext, updateKeywordInfo } from "./init_server_context.js"
 function getMessageTemplate(handlebar, selected_config) {
   var message_format = selected_config.fields.message_format;
   //Append <a> tags for click to message format except for message field
-    var message_format_regex = /({{{(\S+)}}})/g; // e.g. {{pid}} : {{syslog_message}}
+    var message_format_regex = /({{{[\[]?([\w+\.\_]+)[\]]?}}})/g; // e.g. {{{[pid]}}} {{{program}}} : {{syslog_message}}
     var ng_click_template = handlebar.compile("<a class=\"ng-binding\" ng-click=\"onClick('{{name_no_braces}}','{{name}}')\">{{name}}</a>",
       {
       knownHelpers: {
@@ -172,7 +172,7 @@ module.exports = function (server) {
           }
         };
         var hostnameField = selected_config.fields.mapping.hostname;
-        if (selected_config.fields['hostname.keyword']) {
+        if (selected_config.fields.mapping['hostname.keyword']) {
           hostnameField += '.keyword';
         }
         termQuery.term[hostnameField] = request.payload.hostname;