diff --git a/projects/project-3/frontend/src/app/map/map.component.css b/projects/project-3/frontend/src/app/map/map.component.css
index 915ce00..84b2d67 100644
--- a/projects/project-3/frontend/src/app/map/map.component.css
+++ b/projects/project-3/frontend/src/app/map/map.component.css
@@ -8,7 +8,6 @@
 }
 
 .map-frame {
-  border: 2px solid black;
   height: 90%;
 }
 
diff --git a/projects/project-3/frontend/src/app/map/map.component.css.map b/projects/project-3/frontend/src/app/map/map.component.css.map
index 5745c43..8e10507 100644
--- a/projects/project-3/frontend/src/app/map/map.component.css.map
+++ b/projects/project-3/frontend/src/app/map/map.component.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["map.component.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"map.component.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["map.component.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"map.component.css"}
\ No newline at end of file
diff --git a/projects/project-3/frontend/src/app/map/map.component.scss b/projects/project-3/frontend/src/app/map/map.component.scss
index f486c3f..6866a90 100644
--- a/projects/project-3/frontend/src/app/map/map.component.scss
+++ b/projects/project-3/frontend/src/app/map/map.component.scss
@@ -8,7 +8,6 @@
 }
 
 .map-frame {
-  border: 2px solid black;
   height: 90%;
 }
 
diff --git a/projects/project-3/frontend/src/app/map/map.component.ts b/projects/project-3/frontend/src/app/map/map.component.ts
index d7fe41d..f834d87 100644
--- a/projects/project-3/frontend/src/app/map/map.component.ts
+++ b/projects/project-3/frontend/src/app/map/map.component.ts
@@ -1,5 +1,6 @@
 import {AfterViewInit, Component} from '@angular/core';
-import * as L from 'leaflet';
+import {MapService} from '../service/map.service';
+
 
 @Component({
   selector: 'app-map',
@@ -9,20 +10,12 @@ import * as L from 'leaflet';
 export class MapComponent implements AfterViewInit {
   private map;
 
-  constructor() {
+  constructor(private service: MapService) {
   }
 
   ngAfterViewInit(): void {
-    this.initMap();
+    this.service.initMap();
   }
 
-  private initMap(): void {
-    this.map = L.map('map').setView([51.509865, -0.118092], 14);
-    this.map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
-      minZoom: 0,
-      maxZoom: 19
-    }));
-  }
 
 }
diff --git a/projects/project-3/frontend/src/app/service/map.service.spec.ts b/projects/project-3/frontend/src/app/service/map.service.spec.ts
new file mode 100644
index 0000000..9a1a1ec
--- /dev/null
+++ b/projects/project-3/frontend/src/app/service/map.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MapService } from './map.service';
+
+describe('MapService', () => {
+  let service: MapService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MapService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/project-3/frontend/src/app/service/map.service.ts b/projects/project-3/frontend/src/app/service/map.service.ts
new file mode 100644
index 0000000..e4388a9
--- /dev/null
+++ b/projects/project-3/frontend/src/app/service/map.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import * as L from 'leaflet';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MapService {
+  private map;
+
+  constructor() { }
+
+  public initMap(): void {
+    this.map = L.map('map').setView([51.509865, -0.118092], 13);
+    this.map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
+      minZoom: 0,
+      maxZoom: 19
+    }));
+  }
+}