diff --git a/frontend/uxbox/ui/colorpicker.cljs b/frontend/uxbox/ui/colorpicker.cljs
index 17f6bebb6..4c7c9ae25 100644
--- a/frontend/uxbox/ui/colorpicker.cljs
+++ b/frontend/uxbox/ui/colorpicker.cljs
@@ -16,10 +16,8 @@
   (let [canvas (util/get-ref-dom own "colorpicker")
         context (.getContext canvas "2d")
         brect (.getBoundingClientRect canvas)
-        ox (.-left brect)
-        oy (.-top brect)
-        x (- (.-pageX e) ox)
-        y (- (.-pageY e) oy)
+        x (- (.-pageX e) (.-left brect))
+        y (- (.-pageY e) (.-top brect))
         image (.getImageData context x y 1 1)
         r (aget (.-data image) 0)
         g (aget (.-data image) 1)
@@ -30,12 +28,13 @@
 (defn colorpicker-render
   [own callback]
   (html
-   [:canvas
-    {:width "400"
-     :height "300"
-     :on-click #(on-click-handler % own callback)
-     :id "colorpicker"
-     :ref "colorpicker"}]))
+   [:section.colorpicker
+    [:canvas
+     {:width "400"
+      :height "300"
+      :on-click #(on-click-handler % own callback)
+      :id "colorpicker"
+      :ref "colorpicker"}]]))
 
 (defn colorpicker-did-mount
   [own]
diff --git a/resources/public/styles/main.scss b/resources/public/styles/main.scss
index d2f83af16..0ae9aafe3 100644
--- a/resources/public/styles/main.scss
+++ b/resources/public/styles/main.scss
@@ -43,3 +43,4 @@
 @import 'partials/library-bar';
 @import 'partials/lightbox';
 @import 'partials/color-palette';
+@import 'partials/colorpicker';
diff --git a/resources/public/styles/partials/colorpicker.scss b/resources/public/styles/partials/colorpicker.scss
new file mode 100644
index 000000000..63bfc9e61
--- /dev/null
+++ b/resources/public/styles/partials/colorpicker.scss
@@ -0,0 +1,6 @@
+.colorpicker {
+  canvas {
+    border: 1px solid #111111;
+    cursor: cell;
+  }
+}
\ No newline at end of file