diff --git a/components/ProductDetails.js b/components/ProductDetails.js
new file mode 100644
index 0000000..e6df085
--- /dev/null
+++ b/components/ProductDetails.js
@@ -0,0 +1,17 @@
+// solution
+app.component('product-details', {
+  props: {
+    details: {
+      type: Array,
+      required: true
+    }
+  },
+  template:
+  /*html*/
+  `
+  <ul>
+    <li v-for="detail in details">{{ detail }}</li>
+  </ul>
+  `
+})
+// solution
\ No newline at end of file
diff --git a/components/ProductDisplay.js b/components/ProductDisplay.js
index 2e6f72c..a6af5e6 100644
--- a/components/ProductDisplay.js
+++ b/components/ProductDisplay.js
@@ -14,9 +14,10 @@ app.component('product-display', {
         <p v-else>Out of Stock</p>
 
         <p>Shipping: {{ shipping }}</p>
-        <ul>
-          <li v-for="detail in details">{{ detail }}</li>
-        </ul>
+        
+        <!-- solution -->
+        <product-details :details="details"></product-details>
+        <!-- solution -->
 
         <div 
           v-for="(variant, index) in variants" 
@@ -50,7 +51,7 @@ app.component('product-display', {
   },
   methods: {
       addToCart() {
-          this.$emit('add-to-cart', this.variants[this.selectedVariant].id)
+          this.cart += 1
       },
       updateVariant(index) {
           this.selectedVariant = index
diff --git a/index.html b/index.html
index 535269a..1ea2e24 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,9 @@
 
     <!-- Import Components -->
     <script src="./components/ProductDisplay.js"></script>
+    <!-- solution -->
+    <script src="./components/ProductDetails.js"></script>
+    <!-- solution -->
 
     <!-- Mount App -->
     <script>
diff --git a/main.js b/main.js
index 6962ca8..73bdcdc 100644
--- a/main.js
+++ b/main.js
@@ -5,9 +5,5 @@ const app = Vue.createApp({
             premium: true
         }
     },
-    methods: {
-        updateCart(id) {
-            this.cart.push(id)
-        }
-    }
+    methods: {}
 })