diff --git a/src/07-color-picker/Color.js b/src/07-color-picker/Color.js
index c6aa96c..4618624 100644
--- a/src/07-color-picker/Color.js
+++ b/src/07-color-picker/Color.js
@@ -1,8 +1,9 @@
-export default function Color ({ hex, name }) {
+export default function Color ({ hex, name, setBackgroundColor }) {
   return (
     <button
       className='color-square'
       style={{ backgroundColor: hex }}
+      onClick={() => setBackgroundColor(hex)}
     >
       <h2>{name}</h2>
     </button>
diff --git a/src/07-color-picker/ColorPicker.js b/src/07-color-picker/ColorPicker.js
index 486ce5e..c499c18 100644
--- a/src/07-color-picker/ColorPicker.js
+++ b/src/07-color-picker/ColorPicker.js
@@ -25,7 +25,7 @@ export default function ColorPicker () {
     <div className='page' style={{ backgroundColor }}>
       {
         colors.map(color => (
-          <Color key={color.hex} hex={color.hex} name={color.name} />
+          <Color key={color.hex} hex={color.hex} name={color.name} setBackgroundColor={setBackgroundColor} />
         ))
       }
     </div>