diff --git a/www/assets/css/other.css b/www/assets/css/other.css
index a572c83..1b64dfc 100644
--- a/www/assets/css/other.css
+++ b/www/assets/css/other.css
@@ -54,4 +54,100 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 #pincode-box {
     font-size: 200%;
+}
+
+
+.btn-red, .btn-red:hover, .btn-red:active, .btn-red:focus {
+    background-color: #f44336;
+    color: white;
+}
+
+.btn-pink, .btn-pink:hover, .btn-pink:active, .btn-pink:focus {
+    background-color: #e91e63;
+    color: white;
+}
+
+.btn-purple, .btn-purple:hover, .btn-purple:active, .btn-purple:focus {
+    background-color: #9c27b0;
+    color: white;
+}
+
+.btn-deep-purple, .btn-deep-purple:hover, .btn-deep-purple:active, .btn-deep-purple:focus {
+    background-color: #673ab7;
+    color: white;
+}
+
+.btn-indigo, .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus {
+    background-color: #3f51b5;
+    color: white;
+}
+
+.btn-blue, .btn-blue:hover, .btn-blue:active, .btn-blue:focus {
+    background-color: #2196f3;
+    color: white;
+}
+
+.btn-light-blue, .btn-light-blue:hover, .btn-light-blue:active, .btn-light-blue:focus {
+    background-color: #03a9f4;
+    color: black;
+}
+
+.btn-cyan, .btn-cyan:hover, .btn-cyan:active, .btn-cyan:focus {
+    background-color: #00bcd4;
+    color: white;
+}
+
+.btn-teal, .btn-teal:hover, .btn-teal:active, .btn-teal:focus {
+    background-color: #009688;
+    color: white;
+}
+
+.btn-green, .btn-green:hover, .btn-green:active, .btn-green:focus {
+    background-color: #4caf50;
+    color: white;
+}
+
+.btn-light-green, .btn-light-green:hover, .btn-light-green:active, .btn-light-green:focus {
+    background-color: #8bc34a;
+    color: black;
+}
+
+.btn-lime, .btn-lime:hover, .btn-lime:active, .btn-lime:focus {
+    background-color: #cddc39;
+    color: black;
+}
+
+.btn-yellow, .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus {
+    background-color: #ffeb3b;
+    color: black;
+}
+
+.btn-amber, .btn-amber:hover, .btn-amber:active, .btn-amber:focus {
+    background-color: #ffc107;
+    color: black;
+}
+
+.btn-orange, .btn-orange:hover, .btn-orange:active, .btn-orange:focus {
+    background-color: #ff9800;
+    color: black;
+}
+
+.btn-deep-orange, .btn-deep-orange:hover, .btn-deep-orange:active, .btn-deep-orange:focus {
+    background-color: #ff5722;
+    color: black;
+}
+
+.btn-brown, .btn-brown:hover, .btn-brown:active, .btn-brown:focus {
+    background-color: #795548;
+    color: white;
+}
+
+.btn-grey, .btn-grey:hover, .btn-grey:active, .btn-grey:focus {
+    background-color: #9e9e9e;
+    color: white;
+}
+
+.btn-blue-grey, .btn-blue-grey:hover, .btn-blue-grey:active, .btn-blue-grey:focus {
+    background-color: #607d8b;
+    color: white;
 }
