diff --git a/src/app/app.component.html b/src/app/app.component.html
index 50992d577732698b7abe292588d8f07e5ed3f2e5..bd9c9f7af6f6b446017522f6f1345cceff652d18 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -2,20 +2,19 @@
   <ion-split-pane contentId="main-content">
     <ion-menu contentId="main-content" type="overlay" *ngIf="restService.isUserLoggedIn && !restService.isLoginPage">
       <ion-header>
-        <ion-toolbar>
-          <ion-title>Menu</ion-title>
-         
+        <ion-toolbar color="awPrimary">
+          <ion-title>AWADO</ion-title>
           <div class="ion-text">
-           Welcome , {{userService.userDetails.username}}
+            {{"Welcome, " + (userService.userDetails.username || "Guest")}}
           </div>
         </ion-toolbar>
       </ion-header>
       <ion-content>
         <ion-list>
           <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
-            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
-              <ion-icon slot="start" [name]="p.icon"></ion-icon>
-              <ion-label>
+            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" routerLinkActive="active-link">
+              <ion-icon color="awPrimary" slot="start" [name]="p.icon"></ion-icon>
+              <ion-label color="awPrimary">
                 {{p.title}}
               </ion-label>
             </ion-item>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 719b0e9390584d359e8bdb3de53ab50aa0109c2f..8351a27a06066bc147d550144d9e24ae91b7b5b3 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,8 +1,19 @@
 .ion-text{
-    font-size: small;
-    color:black;
-    font-weight: bold;
-    margin-left: 20px;
-    margin-top: 3px;
-  }
- 
\ No newline at end of file
+  font-weight: 400;
+  margin-left: 20px;
+  margin-top: 8px;
+}
+
+// ion-label, ion-icon{
+//   color: #364f6b!important;
+// }
+
+ion-label{
+  font-weight: 500;
+}
+
+ion-toolbar{
+  padding-top: 10px!important;
+  padding-bottom: 10px!important;
+  color: #f5f5f5;
+}
\ No newline at end of file
diff --git a/src/app/feedback/feedback.page.html b/src/app/feedback/feedback.page.html
index 64de9dcf52b09661c792d7d8f8614c15c6541657..e128bf5ec64f337ca03916eae9d4b1b22dccddb5 100644
--- a/src/app/feedback/feedback.page.html
+++ b/src/app/feedback/feedback.page.html
@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="awPrimary">
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
diff --git a/src/app/help-line/help-line.page.html b/src/app/help-line/help-line.page.html
index 64bdbf7d67da62edc470d0ec53aa23001b1e92b5..8c99c39b9c065ee33243338d804c19ae87d2657f 100644
--- a/src/app/help-line/help-line.page.html
+++ b/src/app/help-line/help-line.page.html
@@ -1,5 +1,5 @@
  <ion-header>
-    <ion-toolbar>
+    <ion-toolbar color="awPrimary">
       <ion-buttons slot="start">
         <ion-menu-button></ion-menu-button>
       </ion-buttons>
diff --git a/src/app/hirebike/hirebike.page.html b/src/app/hirebike/hirebike.page.html
index 84899f28266f0e0b47b91b7b8098247d71e8557a..ee3bafd27c04bebb92417550606b6a9fb7de854b 100644
--- a/src/app/hirebike/hirebike.page.html
+++ b/src/app/hirebike/hirebike.page.html
@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="awPrimary">
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 2dbc223b3dff88ad20018df3858fe593b9c3b877..5ca1ddd45a32556136deeeb423e7e8aacae1bec7 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -1,12 +1,12 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="awPrimary">
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
     <ion-title slot="start">
       Home
     </ion-title>
-    <ion-item class="checkbox-wrapper">
+    <ion-item color="awPrimary" slot="end">
       <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
     </ion-item>
   </ion-toolbar>
diff --git a/src/app/myreservation/myreservation.page.html b/src/app/myreservation/myreservation.page.html
index 5ce253d44f9b082ced093b1c6f81be3b7e7b08f6..188c2d990bf482067c89ae8706fd20108d3051e3 100644
--- a/src/app/myreservation/myreservation.page.html
+++ b/src/app/myreservation/myreservation.page.html
@@ -1,5 +1,5 @@
 <ion-header>
-  <ion-toolbar>
+  <ion-toolbar color="awPrimary">
     <ion-buttons slot="start">
       <ion-menu-button></ion-menu-button>
     </ion-buttons>
diff --git a/src/app/ridehistory/ridehistory.page.html b/src/app/ridehistory/ridehistory.page.html
index 14516e312d296107e828dc6dfa3f51672f232d58..5b8b5750765b049ef8b98274f1e30d5cea357bc8 100644
--- a/src/app/ridehistory/ridehistory.page.html
+++ b/src/app/ridehistory/ridehistory.page.html
@@ -1,5 +1,5 @@
 <ion-header>
-    <ion-toolbar>
+    <ion-toolbar color="awPrimary">
       <ion-buttons slot="start">
         <ion-menu-button></ion-menu-button>
       </ion-buttons>
diff --git a/src/global.scss b/src/global.scss
index d854de84ad51a90443ccfe6396cc2a26ee783959..924ad9a497198bbb4c800a3699aa9203a5b6dfa7 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -10,6 +10,7 @@
  */
 
 /* Core CSS required for Ionic components to work properly */
+@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700|Roboto:300,400,500,700&display=swap');
 @import "~@ionic/angular/css/core.css";
 
 /* Basic CSS for apps built with Ionic */
@@ -24,3 +25,7 @@
 @import "~@ionic/angular/css/text-alignment.css";
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
+
+:root {
+    --ion-font-family: 'Montserrat', cursive;
+}
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 4b39b39fd68ab2d284dc2339cc740d18b0b80c12..f187511c35ad97ba95d72e36de710f06b76519bc 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -52,7 +52,8 @@
   --ion-color-danger-tint: #f25454;
 
   /** dark **/
-  --ion-color-dark: #222428;
+  //--ion-color-dark: #222428;
+  --ion-color-dark: #364f6b;
   --ion-color-dark-rgb: 34, 34, 34;
   --ion-color-dark-contrast: #ffffff;
   --ion-color-dark-contrast-rgb: 255, 255, 255;
@@ -74,4 +75,24 @@
   --ion-color-light-contrast-rgb: 0, 0, 0;
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
+  
+}
+
+/** Awado Specific colors **/
+:root {
+  --ion-color-awPrimary: #364f6b;
+  --ion-color-awPrimary-rgb: 54,79,107;
+  --ion-color-awPrimary-contrast: #ffffff;
+  --ion-color-awPrimary-contrast-rgb: 255,255,255;
+  --ion-color-awPrimary-shade: #30465e;
+  --ion-color-awPrimary-tint: #4a617a;
+}
+
+.ion-color-awPrimary {
+  --ion-color-base: var(--ion-color-awPrimary);
+  --ion-color-base-rgb: var(--ion-color-awPrimary-rgb);
+  --ion-color-contrast: var(--ion-color-awPrimary-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-awPrimary-contrast-rgb);
+  --ion-color-shade: var(--ion-color-awPrimary-shade);
+  --ion-color-tint: var(--ion-color-awPrimary-tint);
 }