diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c85d5d200ce231e3518a953ca235cbbac5053896..d3941421c3aa9bc5122e740c5a34c005febd1a58 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,34 +1,36 @@
-import { NgModule } from '@angular/core';
-import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-
-const routes: Routes = [
-  {
-    path: '',
-    redirectTo: 'login',
-    pathMatch: 'full'
-  },
-  {
-    path: 'home',
-    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
-  },
-  {
-    path: 'list',
-    loadChildren: () => import('./list/list.module').then(m => m.ListPageModule)
-  },
-  {
-    path: 'login',
-    loadChildren: () => import('./auth/login/login.module').then( m => m.LoginPageModule)
-  },
  {
+import { NgModule } from '@angular/core';
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'login',
+    pathMatch: 'full'
+  },
+  {
+    path: 'home',
+    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
+  },
+  {
+    path: 'list',
+    loadChildren: () => import('./list/list.module').then(m => m.ListPageModule)
+  },
+  {
+    path: 'login',
+    loadChildren: () => import('./auth/login/login.module').then( m => m.LoginPageModule)
+  },
+  {
     path: 'register',
     loadChildren: () => import('./auth/register/register.module').then( m => m.RegisterPageModule)
   }
+  
+
+];
 
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
-  ],
-  exports: [RouterModule]
-})
-export class AppRoutingModule {}
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
+  ],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {}
diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 0b5ff1873e0b6257049db1509eae6f31b875e470..59baf6927de11e15f88a2e24ccf7b344d6b3ccdf 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -80,22 +80,22 @@
             </ion-col>
           </ion-row>
           <ion-row>
-              <ion-col>
-                 Bike Location
-              </ion-col>
-              <ion-col>
-                  {{selectedBike.address}}
-              </ion-col>
-            </ion-row>
-            <ion-row>
-                <ion-col>
-                   Bike Distance
-                </ion-col>
-                <ion-col>
-                    {{selectedBike.distance + "m"}}
-                </ion-col>
-              </ion-row>
+            <ion-col>
+              Bike Location
+            </ion-col>
+            <ion-col>
+              {{selectedBike.address}}
+            </ion-col>
+          </ion-row>
           <ion-row>
+            <ion-col>
+              Bike Distance
+            </ion-col>
+            <ion-col>
+              {{selectedBike.distance + "m"}}
+            </ion-col>
+          </ion-row>
+          <ion-row  *ngIf="!isBikeReserved">
             <ion-col>
               <ion-button size="medium" expand="block" (click)="reserveBike()">Reserve</ion-button>
             </ion-col>
@@ -103,6 +103,14 @@
               <ion-button size="medium" expand="block" (click)="navigatetoBike()">Navigate</ion-button>
             </ion-col>
           </ion-row>
+          <ion-row  *ngIf="isBikeReserved">
+              <ion-col>
+                <ion-button size="medium" expand="block" (click)="hireBike()">Hire</ion-button>
+              </ion-col>
+              <ion-col>
+                <ion-button size="medium" expand="block" (click)="cancelReservation()">Cancel Reservation</ion-button>
+              </ion-col>
+            </ion-row>
         </ion-grid>
       </div>
     </div>
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 16fd7c2dbf52b2309fa4b0f87d244c9d6bd0fb0e..1df890bff5829f2038e31a5d0e5c6bae181c9597 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -4,6 +4,7 @@ import { RestService } from '../rest.service';
 import { Observable } from 'rxjs';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Storage } from '@ionic/storage';
+import { ToastService } from '../services/toast.service';
 
 
 declare var H: any;
@@ -24,7 +25,8 @@ export class HomePage {
 
   public is3DChecked = false;
   public isDetailsVisible = false;
-  public selectedBike ={};
+  public selectedBike ={id: 0};
+  public isBikeReserved= false;
 
   public tempArr = [1, 2];
   public locationArr = [{ lat: 48.778409, lng: 9.179252 },
@@ -45,7 +47,8 @@ export class HomePage {
   constructor(private geolocation: Geolocation,
     public restService: RestService,
     public httpClient: HttpClient,
-    private storage: Storage) {
+    private storage: Storage,
+    private toastService: ToastService) {
 
     this.platform = new H.service.Platform({
       'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
@@ -229,7 +232,38 @@ export class HomePage {
   showBikeDetails(bike) {
 
     this.selectedBike=bike;
+    this.selectedBike.id=bike.id;
     this.isDetailsVisible = true;
   }
+  reserveBike() {
+    //this.selectedBike=bikeS;
+    this.storage.get('token').then((token) => {
+      let url = 'http://193.196.52.237:8081/reservation' + '?bikeId=' + this.selectedBike.id;
+      const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
+      this.bikeApi = this.httpClient.get(url, { headers });
+      this.bikeApi.subscribe((resp) => {
+        console.log('my data: ', resp);
+        this.isBikeReserved=true;
+        this.toastService.showToast("Reservation Successful!");
+      }, (error) => {
+        console.log(error)
+        this.toastService.showToast("Only one bike may be reserved or rented at a time")
+      });
+    });
+ 
+
+  }
+  cancelReservation() {
+    this.storage.get('token').then((token) => {
+      let url = 'http://193.196.52.237:8081/reservation' + '?bikeId=' + this.selectedBike.id;
+      const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
+      this.bikeApi = this.httpClient.delete(url, { headers });
+      this.bikeApi.subscribe((resp) => {
+        console.log('my data: ', resp);
+        this.isBikeReserved=false;
+      }, (error) => console.log(error));
+    });
+
+  }
   
 }