diff --git a/bin/docker-plugin.js b/bin/docker-plugin.js
index 7b6b207..18e2e2d 100644
--- a/bin/docker-plugin.js
+++ b/bin/docker-plugin.js
@@ -62,6 +62,7 @@ const docker = new Docker(dockerOpts)
 const ENTRYPOINT_PATH = process.env['ENTRYPOINT_PATH'] || '/cronicle.sh'
 const cname = 'cronicle-' + (process.env['JOB_ID'] || process.pid)
 let imageName = process.env['IMAGE'] || 'alpine'
+let network = process.env['NETWORK']
 let script = process.env['SCRIPT'] ?? "#!/bin/sh\necho 'No script specified'"
 const autoPull = !!parseInt(process.env['PULL_IMAGE'])
 const autoRemove = !parseInt(process.env['KEEP_CONTAINER'])
@@ -140,6 +141,8 @@ if (!keepEntrypoint) {
     createOptions.WorkingDir = path.dirname(ENTRYPOINT_PATH)
 }
 
+if(network) createOptions.HostConfig['NetworkMode'] = network
+
 
 // ----------------RUNNING CONTAINER -------- //
 
diff --git a/bin/manager b/bin/manager
index 57c8cd4..8b3c771 100755
--- a/bin/manager
+++ b/bin/manager
@@ -3,6 +3,8 @@ HOMEDIR="$(dirname "$(cd -- "$(dirname "$(readlink -f "$0")")" && (pwd -P 2>/dev
 
 usage() {
   echo "USAGE: ./manager [ --port 3012 ] [ --storage /path/to/storage.json ] [ --key secreKey ] [ --color ] "
+  echo "                 [ --reset ]  # set current host as manager"
+  echo "                 [ --cluster "server1,server2" ]  # add extra workers on setup"
   exit 1
 }
 
@@ -15,6 +17,8 @@ while (( "$#" )); do
         --key ) shift; key=$1 ;;
         --storage ) shift; storage=$1 ;;
         --sqlite ) shift; sqlite=$1 ;;
+        --reset ) shift; reset=1 ;;
+        --cluster ) shift; cluster=$1 ;;
         --help ) usage ;;
         -*) echo "invalid parameter: $1"; usage ;;
     esac
@@ -44,12 +48,29 @@ if [[ $key ]]; then
   echo "Custom secret key set: *****"
 fi
 
+if [[ $cluster ]]; then
+  export CRONICLE_cluster="$cluster"
+  echo "Following nodes will be added on setup: $cluster"
+fi
+
 # pull data from git if needed
 # if [ ! -d data/global ] && [ -v GIT_REPO ]; then
 #         git clone $GIT_REPO $HOMEDIR/data
 # fi
 
-$HOMEDIR/bin/control.sh setup
+# check for custom nodejs binary
+if [ -f $HOMEDIR/nodejs/bin/node ]; then
+      export PATH="$HOMEDIR/nodejs/bin:$PATH"
+      echo "using custom node version: $(node -v)"
+fi
+
+
+# setup storage OR make current host the primary manager if needed
+if [ "$reset" = 1 ]; then
+  node $HOMEDIR/bin/storage-cli.js reset
+else $HOMEDIR/bin/control.sh setup
+fi
+
 
 if [ -f "$HOMEDIR/logs/cronicled.pid" ]; then
   echo 'removing old pid file'
@@ -63,12 +84,6 @@ if [ -f "$HOMEDIR/data/backup.json" ]; then
   rm "$HOMEDIR/data/backup.json"
 fi
 
-# check for custom nodejs binary
-if [ -f $HOMEDIR/nodejs/bin/node ]; then
-      export PATH="$HOMEDIR/nodejs/bin:$PATH"
-      echo "using custom node version: $(node -v)"
-fi
-
 BINARY="node $HOMEDIR/lib/main.js"
 # check if bundle exist
 if [ -f "$HOMEDIR/bin/cronicle.js" ]; then
diff --git a/bin/manager.bat b/bin/manager.bat
index 6e209a1..713a006 100644
--- a/bin/manager.bat
+++ b/bin/manager.bat
@@ -43,8 +43,22 @@ if /I "%1"=="--port" (
     echo Using sqlite as storage: %~f2
     shift
     shift
+) else if /I "%1"=="--cluster" (
+    if "%2"=="" (
+      echo Missing cluster value. Specify comma-separatd hostnames
+      exit
+    )    
+    set CRONICLE_cluster=%2
+    echo These servers will be added on setup: %2
+    shift
+    shift
+) else if /I "%1"=="--reset" (
+  set CRONICLE_RESET=1
+  shift
 ) else if /I "%1"=="--help" (
-    echo Usage:  .\manager [--port  port] [ --storage /path/to/storage.json]
+    echo Usage:  .\manager [--port  port] [ --storage /path/to/storage.json] 
+    echo         [ --reset ]  # make current host the manager
+    echo         [ --cluster "server1,server2"]  # add extra workers on setup
     shift    
 ) else (exit)
 
@@ -59,11 +73,12 @@ IF EXIST "%~dp0..\nodejs\node.exe" (
   SET "PATH=%~dp0..\nodejs;%PATH%"
 )
 
-node .\storage-cli.js setup
-
-if not "%~1"=="" (
-    set "CRONICLE_WebServer__http_port=%1"
-    echo CRONICLE_http_port is set to %1
+REM setup or reset manager
+if "%CRONICLE_RESET%"=="1" (
+  node .\storage-cli.js reset
+  echo Croncile manager was reset to current host
+) else (
+  node .\storage-cli.js setup
 )
 
 node .\cronicle.js --manager --echo --foreground --color
diff --git a/bin/sshx-plugin.js b/bin/sshx-plugin.js
index d991f0d..980fd6d 100644
--- a/bin/sshx-plugin.js
+++ b/bin/sshx-plugin.js
@@ -9,7 +9,10 @@ const fs = require('fs')
 // read job info from stdin (sent by Cronicle engine)
 const job = JSON.parse(fs.readFileSync(process.stdin.fd))
 
-const print = (text) => process.stdout.write(text + EOL)
+let pref = ''
+if(job.params.annotate) pref = `[${new Date().toISOString()}] `
+
+const print = (text) => process.stdout.write(pref + text + EOL)
 const printInfo = (text) => process.stdout.write(`[INFO] \x1b[32m${text}\x1b[0m` + EOL)
 const printWarning = (text) => process.stdout.write(`[INFO] \x1b[33m${text}\x1b[0m` + EOL)
 const printError = (text) => process.stdout.write(`\x1b[31m${text}\x1b[0m` + EOL)
diff --git a/bin/storage-cli.js b/bin/storage-cli.js
index 6e7ed85..7e44a99 100755
--- a/bin/storage-cli.js
+++ b/bin/storage-cli.js
@@ -10,6 +10,7 @@ var os = require('os');
 var fs = require('fs');
 var async = require('async');
 var bcrypt = require('bcrypt-node');
+var dns = require('dns')
 
 var Args = require('pixl-args');
 var Tools = require('pixl-tools');
@@ -155,6 +156,27 @@ for (var env_key in process.env) {
 	}
 }
 
