diff --git a/src/pages/Harmonies.tsx b/src/pages/Harmonies.tsx
index 5714fac..864934b 100644
--- a/src/pages/Harmonies.tsx
+++ b/src/pages/Harmonies.tsx
@@ -1,19 +1,20 @@
 import cx from 'clsx';
+import { useAtom } from 'jotai';
 import { useMemo, useState } from 'react';
 import { useColorFunction } from '../ColorFunctionContext';
 import { ColorPicker } from '../components/ColorPicker';
 import { VSegmentedControl } from '../components/VSegmentedControl';
 import { HarmonyColor } from '../models';
 import { HarmonyPreview } from '../page-components/harmonies/HarmonyPreview';
+import { currentPickedColor } from '../stores/colors';
 import styles from './Harmonies.module.css';
 
 export function Harmonies() {
   const { colorFn } = useColorFunction();
-  const [seletedColor, setSelectedColor] = useState('000000');
+  const [seletedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [selectedMode, setSelectedMode] = useState('complementary');
   const generatedColors = useMemo(() => {
     try {
-      console.debug('[Mode]', selectedMode);
       const colors: HarmonyColor[] = [];
       switch (selectedMode) {
         case 'complementary':
@@ -91,7 +92,6 @@ export function Harmonies() {
         default:
           break;
       }
-      console.debug('[Generated colors]', colors);
       return colors;
     } catch (error) {
       console.error('[Generate Color Series]', error);
@@ -109,7 +109,7 @@ export function Harmonies() {
         <aside className={styles.function_side}>
           <div>
             <h5>Basic color</h5>
-            <ColorPicker onSelect={setSelectedColor} />
+            <ColorPicker color={seletedColor} onSelect={(color) => setSelectedColor(color)} />
           </div>
           <div className={styles.mode_navigation}>
             <h5>Color selection method</h5>