diff --git a/src/app/models/auth.ts b/src/app/models/auth.ts
index b98d3ad..f7c05f4 100644
--- a/src/app/models/auth.ts
+++ b/src/app/models/auth.ts
@@ -28,29 +28,28 @@ export interface LoginUserCred {
 export interface UserRegResponse {
   id: number;
   user: {
-    firstName: string;
-    lastName: string;
+    fullName: string;
     email: string;
+    password: string;
   };
   position: {
     longitude: string;
     latitude: string;
   };
-  type: string;
-  firstLineOfAddress: string;
-  secondLineOfAddress: string;
-  country: string;
-  placeId: string;
-  postCode: string;
+  type: UserType;
+  firstLineOfAddress?: string;
+  secondLineOfAddress?: string;
+  placeId?: string;
+  postCode?: string;
   city: string;
+  country: string;
   phone: string;
   crisis: number;
 }
 
 export interface UserRegData {
   user: {
-    firstName: string;
-    lastName: string;
+    fullName: string;
     email: string;
     password: string;
   };
@@ -59,10 +58,10 @@ export interface UserRegData {
     latitude: string;
   };
   type: UserType;
-  firstLineOfAddress: string;
-  secondLineOfAddress: string;
-  placeId: string;
-  postCode: string;
+  firstLineOfAddress?: string;
+  secondLineOfAddress?: string;
+  placeId?: string;
+  postCode?: string;
   city: string;
   country: string;
   crisis: number;
diff --git a/src/app/pages/user-registration/user-registration.page.html b/src/app/pages/user-registration/user-registration.page.html
index 3e787da..debdbe0 100644
--- a/src/app/pages/user-registration/user-registration.page.html
+++ b/src/app/pages/user-registration/user-registration.page.html
@@ -1,47 +1,56 @@
-<ion-header translucent class="hide-lg hide-xl">
-  <ion-toolbar fixed [color]="userThemeColorPrimary">
-    <ion-buttons slot="start">
-      <ion-menu-button autoHide="false"></ion-menu-button>
-      <ion-title>Quarantine Help</ion-title>
-    </ion-buttons>
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-title>
+      <ion-row class="title-row ion-justify-content-start ion-align-items-center title">
+        <ion-back-button mode="md" icon="chevron-back"></ion-back-button>
+        <ion-text class="about">
+          <h1>Register</h1>
+        </ion-text>
+      </ion-row>
+    </ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding ion-margin">
-  <ion-grid class="ion-padding top-spacer">
-    <ion-segment [(ngModel)]="userType">
-      <ion-segment-button value="AF">
-        <ion-label>I'm Quarantined</ion-label>
-      </ion-segment-button>
-      <ion-segment-button value="HL">
-        <ion-label>I Volunteer</ion-label>
-      </ion-segment-button>
-    </ion-segment>
+<ion-content class="ion-padding ion-margin ion-justify-content-center">
+  <ion-grid class="ion-padding top-spacer ion-justify-content-center">
+
+    <!-- <ion-label>Quarantined</ion-label> -->
+
+    <ion-row class="ion-justify-content-center">
+      <h4>
+        {{ userType === 'AF' ? 'Volunteer' : 'Quarantined'}}
+      </h4>
+    </ion-row>
 
     <form [formGroup]="regForm">
       <ion-row class="ion-justify-content-center">
-        <ion-col size-md="2" size-lg="2">
+        <ion-col size-md="4" size-lg="4" size-xs="12">
           <ion-item>
-            <ion-label color="medium" position="floating">First Name</ion-label>
-            <ion-input required formControlName="firstName"></ion-input>
+            <ion-label color="medium-text" position="floating">Full Name</ion-label>
+            <ion-input required formControlName="fullName"></ion-input>
           </ion-item>
           <ion-item lines="none" class="formInvalid"
-            *ngIf="(regForm.get('firstName').invalid && (regForm.get('firstName').dirty || regForm.get('firstName').touched))">
-            <div *ngIf="regForm.get('firstName').errors.required">
+            *ngIf="(regForm.get('fullName').invalid && (regForm.get('fullName').dirty || regForm.get('fullName').touched))">
+            <div *ngIf="regForm.get('fullName').errors.required">
               First Name is required.
             </div>
           </ion-item>
         </ion-col>
+      </ion-row>
 
-        <ion-col size-md="2" size-lg="2">
+      <ion-row class="ion-justify-content-center">
+        <ion-col size-md="4" size-lg="4" size-xs="12">
           <ion-item>
-            <ion-label color="medium" position="floating">Last Name</ion-label>
-            <ion-input required formControlName="lastName"></ion-input>
+            <ion-label color="medium-text" position="floating">Email address </ion-label>
+            <ion-input required formControlName="email" type="email"></ion-input>
           </ion-item>
           <ion-item lines="none" class="formInvalid"
-            *ngIf="(regForm.get('lastName').invalid && (regForm.get('lastName').dirty || regForm.get('lastName').touched))">
-            <div *ngIf="regForm.get('lastName').errors.required">
-              Last Name is required.
+            *ngIf="(regForm.get('email').invalid && (regForm.get('email').dirty || regForm.get('email').touched))">
+            <div *ngIf="regForm.get('email').errors.required">
+              Email address is required.
+            </div>
+            <div *ngIf="regForm.get('email').errors.email">
+              Please enter a valid email.
             </div>
           </ion-item>
         </ion-col>
@@ -50,7 +59,50 @@
       <ion-row class="ion-justify-content-center">
         <ion-col size-md="4" size-lg="4" size-xs="12">
           <ion-item>
-            <ion-label color="medium" position="floating"> Address Line </ion-label>
+            <ion-label color="medium-text" position="floating">Phone Number </ion-label>
+            <ion-input required formControlName="phoneNumber" type="tel"></ion-input>
+          </ion-item>
+          <ion-item lines="none" class="formInvalid"
+            *ngIf="(regForm.get('phoneNumber').invalid && (regForm.get('phoneNumber').dirty || regForm.get('phoneNumber').touched))">
+            <div *ngIf="regForm.get('phoneNumber').errors.required">
+              Phone Number is required.
+            </div>
+            <div *ngIf="regForm.get('phoneNumber').errors.minlength">
+              Please enter at least 8 digits.
+            </div>
+            <div *ngIf="regForm.get('phoneNumber').errors.maxlength">
+              Number exceeded maximum length.
+            </div>
+          </ion-item>
+        </ion-col>
+      </ion-row>
+
+      <ion-row class="ion-justify-content-center">
+        <ion-col size-md="4" size-lg="4" size-xs="12">
+          <ion-item>
+            <ion-label color="medium-text" position="floating">Password </ion-label>
+            <ion-input [type]="passwordIcon === 'eye'? 'password':'text'" required formControlName="password"
+              type="password"></ion-input>
+            <ion-icon slot="end" [name]="passwordIcon" (click)="togglePasswordVisibility()" color="medium"
+              class="ion-align-self-center">
+            </ion-icon>
+          </ion-item>
+          <ion-item lines="none" class="formInvalid"
+            *ngIf="(regForm.get('password').invalid && (regForm.get('password').dirty || regForm.get('password').touched))">
+            <div *ngIf="regForm.get('password').errors.required">
+              Password is required.
+            </div>
+            <div *ngIf="regForm.get('password').errors.minlength">
+              Please enter minimum 8 characters.
+            </div>
+          </ion-item>
+        </ion-col>
+      </ion-row>
+
+      <ion-row class="ion-justify-content-center">
+        <ion-col size-md="4" size-lg="4" size-xs="12">
+          <ion-item>
+            <ion-label color="medium-text" position="floating"> Address Line </ion-label>
             <ion-input required formControlName="address"></ion-input>
           </ion-item>
           <ion-list *ngIf="displayAddressSearchResult && addressResultList.length > 0" lines="none"
@@ -73,7 +125,7 @@
       <ion-row class="ion-justify-content-center">
         <ion-col size-md="4" size-lg="4" size-xs="12">
           <ion-item>
-            <ion-label color="medium" position="floating"> Post Code </ion-label>
+            <ion-label color="medium-text" position="floating"> Post Code </ion-label>
             <ion-input required formControlName="postCode"></ion-input>
           </ion-item>
           <ion-item lines="none" class="formInvalid"
@@ -88,7 +140,7 @@
       <ion-row class="ion-justify-content-center">
         <ion-col size-md="4" size-lg="4" size-xs="12">
           <ion-item>
-            <ion-label color="medium" position="floating"> City </ion-label>
+            <ion-label color="medium-text" position="floating"> City </ion-label>
             <ion-input required formControlName="city"></ion-input>
           </ion-item>
           <ion-item lines="none" class="formInvalid"
@@ -106,7 +158,7 @@
       <ion-row class="ion-justify-content-center">
         <ion-col size-md="4" size-lg="4" size-xs="12">
           <ion-item (click)="showCountrySearch()">
-            <ion-label color="medium" position="floating"> Country </ion-label>
+            <ion-label color="medium-text" position="floating"> Country </ion-label>
             <ion-input readonly="true" required formControlName="country"></ion-input>
           </ion-item>
           <ion-item *ngIf="displayCountrySearchResult" lines="none">
@@ -132,75 +184,18 @@
         </ion-col>
       </ion-row>
 
-      <ion-row class="ion-justify-content-center">
-        <ion-col size-md="4" size-lg="4" size-xs="12">
-          <ion-item>
-            <ion-label color="medium" position="floating">Email address </ion-label>
-            <ion-input required formControlName="email" type="email"></ion-input>
-          </ion-item>
-          <ion-item lines="none" class="formInvalid"
-            *ngIf="(regForm.get('email').invalid && (regForm.get('email').dirty || regForm.get('email').touched))">
-            <div *ngIf="regForm.get('email').errors.required">
-              Email address is required.
-            </div>
-            <div *ngIf="regForm.get('email').errors.email">
-              Please enter a valid email.
-            </div>
-          </ion-item>
-        </ion-col>
-      </ion-row>
-
-      <ion-row class="ion-justify-content-center">
-        <ion-col size-md="4" size-lg="4" size-xs="12">
-          <ion-item>
-            <ion-label color="medium" position="floating">Phone Number </ion-label>
-            <ion-input required formControlName="phoneNumber" type="tel"></ion-input>
-          </ion-item>
-          <ion-item lines="none" class="formInvalid"
-            *ngIf="(regForm.get('phoneNumber').invalid && (regForm.get('phoneNumber').dirty || regForm.get('phoneNumber').touched))">
-            <div *ngIf="regForm.get('phoneNumber').errors.required">
-              Phone Number is required.
-            </div>
-            <div *ngIf="regForm.get('phoneNumber').errors.minlength">
-              Please enter at least 8 digits.
-            </div>
-            <div *ngIf="regForm.get('phoneNumber').errors.maxlength">
-              Number exceeded maximum length.
-            </div>
-          </ion-item>
-        </ion-col>
-      </ion-row>
-
-      <ion-row class="ion-justify-content-center">
-        <ion-col size-md="4" size-lg="4" size-xs="12">
-          <ion-item>
-            <ion-label color="medium" position="floating">Password </ion-label>
-            <ion-input [type]="passwordIcon === 'eye'? 'password':'text'" required formControlName="password"
-              type="password"></ion-input>
-            <ion-icon slot="end" [name]="passwordIcon" (click)="togglePasswordVisibility()" color="medium"
-              class="ion-align-self-center">
-            </ion-icon>
-          </ion-item>
-          <ion-item lines="none" class="formInvalid"
-            *ngIf="(regForm.get('password').invalid && (regForm.get('password').dirty || regForm.get('password').touched))">
-            <div *ngIf="regForm.get('password').errors.required">
-              Password is required.
-            </div>
-            <div *ngIf="regForm.get('password').errors.minlength">
-              Please enter minimum 8 characters.
-            </div>
-          </ion-item>
-        </ion-col>
-      </ion-row>
-
-      <ion-row class="ion-justify-content-center ion-padding-vertical">
+      <ion-row class="ion-justify-content-center ion-padding-top">
         <ion-col size-md="4" size-lg="3" size-xs="8">
-          <ion-button [color]="userThemeColorPrimary" shape="round" expand="full" size="default" fill="outline"
-            [disabled]="(regFormClean || !regForm.valid)" (click)="registerUser()">
+          <ion-button [color]="userThemeColorPrimary" shape="round" expand="full" size="default" fill="solid"
+            [disabled]="(regFormClean || !regForm.valid)" (click)="registerUser()" class="submit-button">
             Register
           </ion-button>
         </ion-col>
       </ion-row>
+
+      <ion-row class="ion-justify-content-center ion-padding-vertical">
+        <p>Already have an account? <a> Log in</a></p>
+      </ion-row>
     </form>
   </ion-grid>
 </ion-content>
diff --git a/src/app/pages/user-registration/user-registration.page.scss b/src/app/pages/user-registration/user-registration.page.scss
index 10a3a44..6f7c526 100644
--- a/src/app/pages/user-registration/user-registration.page.scss
+++ b/src/app/pages/user-registration/user-registration.page.scss
@@ -1,3 +1,29 @@
+ion-toolbar {
+  margin-top: 8vh;
+}
+
+h4 {
+  margin: 0;
+  padding: 0.5rem 2.5rem;
+  background-color: #e9e9e9;
+}
+
+form {
+  margin: 10vw;
+}
+
+.about {
+  h1 {
+    margin: 0;
+  }
+}
+
+.submit-button {
+  font-weight: bolder;
+  text-transform: none;
+  font-size: medium;
+}
+
 // md upto lg devices
 @media (min-width: 768px) {
   ion-img {
@@ -38,6 +64,7 @@ ion-list {
   .search-list {
     background: var(--ion-color-light-tint);
   }
+
   max-height: 25vh;
   overflow-y: scroll;
   background-color: var(--ion-color-medium-shade);
diff --git a/src/app/pages/user-registration/user-registration.page.ts b/src/app/pages/user-registration/user-registration.page.ts
index 4ec4d1f..c09bb35 100644
--- a/src/app/pages/user-registration/user-registration.page.ts
+++ b/src/app/pages/user-registration/user-registration.page.ts
@@ -2,12 +2,14 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormControl, Validators, FormGroup } from '@angular/forms';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { UserType } from 'src/app/models/core-api';
 import { GeoLocationService } from 'src/app/shared/services/geo-location/geo-location.service';
 import { MiscService } from 'src/app/shared/services/misc/misc.service';
 import { HEREMapService } from 'src/app/shared/services/HERE-map/here-map.service';
 import { AuthService } from 'src/app/shared/services/auth/auth.service';
+
 import { LatLng } from '../../models/geo';
 import { UserRegData, UserRegResponse } from 'src/app/models/auth';
 import {
@@ -15,7 +17,6 @@ import {
   defaultUserType,
   defaultPrimaryColor,
 } from 'src/app/constants/core-api';
-import { filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import {
   countryList,
   isoCountry3To2Mapping,
@@ -23,12 +24,12 @@ import {
 import { UserThemeColorPrimary } from 'src/app/models/ui';
 
 interface UserAddress {
-  address: string;
+  address?: string;
   city: string;
   country: string;
-  countryCode: string;
-  postCode: string;
-  placeId: string;
+  countryCode?: string;
+  postCode?: string;
+  placeId?: string;
 }
 @Component({
   selector: 'app-user-registration',
@@ -68,8 +69,7 @@ export class UserRegistrationPage implements OnInit, OnDestroy {
     private route: ActivatedRoute
   ) {
     this.regForm = new FormGroup({
-      firstName: new FormControl('', [Validators.required]),
-      lastName: new FormControl('', [Validators.required]),
+      fullName: new FormControl('', [Validators.required]),
       address: new FormControl('', [
         Validators.required,
         Validators.minLength(3),
@@ -138,20 +138,11 @@ export class UserRegistrationPage implements OnInit, OnDestroy {
       this.regFormClean = false;
     });
 
-    // Provide user with instructions on filling the form.
-    this.miscService.presentAlert({
-      header: 'Info',
-      subHeader: 'Registration Options',
-      buttons: ['Ok'],
-      message: `Please select <strong>I'm Quarantined</strong> if you are in quarantine and require assistance from volunteers.
-      <br><br>You may continue in the <strong>I Volunteer</strong> tab otherwise.`,
-    });
-
     // Start the loading animation for getting GPS data
     this.miscService
       .presentLoadingWithOptions({
         duration: 0,
-        message: `Getting current location.`,
+        message: `Getting you location.`,
       })
       .then((onLoadSuccess) => {
         this.loadingAniGPSData = onLoadSuccess;
@@ -334,8 +325,7 @@ export class UserRegistrationPage implements OnInit, OnDestroy {
     };
 
     userData.user = {
-      firstName: this.regForm.get('firstName').value,
-      lastName: this.regForm.get('lastName').value,
+      fullName: this.regForm.get('fullName').value,
       email: this.regForm.get('email').value,
       password: this.regForm.get('password').value,
     };
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index e35f4aa..21eff92 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -3,35 +3,35 @@
 
 /** Ionic CSS Variables **/
 :root {
-  --ion-color-primaryAF: #F2CFCF;
+  --ion-color-primaryAF: #f2cfcf;
   --ion-color-primaryAF-rgb: 242, 207, 207;
   --ion-color-primaryAF-contrast: #000000;
   --ion-color-primaryAF-contrast-rgb: 0, 0, 0;
   --ion-color-primaryAF-shade: #d5b6b6;
   --ion-color-primaryAF-tint: #f3d4d4;
 
-  --ion-color-secondaryAF: #FC829A;
-  --ion-color-secondaryAF-rgb: 252,130,154;
+  --ion-color-secondaryAF: #fc829a;
+  --ion-color-secondaryAF-rgb: 252, 130, 154;
   --ion-color-secondaryAF-contrast: #ffffff;
-  --ion-color-secondaryAF-contrast-rgb: 0,0,0;
+  --ion-color-secondaryAF-contrast-rgb: 0, 0, 0;
   --ion-color-secondaryAF-shade: #de7288;
   --ion-color-secondaryAF-tint: #fc8fa4;
 
-  --ion-color-primaryHL: #B5E1EA;
+  --ion-color-primaryHL: #b5e1ea;
   --ion-color-primaryHL-rgb: 181, 225, 234;
   --ion-color-primaryHL-contrast: #000000;
   --ion-color-primaryHL-contrast-rgb: 0, 0, 0;
   --ion-color-primaryHL-shade: #9fc6ce;
   --ion-color-primaryHL-tint: #bce4ec;
 
-  --ion-color-secondaryHL: #8AD7E7;
+  --ion-color-secondaryHL: #8ad7e7;
   --ion-color-secondaryHL-rgb: 138, 215, 231;
   --ion-color-secondaryHL-contrast: #000000;
   --ion-color-secondaryHL-contrast-rgb: 0, 0, 0;
   --ion-color-secondaryHL-shade: #79bdcb;
   --ion-color-secondaryHL-tint: #96dbe9;
 
-  --ion-color-tertiary: #037DDB;
+  --ion-color-tertiary: #037ddb;
   --ion-color-tertiary-rgb: 3, 125, 219;
   --ion-color-tertiary-contrast: #ffffff;
   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
@@ -59,14 +59,14 @@
   --ion-color-danger-shade: #cf3c4f;
   --ion-color-danger-tint: #ed576b;
 
-  --ion-color-dark: #1C1C1C;
+  --ion-color-dark: #1c1c1c;
   --ion-color-dark-rgb: 28, 28, 28;
   --ion-color-dark-contrast: #ffffff;
   --ion-color-dark-contrast-rgb: 255, 255, 255;
   --ion-color-dark-shade: #191919;
   --ion-color-dark-tint: #333333;
 
-  --ion-color-medium: #E9E9E9;
+  --ion-color-medium: #e9e9e9;
   --ion-color-medium-rgb: 233, 233, 233;
   --ion-color-medium-contrast: #000000;
   --ion-color-medium-contrast-rgb: 0, 0, 0;
@@ -80,6 +80,13 @@
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
 
+  --ion-color-medium-text: #c0c0c0;
+  --ion-color-medium-text-rgb: 192, 192, 192;
+  --ion-color-medium-text-contrast: #000000;
+  --ion-color-medium-text-contrast-rgb: 0, 0, 0;
+  --ion-color-medium-text-shade: #a9a9a9;
+  --ion-color-medium-text-tint: #c6c6c6;
+
   --ion-font-family: Questrial;
 
   // --ion-text-color: blue;
@@ -88,40 +95,40 @@
 
 @media (prefers-color-scheme: dark) {
   /*
-   * Dark Colors
-   * -------------------------------------------
-   */
+  * Dark Colors
+  * -------------------------------------------
+  */
 
   body {
-    --ion-color-primaryAF: #F2CFCF;
+    --ion-color-primaryAF: #f2cfcf;
     --ion-color-primaryAF-rgb: 242, 207, 207;
     --ion-color-primaryAF-contrast: #000000;
     --ion-color-primaryAF-contrast-rgb: 0, 0, 0;
     --ion-color-primaryAF-shade: #d5b6b6;
     --ion-color-primaryAF-tint: #f3d4d4;
 
-    --ion-color-secondaryAF: #FC829A;
+    --ion-color-secondaryAF: #fc829a;
     --ion-color-secondaryAF-rgb: 252, 130, 154;
     --ion-color-secondaryAF-contrast: #000000;
     --ion-color-secondaryAF-contrast-rgb: 0, 0, 0;
     --ion-color-secondaryAF-shade: #de7288;
     --ion-color-secondaryAF-tint: #fc8fa4;
 
-    --ion-color-primaryHL: #B5E1EA;
+    --ion-color-primaryHL: #b5e1ea;
     --ion-color-primaryHL-rgb: 181, 225, 234;
     --ion-color-primaryHL-contrast: #000000;
     --ion-color-primaryHL-contrast-rgb: 0, 0, 0;
     --ion-color-primaryHL-shade: #9fc6ce;
     --ion-color-primaryHL-tint: #bce4ec;
 
-    --ion-color-secondaryHL: #8AD7E7;
+    --ion-color-secondaryHL: #8ad7e7;
     --ion-color-secondaryHL-rgb: 138, 215, 231;
     --ion-color-secondaryHL-contrast: #000000;
     --ion-color-secondaryHL-contrast-rgb: 0, 0, 0;
     --ion-color-secondaryHL-shade: #79bdcb;
     --ion-color-secondaryHL-tint: #96dbe9;
 
-    --ion-color-tertiary: #037DDB;
+    --ion-color-tertiary: #037ddb;
     --ion-color-tertiary-rgb: 3, 125, 219;
     --ion-color-tertiary-contrast: #ffffff;
     --ion-color-tertiary-contrast-rgb: 255, 255, 255;
@@ -149,14 +156,14 @@
     --ion-color-danger-shade: #cf3c4f;
     --ion-color-danger-tint: #ed576b;
 
-    --ion-color-dark: #1C1C1C;
+    --ion-color-dark: #1c1c1c;
     --ion-color-dark-rgb: 28, 28, 28;
     --ion-color-dark-contrast: #ffffff;
     --ion-color-dark-contrast-rgb: 255, 255, 255;
     --ion-color-dark-shade: #191919;
     --ion-color-dark-tint: #333333;
 
-    --ion-color-medium: #E9E9E9;
+    --ion-color-medium: #e9e9e9;
     --ion-color-medium-rgb: 233, 233, 233;
     --ion-color-medium-contrast: #000000;
     --ion-color-medium-contrast-rgb: 0, 0, 0;
@@ -170,13 +177,20 @@
     --ion-color-light-shade: #d7d8da;
     --ion-color-light-tint: #f5f6f9;
 
+    --ion-color-medium-text: #c0c0c0;
+    --ion-color-medium-text-rgb: 192, 192, 192;
+    --ion-color-medium-text-contrast: #000000;
+    --ion-color-medium-text-contrast-rgb: 0, 0, 0;
+    --ion-color-medium-text-shade: #a9a9a9;
+    --ion-color-medium-text-tint: #c6c6c6;
+
     --ion-font-family: Questrial;
   }
 
   /*
-   * iOS Dark Theme
-   * -------------------------------------------
-   */
+  * iOS Dark Theme
+  * -------------------------------------------
+  */
 
   .ios body {
     --ion-background-color: #000000;
@@ -253,7 +267,6 @@
   }
 }
 
-
 .ion-color-primaryAF {
   --ion-color-base: var(--ion-color-primaryAF);
   --ion-color-base-rgb: var(--ion-color-primaryAF-rgb);
@@ -290,8 +303,17 @@
   --ion-color-tint: var(--ion-color-secondaryHL-tint);
 }
 
+.ion-color-medium-text {
+  --ion-color-base: var(--ion-color-medium-text);
+  --ion-color-base-rgb: var(--ion-color-medium-text-rgb);
+  --ion-color-contrast: var(--ion-color-medium-text-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-medium-text-contrast-rgb);
+  --ion-color-shade: var(--ion-color-medium-text-shade);
+  --ion-color-tint: var(--ion-color-medium-text-tint);
+}
+
 @font-face {
   font-family: 'Questrial';
   src: url('../assets/fonts/Questrial-Regular.ttf');
   font-display: swap;
-}
\ No newline at end of file
+}