diff --git a/index.html b/index.html
index 318bb07..2e7d6ac 100644
--- a/index.html
+++ b/index.html
@@ -26,8 +26,14 @@
             <ul>
               <li v-for="detail in details">{{ detail }}</li>
             </ul>
-            <div v-for="variant in variants" :key="variant.id" @mouseover="updateImage(variant.image)">{{ variant.color }}</div>
-            <button class="button" v-on:click="addToCart">Add to Cart</button>
+
+            <div 
+              class="color-circle" 
+              v-for="variant in variants" 
+              :key="variant.id" 
+              @mouseover="updateImage(variant.image)" 
+              :style="{ backgroundColor: variant.color }"></div>
+            <button class="button" :class="{ disabledButton: !inStock }" :disabled="!inStock" v-on:click="addToCart">Add to Cart</button>
           </div>
         </div>
       </div>
diff --git a/main.js b/main.js
index d323a24..7470f07 100644
--- a/main.js
+++ b/main.js
@@ -5,7 +5,7 @@ const app = Vue.createApp({
             product: 'Socks',
             brand: 'Vue Mastery',
             image: './assets/images/socks_blue.jpg',
-            inStock: true,
+            inStock: false,
             details: ['50% cotton', '30% wool', '20% polyester'],
             variants: [
               { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },