diff --git a/src/app/lazyload.ts b/src/app/lazyload.ts
new file mode 100644
index 0000000..5dae5c5
--- /dev/null
+++ b/src/app/lazyload.ts
@@ -0,0 +1,6 @@
+export const lazyload = [
+  {
+    path: 'song',
+    loadChildren: './modules/song/song.module#SongModule',
+  }
+];
diff --git a/src/app/models/song.models.ts b/src/app/models/song.models.ts
new file mode 100644
index 0000000..118a59c
--- /dev/null
+++ b/src/app/models/song.models.ts
@@ -0,0 +1,6 @@
+export class ModelSongs {
+  songName: string;
+  id: number;
+  md5: string;
+  time: string;
+}
diff --git a/src/app/models/urls.models.ts b/src/app/models/urls.models.ts
new file mode 100644
index 0000000..115aa3b
--- /dev/null
+++ b/src/app/models/urls.models.ts
@@ -0,0 +1,7 @@
+export class Urls {
+
+  static get song() {
+    return 'http://192.168.43.30:5000/mods'
+  }
+
+}
diff --git a/src/app/modules/material/material.module.ts b/src/app/modules/material/material.module.ts
new file mode 100644
index 0000000..1b81880
--- /dev/null
+++ b/src/app/modules/material/material.module.ts
@@ -0,0 +1,82 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  MatBadgeModule,
+  MatProgressSpinnerModule,
+  MatCheckboxModule,
+  MatAutocompleteModule,
+  MatFormFieldModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatRadioModule,
+  MatRippleModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatSortModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+} from '@angular/material';
+
+const material = [
+    MatBadgeModule,
+    MatProgressSpinnerModule,
+    MatCheckboxModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatFormFieldModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ...material
+  ],
+  exports: material,
+  declarations: []
+})
+export class MaterialModule { }
diff --git a/src/app/modules/song/song.component.css b/src/app/modules/song/song.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/modules/song/song.component.html b/src/app/modules/song/song.component.html
new file mode 100644
index 0000000..45f2399
--- /dev/null
+++ b/src/app/modules/song/song.component.html
@@ -0,0 +1,16 @@
+<div style="text-align: center">
+  <table style="margin: 0 auto" *ngFor="let song of commonService.songArray" class="mat-elevation-z8">
+
+    <tr>
+      <th>No.</th>
+      <th>Name</th>
+      <th>Time</th>
+    </tr>
+      <tr>
+        <td> {{song.id}} </td>
+        <td style="width: 500px; text-align: center"> {{song.songName}} </td>
+        <td> {{song.time}} </td>
+      </tr>
+
+  </table>
+</div>
diff --git a/src/app/modules/song/song.component.scss b/src/app/modules/song/song.component.scss
new file mode 100644
index 0000000..c858d94
--- /dev/null
+++ b/src/app/modules/song/song.component.scss
@@ -0,0 +1,5 @@
+table {
+  border: 1px solid black;
+}
+
+
diff --git a/src/app/modules/song/song.component.spec.ts b/src/app/modules/song/song.component.spec.ts
new file mode 100644
index 0000000..81b1c32
--- /dev/null
+++ b/src/app/modules/song/song.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SongComponent } from './song.component';
+
+describe('SongComponent', () => {
+  let component: SongComponent;
+  let fixture: ComponentFixture<SongComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SongComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SongComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/modules/song/song.component.ts b/src/app/modules/song/song.component.ts
new file mode 100644
index 0000000..7b602ed
--- /dev/null
+++ b/src/app/modules/song/song.component.ts
@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import {RestService} from '../../services/rest.services';
+import {Urls} from '../../models/urls.models';
+import {CommonService} from '../../services/common.service';
+import {ModelSongs} from '../../models/song.models';
+
+@Component({
+  selector: 'app-song',
+  templateUrl: './song.component.html',
+  styleUrls: ['./song.component.scss']
+})
+export class SongComponent implements OnInit {
+
+  constructor(
+    private restService: RestService,
+    public commonService: CommonService,
+  ) { }
+
+  ngOnInit() {
+    this.restService.get(Urls.song).subscribe((response) => {
+      this.commonService.songArray = response.map(song => {
+        let result = new ModelSongs();
+        result.songName = song.filename;
+        result.id = song.id;
+        result.md5 = song.md5;
+        result.time = song.time;
+        return result
+      })
+      console.log(this.commonService.songArray)
+    })
+  }
+
+}
diff --git a/src/app/modules/song/song.module.ts b/src/app/modules/song/song.module.ts
new file mode 100644
index 0000000..a5aae55
--- /dev/null
+++ b/src/app/modules/song/song.module.ts
@@ -0,0 +1,23 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import {routesSong} from './song.route';
+import {SongComponent} from './song.component';
+import {MaterialModule} from '../material/material.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MaterialModule,
+    RouterModule.forChild(routesSong),
+  ],
+  declarations: [
+    SongComponent
+  ],
+  exports: [
+    SongComponent
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [],
+})
+export class SongModule { }
diff --git a/src/app/modules/song/song.route.ts b/src/app/modules/song/song.route.ts
new file mode 100644
index 0000000..2901aa7
--- /dev/null
+++ b/src/app/modules/song/song.route.ts
@@ -0,0 +1,11 @@
+import { Routes } from "@angular/router"
+import {SongComponent} from './song.component';
+
+
+export const routesSong: Routes = [
+  {
+    path: '',
+    component: SongComponent,
+    children: []
+  }
+];
diff --git a/src/app/routers.register.ts b/src/app/routers.register.ts
new file mode 100644
index 0000000..0483cec
--- /dev/null
+++ b/src/app/routers.register.ts
@@ -0,0 +1,11 @@
+import { lazyload } from './lazyload'
+import { Routes } from '@angular/router';
+
+export const appRoutes: Routes = [
+  {
+    path: '',
+    redirectTo: '/',
+    pathMatch: 'full'
+  },
+  ...lazyload
+];
diff --git a/src/app/services/common.service.ts b/src/app/services/common.service.ts
new file mode 100644
index 0000000..e0062aa
--- /dev/null
+++ b/src/app/services/common.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+// import { Http, Response, Headers, RequestOptions } from "@angular/http";
+
+
+@Injectable()
+export class CommonService {
+
+  songArray: Array<any> = [];
+
+  constructor() {}
+
+}
diff --git a/src/app/services/rest.services.ts b/src/app/services/rest.services.ts
new file mode 100644
index 0000000..27cd0b3
--- /dev/null
+++ b/src/app/services/rest.services.ts
@@ -0,0 +1,112 @@
+import { Injectable } from '@angular/core';
+import { Http, Response, Headers, RequestOptions } from "@angular/http";
+
+import { Observable } from 'rxjs/Observable'
+import 'rxjs/add/operator/map'
+import "rxjs/add/operator/catch"
+import "rxjs/add/operator/finally"
+import "rxjs/add/observable/throw"
+
+
+@Injectable()
+export class RestService {
+
+  public flagLoading = false;
+
+
+  constructor(
+    private http: Http,
+  ) {}
+
+  // Отправка заголовка
+  getHeaders(headers={}): Headers {
+    let a: undefined = undefined
+    if (headers == 'rocket') {
+      return
+    }
+    let _headers = new Headers();
+    if (Object.values(headers)[0]){
+      let token = Object.values(headers)[0];
+      let lang = Object.values(headers)[1];
+      if (lang) _headers.append('lang', lang.toString());
+      _headers.append('Authorization', token.toString());
+      _headers.append('Content-Type', 'application/json');
+    }
+    else if (Object.values(headers)) {
+      let token = Object.values(headers);
+      _headers.append('Authorization', token.toString());
+      _headers.append('Content-Type', 'application/json');
+    }
+    else {
+      Object.entries(headers).forEach((k, v) => {
+        _headers.append(k.toString(), v.toString());
+      });
+    }
+    return _headers;
+  }
+
+  getHeadersRocket(headers={}): Headers {
+    let token = Object.values(headers)[0];
+    let id = Object.values(headers)[1];
+    let _headers = new Headers();
+    _headers.append('x-auth-token', token.toString());
+    _headers.append('x-user-id', id.toString());
+    return _headers;
+  }
+
+
+  // Get запрос
+  get(url, data = {}, headers={}): Observable<any> {
+    if (Object.keys(data).length) {
+      url = url + "?" + Object.entries(data).map(([k, v]) => {return `${k}=${v}`}).join(";")
+    }
+    this.flagLoading = true;
+    return this.http.get(encodeURI(url), new RequestOptions({headers: this.getHeaders(headers)}))
+      .map(this.mapper)
+      .catch(this.handleError)
+      .finally(()=>this.flagLoading = false)
+  }
+
+  // Post запрос
+  post(url, body={}, headers={}):Observable<any> {
+    this.flagLoading = true;
+    return this.http.post(
+      encodeURI(url),
+      body,
+      new RequestOptions({headers: this.getHeaders(headers)}))
+      .map(this.mapper)
+      .catch(this.handleError)
+      .finally(()=>this.flagLoading = false)
+  }
+
+  getRocket(url, data = {}, headers={}): Observable<any> {
+    if (Object.keys(data).length) {
+      url = url + "?" + Object.entries(data).map(([k, v]) => {return `${k}=${v}`}).join("&")
+    }
+    this.flagLoading = true;
+    return this.http.get(encodeURI(url), new RequestOptions({headers: this.getHeadersRocket(headers)}))
+      .map(this.mapper)
+      .catch(this.handleError)
+      .finally(()=>this.flagLoading = false)
+  }
+
+  postRocket(url, body={}, headers={}):Observable<any> {
+    this.flagLoading = true;
+    return this.http.post(
+      encodeURI(url),
+      body,
+      new RequestOptions({headers: this.getHeadersRocket(headers)}))
+      .map(this.mapper)
+      .catch(this.handleError)
+      .finally(()=>this.flagLoading = false)
+  }
+
+  private handleError(error): Observable<any> {
+    return Observable.throw(error.message || error)
+  }
+
+  private mapper(res: Response): any {
+    const body: any = res.json();
+    return body || {}
+  }
+}