diff --git a/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml b/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml
index 6f054f9c19..4f90d31f0b 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml
@@ -10,7 +10,7 @@ import Cura 1.0 as Cura
 Rectangle {
     id: base
     property var iconSource: null;
-    color: "#0a0850" // TODO: Theme!
+    color: UM.Theme.getColor("monitor_icon_primary")
     height: width;
     radius: Math.round(0.5 * width);
     width: 24 * screenScaleFactor;
@@ -22,7 +22,7 @@ Rectangle {
             horizontalCenter: parent.horizontalCenter;
             verticalCenter: parent.verticalCenter;
         }
-        color: UM.Theme.getColor("primary_text");
+        color: UM.Theme.getColor("monitor_icon_accent");
         height: width;
         source: iconSource;
         width: Math.round(parent.width / 2);
diff --git a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml
index d4c123652d..c839e52892 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/ExpandableCard.qml
@@ -6,10 +6,11 @@ import QtQuick.Controls 2.0
 import UM 1.3 as UM
 import Cura 1.0 as Cura
 
-// TODO: Theme & documentation!
-// The expandable component has 3 major sub components:
-//      * The headerItem Always visible and should hold some info about what happens if the component is expanded
-//      * The popupItem The content that needs to be shown if the component is expanded.
+/**
+ * The expandable component has 3 major sub components:
+ *  - The headerItem Always visible and should hold some info about what happens if the component is expanded
+ *  - The popupItem The content that needs to be shown if the component is expanded.
+ */
 Item
 {
     id: base
@@ -17,10 +18,10 @@ Item
     property bool expanded: false
     property bool enabled: true
     property var borderWidth: 1
-    property color borderColor: "#CCCCCC"
-    property color headerBackgroundColor: "white"
-    property color headerHoverColor: "#e8f2fc"
-    property color drawerBackgroundColor: "white"
+    property color borderColor: UM.Theme.getColor("monitor_card_border")
+    property color headerBackgroundColor: UM.Theme.getColor("monitor_icon_accent")
+    property color headerHoverColor: UM.Theme.getColor("monitor_card_hover")
+    property color drawerBackgroundColor: UM.Theme.getColor("monitor_icon_accent")
     property alias headerItem: header.children
     property alias drawerItem: drawer.children
 
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml
index 192a5a7f76..d1a0c207c5 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml
@@ -41,7 +41,7 @@ Item
                 anchors.centerIn: parent
                 height: parent.height
                 width: height
-                color: buildplateIcon.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme!
+                color: buildplateIcon.visible > 0 ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
                 radius: Math.floor(height / 2)
             }
 
@@ -49,7 +49,7 @@ Item
             {
                 id: buildplateIcon
                 anchors.centerIn: parent
-                color: "#0a0850" // TODO: Theme! (Standard purple)
+                color: UM.Theme.getColor("monitor_icon_primary")
                 height: parent.height
                 source: "../svg/icons/buildplate.svg"
                 width: height
@@ -60,7 +60,7 @@ Item
         Label
         {
             id: buildplateLabel
-            color: "#191919" // TODO: Theme!
+            color: UM.Theme.getColor("monitor_text_primary")
             elide: Text.ElideRight
             font: UM.Theme.getFont("default") // 12pt, regular
             text: buildplate ? buildplate : ""
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml
index de24ee5a8c..0d7a177dd3 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml
@@ -49,12 +49,12 @@ Item
                 GradientStop
                 {
                     position: 0.0
-                    color: "#fff6f6f6" // TODO: Theme!
+                    color: UM.Theme.getColor("monitor_stage_background")
                 }
                 GradientStop
                 {
                     position: 1.0
-                    color: "#66f6f6f6" // TODO: Theme!
+                    color: UM.Theme.getColor("monitor_stage_background_fade")
                 }
             }
         }
@@ -82,9 +82,9 @@ Item
         onClicked: navigateTo(currentIndex - 1)
         background: Rectangle
         {
-            color: leftButton.hovered ? "#e8f2fc" : "#ffffff" // TODO: Theme!
+            color: leftButton.hovered ? UM.Theme.getColor("monitor_card_hover") : UM.Theme.getColor("monitor_card_background")
             border.width: 1 * screenScaleFactor // TODO: Theme!
-            border.color: "#cccccc" // TODO: Theme!
+            border.color: UM.Theme.getColor("monitor_card_border")
             radius: 2 * screenScaleFactor // TODO: Theme!
         }
         contentItem: Item
@@ -97,7 +97,7 @@ Item
                 height: width // TODO: Theme!
                 sourceSize.width: width // TODO: Theme!
                 sourceSize.height: width // TODO: Theme!
-                color: "#152950" // TODO: Theme!
+                color: UM.Theme.getColor("monitor_text_primary")
                 source: UM.Theme.getIcon("arrow_left")
             }
         }
