diff --git a/app/shared/model/order-cart.ts b/app/shared/model/order-cart.ts
new file mode 100644
index 0000000..19b636a
--- /dev/null
+++ b/app/shared/model/order-cart.ts
@@ -0,0 +1,14 @@
+
+import { OrderModel } from './order-model'
+
+export class OrderCart {
+    private static orderCart : OrderModel = new OrderModel();
+
+    public static getOrderCart(){
+        return OrderCart.orderCart;
+    }
+
+    public static resetOrderCart(){
+        OrderCart.orderCart = new OrderModel();
+    }
+}
\ No newline at end of file
diff --git a/app/vendor-menu/vendor-menu.component.css b/app/vendor-menu/vendor-menu.component.css
index 1e6f1cb..b21711f 100644
--- a/app/vendor-menu/vendor-menu.component.css
+++ b/app/vendor-menu/vendor-menu.component.css
@@ -49,7 +49,7 @@
         padding-right: 0px !important;
     }
 
-    .name {
+    .price {
         float: none;
     }
 }
@@ -63,7 +63,7 @@
     padding-right: 50px;
 }
 
-.name {
+.price {
     float: right;
 }
 
@@ -86,4 +86,9 @@ li a {
     transition: border .15s,background .15s;
     text-decoration: none;
     color: black;
+}
+
+.selected-item-img {
+    width: 100%;
+    margin-bottom: 20px;
 }
\ No newline at end of file
diff --git a/app/vendor-menu/vendor-menu.component.html b/app/vendor-menu/vendor-menu.component.html
index 29c5a1f..a3265b4 100644
--- a/app/vendor-menu/vendor-menu.component.html
+++ b/app/vendor-menu/vendor-menu.component.html
@@ -17,11 +17,11 @@ <h1 class="text-center">{{vendor.name}}</h1>
         <hr>
         <div>
             <ul class="vendor-items">
-                <li class="vendor-item-list" *ngFor="let item of cat.itemlist">
-                    <a (click)="openCartModal()">
+                <li class="vendor-item-list pointer" *ngFor="let item of cat.itemlist">
+                    <a (click)="openCartModal(item)">
                        <div>
-                           <div class="name">{{item.item}}</div>
-                           <div>{{item.price}}</div>
+                           <div class="price">{{item.price}}</div>
+                           <div>{{item.item}}</div>
                        </div>
                     </a>
                 </li>
@@ -30,13 +30,30 @@ <h1 class="text-center">{{vendor.name}}</h1>
     </div>
 </div>
 
-<modal #cartModal class="modal_vcenter" [size]="sm">
-    <modal-header></modal-header>
+<modal #cartModal class="modal_vcenter">
+    <modal-header [show-close]="true">
+        <h1> {{selectedItem.Item}} </h1>
+        <h3> {{selectedItem.Price}} </h3>
+    </modal-header>
     <modal-body>
-        <div>
-        </div>
+        <img class="selected-item-img" src="/assets/img/pop-up-pizza.jpg" alt="{{selectedItem.Item}}">
+        <span>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero fuga nesciunt aliquam dolorum optio ducimus, facilis aliquid similique delectus quis sunt suscipit quos, dolorem, officiis, cupiditate officia enim tenetur ad.
+        </span>
     </modal-body>
     <modal-footer>
+        <form class="navbar-form navbar-left">
+            <div class="input-group">
+                <span class="input-group-btn">
+                    <button type="submit" class="btn btn-default" (click)="addLess()">-</button>
+                </span>
+                <input type="number" class="form-control text-center" min="1" max="1000" value="{{selectedItem.Quantity}}">
+                <span class="input-group-btn">
+                    <button class="btn btn-default"  (click)="addMore()">+</button>
+                </span>
+            </div>
+        </form>
+        <button class="btn btn-primary" (click)="addToCart()">ADD TO CART</button>
     </modal-footer>
 
 </modal>
\ No newline at end of file
diff --git a/app/vendor-menu/vendor-menu.component.ts b/app/vendor-menu/vendor-menu.component.ts
index 0123592..f17b46d 100644
--- a/app/vendor-menu/vendor-menu.component.ts
+++ b/app/vendor-menu/vendor-menu.component.ts
@@ -1,8 +1,11 @@
 import { Component, ViewChild, OnInit } from "@angular/core";
-import { VendorDetailsService } from "./vendor-menu.service";
 import { MODAL_DIRECTIVES, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
 
 
+import { VendorDetailsService } from "./vendor-menu.service";
+import { OrderModel, PackageListModel } from ".././shared/model/order-model";
+import { OrderCart } from '.././shared/model/order-cart';
+
 @Component({
     selector: 'vendor-menu',
     templateUrl: 'app/vendor-menu/vendor-menu.component.html',
@@ -15,21 +18,72 @@ import { MODAL_DIRECTIVES, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
 
 export class VendorMenuComponent implements OnInit {
     vendor: any;
+    selectedItem : PackageListModel;
+
+    orderCart: OrderModel;
+
 
     ngOnInit(){
         this.vendor = this.vendorDetailsService.vendorDetails;
+        this.orderCart = OrderCart.getOrderCart();
+        this.orderCart.OrderCart.PackageList = [];
+        this.selectedItem = new PackageListModel();
     }
 
     constructor(private vendorDetailsService: VendorDetailsService){
 
     }
+
+
+
     @ViewChild('cartModal')
     cartModal: ModalComponent;
-    openCartModal(){
+    openCartModal(item){
+        this.addItem(item);
         this.cartModal.open();
     }
+
     closeCartModal(){
         this.cartModal.close();
     }
 
+    addItem(item) {
+        this.selectedItem.Item = item.item;
+        this.selectedItem.Price = item.price;
+        this.selectedItem.Quantity = 1;
+
+        console.log(this.orderCart.OrderCart.PackageList);
+
+    }
+
+    addMore(){
+        if(this.selectedItem.Quantity === 1)
+        {
+            this.selectedItem.Price += this.selectedItem.Price;
+        }
+        else {
+            this.selectedItem.Price += (this.selectedItem.Price/this.selectedItem.Quantity);
+        }
+        this.selectedItem.Quantity += 1;
+    }
+
+    addLess(){
+        if(this.selectedItem.Quantity != 1)
+        {
+            this.selectedItem.Price -= (this.selectedItem.Price/this.selectedItem.Quantity);
+            this.selectedItem.Quantity -= 1;
+        }
+
+    }
+
+    addToCart(){
+        this.orderCart.OrderCart.PackageList.push(this.selectedItem);
+        this.closeCartModal();
+        this.selectedItem = new PackageListModel();
+    }
+
+
+
+
+
 }
\ No newline at end of file
diff --git a/app/vendor-menu/vendor-menu.service.ts b/app/vendor-menu/vendor-menu.service.ts
index 11b38f2..72a4651 100644
--- a/app/vendor-menu/vendor-menu.service.ts
+++ b/app/vendor-menu/vendor-menu.service.ts
@@ -11,7 +11,7 @@ export class VendorDetailsService {
                 itemlist: [
                 {
                     item: "The 18 lb.",
-                    price: 14.99
+                    price: 14
                 },
                 {
                     item: "The Main St",