diff --git a/src/app/interfaces/openLayersGeoJSON.ts b/src/app/interfaces/openLayersGeoJSON.ts
index f569bef..bcd0e95 100644
--- a/src/app/interfaces/openLayersGeoJSON.ts
+++ b/src/app/interfaces/openLayersGeoJSON.ts
@@ -1,29 +1,29 @@
 interface OpenLayersGeometry {
-    coordinates: Array<Array<number>>;
-    type?: string;
+  coordinates: Array<Array<number>>;
+  type?: string;
 }
 
 interface OpenLayersProperties {
-    ECO_NAME?: string;
-    BIOME_NAME?: string;
-    REALM?: string;
-    NNH?: string;
-    NNH_NAME?: string;
-    COLOR?: string;
-    COLOR_BIO?: string;
-    COLOR_NNH?: string;
+  ECO_NAME?: string;
+  BIOME_NAME?: string;
+  REALM?: string;
+  NNH?: string;
+  NNH_NAME?: string;
+  COLOR?: string;
+  COLOR_BIO?: string;
+  COLOR_NNH?: string;
 }
 
 interface OpenLayersFeature {
-    type: string;
-    geometry: OpenLayersGeometry;
-    id: number;
-    properties: OpenLayersProperties;
+  type: string;
+  geometry: OpenLayersGeometry;
+  id: number;
+  properties: OpenLayersProperties;
 }
 
 export interface OpenLayersGeoJSON {
-    type: string;
-    features: Array<OpenLayersFeature>;
-    geometry: OpenLayersGeometry;
-    properties: OpenLayersProperties;
+  type: string;
+  features: Array<OpenLayersFeature>;
+  geometry: OpenLayersGeometry;
+  properties: OpenLayersProperties;
 }
