diff --git a/src/app/app.component.css b/src/app/app.component.css
index 3139443..a985608 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -12,48 +12,3 @@ header p{
     display:block;
     float:right;
 }
-
-#map{
-    width: 100%;
-    height: 100%;
-}
-
-.osrm-route-container{
-  position: absolute;
-  right: 0;
-  width:300px;
-  margin-top: 50px;
-  background-color: rgba(27, 27, 27, 0.801);
-  top:0;
-  bottom: 0;
-  color: white;
-}
-
-.osrm-route-container h4{
-  text-align: center;
-  line-height: 30px;
-  letter-spacing: 1px;
-  padding-top: 0px;
-  margin-top: 2px;
-}
-
-.route-list{
-  width: 100%;
-  display: block;
-  font-weight: bold;
-  text-align: left;
-}
-
-.route-list div{
-  width: 100%;
-  display: block;
-  border-top: 1px solid rgba(255, 255, 255, 0.418);
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-.route-list div p{
-  display: inline-block;
-  text-transform: capitalize;
-  padding-left: 40px;
-}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index b38fcf1..c164427 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,15 +3,5 @@
   <p>{{title}}</p>
 </header>
 
-<div id="map" class="map"></div>
-
-<div class="osrm-route-container">
-  <h4>Your Route Steps</h4>
-
-  <div class="route-list">
-    <div *ngFor="let step of this.routeSteps">
-      <p>{{step.maneuver?.type }} {{step.maneuver?.modifier }} on {{step.name }}</p>
-    </div>
-  </div>
-</div>
+<app-map #mapRef ></app-map>
 
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e433691..170febc 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,17 +1,5 @@
-import { Component, AfterViewInit} from '@angular/core';
-import { defaults as defaultControls } from 'ol/control';
-import { fromLonLat, transform } from 'ol/proj';
-import Map from 'ol/Map';
-import View from 'ol/View';
-import TileLayer from 'ol/layer/Tile';
-import XYZ from 'ol/source/XYZ';
-import ZoomToExtent from 'ol/control/ZoomToExtent';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import LineString from 'ol/geom/LineString';
-import { Osrm, OsrmStep } from './interfaces/osrm';
-import { Feature } from 'ol';
-import Geometry from 'ol/geom/Geometry';
+import { Component, } from '@angular/core';
+
 
 @Component({
   selector: 'app-root',
@@ -19,82 +7,8 @@ import Geometry from 'ol/geom/Geometry';
   styleUrls: ['./app.component.css', '../../node_modules/ol/ol.css']
 })
 
-export class AppComponent implements AfterViewInit {
+export class AppComponent {
   title = "Street Map";
-  map: Map;
-  routeSteps: Array<OsrmStep> = []
-
-  constructor() { }
-
-  ngAfterViewInit() {
-    this.map = new Map({
-      target: 'map',
-      layers: [
-        new TileLayer({
-          source: new XYZ({
-            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-          })
-        })
-      ],
-      view: new View({
-        projection: 'EPSG:3857',
-        center: fromLonLat([8, 52]),
-        zoom: 2
-      }),
-      controls: defaultControls().extend([
-        new ZoomToExtent({
-          extent: [
-            813079.7791264898, 5929220.284081122,
-            848966.9639063801, 5936863.986909639
-          ]
-        })
-      ])
-    });
-    setTimeout(() => this.map.updateSize(), 200);
-  }
-
-  drawPath(osrm: Osrm): void{
-    console.log(osrm) //https://routing.openstreetmap.de/routed-bike/route/v1/driving/8.6042708,53.5151533;13.6887164,51.0491468?overview=false&alternatives=true&steps=true
-
-    const coordinates = osrm.routes[0].geometry.coordinates || [];
-    const f_coordinates: Array<Array<number>> = []
-    coordinates.forEach(coordinate =>
-      {
-        f_coordinates.push(transform(coordinate, 'EPSG:4326', 'EPSG:3857'))
-      }
-    );
-
-    const lineString: LineString = new LineString(f_coordinates);
-    const feature: Feature<Geometry> = new Feature({ geometry: lineString });
-    const vectorSource = new VectorSource({ features: [ feature ]});
-
-    const vectorLayer = new VectorLayer({
-
-      source: vectorSource,
-    });
-    this.map.addLayer(vectorLayer);
-
-   // 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);*/
-  }
-
-  updateSidebar(osrm: Osrm): void{
-    console.log("updateSidebar")
-    if(osrm.routes[0].legs[0].steps){
-      this.routeSteps = osrm.routes[0].legs[0].steps;
-    }
-    console.log(this.routeSteps)
-  }
 
 }
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6ce9c83..95733c0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,11 +3,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import {HttpClientModule} from '@angular/common/http';
 import { AppComponent } from './app.component';
 import { SearchComponent } from './search/search.component';
+import { MapComponent } from './map/map.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     SearchComponent,
+    MapComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/map/map.component.css b/src/app/map/map.component.css
new file mode 100644
index 0000000..e3e09c9
--- /dev/null
+++ b/src/app/map/map.component.css
@@ -0,0 +1,45 @@
+
+#map{
+  width: 100%;
+  height: 100%;
+}
+
+.osrm-route-container{
+position: absolute;
+right: 0;
+width:300px;
+margin-top: 50px;
+background-color: rgba(27, 27, 27, 0.801);
+top:0;
+bottom: 0;
+color: white;
+}
+
+.osrm-route-container h4{
+text-align: center;
+line-height: 30px;
+letter-spacing: 1px;
+padding-top: 0px;
+margin-top: 2px;
+}
+
+.route-list{
+width: 100%;
+display: block;
+font-weight: bold;
+text-align: left;
+}
+
+.route-list div{
+width: 100%;
+display: block;
+border-top: 1px solid rgba(255, 255, 255, 0.418);
+padding-top: 5px;
+padding-bottom: 5px;
+}
+
+.route-list div p{
+display: inline-block;
+text-transform: capitalize;
+padding-left: 40px;
+}
diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html
new file mode 100644
index 0000000..b8d3699
--- /dev/null
+++ b/src/app/map/map.component.html
@@ -0,0 +1,11 @@
+<div id="map" class="map"></div>
+
+<div class="osrm-route-container">
+  <h4>Your Route Steps</h4>
+
+  <div class="route-list">
+    <div *ngFor="let step of this.routeSteps">
+      <p>{{step.maneuver?.type }} {{step.maneuver?.modifier }} on {{step.name }}</p>
+    </div>
+  </div>
+</div>
diff --git a/src/app/map/map.component.spec.ts b/src/app/map/map.component.spec.ts
new file mode 100644
index 0000000..f163147
--- /dev/null
+++ b/src/app/map/map.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapComponent } from './map.component';
+
+describe('MapComponent', () => {
+  let component: MapComponent;
+  let fixture: ComponentFixture<MapComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MapComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts
new file mode 100644
index 0000000..0af3cc6
--- /dev/null
+++ b/src/app/map/map.component.ts
@@ -0,0 +1,97 @@
+import { Component, AfterViewInit } from '@angular/core';
+import { defaults as defaultControls } from 'ol/control';
+import { fromLonLat, transform } from 'ol/proj';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from 'ol/layer/Tile';
+import XYZ from 'ol/source/XYZ';
+import ZoomToExtent from 'ol/control/ZoomToExtent';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import LineString from 'ol/geom/LineString';
+import { Osrm, OsrmStep } from '../interfaces/osrm';
+import { Feature } from 'ol';
+import Geometry from 'ol/geom/Geometry';
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.css']
+})
+export class MapComponent implements AfterViewInit {
+
+  constructor() { }
+
+  map: Map;
+  routeSteps: Array<OsrmStep> = []
+
+  ngAfterViewInit() {
+    this.map = new Map({
+      target: 'map',
+      layers: [
+        new TileLayer({
+          source: new XYZ({
+            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+          })
+        })
+      ],
+      view: new View({
+        projection: 'EPSG:3857',
+        center: fromLonLat([8, 52]),
+        zoom: 2
+      }),
+      controls: defaultControls().extend([
+        new ZoomToExtent({
+          extent: [
+            813079.7791264898, 5929220.284081122,
+            848966.9639063801, 5936863.986909639
+          ]
+        })
+      ])
+    });
+    setTimeout(() => this.map.updateSize(), 200);
+  }
+
+  drawPath(osrm: Osrm): void{
+    console.log(osrm) //https://routing.openstreetmap.de/routed-bike/route/v1/driving/8.6042708,53.5151533;13.6887164,51.0491468?overview=false&alternatives=true&steps=true
+
+    const coordinates = osrm.routes[0].geometry.coordinates || [];
+    const f_coordinates: Array<Array<number>> = []
+    coordinates.forEach(coordinate =>
+      {
+        f_coordinates.push(transform(coordinate, 'EPSG:4326', 'EPSG:3857'))
+      }
+    );
+
+    const lineString: LineString = new LineString(f_coordinates);
+    const feature: Feature<Geometry> = new Feature({ geometry: lineString });
+    const vectorSource = new VectorSource({ features: [ feature ]});
+
+    const vectorLayer = new VectorLayer({
+
+      source: vectorSource,
+    });
+    this.map.addLayer(vectorLayer);
+
+   // 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);*/
+  }
+
+  updateSidebar(osrm: Osrm): void{
+    console.log("updateSidebar")
+    if(osrm.routes[0].legs[0].steps){
+      this.routeSteps = osrm.routes[0].legs[0].steps;
+    }
+    console.log(this.routeSteps)
+  }
+}
diff --git a/src/app/search/search.component.ts b/src/app/search/search.component.ts
index 0def0e0..67bd2ae 100644
--- a/src/app/search/search.component.ts
+++ b/src/app/search/search.component.ts
@@ -1,11 +1,11 @@
-import { Component, OnInit, ElementRef, ViewChild} from '@angular/core';
+import { Component, ElementRef, ViewChild} from '@angular/core';
 import { Nominatim } from '../interfaces/nominatim';
 import { NominatimService } from '../services/nominatim.service';
 import { Photon, PhotonFeatureCollection } from '../interfaces/photon';
 import { PhotonService } from '../services/photon.service';
 import { OsrmService } from '../services/osrm.service';
 import { Osrm } from '../interfaces/osrm';
