diff --git a/ChartGrid.js b/ChartGrid.js
index 1500b8082..589acedd6 100644
--- a/ChartGrid.js
+++ b/ChartGrid.js
@@ -511,7 +511,7 @@
 
                             if (labelPoint.y > viewPort.visibleArea.topLeft.y + fontSize && labelPoint.y < viewPort.visibleArea.bottomRight.y - fontSize) {
 
-                                browserCanvasContext.font = fontSize + 'px Courier New';
+                                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
                                 browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
                                 browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
@@ -548,7 +548,7 @@
 
                             if (labelPoint.y > viewPort.visibleArea.topLeft.y + fontSize && labelPoint.y < viewPort.visibleArea.bottomRight.y - fontSize) {
 
-                                browserCanvasContext.font = fontSize + 'px Courier New';
+                                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
                                 browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
                                 browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
@@ -657,17 +657,17 @@
                 browserCanvasContext.beginPath();
 
                 browserCanvasContext.rect(labelPoint.x, labelPoint.y - fontSize, xOffset * 2, fontSize );
-                browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)';
                 browserCanvasContext.fill();
 
                 browserCanvasContext.closePath();
 
-                browserCanvasContext.font = fontSize + 'px Courier New';
+                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
                 browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
                 browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
             }
 
-            browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)';
             browserCanvasContext.beginPath();
             browserCanvasContext.rect(0, TOP_SPACE_HEIGHT, viewPort.visibleArea.topLeft.x, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT);
             browserCanvasContext.rect(viewPort.visibleArea.topRight.x, TOP_SPACE_HEIGHT, 500, viewPort.visibleArea.topLeft.y - TOP_SPACE_HEIGHT);
diff --git a/Dashboard.js b/Dashboard.js
index 4b9ec3d35..33d310818 100644
--- a/Dashboard.js
+++ b/Dashboard.js
@@ -5,7 +5,15 @@
 
 UI_COLOR = {
     DARK: "48, 48, 54",
-    LIGHT: "234, 226, 222"
+    LIGHT: "234, 226, 222",
+    WHITE: "255, 255, 255"
+};
+
+/* User Interface Fonts */
+
+UI_FONT = {
+    PRIMARY: "Saira",
+    SECONDARY: "Courier New"
 };
 
 /* Callbacks default responses. */
diff --git a/FloatingSpace/Note.js b/FloatingSpace/Note.js
index 650d29993..a30904ea8 100644
--- a/FloatingSpace/Note.js
+++ b/FloatingSpace/Note.js
@@ -214,7 +214,7 @@ function newNote() {
 
                     if (SIZE_PERCENTAGE > 0.9) {
 
-                        browserCanvasContext.font = fontSize + 'px Courier New';
+                        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
 
                         let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO;
                         let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2;
@@ -303,7 +303,7 @@ function newNote() {
                                 y: startingPosition.y + (i + 1) * (fontSize * 0.60 + 10)
                             };
 
-                            browserCanvasContext.font = fontSize + 'px Courier New';
+                            browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
                             browserCanvasContext.fillStyle = 'rgba(60, 60, 60, ' + ALPHA + ')'
                             browserCanvasContext.fillText(labelRow, labelPoint.x, labelPoint.y);
 
diff --git a/FloatingSpace/NoteSets.js b/FloatingSpace/NoteSets.js
index c75aaa118..5339bdf90 100644
--- a/FloatingSpace/NoteSets.js
+++ b/FloatingSpace/NoteSets.js
@@ -283,7 +283,7 @@ function newNoteSets() {
                                 floatingObject.initializeRadius(radius);
                                 floatingObject.initializeImageSize(15);
 
-                                floatingObject.fillStyle = 'rgba(255, 255, 255, 0.5)';
+                                floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)';
                                 floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)';
 
                                 floatingLayer.addFloatingObject(floatingObject);
diff --git a/FloatingSpace/ProfileBall.js b/FloatingSpace/ProfileBall.js
index 5bca8dad9..77ca50940 100644
--- a/FloatingSpace/ProfileBall.js
+++ b/FloatingSpace/ProfileBall.js
@@ -117,7 +117,7 @@ function newProfileBall() {
             let labelPoint;
             let fontSize = 10;
 
-            browserCanvasContext.font = fontSize + 'px Courier New';
+            browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
 
             let label;
 
@@ -130,7 +130,7 @@ function newProfileBall() {
                     y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * 0.60 - 5
                 };
 
-                browserCanvasContext.font = fontSize + 'px Courier New';
+                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
                 browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle;
                 browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
@@ -145,7 +145,7 @@ function newProfileBall() {
                     y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * 0.60 + 10
                 };
 
-                browserCanvasContext.font = fontSize + 'px Courier New';
+                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
                 browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle;
                 browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
diff --git a/FloatingSpace/ProfileBalls.js b/FloatingSpace/ProfileBalls.js
index c0d190ca4..ad5e301bf 100644
--- a/FloatingSpace/ProfileBalls.js
+++ b/FloatingSpace/ProfileBalls.js
@@ -57,7 +57,7 @@ function newProfileBalls() {
             floatingObject.initializeRadius(30);
             floatingObject.initializeImageSize(50);
 
-            floatingObject.fillStyle = 'rgba(255, 255, 255, 0.5)';
+            floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)';
             floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)';
 
             floatingLayer.addFloatingObject(floatingObject);
diff --git a/Frame.js b/Frame.js
index 14e314142..b46cbc172 100644
--- a/Frame.js
+++ b/Frame.js
@@ -365,7 +365,7 @@ function newFrame() {
 
         /* We paint the panel background first */
 
-        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 0.75)';
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.75)';
         browserCanvasContext.beginPath();
 
         browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI);
