diff --git a/sandbox/StatusColorSelectorPage.qml b/sandbox/StatusColorSelectorPage.qml
new file mode 100644
index 00000000..01f56c2a
--- /dev/null
+++ b/sandbox/StatusColorSelectorPage.qml
@@ -0,0 +1,17 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+import Sandbox 0.1
+
+Column {
+    spacing: 8
+
+    StatusColorSelector {
+        model: ["red", "blue", "green"]
+    }
+}
diff --git a/sandbox/main.qml b/sandbox/main.qml
index 715597ec..70dcc206 100644
--- a/sandbox/main.qml
+++ b/sandbox/main.qml
@@ -168,6 +168,11 @@ StatusWindow {
                             selected: page.sourceComponent == statusAssetSelectorPageComponent
                             onClicked: page.sourceComponent = statusAssetSelectorPageComponent
                         }
+                        StatusNavigationListItem { 
+                            title: "StatusColorSelector" 
+                            selected: page.sourceComponent == statusColorSelectorPageComponent
+                            onClicked: page.sourceComponent = statusColorSelectorPageComponent
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Components" }
                         StatusNavigationListItem { 
                             title: "StatusAddress"
@@ -291,6 +296,11 @@ StatusWindow {
         StatusAssetSelectorPage {}
     }
 
+    Component {
+        id: statusColorSelectorPageComponent
+        StatusColorSelectorPage {}
+    }
+
     Component {
         id: listItemsComponent
         ListItems {}
diff --git a/src/StatusQ/Controls/StatusColorSelector.qml b/src/StatusQ/Controls/StatusColorSelector.qml
new file mode 100644
index 00000000..847ab60b
--- /dev/null
+++ b/src/StatusQ/Controls/StatusColorSelector.qml
@@ -0,0 +1,37 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import StatusQ.Controls 0.1
+
+Item {
+  id: root
+  property string selectedColor
+  property string label: "Color"
+  property var model
+  height: accountColorInput.height
+  implicitWidth: 448
+
+  StatusSelect {
+      id: accountColorInput
+      bgColor: selectedColor
+      label: root.label
+      model: root.model
+
+      selectMenu.delegate: Component {
+          MenuItem {
+              property bool isFirstItem: index === 0
+              property bool isLastItem: index === root.model.length - 1
+              height: 52
+              width: parent.width
+              padding: 10
+              onTriggered: function () {
+                  const selectedColor = root.model[index]
+                  root.selectedColor = selectedColor
+              }
+              background: Rectangle {
+                  color: root.model[index] || "transparent"
+              }
+          }
+      }
+  }
+}
+
diff --git a/src/StatusQ/Controls/qmldir b/src/StatusQ/Controls/qmldir
index 1d1dae91..dc5219b3 100644
--- a/src/StatusQ/Controls/qmldir
+++ b/src/StatusQ/Controls/qmldir
@@ -4,6 +4,7 @@ StatusAccountSelector 0.1 StatusAccountSelector.qml
 StatusAssetSelector 0.1 StatusAssetSelector.qml
 StatusChatInfoButton 0.1 StatusChatInfoButton.qml
 StatusChatListCategoryItemButton 0.1 StatusChatListCategoryItemButton.qml
+StatusColorSelector 0.1 StatusColorSelector.qml
 StatusIconTabButton 0.1 StatusIconTabButton.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml
diff --git a/statusq.qrc b/statusq.qrc
index da5253df..3a080aea 100644
--- a/statusq.qrc
+++ b/statusq.qrc
@@ -42,6 +42,7 @@
         <file>src/StatusQ/Controls/StatusAssetSelector.qml</file>
         <file>src/StatusQ/Controls/StatusIconTabButton.qml</file>
         <file>src/StatusQ/Controls/StatusChatInfoButton.qml</file>
+        <file>src/StatusQ/Controls/StatusColorSelector.qml</file>
         <file>src/StatusQ/Controls/qmldir</file>
         <file>src/StatusQ/Controls/StatusAccountSelector.qml</file>
         <file>src/StatusQ/Controls/StatusSlider.qml</file>