diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9410d9e..9183d10 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -25,6 +25,7 @@ import { ViewerComponent } from './viewer/viewer.component';
 import { LoginComponent } from './login/login.component';
 import { ItemListComponent } from './items/item-list/item-list.component';
 import { ItemCreateComponent } from './items/item-create/item-create.component';
+import { ItemEditComponent } from './items/item-edit/item-edit.component';
 import { ItemDeleteComponent } from './items/item-delete/item-delete.component';
 import { ItemAddComponent} from './items/item-add/item-add.component';
 import { OrderComponent } from './order/order.component';
@@ -54,6 +55,7 @@ import { NotifierComponent } from './notifier/notifier.component';
         LoginComponent,
         OrderComponent,
         ItemCreateComponent,
+        ItemEditComponent,
         ItemDeleteComponent,
         ItemAddComponent,
         CancelComponent,
diff --git a/src/app/items/item-add/item-add.component.css b/src/app/items/item-add/item-add.component.css
index 58d315b..5f8cb81 100644
--- a/src/app/items/item-add/item-add.component.css
+++ b/src/app/items/item-add/item-add.component.css
@@ -5,3 +5,12 @@
 input[type=number]{
 	text-align: right;
 }
+
+.itemDataTitle {
+	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/items/item-add/item-add.component.html b/src/app/items/item-add/item-add.component.html
index dc706e4..e98376a 100644
--- a/src/app/items/item-add/item-add.component.html
+++ b/src/app/items/item-add/item-add.component.html
@@ -1,13 +1,21 @@
-<h2 mat-dialog-title class="text">Add to Order</h2>
+<div  class='itemDataTitle'>Add to Order</div>
 
-<mat-dialog-content [formGroup]="orderForm">
-	<p class="text">{{lineItem.name}}</p>
-	<mat-form-field>
-		<input matInput type="number" placeholder="Quantity" formControlName="qty">
-	</mat-form-field>
-</mat-dialog-content>
+<div class='container'>
+	<mat-dialog-content [formGroup]="orderForm">
+		<p class="text">{{lineItem.name}}</p>
+		<mat-form-field [style.width.%]="100">
+			<input matInput type="number" placeholder="Quantity" formControlName="qty">
+		</mat-form-field>
+	</mat-dialog-content>
 
-<mat-dialog-actions>
-	<button mat-raised-button class="text" (click)="close()">Cancel</button>
-	<button mat-raised-button class="text" color="primary" (click)="save()">Add</button>
-</mat-dialog-actions>
+	<div style="display: flex;
+				justify-content: space-between;">
+		<button mat-raised-button 
+				class="text" 
+				(click)="close()">Cancel</button>
+		<button mat-raised-button 
+				class="text" 
+				color="primary" 
+				(click)="save()">Add</button>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/app/items/item-add/item-add.component.ts b/src/app/items/item-add/item-add.component.ts
index d0668ec..3f9db9e 100644
--- a/src/app/items/item-add/item-add.component.ts
+++ b/src/app/items/item-add/item-add.component.ts
@@ -1,4 +1,4 @@
-import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation} from '@angular/core';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@angular/forms';
 import { LineItem } from '../lineitem.model';
diff --git a/src/app/items/item-create/item-create.component.css b/src/app/items/item-create/item-create.component.css
index 58d315b..06195c3 100644
--- a/src/app/items/item-create/item-create.component.css
+++ b/src/app/items/item-create/item-create.component.css
@@ -5,3 +5,12 @@
 input[type=number]{
 	text-align: right;
 }
+
+.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-create/item-create.component.html b/src/app/items/item-create/item-create.component.html
index d6dc06a..2055b1f 100644
--- a/src/app/items/item-create/item-create.component.html
+++ b/src/app/items/item-create/item-create.component.html
@@ -1,25 +1,39 @@
-<h2 mat-dialog-title class="text">Add item</h2>
 
-<mat-dialog-content [formGroup]="form">
-	<mat-form-field class="text" appearance="outline">
-		<mat-label>Item</mat-label>
-		<input type="hidden" formControlName="id">
-		<input matInput placeholder="Item" formControlName="name">
-	</mat-form-field>
-	<mat-form-field class="text" appearance="outline">
-		<mat-label>Description</mat-label>
-		<textarea matInput placeholder="Description" formControlName="description"></textarea>
-	</mat-form-field>
-	<mat-form-field class="text" appearance="outline">
-		<mat-label>Price</mat-label>
-		<input matInput type="number" placeholder="Price" formControlName="cost">
-		<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
-			<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
-		</div>
-	</mat-form-field>
-</mat-dialog-content>
+<div  class='itemDataTitle'>Add Item</div>
 
