diff --git a/src/app/auth/login/login.page.ts b/src/app/auth/login/login.page.ts
index 130a489100e569a90e2ee16c0068141cf9479c86..668dc64d2eb7d350a7046c4b84fe60b62886a5c3 100644
--- a/src/app/auth/login/login.page.ts
+++ b/src/app/auth/login/login.page.ts
@@ -39,7 +39,7 @@ export class LoginPage implements OnInit {
         console.log('my data: ', data);
         this.restService.setToken(data.token);
         this.router.navigateByUrl('/home');
-      }, (error) =>  {
+      }, (error) => {
         console.log(error);
         this.correctCredentials = true;
       });
diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html
index 1f9fafd8a9d15d9e251c18fc17a98b295532dc26..6681baeaf59dd6fb748cc706c37421618a477c77 100644
--- a/src/app/home/home.page.html
+++ b/src/app/home/home.page.html
@@ -13,14 +13,21 @@
   </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-content>
 
 <ion-footer>
+    
   <div class="bike-list-container">
-    <ion-icon class="bike-list-expander" name="arrow-dropup-circle" (click)="expandBikeList()"></ion-icon>
+    
     <div class="bike-container" *ngFor="let bike of bikes">
       <div class="bike-name">
         {{bike.name}}
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
index 1dc921606ec850ca2d6f7848d2f256c9d91d17ab..ad23a37ddafdd5afa5f7986772357fb31cf50969 100644
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -96,3 +96,7 @@ ion-footer{
 .mapContainer{
   background-color: white;
 }
+.get-position{
+  margin-bottom:10px;
+  
+}
\ No newline at end of file
diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts
index e577c54be2e5f16308830f2c3febc4fc3d623383..4d5101bb736a58ca681020de8dc9716cfb83f0dd 100644
--- a/src/app/home/home.page.ts
+++ b/src/app/home/home.page.ts
@@ -29,7 +29,7 @@ export class HomePage {
   { lat: 48.780926, lng: 9.173456 },
   { lat: 48.775174, lng: 9.175459 },
   { lat: 48.793704, lng: 9.191112 }]
-
+  public arrayLanLon = { lat: 0, lng: 0 };
   @ViewChild("mapElement2d", { static: false })
   public mapElement2d: ElementRef;
 
@@ -69,6 +69,7 @@ export class HomePage {
     }).then((resp) => {
       this.currentLocation.lat = resp.coords.latitude;
       this.currentLocation.lng = resp.coords.longitude;
+
       this.storage.get('token').then((token) => {
         let url = 'http://193.196.52.237:8081/bikes' + '?lat=' + this.currentLocation.lat + '&lng=' + this.currentLocation.lng;
         const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
@@ -85,6 +86,10 @@ export class HomePage {
     });
   }
 
+
+
+
+
   loadmap(style) {
     // Obtain the default map types from the platform object
     var mapStyle = "raster";
@@ -102,6 +107,7 @@ export class HomePage {
         pixelRatio: window.devicePixelRatio || 1
       }
     );
+
     var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
     var ui = H.ui.UI.createDefault(this.map, defaultLayers);
     ui.removeControl("mapsettings");
@@ -135,12 +141,28 @@ export class HomePage {
       this.map.getViewModel().setLookAtData({ tilt: 60 });
     }
     this.getLocation(this.map);
-    var img = ['../../../assets/images/ic_high.png', '../../../assets/images/ic_medium.png', '../../../assets/images/ic_low.png'];
-    for (let i = 0; i < this.locationArr.length; i++) {
-      this.addMarker(this.locationArr[i].lat, this.locationArr[i].lng, img[i % 3]);
+    var img = ['../../../assets/images/100_percent.png', '../../../assets/images/75_percent.png', '../../../assets/images/50_percent.png','../../../assets/images/25_percent.png','../../../assets/images/0_percent.png'];
+    for (let i = 0; i < this.bikes.length; i++) {
+      if(this.bikes[i].batteryPercentage<100 &&this.bikes[i].batteryPercentage>=75){
+        this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[0]);
+      }
+      else if(this.bikes[i].batteryPercentage<75 &&this.bikes[i].batteryPercentage>=50){
+        this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[1]);
+      }
+      else if(this.bikes[i].batteryPercentage<50 &&this.bikes[i].batteryPercentage>=25){
+        this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[2]);
+      }else if(this.bikes[i].batteryPercentage<25 &&this.bikes[i].batteryPercentage>=0){
+        this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[3]);
+      }
+      //console.log("rroni", this.bikes[i].lat);
+     // this.addMarker(Number(this.bikes[i].lat), Number(this.bikes[i].lon), img[0]);
+      // this.addMarker(Number(48.78077362), 9.17782398, img[i % 3]);
+      //alert(this.bikes[i].lat);
     }
   }
-
+  getCurrentPosition() {
+    this.getLocation(this.map);
+  }
   getLocation(map) {
     this.geolocation.getCurrentPosition(
       {
@@ -162,7 +184,7 @@ export class HomePage {
 
   moveMapToGiven(map, lat, lng) {
 
-    var icon = new H.map.Icon('../../../assets/images/icon_map_currentLocation.png');
+    var icon = new H.map.Icon('../../../assets/images/current_location.png');
     // Create a marker using the previously instantiated icon:
     var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
 
diff --git a/src/assets/images/0_percent.png b/src/assets/images/0_percent.png
new file mode 100644
index 0000000000000000000000000000000000000000..80e4bdcedb70807184d88f92fa9649183cd76ec4
Binary files /dev/null and b/src/assets/images/0_percent.png differ
diff --git a/src/assets/images/100_percent.png b/src/assets/images/100_percent.png
new file mode 100644
index 0000000000000000000000000000000000000000..e328a4cd6b1503089c98de6d3f6b7a1f67d13804
Binary files /dev/null and b/src/assets/images/100_percent.png differ
diff --git a/src/assets/images/25_percent.png b/src/assets/images/25_percent.png
new file mode 100644
index 0000000000000000000000000000000000000000..a06c74d5edb7d9e2c5bfe9396aa86c6518bc07a9
Binary files /dev/null and b/src/assets/images/25_percent.png differ
diff --git a/src/assets/images/50_percent.png b/src/assets/images/50_percent.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c3e45ba4143dad575722bd50a5607715b0a9a68
Binary files /dev/null and b/src/assets/images/50_percent.png differ
diff --git a/src/assets/images/75_percent.png b/src/assets/images/75_percent.png
new file mode 100644
index 0000000000000000000000000000000000000000..3dc53a6e1d829c8b0bb15311080f31dbe0d443c3
Binary files /dev/null and b/src/assets/images/75_percent.png differ
diff --git a/src/assets/images/current_location.png b/src/assets/images/current_location.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e8d0b05255317762cb6d5577bd6226fd8aa500f
Binary files /dev/null and b/src/assets/images/current_location.png differ
diff --git a/src/assets/images/ic_position.png b/src/assets/images/ic_position.png
index dd808a0d7cdd7c362e5834522edb9855f2b4f03c..def14a9f93e8dc50cd0acb9c4b5cf9aa734d8232 100644
Binary files a/src/assets/images/ic_position.png and b/src/assets/images/ic_position.png differ