diff --git a/src/app/component/app.component.html b/src/app/component/app.component.html
index 435cdfd..e781435 100644
--- a/src/app/component/app.component.html
+++ b/src/app/component/app.component.html
@@ -1,2 +1,3 @@
 <app-nav-bar></app-nav-bar>
+<app-list-vessel></app-list-vessel>
 <router-outlet></router-outlet>
diff --git a/src/app/component/import-vessels/import-vessels.component.ts b/src/app/component/import-vessels/import-vessels.component.ts
index 88cdcd9..dcefb9f 100644
--- a/src/app/component/import-vessels/import-vessels.component.ts
+++ b/src/app/component/import-vessels/import-vessels.component.ts
@@ -59,6 +59,7 @@ export class ImportVesselsComponent implements OnInit {
         const newVessel = new Vessel(splitLine);
         this.vessels.set(Number(newVessel.mmsi), newVessel);
       }
+      this.vesselsService.changeVesselsSet(this.vessels);
     };
 
     fileReader.onprogress = (e ) => {
diff --git a/src/app/component/list-vessel/list-vessel.component.html b/src/app/component/list-vessel/list-vessel.component.html
index e69de29..bae30cf 100644
--- a/src/app/component/list-vessel/list-vessel.component.html
+++ b/src/app/component/list-vessel/list-vessel.component.html
@@ -0,0 +1,10 @@
+
+<div class="list-group border" id="list-tab" role="tablist">
+  <h2 class="side-title">Vessel</h2>
+  <a *ngFor="let vessel of vessels | keyvalue" class=" list-group-item list-group-item-action" id="{{vessel.value.mmsi}}"
+     data-toggle="list" role="tab">
+    {{vessel.value.mmsi}} - {{vessel.value.vesselName}}
+  </a>
+</div>
+
+
diff --git a/src/app/component/list-vessel/list-vessel.component.scss b/src/app/component/list-vessel/list-vessel.component.scss
index e69de29..15299da 100644
--- a/src/app/component/list-vessel/list-vessel.component.scss
+++ b/src/app/component/list-vessel/list-vessel.component.scss
@@ -0,0 +1,23 @@
+h2.side-title {
+  margin-right: 0;
+  margin-bottom: 10px;
+  padding: 10px;
+  font-size: 20px;
+  color: #333;
+  text-transform: uppercase;
+}
+
+h2.side-title:after {
+  content: '';
+  width: 60px;
+  height: 1px;
+  background: #ff173c;
+  display: block;
+  margin-top: 6px;
+}
+
+.list-group {
+  margin-right: 80%;
+  height: 94.7vh;
+}
+
diff --git a/src/app/component/list-vessel/list-vessel.component.ts b/src/app/component/list-vessel/list-vessel.component.ts
index 42235c0..3b24893 100644
--- a/src/app/component/list-vessel/list-vessel.component.ts
+++ b/src/app/component/list-vessel/list-vessel.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Vessel} from '../../model/vessel';
+import {VesselsService} from '../../service/vessels.service';
 
 @Component({
   selector: 'app-list-vessel',
@@ -6,10 +8,16 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./list-vessel.component.scss']
 })
 export class ListVesselComponent implements OnInit {
+  vessels: Map<number, Vessel>;
 
-  constructor() { }
 
-  ngOnInit(): void {
+  constructor(private vesselsService: VesselsService) {
   }
 
+  ngOnInit(): void {
+    this.vesselsService.currentVessels.subscribe(vessels => {
+      this.vessels = vessels;
+      console.log(this.vessels);
+    });
+  }
 }