diff --git a/app/cart/cart-icon/cart-icon.component.css b/app/cart/cart-icon/cart-icon.component.css
new file mode 100644
index 0000000..734519c
--- /dev/null
+++ b/app/cart/cart-icon/cart-icon.component.css
@@ -0,0 +1,13 @@
+i {
+    color: white;
+    margin: 0;
+}
+
+.quantity-background {
+    border-radius: 50%;
+    background-color: red;
+    float: right;
+    margin-left: 5px;
+    width: 20px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/app/cart/cart-icon/cart-icon.component.html b/app/cart/cart-icon/cart-icon.component.html
new file mode 100644
index 0000000..46cc9a0
--- /dev/null
+++ b/app/cart/cart-icon/cart-icon.component.html
@@ -0,0 +1,6 @@
+<div (click)="update()">
+    <i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
+    <div class="quantity-background">
+        <strong>{{numberOfItems}}</strong>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/cart/cart-icon/cart-icon.component.ts b/app/cart/cart-icon/cart-icon.component.ts
new file mode 100644
index 0000000..9b23b8a
--- /dev/null
+++ b/app/cart/cart-icon/cart-icon.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { OrderCart } from '../../shared/model/order-cart'
+
+import { Observable } from 'rxjs';
+
+
+@Component({
+    selector: 'cart-icon',
+    templateUrl: 'app/cart/cart-icon/cart-icon.component.html',
+    styleUrls: ['app/cart/cart-icon/cart-icon.component.css']
+})
+
+
+export class CartIconComponent implements OnInit{
+    numberOfItems: number = 0;
+
+    ngOnInit(){
+        this.update();
+    }
+
+   public update(){
+        if(OrderCart.getOrderCart().OrderCart.PackageList){
+            this.numberOfItems = 0;
+            OrderCart.getOrderCart().OrderCart.PackageList.forEach(item => {
+                this.numberOfItems += item.Quantity;
+            });
+
+            if(OrderCart.getOrderCart().Description){
+                this.numberOfItems += 1;
+            }
+        }
+    }
+
+
+}
\ No newline at end of file
diff --git a/app/navbar/navbar.component.html b/app/navbar/navbar.component.html
index d2850b8..6b19d20 100644
--- a/app/navbar/navbar.component.html
+++ b/app/navbar/navbar.component.html
@@ -14,6 +14,11 @@
         <li *ngFor="let elm of navBarElementDict[State]">
           <a class="pointer" (click)="elm.Event()">{{elm.Title}}</a>
         </li>
+        <li>
+          <a class="pointer">
+            <cart-icon></cart-icon>
+          </a>
+        </li>
       </ul>
     </div>
     <!--/.nav-collapse -->
diff --git a/app/navbar/navbar.component.ts b/app/navbar/navbar.component.ts
index c069d56..151ee5a 100644
--- a/app/navbar/navbar.component.ts
+++ b/app/navbar/navbar.component.ts
@@ -3,6 +3,7 @@ import { CollapseDirective } from 'ng2-bootstrap/components/collapse/collapse.di
 
 import { AppSettings } from '../shared/app.settings';
 import { SignupComponent } from '../account/signup/signup.component';
+import { CartIconComponent } from '../cart/cart-icon/cart-icon.component';
 import { LoginComponent, LoginStatus } from '../account/login/login.component';
 import { LoginService } from '../account/login/login.service';
 
@@ -19,7 +20,7 @@ interface NavbarElement {
 @Component({
     selector: 'navbar',
     templateUrl: 'app/navbar/navbar.component.html',
-    directives: [ROUTER_DIRECTIVES, CollapseDirective, SignupComponent, LoginComponent],
+    directives: [ROUTER_DIRECTIVES, CollapseDirective, SignupComponent, LoginComponent, CartIconComponent],
     providers: [LocalStorage],
     styleUrls: ['app/navbar/navbar.component.css']
 })
diff --git a/app/vendor-menu/vendor-menu.component.css b/app/vendor-menu/vendor-menu.component.css
index c03abbb..a8e8dec 100644
--- a/app/vendor-menu/vendor-menu.component.css
+++ b/app/vendor-menu/vendor-menu.component.css
@@ -43,6 +43,9 @@
         position: relative;
         z-index: 2;
     }
+    .vendor-name-div p {
+        padding-bottom: 100px;
+    }
     .vendor-item-list {
         display: block;
         width: 100%;
diff --git a/app/vendor-menu/vendor-menu.component.ts b/app/vendor-menu/vendor-menu.component.ts
index abe4e93..a7adb4b 100644
--- a/app/vendor-menu/vendor-menu.component.ts
+++ b/app/vendor-menu/vendor-menu.component.ts
@@ -6,6 +6,7 @@ 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',
@@ -61,6 +62,9 @@ export class VendorMenuComponent implements OnInit {
         this.selectedItem.Item = item.item;
         this.selectedItem.Price = item.price;
         this.selectedItem.Quantity = 1;
+
+        console.log(OrderCart.getOrderCart().OrderCart.PackageList);
+
     }
 
     addMore(){