@@ -161,9 +161,9 @@ Item
         hoverEnabled: true
         background: Rectangle
         {
-            color: rightButton.hovered ? "#e8f2fc" : "#ffffff" // TODO: Theme!
+            color: rightButton.hovered ? UM.Theme.getColor("monitor_card_hover") : UM.Theme.getColor("monitor_card_background")
             border.width: 1 * screenScaleFactor // TODO: Theme!
-            border.color: "#cccccc" // TODO: Theme!
+            border.color: UM.Theme.getColor("monitor_card_border")
             radius: 2 * screenScaleFactor // TODO: Theme!
         }
         contentItem: Item
@@ -176,7 +176,7 @@ Item
                 height: width // TODO: Theme!
                 sourceSize.width: width // TODO: Theme!
                 sourceSize.height: width // TODO: Theme!
-                color: "#152950" // TODO: Theme!
+                color: UM.Theme.getColor("monitor_text_primary")
                 source: UM.Theme.getIcon("arrow_right")
             }
         }
@@ -204,12 +204,12 @@ Item
                 GradientStop
                 {
                     position: 0.0
-                    color: "#66f6f6f6" // TODO: Theme!
+                    color: UM.Theme.getColor("monitor_stage_background_fade")
                 }
                 GradientStop
                 {
                     position: 1.0
-                    color: "#fff6f6f6" // TODO: Theme!
+                    color: UM.Theme.getColor("monitor_stage_background")
                 }
             }
         }
