diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 6681baeaf59dd6fb748cc706c37421618a477c77..0b5ff1873e0b6257049db1509eae6f31b875e470 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -7,39 +7,105 @@
       Home
     </ion-title>
     <ion-item class="checkbox-wrapper">
-        <!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox-->
-        <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
-      </ion-item>
+      <!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox-->
+      <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
+    </ion-item>
   </ion-toolbar>
 </ion-header>
 <ion-content>
-    
+
   <div #mapElement2d style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
   <div #mapElement3d style="width: 100%; height: 100%" id="mapContainer" *ngIf="is3DChecked"></div>
   <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
   <ion-fab vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
-      <ion-fab-button>
-        <ion-icon name="locate"></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
+    <ion-fab-button>
+      <ion-icon name="locate"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 </ion-content>
 
 <ion-footer>
-    
-  <div class="bike-list-container">
-    
+
+  <div class="bike-list-container" *ngIf="!isDetailsVisible">
     <div class="bike-container" *ngFor="let bike of bikes">
-      <div class="bike-name">
-        {{bike.name}}
+      <div class="inner" (click)="showBikeDetails(bike)">
+        <div class="bike-name">
+          {{bike.name}}
+        </div>
+        <div class="battery-info">
+          <div>
+            <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
+          </div>
+          <div>{{bike.batteryPercentage + " %"}}</div>
+        </div>
+        <div class="address-info">
+          <div class="disance">{{bike.distance + "m"}}</div>
+          <div class="address">{{bike.address}}</div>
+        </div>
       </div>
-      <div class="battery-info">
-        <div><ion-icon class="battery-icon" name="battery-charging"></ion-icon></div>
-        <div>{{bike.batteryPercentage + " %"}}</div>
+    </div>
+  </div>
+
+  <div class="bike-details-container" *ngIf="isDetailsVisible">
+    <div class="inner">
+
+      <!--  <div class="battery-info">
+        <div>
+          <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
+        </div>
+        <div>{{selectedBike.batteryPercentage + " %"}}</div>
       </div>
       <div class="address-info">
-        <div class="disance">{{bike.distance + "m"}}</div>
-        <div class="address">{{bike.address}}</div>
+        <div class="disance">{{selectedBike.distance + "m"}}</div>
+        <div class="address">{{selectedBike.address}}</div>
+      </div> -->
+      <div class="button-container">
+        <ion-grid>
+          <ion-row>
+            <ion-col>
+              Bike Name
+            </ion-col>
+            <ion-col>
+              {{selectedBike.name}}
+            </ion-col>
+          </ion-row>
+          <ion-row>
+            <ion-col>
+              Battery Level
+            </ion-col>
+            <ion-col>
+
+              <ion-icon class="battery-icon" name="battery-charging"></ion-icon>
+              {{selectedBike.batteryPercentage + " %"}}
+            </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-row>
+            <ion-col>
+              <ion-button size="medium" expand="block" (click)="reserveBike()">Reserve</ion-button>
+            </ion-col>
+            <ion-col>
+              <ion-button size="medium" expand="block" (click)="navigatetoBike()">Navigate</ion-button>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
       </div>
     </div>
+
   </div>
-</ion-footer>
+</ion-footer>
\ No newline at end of file
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
index ad23a37ddafdd5afa5f7986772357fb31cf50969..3762aeac0023826c387752b91cd3198788750df1 100644
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -99,4 +99,8 @@ ion-footer{
 .get-position{
   margin-bottom:10px;
   
+}
+
+.button-container{
+  clear: both;
 }
\ No newline at end of file
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index 4d5101bb736a58ca681020de8dc9716cfb83f0dd..16fd7c2dbf52b2309fa4b0f87d244c9d6bd0fb0e 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -23,6 +23,8 @@ export class HomePage {
   private currentLocation = { lat: 0, lng: 0 };
 
   public is3DChecked = false;
+  public isDetailsVisible = false;
+  public selectedBike ={};
 
   public tempArr = [1, 2];
   public locationArr = [{ lat: 48.778409, lng: 9.179252 },
@@ -223,4 +225,11 @@ export class HomePage {
       this.loadmap("3D");
     }, 100);
   }
+
+  showBikeDetails(bike) {
+
+    this.selectedBike=bike;
+    this.isDetailsVisible = true;
+  }
+  
 }