diff --git a/assets/styles.css b/assets/styles.css
index c52316317..f912bd997 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -25,7 +25,7 @@ body {
   margin: 25px 100px;
   float: right;
   border: 1px solid #d8d8d8;
-  padding: 10px 30px;
+  padding: 30px 30px;
   background-color: white;
   -webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
   -moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
@@ -89,7 +89,7 @@ li {
 }
 
 .out-of-stock-img {
-  opacity:0.5
+  opacity: 0.5;
 }
 
 p {
diff --git a/index.html b/index.html
index 56c112638..e3e786f70 100644
--- a/index.html
+++ b/index.html
@@ -6,14 +6,41 @@
     <!-- Import Styles -->
     <link rel="stylesheet" href="./assets/styles.css" />
     <!-- Import Vue.js -->
-    <script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
+    <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
   </head>
   <body>
     <div id="app">
-      <h1>Product goes here</h1>
+      <div class="nav-bar"></div>
+
+      <div class="cart">Cart({{ cart }})</div>
+      
+      <div class="product-display">
+        <div class="product-container">
+          <div class="product-image">
+            <img :class="{ 'out-of-stock-img': !inStock }" 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 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>
+            <!-- solution -->
+            <button class="button" @click="removeFromCart">Remove Item</button>
+            <!-- solution -->
+          </div>
+        </div>
+      </div>
     </div>
 
-    <!-- Import Js -->
     <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 aedc73d86..a41379d7a 100644
--- a/main.js
+++ b/main.js
@@ -1 +1,30 @@
-const product = 'Socks'
+const app = Vue.createApp({
+    data() {
+        return {
+            cart: 0,
+            product: 'Socks',
+            image: './assets/images/socks_blue.jpg',
+            inStock: true,
+            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
+        },
+        // solution
+        removeFromCart() {
+            if (this.cart >= 1) {
+                this.cart -= 1
+            }
+        },
+        // solution
+        updateImage(variantImage) {
+            this.image = variantImage
+        }
+    }
+})