\ No newline at end of file
diff --git a/www/cards/js/qwikclock_jobs.js b/www/cards/js/qwikclock_jobs.js
new file mode 100644
index 0000000..1e96626
--- /dev/null
+++ b/www/cards/js/qwikclock_jobs.js
@@ -0,0 +1,78 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+function dispCurrent(card, current) {
+    var url = card.data("apiurl");
+    $.post(url, {
+        username: getuser(),
+        password: getAPIKey(),
+        action: "getactivejob"
+    }, function (resp) {
+        if (resp.status == "OK") {
+            if (resp.job == false) {
+                current.html('<div class="btn btn-default btn-sm">None</div>');
+            } else {
+                current.html('<div class="btn btn-' + resp.job.color + ' btn-sm">' + resp.job.name + '</div>');
+            }
+        } else {
+            showmsg(resp.msg, "danger");
+        }
+    }, "json").fail(function () {
+        card.css("display", "none");
+    });
+}
+
+$(".card_qwikclock_jobs").each(function () {
+    var card = $(this);
+    $(this).find(".card_title").prepend("Jobs | ");
+    var btnbin = $(this).find(".job-btn-bin");
+    var current = $(this).find(".current-job");
+    var url = $(this).data("apiurl");
+    $.post(url, {
+        username: getuser(),
+        password: getAPIKey(),
+        action: "getjobs"
+    }, function (resp) {
+        if (resp.status == "OK") {
+            var jobs = resp.jobs;
+            if (jobs.length > 0) {
+                for (var job in jobs) {
+                    btnbin.append('<div class="btn job-btn btn-' + jobs[job]['color'] + '" data-jobid="' + jobs[job]['id'] + '">' + jobs[job]['name'] + '</div>');
+                }
+                btnbin.append('<div class="btn job-btn btn-red" data-jobid="-1"><i class="fas fa-times"></i> None</div>');
+            } else {
+                btnbin.html('<div class="alert alert-primary"><i class="fas fa-info-circle"></i> No jobs available.</div>');
+            }
+        } else {
+            showmsg(resp.msg, "danger");
+        }
+    }, "json").fail(function () {
+        card.css("display", "none");
+    });
+    dispCurrent(card, current);
+    setInterval(function () {
+        dispCurrent(card, current)
+    }, 2500);
+});
+
+$(".card_qwikclock_jobs").on("click", ".job-btn", function () {
+    var parent = $(this).parents(".card_app");
+    var current = parent.find(".current-job");
+    var url = parent.data("apiurl");
+    $.post(url, {
+        username: getuser(),
+        password: getAPIKey(),
+        action: "setjob",
+        job: $(this).data("jobid")
+    }, function (resp) {
+        if (resp.status == "OK") {
+            showmsg('<i class="fas fa-check"></i> ' + resp.msg, "success");
+        } else {
+            showmsg('<i class="fas fa-times"></i> ' + resp.msg, "danger");
+        }
+        dispCurrent(parent, current);
+    }, "json");
+});
\ No newline at end of file
diff --git a/www/cards/qwikclock_jobs.html b/www/cards/qwikclock_jobs.html
new file mode 100644
index 0000000..bf5610a
--- /dev/null
+++ b/www/cards/qwikclock_jobs.html
@@ -0,0 +1,23 @@
+<!--
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+<style>
+    .job-btn-bin {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .job-btn {
+        margin: 5px 5px;
+    }
+</style>
+<h3 class="card-header" style="background-color: #2196F3; color: white;"><i class="fas fa-briefcase"></i> <span class="card_title">QwikClock | Jobs</span></h3>
+<div class="card-body">
+    <p>Current Job: <span class="current-job"></span>
+    <p>Select a Job:</p>
+    <div class="job-btn-bin" style="width: 100%;">
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/www/js/home.js b/www/js/home.js
index 60831ea..c0b43a9 100644
--- a/www/js/home.js
+++ b/www/js/home.js
@@ -1,4 +1,4 @@
-/* 
+/*
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
@@ -9,14 +9,15 @@ var loadedCardTypes = [];
 var totalCardTypes = [];
 
 var cardSettings = {
-    "qwikclock_punchinout": {"classes": "col-12 col-md-4 col-lg-4 col-xl-4 order-1"},
-    "qwikclock_myshifts": {"classes": "col-12 col-md-8 col-lg-8 col-xl-6 order-2"}
+    "qwikclock_punchinout": {"classes": "col-12 col-md-4 col-lg-4 col-xl-3 order-1"},
+    "qwikclock_myshifts": {"classes": "col-12 col-md-8 col-lg-8 col-xl-5 order-2"},
+    "qwikclock_jobs": {"classes": "col-12 col-md-6 col-lg-6 col-xl-4 order-5"},
 };
 
 function loadCard(type, apiurl, title) {
     $.get("cards/" + type + ".html", {}, function (html) {
         console.log(type + " " + apiurl + " " + title);
-        var cardClasses = "col-12 col-md-6 col-lg-6 col-xl-4 order-12";
+        var cardClasses = "col-12 col-md-6 col-lg-6 col-xl-4 order-6";
         if (cardSettings.hasOwnProperty(type) && cardSettings[type].hasOwnProperty("classes")) {
             cardClasses = cardSettings[type]["classes"];
         }