diff --git a/resources/public/styles/partials/element-options.scss b/resources/public/styles/partials/element-options.scss
index 5eb453c77..27ab9d7ac 100644
--- a/resources/public/styles/partials/element-options.scss
+++ b/resources/public/styles/partials/element-options.scss
@@ -216,11 +216,12 @@
   }
   .color-picker-bar {
     height: 100%;
-    padding: relative;
+    position: relative;
     width: 15px;
     .color-bar-select {
       background-color: $color-white;
       height: 3px;
+      left: -1px;
       position: absolute;
       width: 15px;
       top: 30%;
diff --git a/src/uxbox/ui/dashboard/colors.cljs b/src/uxbox/ui/dashboard/colors.cljs
index e133ba998..933e4cc72 100644
--- a/src/uxbox/ui/dashboard/colors.cljs
+++ b/src/uxbox/ui/dashboard/colors.cljs
@@ -188,6 +188,12 @@
             :on-change on-change
             :value (or (:hex @local) color "")
             :type "text"}]]
+          [:div.element-color-picker
+           [:div.color-picker-body
+            [:img {:src "images/color-gamma.png", :border "none"}]]
+           [:div.color-picker-bar
+            [:div.color-bar-select]
+            [:img {:src "images/color-bar.png", :border "none"}]]]
          (colorpicker #(swap! local merge %))
          [:input#project-btn.btn-primary
           {:value "+ Add color"