diff --git a/index.html b/index.html
index afbbb13..90d6819 100644
--- a/index.html
+++ b/index.html
@@ -1,50 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Vue Mastery</title>
-    <!-- Import Styles -->
-    <link rel="stylesheet" href="./assets/styles.css" />
-    <!-- Import Vue.js -->
-    <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
-  </head>
-  <body>
-    <div id="app">
-      <div class="nav-bar"></div>
+	<head>
+		<meta charset="UTF-8" />
+		<title>Vue Mastery</title>
+		<!-- Import Styles -->
+		<link rel="stylesheet" href="./assets/styles.css" />
+		<!-- Import Vue.js -->
+		<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
+	</head>
+	<body>
+		<div id="app">
+			<div class="nav-bar"></div>
 
-      <div class="cart">Cart({{ cart }})</div>
-      
-      <div class="product-display">
-        <div class="product-container">
-          <div class="product-image">
-            <img v-bind:src="image">
-          </div>
-          <div class="product-info">
-            <h1>{{ product }}</h1>
-            <p v-if="inStock">In Stock</p>
-            <p v-else>Out of Stock</p>
-            <ul>
-              <li v-for="detail in details">{{ detail }}</li>
-            </ul>
+			<div class="cart">Cart({{ cart }})</div>
 
-            <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>
-    </div>
+			<div class="product-display">
+				<div class="product-container">
+					<div class="product-image">
+						<img v-bind:src="image" />
+					</div>
+					<div class="product-info">
+						<h1>{{ title }}</h1>
+						<p v-if="variants[selectedVariant].onSale">
+							{{ sale }}
+						</p>
+						<p v-if="inStock">In Stock</p>
+						<p v-else>Out of Stock</p>
+						<ul>
+							<li v-for="detail in details">{{ detail }}</li>
+						</ul>
 
-    <!-- Import App -->
-    <script src="./main.js"></script>
+						<div
+							v-for="(variant, index) in variants"
+							:key="variant.id"
+							@mouseover="updateVariant(index)"
+							class="color-circle"
+							:style="{ backgroundColor: variant.color }"
+						></div>
+						<button
+							class="button"
+							:class="{ disabledButton: !inStock }"
+							:disabled="!inStock"
+							v-on:click="addToCart"
+						>
+							Add to Cart
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
 
-    <!-- Mount App -->
-    <script>
-      const mountedApp = app.mount('#app')
-    </script>
-  </body>
+		<!-- Import App -->
+		<script src="./main.js"></script>
+
+		<!-- Mount App -->
+		<script>
+			const mountedApp = app.mount("#app");
+		</script>
+	</body>
 </html>
diff --git a/main.js b/main.js
index 7470f07..5c3486d 100644
--- a/main.js
+++ b/main.js
@@ -1,24 +1,54 @@
 const app = Vue.createApp({
-    data() {
-        return {
-            cart:0,
-            product: 'Socks',
-            brand: 'Vue Mastery',
-            image: './assets/images/socks_blue.jpg',
-            inStock: false,
-            details: ['50% cotton', '30% wool', '20% polyester'],
-            variants: [
-              { id: 2234, color: 'green', image: './assets/images/socks_green.jpg' },
-              { id: 2235, color: 'blue', image: './assets/images/socks_blue.jpg' },
-            ]
-        }
-    },
-    methods: {
-        addToCart() {
-            this.cart += 1
-        },
-        updateImage(variantImage) {
-            this.image = variantImage
-        }
-    }
-})
+	data() {
+		return {
+			cart: 0,
+			product: "Socks",
+			brand: "Vue Mastery",
+			//image: "./assets/images/socks_blue.jpg",
+			//inStock: false,
+			selectedVariant: 0,
+			details: ["50% cotton", "30% wool", "20% polyester"],
+			variants: [
+				{
+					id: 2234,
+					color: "green",
+					image: "./assets/images/socks_green.jpg",
+					quantity: 50,
+					onSale: true,
+				},
+				{
+					id: 2235,
+					color: "blue",
+					image: "./assets/images/socks_blue.jpg",
+					quantity: 0,
+					onSale: false,
+				},
+			],
+		};
+	},
+	methods: {
+		addToCart() {
+			this.cart += 1;
+		},
+		updateImage(variantImage) {
+			this.image = variantImage;
+		},
+		updateVariant(index) {
+			this.selectedVariant = index;
+		},
+	},
+	computed: {
+		title() {
+			return this.brand + " " + this.product;
+		},
+		image() {
+			return this.variants[this.selectedVariant].image;
+		},
+		inStock() {
+			return this.variants[this.selectedVariant].quantity;
+		},
+		sale() {
+			return this.brand + " " + this.product + " is on sale";
+		},
+	},
+});
