diff --git a/client/src/app/shared/components/basket-summary/basket-summary.component.html b/client/src/app/shared/components/basket-summary/basket-summary.component.html
new file mode 100644
index 0000000..47f6153
--- /dev/null
+++ b/client/src/app/shared/components/basket-summary/basket-summary.component.html
@@ -0,0 +1,54 @@
+<ng-container *ngIf="items.length > 0">
+  <div class="table-responsive">
+    <table class="table table-striped table-hover table-light">
+      <thead>
+        <tr>
+          <th scope="col">
+            <div class="p-2 px-3 text-uppercase">Product</div>
+          </th>
+          <th class="text-center" scope="col">
+            <div class="p-2 px-3 text-uppercase">Price</div>
+          </th>
+          <th class="text-center" scope="col">
+            <div class="p-2 px-3 text-uppercase">quantity</div>
+          </th>
+          <th class="text-center" scope="col">
+            <div class="p-2 px-3 text-uppercase">Total</div>
+          </th>
+          <th *ngIf="isBasket" class="text-center" scope="col">
+            <div class="p-2 px-3 text-uppercase">Remove</div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr *ngFor="let item of items">
+          <th scope="row">
+            <div class="p-2">
+              <img class="img-fluid" style="max-height: 50px" src="{{item.pictureUrl}}" alt="{{item.productName}}">
+              <div class="ms-3 d-inline-block align-middle">
+                <h5 class="mb-0">
+                  <a class="text-dark" routerLink="/shop/{{item.id || item.productId }}">{{item.productName}}</a>
+                </h5>
+                <span *ngIf="item.type" class="text-muted font-weight-normal font-italic d-block">Type: {{item.type}}</span>
+              </div>
+            </div>
+          </th>
+          <td class="align-middle text-center">{{item.price | currency}}</td>
+          <td class="align-middle text-center">
+            <div class="d-flex-align-items-center">
+              <i *ngIf="isBasket" (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 *ngIf="isBasket" (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 *ngIf="isBasket" class="align-middle text-center">
+            <a class="text-danger" style="cursor: pointer">
+              <i (click)="removeBasketItem(item)" class="fa fa-trash" style="font-size: 2em"></i>
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</ng-container>