-import { AppComponent } from '../app.component';
+import { MapComponent } from '../map/map.component';
 
 
 
@@ -35,11 +35,12 @@ export class SearchComponent{
   selectedPhotonFrom: Photon;
   selectedPhotonTo: Photon;
 
+  @ViewChild('mapRef') mapComponent!: MapComponent;
+
   constructor(
     private nominatimService: NominatimService,
     private photonService: PhotonService,
     private osrmService: OsrmService,
-    private appComponent: AppComponent,
     ) { }
 
   selectPhoton(isFrom: boolean, p: Photon): void{
@@ -111,8 +112,8 @@ export class SearchComponent{
   getRoute(): void{
     this.osrmService.sendQueryRequest(this.longFrom, this.latFrom, this.longTo, this.latTo)
     .subscribe((response: Osrm) => {
-      this.appComponent.updateSidebar(response);
-      this.appComponent.drawPath(response);
+      this.mapComponent.updateSidebar(response);
+      this.mapComponent.drawPath(response);
     }
     );
   }
diff --git a/src/app/services/osrm.service.ts b/src/app/services/osrm.service.ts
index 2b58545..fbdfadf 100644
--- a/src/app/services/osrm.service.ts
+++ b/src/app/services/osrm.service.ts
@@ -13,7 +13,6 @@ export class OsrmService{
 
   // sends a query request to Osrm and gets response (http://project-osrm.org/docs/v5.24.0/api/?language=cURL#table-service)
   sendQueryRequest(longFrom: number, latFrom: number, longTo: number, latTo: number): Observable<Osrm> {
-    console.log(latTo)
     console.log("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson")
     return this.http.get<Osrm>("https://routing.openstreetmap.de/routed-bike/route/v1/driving/" + longFrom + "," + latFrom + ";" + longTo + "," + latTo + "?overview=full&alternatives=false&steps=true&geometries=geojson");
   }