diff --git a/src/app/items/item-list/item-list.component.css b/src/app/items/item-list/item-list.component.css
index 652f03a..7cf4cfa 100644
--- a/src/app/items/item-list/item-list.component.css
+++ b/src/app/items/item-list/item-list.component.css
@@ -36,7 +36,7 @@ p.price{
 }
 
 .buttons-class-cart{
-  background-color: #ff4700;
+  background-color: #ff4722;
   color: white;
   font-size: 18px;
   font-weight: 700;
@@ -47,3 +47,12 @@ p.price{
   justify-content: center;
   cursor: pointer;
 }
+
+.availableItems{
+  background: lightblue;
+  font-family: Roboto Mono;
+  font-size: 18px;
+  font-weight: 700;
+  text-align: left;
+  margin: 5px;
+}
diff --git a/src/app/items/item-list/item-list.component.html b/src/app/items/item-list/item-list.component.html
index a693018..479a893 100644
--- a/src/app/items/item-list/item-list.component.html
+++ b/src/app/items/item-list/item-list.component.html
@@ -1,4 +1,7 @@
 <div *ngIf="items.length > 0">
+	<div class="availableItems" >
+		 Available Items:
+	</div>
 	<div class="card" *ngFor="let item of itemsUpdate | async">
 		<mat-card>
 				<table cellspacing="0" width="100%" >
diff --git a/src/app/order/order.component.css b/src/app/order/order.component.css
index 46a8fcd..948d13c 100644
--- a/src/app/order/order.component.css
+++ b/src/app/order/order.component.css
@@ -51,7 +51,7 @@ img.icon{
 }
 
 .buttons-class {
-  background-color: #ff4700;
+  background-color: #ff4722;
   color: white;
   font-weight: 700;
   height: 25px !important;
diff --git a/src/app/order/order.component.html b/src/app/order/order.component.html
index 43292e0..9a8b8a5 100644
--- a/src/app/order/order.component.html
+++ b/src/app/order/order.component.html
@@ -123,7 +123,3 @@
 -->
 </div>
 </mat-card>
-<div class="availableItems" >
-     Available Items:
-</div>
-
diff --git a/src/app/settings/settings.component.css b/src/app/settings/settings.component.css
index f808522..0a6340c 100644
--- a/src/app/settings/settings.component.css
+++ b/src/app/settings/settings.component.css
@@ -1,18 +1,18 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
+* {
+	font-family: Spartan;
+}
 
 .settings-title {
-	font-family: Roboto Mono;
-	background: #ff4700;
+	font-family: Spartan;
+	background: #ff4722;
 	color: white;
 	font-size: 30px;
-	font-weight: 700;
 	text-align: center;
-	margin-bottom: 15px;
-	height: 40px;
-	justify-content: center;
+	padding: 5px;
 }
 
 .settings_field {
 	width:  100%;
+	font-family: Spartan;
 }
 
diff --git a/src/app/viewer/viewer.component.css b/src/app/viewer/viewer.component.css
index a077015..87763db 100644
--- a/src/app/viewer/viewer.component.css
+++ b/src/app/viewer/viewer.component.css
@@ -17,6 +17,8 @@
     align-items: center;
     margin-top: 12px;
     margin-bottom: 12px;
+    font-weight: 500;
+    color: white;
 }
 
 .small{
diff --git a/src/app/viewer/viewer.component.html b/src/app/viewer/viewer.component.html
index 0fd0052..7410e98 100644
--- a/src/app/viewer/viewer.component.html
+++ b/src/app/viewer/viewer.component.html
@@ -10,22 +10,15 @@
 		</div>
 	</div>
 	<div class="main-buttons">
-		<button mat-raised-button 
-		        style="background: #ff4700;
-		               font-weight: 700;
-		        	   color: white;" 
+		<button mat-raised-button color="primary"
 		        [routerLink]="['/orders']">
 		   View Orders
 		</button>
-		<button mat-raised-button 
-		        style="background: #ff4700;
-		        	   color: white;" 
+		<button mat-raised-button color="primary"
 		        class="text" (click)="openSettings()">
 			 <mat-icon class="icon">manage_accounts</mat-icon>
 		</button>
-		<a mat-raised-button 
-	       style="background: #ff4700;
-	              color: white;" 
+		<a mat-raised-button color="primary" 
 		   href="https://zgo.cash/" 
 		   target="_blank" 
 		   rel="noopener noreferrer">