diff --git a/dashboard/src/app/album.component.css b/dashboard/src/app/album.component.css
index ed5f6e0..0a3bcc4 100644
--- a/dashboard/src/app/album.component.css
+++ b/dashboard/src/app/album.component.css
@@ -29,4 +29,9 @@
   /* the button becomes visible */
   visibility: visible;
   opacity: 1;
+}
+
+.btn-sort {
+  bottom: 20px;
+  right: 70px;
 }
\ No newline at end of file
diff --git a/dashboard/src/app/artist.component.html b/dashboard/src/app/artist.component.html
index cac0a67..3f5dbf3 100644
--- a/dashboard/src/app/artist.component.html
+++ b/dashboard/src/app/artist.component.html
@@ -115,4 +115,9 @@
 <button type="button" class="btn btn-warning btn-top" [class.btn-top-is-visible]="atBottom"
     aria-label="Top" (click)="scrollTop()">
     <span class="glyphicon glyphicon-menu-up" style="color:white" aria-hidden="true"></span>
-</button>
\ No newline at end of file
+</button>
+<button type="button" class="btn btn-primary btn-top btn-sort" [class.btn-top-is-visible]="atBottom"
+    aria-label="Top" (click)="sort()">
+    <span class="glyphicon glyphicon-sort-by-attributes" style="color:white" aria-hidden="true"></span>
+</button>
+</div>
\ No newline at end of file
diff --git a/dashboard/src/app/artist.component.ts b/dashboard/src/app/artist.component.ts
index b6bc120..63f3b89 100644
--- a/dashboard/src/app/artist.component.ts
+++ b/dashboard/src/app/artist.component.ts
@@ -6,6 +6,8 @@ import { ElsService } from './els.service'
 import { Song } from './object/song';
 import { Artist } from './object/artist';
 
+import { SortPipe } from './sortby.pipe'
+
 @Component({
   selector: 'artist-component',
   templateUrl: './artist.component.html',
@@ -81,4 +83,8 @@ export class ArtistComponent implements OnInit {
       this.atBottom = false;
     }
   }
+
+  sort(): void {
+    this.songs = new SortPipe().transform(this.songs, 'Album', 'Track Number', 'Play Count');
+  }
 }
\ No newline at end of file