diff --git a/index.html b/index.html
index f30041f2d..cffb8f504 100644
--- a/index.html
+++ b/index.html
@@ -26,8 +26,8 @@ <h1>{{ product }}</h1>
             <ul>
               <li v-for="detail in details">{{ detail }}</li>
             </ul>
-            <div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>
-            <button class="button">Add to Cart</button>
+            <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}</div>
+            <button class="button" @click="addToCart">Add to Cart</button>
           </div>
         </div>
       </div>
diff --git a/main.js b/main.js
index a274b91f0..fe5f42bc4 100644
--- a/main.js
+++ b/main.js
@@ -11,5 +11,13 @@ const app = Vue.createApp({
               { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
             ]
         }
+    },
+    methods: {
+        addToCart() {
+            this.cart += 1
+        },
+        updateImage(variantImage) {
+            this.image = variantImage
+        }
     }
 })