diff --git a/public-typescript/dashboard.d.ts b/public-typescript/dashboard.d.ts
new file mode 100644
index 00000000..cb0ff5c3
--- /dev/null
+++ b/public-typescript/dashboard.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/public-typescript/dashboard.js b/public-typescript/dashboard.js
new file mode 100644
index 00000000..78c79d8c
--- /dev/null
+++ b/public-typescript/dashboard.js
@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+(() => {
+    const los = exports.los;
+    const workOrderNumberCircleElements = document.querySelectorAll(".fa-circle[data-work-order-number");
+    for (const workOrderNumberCircleElement of workOrderNumberCircleElements) {
+        workOrderNumberCircleElement.style.color = los.getRandomColor(workOrderNumberCircleElement.dataset.workOrderNumber);
+    }
+})();
diff --git a/public-typescript/dashboard.ts b/public-typescript/dashboard.ts
new file mode 100644
index 00000000..5218c1ff
--- /dev/null
+++ b/public-typescript/dashboard.ts
@@ -0,0 +1,13 @@
+/* eslint-disable unicorn/prefer-module */
+
+import type * as globalTypes from "../types/globalTypes";
+
+(() => {
+    const los = exports.los as globalTypes.LOS;
+
+    const workOrderNumberCircleElements = document.querySelectorAll(".fa-circle[data-work-order-number") as NodeListOf<HTMLElement>;
+
+    for (const workOrderNumberCircleElement of workOrderNumberCircleElements) {
+        workOrderNumberCircleElement.style.color = los.getRandomColor(workOrderNumberCircleElement.dataset.workOrderNumber);
+    }
+})();
\ No newline at end of file
diff --git a/public/javascripts/dashboard.min.js b/public/javascripts/dashboard.min.js
new file mode 100644
index 00000000..f17777e7
--- /dev/null
+++ b/public/javascripts/dashboard.min.js
@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),(()=>{const e=exports.los,o=document.querySelectorAll(".fa-circle[data-work-order-number");for(const r of o)r.style.color=e.getRandomColor(r.dataset.workOrderNumber)})();
\ No newline at end of file
diff --git a/views/dashboard.ejs b/views/dashboard.ejs
index 3d700e22..bfbd9808 100644
--- a/views/dashboard.ejs
+++ b/views/dashboard.ejs
@@ -9,18 +9,35 @@
         <% const workOrderPrints = configFunctions.getProperty("settings.workOrders.prints"); %>
         <div class="column is-4">
             <div class="panel is-info">
-                <h2 class="panel-heading">Today's Milestones</h2>
+                <div class="panel-heading">
+                    <div class="level is-mobile">
+                        <div class="level-left">
+                            <div class="level-item">
+                                <h2 class="title is-5 has-text-weight-bold has-text-white">
+                                    Today's Milestones
+                                </h2>
+                            </div>
+                        </div>
+                        <div class="level-right">
+                            <div class="level-item">
+                                <span class="tag"><%= workOrderMilestones.length %></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <% for (const milestone of workOrderMilestones) { %>
                     <div class="panel-block is-block">
                         <div class="columns is-mobile">
                             <div class="column is-narrow">
-                                <div class="icon is-small">
-                                    <% if (milestone.workOrderMilestoneCompletionDate) { %>
+                                <% if (milestone.workOrderMilestoneCompletionDate) { %>
+                                    <span class="icon is-small has-tooltip-right" data-tooltip="Completed">
                                         <i class="fas fa-check" aria-label="Completed"></i>
-                                    <% } else { %>
+                                    </span>
+                                <% } else { %>
+                                    <span class="icon is-small has-tooltip-right" data-tooltip="Incomplete">
                                         <i class="far fa-square" aria-label="Incomplete"></i>   
-                                    <% } %>
-                                </div>
+                                    </span>
+                                <% } %>
                             </div>
                             <div class="column">
                                 <% if (workOrderPrints.length > 0) { %>
@@ -38,7 +55,7 @@
                                 <% } %>
                                 <span class="is-size-7">
                                     <a href="<%= urlPrefix %>/workOrders/<%= milestone.workOrderId %>">
-                                        <i class="fas fa-hard-hat" aria-label="Work Order"></i> <%= milestone.workOrderNumber %>
+                                        <i class="fas fa-circle" data-work-order-number="<%= milestone.workOrderNumber %>" aria-label="Work Order"></i> <%= milestone.workOrderNumber %>
                                     </a><br />
                                     <% 
                                         if (milestone.workOrderLots.length > 0) {
@@ -366,6 +383,8 @@
     </div>
 </div>
 
-
 <%- include('_footerA'); -%>
+
+<script src="<%= urlPrefix %>/javascripts/dashboard.min.js"></script>
+
 <%- include('_footerB'); -%>
\ No newline at end of file