diff --git a/Modules/SettingsPanel/Bar/BarSectionEditor.qml b/Modules/SettingsPanel/Bar/BarSectionEditor.qml
index 36de549..73292d2 100644
--- a/Modules/SettingsPanel/Bar/BarSectionEditor.qml
+++ b/Modules/SettingsPanel/Bar/BarSectionEditor.qml
@@ -41,17 +41,19 @@ NBox {
     const totalSum = JSON.stringify(widget).split('').reduce((acc, character) => {
                                                                return acc + character.charCodeAt(0)
                                                              }, 0)
-    switch (totalSum % 5) {
+    switch (totalSum % 6) {
     case 0:
-      return Color.mPrimary
+      return [Color.mPrimary, Color.mOnPrimary]
     case 1:
-      return Color.mSecondary
+      return [Color.mSecondary, Color.mOnSecondary]
     case 2:
-      return Color.mTertiary
+      return [Color.mTertiary, Color.mOnTertiary]
     case 3:
-      return Color.mError
+      return [Color.mError, Color.mOnError]
     case 4:
-      return Color.mOnSurface
+      return [Color.mOnSurface, Color.mSurface]
+    case 5:
+      return [Color.mOnSurfaceVariant, Color.mSurfaceVariant]
     }
   }
 
@@ -129,7 +131,7 @@ NBox {
             width: widgetContent.implicitWidth + Style.marginL * scaling
             height: Style.baseWidgetSize * 1.15 * scaling
             radius: Style.radiusL * scaling
-            color: root.getWidgetColor(modelData)
+            color: root.getWidgetColor(modelData)[0]
             border.color: Color.mOutline
             border.width: Math.max(1, Style.borderS * scaling)
 
@@ -162,7 +164,7 @@ NBox {
               NText {
                 text: modelData.id
                 font.pointSize: Style.fontSizeS * scaling
-                color: Color.mOnPrimary
+                color: root.getWidgetColor(modelData)[1]
                 horizontalAlignment: Text.AlignHCenter
                 elide: Text.ElideRight
                 Layout.preferredWidth: 80 * scaling
diff --git a/Modules/SidePanel/Cards/PowerProfilesCard.qml b/Modules/SidePanel/Cards/PowerProfilesCard.qml
index 5dc895b..eff8f15 100644
--- a/Modules/SidePanel/Cards/PowerProfilesCard.qml
+++ b/Modules/SidePanel/Cards/PowerProfilesCard.qml
@@ -14,7 +14,7 @@ NBox {
 
   // Centralized service
   readonly property bool hasPP: PowerProfileService.available
-  
+
   RowLayout {
     id: powerRow
     anchors.fill: parent
diff --git a/Modules/SidePanel/Cards/SystemMonitorCard.qml b/Modules/SidePanel/Cards/SystemMonitorCard.qml
index e9b36d1..f4c615c 100644
--- a/Modules/SidePanel/Cards/SystemMonitorCard.qml
+++ b/Modules/SidePanel/Cards/SystemMonitorCard.qml
@@ -8,8 +8,6 @@ import qs.Widgets
 NBox {
   id: root
 
-
-
   ColumnLayout {
     id: content
     anchors.left: parent.left
diff --git a/Modules/SidePanel/Cards/UtilitiesCard.qml b/Modules/SidePanel/Cards/UtilitiesCard.qml
index 0b9dbf9..fd23adf 100644
--- a/Modules/SidePanel/Cards/UtilitiesCard.qml
+++ b/Modules/SidePanel/Cards/UtilitiesCard.qml
@@ -12,7 +12,6 @@ NBox {
 
   property real spacing: 0
 
-
   RowLayout {
     id: utilRow
     anchors.fill: parent