diff --git a/storybook/stories/ColorPicker/ColorPicker.js b/storybook/stories/ColorPicker/ColorPicker.js
index b86938fd4..68057edb8 100644
--- a/storybook/stories/ColorPicker/ColorPicker.js
+++ b/storybook/stories/ColorPicker/ColorPicker.js
@@ -3,10 +3,17 @@ const { storiesOf } = require('@storybook/react');
 const { ColorPicker } = require('stremio/common');
 const styles = require('./styles');
 
-storiesOf('ColorPicker', module).add('ColorPicker', () => (
-    <ColorPicker
-        className={styles['color-picker-container']}
-        value={'#000000'}
-        onChange={(color) => { console.log(color) }}
-    />
-));
+const ColorPickerExampleusage = () => {
+    const [color, setColor] = React.useState('rgba(166, 196, 213, 0.97)');
+    return (
+        <div style={{ color: 'var(--color-surfacelighter)', padding: '1em' }}>
+            <ColorPicker
+                className={styles['color-picker-container']}
+                value={color}
+                onChange={(color) => { setColor(color) }}
+            />
+            <div style={{ marginTop: '1em' }}>Current color is {color}</div>
+        </div>
+    );
+}
+storiesOf('ColorPicker', module).add('ColorPicker', () => <ColorPickerExampleusage />);