diff --git a/angular/src/app/concert/concert.component.css b/angular/src/app/concert/concert.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/angular/src/app/concert/concert.component.html b/angular/src/app/concert/concert.component.html
new file mode 100644
index 0000000..e62a34a
--- /dev/null
+++ b/angular/src/app/concert/concert.component.html
@@ -0,0 +1,3 @@
+
+ concert works!
+
diff --git a/angular/src/app/concert/concert.component.spec.ts b/angular/src/app/concert/concert.component.spec.ts
new file mode 100644
index 0000000..36a400d
--- /dev/null
+++ b/angular/src/app/concert/concert.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConcertComponent } from './concert.component';
+
+describe('ConcertComponent', () => {
+ let component: ConcertComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ ConcertComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ConcertComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/angular/src/app/concert/concert.component.ts b/angular/src/app/concert/concert.component.ts
new file mode 100644
index 0000000..82a50a5
--- /dev/null
+++ b/angular/src/app/concert/concert.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-concert',
+ templateUrl: './concert.component.html',
+ styleUrls: ['./concert.component.css']
+})
+export class ConcertComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/angular/src/app/genretrain/genretrain.component.css b/angular/src/app/genretrain/genretrain.component.css
new file mode 100644
index 0000000..8271630
--- /dev/null
+++ b/angular/src/app/genretrain/genretrain.component.css
@@ -0,0 +1,25 @@
+.genres-list {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-row-gap: 10px;
+ justify-items: center;
+}
+
+.genre-circle {
+ width: 170px;
+ height: 170px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /*
+ background: #314755;
+ background: -webkit-linear-gradient(to right, #26a0da, #314755);
+ background: linear-gradient(to right, #26a0da, #314755);
+ */
+}
+
+.selected {
+ filter: contrast(200%);
+}
\ No newline at end of file
diff --git a/angular/src/app/genretrain/genretrain.component.html b/angular/src/app/genretrain/genretrain.component.html
new file mode 100644
index 0000000..3d9d27e
--- /dev/null
+++ b/angular/src/app/genretrain/genretrain.component.html
@@ -0,0 +1,7 @@
+
+
+
\ No newline at end of file
diff --git a/angular/src/app/genretrain/genretrain.component.spec.ts b/angular/src/app/genretrain/genretrain.component.spec.ts
new file mode 100644
index 0000000..6ca8c97
--- /dev/null
+++ b/angular/src/app/genretrain/genretrain.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GenretrainComponent } from './genretrain.component';
+
+describe('GenretrainComponent', () => {
+ let component: GenretrainComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ GenretrainComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(GenretrainComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/angular/src/app/genretrain/genretrain.component.ts b/angular/src/app/genretrain/genretrain.component.ts
new file mode 100644
index 0000000..0a57ffd
--- /dev/null
+++ b/angular/src/app/genretrain/genretrain.component.ts
@@ -0,0 +1,77 @@
+import { Component, OnInit } from '@angular/core';
+
+import { of, Observable } from 'rxjs';
+
+import { MusicService } from '../services/music.service';
+
+@Component({
+ selector: 'app-genretrain',
+ templateUrl: './genretrain.component.html',
+ styleUrls: ['./genretrain.component.css']
+})
+export class GenretrainComponent implements OnInit {
+
+ offlineTesting: boolean = false;
+ genres$: Observable