diff --git a/storybook/stories/ColorPicker/ColorPicker.js b/storybook/stories/ColorPicker/ColorPicker.js
index 68057edb8..d040072c5 100644
--- a/storybook/stories/ColorPicker/ColorPicker.js
+++ b/storybook/stories/ColorPicker/ColorPicker.js
@@ -6,13 +6,12 @@ const styles = require('./styles');
 const ColorPickerExampleusage = () => {
     const [color, setColor] = React.useState('rgba(166, 196, 213, 0.97)');
     return (
-        <div style={{ color: 'var(--color-surfacelighter)', padding: '1em' }}>
+        <div className={styles['demo-container']}>
             <ColorPicker
-                className={styles['color-picker-container']}
                 value={color}
-                onChange={(color) => { setColor(color) }}
+                onChange={setColor}
             />
-            <div style={{ marginTop: '1em' }}>Current color is {color}</div>
+            <div className={styles['test-output']}>Current color is {color}</div>
         </div>
     );
 }
diff --git a/storybook/stories/ColorPicker/styles.less b/storybook/stories/ColorPicker/styles.less
index e69de29bb..ca8901e39 100644
--- a/storybook/stories/ColorPicker/styles.less
+++ 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