diff --git a/client/src/app/basket/basket.component.html b/client/src/app/basket/basket.component.html
index 1d66a75..3eb0fb2 100644
--- a/client/src/app/basket/basket.component.html
+++ b/client/src/app/basket/basket.component.html
@@ -44,15 +44,15 @@
                     <td class="align-middle text-center">{{item.price | currency}}</td>
                     <td class="align-middle text-center">
                       <div class="d-flex-align-items-center">
-                        <i class="fa fa-minus-circle text-warning me-2" style="cursor: pointer;"></i>
+                        <i (click)="decrementItemQuantity(item)" class="fa fa-minus-circle text-warning me-2" style="cursor: pointer;"></i>
                         <span class="font-weight-bold">{{item.quantity}}</span>
-                        <i class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer;"></i>
+                        <i (click)="incrementItemQuantity(item)" class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer;"></i>
                       </div>
                     </td>
                     <td class="align-middle text-center">{{item.price * item.quantity | currency}}</td>
                     <td class="align-middle text-center">
                       <a class="text-danger" style="cursor: pointer">
-                        <i class="fa fa-trash" style="font-size: 2em"></i>
+                        <i (click)="removeBasketItem(item)" class="fa fa-trash" style="font-size: 2em"></i>
                       </a>
                     </td>
                   </tr>
diff --git a/client/src/app/basket/basket.component.ts b/client/src/app/basket/basket.component.ts
index 42690f4..b47ea86 100644
--- a/client/src/app/basket/basket.component.ts
+++ b/client/src/app/basket/basket.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
-import { IBasket } from '../shared/models/baskset';
+import { IBasket, IBasketItem } from '../shared/models/baskset';
 import { BasketService } from './basket.service';
 
 @Component({
@@ -17,4 +17,16 @@ export class BasketComponent implements OnInit {
     this.basket$ = this.basketService.basket$;
   }
 
+  removeBasketItem(item: IBasketItem){
+    this.basketService.removeItemFromBasket(item);
+  }
+
+  incrementItemQuantity(item: IBasketItem){
+    this.basketService.incrementItemQuantity(item);
+  }
+
+  decrementItemQuantity(item: IBasketItem){
+    this.basketService.decrementItemQuantity(item);
+  }
+
 }
diff --git a/client/src/app/basket/basket.service.ts b/client/src/app/basket/basket.service.ts
index 8657dd0..04b0695 100644
--- a/client/src/app/basket/basket.service.ts
+++ b/client/src/app/basket/basket.service.ts
@@ -48,6 +48,48 @@ export class BasketService {
     this.setBasket(basket);
   }
 
+  incrementItemQuantity(item: IBasketItem){
+    const basket = this.getCurrentBasketValue();
+    const foundItemIndex = basket.items.findIndex(x => x.id === item.id);
+    basket.items[foundItemIndex].quantity++;
+    this.setBasket(basket);
+  }
+
+  decrementItemQuantity(item: IBasketItem){
+    const basket = this.getCurrentBasketValue();
+    const foundItemIndex = basket.items.findIndex(x => x.id === item.id);
+    if (basket.items[foundItemIndex].quantity > 1){
+      basket.items[foundItemIndex].quantity--;
+      this.setBasket(basket);
+    } else {
+      this.removeItemFromBasket(item);
+    }
+  }
+
+  removeItemFromBasket(item: IBasketItem) {
+    const basket = this.getCurrentBasketValue();
+    if(basket.items.some(x => x.id === item.id)) {
+      basket.items = basket.items.filter(i => i.id !== item.id);
+      if (basket.items.length > 0){
+        this.setBasket(basket);
+      } else {
+        this.deleteBasket(basket);
+      }
+    }
+  }
+
+  deleteBasket(basket: IBasket) {
+    return this.http.delete(this.baseUrl + 'basket?id=' + basket.id).subscribe({
+      next: () => {
+        this.basketSource.next(null);
+        this.basketTotalSource.next(null);
+        localStorage.removeItem('basket_id');
+      },
+      error: (e: any) => { console.log(e) },
+      complete: () => { console.log('Complete') }
+    });
+  }
+
   private calculateTotals(){
     const basket = this.getCurrentBasketValue();
     const shipping = 0;
diff --git a/client/src/app/shop/product-details/product-details.component.html b/client/src/app/shop/product-details/product-details.component.html
index 33604e2..282c95c 100644
--- a/client/src/app/shop/product-details/product-details.component.html
+++ b/client/src/app/shop/product-details/product-details.component.html
@@ -7,10 +7,10 @@
       <h3>{{product.name}}</h3>
       <p style="font-size: 2em;">{{product.price | currency}}</p>
       <div class="d-flex justify-content-start align-items-center">
-        <i class="fa fa-minus-circle text-warning me-2" style="cursor: pointer; font-size: 2em"></i>
-        <span class="font-weight-bold" style="font-size: 1.5em;">2</span>
-        <i class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer; font-size: 2em"></i>
-        <button class="btn btn-outline-secondary btn-lg ms-4">Add to Cart</button>
+        <i (click)="decrementQuantity()" class="fa fa-minus-circle text-warning me-2" style="cursor: pointer; font-size: 2em"></i>
+        <span class="font-weight-bold" style="font-size: 1.5em;">{{quantity}}</span>
+        <i (click)="incrementQuantity()" class="fa fa-plus-circle text-warning mx-2" style="cursor: pointer; font-size: 2em"></i>
+        <button (click)="addItemToBasket()" class="btn btn-outline-primary btn-lg ms-4">Add to Cart</button>
       </div>
     </div>
     <div class="row mt-5">
diff --git a/client/src/app/shop/product-details/product-details.component.ts b/client/src/app/shop/product-details/product-details.component.ts
index e4de7d4..d8da78f 100644
--- a/client/src/app/shop/product-details/product-details.component.ts
+++ b/client/src/app/shop/product-details/product-details.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { BasketService } from 'src/app/basket/basket.service';
 import { IProduct } from 'src/app/shared/models/product';
 import { BreadcrumbService } from 'xng-breadcrumb';
 import { ShopService } from '../shop.service';
@@ -11,8 +12,9 @@ import { ShopService } from '../shop.service';
 })
 export class ProductDetailsComponent implements OnInit {
   product: IProduct;
+  quantity = 1;
 
-  constructor(private shopService: ShopService, private activatedRoute: ActivatedRoute, private bcService: BreadcrumbService) {
+  constructor(private shopService: ShopService, private activatedRoute: ActivatedRoute, private bcService: BreadcrumbService, private basketService: BasketService) {
     this.bcService.set('@productDetails', ' ');
    }
 
@@ -20,6 +22,20 @@ export class ProductDetailsComponent implements OnInit {
     this.loadProduct();
   }
 
+  addItemToBasket(){
+    this.basketService.addItemToBasket(this.product, this.quantity);
+  }
+
+  incrementQuantity(){
+    this.quantity++;
+  }
+
+  decrementQuantity(){
+    if(this.quantity > 1){
+      this.quantity--;
+    }
+  }
+
   loadProduct(){
     this.shopService.getProduct(+this.activatedRoute.snapshot.paramMap.get('id')).subscribe(
       {