+// helper function to resolve IPs for CRONICLE_cluster
+const getIPsForHostnames = async (hostnames) => {
+    const ipPromises = hostnames.map(hostname => {
+        return new Promise((resolve, reject) => {
+            dns.lookup(hostname.trim(), (err, ip) => {
+                if (err) resolve({ hostname: hostname.trim(), ip: null });
+				else resolve({ hostname: hostname.trim(), ip });
+            });
+        });
+    });
+
+    try {
+        // Wait for all DNS lookups to finish
+        const ips = await Promise.all(ipPromises);
+        return ips;
+    } catch (error) {
+        console.error("Error fetching IP addresses:", error);
+        return [];
+    }
+};
+
 // construct standalone storage server
 var storage = new StandaloneStorage(config.Storage, function (err) {
 	if (err) throw err;
@@ -188,12 +210,19 @@ var storage = new StandaloneStorage(config.Storage, function (err) {
 
 			// make sure this is only run once
 			// changing exit code to 0, so it won't break docker entry point
-			storage.get('global/users', function (err) {
+			storage.get('global/users', async function (err) {
 				if (!err) {
 					print("Storage has already been set up.  There is no need to run this command again.\n\n");
 					process.exit(0);
 				}
 
+				if(process.env['CRONICLE_cluster']) {
+					let servers = await getIPsForHostnames(process.env['CRONICLE_cluster'].split(','))
+					servers.forEach(server =>{
+						setup.storage.push(["listPush", "global/servers", server])
+					})
+				}
+
 				async.eachSeries(setup.storage,
 					function (params, callback) {
 						verbose("Executing: " + JSON.stringify(params) + "\n");
@@ -230,6 +259,34 @@ var storage = new StandaloneStorage(config.Storage, function (err) {
 			});
 			break;
 
+		case 'reset':
+
+			let newGroup = { regexp: '^(' + Tools.escapeRegExp(hostname) + ')$' }
+
+			storage.listFindUpdate('global/server_groups', { id: "maingrp" }, newGroup, function (err) {
+				if (err) throw err;
+				print(`Main group regex is set to [ ${newGroup.regexp} ]`);
+				print("\n");
+
+					storage.listFind("global/servers", { hostname: hostname }, function (err, item) {
+						// already exist?
+						if (item) {
+							print(`${hostname} already exist in server list\n`);
+							storage.shutdown(function () { process.exit(1); });
+						}
+						else {
+							storage.listPush("global/servers", { hostname: hostname, ip: ip }, function (err) {
+								if (err) throw err;
+								print(`Added ${hostname} to server list (remove old servers from UI as needed)\n`);								
+								storage.shutdown(function () { process.exit(0); });
+							})
+						}
+
+					})
+
+			});
+			break;
+
 		case 'admin':
 			// create or replace admin account
 			// Usage: ./storage-cli.js admin USERNAME PASSWORD [EMAIL]
diff --git a/htdocs/css/style.css b/htdocs/css/style.css
index c25a957..3a8683d 100644
--- a/htdocs/css/style.css
+++ b/htdocs/css/style.css
@@ -650,7 +650,6 @@ td.table_label {
 
 		tr.focus td {
 			animation: 4s focus;
-
 		}
 
 		body.dark span.color_label.gray {
@@ -749,6 +748,10 @@ td.table_label {
 		}
 
 		span.red2 {
+			background-color: #d9667a;
+		}
+
+		body.dark span.red2 {
 			background-color: #ac394d;
 		}
 
@@ -762,7 +765,7 @@ td.table_label {
         }
 
         .wflog.grid-item {
-            border: 1px solid #ccc;
+            border:  0.1px solid rgba(48,48,48,1);
             padding: 10px;
 			word-wrap: break-word;
 			overflow: hidden;
@@ -772,4 +775,315 @@ td.table_label {
         .wflog.grid-title {   
 			/* font-weight: bold;        */
 			font-size: 1.6em;
-        }
\ No newline at end of file
+        }
+
+		.flex-container {
+			display: flex;
+			white-space: nowrap;
+			flex-wrap: nowrap;
+			justify-content: space-between;
+			/* align-items: center; */
+		}
+
+		.flex-container.widget {
+			align-items: center;
+			justify-content:space-between;
+		}
+
+		.flex-container-stats {
+			display: flex;
+			white-space: nowrap;
+			flex-wrap: wrap;
+			justify-content: space-around;
+			/* align-items: center; */
+		}
+		
+		.upcoming.grid-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); 
+            gap: 12px;
+            padding: 10px;
+			direction: ltr;
+        }
+
+		.upcoming.schedule.grid-container {
+			grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+			padding-top: 0px;
+			gap: 14px;
+		
+		}
+
+		.stats.grid-container {
+            display: grid;
+			background-color: var(--box-background-color);
+			border: 1px solid var(--border-color);
+			border-right: 0px;
+            /* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  */
+			grid-template-columns: repeat(10, auto);
+			align-items: center; 
+            gap: 0px;
+            padding: 0px;
+			direction: ltr;
+			/* background-color: #80808005; */
+			/* border-radius: 6px; */
+
+        }
+
+		.stats.grid-item {
+			border: 0px;
+            border-right: 1px solid var(--border-color);
+			/* border-top: 1px solid var(--border-color); */
+			/* border-bottom: 1px solid var(--border-color); */
+			background-color: var(--box-background-color);
+			/* background-color: #FAFAFA; */
+			/* transition: border-width 0.3s; */
+            padding: 6px;
+			border-radius: 0px;
+			/* border-top-left-radius: 6px; */
+			/* border-bottom-left-radius: 6px; */
+			word-wrap: break-word;
+			white-space: wrap;
+			overflow: hidden;
+			/* white-space: normal; */
+			direction: ltr;
+			/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
+			/* vertical-align: middle; */
+        }
+
+		/* body.dark .stats.grid-item {
+			border: 1px solid #cccccc26;
+		}
+		body.dark .stats.grid-item {
+			box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
+		} */
+
+		body.dark .stats.grid-item:hover {
+			color: #FFF;
+			background-color: var(--background-color);
+		}
+
+		.stats.grid-item:hover {
+			/* border: 1px solid #cccccc26; */
+			background-color: #cccccc26;
+		}
+
+		/* body.dark .stats.grid-item {
+			background-color: initial;
+		}
+		body.dark .stats.grid-item:hover {
+			color: #FFF;
+			background-color: initial;
+		}
+		.stats.grid-item:hover {
+			background-color: rgba(128,128,128, 0.1);
+		} */
+
+		@media (max-width: 1200px) { 
+			.stats.grid-container {
+				grid-template-columns: repeat(5, 1fr);
+			}
+		}
+
+		.job-details.grid-container {
+            display: grid;
+            /* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  */
+			grid-template-columns: repeat(7, auto);
+			align-items: center; 
+            gap: 0px;
+            padding: 0px;
+			/* padding-bottom: 12px; */
+			margin-top: 12px;
+			margin-bottom: 12px;
+			background-color: var(--background-color);
+			border: 1px solid var( --border-color);
+			border-bottom: 0px;
+			border-left: 0px;
+			border-radius: 0px;
+        }
+
+		.job-details.grid-container.running {
+			grid-template-columns: repeat(6, auto);
+		}
+
+		body.dark .job-details.grid-container {
+			background-color: var(--background-color);
+		}
+
+		.job-details.grid-item {
+			display: flex;
+			align-items: baseline;
+			justify-content: space-evenly;
+			border-bottom: 1px solid var( --border-color);
+			border-left: 1px solid var( --border-color);
+			background-color: var(--background-color);
+			flex-wrap: wrap;
+            padding-top: 8px;
+			/* border-radius: 6px; */
+		}
+
+		body.dark .job-details.grid-item:hover div.info_value {
+			color: white;
+			text-shadow: none;
+		}
+
+        .upcoming.grid-item {
+            border: 1px solid #ccccccde;
+			/* transition: border-width 0.3s; */
+            padding: 8px;
+			border-radius: 12px;
+			word-wrap: break-word;
+			white-space: wrap;
+			overflow: hidden;
+			/* white-space: normal; */
+			direction: ltr;
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+			/* vertical-align: middle; */
+        }
+
+		.upcoming.grid-item.focus {
+			animation: 4s focus;
+		}
+
+
+		body.dark .upcoming.schedule.grid-item {
+            background-color: #44444444			
+			/* color: #fff */
+        }
+
+		.upcoming.schedule.grid-item {
+            /* background-color: #fafafa */
+			background-color: var(--background-color);
+			/* color: #fff */
+        }
+
+		.event-error {
+			color: #bb4444cc;
+		}
+		.event-success {
+			color: #44bb4460;
+		}
+		.event-warning {
+			color: #dbdb34bb;
+		}
+		.event-none {
+			color: #44444400;
+		}
+
+		.section-divider {
+			grid-column: 1 / -1;
+			text-align: left;
+			/* color: initial; */
+			font-size: 1.4em;
+			font-weight: bold;
+		  }	
+
+		.upcoming.warning.grid-item {
+            background-color: #f5e05870;;
+        }
+
+		.upcoming.error.grid-item {
+            background-color: pink;
+        }
+
+		body.dark .upcoming.grid-item {
+			box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
+		}
+
+		.upcoming.minute.grid-item {
+			background-color: #b7ffb770
+		}
+
+		body.dark .upcoming.minute.grid-item {
+			background-color: #2c702cDD;
+			transition: background-color 3s;
+			color: #d3c7c7
+		}
+
+	    .upcoming.grid-item a {
+			font-size: 1.1em;
+		}
+
+	    body.dark .upcoming.grid-item a {
+			color: #3a639b;
+		}
+
+	    body.dark .upcoming.minute.grid-item a {
+			color: #d3c7c7 !important;
+			font-size: 1.2em;
+		}
+		
+		body.dark .upcoming.soon.grid-item a {
+			color: #d3c7c7 !important;
+			font-size: 1.2em;
+		}
+		
+		.upcoming.minute.grid-item a {
+			color: rgb(84, 84, 84) !important;
+			font-size: 1.2em;
+		}
+		
+		.upcoming.soon.grid-item a {
+			color: rgb(84, 84, 84) !important;
+			font-size: 1.2em;
+		}		
+
+		.upcoming.soon.grid-item {
+			background-color: #f5e05870;
+		}
+
+		body.dark .upcoming.soon.grid-item {
+			background-color: rgba(255, 115, 0, 0.7);
+			color: #d3c7c7;
+		}
+
+		.upcoming.grid-item:hover {
+			border-color: rgba(128,128,128,0.5)
+			/* background-color:rgb(0, 255, 0) */			
+		}
+
+		body.dark .upcoming.grid-item:hover:not(.schedule) {
+			/* border-color: rgba(46, 38, 12, 0.4); */
+			color: #FFF;
+		}
+
+		.event-action {
+			font-weight: bold;
+			color:#817c7c;
+			text-decoration: none;
+		}
+
+		.event-action:hover {
+			text-decoration: underline;
+		}
+
+		.search {
+			width : 100px;
+			background-color:gray;
+			-webkit-transition: all 0.3s linear;
+			-moz-transition: all 0.3s linear;
+			border-radius : 15px;
+			outline:none;
+		}
+
+		body.dark .event-action:hover {
+			font-weight: bold;
+			color:#555;
+		}
+
+		body.dark .upcoming.grid-item {
+			border: 1px solid #cccccc26;
+		}
+
+        .upcoming.grid-title {   
+			/* font-weight: bold;        */
+			font-size: 1.2em;
+        }
+
+		.event-search {
+			padding-left:30px;
+			border:0.3px solid #ccccccaa;
+			border-radius:8px;
+			font-size: 1.2em;
+		}
+
+
diff --git a/htdocs/js/app.js b/htdocs/js/app.js
index 1c9f46b..4ba5340 100644
--- a/htdocs/js/app.js
+++ b/htdocs/js/app.js
@@ -819,6 +819,18 @@ function get_pretty_int_list(arr, ranges) {
 	return arr.slice(0, arr.length - 1).join(', ') + ' and ' + arr[ arr.length - 1 ];
 }
 
+function summarize_event_timing_short(timing) {		
+	if(!timing) return "On Demand"
+	let type = 'Hourly'
+	let total = (timing.minutes || []).length || 60
+	if(timing.hours) { total = total*(timing.hours.length || 24); type = 'Daily'} else { total = total*24}
+	if(timing.weekdays) { total = total*(timing.weekdays.length || 1); type = 'Weekly'}
+	if(timing.days) { total = total*(timing.days.length || 1); type = 'Monthly'}
+	if(timing.months) { total = total*(timing.months.length || 1); type = 'Yearly'}
+	if(timing.years) { total = total*(timing.years.length || 1); type = 'Custom'}
+	return `${type} :: ${total}`
+}
+
 function summarize_event_timing(timing, timezone, extra) {
 	// summarize event timing into human-readable string
 	if (!timing && extra) {
diff --git a/htdocs/js/pages/Base.class.js b/htdocs/js/pages/Base.class.js
index 192f69a..1a8bc59 100644
--- a/htdocs/js/pages/Base.class.js
+++ b/htdocs/js/pages/Base.class.js
@@ -60,18 +60,36 @@ Class.subclass(Page, "Page.Base", {
 		return '<div style="white-space:nowrap;"><i class="fa fa-pie-chart">&nbsp;</i>' + id + '</div>';
 	},
 
-	getNiceEvent: function (title, width, style, extra) {
+	getNiceEvent: function (title, width, style, extra, extraTooltip) {
 		if (!width) width = 500;
 		if (!title) return '(None)';
 		if (!style) style = '';
 		if (!extra) extra = '';
+		let tooltip = title.notes ? title.notes.replace(/\"/g, "&quot;") : ""
+		if(extraTooltip) {
+			let cat = title.category_title || '(none)'
+			let plug = title.plugin_title || '(none)'
+			let target = title.group_title || '(none)'
+			tooltip = `<b>Category: </b>${cat}<br><b>Plugin: </b>${plug}<br><b>Target: </b>${target}<b><br>Notes:</b><br>${tooltip}`
+		}
+
 		let icon_class = 'fa fa-clock-o';
 		if(title.plugin == 'workflow') icon_class = 'fa fa-folder';
-		let notes = title.notes ? title.notes.replace(/\"/g, "&quot;") : ""
+
+		let icon =  `<i title="${tooltip}" class="${icon_class}">&nbsp;</i>`
+
+		if (extraTooltip) {
+			if (title.plugin == 'dockerplug') icon = `<span title="${tooltip}" class="mdi mdi-docker"></span>`
+			if (title.plugin == 'shellplug') icon = `<span title="${tooltip}" class="mdi mdi-script"></span>`
+			if (title.plugin == 'sshxplug' || title.plugin == 'sshplug') icon = `<span title="${tooltip}" class="mdi mdi-console"></span>`
+			if (title.plugin == 'urlplug') icon = `<span title="${tooltip}" class="mdi mdi-web"></span>`
+		}
+
 		if (typeof (title) == 'object') {
 			title = title.title
         }
-		return `<div class="ellip" style="max-width:${width}px;${style}"><i title="${notes}" class="${icon_class}">&nbsp;</i>${title}${extra}</div>`;
+		
+		return `<div class="ellip" style="max-width:${width}px;${style}">${icon} ${title}${extra}</div>`;
 	},
 
 	getNiceCategory: function (cat, width, collapse) {
diff --git a/htdocs/js/pages/History.class.js b/htdocs/js/pages/History.class.js
index 4cb5bc7..34672d7 100644
--- a/htdocs/js/pages/History.class.js
+++ b/htdocs/js/pages/History.class.js
@@ -300,6 +300,13 @@ Class.subclass( Page.Base, "Page.History", {
 		if (!args.limit) args.limit = 50;
 		app.api.post( 'app/get_event_history', copy_object(args), this.receive_event_stats.bind(this) );
 	},
+
+	togglePerfLegend: function() {
+		let chart = this.charts.perf
+		if(!chart) return;
+		chart.options.legend.display = !chart.options.legend.display
+		chart.update()
+	},
 	
 	receive_event_stats: function(resp) {
 		// render event stats page
@@ -335,32 +342,11 @@ Class.subclass( Page.Base, "Page.History", {
 				['error_history', "Query History"],
 			]
 		);
-		html += '<div style="padding:20px 20px 30px 20px">';
+		// html += '<div style="padding:20px 20px 30px 20px">';
+
+		let eventTitle = `<a href="#Schedule?sub=edit_event&id=${event.id}">${this.getNiceEvent(event.title, col_width)}</a>`
 		
-		html += '<fieldset style="margin-top:0px; margin-right:0px; padding-top:10px;"><legend>Event Stats</legend>';
-			
-			html += '<div style="float:left; width:25%;">';
-				html += '<div class="info_label">EVENT NAME</div>';
-				html += '<div class="info_value"><a href="#Schedule?sub=edit_event&id='+event.id+'">' + this.getNiceEvent(event.title, col_width) + '</a></div>';
-				
-				html += '<div class="info_label">CATEGORY NAME</div>';
-				html += '<div class="info_value">' + this.getNiceCategory(cat, col_width) + '</div>';
-				
-				html += '<div class="info_label">EVENT TIMING</div>';
-				html += '<div class="info_value">' + (event.enabled ? summarize_event_timing(event.timing, event.timezone) : '(Disabled)') + '</div>';
-			html += '</div>';
-			
-			html += '<div style="float:left; width:25%;">';
-				html += '<div class="info_label">USERNAME</div>';
-				html += '<div class="info_value">' + this.getNiceUsername(event, false, col_width) + '</div>';
-				
-				html += '<div class="info_label">PLUGIN NAME</div>';
-				html += '<div class="info_value">' + this.getNicePlugin(plugin, col_width) + '</div>';
-				
-				html += '<div class="info_label">EVENT TARGET</div>';
-				html += '<div class="info_value">' + this.getNiceGroup(group, event.target, col_width) + '</div>';
-			html += '</div>';
-			
+	
 			var total_elapsed = 0;
 			var total_cpu = 0;
 			var total_mem = 0;
@@ -391,35 +377,29 @@ Class.subclass( Page.Base, "Page.History", {
 				} 
 			}
 			
-			html += '<div style="float:left; width:25%;">';
-				html += '<div class="info_label">AVG. ELAPSED</div>';
-				html += '<div class="info_value">' + get_text_from_seconds(total_elapsed / count, true, false) + '</div>';
-				
-				html += '<div class="info_label">AVG. CPU</div>';
-				html += '<div class="info_value">' + short_float(total_cpu / count) + '%</div>';
-				
-				html += '<div class="info_label">AVG. MEMORY</div>';
-				html += '<div class="info_value">' + get_text_from_bytes( total_mem / count ) + '</div>';
-			html += '</div>';
-			
-			html += '<div style="float:left; width:25%;">';
-				html += '<div class="info_label">SUCCESS RATE</div>';
-				html += '<div class="info_value">' + pct(total_success, count) + '</div>';
-				
-				html += '<div class="info_label">LAST RESULT</div>';
-				html += '<div class="info_value" style="position:relative; top:1px;">' + nice_last_result + '</div>';
-				
-				html += '<div class="info_label">AVG. LOG SIZE</div>';
-				html += '<div class="info_value">' + get_text_from_bytes( total_log_size / count ) + '</div>';
-			html += '</div>';
-			
-			html += '<div class="clear"></div>';
-		html += '</fieldset>';
+		html += `
+		<div class="job-details grid-container running" style="margin:8px">
+		  <div class="job-details  grid-item"><div class="info_label">EVENT NAME:</div><div class="info_value">${eventTitle}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">CATEGORY:</div><div class="info_value">${this.getNiceCategory(cat, col_width) }</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">PLUGIN:</div><div class="info_value">${this.getNicePlugin(plugin, col_width)}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">EVENT TARGET:</div><div class="info_value">${this.getNiceGroup(group, event.target, col_width)}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">USERNAME:</div><div id="d_live_pid" class="info_value">${this.getNiceUsername(event, false, col_width)}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">EVENT TIMING:</div><div class="info_value">${event.enabled ? summarize_event_timing(event.timing, event.timezone) : '(Disabled)'}</div></div>
+ 	  
+		  <div class="job-details  grid-item"><div class="info_label">AVG CPU:</div><div class="info_value">${short_float(total_cpu / count)}%</div></div>		  
+		  <div class="job-details  grid-item"><div class="info_label">AVG MEMORY:</div><div id="d_live_elapsed" class="info_value">${get_text_from_bytes( total_mem / count )}</div></div>   				    			
+		  <div class="job-details  grid-item"><div class="info_label">AVG LOG SIZE:</div><div id="d_live_remain" class="info_value"> ${get_text_from_bytes( total_log_size / count )}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">AVG ELAPSED:</div><div class="info_value">${get_text_from_seconds(total_elapsed / count, true, false)}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">SUCCESS RATE:</div><div class="info_value">${pct(total_success, count)}</div></div> 
+		  <div class="job-details  grid-item"><div class="info_label">LAST RESULT:</div><div class="info_value">${nice_last_result}</div></div>
+		</div>
+		<div class="clear"></div>
+	  `
 		
 		// graph containers
 		html += '<div style="margin-top:15px;">';
-			html += '<div class="graph-title">Performance History</div>';
-			html += '<div id="d_graph_hist_perf" style="position:relative; width:100%; height:300px; overflow:hidden;"><canvas id="c_graph_hist_perf"></canvas></div>';
+			html += '<div class="graph-title" onclick="$P().togglePerfLegend()"><span title="click to toggle legend on History">Performance History<span></div>';
+			html += `<div id="d_graph_hist_perf" style="position:relative; width:100%; height:100%; overflow:hidden;"><canvas height=${Math.round(window.innerHeight/3)} id="c_graph_hist_perf" ></canvas></div>`; // $P().togglePerfLegend()`
 		html += '</div>';
 		
 		html += '<div style="margin-top:10px; margin-bottom:20px; height:1px; background:#ddd;"></div>';
@@ -550,11 +530,14 @@ Class.subclass( Page.Base, "Page.History", {
 					labels: {
 						fontStyle: 'bold',
 						padding: 15
-					}
+					},
+
 				},
+
+
 				title:{
 					display: false,
-					text: ""
+					text: "toggle legend"
 				},
 				scales: {
 					xAxes: [{
@@ -576,13 +559,16 @@ Class.subclass( Page.Base, "Page.History", {
 							callback: function(value, index, values) {
 								if (value < 0) return '';
 								return '' + get_text_from_seconds_round_custom(value, true);
-							}
+							},
+							onClick: function(e,i) {$P().togglePerfLegend()}
 						},
 						scaleLabel: {
 							display: true,
+							onClick: $P().togglePerfLegend
 							// labelString: 'value'
 						}
-					}]
+					}],
+
 				},
 				tooltips: {
 					mode: 'nearest',
diff --git a/htdocs/js/pages/Home.class.js b/htdocs/js/pages/Home.class.js
index e1cc214..596c8c0 100644
--- a/htdocs/js/pages/Home.class.js
+++ b/htdocs/js/pages/Home.class.js
@@ -8,14 +8,14 @@ Class.subclass( Page.Base, "Page.Home", {
 		this.worker.onmessage = this.render_upcoming_events.bind(this);
 		
 		this.div.html(`
+		
 		<div style="padding:10px 20px 20px 20px">
     
         <!-- Header stats -->
 
         <div id="d_home_header_stats"></div>
-        <div style="height:20px;"></div>       
-
-
+        <div style="height:12px;"></div>     
+		
 		<!-- Event Flow -->
 
 		<div class="subtitle">
@@ -57,7 +57,6 @@ Class.subclass( Page.Base, "Page.Home", {
         </div>
 
 		<!-- Queued jobs -->
-
 		<div id="d_home_queue_container" style="display:none">
         <div class="subtitle">
             Event Queues
@@ -72,6 +71,7 @@ Class.subclass( Page.Base, "Page.Home", {
         </div>
         <div id="d_home_upcoming_events" class="loading"></div>
         </div> 
+		<div id="upcoming_grid" class="upcoming grid-container"></div>
 		`)
 	},
 
@@ -110,9 +110,16 @@ Class.subclass( Page.Base, "Page.Home", {
 		var html = '';
 		html += 'Upcoming Events';
 		
-		html += '<div class="subtitle_widget"><i class="fa fa-search">&nbsp;</i><input type="text" id="fe_home_keywords" size="10" placeholder="Find events..." style="border:0px;" value="' + escape_text_field_value( args.keywords ) + '"/></div>';
+		html += '<div class="subtitle_widget"><i class="fa fa-search">&nbsp;</i><input type="text" id="fe_home_keywords" size="10" placeholder="Find events..." style="border:0px;border-radius:5px" value="' + escape_text_field_value( args.keywords ) + '"/></div>';
 		
-		html += `<div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_up_eventlimit" class="subtitle_menu" onChange="$P().nav_upcoming($P().upcoming_offset);"><option>Compact View</option><option>Show All</option></select></div>`;
+		let ue_options = [
+			{title: "Grid View", id: "grid"},
+			{title: "Compact View", id: "compact"},
+			{title: "Show All", id: "all"}
+		]
+		let up_event_select = render_menu_options( ue_options , app.getPref('fe_up_eventlimit') || 'grid', false ) + '</select>'
+
+		html += `<div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_up_eventlimit" class="subtitle_menu" onChange="$P().nav_upcoming($P().upcoming_offset);">${up_event_select}</div>`;
 		html += '<div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_home_target" class="subtitle_menu" style="width:75px;" onChange="$P().set_search_filters()"><option value="">All Servers</option>' + this.render_target_menu_options( args.target ) + '</select></div>';
 		html += '<div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_home_plugin" class="subtitle_menu" style="width:75px;" onChange="$P().set_search_filters()"><option value="">All Plugins</option>' + render_menu_options( app.plugins, args.plugin, false ) + '</select></div>';
 		html += '<div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_home_cat" class="subtitle_menu" style="width:95px;" onChange="$P().set_search_filters()"><option value="">All Categories</option>' + render_menu_options( app.categories, args.category, false ) + '</select></div>';
@@ -176,28 +183,36 @@ Class.subclass( Page.Base, "Page.Home", {
 
 		let errBg = stats.jobs_completed > 0 && (stats.jobs_failed || 0)/stats.jobs_completed > (parseFloat(ui.err_rate) || 0.03) ? 'red2' : 'gray'
 		let errTitle = Object.entries(stats.errorLog || {}).slice(0,20).sort((a,b)=> a[1] < b[1] ? 1 : -1).map(e=>`${e[0]}:\t<b>${e[1]}</b>`).join("\n")
+    // xhtml
 
-		html += ` 
-				<fieldset style="margin-top:0px; margin-right:0px; padding-top:10px;"><legend>Server Stats</legend>
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>EVENTS:&nbsp;<b> <span class="color_label gray">${ active_events.length}</span>&nbsp;</div>
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>CATEGORIES:&nbsp;<b> <span class="color_label gray">${app.categories.length}</span>&nbsp;</div>
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>PLUGINS:&nbsp;<b> <span class="color_label gray">${app.plugins.length}</span>&nbsp;</div>
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>JOBS COMPLETED TODAY:&nbsp;<b> <span class="color_label gray">${stats.jobs_completed || 0 }</span>&nbsp;</div>
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>FAILED:&nbsp;<b> 
-				    <span style="cursor:pointer" onclick='Nav.go("History?sub=error_history&error=1&max=${stats.jobs_failed || 0}")' title="${errTitle}" class="color_label ${errBg}">${stats.jobs_failed || 0}</span>&nbsp;
-				  </div>
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>SUCCESS RATE:&nbsp;<b> <span class="color_label gray">${pct( (stats.jobs_completed || 0) - (stats.jobs_failed || 0), stats.jobs_completed || 1 ) }</span>&nbsp;</div>
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>AVG LOG SIZE:&nbsp;<b> <span class="color_label gray"> 2K</span>&nbsp;</div>
-  
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>MANAGER UPTIME:&nbsp;<b> <span class="color_label gray">${get_text_from_seconds( mserver.uptime || 0, false, true )}</span>&nbsp;</div>
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>CPU:&nbsp;<b> <span class="color_label gray">${short_float(total_cpu)}%</span>&nbsp;</div>
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>MEMORY:&nbsp;<b> <span class="color_label gray">${get_text_from_bytes(total_mem)}</span>&nbsp;</div>
-				  <div style="float:left;padding: 5px 5px 5px 5px;"  class="info_label"><b>SERVERS:&nbsp;<b> <span class="color_label gray">${num_keys(servers)}</span>&nbsp;</div>
-				</fieldset>
-				`
-
-		// $('#d_home_header_stats').html(html);
-		document.getElementById('d_home_header_stats').innerHTML = html;
+	let failed_badge = `<span style="cursor:pointer;" onclick='Nav.go("History?sub=error_history&error=1&max=${stats.jobs_failed || 0}")' title="${errTitle}" class="color_label ${errBg}">${stats.jobs_failed || 0}</span>&nbsp;`
+	
+	status_bar = [
+		{name: "EVENTS", value:  active_events.length},
+		{name: "CATS", value:  app.categories.length},
+		// {name: "PLUGINS", value:  app.plugins.length},
+		{name: "JOBS", value:  stats.jobs_completed || 0},
+		{name: "FAILED", value: failed_badge},
+		{name: "SUCCESS", value:  pct( (stats.jobs_completed || 0) - (stats.jobs_failed || 0), stats.jobs_completed || 1 )},
+		{name: "LOG SIZE", value: get_text_from_bytes((stats.jobs_log_size || 0) / (stats.jobs_completed || 1))},
+		{name: "UPTIME", value:  get_text_from_seconds( mserver.uptime || 0, false, true )},
+		{name: "CPU", value:  `${short_float(total_cpu)}%`},
+		{name: "MEMORY", value:  get_text_from_bytes(total_mem)},
+		{name: "SERVERS", value:  num_keys(servers)}
+	]
+
+	html = '<div class="stats grid-container">'
+	status_bar.forEach(e=>{
+		html += `<div class="stats grid-item"><div class="flex-container-stats">
+		     <div style="padding:2px;font-size:100%"><b>${e.name}:&nbsp;</b></div>
+			 <div style="padding:2px;font-size:100%"><b>&nbsp;${e.value}&nbsp;</b></div>
+		</div></div>
+	`
+	})
+
+	html += "</div>"
+
+	document.getElementById('d_home_header_stats').innerHTML = html;
 	},
 	
 	refresh_upcoming_events: function() {
@@ -214,6 +229,7 @@ Class.subclass( Page.Base, "Page.Home", {
 	
 	nav_upcoming: function(offset) {
 		// refresh upcoming events with new offset
+		app.setPref('fe_up_eventlimit', document.getElementById('fe_up_eventlimit').value)
 		this.upcoming_offset = offset;
 		this.render_upcoming_events({
 			data: this.upcoming_events
@@ -248,6 +264,7 @@ Class.subclass( Page.Base, "Page.Home", {
 		this.upcoming_events = e.data;
 		
 		var viewType = document.getElementById('fe_up_eventlimit').value;
+		let isGrid = viewType === 'grid'
 
 		// apply filters
 		var events = [];
@@ -259,7 +276,7 @@ Class.subclass( Page.Base, "Page.Home", {
 			var stub = e.data[idx];
 			var item = find_object( app.schedule, { id: stub.id } ) || {};
 			
-			if (viewType == "Compact View") { // one row per event, use badge for job count
+			if (viewType == "compact" || isGrid) { // one row per event, use badge for job count
 				
 			    var currSched = moment.tz(stub.epoch * 1000, item.timezone || app.tz).format("h:mm A z");
 			    var currCD = get_text_from_seconds_round(Math.max(60, stub.epoch - now), false);
@@ -291,12 +308,14 @@ Class.subclass( Page.Base, "Page.Home", {
 			
 			events.push( stub );
 		} // foreach item in schedule
+
+		let xhtml = ''
 		
 		var size = get_inner_window_size();
 		var col_width = Math.floor( ((size.width * 0.9) + 50) / 7 );
 		
 		var cols = ['Event Name', 'Category', 'Plugin', 'Target', 'Scheduled Time', 'Countdown', 'Actions'];
-		var limit = 25;
+		var limit = Math.round((window.innerWidth)/350)*4 // try to fit 4 rows
 		
 		html += this.getPaginatedTable({
 			resp: {
@@ -305,7 +324,7 @@ Class.subclass( Page.Base, "Page.Home", {
 					length: events.length
 				}
 			},
-			cols: cols,
+			cols: isGrid ? [] : cols,
 			data_type: 'pending event',
 			limit: limit,
 			offset: this.upcoming_offset,
@@ -327,6 +346,7 @@ Class.subclass( Page.Base, "Page.Home", {
 				var nice_countdown = 'Now';
 				if (stub.epoch > now) {
 					nice_countdown = get_text_from_seconds_round( Math.max(60, stub.epoch - now), false );
+					nice_countdown_short = get_text_from_seconds_round( Math.max(60, stub.epoch - now), true ).replace(' hr', 'h');
 				}
 				
 				if (group && item.multiplex) {
@@ -334,19 +354,33 @@ Class.subclass( Page.Base, "Page.Home", {
 					group.multiplex = 1;
 				}
 
-				var badge = '';
-				if(viewType == "Compact View") {
+				let badge = '';
+				if(viewType == "compact" || isGrid) {
 				  var overLimitRows = stubCounter[stub.id] > maxSchedRows ? ` + ${stubCounter[stub.id] - maxSchedRows} more` : '';
 				  var scheduleList = stubTitle[stub.id] + `</table><span><b>${overLimitRows}</span></b>`
 				  var jobCount = stubCounter[stub.id]
-				  if(jobCount < 10) jobCount = `&nbsp;${jobCount}&nbsp;`;
-				  var badge = `<span title="${scheduleList}" class="color_label gray">${jobCount}</span>`;
+				  if(jobCount < 10 ) jobCount = `&nbsp;${jobCount}&nbsp;`;
+				  badge = `<span title="${scheduleList}" class="color_label gray">${jobCount}</span>`;
 				}
 
-				var eventName = self.getNiceEvent('<b>' + item.title + '</b>', col_width, 'float:left', '<span>&nbsp;&nbsp;</span>')
+				let extraSpace = isGrid ? '<span>&nbsp;</span>' : '<span>&nbsp;&nbsp;</span>'
+				let eventName = self.getNiceEvent('<b>' + item.title + '</b>', col_width, 'float:left', extraSpace)
+
+				if(isGrid) {
+					
+					badge = stubCounter[stub.id] > 1 ? `+${stubCounter[stub.id]-1}` : ''
+
+					// turn minute/hour to min/h if event name is too long
+					if(Math.max(60, stub.epoch - now) <= 60*5) { // for minute/soon (larger font)
+						nice_countdown = `<div title="${scheduleList}">${item.title.length > 18 ? nice_countdown_short : nice_countdown}</div>`
+					}
+					else { // regular
+					   nice_countdown = `<div title="${scheduleList}">${item.title.length > 26 ? nice_countdown_short : nice_countdown}</div>`
+					}					
+				}
 				
 				var tds = [
-					`<a style="float:left" href="#Schedule?sub=edit_event&id=${item.id}"> ${eventName}</a> ${badge} <span style="float:left"></span>`,
+					`<a style="float:left" href="#Schedule?sub=edit_event&id=${item.id}"> ${eventName}</a>${badge}`,
 					self.getNiceCategory( cat, col_width ),
 					self.getNicePlugin( plugin, col_width ),
 					self.getNiceGroup( group, item.target, col_width ),
@@ -362,11 +396,34 @@ Class.subclass( Page.Base, "Page.Home", {
 				}
 
 				if(!app.state.enabled) tds.className += ' disabled'
-				
-				return tds;
+
+				if (isGrid) {
+					let proximity = ''
+					if (stub.epoch - now <= 60*5) proximity = 'soon'
+					if (stub.epoch - now <= 60) proximity = 'minute'
+
+					xhtml += `
+				<div id="${stub.id}" class="upcoming ${proximity} grid-item">
+				 <div class="flex-container">
+				  <div style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">${tds[0]}</div>
+				 <div style="font-size:14px"><b>${nice_countdown}</b></div>
+				</div>				
+				</div>	
+			   `
+					//    <div> <i style="width:20px;cursor:pointer;padding: 2px" class="fa fa fa-plus-circle" title="Add Event" onmouseup="$P().edit_event(-1)"></i></div>
+
+				}
+				else {  // compact table 
+					return tds
+				}
+
+
+
 			} // row callback
 		}); // table
-		
+
+		$('#upcoming_grid').html(xhtml)
+				
 		// $('#d_home_upcoming_events').removeClass('loading').html( html );
 		let upcoming = document.getElementById('d_home_upcoming_events');
 		upcoming.classList.remove('loading');
@@ -406,19 +463,27 @@ Class.subclass( Page.Base, "Page.Home", {
 			}
 
 			let isDark = app.getPref('theme') === 'dark'
-			let green = isDark ? '#44bb44' : 'lightgreen' // success
-			let orange = isDark ? '#bbbb44' : 'orange'  // warning
-			let red = isDark ? '#bb4444' : 'pink'  // error
+			let green = isDark ? '#44bb44DD' : '#90EE90AA' // success
+			let orange = isDark ? '#bbbb44DD' : '#FFA500AA'  // warning
+			let red = isDark ? '#bb4444DD' : '#F88379AA'  // error
 			let statusMap = { 0: green, 255: orange }
 
 			let labels = jobs.map(e => '')
-			if(jobLimit < 100) labels = jobs.map((j, i) => i == 0 ? j.event_title.substring(0, 4) : j.event_title);
+			if(jobLimit <= 100) labels = jobs.map((j, i) => i == 0 ? j.event_title.substring(0, 4) : j.event_title);
+
+			let ctx = document.getElementById('d_home_completed_jobs');
+			// var gradient = ctx.createLinearGradient(0, 0, 0, 400);
+			// gradient.addColorStop(0, 'rgba(250,174,50,1)');   
+			// gradient.addColorStop(1, 'rgba(250,174,50,0)');
+
+
 			let datasets = [{
 				label: 'Completed Jobs',
 				// data: jobs.map(j => Math.ceil(j.elapsed/60)),
 				data: jobs.map(j => Math.ceil(j.elapsed) + 1),
 				backgroundColor: jobs.map(j => statusMap[j.code] || red),
-				jobs: jobs
+				jobs: jobs,
+
 				// borderWidth: 0.3
 			}];
 			let scaleType =  document.getElementById('fe_cmp_job_chart_scale').value || 'logarithmic';
@@ -434,8 +499,7 @@ Class.subclass( Page.Base, "Page.Home", {
 				return
 			} 
 
-			let ctx = document.getElementById('d_home_completed_jobs');
-
+		
 			app.jobHistoryChart = new Chart(ctx, {
 				type: 'bar',
 				data: {
@@ -446,8 +510,10 @@ Class.subclass( Page.Base, "Page.Home", {
 				options: {
 
 					legend: { display: false },
+					animation: {duration: 0},
 					layout: { padding: { bottom: jobLimit > 50 ? 50 : 20 } },
 					tooltips: {
+
 						yAlign: 'top',
 						titleFontSize: 14,
 						titleFontColor: 'orange',
@@ -474,7 +540,7 @@ Class.subclass( Page.Base, "Page.Home", {
 						}],
 						yAxes: [{
 							type: scaleType,
-							gridLines: { color: 'rgb(170, 170, 170)', lineWidth: 0.3 },
+							gridLines: { color: 'rgb(170, 170, 170)', lineWidth: 0.3  },
 							ticks: {
 								display: false,
 								beginAtZero: true,
@@ -510,16 +576,22 @@ Class.subclass( Page.Base, "Page.Home", {
 		for (var id in app.activeJobs) {
 			jobs.push( app.activeJobs[id] );
 		}
+
+		if(jobs.length === 0) return '<div style="display:flex;justify-content: center;font-weight:bold;">No active jobs found<div>'
 		
 		// sort events by time_start descending
 		this.jobs = jobs.sort( function(a, b) {
-			return (a.time_start < b.time_start) ? 1 : -1;
+			if(a.plugin === 'workflow') return  -1
+			if(b.plugin === 'workflow') return 1
+			return (a.time_start - b.time_start)
+			// return (a.time_start > b.time_start) ? 1 : -1;
 		} );
 		
-		var cols = ['Job ID', 'Event Name', 'Argument', 'Category', 'Hostname', 'Elapsed', 'Progress', 'Remaining', 'Performance', 'Memo', 'Actions'];
+		var cols = this.jobs.length > 0 ? ['Job ID', 'Event Name', 'Argument', 'Category', 'Hostname', 'Elapsed', 'Progress', 'Remaining', 'Performance', 'Memo', 'Actions'] : [];
 		
 		// render table
 		var self = this;
+
 		html += this.getBasicTable( this.jobs, cols, 'active job', function(job, idx) {
 			var actions = [
 				// '<span class="link" onMouseUp="$P().go_job_details('+idx+')"><b>Details</b></span>',
diff --git a/htdocs/js/pages/JobDetails.class.js b/htdocs/js/pages/JobDetails.class.js
index b8444fa..7f87720 100644
--- a/htdocs/js/pages/JobDetails.class.js
+++ b/htdocs/js/pages/JobDetails.class.js
@@ -209,7 +209,7 @@ Class.subclass(Page.Base, "Page.JobDetails", {
 		html += 'Completed Job';
 
 		if (event.id && !event.multiplex) html += '<div class="subtitle_widget" style="margin-left:2px;"><span class="link" onMouseUp="$P().run_again()"><i class="fa fa-repeat">&nbsp;</i><b>Run Again</b></span></div>';
-		if (event.id) html += `<div class="subtitle_widget" style="margin-left:5px;"><a href="#History?sub=event_history&id=${event.id}"><i class="fa fa-arrow-circle-right">&nbsp;</i><b>Jump to History</b></a></div>`;
+		let jumpToHist = `<div><a href="#History?sub=event_history&id=${event.id}"><i class="fa fa-arrow-circle-right">&nbsp;</i><b>Jump to History</b></a></div>`;
 		//adding edit button on job detail page
 		if (event.id) html += '<div class="subtitle_widget" style="margin-left:2px;"><a href="#Schedule?sub=edit_event&id=' + event.id + '" target="_self"><span class="link"><i class="fa fa-edit">&nbsp;</i><b>Edit</b></span></a></div>';
 		if (app.isAdmin()) html += '<div class="subtitle_widget"><span class="link abort" onMouseUp="$P().delete_job()"><i class="fa fa-trash-o">&nbsp;</i><b>Delete Job</b></span></div>';
@@ -222,86 +222,60 @@ Class.subclass(Page.Base, "Page.JobDetails", {
 		html += this.get_job_result_banner(job).replace(/\x1B\[[0-?]*[ -/]*[@-~]/g, "");
 
 		// fieldset header
-		html += '<fieldset style="margin-top:8px; margin-right:0px; padding-top:10px; position:relative;"><legend>Job Details</legend>';
+		html += '<fieldset style="display:none;margin-top:8px; margin-right:0px; padding-top:10px; position:relative;"><legend>Job Details</legend>';
 
-		// if (event.id && !event.multiplex) html += '<div class="button mini" style="position:absolute; top:15px; left:100%; margin-left:-110px;" onMouseUp="$P().run_again()">Run Again</div>';
+		let eventTitle = '(None)'
+		if (event.id) eventTitle = '<a href="#Schedule?sub=edit_event&id=' + job.event + '">' + this.getNiceEvent(job.event_title, col_width) + '</a>';
+		else if (job.event_title) eventTitle = this.getNiceEvent(job.event_title, col_width);
 
-		html += '<div style="float:left; width:25%;">';
-		html += '<div class="info_label">JOB ID</div>';
-		html += '<div class="info_value">' + job.id + '</div>';
+        let jobCategory = '(None)'
+		if (cat) jobCategory = this.getNiceCategory(cat, col_width);
+		else if (job.category_title) jobCategory= this.getNiceCategory({ title: job.category_title }, col_width);
 
-		html += '<div class="info_label">EVENT NAME</div>';
-		html += '<div class="info_value">';
-		if (event.id) html += '<a href="#Schedule?sub=edit_event&id=' + job.event + '">' + this.getNiceEvent(job.event_title, col_width) + '</a>';
-		else if (job.event_title) html += this.getNiceEvent(job.event_title, col_width);
-		else html += '(None)';
-		html += '</div>';
-
-		// html += '<div class="info_label">EVENT TIMING</div>';
-		// html += '<div class="info_value">' + (event.enabled ? summarize_event_timing(event.timing, event.timezone) : '(Disabled)') + '</div>';
-		// html += '</div>';
-
-		html += '<div class="info_label">ARGUMENT</div>'; // hist
-		html += '<div class="info_value">' + encode_entities(job.arg || '(no argument)') + '</div>';
-		html += '</div>';
+        let jobPlugin = '(None)'
+		if (plugin) jobPlugin = this.getNicePlugin(plugin, col_width);
+		else if (job.plugin_title) jobPlugin = this.getNicePlugin({ title: job.plugin_title }, col_width);
 
-		html += '<div style="float:left; width:25%;">';
-		html += '<div class="info_label">CATEGORY NAME</div>';
-		html += '<div class="info_value">';
-		if (cat) html += this.getNiceCategory(cat, col_width);
-		else if (job.category_title) html += this.getNiceCategory({ title: job.category_title }, col_width);
-		else html += '(None)';
-		html += '</div>';
-
-		html += '<div class="info_label">PLUGIN NAME</div>';
-		html += '<div class="info_value">';
-		if (plugin) html += this.getNicePlugin(plugin, col_width);
-		else if (job.plugin_title) html += this.getNicePlugin({ title: job.plugin_title }, col_width);
-		else html += '(None)';
-		html += '</div>';
+		let jobTarget = '(None)'
+		if (group || event.target) jobTarget = this.getNiceGroup(group, event.target, col_width);
+		else if (job.nice_target) jobTarget = '<div class="ellip" style="max-width:' + col_width + 'px;">' + job.nice_target + '</div>';
 
-		html += '<div class="info_label">EVENT TARGET</div>';
-		html += '<div class="info_value">';
-		if (group || event.target) html += this.getNiceGroup(group, event.target, col_width);
-		else if (job.nice_target) html += '<div class="ellip" style="max-width:' + col_width + 'px;">' + job.nice_target + '</div>';
-		else html += '(None)';
-		html += '</div>';
-		html += '</div>';
-
-		html += '<div style="float:left; width:25%;">';
-		html += '<div class="info_label">JOB SOURCE</div>';
-		html += `<div class="info_value"><div title="${summarize_event_timing(event.timing, event.timezone)}" class="ellip" style="max-width:' + col_width + 'px;">` + (job.source || 'Scheduler') + '</div></div>';
-
-		html += '<div class="info_label">SERVER HOSTNAME</div>';
-		html += '<div class="info_value">' + this.getNiceGroup(null, job.hostname, col_width) + '</div>';
-
-		html += '<div class="info_label">PROCESS ID</div>';
-		html += '<div class="info_value">' + (job.detached_pid || job.pid || '(Unknown)') + '</div>';
-		html += '</div>';
-
-		html += '<div style="float:left; width:25%;">';
-		html += '<div class="info_label">JOB STARTED</div>';
-		html += '<div class="info_value">';
+		let jobStarted = get_nice_date_time(job.time_start, false, true);
 		if ((job.time_start - job.now >= 60) && !event.multiplex && !job.source) {
-			html += '<span style="color:red" title="Scheduled Time: ' + get_nice_date_time(job.now, false, true) + '">';
-			html += get_nice_date_time(job.time_start, false, true);
-			html += '</span>';
+			jobStarted = `<span style="color:red" title="Scheduled Time: ${get_nice_date_time(job.now, false, true)}">${get_nice_date_time(job.time_start, false, true)}</span>`
 		}
-		else html += get_nice_date_time(job.time_start, false, true);
-		html += '</div>';
 
-		html += '<div class="info_label">JOB COMPLETED</div>';
-		html += '<div class="info_value">' + get_nice_date_time(job.time_end, false, true) + '</div>';
+		html += '</fieldset>';
 
-		html += '<div class="info_label">ELAPSED TIME</div>';
-		html += '<div class="info_value">' + get_text_from_seconds(job.elapsed, false, false) + '</div>';
-		html += '</div>';
+		let timing = summarize_event_timing(event.timing, event.timezone)
+
+		html += `
+		  <div class="job-details grid-container">
+		    <div class="job-details  grid-item"><div class="info_label">JOB ID:</div><div class="info_value">${job.id}</div></div>
+			<div class="job-details  grid-item"><div class="info_label">PID:</div><div class="info_value">${(job.detached_pid || job.pid || '(Unknown)')}</div></div>
+		    <div class="job-details  grid-item"><div class="info_label">CAT:</div><div class="info_value">${jobCategory}</div></div>
+		    <div class="job-details  grid-item"><div class="info_label">SOURCE:</div><div title="${timing}" class="info_value">${job.source || 'Scheduler'}</div></div>
+			<div class="job-details  grid-item"><div class="info_label">TARGET:</div><div class="info_value">${jobTarget}</div></div>
+		    <div class="job-details  grid-item"><div class="info_label">START:</div><div class="info_value">${jobStarted}</div></div>
+			<div class="job-details  grid-item"><div class="info_label">ELAPSED:</div><div class="info_value">${get_text_from_seconds(job.elapsed, false, false)}</div></div>		    
+		    
+
+			<div class="job-details  grid-item"><div class="info_label">EVENT:</div><div class="info_value">${eventTitle}</div></div>
+			<div class="job-details  grid-item"><div class="info_label">ARG:</div><div class="info_value">${encode_entities(job.arg || '(no argument)')}</div></div>
+			<div class="job-details  grid-item"><div class="info_label">PLUGIN:</div><div class="info_value">${jobPlugin}</div></div>
+			<div class="job-details  grid-item"><div class="info_label">MEMO:</div><div class="info_value">${job.memo || '(none)'}</div></div>
+		    <div class="job-details  grid-item"><div class="info_label">HOST:</div><div class="info_value">${this.getNiceGroup(null, job.hostname, col_width)}</div></div>
+		    <div class="job-details  grid-item"><div class="info_label">END:</div><div class="info_value">${get_nice_date_time(job.time_end, false, true)}</div></div>   				    			
+			<div class="job-details  grid-item"><div class="info_value">${jumpToHist }</div></div>
+			
+		  </div>
+		  <div class="clear"></div>
+		`
 
-		html += '<div class="clear"></div>';
-		html += '</fieldset>';
+		// <div class="job-details  grid-item"><div class="info_value ellip" title="${timing}"style="max-width:300px"><i class="fa fa-clock-o" aria-hidden="true"></i> ${timing}</div></div>
 
 		// pies
-		html += '<div style="position:relative; margin-top:15px;">';
+		html += '<div style="position:relative; margin-top:25px;">';
 
 		html += '<div class="pie-column column-left">';
 		html += '<div class="pie-title">Performance Metrics</div>';
@@ -825,76 +799,36 @@ Class.subclass(Page.Base, "Page.JobDetails", {
 		html += '<div class="clear"></div>';
 		html += '</div>';
 
-		// fieldset header
-		html += '<fieldset style="margin-top:0px; margin-right:0px; padding-top:10px; position:relative"><legend>Job Details</legend>';
-
-		// html += '<div class="button mini" style="position:absolute; top:15px; left:100%; margin-left:-110px;" onMouseUp="$P().abort_job()">Abort Job...</div>';
-
-		html += '<div style="float:left; width:25%;">';
-		html += '<div class="info_label">JOB ID</div>';
-		html += `<div class="info_value"> <a href="/console?id=${job.id}" target="_blank"><i class="fa fa-pie-chart">&nbsp;&nbsp</i>${job.id}</a></div>`;
-
-		html += '<div class="info_label">EVENT NAME</div>';
-		html += '<div class="info_value"><a href="#Schedule?sub=edit_event&id=' + job.event + '">' + this.getNiceEvent(job.event_title, col_width) + '</a></div>';
-
-		// html += '<div class="info_label">EVENT TIMING</div>';
-		// html += '<div class="info_value">' + (event.enabled ? summarize_event_timing(event.timing, event.timezone) : '(Disabled)') + '</div>';
-		// html += '</div>';
-
-		html += '<div class="info_label">ARGUMENT</div>'; // hist
-		html += '<div class="info_value">' + encode_entities(job.arg || '(no argument)') + '</div>';
-		html += '</div>';
-
-		// html += '<div class="info_label">ARGUMENT</div>';
-		// html += '<div class="info_value">' + encode_entities(job.arg || '') + '</div>';
-		// html += '</div>';
-		
-
-		html += '<div style="float:left; width:25%;">';
-		html += '<div class="info_label">CATEGORY NAME</div>';
-		html += '<div class="info_value">' + this.getNiceCategory(cat, col_width) + '</div>';
-
-		html += '<div class="info_label">PLUGIN NAME</div>';
-		html += '<div class="info_value">' + this.getNicePlugin(plugin, col_width) + '</div>';
-
-		html += '<div class="info_label">EVENT TARGET</div>';
-		html += '<div class="info_value">' + this.getNiceGroup(group, event.target, col_width) + '</div>';
-		html += '</div>';
-
-		html += '<div style="float:left; width:25%;">';
-		html += '<div class="info_label">JOB SOURCE</div>';
-		html += `<div class="info_value"><div title="${summarize_event_timing(event.timing, event.timezone)}" class="ellip" style="max-width:` + col_width + 'px;">' + (job.source || 'Scheduler') + '</div></div>';
-
-		html += '<div class="info_label">SERVER HOSTNAME</div>';
-		html += '<div class="info_value">' + this.getNiceGroup(null, job.hostname, col_width) + '</div>';
-
-		html += '<div class="info_label">PROCESS ID</div>';
-		html += '<div class="info_value" id="d_live_pid">' + job.pid + '</div>';
-		html += '</div>';
-
-		html += '<div style="float:left; width:25%;">';
-		html += '<div class="info_label">JOB STARTED</div>';
-		html += '<div class="info_value">' + get_nice_date_time(job.time_start, false, true) + '</div>';
-
-		html += '<div class="info_label">ELAPSED TIME</div>';
-		var elapsed = Math.floor(Math.max(0, app.epoch - job.time_start));
-		html += '<div class="info_value" id="d_live_elapsed">' + get_text_from_seconds(elapsed, false, false) + '</div>';
-
-		var progress = job.progress || 0;
-		var nice_remain = 'n/a';
+		let eventTitle = `<a href="#Schedule?sub=edit_event&id=${job.event}">${this.getNiceEvent(job.event_title, col_width)}</a>`
+		let elapsed = Math.floor(Math.max(0, app.epoch - job.time_start));
+		let job_progress = job.progress || 0;
+		let nice_remain = 'n/a';
 		if (job.pending && job.when) {
 			nice_remain = 'Retry in ' + get_text_from_seconds(Math.max(0, job.when - app.epoch), true, true) + '';
 		}
-		else if ((elapsed >= 10) && (progress > 0) && (progress < 1.0)) {
-			var sec_remain = Math.floor(((1.0 - progress) * elapsed) / progress);
+		else if ((elapsed >= 10) && (job_progress > 0) && (job_progress < 1.0)) {
+			var sec_remain = Math.floor(((1.0 - job_progress) * elapsed) / job_progress);
 			nice_remain = get_text_from_seconds(sec_remain, false, true);
 		}
-		html += '<div class="info_label">REMAINING TIME</div>';
-		html += '<div class="info_value" id="d_live_remain">' + nice_remain + '</div>';
-		html += '</div>';
 
-		html += '<div class="clear"></div>';
-		html += '</fieldset>';
+		html += `
+		<div class="job-details grid-container running">
+		  <div class="job-details  grid-item"><div class="info_label">JOB ID:</div><div class="info_value">${job.id}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">PID:</div><div id="d_live_pid" class="info_value">${(job.detached_pid || job.pid || '(Unknown)')}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">CAT:</div><div class="info_value">${this.getNiceCategory(cat, col_width)}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">TARGET:</div><div class="info_value">${this.getNiceGroup(group, event.target, col_width) }</div></div> 
+		  <div class="job-details  grid-item"><div class="info_label">SOURCE:</div><div class="info_value">${job.source || 'Scheduler'}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">START:</div><div class="info_value">${get_nice_date_time(job.time_start, false, true) }</div></div>
+
+		  <div class="job-details  grid-item"><div class="info_label">EVENT:</div><div class="info_value">${eventTitle}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">ARG:</div><div class="info_value">${encode_entities(job.arg || '(no argument)')}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">PLUGIN:</div><div class="info_value">${this.getNicePlugin(plugin, col_width)}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">HOST:</div><div class="info_value">${this.getNiceGroup(null, job.hostname, col_width)}</div></div>
+		  <div class="job-details  grid-item"><div class="info_label">ELAPSED TIME:</div><div id="d_live_elapsed" class="info_value">${get_text_from_seconds(elapsed, false, false)}</div></div>   				    			
+		  <div class="job-details  grid-item"><div class="info_label">REMAINING TIME:</div><div id="d_live_remain" class="info_value"> ${nice_remain}</div></div>
+		</div>
+		<div class="clear"></div>
+	  `
 
 		// pies
 		html += '<div style="position:relative; margin-top:15px;">';
diff --git a/htdocs/js/pages/Schedule.class.js b/htdocs/js/pages/Schedule.class.js
index ba1a8d7..5339077 100644
--- a/htdocs/js/pages/Schedule.class.js
+++ b/htdocs/js/pages/Schedule.class.js
@@ -122,7 +122,7 @@ Class.subclass(Page.Base, "Page.Schedule", {
 		py: "python"
 	},
 
-	setFileEditor: function(fileName) {
+	setFileEditor: function (fileName) {
 		const self = this
 		let editor = CodeMirror.fromTextArea(document.getElementById("fe_ee_pp_file_content"), {
 			mode: self.extension_map[fileName.split('.').pop()] || 'text',
@@ -136,9 +136,9 @@ Class.subclass(Page.Base, "Page.Schedule", {
 			lint: true
 		})
 
-		editor.on('change', function(cm){
+		editor.on('change', function (cm) {
 			document.getElementById("fe_ee_pp_file_content").value = cm.getValue();
-		 });
+		});
 
 		editor.setSize('52vw', '52vh')
 
@@ -180,7 +180,7 @@ Class.subclass(Page.Base, "Page.Schedule", {
 			get_form_table_row('Name', `<input type="text" id="fe_ee_pp_file_name" size="40" value="" spellcheck="false"/>`) +
 			get_form_table_spacer() +
 			get_form_table_row('Content', `<textarea style="padding-right:20px"  id="fe_ee_pp_file_content" rows="36" cols="110"></textarea>`)
-			html +=`</table>`
+		html += `</table>`
 
 		setTimeout(() => self.setFileEditor('.text'), 30) // editor needs to wait for a bit for modal window to render
 
@@ -224,7 +224,7 @@ Class.subclass(Page.Base, "Page.Schedule", {
 			get_form_table_row('Name', `<input type="text" id="fe_ee_pp_file_name" size="40" value="${file.name}" spellcheck="false">`) +
 			get_form_table_spacer() +
 			get_form_table_row('Content', `<textarea style="padding-right:20px"  id="fe_ee_pp_file_content" rows="36" cols="110">${file.content}</textarea>`)
-			html += '</table>'
+		html += '</table>'
 
 		setTimeout(() => self.setFileEditor(file.name), 30) // editor needs to wait for a bit for modal window to render
 
@@ -621,6 +621,12 @@ Class.subclass(Page.Base, "Page.Schedule", {
 
 	},
 
+	show_event_stats: function(id) {
+		// let evt = find_object(app.schedule, {id: id})
+		// document.getElementById('fe_event_info').innerHTML = `${evt.title}: category: ${evt.category} , plugin: ${evt.plugin}`
+		// $('#ex_' + id).toggle()
+	},
+
 	gosub_events: function (args) {
 		// render table of events with filters and search
 		this.div.removeClass('loading');
@@ -750,29 +756,36 @@ Class.subclass(Page.Base, "Page.Schedule", {
 		}
 
 		// Scheduled Event page:
+		let miniButtons = ''
 
-		let miniButtons = '<div style="float:right;" class="subtitle_widget"><a><i style="width:20px;cursor:pointer;margin-right: 20px" class="fa fa-pie-chart" title="Show Event Graph" onMouseUp="$P().show_graph()"></i></a></div>'
+		if (app.hasPrivilege('create_events')) {
+			miniButtons += '<div class="subtitle_widget"><i style="width:20px;cursor:pointer;" class="fa fa fa-plus-circle" title="Add Event" onMouseUp="$P().edit_event(-1)"></i></div>'
+			miniButtons += '<div class="subtitle_widget"><i style="width:20px;cursor:pointer;" class="fa fa-bolt" title="Generate Event" onMouseUp="$P().do_random_event()"></i></div>'
+		}
 
 		if (app.isAdmin()) {
-			miniButtons += '<div style="float:right;" class="subtitle_widget"><a><i style="width:20px;cursor:pointer;" class="fa fa-download" title="Backup" onMouseUp="$P().export_schedule()"></i></a></div>'
+			miniButtons += '<div class="subtitle_widget"><i style="width:20px;cursor:pointer;" class="fa fa-download" title="Backup" onMouseUp="$P().export_schedule()"></i></div>'
 		}
 
-		if (app.hasPrivilege('create_events')) {
-			miniButtons += '<div style="float:right;" class="subtitle_widget"><a><i style="width:20px;cursor:pointer;" class="fa fa-random" title="Random Event" onMouseUp="$P().do_random_event()"></i><a/></div>'
-			miniButtons += '<div style="float:right;" class="subtitle_widget"><a><i style="width:20px;cursor:pointer;" class="fa fa fa-plus-circle" title="Add Event" onMouseUp="$P().edit_event(-1)"></i></a></div>'
-		}
+		miniButtons += '<div class="subtitle_widget"><i style="width:20px;cursor:pointer;" class="fa fa-pie-chart" title="Show Event Graph" onMouseUp="$P().show_graph()"></i></div>'
+
+		let eventView = app.getPref('event_view') || 'details'
+		let isGrid = eventView === 'grid' || eventView === 'gridall'
 
 		html += `
-		<div style="padding:20px 20px 20px 20px">
-		 <div class="subtitle">	Scheduled Events ${cycleWarning} 
-		  <div class="subtitle_widget"><i class="fa fa-search">&nbsp;</i><input type="text" id="fe_sch_keywords" size="10" placeholder="Find events..." style="border:0px;border-radius:5px" value="${escape_text_field_value(args.keywords)}"/></div>
-		  <div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_sch_target" class="subtitle_menu" style="width:75px;" onChange="$P().set_search_filters()"><option value="">All Servers</option>${this.render_target_menu_options(args.target)}</select></div>
-		  <div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_sch_plugin" class="subtitle_menu" style="width:75px;" onChange="$P().set_search_filters()"><option value="">All Plugins</option>${render_menu_options(app.plugins, args.plugin, false)}</select></div>
-		  <div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_sch_cat" class="subtitle_menu" style="width:95px;" onChange="$P().set_search_filters()"><option value="">All Categories</option>${render_menu_options(app.categories, args.category, false)}</select></div>
-		  <div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_sch_enabled" class="subtitle_menu" style="width:75px;" onChange="$P().set_search_filters()"><option value="">All Events</option>${render_menu_options([[1, 'Enabled'], [-1, 'Disabled'], ['success', "Last Run Success"], ['error', "Last Run Error"], ["chained", "Chained"]], args.enabled, false)}</select></div>
-          ${miniButtons}
-		 <div class="clear"></div>
+		 <div class="subtitle flex-container" style="height:auto;padding:8px">
+		 <div style="width: calc(45%)">Scheduled Events ${cycleWarning}</div>
+		 <div class="flex-container" style="width:calc(10%)">${miniButtons}</div>
+		 <div style="width: calc(45%);padding-right:10px">
+		   <div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_sch_target" class="subtitle_menu" style="width:70px;" onChange="$P().set_search_filters()"><option value="">All Servers</option>${this.render_target_menu_options(args.target)}</select></div>
+		   <div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_sch_plugin" class="subtitle_menu" style="width:70px;" onChange="$P().set_search_filters()"><option value="">All Plugins</option>${render_menu_options(app.plugins, args.plugin, false)}</select></div>
+		   <div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_sch_cat" class="subtitle_menu" style="width:70px;" onChange="$P().set_search_filters()"><option value="">All Cats</option>${render_menu_options(app.categories, args.category, false)}</select></div>
+		   <div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_sch_enabled" class="subtitle_menu" style="width:70px;" onChange="$P().set_search_filters()"><option value="">All Events</option>${render_menu_options([[1, 'Enabled'], [-1, 'Disabled'], ['success', "Last Run Success"], ['error', "Last Run Error"], ["chained", "Chained"]], args.enabled, false)}</select></div>
+		   <div class="subtitle_widget"><i class="fa fa-chevron-down">&nbsp;</i><select id="fe_event_view" class="subtitle_menu" style="width:70px;" onChange="$P().change_event_view(this.value)"><option value="">Details</option>${render_menu_options([['grid', 'Grid'], ['gridall', "Grid-All"]], eventView, false)}</select></div>
+		 </div>          
+		 
 		</div>
+		<div class="clear"></div>
 		`
 		// prep events for sort
 		this.events.forEach(function (item) {
@@ -780,6 +793,8 @@ Class.subclass(Page.Base, "Page.Schedule", {
 			var group = item.target ? find_object(app.server_groups, { id: item.target }) : null;
 			var plugin = item.plugin ? find_object(app.plugins, { id: item.plugin }) : null;
 
+			if(item.enabled && cat.enabled) item.active = true
+
 			item.category_title = cat ? cat.title : 'Uncategorized';
 			item.group_title = group ? group.title : item.target;
 			item.plugin_title = plugin ? plugin.title : 'No Plugin';
@@ -799,29 +814,57 @@ Class.subclass(Page.Base, "Page.Schedule", {
 		}
 
 		// header center (group by buttons)
+
 		cols.headerRight = `
 		<div class="schedule_group_button_container">
+		
 		<i class="fa fa-sort-alpha-asc ${group_by ? '' : 'selected'}" title="Sort by Title" onMouseUp="$P().change_group_by(\'\')"></i>
 		<i class="fa fa-clock-o ${group_by == 'modified' ? 'selected' : ''}" title="Sort by Modified" onMouseUp="$P().change_group_by(\'modified\')"></i>	
 		<i class="fa fa-folder-open-o ${group_by == 'category' ? 'selected' : ''}" title="Group by Category" onMouseUp="$P().change_group_by(\'category\')"></i>
 		<i class="fa fa-plug ${group_by == 'plugin' ? 'selected' : ''}" title="Group by Plugin" onMouseUp="$P().change_group_by(\'plugin\')"></i>
 		<i class="mdi mdi-server-network ${((group_by == 'group') ? 'selected' : '')}" title="Group by Target" onMouseUp="$P().change_group_by(\'group\')"></i>
 		<i > </i>
-		<i class="${args.collapse ? 'fa fa-arrow-circle-right' : 'fa fa-arrow-circle-up'}" title="${args.collapse ? 'Expand' : 'Collapse'}" onclick="$P().toggle_group_by()"></i>
+		<i class="${args.collapse ? 'fa fa-arrow-circle-right' : 'fa fa-arrow-circle-up'}" title="${args.collapse ? 'Expand' : 'Collapse'}" onclick="$P().toggle_group_by()"></i>		
 		</div>
 		`
+		// searchBar
+		cols.headerCenter = `<div style="padding-bottom:8px;padding-right:12px"><i class="fa fa-search">&nbsp;</i><input type="text" id="fe_sch_keywords" size="25" onfocus="this.placeholder=''" placeholder="Find events..." class="event-search" autocomplete="one-time-code" value="${escape_text_field_value(args.keywords)}"/></div>`
+
 		// render table
-		var last_group = '';
-
-		var htmlTab = this.getBasicTable2(this.events, cols, 'event', function (item, idx) {
-			var actions = [
-				'<span class="link" onMouseUp="$P().run_event(' + idx + ',event)"><b>Run</b></span>',
-				'<span class="link" onMouseUp="$P().edit_event(' + idx + ')"><b>Edit</b></span>',
-				'<a href="#History?sub=event_stats&id=' + item.id + '"><b>Stats</b></a>',
-				'<a href="#History?sub=event_history&id=' + item.id + '"><b>History</b></a>',
-				'<span class="link" onMouseUp="$P().delete_event(' + idx + ')"><b>Delete</b></span>',
-				// '<span class="link" onMouseUp="$P().delete_event('+idx+')"><b>Delete</b></span>'
-			];
+		let last_group = '';
+
+		let xhtml = '';
+
+		let events = this.events || [];
+
+		let totalEvents = events.length
+
+		if(eventView === 'grid') {
+			totalEvents = `${events.filter(e=>e.active).length} active`
+		}
+
+		var htmlTab = this.getBasicTable2(events, cols, 'event', function (item, idx) {
+
+			let actions;
+
+			if (isGrid) {
+				actions = [
+					'<span class="link event-action" onMouseUp="$P().run_event(' + idx + ',event)"><b>run</b></span>',
+					`<span class="link event-action" onMouseUp="Nav.go('#History?sub=event_history&id=${item.id}')"><b>history</b></span>`,
+					'<span class="link event-action" onMouseUp="$P().delete_event(' + idx + ')"><b>delete</b></span>'
+				]
+
+			}
+			else {
+				actions = [
+					'<span class="link" onMouseUp="$P().run_event(' + idx + ',event)"><b>Run</b></span>',
+					'<span class="link" onMouseUp="$P().edit_event(' + idx + ')"><b>Edit</b></span>',
+					'<a href="#History?sub=event_stats&id=' + item.id + '"><b>Stats</b></a>',
+					'<a href="#History?sub=event_history&id=' + item.id + '"><b>History</b></a>',
+					'<span class="link" onMouseUp="$P().delete_event(' + idx + ')"><b>Delete</b></span>',
+					// '<span class="link" onMouseUp="$P().delete_event('+idx+')"><b>Delete</b></span>'
+				];
+			}
 
 			var cat = item.category ? find_object(app.categories, { id: item.category }) : null;
 			var group = item.target ? find_object(app.server_groups, { id: item.target }) : null;
@@ -854,7 +897,8 @@ Class.subclass(Page.Base, "Page.Schedule", {
 			if (item.chain_error && !app.event_map[item.chain_error]) chain_error += '<b>' + item.chain_error + '</b><br>';
 			var chain_error_msg = chain_error ? `<i class="fa fa-exclamation-triangle" title="Chain contains unexistent events:<br>${chain_error}">&nbsp;</i>` : '';
 
-			var evt_name = self.getNiceEvent(item, col_width, 'float:left', '<span>&nbsp;&nbsp;</span>');
+			var evt_name = self.getNiceEvent(item, col_width, 'float:left', '<span>&nbsp;&nbsp;</span>', isGrid);
+
 			if (chain_tooltip.length > 0) evt_name += `<i  title="${chain_tooltip.join('<br>')}" class="fa fa-arrow-right">&nbsp;&nbsp;</i>${chain_error_msg}</span>`;
 
 			// check if event is has limited time range
@@ -862,22 +906,22 @@ Class.subclass(Page.Base, "Page.Schedule", {
 			if (item.start_time && Number(item.start_time) > new Date().valueOf() + 60000) inactiveTitle = 'Schedule will resume at ' + new Date(item.start_time).toLocaleString()
 			if (item.end_time && Number(item.end_time) < new Date().valueOf()) inactiveTitle = 'Schedule expired on ' + new Date(item.end_time).toLocaleString()
 
-			let niceTiming = summarize_event_timing(item.timing, item.timezone, !inactiveTitle ? item.ticks : null)
+			let niceTiming = summarize_event_timing(item.timing, item.timezone, (inactiveTitle || isGrid) ? null : item.ticks)
 
 			if (inactiveTitle) {
 				niceTiming = `<span title="${inactiveTitle}"><s>${niceTiming}</s>`
-				if (item.ticks) niceTiming += `<span title="Extra Ticks: ${item.ticks}"> <b>+</b> </>`
+				if (item.ticks) niceTiming += `<span title="Extra Ticks: ${item.ticks}"> <b>+</b> </>`				
 			}
 
 			let now = Date.now() / 1000
-
-			var tds = [
+            
+			tds = [
 				'<input type="checkbox" style="cursor:pointer" onChange="$P().change_event_enabled(' + idx + ', this)" ' + (item.enabled ? 'checked="checked"' : '') + '/>',
-				'<div class="td_big"><span class="link" onMouseUp="$P().edit_event(' + idx + ')">' + evt_name + '</span></div>',
+				`<div class="td_big"><span class="link" onMouseUp="$P().edit_event(` + idx + ')">' + evt_name + '</span></div>',
 				self.getNiceCategory(cat, col_width),
 				self.getNicePlugin(plugin, col_width),
 				self.getNiceGroup(group, item.target, col_width),
-				niceTiming + chainInfo,
+				niceTiming + (isGrid ? '' : chainInfo),
 				'<span id="ss_' + item.id + '" onMouseUp="$P().jump_to_last_job(' + idx + ')">' + status_html + '</span>',
 				get_text_from_seconds(now - item.modified, true, true), //modified
 				actions.join('&nbsp;|&nbsp;')
@@ -894,38 +938,109 @@ Class.subclass(Page.Base, "Page.Schedule", {
 				tds.className += cat.color;
 			}
 
+
 			// group by
 			if (group_by) {
+
 				let cur_group = item[group_by + '_title'];
 				tds.className = 'event_group_' + (group_by == 'group' ? item['target'] || 'allgrp' : item[group_by]) + ' ' + tds.className
 
 				if (cur_group != last_group) {
 					last_group = cur_group;
-					var insert_html = '<tr class="nohighlight"><td colspan="' + cols.length + '"><div class="schedule_group_header">';
-					switch (group_by) {
-						case 'category': insert_html += self.getNiceCategory(cat, 500, args.collapse); break;
-						case 'plugin': insert_html += self.getNicePlugin(plugin, 500, args.collapse); break;
-						case 'group': insert_html += self.getNiceGroup(group, item.target, 500, args.collapse); break;
+					let group_title;
+
+					if (isGrid) {  // grid view
+						switch (group_by) {
+							case 'category': group_title = self.getNiceCategory(cat, 500, args.collapse); break;
+							case 'plugin':  group_title = self.getNicePlugin(plugin, 500, args.collapse); break;
+							case 'group':  group_title = self.getNiceGroup(group, item.target, 500, args.collapse); break;
+						}
+						
+						// for regular grid - do not show disabled category
+						if(eventView === 'grid' && group_by === 'category' && !cat.enabled) group_title = null;
+
+						if (group_title) xhtml += `<div class="section-divider"><div class="subtitle">${group_title}</div></div>`
+						// tds.insertAbove = group_title;
+					}
+					else {  // table view
+						let insert_html = '<tr class="nohighlight"><td colspan="' + cols.length + '"><div class="schedule_group_header">';
+						switch (group_by) {
+							case 'category': insert_html += self.getNiceCategory(cat, 500, args.collapse); break;
+							case 'plugin': insert_html += self.getNicePlugin(plugin, 500, args.collapse); break;
+							case 'group': insert_html += self.getNiceGroup(group, item.target, 500, args.collapse); break;
+						}
+						tds.insertAbove = `${insert_html}</div></td></tr>`;
 					}
-					insert_html += '</div></td></tr>';
-					tds.insertAbove = insert_html;
+
 				} // group changed
+
 				if (args.collapse) tds.hide = true
 			} // group_by
 
+
+			let timingTitle = niceTiming;			
+			let timing = niceTiming.length > 20 ? summarize_event_timing_short(item.timing) : tds[5]
+
+	
+			if(item.ticks) {
+				timingTitle += `<br><br>Extra ticks: ${item.ticks}`
+				timing +=  "+"
+			} 
+
+			if(app.chained_jobs[item.id]) {
+				timingTitle += ('<br><br>' + app.chained_jobs[item.id])
+				timing += "<";
+			}
+
+			let lastStatus = 'event-none'
+			let jobCodes = app.state.jobCodes || {} 
+			let xcode = jobCodes[item.id];
+			if (xcode === 0) lastStatus = 'event-success'
+			if (xcode > 0) lastStatus = 'event-error'
+			if (xcode === 255) lastStatus = 'event-warning'
+
+			// ${tds[0]}
+			//<div ><span style="font-size:0.8em" class="color_label green">✓</span></div>	
+			let itemVisibility =  eventView === 'grid' && (!item.active || args.collapse) ? 'none' : 'true'
+			// link item to it's group, avoid for disabled event on basic grid view
+			let itemClass = eventView === 'grid' && !item.active ? '' : tds.className 
+
+			xhtml += `
+			<div id="${item.id}" style="display:${itemVisibility}" class="upcoming schedule grid-item ${itemClass}" onclick="">
+			 <div class="flex-container schedule">
+			  <div style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">${tds[1]}</div>
+			
+			  <div ><span id="ss_${item.id}" onMouseUp="$P().jump_to_last_job(${idx})" style="cursor:pointer;font-size:1.1em;"><i class="fa fa-circle ${lastStatus}"></i></span></div>			 
+			</div>
+
+			<div class="flex-container">
+			  <div style="padding-left:5px">${actions.join(' | ')}</div>	
+			  <div style="text-overflow:ellipsis;overflow:hidden;white-space: nowrap;">		 
+			  <span title="${timingTitle}" style="overflow:hidden;text-overflow: ellipsis;white-space:nowrap">${timing}</span> 
+			  </div>		 
+		    </div>
+			</div>
+				
+		   `
 			return tds;
 		});
 
+		if (isGrid) html += `
+	   <div class="flex-container widget" style="padding-bottom:6px">
+	    <div id="fe_event_info" style="width:100px;margin-left:60px;font-weight:bold" class="subtitle_widget">${totalEvents} events</div>
+ 	     ${cols.headerCenter}
+		 <div style="padding-right:30px" >${cols.headerRight}</div>
+	   </div> 
+	   <div id="scheduled_grid" class="upcoming schedule grid-container">${xhtml}</div>`
+		else html += `<div id="schedule_table"> ${htmlTab} </div>`
+
 		// table and graph (hide latter by default)
-		html += `
-		  <div id="schedule_table"> ${htmlTab} </div>
-		  <div style="height:30px;"></div>
-		  <center><table><tr>
-		`
+		html += ` <center><table><tr><div style="height:30px;"></div>`
+
 		if (app.hasPrivilege('create_events')) {
 			html += `<td><div class="button" style="width:130px;" onMouseUp="$P().edit_event(-1)"><i class="fa fa-plus-circle">&nbsp;&nbsp;</i>Add Event...</div></td>
 			<td width="40">&nbsp;</td>
-			<td><div class="button" style="width:130px;" onMouseUp="$P().do_random_event()"><i class="fa fa-random">&nbsp;&nbsp;</i>Random</div></td>
+			<td><div class="button" style="width:130px;" onMouseUp="$P().do_random_event()"><i class="fa fa-bolt">&nbsp;&nbsp;</i>Generate</div></td>
 			<td width="40">&nbsp;</td>
 			`
 		}
@@ -956,13 +1071,24 @@ Class.subclass(Page.Base, "Page.Schedule", {
 	update_job_last_runs: function () {
 		// update last run state for all jobs, called when state is updated
 		if (!app.state.jobCodes) return;
+		let isGrid = app.getPref('event_view') === 'grid' || app.getPref('event_view') == 'gridall'
 
 		for (var event_id in app.state.jobCodes) {
-			var last_code = app.state.jobCodes[event_id];
-			var status_html = last_code ? '<span class="color_label red clicky"><i class="fa fa-warning">&nbsp;</i>Error</span>' : '<span class="color_label green clicky"><i class="fa fa-check">&nbsp;</i>Success</span>';
-			if (last_code == 255) status_html = '<span class="color_label yellow clicky"><i class="fa fa-warning">&nbsp;</i>Warning</span>'
-			// this.div.find('#ss_' + event_id).html(status_html);
-			document.getElementById('ss_' + event_id).innerHTML = status_html
+			let last_code = app.state.jobCodes[event_id];
+			let status_html;
+
+			if (isGrid) {
+				status_html = last_code ? 'event-error' : 'event-success'
+				if (last_code == 255) status_html = 'event-warning'
+				status_html = `<i class="fa fa-circle ${status_html}"></i>`
+			}
+			else {
+				status_html = last_code ? '<span class="color_label red clicky"><i class="fa fa-warning">&nbsp;</i>Error</span>' : '<span class="color_label green clicky"><i class="fa fa-check">&nbsp;</i>Success</span>';
+				if (last_code == 255) status_html = '<span class="color_label yellow clicky"><i class="fa fa-warning">&nbsp;</i>Warning</span>'
+			}
+
+			let statusIcon = document.getElementById('ss_' + event_id)
+			if (statusIcon) statusIcon.innerHTML = status_html
 
 		}
 	},
@@ -990,6 +1116,14 @@ Class.subclass(Page.Base, "Page.Schedule", {
 		this.gosub_events(this.args);
 	},
 
+	change_event_view: function (view_type) {
+		//  if( ['Grid', 'Details', 'Grid-All'].indexOf(view_type) < 0 ) view_type = 'Details'
+		if (['details', 'grid', 'gridall'].indexOf(view_type) < 0) view_type = 'details'
+		app.setPref('event_view', view_type)
+		this.gosub_events(this.args);
+
+	},
+
 	toggle_group_by: function () {
 		let args = this.args
 		args.collapse ^= true
@@ -1524,7 +1658,7 @@ Class.subclass(Page.Base, "Page.Schedule", {
 		} // check for update
 
 		delete this.old_event;
-		if (event.secret_value && typeof event.secret_value === 'string' ) {
+		if (event.secret_value && typeof event.secret_value === 'string') {
 			delete event.secret_value
 			$('#fe_ee_secret').val('').attr('placeholder', '[*****]')
 		}
@@ -1734,9 +1868,9 @@ Class.subclass(Page.Base, "Page.Schedule", {
 		}
 
 		// Secret
-		let sph = event.secret_preview ? '[' + event.secret_preview  + ']' : '';
+		let sph = event.secret_preview ? '[' + event.secret_preview + ']' : '';
 		html += get_form_table_row('Secret', `<textarea  style="width:620px; height:45px;resize:vertical;" id="fe_ee_secret" oninput="$P().set_event_secret(this.value)" placeholder="${sph}" spellcheck="false"></textarea>`);
-		html += get_form_table_caption("Specify KEY=VALUE pairs to be mounted as env variables (to this job process)");
+		html += get_form_table_caption("Specify KEY=VALUE pairs to be mounted as env variables (to this job process). When using Docker plugin, KEY should be prefixed with DOCKER_ to pass custom variable to docker container. When using SSH plugin, KEY should be prefixed with SSH_ to pass to remote machine.");
 		html += get_form_table_spacer();
 
 		// max children
@@ -2537,13 +2671,13 @@ Class.subclass(Page.Base, "Page.Schedule", {
 
 		this.refresh_plugin_params();
 	},
-	
-	setScriptEditor: function() {		
-		
+
+	setScriptEditor: function () {
+
 		let params = this.event.params || {}
 		let el = document.getElementById("fe_ee_pp_script")
 
-		if(!el) return 
+		if (!el) return
 
 		let privs = app.user.privileges;
 		let canEdit = privs.admin || privs.edit_events || privs.create_events;
@@ -2585,45 +2719,45 @@ Class.subclass(Page.Base, "Page.Schedule", {
 			gutters: [gutter],
 			lint: lint,
 			extraKeys: {
-			  "F11": (cm) => cm.setOption("fullScreen", !cm.getOption("fullScreen")),
-			  "Esc": (cm) => cm.getOption("fullScreen") ? cm.setOption("fullScreen", false) : null,
-			  "Ctrl-/": (cm) => cm.execCommand('toggleComment')
-			}							  
-		  });
+				"F11": (cm) => cm.setOption("fullScreen", !cm.getOption("fullScreen")),
+				"Esc": (cm) => cm.getOption("fullScreen") ? cm.setOption("fullScreen", false) : null,
+				"Ctrl-/": (cm) => cm.execCommand('toggleComment')
+			}
+		});
 
 		editor.on('change', (cm) => { el.value = cm.getValue() })
 
 		// syntax selector
-		document.getElementById("fe_ee_pp_lang").addEventListener("change", function(){
+		document.getElementById("fe_ee_pp_lang").addEventListener("change", function () {
 			let ln = this.options[this.selectedIndex].value;
 
 			editor.setOption("gutters", ['']);
 			editor.setOption("lint", false)
 
-			if(ln == 'java') {ln = 'text/x-java'}
-			if(ln == 'scala') {ln = 'text/x-scala'}
-			if(ln == 'csharp') {ln = 'text/x-csharp'}
+			if (ln == 'java') { ln = 'text/x-java' }
+			if (ln == 'scala') { ln = 'text/x-scala' }
+			if (ln == 'csharp') { ln = 'text/x-csharp' }
 			if (ln == 'sql') { ln = 'text/x-sql' }
 			if (ln == 'dockerfile') { ln = 'text/x-dockerfile' }
 			if (ln == 'toml') { ln = 'text/x-toml' }
-			if (ln == 'json') { 
+			if (ln == 'json') {
 				ln = 'application/json'
 				editor.setOption("lint", CodeMirror.lint.json)
-			 }
+			}
 			if (ln == 'props') { ln = 'text/x-properties' }
 			if (ln == 'yaml') {
 				ln = 'text/x-yaml'
 				editor.setOption("gutters", ['CodeMirror-lint-markers']);
 				editor.setOption("lint", CodeMirror.lint.yaml)
 			}
-		editor.setOption("mode", ln);
+			editor.setOption("mode", ln);
 		});
 
 		// theme 
-		document.getElementById("fe_ee_pp_theme").addEventListener("change", function(){
+		document.getElementById("fe_ee_pp_theme").addEventListener("change", function () {
 			var thm = this.options[this.selectedIndex].value;
-			if(thm === 'default' && app.getPref('theme') === 'dark') thm = 'gruvbox-dark';
-			if(thm === 'light') thm = 'default';
+			if (thm === 'default' && app.getPref('theme') === 'dark') thm = 'gruvbox-dark';
+			if (thm === 'light') thm = 'default';
 			editor.setOption("theme", thm);
 		});
 	},
@@ -2725,7 +2859,7 @@ Class.subclass(Page.Base, "Page.Schedule", {
 	refresh_plugin_params: function () {
 		// redraw plugin param area after change
 		$('#d_ee_plugin_params').html(this.get_plugin_params_html());
-		this.setScriptEditor(); 
+		this.setScriptEditor();
 	},
 
 	get_random_event: function () {
diff --git a/package.json b/package.json
index 7d27132..1127cb0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "cronicle-edge",
-	"version": "1.8.2",
+	"version": "1.9.0",
 	"description": "A simple, distributed task scheduler and runner with a web based UI.",
 	"author": "Joseph Huckaby <jhuckaby@gmail.com>",
 	"homepage": "https://github.com/jhuckaby/Cronicle",
diff --git a/sample_conf/setup.json b/sample_conf/setup.json
index e286d10..e90d530 100644
--- a/sample_conf/setup.json
+++ b/sample_conf/setup.json
@@ -87,9 +87,10 @@
 				{ "id":"ssh_host", "type":"text", "size":40, "title":"SSH Host", "value": "ssh://cronicle:Password@localhost:22" },
 				{ "id":"kill_cmd", "type":"text", "size":40, "title":"Kill Command", "value": "pkill -s $$" },
 				{ "id":"script", "type":"textarea", "rows":10, "title":"Script", "value": "\n#!/bin/sh\n\necho \"Running SSHX job on $HOSTNAME\"\n\nsleep 10\n\n# Specify conneciton info using URI format:\n# [ssh://]user[:Password]@host[:port]?[privateKey=/path/to/file&passphrase=Password]\n# URI can be passed directly or as a reference to environment variable\n# If passing password via URI, you'd need to encode special characters (e.g. @ => %40)\n# You can also set SSH_KEY/SSH_PASSWORD/SSH_PASSPHRASE as variables in event/plugin secrets\n\n# If no SSH Host specified on event parameters, it can be resolved from WF argument\n\n# Kill Command parameter is used to properly handle job abortion\n# Default command is [pkill -S $$]\n# $$ is refering to PID of your script parent process (bootstrap script)\n\n# To pass variables other then JOB_ / ARG*, use SSH_ prefix on variable name\n# If this event is chained by other job, you can access chain data using CHAIN_DATA variable\n\n" },
-				{"type":"select","id":"lang","title":"syntax","items":["shell","powershell","javascript","python","perl","groovy","java","csharp","scala","sql","yaml","dockerfile","json","props"],"value":"shell"},
-				{"type":"select","id":"theme","title":"theme","items":["default","gruvbox-dark","solarized light","solarized dark","darcula","ambiance","base16-dark","nord"],"value":"default"},
-				{ "id":"json", "type":"checkbox", "title":"Interpret JSON in Output", "value": 0 }		
+				{ "id":"json", "type":"checkbox", "title":"Interpret JSON in Output", "value": 0 },
+				{ "type": "checkbox", "id": "annotate", "title": "Add Date/Time Stamps to Log",	"value": 0 },
+				{ "type":"select","id":"lang","title":"syntax","items":["shell","powershell","javascript","python","perl","groovy","java","csharp","scala","sql","yaml","dockerfile","json","props"],"value":"shell"},
+				{ "type":"select","id":"theme","title":"theme","items":["default","gruvbox-dark","solarized light","solarized dark","darcula","ambiance","base16-dark","nord"],"value":"default"}
 			]
 		} ],
 		
@@ -109,6 +110,7 @@
 				{ "id":"command", "type":"text", "size":40, "title":"Command", "value": "" },
 				{ "id":"script", "type":"textarea", "rows":10, "title":"Script", "value": "\n#!/bin/sh\n\necho \"Running Docker job on $HOSTNAME\"\n\ncat /etc/os-release\n\nls -lah chain_data || echo \"no chain data\"\n\n# If Docker Host is not specified, docker socket will be used\n# To access remote docker machine via ssh (on top of socket) specify DH as:\n# ssh://user[:password]@host[:port]\n# To specify ssh credentials you can also use SSH_PASSWORD/SSH_KEY env varaibles\n# To access remote docker instance with exposed http:\n# http://dockerhost:2375  (there is no auth options for that at this point)\n# To specify image registry credentials use DOCKER_USER, DOCKER_PASSWORD variables\n# All credential variables can be set via event/plugin secrets\n\n# This script will be used as an entrypoint on the container (mounted as /cronicle.sh by default).\n# To use original entrypoint check corresponding checkbox below,\n#  and use command parameter above to pass argument to it\n# If this job is chained by other event, chain data will be mounted to the container\n#   as chain_data file \n\n# In order to pass variables to container (other than JOB_ and ARG*) it should start with DOCKER_\n\n# If job is aborted \"docker stop\" is invoked (SIGTERM), docker will send SIGKILL after some time\n# Try to handle SIGTERM in your script for proper shutdown on abortion\n"},
 				{ "id":"entrypoint_path", "type":"text", "size":40, "title":"Mount As", "value": "" },
+				{ "id":"network", "type":"text", "size":20, "title":"Network", "value": "" },
 				{ "id":"keep_entrypoint", "type":"checkbox", "title":"Keep Original Entrypoint", "value": 0 },
 				{ "id":"pull_image", "type":"checkbox", "title":"Pull Image", "value": 1 },
 				{ "id":"keep_container", "type":"checkbox", "title":"Keep Container", "value": 0 },