diff --git a/src/app/songs/models/song.ts b/src/app/songs/models/song.ts
index 0b2bef5..57d2244 100644
--- a/src/app/songs/models/song.ts
+++ b/src/app/songs/models/song.ts
@@ -1,4 +1,5 @@
 export interface Song {
+  id: string;
   comment: string;
   final: boolean;
   key: string;
diff --git a/src/app/songs/services/song-data.service.ts b/src/app/songs/services/song-data.service.ts
index 848f1a3..228df50 100644
--- a/src/app/songs/services/song-data.service.ts
+++ b/src/app/songs/services/song-data.service.ts
@@ -2,17 +2,23 @@ import {Injectable} from '@angular/core';
 import {AngularFirestore, AngularFirestoreCollection} from '@angular/fire/firestore';
 import {Song} from '../models/song';
 import {Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
 export class SongDataService {
   private songCollection: AngularFirestoreCollection<Song>;
-  private songs: Observable<Song[]>;
+  private readonly songs: Observable<Song[]>;
 
   constructor(private afs: AngularFirestore) {
     this.songCollection = afs.collection<Song>('songs');
-    this.songs = this.songCollection.valueChanges();
+    this.songs = this.songCollection.snapshotChanges().pipe(map(actions => {
+      return actions.map(a => ({
+        ...a.payload.doc.data(),
+        id: a.payload.doc.id
+      }));
+    }));
   }
 
   public list = (): Observable<Song[]> => this.songs;
diff --git a/src/app/songs/song-list/song-list.component.html b/src/app/songs/song-list/song-list.component.html
index b5d0a73..904c844 100644
--- a/src/app/songs/song-list/song-list.component.html
+++ b/src/app/songs/song-list/song-list.component.html
@@ -1,3 +1,3 @@
 <app-card [padding]="false">
-  <app-list-item *ngFor="let song of songs" [song]="song"></app-list-item>
+  <app-list-item *ngFor="let song of songs | async" [song]="song" [routerLink]="song.id"></app-list-item>
 </app-card>
diff --git a/src/app/songs/song-list/song-list.component.ts b/src/app/songs/song-list/song-list.component.ts
index 6ceb594..23a8ade 100644
--- a/src/app/songs/song-list/song-list.component.ts
+++ b/src/app/songs/song-list/song-list.component.ts
@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {SongService} from '../services/song.service';
 import {Song} from '../models/song';
+import {map} from 'rxjs/operators';
+import {Observable} from 'rxjs';
 
 @Component({
   selector: 'app-songs',
@@ -8,15 +10,15 @@ import {Song} from '../models/song';
   styleUrls: ['./song-list.component.less']
 })
 export class SongListComponent implements OnInit {
-  public songs: Song[];
+  public songs: Observable<Song[]>;
 
   constructor(private songService: SongService) {
   }
 
   ngOnInit() {
-    this.songService.list().subscribe(songs => {
-      this.songs = songs.sort((a, b) => a.number - b.number);
-    });
+    this.songs = this.songService.list().pipe(map(songs =>
+      songs.sort((a, b) => a.number - b.number)
+    ));
   }
 
 }
diff --git a/src/app/songs/song-list/song-list.module.ts b/src/app/songs/song-list/song-list.module.ts
index 882d165..5ef072a 100644
--- a/src/app/songs/song-list/song-list.module.ts
+++ b/src/app/songs/song-list/song-list.module.ts
@@ -4,6 +4,7 @@ import {SongListComponent} from './song-list.component';
 import {ListItemComponent} from './list-item/list-item.component';
 import {CardModule} from '../../widget-modules/components/card/card.module';
 import {SongTypeTranslaterModule} from '../../widget-modules/pipes/song-type-translater/song-type-translater.module';
+import {RouterModule} from '@angular/router';
 
 
 @NgModule({
@@ -11,6 +12,7 @@ import {SongTypeTranslaterModule} from '../../widget-modules/pipes/song-type-tra
   exports: [SongListComponent],
   imports: [
     CommonModule,
+    RouterModule,
 
     CardModule,
     SongTypeTranslaterModule
diff --git a/src/app/songs/songs.module.ts b/src/app/songs/songs.module.ts
index 540191e..a83d603 100644
--- a/src/app/songs/songs.module.ts
+++ b/src/app/songs/songs.module.ts
@@ -5,14 +5,12 @@ import {SongsRoutingModule} from './songs-routing.module';
 import {SongComponent} from './song/song.component';
 import {SongListModule} from './song-list/song-list.module';
 
-
 @NgModule({
   declarations: [SongComponent],
   imports: [
     CommonModule,
     SongsRoutingModule,
     SongListModule,
-
   ]
 })
 export class SongsModule {
diff --git a/src/app/widget-modules/components/card/card.component.less b/src/app/widget-modules/components/card/card.component.less
index 406bc3a..0727c43 100644
--- a/src/app/widget-modules/components/card/card.component.less
+++ b/src/app/widget-modules/components/card/card.component.less
@@ -5,6 +5,7 @@
   margin: 20px;
   border-radius: 8px;
   background: #fffe;
+  overflow: hidden;
 
   &.padding {
     padding: 20px;