diff --git a/src/app/interfaces/routeResponse.ts b/src/app/interfaces/routeResponse.ts
index 44b275b..4161214 100644
--- a/src/app/interfaces/routeResponse.ts
+++ b/src/app/interfaces/routeResponse.ts
@@ -1,9 +1,8 @@
-
-interface ResponseNode{
+interface ResponseNode {
   lat: number;
   lon: number;
 }
 
-export interface RouteResponse{
+export interface RouteResponse {
   nodes: Array<ResponseNode>;
 }
diff --git a/src/app/interfaces/searchResponse.ts b/src/app/interfaces/searchResponse.ts
index a0a0703..58494ae 100644
--- a/src/app/interfaces/searchResponse.ts
+++ b/src/app/interfaces/searchResponse.ts
@@ -1,8 +1,8 @@
-export interface SearchWay{
+export interface SearchWay {
   id: number;
   name: string;
 }
 
-export interface SearchResponse{
+export interface SearchResponse {
   ways: Array<SearchWay>;
 }
diff --git a/src/app/map/map.component.css b/src/app/map/map.component.css
index 3d8c5ec..89ec52e 100644
--- a/src/app/map/map.component.css
+++ b/src/app/map/map.component.css
@@ -1,6 +1,4 @@
-
 #map {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
 }
-
diff --git a/src/app/map/map.component.spec.ts b/src/app/map/map.component.spec.ts
index f163147..4d3553c 100644
--- a/src/app/map/map.component.spec.ts
+++ b/src/app/map/map.component.spec.ts
@@ -8,9 +8,9 @@ describe('MapComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ MapComponent ]
+      declarations: [MapComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
index 5b8ab81..569db5b 100644
--- a/src/app/map/map.component.ts
+++ b/src/app/map/map.component.ts
@@ -12,7 +12,7 @@ import LineString from 'ol/geom/LineString';
 import { Feature } from 'ol';
 import Geometry from 'ol/geom/Geometry';
 import { RouteResponse } from '../interfaces/routeResponse';
-import {Stroke, Style} from 'ol/style';
+import { Stroke, Style } from 'ol/style';
 
 @Component({
   selector: 'app-map',
@@ -58,7 +58,7 @@ export class MapComponent implements AfterViewInit {
     setTimeout(() => this.map.updateSize(), 200);
   }
 
-  drawPath(routeResponse: RouteResponse): void{
+  drawPath(routeResponse: RouteResponse): void {
     // https://routing.openstreetmap.de/routed-bike/route/v1/driving/8.6042708,53.5151533;13.6887164,51.0491468?overview=false&alternatives=true&steps=true
     console.log(routeResponse);
 
@@ -67,25 +67,25 @@ export class MapComponent implements AfterViewInit {
     const lineString: LineString = new LineString(fCoordinates);
     const feature: Feature<Geometry> = new Feature({ geometry: lineString });
     feature.setStyle(this.lineStyle);
-    const vectorSource = new VectorSource({ features: [ feature ]});
+    const vectorSource = new VectorSource({ features: [feature] });
     const vectorLayer = new VectorLayer({ source: vectorSource });
     this.map.removeLayer(this.map.getLayers().item(1))
     this.map.addLayer(vectorLayer);
-    
+
     this.map.getView().setCenter(fCoordinates[0])
     this.map.getView().setZoom(13);
 
-   // this.features = new GeoJSON().readFeatures(new openLayersGeoJSON())
+    // this.features = new GeoJSON().readFeatures(new openLayersGeoJSON())
 
-   /*
-    this.vectorLayer = new VectorLayer({
-      background: '#1a2b39',
-      source: new VectorSource({
-        url: 'http://router.project-osrm.org/route/v1/driving/-1.8744130630953275,52.45318441573963;-1.879401971863028,52.451059431849615;-1.8783612747652496,52.44962092302177;-1.882395317123648,52.44969938835112;-1.8824275036318268,52.452046744809195;-1.8794663448793851,52.45332825709778;-1.8898840446932288,52.454230523991356?overview=full&steps=true&geometries=geojson',
-        format: new GeoJSON({dataProjection: 'EPSG:4326', featureProjection: "EPSG:3857" }),
-      })
-    });
-
-    this.map.addLayer(this.vectorLayer);*/
+    /*
+     this.vectorLayer = new VectorLayer({
+       background: '#1a2b39',
+       source: new VectorSource({
+         url: 'http://router.project-osrm.org/route/v1/driving/-1.8744130630953275,52.45318441573963;-1.879401971863028,52.451059431849615;-1.8783612747652496,52.44962092302177;-1.882395317123648,52.44969938835112;-1.8824275036318268,52.452046744809195;-1.8794663448793851,52.45332825709778;-1.8898840446932288,52.454230523991356?overview=full&steps=true&geometries=geojson',
+         format: new GeoJSON({dataProjection: 'EPSG:4326', featureProjection: "EPSG:3857" }),
+       })
+     });
+ 
+     this.map.addLayer(this.vectorLayer);*/
   }
 }
diff --git a/src/app/search/search.component.html b/src/app/search/search.component.html
index a3bccce..48dc327 100644
--- a/src/app/search/search.component.html
+++ b/src/app/search/search.component.html
@@ -1,25 +1,44 @@
-
 <div class="searchField">
-
-	<div class="autocomplete">
-	  	<input #inputFrom (click)="getValue(inputFrom.value, true)" (input)="getValue(inputFrom.value, true)" type="text" name="inputFrom" id="inputFrom" placeholder="From" value="{{ inputFromValue }}">
-		  <div class="autocomplete-items autocomplete-items-from">
+  <div class="autocomplete">
+    <input
+      #inputFrom
+      (click)="getValue(inputFrom.value, true)"
+      (input)="getValue(inputFrom.value, true)"
+      type="text"
+      name="inputFrom"
+      id="inputFrom"
+      placeholder="From"
+      value="{{ inputFromValue }}"
+    />
+    <div class="autocomplete-items autocomplete-items-from">
       <div *ngFor="let item of searchItemsFrom" (click)="select(true, item)">
         <label>{{ item.name }}</label>
       </div>
-		</div>
-	</div>
+    </div>
+  </div>
 
-
-	<div class="autocomplete" id="autocompleteTo">
-		<input #inputTo (click)="getValue(inputTo.value, false)" (input)="getValue(inputTo.value, false)" type="text" name="inputTo" id="inputTo" placeholder="To" value="{{ inputToValue }}">
-		<div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
+  <div class="autocomplete" id="autocompleteTo">
+    <input
+      #inputTo
+      (click)="getValue(inputTo.value, false)"
+      (input)="getValue(inputTo.value, false)"
+      type="text"
+      name="inputTo"
+      id="inputTo"
+      placeholder="To"
+      value="{{ inputToValue }}"
+    />
+    <div #inputautocompleteList class="autocomplete-items autocomplete-items-to">
       <div *ngFor="let item of searchItemsTo" (click)="select(false, item)">
         <label>{{ item.name }}</label>
       </div>
-		</div>
-	</div>
+    </div>
+  </div>
 </div>
 
-<button *ngIf="!isSearching" class="routeBtn" (click)="getRoute()">Route</button>
-<img *ngIf="isSearching"src="/assets/images/loading.gif" style="margin-top:15px; margin-left:10px;width:25px;height: 25px;" />
+<ng-container *ngIfElse="isSearching" else routeBtn>
+  <img src="/assets/images/loading.gif" style="margin-top: 15px; margin-left: 10px; width: 25px; height: 25px" />
+</ng-container>
+<ng-template #routeBtn>
+  <button class="routeBtn" (click)="getRoute()">Route</button>
+</ng-template>
diff --git a/src/app/search/search.component.spec.ts b/src/app/search/search.component.spec.ts
index 918ce70..cf8b0aa 100644
--- a/src/app/search/search.component.spec.ts
+++ b/src/app/search/search.component.spec.ts
@@ -8,9 +8,9 @@ describe('SearchComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ SearchComponent ]
+      declarations: [SearchComponent]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
   beforeEach(() => {
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts
index 1cd2a1c..fbfaee3 100644
--- a/src/app/search/search.component.ts
+++ b/src/app/search/search.component.ts
@@ -29,12 +29,12 @@ export class SearchComponent {
     private pythonBackendService: PythonBackendService,
   ) { }
 
-  select(isFrom: boolean, item: SearchWay): void{
-    if(isFrom){
+  select(isFrom: boolean, item: SearchWay): void {
+    if (isFrom) {
       this.selectedSearchWayFrom = item;
       this.inputFromValue = item.name;
       this.searchItemsFrom = [];
-    }else{
+    } else {
       this.selectedSearchWayTo = item;
       this.inputToValue = item.name;
       this.searchItemsTo = [];
@@ -50,31 +50,31 @@ export class SearchComponent {
 
     value = value.trim();
 
-    this.pythonBackendService.sendSearchQueryRequest(value, "10")
-    .subscribe((response: SearchResponse) => response.ways?.forEach(way =>{
-      if(isFrom){
-        this.searchItemsFrom.push(way);
-        this.selectedSearchWayFrom = way;
-      }else{
-        this.searchItemsTo.push(way);
-        this.selectedSearchWayTo = way;
-      }
-    }));
+    this.pythonBackendService.sendSearchQueryRequest(value, "10") // "10" -> limit of search results
+      .subscribe((response: SearchResponse) => response.ways?.forEach(way => {
+        if (isFrom) {
+          this.searchItemsFrom.push(way);
+          this.selectedSearchWayFrom = way;
+        } else {
+          this.searchItemsTo.push(way);
+          this.selectedSearchWayTo = way;
+        }
+      }));
   }
 
-  getRoute(): void{
-    if(this.selectedSearchWayFrom && this.selectedSearchWayTo)
-    this.isSearching = true;
+  getRoute(): void {
+    if (this.selectedSearchWayFrom && this.selectedSearchWayTo)
+      this.isSearching = true;
     this.pythonBackendService.sendRouteQueryRequest(this.selectedSearchWayFrom.id.toString(), this.selectedSearchWayTo.id.toString())
-      .pipe(catchError(err =>{
+      .pipe(catchError(err => {
         console.error(err);
-        return of({nodes:[]});
+        return of({ nodes: [] });
       }))
       .subscribe(
         (response: RouteResponse) => {
-        this.emitter.emit(response);
-        this.isSearching = false;
-      });
+          this.emitter.emit(response);
+          this.isSearching = false;
+        });
   }
-  
+
 }