diff --git a/package.json b/package.json
index 32a9f2b5b..c01ac46e5 100755
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
         "storybook": "start-storybook --ci --config-dir ./storybook --static-dir ./ --port 6060"
     },
     "dependencies": {
+        "a-color-picker": "1.1.8",
         "classnames": "2.2.6",
         "events": "1.1.1",
         "hat": "0.0.3",
diff --git a/src/common/ColorPicker/ColorPicker.js b/src/common/ColorPicker/ColorPicker.js
index eccfd55c8..341bacb39 100644
--- a/src/common/ColorPicker/ColorPicker.js
+++ b/src/common/ColorPicker/ColorPicker.js
@@ -1,18 +1,43 @@
 const React = require('react');
 const PropTypes = require('prop-types');
+const AColorPicker = require('a-color-picker');
+
+const COLOR_FORMAT = 'rgbacss';
 
-// TODO: impl this
 const ColorPicker = ({ className, value, onChange }) => {
+    value = AColorPicker.parseColor(value, COLOR_FORMAT);
+    const pickerRef = React.useRef(null);
+    const pickerElementRef = React.useRef(null);
+    React.useEffect(() => {
+        pickerRef.current = AColorPicker.createPicker(pickerElementRef.current, {
+            color: value,
+            showHSL: false,
+            showHEX: false,
+            showRGB: false,
+            showAlpha: true
+        });
+    }, []);
+    React.useEffect(() => {
+        pickerRef.current.off('change');
+        pickerRef.current.on('change', (picker, color) => {
+            if (typeof onChange === 'function') {
+                onChange(AColorPicker.parseColor(color, COLOR_FORMAT));
+            }
+        });
+    }, [onChange]);
+    React.useEffect(() => {
+        if (AColorPicker.parseColor(pickerRef.current.color, COLOR_FORMAT) !== value) {
+            pickerRef.current.color = value;
+        }
+    }, [value]);
     return (
-        <div style={{ backgroundColor: 'red' }} className={className}>
-            {value}
-        </div>
+        <div ref={pickerElementRef} className={className} />
     );
 };
 
 ColorPicker.propTypes = {
     className: PropTypes.string,
-    value: PropTypes.string.isRequired,
+    value: PropTypes.string,
     onChange: PropTypes.func
 };
 
diff --git a/storybook/stories/ColorPicker/ColorPicker.js b/storybook/stories/ColorPicker/ColorPicker.js
new file mode 100644
index 000000000..d040072c5
--- /dev/null
+++ b/storybook/stories/ColorPicker/ColorPicker.js
@@ -0,0 +1,18 @@
+const React = require('react');
+const { storiesOf } = require('@storybook/react');
+const { ColorPicker } = require('stremio/common');
+const styles = require('./styles');
+
+const ColorPickerExampleusage = () => {
+    const [color, setColor] = React.useState('rgba(166, 196, 213, 0.97)');
+    return (
+        <div className={styles['demo-container']}>
+            <ColorPicker
+                value={color}
+                onChange={setColor}
+            />
+            <div className={styles['test-output']}>Current color is {color}</div>
+        </div>
+    );
+}
+storiesOf('ColorPicker', module).add('ColorPicker', () => <ColorPickerExampleusage />);
diff --git a/storybook/stories/ColorPicker/index.js b/storybook/stories/ColorPicker/index.js
new file mode 100644
index 000000000..ce14eed7d
--- /dev/null
+++ b/storybook/stories/ColorPicker/index.js
@@ -0,0 +1 @@
+require('./ColorPicker');
diff --git a/storybook/stories/ColorPicker/styles.less b/storybook/stories/ColorPicker/styles.less
new file mode 100644
index 000000000..ca8901e39
--- /dev/null
+++ b/storybook/stories/ColorPicker/styles.less
@@ -0,0 +1,5 @@
+.demo-container {
+    color: var(--color-surfacelighter);
+    padding: 1rem; 
+    .test-output { margin-top: 1rem; }
+}
\ No newline at end of file
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index 0068517f9..a15267d5f 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -1,2 +1,3 @@
 require('./Addon');
 require('./MetaItem');
+require('./ColorPicker');
diff --git a/yarn.lock b/yarn.lock
index e9bb72bb7..5e8e330d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1678,6 +1678,13 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+a-color-picker@1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/a-color-picker/-/a-color-picker-1.1.8.tgz#5e0ef5c8d99f5d2471682e2f76fe5562e7cb74d0"
+  integrity sha512-PGKDLFV3Qp190YKVd+TF+7ib0jvaVkq6ezaCnnFUhLVmnKLCEzUAH8CumLkP+kfeBukRcJtE9RMwbiR2Z40FbA==
+  dependencies:
+    is-plain-object "^2.0.4"
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"