diff --git a/src/app/cancel/cancel.component.css b/src/app/cancel/cancel.component.css
index a81a136..1e6cd7c 100644
--- a/src/app/cancel/cancel.component.css
+++ b/src/app/cancel/cancel.component.css
@@ -5,3 +5,12 @@
 mat-dialog-content {
 	max-width: 400px;
 }
+
+.cancelTitle {
+	font-family: 'Spartan', sans-serif;
+	background: #ff5722;
+	color: white;
+	font-size: 26px;
+	text-align: center;
+	padding: 5px;
+}
\ No newline at end of file
diff --git a/src/app/cancel/cancel.component.html b/src/app/cancel/cancel.component.html
index 2c68a3b..4b72834 100644
--- a/src/app/cancel/cancel.component.html
+++ b/src/app/cancel/cancel.component.html
@@ -1,24 +1,28 @@
-<h3 mat-dialog-title class="text">{{title}}</h3>
+<div class="container" style="margin-top: 10px;">
 
-<mat-dialog-content>
-	<p class="text">{{msg}}</p>
-</mat-dialog-content>
+	<div class="cancelTitle">{{title}}</div>
 
-<mat-dialog-actions>
-	<table cellspacing="0" width="100%">
-		<tr>
-			<td>
-				<button mat-raised-button color="primary" (click)="confirm()">
-					Yes
-				</button>
+	<mat-dialog-content>
+		<p class="text">{{msg}}</p>
+	</mat-dialog-content>
 
-			</td>
-			<td align="right">
-				<button mat-raised-button (click)="close()">
-					No
-				</button>
+	<mat-dialog-actions>
+		<table cellspacing="0" width="100%">
+			<tr>
+				<td>
+					<button mat-raised-button color="primary" (click)="confirm()">
+						Yes
+					</button>
 
-			</td>
-		</tr>
-	</table>
-</mat-dialog-actions>
+				</td>
+				<td align="right">
+					<button mat-raised-button (click)="close()">
+						No
+					</button>
+
+				</td>
+			</tr>
+		</table>
+	</mat-dialog-actions>
+
+</div>
\ No newline at end of file
diff --git a/src/app/cancel/cancel.component.ts b/src/app/cancel/cancel.component.ts
index 212ab58..d5152aa 100644
--- a/src/app/cancel/cancel.component.ts
+++ b/src/app/cancel/cancel.component.ts
@@ -1,6 +1,7 @@
 import { Inject, Component, OnInit, ViewEncapsulation} from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 
+
 @Component({
 	selector: 'app-cancel',
 	templateUrl: './cancel.component.html',
diff --git a/src/app/items/item-delete/item-delete.component.css b/src/app/items/item-delete/item-delete.component.css
index 0b79f36..9241a3d 100644
--- a/src/app/items/item-delete/item-delete.component.css
+++ b/src/app/items/item-delete/item-delete.component.css
@@ -1,3 +1,13 @@
 .text {
 	font-family: 'Spartan', sans-serif;
 }
+
+.itemDataTitle {
+	font-family: 'Spartan', sans-serif;
+	background: #ff5722;
+	color: white;
+	font-size: 26px;
+	text-align: center;
+	padding: 5px;
+}
+
diff --git a/src/app/items/item-delete/item-delete.component.html b/src/app/items/item-delete/item-delete.component.html
index 7002979..c1bb616 100644
--- a/src/app/items/item-delete/item-delete.component.html
+++ b/src/app/items/item-delete/item-delete.component.html
@@ -1,10 +1,20 @@
-<h2 mat-dialog-title class="text">Delete item</h2>
+<div  class='itemDataTitle'>Delete Item</div>
 
-<mat-dialog-content>
-	<p class="text">Are you sure you want to delete "{{item.name}}"?</p>
-</mat-dialog-content>
+<div class='container' style="margin-top: 20px;">
+	<mat-dialog-content >
 
-<mat-dialog-actions>
-	<button mat-raised-button (click)="close()" class="text">Cancel</button>
-	<button mat-raised-button color="primary" class="text" (click)="save()">Delete</button>
-</mat-dialog-actions>
+		<span style="line-height: 10px;"></span>
+
+		<mat-dialog-content>
+			<p class="text">Are you sure you want to delete "{{item.name}}"?</p>
+		</mat-dialog-content>
+
+	</mat-dialog-content>
+
+	<div style="display: flex;
+				justify-content: space-between;">
+		<button mat-raised-button class="text" (click)="close()">Close</button>
+		<button mat-raised-button class="text" color="primary" (click)="save()">Delete</button>
+	</div>	
+		
+</div>
\ No newline at end of file
diff --git a/src/app/items/item-list/item-list.component.ts b/src/app/items/item-list/item-list.component.ts
index 32e249c..645e04d 100644
--- a/src/app/items/item-list/item-list.component.ts
+++ b/src/app/items/item-list/item-list.component.ts
@@ -158,6 +158,9 @@ export class ItemListComponent implements OnInit{
 //				console.log('Deleting', val);
 				this.itemService.deleteItem(val);
 				this.items = [];
+				this.notifierService
+				    .showNotification("Item deleted!!",
+			    	              "Close","success");
 			}
 			this.itemService.getItems(this.owner.address);
 			this.itemsUpdate.subscribe((items) => {
diff --git a/src/app/order/order.component.ts b/src/app/order/order.component.ts
index 64f3db4..3b408c6 100644
--- a/src/app/order/order.component.ts
+++ b/src/app/order/order.component.ts
@@ -17,6 +17,7 @@ import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { faSignOut } from '@fortawesome/free-solid-svg-icons';
 
+import { NotifierService } from '../notifier.service';
 
 @Component({
 	selector: 'app-order',
@@ -66,8 +67,9 @@ export class OrderComponent implements OnInit{
 	constructor(
 		public fullnodeService: FullnodeService,
 		public orderService: OrderService,
-		private dialog: MatDialog
-	) {
+		private dialog: MatDialog,
+		private notifierService: NotifierService )
+	{
 		this.priceUpdate = fullnodeService.priceUpdate;
 		this.priceUpdate.subscribe((price) => {
 			this.price = price;
@@ -119,6 +121,9 @@ export class OrderComponent implements OnInit{
 				console.log('Canceling');
 				this.orderService.cancelOrder(this.order._id!).subscribe((response) => {
 					this.orderService.getOrder();
+				this.notifierService
+				    .showNotification("Order successfully cancelled!",
+			    	              "Close","success");
 				});;
 			} else {
 				console.log('Returning to page');