@@ -238,7 +238,7 @@ Item
             {
                 background: Rectangle
                 {
-                    color: model.index == currentIndex ? "#777777" : "#d8d8d8" // TODO: Theme!
+                    color: model.index == currentIndex ? UM.Theme.getColor("monitor_carousel_dot_current") : UM.Theme.getColor("monitor_carousel_dot")
                     radius: Math.floor(width / 2)
                     width: 12 * screenScaleFactor // TODO: Theme!
                     height: width // TODO: Theme!
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml
index 17c0fa8651..4079f23b0a 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml
@@ -36,7 +36,7 @@ Item
     MonitorIconExtruder
     {
         id: extruderIcon
-        color: "#eeeeee" // TODO: Theme!
+        color: UM.Theme.getColor("monitor_skeleton_loading")
         position: 0
     }
 
@@ -48,7 +48,7 @@ Item
             left: extruderIcon.right
             leftMargin: 12 * screenScaleFactor // TODO: Theme!
         }
-        color: materialLabel.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme!
+        color: materialLabel.visible > 0 ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
         height: 18 * screenScaleFactor // TODO: Theme!
         width: Math.max(materialLabel.contentWidth, 60 * screenScaleFactor) // TODO: Theme!
         radius: 2 * screenScaleFactor // TODO: Theme!
@@ -57,7 +57,7 @@ Item
         {
             id: materialLabel
             
-            color: "#191919" // TODO: Theme!
+            color: UM.Theme.getColor("monitor_text_primary")
             elide: Text.ElideRight
             font: UM.Theme.getFont("default") // 12pt, regular
             text: ""
@@ -77,7 +77,7 @@ Item
             left: materialLabelWrapper.left
             bottom: parent.bottom
         }
-        color: printCoreLabel.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme!
+        color: printCoreLabel.visible > 0 ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
         height: 18 * screenScaleFactor // TODO: Theme!
         width: Math.max(printCoreLabel.contentWidth, 36 * screenScaleFactor) // TODO: Theme!
         radius: 2 * screenScaleFactor // TODO: Theme!
@@ -86,7 +86,7 @@ Item
         {
             id: printCoreLabel
             
-            color: "#191919" // TODO: Theme!
+            color: UM.Theme.getColor("monitor_text_primary")
             elide: Text.ElideRight
             font: UM.Theme.getFont("default_bold") // 12pt, bold
             text: ""
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml
index f7d123ada7..c3e78317c5 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml
@@ -39,6 +39,7 @@ Item
     {
         id: positionLabel
         font: UM.Theme.getFont("small")
+        color: UM.Theme.getColor("monitor_text_primary")
         height: Math.round(size / 2)
         horizontalAlignment: Text.AlignHCenter
         text: position + 1
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml
index f2b9c3cff7..ab3668a5e4 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml
@@ -27,7 +27,7 @@ Item
     ExpandableCard
     {
         enabled: printJob != null
-        borderColor: printJob.configurationChanges.length !== 0 ? "#f5a623" : "#CCCCCC" // TODO: Theme!
+        borderColor: printJob && printJob.configurationChanges.length !== 0 ? UM.Theme.getColor("warning") : UM.Theme.getColor("monitor_card_border")
         headerItem: Row
         {
             height: 48 * screenScaleFactor // TODO: Theme!
@@ -49,7 +49,7 @@ Item
                 width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
                 Rectangle
                 {
-                    color: "#eeeeee"
+                    color: UM.Theme.getColor("monitor_skeleton_loading")
                     width: Math.round(parent.width / 2)
                     height: parent.height
                     visible: !printJob
@@ -57,7 +57,7 @@ Item
                 Label
                 {
                     text: printJob && printJob.name ? printJob.name : ""
-                    color: "#374355"
+                    color: UM.Theme.getColor("monitor_text_primary")
                     elide: Text.ElideRight
                     font: UM.Theme.getFont("medium") // 14pt, regular
                     visible: printJob
@@ -75,7 +75,7 @@ Item
                 width: 216 * screenScaleFactor // TODO: Theme! (Should match column size)
                 Rectangle
                 {
-                    color: "#eeeeee"
+                    color: UM.Theme.getColor("monitor_skeleton_loading")
                     width: Math.round(parent.width / 3)
                     height: parent.height
                     visible: !printJob
@@ -83,7 +83,7 @@ Item
                 Label
                 {
                     text: printJob ? OutputDevice.formatDuration(printJob.timeTotal) : ""
-                    color: "#374355"
+                    color: UM.Theme.getColor("monitor_text_primary")
                     elide: Text.ElideRight
                     font: UM.Theme.getFont("medium") // 14pt, regular
                     visible: printJob
@@ -102,7 +102,7 @@ Item
 
                 Rectangle
                 {
-                    color: "#eeeeee"
+                    color: UM.Theme.getColor("monitor_skeleton_loading")
                     width: 72 * screenScaleFactor // TODO: Theme!
                     height: parent.height
                     visible: !printJob
@@ -112,7 +112,7 @@ Item
                 {
                     id: printerAssignmentLabel
                     anchors.verticalCenter: parent.verticalCenter
-                    color: "#374355"
+                    color: UM.Theme.getColor("monitor_text_primary")
                     elide: Text.ElideRight
                     font: UM.Theme.getFont("medium") // 14pt, regular
                     text: {
@@ -176,7 +176,7 @@ Item
             {
                 id: printerConfiguration
                 anchors.verticalCenter: parent.verticalCenter
-                buildplate: "Glass"
+                buildplate: "Glass" // TODO: I18N
                 configurations:
                 [
                     base.printJob.configuration.extruderConfigurations[0],
@@ -186,7 +186,7 @@ Item
             }
             Label {
                 text: printJob && printJob.owner ? printJob.owner : ""
-                color: "#374355" // TODO: Theme!
+                color: UM.Theme.getColor("monitor_text_primary")
                 elide: Text.ElideRight
                 font: UM.Theme.getFont("medium") // 14pt, regular
                 anchors.top: printerConfiguration.top
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml
index d0bad63258..a392571757 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml
@@ -19,7 +19,7 @@ Item
     Rectangle
     {
         anchors.fill: parent
-        color: printJob ? "transparent" : "#eeeeee" // TODO: Theme!
+        color: printJob ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
         radius: 8 // TODO: Theme!
         Image
         {
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml
index d5d4705a36..2ba70268b2 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml
@@ -34,15 +34,15 @@ Item
         {
             background: Rectangle
             {
-                color: "#f5f5f5" // TODO: Theme!
-                implicitHeight: visible ? 8 * screenScaleFactor : 0 // TODO: Theme!
+                color: UM.Theme.getColor("monitor_progress_bar_empty")
+                implicitHeight: visible ? 12 * screenScaleFactor : 0 // TODO: Theme!
                 implicitWidth: 180 * screenScaleFactor // TODO: Theme!
                 radius: 2 * screenScaleFactor // TODO: Theme!
             }
             progress: Rectangle
             {
                 id: progressItem;
-                color: printJob && printJob.isActive ? "#3282ff" : "#CCCCCC" // TODO: Theme!
+                color: printJob && printJob.isActive ? UM.Theme.getColor("monitor_progress_bar_fill") : UM.Theme.getColor("monitor_progress_bar_deactive")
                 radius: 2 * screenScaleFactor // TODO: Theme!
             }
         }
@@ -56,7 +56,7 @@ Item
             leftMargin: 18 * screenScaleFactor // TODO: Theme!
         }
         text: printJob ? Math.round(printJob.progress * 100) + "%" : "0%"
-        color: printJob && printJob.isActive ? "#374355" : "#babac1" // TODO: Theme!
+        color: printJob && printJob.isActive ? UM.Theme.getColor("monitor_text_primary") : UM.Theme.getColor("monitor_text_disabled")
         width: contentWidth
         font: UM.Theme.getFont("medium") // 14pt, regular
 
@@ -72,7 +72,7 @@ Item
             left: percentLabel.right
             leftMargin: 18 * screenScaleFactor // TODO: Theme!
         }
-        color: "#374355" // TODO: Theme!
+        color: UM.Theme.getColor("monitor_text_primary")
         font: UM.Theme.getFont("medium") // 14pt, regular
         text:
         {
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml
index facfaaaaaf..93f9dca76d 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml
@@ -37,10 +37,10 @@ Item
     {
         id: background
         anchors.fill: parent
-        color: "#FFFFFF" // TODO: Theme!
+        color: UM.Theme.getColor("monitor_card_background")
         border
         {
-            color: "#CCCCCC" // TODO: Theme!
+            color: UM.Theme.getColor("monitor_card_border")
             width: borderSize // TODO: Remove once themed
         }
         radius: 2 * screenScaleFactor // TODO: Theme!
@@ -69,7 +69,7 @@ Item
                 id: printerImage
                 width: 108 * screenScaleFactor // TODO: Theme!
                 height: 108 * screenScaleFactor // TODO: Theme!
-                color: printer ? "transparent" : "#eeeeee" // TODO: Theme!
+                color: printer ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
                 radius: 8 // TODO: Theme!
                 Image
                 {
@@ -94,7 +94,7 @@ Item
                 {
                     id: printerNameLabel
                     // color: "#414054" // TODO: Theme!
-                    color: printer ? "transparent" : "#eeeeee" // TODO: Theme!
+                    color: printer ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
                     height: 18 * screenScaleFactor // TODO: Theme!
                     width: parent.width
                     radius: 2 * screenScaleFactor // TODO: Theme!
@@ -102,7 +102,7 @@ Item
                     Label
                     {
                         text: printer && printer.name ? printer.name : ""
-                        color: "#414054" // TODO: Theme!
+                        color: UM.Theme.getColor("monitor_text_primary")
                         elide: Text.ElideRight
                         font: UM.Theme.getFont("large") // 16pt, bold
                         width: parent.width
@@ -116,7 +116,7 @@ Item
 
                 Rectangle
                 {
-                    color: "#eeeeee" // TODO: Theme!
+                    color: UM.Theme.getColor("monitor_skeleton_loading")
                     height: 18 * screenScaleFactor // TODO: Theme!
                     radius: 2 * screenScaleFactor // TODO: Theme!
                     visible: !printer
@@ -220,7 +220,7 @@ Item
         }
         border
         {
-            color: printer && printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 ? "#f5a623" : "transparent" // TODO: Theme!
+            color: printer && printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 ? UM.Theme.getColor("warning") : "transparent" // TODO: Theme!
             width: borderSize // TODO: Remove once themed
         }
         color: "transparent" // TODO: Theme!
@@ -246,7 +246,7 @@ Item
                 {
                     verticalCenter: parent.verticalCenter
                 }
-                color: printer ? "#414054" : "#aaaaaa" // TODO: Theme!
+                color: printer ? UM.Theme.getColor("monitor_text_primary") : UM.Theme.getColor("monitor_text_disabled")
                 font: UM.Theme.getFont("large_bold") // 16pt, bold
                 text: {
                     if (!printer) {
@@ -299,7 +299,7 @@ Item
                 Label
                 {
                     id: printerJobNameLabel
-                    color: printer && printer.activePrintJob && printer.activePrintJob.isActive ? "#414054" : "#babac1" // TODO: Theme!
+                    color: printer && printer.activePrintJob && printer.activePrintJob.isActive ? UM.Theme.getColor("monitor_text_primary") : UM.Theme.getColor("monitor_text_disabled")
                     elide: Text.ElideRight
                     font: UM.Theme.getFont("large") // 16pt, bold
                     text: printer && printer.activePrintJob ? printer.activePrintJob.name : "Untitled" // TODO: I18N
@@ -319,7 +319,7 @@ Item
                         topMargin: 6 * screenScaleFactor // TODO: Theme!
                         left: printerJobNameLabel.left
                     }
-                    color: printer && printer.activePrintJob && printer.activePrintJob.isActive ? "#53657d" : "#babac1" // TODO: Theme!
+                    color: printer && printer.activePrintJob && printer.activePrintJob.isActive ? UM.Theme.getColor("monitor_text_primary") : UM.Theme.getColor("monitor_text_disabled")
                     elide: Text.ElideRight
                     font: UM.Theme.getFont("default") // 12pt, regular
                     text: printer && printer.activePrintJob ? printer.activePrintJob.owner : "Anonymous" // TODO: I18N
@@ -348,7 +348,7 @@ Item
                     verticalCenter: parent.verticalCenter
                 }
                 font: UM.Theme.getFont("default")
-                text: "Requires configuration changes"
+                text: "Requires configuration changes" // TODO: I18N
                 visible: printer && printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 && !printerStatus.visible
 
                 // FIXED-LINE-HEIGHT:
@@ -368,13 +368,13 @@ Item
             }
             background: Rectangle
             {
-                color: "#d8d8d8" // TODO: Theme!
+                color: UM.Theme.getColor("monitor_secondary_button_shadow")
                 radius: 2 * screenScaleFactor // Todo: Theme!
                 Rectangle
                 {
                     anchors.fill: parent
                     anchors.bottomMargin: 2 * screenScaleFactor // TODO: Theme!
-                    color: detailsButton.hovered ? "#e4e4e4" : "#f0f0f0" // TODO: Theme!
+                    color: detailsButton.hovered ? UM.Theme.getColor("monitor_secondary_button_hover") : UM.Theme.getColor("monitor_secondary_button")
                     radius: 2 * screenScaleFactor // Todo: Theme!
                 }
             }
@@ -382,9 +382,9 @@ Item
             {
                 anchors.fill: parent
                 anchors.bottomMargin: 2 * screenScaleFactor // TODO: Theme!
-                color: "#1e66d7" // TODO: Theme!
+                color: UM.Theme.getColor("monitor_secondary_button_text")
                 font: UM.Theme.getFont("medium") // 14pt, regular
-                text: "Details" // TODO: I18NC!
+                text: catalog.i18nc("@action:button","Details");
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignHCenter
                 height: 18 * screenScaleFactor // TODO: Theme!
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml
index debc8b7959..dbe085e18e 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml
@@ -37,7 +37,7 @@ Item
 
             MonitorExtruderConfiguration
             {
-                color: modelData && modelData.activeMaterial ? modelData.activeMaterial.color : "#eeeeee" // TODO: Theme!
+                color: modelData && modelData.activeMaterial ? modelData.activeMaterial.color : UM.Theme.getColor("monitor_skeleton_loading")
                 material: modelData && modelData.activeMaterial ? modelData.activeMaterial.name : ""
                 position: modelData && typeof(modelData.position) === "number" ? modelData.position : -1 // Use negative one to create empty extruder number
                 printCore: modelData ? modelData.hotendID : ""
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml
index 2408089e1e..2aeecd5a92 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml
@@ -32,14 +32,14 @@ Item
     Rectangle {
         id: background
         anchors.fill: parent
-        color: printerNameLabel.visible ? "#e4e4f2" : "#eeeeee"// TODO: Theme!
+        color: printerNameLabel.visible ? UM.Theme.getColor("monitor_printer_family_tag") : UM.Theme.getColor("monitor_skeleton_loading")
         radius: 2 * screenScaleFactor // TODO: Theme!
     }
 
     Label {
         id: printerNameLabel
         anchors.centerIn: parent
-        color: "#535369" // TODO: Theme!
+        color: UM.Theme.getColor("monitor_text_primary")
         text: tagText
         font.pointSize: 10 // TODO: Theme!
         visible: text !== ""
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml
index f2dc09de95..c9996849fb 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorQueue.qml
@@ -22,7 +22,7 @@ Item
             left: queuedPrintJobs.left
             top: parent.top
         }
-        color: UM.Theme.getColor("text")
+        color: UM.Theme.getColor("monitor_text_primary")
         font: UM.Theme.getFont("large")
         text: catalog.i18nc("@label", "Queued")
     }
@@ -42,7 +42,7 @@ Item
         {
             id: externalLinkIcon
             anchors.verticalCenter: manageQueueLabel.verticalCenter
-            color: UM.Theme.getColor("text_link")
+            color: UM.Theme.getColor("monitor_text_link")
             source: UM.Theme.getIcon("external_link")
             width: 16 * screenScaleFactor // TODO: Theme! (Y U NO USE 18 LIKE ALL OTHER ICONS?!)
             height: 16 * screenScaleFactor // TODO: Theme! (Y U NO USE 18 LIKE ALL OTHER ICONS?!)
@@ -56,9 +56,9 @@ Item
                 leftMargin: 6 * screenScaleFactor // TODO: Theme!
                 verticalCenter: externalLinkIcon.verticalCenter
             }
-            color: UM.Theme.getColor("text_link")
+            color: UM.Theme.getColor("monitor_text_link")
             font: UM.Theme.getFont("default") // 12pt, regular
-            linkColor: UM.Theme.getColor("text_link")
+            linkColor: UM.Theme.getColor("monitor_text_link")
             text: catalog.i18nc("@label link to connect manager", "Manage queue in Cura Connect")
             renderType: Text.NativeRendering
         }
@@ -94,7 +94,7 @@ Item
         Label
         {
             text: catalog.i18nc("@label", "Print jobs")
-            color: "#666666"
+            color: UM.Theme.getColor("monitor_text_primary")
             elide: Text.ElideRight
             font: UM.Theme.getFont("medium") // 14pt, regular
             anchors.verticalCenter: parent.verticalCenter
@@ -108,7 +108,7 @@ Item
         Label
         {
             text: catalog.i18nc("@label", "Total print time")
-            color: "#666666"
+            color: UM.Theme.getColor("monitor_text_primary")
             elide: Text.ElideRight
             font: UM.Theme.getFont("medium") // 14pt, regular
             anchors.verticalCenter: parent.verticalCenter
@@ -122,7 +122,7 @@ Item
         Label
         {
             text: catalog.i18nc("@label", "Waiting for")
-            color: "#666666"
+            color: UM.Theme.getColor("monitor_text_primary")
             elide: Text.ElideRight
             font: UM.Theme.getFont("medium") // 14pt, regular
             anchors.verticalCenter: parent.verticalCenter
diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml
index 8723e6f46e..59cbda7172 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorStage.qml
@@ -11,7 +11,7 @@ import QtGraphicalEffects 1.0
 // This is the root component for the monitor stage.
 Component
 {
-    Item
+    Rectangle
     {
         id: monitorFrame
 
@@ -24,6 +24,7 @@ Component
             }
         }
         width: maximumWidth
+        color: UM.Theme.getColor("monitor_stage_background")
         
         // Enable keyboard navigation. NOTE: This is done here so that we can also potentially
         // forward to the queue items in the future. (Deleting selected print job, etc.)
@@ -36,24 +37,6 @@ Component
             name: "cura"
         }
 
-        LinearGradient
-        {
-            anchors.fill: parent
-            gradient: Gradient
-            {
-                GradientStop
-                {
-                    position: 0.0
-                    color: "#f6f6f6" // TODO: Theme!
-                }
-                GradientStop
-                {
-                    position: 1.0
-                    color: "#ffffff" // TODO: Theme!
-                }
-            }
-        }
-
         Item
         {
             id: printers
diff --git a/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml b/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml
index 5c5c892dad..59d7b85862 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenu.qml
@@ -18,14 +18,14 @@ Item {
     Button {
         id: button;
         background: Rectangle {
-            color: UM.Theme.getColor("viewport_background"); // TODO: Theme!
+            color: UM.Theme.getColor("monitor_card_hover"); // TODO: Theme!
             height: button.height;
             opacity: button.down || button.hovered ? 1 : 0;
             radius: Math.round(0.5 * width);
             width: button.width;
         }
         contentItem: Label {
-            color: UM.Theme.getColor("monitor_context_menu_dots");
+            color: UM.Theme.getColor("monitor_text_primary")
             font.pixelSize: 32 * screenScaleFactor;
             horizontalAlignment: Text.AlignHCenter;
             text: button.text;
@@ -74,7 +74,7 @@ Item {
                         right: bloop.right;
                         rightMargin: 24 * screenScaleFactor;
                     }
-                    color: UM.Theme.getColor("monitor_context_menu_background");
+                    color: UM.Theme.getColor("monitor_context_menu")
                     height: 14 * screenScaleFactor;
                     transform: Rotation {
                         angle: 45;
@@ -91,7 +91,7 @@ Item {
                         top: parent.top;
                         topMargin: 8 * screenScaleFactor; // Because of the shadow + point
                     }
-                    color: UM.Theme.getColor("monitor_context_menu_background");
+                    color: UM.Theme.getColor("monitor_context_menu");
                     width: parent.width;
                 }
             }
diff --git a/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenuItem.qml b/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenuItem.qml
index eea8fac3e1..67c82db320 100644
--- a/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenuItem.qml
+++ b/plugins/UM3NetworkPrinting/resources/qml/PrintJobContextMenuItem.qml
@@ -9,10 +9,10 @@ import UM 1.3 as UM
 Button {
     background: Rectangle {
         opacity: parent.down || parent.hovered ? 1 : 0;
-        color: UM.Theme.getColor("monitor_context_menu_highlight");
+        color: UM.Theme.getColor("monitor_context_menu_hover")
     }
     contentItem: Label {
-        color: enabled ? UM.Theme.getColor("text") : UM.Theme.getColor("text_inactive");
+        color: enabled ? UM.Theme.getColor("monitor_text_primary") : UM.Theme.getColor("monitor_text_disabled");
         text: parent.text
         horizontalAlignment: Text.AlignLeft;
         verticalAlignment: Text.AlignVCenter;
diff --git a/resources/themes/cura-dark/theme.json b/resources/themes/cura-dark/theme.json
index 6b29073475..56369b9508 100644
--- a/resources/themes/cura-dark/theme.json
+++ b/resources/themes/cura-dark/theme.json
@@ -215,24 +215,39 @@
         "toolbox_header_button_text_inactive": [128, 128, 128, 255],
         "toolbox_header_button_text_hovered": [255, 255, 255, 255],
 
-        "monitor_card_background_inactive": [43, 48, 52, 255],
-        "monitor_card_background": [43, 48, 52, 255],
-        "monitor_context_menu_background": [80, 84, 87, 255],
-        "monitor_context_menu_dots": [0, 167, 233, 255],
-        "monitor_context_menu_highlight": [0, 167, 233, 255],
-        "monitor_image_overlay": [255, 255, 255, 255],
-        "monitor_lining_heavy": [255, 255, 255, 255],
-        "monitor_lining_light": [102, 102, 102, 255],
-        "monitor_pill_background": [102, 102, 102, 255],
+        "monitor_printer_family_tag": [86, 86, 106, 255],
+        "monitor_text_primary": [229, 229, 229, 255],
+        "monitor_text_disabled": [102, 102, 102, 255],
+        "monitor_text_link": [103, 160, 252, 255],
+        "monitor_icon_primary": [229, 229, 229, 255],
+        "monitor_icon_accent": [51, 53, 54, 255],
+
+        "monitor_secondary_button_hover": [80, 80, 80, 255],
+        "monitor_secondary_button": [92, 92, 92, 255],
+        "monitor_secondary_button_text": [250, 250, 250, 255],
+        "monitor_secondary_button_shadow": [74, 74, 74, 255],
+
+        "monitor_card_border": [102, 102, 102, 255],
+        "monitor_card_background": [51, 53, 54, 255],
+        "monitor_card_hover": [84, 89, 95, 255],
+
+        "monitor_stage_background": [30, 36, 39, 255],
+        "monitor_stage_background_fade": [30, 36, 39, 102],
+
+        "monitor_progress_bar_fill": [50, 130, 255, 255],
+        "monitor_progress_bar_deactive": [102, 102, 102, 255],
+        "monitor_progress_bar_empty": [67, 67, 67, 255],
+
+        "monitor_tooltips": [25, 25, 25, 255],
+        "monitor_context_menu": [67, 67, 67, 255],
+        "monitor_context_menu_hover": [30, 102, 215, 255],
+
+        "monitor_skeleton_loading": [102, 102, 102, 255],
         "monitor_placeholder_image": [102, 102, 102, 255],
-        "monitor_printer_icon": [255, 255, 255, 255],
-        "monitor_progress_background_text": [102, 102, 102, 255],
-        "monitor_progress_background": [80, 84, 87, 255],
-        "monitor_progress_fill_inactive": [216, 216, 216, 255],
-        "monitor_progress_fill_text": [0, 0, 0, 255],
-        "monitor_progress_fill": [216, 216, 216, 255],
-        "monotir_printer_icon_inactive": [154, 154, 154, 255],
-        "monitor_skeleton_fill": [31, 36, 39, 255],
-        "monitor_skeleton_fill_dark": [31, 36, 39, 255]
+        "monitor_image_overlay": [0, 0, 0, 255],
+        "monitor_shadow": [4, 10, 13, 255],
+
+        "monitor_carousel_dot": [119, 119, 119, 255],
+        "monitor_carousel_dot_current": [216, 216, 216, 255]
     }
 }
diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json
index 2b42778df4..607711c2f3 100644
--- a/resources/themes/cura-light/theme.json
+++ b/resources/themes/cura-light/theme.json
@@ -399,27 +399,40 @@
         "favorites_header_text_hover": [31, 36, 39, 255],
         "favorites_row_selected": [196, 239, 255, 255],
 
-        "monitor_card_background_inactive": [240, 240, 240, 255],
+        "monitor_printer_family_tag": [228, 228, 242, 255],
+        "monitor_text_primary": [65, 64, 84, 255],
+        "monitor_text_disabled": [238, 238, 238, 255],
+        "monitor_text_link": [50, 130, 255, 255],
+        "monitor_icon_primary": [10, 8, 80, 255],
+        "monitor_icon_accent": [255, 255, 255, 255],
+
+        "monitor_secondary_button_hover": [228, 228, 228, 255],
+        "monitor_secondary_button": [240, 240, 240, 255],
+        "monitor_secondary_button_text": [30, 102, 215, 255],
+        "monitor_secondary_button_shadow": [216, 216, 216, 255],
+
+        "monitor_card_border": [192, 193, 194, 255],
         "monitor_card_background": [255, 255, 255, 255],
-        "monitor_context_menu_background": [255, 255, 255, 255],
-        "monitor_context_menu_dots": [154, 154, 154, 255],
-        "monitor_context_menu_highlight": [245, 245, 245, 255],
-        "monitor_image_overlay": [0, 0, 0, 255],
-        "monitor_lining_heavy": [0, 0, 0, 255],
-        "monitor_lining_light": [230, 230, 230, 255],
-        "monitor_pill_background": [245, 245, 245, 255],
+        "monitor_card_hover": [232, 242, 252, 255],
+
+        "monitor_stage_background": [246, 246, 246, 255],
+        "monitor_stage_background_fade": [246, 246, 246, 102],
+
+        "monitor_progress_bar_fill": [50, 130, 255, 255],
+        "monitor_progress_bar_deactive": [192, 193, 194, 255],
+        "monitor_progress_bar_empty": [245, 245, 245, 255],
+
+        "monitor_tooltips": [25, 25, 25, 255],
+        "monitor_context_menu": [255, 255, 255, 255],
+        "monitor_context_menu_hover": [245, 245, 245, 255],
+
+        "monitor_skeleton_loading": [238, 238, 238, 255],
         "monitor_placeholder_image": [230, 230, 230, 255],
-        "monitor_printer_icon_inactive": [154, 154, 154, 255],
-        "monitor_printer_icon": [50, 130, 255, 255],
-        "monitor_progress_background_text": [0,0,0,255],
-        "monitor_progress_background": [245, 245, 245, 255],
-        "monitor_progress_fill_inactive": [154, 154, 154, 255],
-        "monitor_progress_fill_text": [255,255,255,255],
-        "monitor_progress_fill": [50, 130, 255, 255],
-        "monitor_shadow": [0, 0, 0, 63],
-        "monitor_skeleton_fill": [245, 245, 245, 255],
-        "monitor_skeleton_fill_dark": [216, 216, 216, 255],
-        "monitor_text_inactive": [154, 154, 154, 255]
+        "monitor_image_overlay": [0, 0, 0, 255],
+        "monitor_shadow": [220, 220, 220, 255],
+
+        "monitor_carousel_dot": [216, 216, 216, 255],
+        "monitor_carousel_dot_current": [119, 119, 119, 255]
     },
 
     "sizes": {