diff --git a/Makefile b/Makefile
index bef7500..b2759b1 100644
--- a/Makefile
+++ b/Makefile
@@ -65,8 +65,6 @@ deps:
 	cp node_modules/medium-editor/dist/css/medium-editor.css vendor/
 	cp node_modules/medium-editor-autolist/dist/autolist.js vendor/
 	cp node_modules/lozad/dist/lozad.js vendor/
-	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.js -O vendor/colorPick.js
-	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.css -O vendor/colorPick.css
 
 depsmin:
 	mkdir -p vendor
@@ -78,8 +76,6 @@ depsmin:
 	cp node_modules/medium-editor/dist/css/medium-editor.min.css vendor/medium-editor.css
 	cp node_modules/medium-editor-autolist/dist/autolist.min.js vendor/autolist.js
 	cp node_modules/lozad/dist/lozad.min.js vendor/lozad.js
-	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.js -O vendor/colorPick.js
-	wget https://raw.githubusercontent.com/philzet/ColorPick.js/master/src/colorPick.css -O vendor/colorPick.css
 
 js-templates:
 	node_modules/handlebars/bin/handlebars js/templates -f js/templates.js
diff --git a/css/qn-colorpick.scss b/css/qn-colorpick.scss
new file mode 100644
index 0000000..018979c
--- /dev/null
+++ b/css/qn-colorpick.scss
@@ -0,0 +1,32 @@
+.colorPickWrapper {
+    position: relative;
+    width: 0;
+    height: 0;
+}
+
+#colorPick {
+  background: #fff;
+  -webkit-backdrop-filter: blur(15px);
+  position: absolute;
+  border-radius: 8px;
+  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
+  padding: 10px;
+  width: auto;
+  box-sizing: content-box;
+  z-index: 2500;
+  display: flex;
+}
+
+.colorPickButton {
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  margin: 0px 3px;
+  cursor: pointer;
+  display: inline-block;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.colorPickButton:hover {
+  transform: scale(1.1);
+}
diff --git a/css/style.scss b/css/style.scss
index 2328916..e2810e1 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -360,20 +360,4 @@ div.select2-container {
     height: 32px;
     padding: 0px !important;
     border-radius: 50%;
-}
-
-/* Color Picker */
-
-#colorPick {
-    border-radius: 8px;
-    padding: 12px;
-    background-color: var(--color-background-dark);
-    opacity: 1.0 !important;
-    z-index: 2500;
-}
-
-#colorPick span {
-    color: var(--color-main-text);
-    font-size: 13px;
-    text-transform: initial;
-}
+}
\ No newline at end of file
diff --git a/js/qn-colorpick.js b/js/qn-colorpick.js
new file mode 100644
index 0000000..2262ef7
--- /dev/null
+++ b/js/qn-colorpick.js
@@ -0,0 +1,64 @@
+function QnColorPick(parentSelector, onSelectColor) {
+
+    this._parentSelector = parentSelector;
+    this._onSelectColor = onSelectColor;
+
+    this._color = undefined;
+
+    this._template = '' +
+        '<div id="colorPickWrapper" class="colorPickWrapper">' +
+            '<div id="colorPick">' +
+                '<div class="colorPickButton" hexvalue="#F7EB96" style="background-color:#F7EB96"></div>' +
+                '<div class="colorPickButton" hexvalue="#88B7E3" style="background-color:#88B7E3"></div>' +
+                '<div class="colorPickButton" hexvalue="#C1ECB0" style="background-color:#C1ECB0"></div>' +
+                '<div class="colorPickButton" hexvalue="#BFA6E9" style="background-color:#BFA6E9"></div>' +
+                '<div class="colorPickButton" hexvalue="#DAF188" style="background-color:#DAF188"></div>' +
+                '<div class="colorPickButton" hexvalue="#FF96AC" style="background-color:#FF96AC"></div>' +
+                '<div class="colorPickButton" hexvalue="#FCF66F" style="background-color:#FCF66F"></div>' +
+                '<div class="colorPickButton" hexvalue="#F2F1EF" style="background-color:#F2F1EF"></div>' +
+                '<div class="colorPickButton" hexvalue="#C1D756" style="background-color:#C1D756"></div>' +
+                '<div class="colorPickButton" hexvalue="#CECECE" style="background-color:#CECECE"></div>' +
+            '</div>' +
+       '</div>';
+
+    this.select = function (hexcolor) {
+        this._color = hexcolor;
+    }
+
+    this.close = function () {
+        var picker = document.getElementById("colorPickWrapper");
+        picker.remove();
+    }
+
+    this.show = function (hexcolor) {
+        var self = this;
+
+        var parent = document.querySelector(this._parentSelector);
+        parent.innerHTML += this._template;
+
+        var colors = document.querySelectorAll(".colorPickButton");
+        colors.forEach (function(color) {
+            if (hexcolor == color.getAttribute("hexvalue")) {
+                color.classList.add("icon-checkmark");
+            }
+            color.addEventListener("click", function () {
+                self._color = color.getAttribute("hexvalue");
+                self._onSelectColor(self._color);
+                self.close ();
+            });
+        });
+    }
+
+    this.isVisible = function () {
+        var picker = document.getElementById("colorPickWrapper");
+        return picker != null;
+    };
+
+    this.toggle = function () {
+        if (this.isVisible()) {
+            this.close();
+        } else {
+            this.show(this._color);
+        }
+    };
+}
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 4b2acdb..2910a92 100644
--- a/js/script.js
+++ b/js/script.js
@@ -188,6 +188,7 @@ var View = function (notes) {
 
     this._editor = undefined;
     this._isotope = undefined;
+    this._colorPick = undefined;
     this._changed = false;
 };
 