-<mat-dialog-actions>
-	<button mat-raised-button class="text" (click)="close()">Close</button>
-	<button mat-raised-button class="text" color="primary" (click)="save()">Save</button>
-</mat-dialog-actions>
+<div class='container' style="margin-top: 20px;">
+	<mat-dialog-content [formGroup]="form">
+		<span style="line-height: 10px;"></span>
+		<mat-form-field class="text" [style.width.%]="100">
+			<mat-label>Item</mat-label>
+			<input type="hidden" formControlName="id">
+			<input matInput 
+				   placeholder="Item" 
+				   formControlName="name"
+				   maxlength="16">
+		</mat-form-field >
+		<mat-form-field class="text" [style.width.%]="100">
+			<mat-label>Description</mat-label>
+			<textarea matInput 
+					  placeholder="Description" 
+					  formControlName="description"
+					  maxlength="30" 
+    				  style="line-height:20px; 
+    				  		 overflow:auto;"></textarea>
+		</mat-form-field>
+		<mat-form-field class="text" [style.width.%]="100">
+			<mat-label>Price</mat-label>
+			<input matInput type="number" placeholder="Price" formControlName="cost">
+			<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
+				<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
+			</div>
+		</mat-form-field>
+	</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()">Save</button>
+	</div>		
+
+</div>
\ No newline at end of file
diff --git a/src/app/items/item-edit/item-edit.component.css b/src/app/items/item-edit/item-edit.component.css
new file mode 100644
index 0000000..06195c3
--- /dev/null
+++ b/src/app/items/item-edit/item-edit.component.css
@@ -0,0 +1,16 @@
+.text {
+	font-family: 'Spartan', sans-serif;
+}
+
+input[type=number]{
+	text-align: right;
+}
+
+.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-edit/item-edit.component.html b/src/app/items/item-edit/item-edit.component.html
new file mode 100644
index 0000000..58827f0
--- /dev/null
+++ b/src/app/items/item-edit/item-edit.component.html
@@ -0,0 +1,39 @@
+
+<div  class='itemDataTitle'>Edit Item</div>
+
+<div class='container' style="margin-top: 20px;">
+	<mat-dialog-content [formGroup]="form">
+		<span style="line-height: 10px;"></span>
+		<mat-form-field class="text" [style.width.%]="100">
+			<mat-label>Item</mat-label>
+			<input type="hidden" formControlName="id">
+			<input matInput 
+				   placeholder="Item" 
+				   formControlName="name"
+				   maxlength="16">
+		</mat-form-field >
+		<mat-form-field class="text" [style.width.%]="100">
+			<mat-label>Description</mat-label>
+			<textarea matInput 
+					  placeholder="Description" 
+					  formControlName="description"
+					  maxlength="30" 
+    				  style="line-height:20px; 
+    				  		 overflow:auto;"></textarea>
+		</mat-form-field>
+		<mat-form-field class="text" [style.width.%]="100">
+			<mat-label>Price</mat-label>
+			<input matInput type="number" placeholder="Price" formControlName="cost">
+			<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
+				<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
+			</div>
+		</mat-form-field>
+	</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()">Save</button>
+	</div>		
+
+</div>
\ No newline at end of file
diff --git a/src/app/items/item-edit/item-edit.component.ts b/src/app/items/item-edit/item-edit.component.ts
new file mode 100644
index 0000000..07c0a07
--- /dev/null
+++ b/src/app/items/item-edit/item-edit.component.ts
@@ -0,0 +1,59 @@
+import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { UntypedFormBuilder, Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
+import { Item } from '../item.model';
+
+
+@Component({
+	selector: 'app-item-edit',
+	templateUrl: './item-edit.component.html',
+	styleUrls: ['./item-edit.component.css']
+})
+
+export class ItemEditComponent implements OnInit {
+
+	form: UntypedFormGroup;
+	id: string | undefined = '';
+	numberRegEx = /\d*\.?\d{1,2}/;
+
+	constructor(
+		private fb: UntypedFormBuilder,
+		private dialogRef: MatDialogRef<ItemEditComponent>,
+		@Inject(MAT_DIALOG_DATA) public data: Item
+	){
+		if (data._id === '') { 
+			this.form = fb.group({
+				id: [''],
+				name: [null, Validators.required],
+				description: [null, Validators.required],
+				cost: new UntypedFormControl('', {
+					validators: [Validators.required, Validators.pattern(this.numberRegEx)],
+					updateOn: "blur"
+				})
+			});
+		} else {
+			this.id = data._id;
+			this.form = fb.group({
+				id: [data._id],
+				name: [data.name, Validators.required],
+				description: [data.description, Validators.required],
+				cost: new UntypedFormControl(data.cost, {
+					validators: [Validators.required, Validators.pattern(this.numberRegEx)],
+					updateOn: "blur"
+				})
+			});
+		}
+	}
+
+	ngOnInit () {
+	}
+
+	save() {
+//		console.log(this.form.value);
+		this.dialogRef.close(this.form.value);
+	}
+
+	close () {
+		this.dialogRef.close();
+	}
+}
diff --git a/src/app/items/item-list/item-list.component.css b/src/app/items/item-list/item-list.component.css
index 6be4e1b..c499f62 100644
--- a/src/app/items/item-list/item-list.component.css
+++ b/src/app/items/item-list/item-list.component.css
@@ -1,5 +1,5 @@
 .card {
-	font-family: 'Spartan', sans-serif;
+  font-family: 'Spartan', sans-serif;
 }
 
 .text {
@@ -35,12 +35,26 @@ p.price{
 	text-align: right;
 }
 
+.buttons-class {
+  background-color: #ff5722;
+  color: white;
+  font-family: 'Spartan', sans-serif;
+  font-size: 12px !important;
+  font-weight: 700;
+  height: 25px !important;
+  width: 100px !important;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
 .buttons-class-cart{
   background-color: #ff5722;
   color: white;
   font-size: 18px;
   font-weight: 700;
-  height: 25px !important;
+  height:30px !important;
   width: 50px !important;
   display: flex;
   align-items: center;
@@ -49,10 +63,14 @@ p.price{
 }
 
 .availableItems{
+  display: flex;
+  justify-content: space-between;
   background: lightblue;
-  font-family: Roboto Mono;
+  font-family: 'Spartan', sans-serif !important;
   font-size: 18px;
   font-weight: 700;
   text-align: left;
   margin: 5px;
+  height: 25px;
+  padding: 12px;
 }
diff --git a/src/app/items/item-list/item-list.component.html b/src/app/items/item-list/item-list.component.html
index 4bfd447..240964b 100644
--- a/src/app/items/item-list/item-list.component.html
+++ b/src/app/items/item-list/item-list.component.html
@@ -1,76 +1,93 @@
 <div *ngIf="items.length > 0">
 	<div class="availableItems" >
 		Available Items:
+		<button mat-raised-button 
+				class="buttons-class"
+				(click)="openDialog()">
+			<mat-icon class="icon">
+				add
+			</mat-icon>
+			Add item
+		</button>
+
 	</div>
-	<div class="card" *ngFor="let item of itemsUpdate | async">
-		<mat-card>
-			<table cellspacing="0" width="100%" >
-				<tr>
-					<td style="font-family: Roboto Mono;
-							   font-size: 16px;
-							   font-weight: 700;
-							   height: 20px;">
-					{{item.name}}
-					</td>
-					<td></td>	
-				</tr>
-				<tr>
-					<td style="font-family: Roboto Mono;
-							   font-size: 16px;
-							   font-weight: 400;
-							   height: 20px;">
-					    {{item.description}}
-				    </td>
-				    <td>
-						<div class="rv_price" 
-						     *ngIf="!owner.zats">
-							<img class="icon" 
-								 src="/assets/zec_rv.png" 
-								 height="16px">
-							{{(item.cost/zecPrice) | number: '1.08'}}
-							[{{item.cost | number: '1.02' | currency: getCurrency() }}]    
-						</div>
-						<p class="rv_price" 
-						   *ngIf="owner.zats"> 
-						   &#x24e9;{{(item.cost/zecPrice)*100000000 | number: '1.0-0'}}
-						</p>
-					</td>
-				</tr>
-			</table>
-			<mat-card-actions>
-				<table cellspacing="0" width="100%">
+	<div style="display: block;
+				overflow-y: auto;
+				height: 500px;">
+		<div class="card" *ngFor="let item of itemsUpdate | async">
+			<mat-card>
+				<table cellspacing="0" width="100%" >
 					<tr>
-						<td>
-							<button mat-icon-button class="icons" (click)="edit(item._id!)">
-								<mat-icon inline=true>edit</mat-icon>
-							</button>
-							<button mat-icon-button class="icons" (click)="delete(item._id!)">
-								<mat-icon inline=true>delete</mat-icon>
-							</button>
+						<td style="font-family: Roboto Mono;
+								   font-size: 16px;
+								   font-weight: 700;
+								   height: 20px;">
+						{{item.name}}
 						</td>
-						<td align="right">
-							<button mat-raised-button 
-									color="primary" 
-									class="buttons-class-cart" 
-									(click)="addToOrder(item._id!)">
-								<mat-icon [inline]="true">
-									shopping_cart
-								</mat-icon>
-							</button>
+						<td></td>	
+					</tr>
+					<tr>
+						<td style="font-family: Roboto Mono;
+								   font-size: 16px;
+								   font-weight: 400;
+								   height: 20px;">
+						    {{item.description}}
+					    </td>
+					    <td>
+							<div class="rv_price" 
+							     *ngIf="!owner.zats">
+								<img class="icon" 
+									 src="/assets/zec_rv.png" 
+									 height="16px">
+								{{(item.cost/zecPrice) | number: '1.08'}}
+								[{{item.cost | number: '1.02' | currency: getCurrency() }}]    
+							</div>
+							<p class="rv_price" 
+							   *ngIf="owner.zats"> 
+							   &#x24e9;{{(item.cost/zecPrice)*100000000 | number: '1.0-0'}}
+							</p>
 						</td>
 					</tr>
 				</table>
-			</mat-card-actions>
-		</mat-card>
-	</div>
+				<mat-card-actions>
+					<table cellspacing="0" width="100%">
+						<tr>
+							<td>
+								<button mat-icon-button class="icons" (click)="edit(item._id!)">
+									<mat-icon inline=true>edit</mat-icon>
+								</button>
+								<button mat-icon-button class="icons" (click)="delete(item._id!)">
+									<mat-icon inline=true>delete</mat-icon>
+								</button>
+							</td>
+							<td align="right">
+								<button mat-raised-button 
+										color="primary" 
+										class="buttons-class-cart" 
+										(click)="addToOrder(item._id!)">
+									<mat-icon [inline]="true">
+										shopping_cart
+									</mat-icon>
+								</button>
+							</td>
+						</tr>
+					</table>
+				</mat-card-actions>
+			</mat-card>
+		</div>
+	</div>	
 </div>
-<p *ngIf = "items.length <= 0">No items yet!</p>
+<div *ngIf = "items.length <= 0">
+	<div class="availableItems" >
+		No items yet!
+		<button mat-raised-button 
+				class="buttons-class"
+				(click)="openDialog()">
+			<mat-icon class="icon">
+				add
+			</mat-icon>
+			Add item
+		</button>
+	</div>
+</div>	
 <br>
-<button class="text" 
-		mat-raised-button 
-		(click)="openDialog()">
-	<mat-icon class="icon">
-		add
-	</mat-icon>
-	Add item
-</button>
diff --git a/src/app/items/item-list/item-list.component.ts b/src/app/items/item-list/item-list.component.ts
index 8a42705..32e249c 100644
--- a/src/app/items/item-list/item-list.component.ts
+++ b/src/app/items/item-list/item-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Input, Inject, Component, OnInit } from '@angular/core';
 import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
 
 import { faCartShopping } from '@fortawesome/free-solid-svg-icons';
@@ -11,9 +11,10 @@ import { UserService } from '../../user.service';
 import { ItemService } from '../items.service';
 import { OrderService} from '../../order/order.service';
 import { ItemCreateComponent } from '../item-create/item-create.component';
+import { ItemEditComponent } from '../item-edit/item-edit.component';
 import { ItemDeleteComponent } from '../item-delete/item-delete.component';
 import { ItemAddComponent } from '../item-add/item-add.component';
-
+import { NotifierService } from '../../notifier.service';
 
 @Component({
 	selector: 'app-item-list',
@@ -64,18 +65,19 @@ export class ItemListComponent implements OnInit{
 		userService: UserService,
 		public orderService: OrderService,
 		public fullnodeService: FullnodeService,
-		private dialog: MatDialog
-	) {
-		this.ownerUpdate = userService.ownerUpdate;
-		this.itemsUpdate = itemService.itemsUpdated;
-		this.ownerUpdate.subscribe((owner) => {
-			this.owner = owner;
-			itemService.getItems(this.owner.address);
-			this.itemsUpdate.subscribe((items) => {
-				this.items = items;
+		private dialog: MatDialog,
+		private notifierService: NotifierService )
+	{
+			this.ownerUpdate = userService.ownerUpdate;
+			this.itemsUpdate = itemService.itemsUpdated;
+			this.ownerUpdate.subscribe((owner) => {
+				this.owner = owner;
+				itemService.getItems(this.owner.address);
+				this.itemsUpdate.subscribe((items) => {
+					this.items = items;
+				});
 			});
-		});
-		this.zecPrice = 1;
+			this.zecPrice = 1;
 	}
 
 	ngOnInit(){
@@ -97,6 +99,9 @@ export class ItemListComponent implements OnInit{
 			if(val != null) {
 				var item:Item = {_id: '', name: val.name, description: val.description, cost: val.cost, owner: this.owner.address};
 				this.itemService.addItem(item);
+				this.notifierService
+				    .showNotification("Item successfully created!",
+			    	              "Close","success");
 			}
 			this.itemService.getItems(this.owner.address);
 			this.itemsUpdate.subscribe((items) => {
@@ -115,7 +120,7 @@ export class ItemListComponent implements OnInit{
 		dialogConfig.autoFocus = true;
 		dialogConfig.data = item;
 
-		const dialogRef = this.dialog.open(ItemCreateComponent, dialogConfig);
+		const dialogRef = this.dialog.open(ItemEditComponent, dialogConfig);
 		dialogRef.afterClosed().subscribe((val) => {
 			if (val != null) {
 				var editItem: Item = {
@@ -128,7 +133,10 @@ export class ItemListComponent implements OnInit{
 				//console.log('Edit:', editItem);
 				this.itemService.addItem(editItem).subscribe((response) => {
 					this.itemService.getItems(this.owner.address);
-				});;
+				});
+				this.notifierService
+				    .showNotification("Item information updated!!",
+				    	              "Close","success");
 			}
 			this.itemService.getItems(this.owner.address);
 		});
diff --git a/src/app/listorders/listorders.component.css b/src/app/listorders/listorders.component.css
index 0ef4229..5495dd0 100644
--- a/src/app/listorders/listorders.component.css
+++ b/src/app/listorders/listorders.component.css
@@ -110,6 +110,12 @@ img.icon{
 
 .minibutton {
 	font-family: 'Spartan', sans-serif;
+	font-size: 12px;
+	background:  #ff5722;
+	color: white;
+	height: 24px;
+	line-height: 20px;
+	padding: 2px;
 }
 
 .spacer {
diff --git a/src/app/listorders/listorders.component.html b/src/app/listorders/listorders.component.html
index be4a866..67c6eb8 100644
--- a/src/app/listorders/listorders.component.html
+++ b/src/app/listorders/listorders.component.html
@@ -122,7 +122,11 @@
 				</tr>
 			</tbody>
 		</table>
-		<div align="center">
+		<div style="display: flex;
+							  justify-content: space-between;
+							  padding-left: 20%;
+							  padding-right: 20%;
+							  margin-top: 10px;">
 			<span>
 				<button mat-stroked-button class="minibutton" color="primary" (click)="invoice(order)">Invoice</button>
 			</span>
diff --git a/src/app/order/order.component.css b/src/app/order/order.component.css
index ac3379b..27c659b 100644
--- a/src/app/order/order.component.css
+++ b/src/app/order/order.component.css
@@ -12,7 +12,7 @@ img.icon{
 }
 
 .noOrderMsg {
-	font-family: Roboto Mono;
+	font-family: 'Roboto Mono';
   font-size: 20px;
   font-weight: 700;
   margin:  10px; 
@@ -21,7 +21,7 @@ img.icon{
 }
 
 .newOrder {
-	font-family:  Roboto Mono !important;
+	font-family:  'Roboto Mono' !important;
 }
 
 .newOrderTitle1 {
@@ -78,7 +78,7 @@ img.icon{
 
 .availableItems{
   background: lightblue;
-  font-family: Roboto Mono;
+  font-family: 'Roboto Mono';
   font-size: 18px;
   font-weight: 700;
   text-align: left;