diff --git a/index.html b/index.html
index a481a22..af8999b 100644
--- a/index.html
+++ b/index.html
@@ -15,19 +15,38 @@
     <div class="header">
         <div class="container">
             <div class="title">
-                <img src="public/logo.png">
-                <h1>Vue.js Poster Shop</h1>
+                <img src="public/knight1.jpg">
+                <h1>BJ's Vue.js Shop</h1>
             </div>
+            <form class="search-bar" v-on:submit.prevent="onSubmit">
+                <input type="text" placeholder="Search for books" required v-model="search">
+                <input type="submit" value="Search" class="btn">
+            </form>
         </div>
     </div>
     <div class="main container">
         <div class="products">
-            <p>Products go here.</p>
-        </div>
+                <div v-for="product in products" class="product" v-bind:key="product.id">
+                        <div>
+                            <h4 class="product-title">{{ product.title }}</h4>
+                            <button v-on:click="addToCart(product)" class="add-to-cart btn">Add to Cart</button>
+                        </div>
+                    </div>
         <div class="cart">
             <h2>Shopping Cart</h2>
-            <div>
-                Total: $0.00
+            <ul>
+                <li v-for="item in cart" v-bind:key="item.id" class="cart-item">
+                    <div class="item-title">{{ item.title }}</div>
+                    <span class="item-qty">{{ item.price  | currency }} x {{ item.qty}}</span>  
+                    <button class="btn" v-on:click="inc(item)">+</button>
+                    <button class="btn" v-on:click="dec(item)">-</button>
+                </li>
+            </ul>
+            <div v-if="cart.length">
+                <div class="cart-total">Total: {{ total | currency }}</div>
+            </div>
+            <div v-else class="empty-cart">
+                No items in the cart.
             </div>
         </div>
     </div>
@@ -35,6 +54,7 @@ <h2>Shopping Cart</h2>
 
 <!-- Scripts -->
 <script src="/reload/reload.js"></script>
+<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
 <script type="text/javascript" src="public/script.js"></script>
 
 </body>
diff --git a/package-lock.json b/package-lock.json
index e6777cf..bf89f6b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3894,6 +3894,11 @@
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
+    "vue": {
+      "version": "2.5.17",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
+      "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
+    },
     "which": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
diff --git a/package.json b/package.json
index c6671fe..e419c8f 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "axios": "~0.18.0",
     "body-parser": "~1.18.3",
     "dotenv": "~6.0.0",
-    "express": "~4.16.4"
+    "express": "~4.16.4",
+    "vue": "^2.5.17"
   },
   "devDependencies": {
     "eslint": "~5.5.0",
diff --git a/public/book1.jpg b/public/book1.jpg
new file mode 100644
index 0000000..d82c6f8
Binary files /dev/null and b/public/book1.jpg differ
diff --git a/public/knight1.jpg b/public/knight1.jpg
new file mode 100644
index 0000000..8d25e6c
Binary files /dev/null and b/public/knight1.jpg differ
diff --git a/public/script.js b/public/script.js
index 4c1ad42..3ce9418 100644
--- a/public/script.js
+++ b/public/script.js
@@ -1 +1,58 @@
-console.log("It works!");
+
+new Vue({
+    el: "#app",
+        data: {
+            total: 0,
+             products: [
+                { title: "Product 1", id: 1, price: 9.99},
+                { title: "Product 2", id: 2, price: 9.99},
+                { title: "Product 3", id: 3, price: 9.99}
+            ],
+            cart: [],
+            search: ""
+        },
+        methods: {
+            addToCart: function(product) {
+                this.total += product.price;
+                var found = false; /* under this condition the cart is able to increment product by adding 1 so only executes when false bool*/ 
+                for (var i=0;i<this.cart.length; i++) {/*to check if an item is already in the cart*/
+                    if (this.cart[i].id === product.id) {
+                        this.cart[i]/*to check if current item's id this.cart[i] is equivalent to the id of the product being added*/
+                            this.cart[i].qty++;/*starts if the cart id is equilivant to product id--increment product*/
+                            var found = true;/*if match found set found to true*/
+                }
+            }
+            if (!found) { /*in case product id does not match cart id*/
+                this.cart.push({
+                    id: product.id,
+                    title: product.title,
+                    price: product.price,
+                    qty: 1
+
+                });
+                 }
+                /**for the increment and decrement button of total items */
+            },
+            inc: function(item) {
+                item.qty++;
+                this.total += item.price;
+            },
+            dec: function(item) {
+                item.qty--;
+                this.total -= item.price;
+                if (item.qty <= 0) {
+                    var i = this.cart.indexOf(item);
+                    this.cart.splice(i,1);
+                }
+            },
+            onSubmit: function() {
+                console.log("Search");
+            }
+        },
+        /*capping the total price to 2 decimal points*/
+        filters: {
+            currency: function(price) {
+                return"$".concat(price.toFixed(2));
+            }
+        }
+});
\ No newline at end of file
diff --git a/public/skullbook.jpg b/public/skullbook.jpg
new file mode 100644
index 0000000..deb02a6
Binary files /dev/null and b/public/skullbook.jpg differ
diff --git a/public/style.css b/public/style.css
index 5f9c4cf..5a60e12 100644
--- a/public/style.css
+++ b/public/style.css
@@ -79,7 +79,7 @@ body {
 
 .title > img {
     display: block;
-    height: 50px;
+    height: 110px;
 }
 
 .title > h1 {