diff --git a/Assets/settings-search-index.json b/Assets/settings-search-index.json
index c6a87dc32..3f559cae8 100644
--- a/Assets/settings-search-index.json
+++ b/Assets/settings-search-index.json
@@ -197,15 +197,6 @@
     "subTab": 0,
     "subTabLabel": "common.appearance"
   },
-  {
-    "labelKey": "panels.bar.appearance-capsule-color-label",
-    "descriptionKey": "panels.bar.appearance-capsule-color-description",
-    "widget": "NComboBox",
-    "tab": 4,
-    "tabLabel": "panels.bar.title",
-    "subTab": 0,
-    "subTabLabel": "common.appearance"
-  },
   {
     "labelKey": "panels.bar.appearance-capsule-opacity-label",
     "descriptionKey": "panels.bar.appearance-capsule-opacity-description",
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/ActiveWindowSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/ActiveWindowSettings.qml
index 9e9498750..f8e22999d 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/ActiveWindowSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/ActiveWindowSettings.qml
@@ -67,10 +67,8 @@ ColumnLayout {
                 }
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/AudioVisualizerSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/AudioVisualizerSettings.qml
index 323566221..fe58e12e1 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/AudioVisualizerSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/AudioVisualizerSettings.qml
@@ -37,11 +37,10 @@ ColumnLayout {
     onEditingFinished: saveSettings()
   }
 
-  NComboBox {
+  NColorChoice {
     Layout.fillWidth: true
     label: I18n.tr("bar.audio-visualizer.color-name-label")
     description: I18n.tr("bar.audio-visualizer.color-name-description")
-    model: Color.colorKeyModel
     currentKey: root.valueColorName
     onSelected: key => {
                   root.valueColorName = key;
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/BluetoothSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/BluetoothSettings.qml
index 5c8af49a8..c308d3575 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/BluetoothSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/BluetoothSettings.qml
@@ -61,15 +61,11 @@ ColumnLayout {
                 }
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/BrightnessSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/BrightnessSettings.qml
index 83fd231d1..49e5ccabc 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/BrightnessSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/BrightnessSettings.qml
@@ -53,27 +53,20 @@ ColumnLayout {
                 }
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/ClockSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/ClockSettings.qml
index 737ad0def..851dd4ea4 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/ClockSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/ClockSettings.qml
@@ -84,16 +84,12 @@ ColumnLayout {
     }
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueClockColor
     onSelected: key => {
                   valueClockColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
   NToggle {
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml
index cd70f9a4e..8ec884a34 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/ControlCenterSettings.qml
@@ -54,11 +54,10 @@ ColumnLayout {
                }
   }
 
-  NComboBox {
+  NColorChoice {
     visible: valueEnableColorization
-    label: I18n.tr("common.select-color")
+    label: I18n.tr("common.select-icon-color")
     description: I18n.tr("bar.control-center.color-selection-description")
-    model: Color.colorKeyModel
     currentKey: valueColorizeSystemIcon
     onSelected: function (key) {
       valueColorizeSystemIcon = key;
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/CustomButtonSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/CustomButtonSettings.qml
index 360e4215a..cd1b62f51 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/CustomButtonSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/CustomButtonSettings.qml
@@ -113,11 +113,10 @@ ColumnLayout {
                }
   }
 
-  NComboBox {
+  NColorChoice {
     visible: valueEnableColorization
-    label: I18n.tr("common.select-color")
+    label: I18n.tr("common.select-icon-color")
     description: I18n.tr("bar.custom-button.color-selection-description")
-    model: Color.colorKeyModel
     currentKey: valueColorizeSystemIcon
     onSelected: key => {
                   valueColorizeSystemIcon = key;
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/DarkModeSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/DarkModeSettings.qml
index 68c3d9478..ec0584b61 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/DarkModeSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/DarkModeSettings.qml
@@ -22,15 +22,12 @@ ColumnLayout {
     settingsChanged(settings);
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/KeepAwakeSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/KeepAwakeSettings.qml
index a814eb94c..2132c15d3 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/KeepAwakeSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/KeepAwakeSettings.qml
@@ -24,27 +24,20 @@ ColumnLayout {
     settingsChanged(settings);
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/KeyboardLayoutSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/KeyboardLayoutSettings.qml
index c7918f1dc..2c7e90e7f 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/KeyboardLayoutSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/KeyboardLayoutSettings.qml
@@ -66,27 +66,20 @@ ColumnLayout {
                }
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/LauncherSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/LauncherSettings.qml
index cdb77b6c4..ef05a089f 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/LauncherSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/LauncherSettings.qml
@@ -25,15 +25,12 @@ ColumnLayout {
     settingsChanged(settings);
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/MediaMiniSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/MediaMiniSettings.qml
index 9113961b2..4cab94297 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/MediaMiniSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/MediaMiniSettings.qml
@@ -170,16 +170,12 @@ ColumnLayout {
                }
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
   NComboBox {
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/MicrophoneSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/MicrophoneSettings.qml
index 127f2fb0f..4131e7295 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/MicrophoneSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/MicrophoneSettings.qml
@@ -55,28 +55,21 @@ ColumnLayout {
                 }
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
   // Middle click command
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/NetworkSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/NetworkSettings.qml
index fc9555800..c308d3575 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/NetworkSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/NetworkSettings.qml
@@ -52,27 +52,20 @@ ColumnLayout {
                 }
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/NightLightSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/NightLightSettings.qml
index 68c3d9478..ec0584b61 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/NightLightSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/NightLightSettings.qml
@@ -22,15 +22,12 @@ ColumnLayout {
     settingsChanged(settings);
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/NoctaliaPerformanceSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/NoctaliaPerformanceSettings.qml
index 68c3d9478..ec0584b61 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/NoctaliaPerformanceSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/NoctaliaPerformanceSettings.qml
@@ -22,15 +22,12 @@ ColumnLayout {
     settingsChanged(settings);
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/NotificationHistorySettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/NotificationHistorySettings.qml
index bfa30737a..14df75eb0 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/NotificationHistorySettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/NotificationHistorySettings.qml
@@ -42,28 +42,23 @@ ColumnLayout {
                }
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("bar.notification-history.unread-badge-color-label")
     description: I18n.tr("bar.notification-history.unread-badge-color-description")
-    model: Color.colorKeyModel
     currentKey: valueUnreadBadgeColor
     onSelected: key => {
                   valueUnreadBadgeColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
     visible: valueShowUnreadBadge
   }
 
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/PowerProfileSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/PowerProfileSettings.qml
index 68c3d9478..ec0584b61 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/PowerProfileSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/PowerProfileSettings.qml
@@ -22,15 +22,12 @@ ColumnLayout {
     settingsChanged(settings);
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/SessionMenuSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/SessionMenuSettings.qml
index e78fa85d8..cf4088ce4 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/SessionMenuSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/SessionMenuSettings.qml
@@ -26,15 +26,12 @@ ColumnLayout {
     settingsChanged(settings);
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: root.valueIconColor
     onSelected: key => {
                   root.valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/SystemMonitorSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/SystemMonitorSettings.qml
index d8dca5083..171593589 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/SystemMonitorSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/SystemMonitorSettings.qml
@@ -74,28 +74,21 @@ ColumnLayout {
                }
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
     visible: !valueCompactMode
   }
 
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/TraySettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/TraySettings.qml
index 50898dfa7..fd566a82d 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/TraySettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/TraySettings.qml
@@ -50,16 +50,14 @@ ColumnLayout {
                }
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("bar.tray.chevron-color-label")
     description: I18n.tr("bar.tray.chevron-color-description")
-    model: Color.colorKeyModel
     currentKey: root.valueChevronColor
     onSelected: key => {
                   root.valueChevronColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
     visible: root.valueDrawerEnabled
   }
 
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/VPNSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/VPNSettings.qml
index cf9576ce0..1b943220f 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/VPNSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/VPNSettings.qml
@@ -51,27 +51,20 @@ ColumnLayout {
                 }
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/VolumeSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/VolumeSettings.qml
index 127f2fb0f..4131e7295 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/VolumeSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/VolumeSettings.qml
@@ -55,28 +55,21 @@ ColumnLayout {
                 }
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
-  NComboBox {
-    label: I18n.tr("common.select-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
+  NColorChoice {
     currentKey: valueTextColor
     onSelected: key => {
                   valueTextColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 
   // Middle click command
diff --git a/Modules/Panels/Settings/Bar/WidgetSettings/WallpaperSelectorSettings.qml b/Modules/Panels/Settings/Bar/WidgetSettings/WallpaperSelectorSettings.qml
index 68c3d9478..ec0584b61 100644
--- a/Modules/Panels/Settings/Bar/WidgetSettings/WallpaperSelectorSettings.qml
+++ b/Modules/Panels/Settings/Bar/WidgetSettings/WallpaperSelectorSettings.qml
@@ -22,15 +22,12 @@ ColumnLayout {
     settingsChanged(settings);
   }
 
-  NComboBox {
+  NColorChoice {
     label: I18n.tr("common.select-icon-color")
-    description: I18n.tr("common.select-color-description")
-    model: Color.colorKeyModel
     currentKey: valueIconColor
     onSelected: key => {
                   valueIconColor = key;
                   saveSettings();
                 }
-    minimumWidth: 200
   }
 }
diff --git a/Modules/Panels/Settings/Tabs/Bar/AppearanceSubTab.qml b/Modules/Panels/Settings/Tabs/Bar/AppearanceSubTab.qml
index 6ebcc76ad..5aeb0cef3 100644
--- a/Modules/Panels/Settings/Tabs/Bar/AppearanceSubTab.qml
+++ b/Modules/Panels/Settings/Tabs/Bar/AppearanceSubTab.qml
@@ -156,15 +156,13 @@ ColumnLayout {
     onToggled: checked => Settings.data.bar.showCapsule = checked
   }
 
-  NComboBox {
+  NColorChoice {
     Layout.fillWidth: true
     visible: Settings.data.bar.showCapsule
     label: I18n.tr("panels.bar.appearance-capsule-color-label")
     description: I18n.tr("panels.bar.appearance-capsule-color-description")
-    model: Color.colorKeyModel
     currentKey: Settings.data.bar.capsuleColorKey
     onSelected: key => Settings.data.bar.capsuleColorKey = key
-    minimumWidth: 200
   }
 
   NValueSlider {