diff --git a/shopping-server/services/orderService.js b/shopping-server/services/orderService.js
index f4a9cc82..def62055 100644
--- a/shopping-server/services/orderService.js
+++ b/shopping-server/services/orderService.js
@@ -275,7 +275,10 @@ export default {
             // Converting mongoose order object to regular json object to send to email service
             order = order.toObject({flattenMaps: true});
             transformer.castValuesToString(order, ["_id", "tariff", "category"]);
-            emailService.emailOrderReceived(order)
+            emailService.emailOrderReceived(order);
+
+            const cartItemIds = _.map(checkout.cart.items, '_id');
+            await shoppingService.deleteFromCart(userObj, cartItemIds);
 
             result = {
                 httpStatus: httpStatus.OK,
@@ -359,6 +362,9 @@ export default {
             transformer.castValuesToString(order, ["_id", "tariff", "category"]);
             emailService.emailOrderReceived(order)
 
+            const cartItemIds = _.map(checkout.cart.items, '_id');
+            await shoppingService.deleteFromCart(userObj, cartItemIds);
+
             result = {
                 httpStatus: httpStatus.OK,
                 status: "successful", 
diff --git a/shopping-webclient/src/components/orders/SingleOrderDetail.vue b/shopping-webclient/src/components/orders/SingleOrderDetail.vue
index 1f3d8d64..2a7de7e6 100644
--- a/shopping-webclient/src/components/orders/SingleOrderDetail.vue
+++ b/shopping-webclient/src/components/orders/SingleOrderDetail.vue
@@ -8,7 +8,24 @@
       </h4>
 
       <b-card-group deck class="mb-3">
-        <b-card bg-variant="light" :header="getOrderDeet()">
+        <b-card bg-variant="light">
+          <template v-slot:header>
+            <div class="info">
+              <!-- Status goes here -->
+              Status:
+              <span
+                v-bind:class="{'green': order.overall_status != 'CANCELLED',
+                'red': order.overall_status === 'CANCELLED'}"
+              >
+                <strong>{{order.overall_status}}</strong>
+              </span><br>
+
+              <strong>Order #</strong>
+              {{order._id}}<br>
+              <strong>Order placed on</strong>
+              {{dateFormat(order.auditLog.createdOn)}}
+            </div>
+          </template>
           <div class="card-text card-font">
             <p>Total Weight: <strong>{{order.cart.totalWeight.quantity}} {{order.cart.totalWeight.unit}}</strong></p>
             <p>Sub Total Price: <strong>$ {{order.cart.subTotalPrice.amount | formattedAmount}}</strong></p>
@@ -132,26 +149,6 @@ export default {
       }
       return '';
     },
-
-    getOrderDeet() {
-      return `
-              <div class="info">
-              <!-- Status goes here -->
-              Status:
-              <span
-                v-bind:class="{'green': ${this.order.overall_status} != 'CANCELLED', 
-                'red': ${this.order.overall_status} === 'CANCELLED'}"
-              >
-                <strong>${this.order.overall_status}</strong>
-              </span><br>
-
-              <strong>Order #</strong>
-              ${this.order._id}<br>
-              <strong>Order placed on</strong>
-              ${this.dateFormat(this.order.auditLog.createdOn)}
-              </div>
-      `;
-    },
   },
 
   computed: {