diff --git a/ui/StatusQ b/ui/StatusQ
index 485647d1c3..81cbab3f66 160000
--- a/ui/StatusQ
+++ b/ui/StatusQ
@@ -1 +1 @@
-Subproject commit 485647d1c36a6bd87ac8715f3989f0052621b816
+Subproject commit 81cbab3f66480da7ba6b27ee433d4d4d43abde76
diff --git a/ui/app/AppLayouts/Chat/panels/communities/CommunityEditSettingsPanel.qml b/ui/app/AppLayouts/Chat/panels/communities/CommunityEditSettingsPanel.qml
index 05fdc8ee1b..e22eb2b60e 100644
--- a/ui/app/AppLayouts/Chat/panels/communities/CommunityEditSettingsPanel.qml
+++ b/ui/app/AppLayouts/Chat/panels/communities/CommunityEditSettingsPanel.qml
@@ -12,15 +12,17 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Layout 0.1
 import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Controls.Validators 0.1
 
 Flickable {
     id: root
 
+    property color color: Theme.palette.primaryColor1
+
     property alias name: nameInput.text
     property alias description: descriptionTextInput.text
-    property alias color: colorDialog.color
     property alias image: addImageButton.selectedImage
     readonly property alias imageAx: imageCropperModal.aX
     readonly property alias imageAy: imageCropperModal.aY
@@ -220,25 +222,29 @@ Flickable {
 
                 property string validationError: ""
 
-                bgColor: colorDialog.colorSelected ? colorDialog.color : Theme.palette.baseColor2
-                contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1
-                text: colorDialog.colorSelected ? colorDialog.color.toString(
-                                                      ).toUpperCase() : qsTr("Pick a color")
+                bgColor: root.color
+                contentColor: Theme.palette.indirectColor1
+                text: root.color.toString()
 
-                onClicked: colorDialog.open()
+                onClicked: {
+                    colorDialog.color = root.color;
+                    colorDialog.open();
+                }
                 onTextChanged: {
-                    if (colorDialog.colorSelected) {
-                        validationError = Utils.validateAndReturnError(
-                                    text,
-                                    Utils.Validate.NoEmpty | Utils.Validate.TextHexColor)
-                    }
+                    validationError = Utils.validateAndReturnError(text,
+                                          Utils.Validate.NoEmpty |
+                                          Utils.Validate.TextHexColor);
                 }
 
-                ColorDialog {
+                StatusColorDialog {
                     id: colorDialog
-                    property bool colorSelected: true
-                    color: Theme.palette.primaryColor1
-                    onAccepted: colorSelected = true
+                    anchors.centerIn: parent
+                    header.title: qsTr("Community Colour")
+                    previewText: qsTr("White text should be legable on top of this colour")
+                    acceptText: qsTr("Select Community Colour")
+                    onAccepted: {
+                        root.color = color;
+                    }
                 }
             }
         }
diff --git a/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml b/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
index 36769b1cb1..815085cbda 100644
--- a/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/community/CreateChannelPopup.qml
@@ -185,14 +185,15 @@ StatusModal {
                             validationError = Utils.validateAndReturnError(text, communityColorValidator)
                         }
                     }
+                }
 
-                    ColorDialog {
-                        id: colorDialog
-                        property bool colorSelected: popup.isEdit && popup.channelColor
-                        color: popup.isEdit && popup.channelColor ? popup.channelColor :
-                            Theme.palette.primaryColor1
-                        onAccepted: colorSelected = true
-                    }
+                StatusColorDialog {
+                    id: colorDialog
+                    anchors.centerIn: parent
+                    property bool colorSelected: popup.isEdit && popup.channelColor
+                    color: popup.isEdit && popup.channelColor ? popup.channelColor :
+                        Theme.palette.primaryColor1
+                    onAccepted: colorSelected = true
                 }
 
                 StatusBaseText {
diff --git a/ui/app/AppLayouts/Chat/popups/community/CreateCommunityPopup.qml b/ui/app/AppLayouts/Chat/popups/community/CreateCommunityPopup.qml
index 7a77bbfd9f..6515d108f2 100644
--- a/ui/app/AppLayouts/Chat/popups/community/CreateCommunityPopup.qml
+++ b/ui/app/AppLayouts/Chat/popups/community/CreateCommunityPopup.qml
@@ -274,13 +274,14 @@ StatusModal {
                             validationError = Utils.validateAndReturnError(text, communityColorValidator)
                         }
                     }
+                }
 
-                    ColorDialog {
-                        id: colorDialog
-                        property bool colorSelected: false
-                        color: Theme.palette.primaryColor1
-                        onAccepted: colorSelected = true
-                    }
+                StatusColorDialog {
+                    id: colorDialog
+                    anchors.centerIn: parent
+                    property bool colorSelected: false
+                    color: Theme.palette.primaryColor1
+                    onAccepted: colorSelected = true
                 }
 
                 StatusBaseText {