diff --git a/src/app/hirebike/hirebike.page.html b/src/app/hirebike/hirebike.page.html
index c3923a0687dcfec8831c2454f831bdb646d18642..cefa3a9a9ced8d9202ec6b0063ee6fbfecb0f2e0 100644
--- a/src/app/hirebike/hirebike.page.html
+++ b/src/app/hirebike/hirebike.page.html
@@ -46,14 +46,10 @@
     <div class="inner">
       <div class="button-container">
         <ion-grid>
-          <ion-row>
-            <ion-col>Any Problems?</ion-col>
-           
-          </ion-row>
           
           <ion-row>
             <ion-col>
-              <ion-button size="medium" expand="block" (click)="CancelTrip()">Cancel Trip</ion-button>
+              <ion-button size="medium" expand="block" (click)="CancelTrip()">End Trip</ion-button>
             </ion-col>
           </ion-row>
         </ion-grid>
diff --git a/src/app/hirebike/hirebike.page.ts b/src/app/hirebike/hirebike.page.ts
index b17b5c1dad7fbee8e245f74b03d700ca32499716..3de406aa40a8937a8e03a4edb3e088a8a62cb48b 100644
--- a/src/app/hirebike/hirebike.page.ts
+++ b/src/app/hirebike/hirebike.page.ts
@@ -110,7 +110,23 @@ export class HirebikePage implements OnInit {
 
   }
 
-  
+  CancelTrip(){
+
+    this.storage.get('token').then((token) => {
+      let url = 'http://193.196.52.237:8081/rent' + '?bikeId=' + this.bikeDetails.id;
+      const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
+      let bikeApi = this.httpClient.delete(url, { headers });
+      bikeApi.subscribe((resp) => {
+        console.log('my data: ', resp);
+        this.toastService.showToast("Trip Ended!");
+      }, (error) => {
+        console.log(error)
+        this.toastService.showToast("Unavle to end trip")
+      });
+    });
+
+  }
+
 
   loadmap() {
     var defaultLayers = this.platform.createDefaultLayers();