diff --git a/cool-old-term.pro b/cool-old-term.pro
index ac252db..a551f57 100644
--- a/cool-old-term.pro
+++ b/cool-old-term.pro
@@ -22,5 +22,5 @@ OTHER_FILES += \
     $$PWD/qml/cool-old-term/ShaderSettings.qml \
     $$PWD/qml/images/frame.png \
     qml/cool-old-term/SettingsWindow.qml \
-    qml/cool-old-term/MyColorDialog.qml \
-    qml/cool-old-term/SettingComponent.qml
+    qml/cool-old-term/SettingComponent.qml \
+    qml/cool-old-term/ColorButton.qml
diff --git a/qml/cool-old-term/ColorButton.qml b/qml/cool-old-term/ColorButton.qml
new file mode 100644
index 0000000..df6007b
--- /dev/null
+++ b/qml/cool-old-term/ColorButton.qml
@@ -0,0 +1,43 @@
+import QtQuick 2.1
+import QtQuick.Dialogs 1.1
+
+Item {
+    property color button_color;
+
+    ColorDialog {
+        id: colorDialog
+        title: qsTr("Choose a color")
+        modality: Qt.ApplicationModal
+        visible: false
+
+        //This is a workaround to a Qt 5.2 bug.
+        onCurrentColorChanged: colorDialog.color = colorDialog.currentColor;
+        onAccepted: button_color = color;
+    }
+    Rectangle{
+        radius: 10
+        anchors.fill: parent
+        color: button_color
+
+        Text{
+            id: text_color
+            anchors.centerIn: parent
+            z: 1.1
+            text: button_color
+        }
+
+        Rectangle{
+            anchors.centerIn: parent
+            width: text_color.width * 1.4
+            height: text_color.height * 1.4
+            radius: 10
+            border.color: "black"
+            border.width: 2
+            color: "white"
+        }
+    }
+    MouseArea{
+        anchors.fill: parent
+        onClicked: colorDialog.visible = true;
+    }
+}
diff --git a/qml/cool-old-term/MyColorDialog.qml b/qml/cool-old-term/MyColorDialog.qml
deleted file mode 100644
index 5062f72..0000000
--- a/qml/cool-old-term/MyColorDialog.qml
+++ /dev/null
@@ -1,25 +0,0 @@
-import QtQuick 2.1
-import QtQuick.Dialogs 1.1
-
-ColorDialog {
-    id: colorDialog
-    title: qsTr("Choose a color")
-    modality: Qt.ApplicationModal
-
-    property string color_to_change
-
-    color: "green"
-
-    //This is a workaround to a Qt 5.2 bug.
-    onCurrentColorChanged: colorDialog.color = colorDialog.currentColor;
-
-    onAccepted: {
-        console.log("[MyColorDialog.qml] Color chosen: " + colorDialog.color);
-        shadersettings[color_to_change] = colorDialog.color;
-    }
-    onRejected: {
-        console.log("[MyColorDialog.qml] No color selected")
-    }
-
-    Component.onCompleted: visible = true
-}
diff --git a/qml/cool-old-term/SettingsWindow.qml b/qml/cool-old-term/SettingsWindow.qml
index 6a12313..b123a34 100644
--- a/qml/cool-old-term/SettingsWindow.qml
+++ b/qml/cool-old-term/SettingsWindow.qml
@@ -23,40 +23,31 @@ ApplicationWindow {
 
             ColumnLayout{
                 anchors.fill: parent
-                GridLayout{
-                    width: parent.width
-                    columns: 2
-                    Text{text: "Font color"}
-                    Text{
-                        text: "         ";
-                        Rectangle{
-                            anchors.fill: parent;
-                            color: shadersettings.font_color
-                        }
-                        MouseArea{
-                            anchors.fill: parent;
-                            onClicked: {
-                                var component = Qt.createComponent("MyColorDialog.qml");
-                                component.createObject(settings_window, {"color_to_change": "font_color"});
-                            }
+                RowLayout{
+                    ColumnLayout{
+                        Text{text: qsTr("Font color")}
+                        ColorButton{
+                            height: 200
+                            width: 200
+
+                            onButton_colorChanged: shadersettings.font_color = button_color
+                            Component.onCompleted: button_color = shadersettings.font_color;
                         }
                     }
-                    Text{text: "Backgroud color"}
-                    Text{text: "         ";
-                        Rectangle{
-                            anchors.fill: parent;
-                            color: shadersettings.background_color
-                        }
-                        MouseArea{
-                            anchors.fill: parent
-                            onClicked: {
-                                var component = Qt.createComponent("MyColorDialog.qml");
-                                component.createObject(settings_window, {"color_to_change": "background_color"});
-                            }
+                    Item{
+                        Layout.fillWidth: true
+                    }
+                    ColumnLayout{
+                        Text{text: qsTr("Backgroud color")}
+                        ColorButton{
+                            height: 200
+                            width: 200
+
+                            onButton_colorChanged: shadersettings.background_color= button_color
+                            Component.onCompleted: button_color = shadersettings.background_color;
                         }
                     }
                 }
-
                 ColumnLayout{
                     anchors.left: parent.left
                     anchors.right: parent.right