@@ -411,7 +411,7 @@ function newFrame() {
         let labelPoint;
         let fontSize = 10;
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
 
         let label = frame.containerName;
 
diff --git a/Images/Play.png b/Images/Play.png
index 4b1e60dd2..e51eb57e5 100644
Binary files a/Images/Play.png and b/Images/Play.png differ
diff --git a/Images/Stop.png b/Images/Stop.png
index 69e524545..62e34d941 100644
Binary files a/Images/Stop.png and b/Images/Stop.png differ
diff --git a/Panels/TimeControlPanel.js b/Panels/TimeControlPanel.js
index f3aa11a8e..108400f13 100644
--- a/Panels/TimeControlPanel.js
+++ b/Panels/TimeControlPanel.js
@@ -133,7 +133,7 @@ function newTimeControlPanel() {
 
         labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
@@ -150,7 +150,7 @@ function newTimeControlPanel() {
 
         labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
@@ -169,7 +169,7 @@ function newTimeControlPanel() {
 
         labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
diff --git a/ProductCard.js b/ProductCard.js
index 6d8ed4d89..a215afff1 100644
--- a/ProductCard.js
+++ b/ProductCard.js
@@ -438,7 +438,7 @@
         let labelPoint;
         let fontSize = 10;
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
 
         let label;
 
@@ -453,7 +453,7 @@
 
         labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
@@ -468,7 +468,7 @@
 
         labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
@@ -490,7 +490,7 @@
 
         labelPoint = thisObject.container.frame.frameThisPoint(labelPoint);
 
-        browserCanvasContext.font = fontSize + 'px Courier New bold';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY;
         browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)';
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
diff --git a/SplashScreen.js b/SplashScreen.js
index 1c8c0c642..1bc522238 100644
--- a/SplashScreen.js
+++ b/SplashScreen.js
@@ -79,13 +79,13 @@ function newSplashScreen() {
         browserCanvasContext.beginPath();
 
         browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height);
-        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, ' + opacity + ')';
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')';
 
         browserCanvasContext.closePath();
 
         browserCanvasContext.fill();
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
         browserCanvasContext.fillStyle = 'rgba(200, 200, 200,  ' + opacity + ')';
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
 
diff --git a/TextButton.js b/TextButton.js
index 61a92ed85..718172214 100644
--- a/TextButton.js
+++ b/TextButton.js
@@ -115,7 +115,7 @@
         let labelPoint;
         let fontSize = 10;
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
 
         let label = textButton.type;
 
diff --git a/TimelineChart.js b/TimelineChart.js
index b3160f64c..518c01820 100644
--- a/TimelineChart.js
+++ b/TimelineChart.js
@@ -983,7 +983,7 @@
 
         }
 
-        browserCanvasContext.font = currentFontSize + 'px Courier New';
+        browserCanvasContext.font = currentFontSize + 'px ' + UI_FONT.PRIMARY;
         browserCanvasContext.fillStyle = 'rgba(75, 86, 235, 0.07)';
         browserCanvasContext.fillText(label, point.x, point.y);
 
diff --git a/TopSpace/CurrentBot.js b/TopSpace/CurrentBot.js
index 3d35c8cb7..f98fcc2f3 100644
--- a/TopSpace/CurrentBot.js
+++ b/TopSpace/CurrentBot.js
@@ -64,8 +64,8 @@ function newCurrentBot() {
 
         point = thisObject.container.frame.frameThisPoint(point);
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
-        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)';
         browserCanvasContext.fillText(label, point.x, point.y);
     }
 }
\ No newline at end of file
diff --git a/TopSpace/CurrentProcess.js b/TopSpace/CurrentProcess.js
index a58d96944..43a672c56 100644
--- a/TopSpace/CurrentProcess.js
+++ b/TopSpace/CurrentProcess.js
@@ -64,8 +64,8 @@ function newCurrentProcess() {
 
         point = thisObject.container.frame.frameThisPoint(point);
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
-        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)';
         browserCanvasContext.fillText(label, point.x, point.y);
     }
 }
\ No newline at end of file
diff --git a/TopSpace/CurrentStartMode.js b/TopSpace/CurrentStartMode.js
index 70b57944f..731da5c8f 100644
--- a/TopSpace/CurrentStartMode.js
+++ b/TopSpace/CurrentStartMode.js
@@ -86,8 +86,8 @@ function newCurrentStartMode() {
 
         point = thisObject.container.frame.frameThisPoint(point);
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
-        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)';
         browserCanvasContext.fillText(label, point.x, point.y);
     }
 }
\ No newline at end of file
diff --git a/TopSpace/DevTeam.js b/TopSpace/DevTeam.js
index 960f45674..0656f7835 100644
--- a/TopSpace/DevTeam.js
+++ b/TopSpace/DevTeam.js
@@ -64,8 +64,8 @@ function newDevTeam() {
 
         point = thisObject.container.frame.frameThisPoint(point);
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
-        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)';
         browserCanvasContext.fillText(label, point.x, point.y);
     }
 }
\ No newline at end of file
diff --git a/TopSpace/EndUser.js b/TopSpace/EndUser.js
index b0d11d444..04ff14729 100644
--- a/TopSpace/EndUser.js
+++ b/TopSpace/EndUser.js
@@ -64,8 +64,8 @@ function newEndUser() {
 
         point = thisObject.container.frame.frameThisPoint(point);
 
-        browserCanvasContext.font = fontSize + 'px Courier New';
-        browserCanvasContext.fillStyle = 'rgba(255, 255, 255, 1)';
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY;
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)';
         browserCanvasContext.fillText(label, point.x, point.y);
     }
 }
\ No newline at end of file