@@ -298,6 +299,10 @@ View.prototype = {
                     }
                 }
             });
+
+            this._colorPick = new QnColorPick(".modal-content", function (color) {
+                $("#modal-note-div .quicknote").css("background-color", color);
+            });
         }
 
         // Save instance of View
@@ -314,7 +319,7 @@ View.prototype = {
         // Open notes when clicking them.
         $("#notes-grid-div").on("click", ".quicknote", function (event) {
             event.stopPropagation();
-            var id = parseInt($(this).data('id'), 10);
+            var id = parseInt($(this).attr('data-id'), 10);
             self.editNote(id);
         });
 
@@ -337,7 +342,7 @@ View.prototype = {
             event.stopPropagation();
 
             var gridnote = $(this).parent().parent().parent();
-            var id = parseInt(gridnote.data('id'), 10);
+            var id = parseInt(gridnote.attr('data-id'), 10);
 
             var note = self._notes.read(id);
             OC.dialogs.confirm(
@@ -384,7 +389,7 @@ View.prototype = {
 
             var icon =  $(this);
             var gridNote = icon.parent().parent().parent();
-            var id = parseInt(gridNote.data('id'), 10);
+            var id = parseInt(gridNote.attr('data-id'), 10);
 
             var note = self._notes.read(id);
             note.isPinned = true;
@@ -408,7 +413,7 @@ View.prototype = {
 
             var icon =  $(this);
             var gridNote = icon.parent().parent().parent();
-            var id = parseInt(gridNote.data('id'), 10);
+            var id = parseInt(gridNote.attr('data-id'), 10);
 
             var note = self._notes.read(id);
             note.isPinned = false;
@@ -431,6 +436,10 @@ View.prototype = {
         // Cancel when click outside the modal.
         $('#div-content').on('click', '.modal-note-background', function (event) {
             event.stopPropagation();
+            if (self._colorPick.isVisible()) {
+                self._colorPick.close();
+                return;
+            }
             if (!self._changed) {
                 self.cancelEdit();
                 return;
@@ -499,13 +508,13 @@ View.prototype = {
         });
 
         // Handle tags on modal
-        $('#modal-note-div').on('click', '.slim-tag', function (event) {
+        $('#modal-note-div').on("click", ".slim-tag", function (event) {
             event.stopPropagation();
             $('#modal-note-div #tag-button').trigger( "click");
         });
 
         // handle tags button.
-        $('#modal-note-div #share-button').click(function (event) {
+        $('#modal-note-div').on("click", "#share-button", function (event) {
             event.stopPropagation();
             QnDialogs.shares(
                 self._notes.getUsersSharing(),
@@ -518,13 +527,13 @@ View.prototype = {
             );
         });
 
-        // FIXME: Hack to sent click event to colorPicker.
-        $('#modal-note-div .icon-toggle-background').click(function (event) {
-            $(this).parent().click();
+        $('#modal-note-div').on("click", "#color-button", function (event) {
+            event.stopPropagation();
+            self._colorPick.toggle();
         });
 
         // handle attach button.
-        $('#modal-note-div #attach-button').click(function (event) {
+        $('#modal-note-div').on("click", "#attach-button", function (event) {
             event.stopPropagation();
             OC.dialogs.filepicker(t('quicknotes', 'Select file to attach'), function(datapath, returntype) {
                 OC.Files.getClient().getFileInfo(datapath).then((status, fileInfo) => {
@@ -542,7 +551,7 @@ View.prototype = {
         });
 
         // handle tags button.
-        $('#modal-note-div #tag-button').click(function (event) {
+        $('#modal-note-div').on("click", "#tag-button", function (event) {
             event.stopPropagation();
             var noteTags = self._editableTags();
             QnDialogs.tags(
@@ -557,19 +566,19 @@ View.prototype = {
         });
 
         // handle cancel editing notes.
-        $('#modal-note-div #close-button').click(function (event) {
+        $('#modal-note-div').on("click", "#close-button", function (event) {
             event.stopPropagation();
             self.cancelEdit();
         });
 
         // handle cancel editing notes.
-        $('#modal-note-div #cancel-button').click(function (event) {
+        $('#modal-note-div').on("click", "#cancel-button", function (event) {
             event.stopPropagation();
             self.cancelEdit();
         });
 
         // Handle save note
-        $('#modal-note-div #save-button').click(function (event) {
+        $('#modal-note-div').on("click", "#save-button", function (event) {
             event.stopPropagation();
             self.saveNote();
         });
@@ -791,9 +800,9 @@ View.prototype = {
     },
     _editableId: function(id) {
         if (id === undefined)
-            return $("#modal-note-div .quicknote").data('id');
+            return $("#modal-note-div .quicknote").attr('data-id');
         else
-            $("#modal-note-div .quicknote").data('id', id);
+            $("#modal-note-div .quicknote").attr('data-id', id);
     },
     _editableTitle: function(title) {
         if (title === undefined)
@@ -828,16 +837,7 @@ View.prototype = {
             return this._colorToHex($("#modal-note-div .quicknote").css("background-color"));
         else {
             $("#modal-note-div .quicknote").css("background-color", color);
-            /*$("#color-button").colorPick({
-                'initialColor': color,
-                'paletteLabel': t('quicknotes', 'Colors'),
-                'palette': ['#F7EB96', '#88B7E3', '#C1ECB0', '#BFA6E9', '#DAF188', '#FF96AC', '#FCF66F', '#F2F1EF', '#C1D756', '#CECECE'],
-                'allowRecent': false,
-                'allowCustomColor': false,
-                'onColorSelected': function() {
-                    $("#modal-note-div .quicknote").css("background-color", this.color);
-                }
-            });*/
+            this._colorPick.select(color);
         }
     },
     _editableShares: function(shared_with) {
diff --git a/templates/main.php b/templates/main.php
index 157c7e3..e80596f 100644
--- a/templates/main.php
+++ b/templates/main.php
@@ -6,12 +6,12 @@ vendor_script('quicknotes', 'medium-editor');
 vendor_style('quicknotes', 'medium-editor');
 vendor_script('quicknotes', 'autolist');
 vendor_script('quicknotes', 'lozad');
-//vendor_script('quicknotes', 'colorPick');
-//vendor_style('quicknotes', 'colorPick');
 script('quicknotes', 'qn-dialogs');
+script('quicknotes', 'qn-colorpick');
 script('quicknotes', 'script');
 style('quicknotes', 'style');
 style('quicknotes', 'medium');
+style('quicknotes', 'qn-colorpick');
 ?>
 
 	<div id="app-navigation">