diff --git a/barker/routes.py b/barker/routes.py
index b8e2303..644bcb7 100644
--- a/barker/routes.py
+++ b/barker/routes.py
@@ -87,11 +87,11 @@ def includeme(config):
     config.add_route('users_id', '/users/{id}')
 
     config.add_route('v1_roles_new', '/v1/roles/new')
-    config.add_route('v1_roles_list', '/v1/roles/list')
     config.add_route('v1_roles_id', '/v1/roles/{id}')
+    config.add_route('v1_roles_list', '/v1/roles')
     config.add_route('roles_new', '/roles/new')
-    config.add_route('roles_list', '/roles/list')
     config.add_route('roles_id', '/roles/{id}')
+    config.add_route('roles_list', '/roles')
 
     config.add_route('v1_guest_book_new', '/v1/guest-book/new')
     config.add_route('v1_guest_book_list', '/v1/guest-book/list')
diff --git a/barker/views/role.py b/barker/views/role.py
index 2532d03..6b38d09 100644
--- a/barker/views/role.py
+++ b/barker/views/role.py
@@ -7,7 +7,7 @@ from pyramid.view import view_config
 from barker.models import Permission, Role
 
 
-@view_config(request_method='PUT', route_name='v1_roles_new', renderer='json', permission='Users', trans=True)
+@view_config(request_method='POST', route_name='v1_roles_new', renderer='json', permission='Users', trans=True)
 def save(request):
     item = Role(request.json_body['name'])
     request.dbsession.add(item)
@@ -18,7 +18,7 @@ def save(request):
     return role_info(item, permissions)
 
 
-@view_config(request_method='POST', route_name='v1_roles_id', renderer='json', permission='Users', trans=True)
+@view_config(request_method='PUT', route_name='v1_roles_id', renderer='json', permission='Users', trans=True)
 def update(request):
     id_ = request.matchdict['id']
     item = request.dbsession.query(Role).filter(Role.id == uuid.UUID(id_)).one()
diff --git a/bookie/src/app/app-routing.module.ts b/bookie/src/app/app-routing.module.ts
index 8733fe8..16d4800 100644
--- a/bookie/src/app/app-routing.module.ts
+++ b/bookie/src/app/app-routing.module.ts
@@ -21,6 +21,10 @@ const routes: Routes = [
     path: 'product-groups',
     loadChildren: () => import('./product-group/product-groups.module').then(mod => mod.ProductGroupsModule)
   },
+  {
+    path: 'roles',
+    loadChildren: () => import('./roles/roles.module').then(mod => mod.RolesModule)
+  },
   {
     path: 'running-tables',
     loadChildren: () => import('./running-tables/running-tables.module').then(mod => mod.RunningTablesModule)
diff --git a/bookie/src/app/app.module.ts b/bookie/src/app/app.module.ts
index 808323d..1c74faa 100644
--- a/bookie/src/app/app.module.ts
+++ b/bookie/src/app/app.module.ts
@@ -22,7 +22,6 @@ import {CoreModule} from "./core/core.module";
 import {ReactiveFormsModule} from "@angular/forms";
 import {SharedModule} from "./shared/shared.module";
 import {UserModule} from "./user/user.module";
-import {RoleModule} from "./role/role.module";
 
 @NgModule({
   declarations: [
@@ -49,7 +48,6 @@ import {RoleModule} from "./role/role.module";
     ReactiveFormsModule,
     CoreModule,
     SharedModule,
-    RoleModule,
     UserModule
   ],
   providers: [],
diff --git a/bookie/src/app/bills/bill-resolver.service.ts b/bookie/src/app/bills/bill-resolver.service.ts
new file mode 100644
index 0000000..6af8e97
--- /dev/null
+++ b/bookie/src/app/bills/bill-resolver.service.ts
@@ -0,0 +1,18 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
+import {Observable} from 'rxjs/internal/Observable';
+import {Table} from "../core/table";
+import {TableService} from "../tables/table.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BillResolver implements Resolve<Table[]> {
+
+  constructor(private ser: TableService, private router: Router) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Table[]> {
+    return this.ser.list();
+  }
+}
diff --git a/bookie/src/app/bills/bills-routing.module.ts b/bookie/src/app/bills/bills-routing.module.ts
new file mode 100644
index 0000000..41fa490
--- /dev/null
+++ b/bookie/src/app/bills/bills-routing.module.ts
@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AuthGuard } from "../auth/auth-guard.service";
+import { BillsComponent } from "./bills.component";
+import { BillResolver } from "./bill-resolver.service";
+
+const routes: Routes = [
+  {
+    path: 'new',
+    component: BillsComponent,
+    canActivate: [AuthGuard],
+    data: {
+      permission: 'Guest Book'
+    },
+    resolve: {
+      list: BillResolver
+    }
+  },
+  {
+    path: ':id',
+    component: BillsComponent,
+    canActivate: [AuthGuard],
+    data: {
+      permission: 'Guest Book'
+    },
+    resolve: {
+      item: BillResolver
+    }
+  }
+];
+
+@NgModule({
+  declarations: [],
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: [
+    BillResolver
+  ]
+})
+export class BillsRoutingModule { }
diff --git a/bookie/src/app/bills/bills.component.css b/bookie/src/app/bills/bills.component.css
new file mode 100644
index 0000000..f4d909a
--- /dev/null
+++ b/bookie/src/app/bills/bills.component.css
@@ -0,0 +1,10 @@
+.kot {
+  background-color: red;
+  font-weight: bold;
+}
+
+.square-button {
+  min-width: 150px;
+  max-width: 150px;
+  min-height: 150px;
+}
diff --git a/bookie/src/app/bills/bills.component.html b/bookie/src/app/bills/bills.component.html
new file mode 100644
index 0000000..618e836
--- /dev/null
+++ b/bookie/src/app/bills/bills.component.html
@@ -0,0 +1,15 @@
+<mat-card>
+  <mat-card-title-group>
+    <mat-card-title>Bill</mat-card-title>
+  </mat-card-title-group>
+  <mat-card-content fxLayout="row wrap" fxLayoutGap="grid 20px">
+    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
+      <!-- Info Column -->
+      <ng-container matColumnDef="info">
+        <mat-cell *matCellDef="let row" [class.kot]="row.isKot">{{row.info}}</mat-cell>
+      </ng-container>
+
+      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+    </mat-table>
+  </mat-card-content>
+</mat-card>
diff --git a/bookie/src/app/bills/bills.component.spec.ts b/bookie/src/app/bills/bills.component.spec.ts
new file mode 100644
index 0000000..3a37cee
--- /dev/null
+++ b/bookie/src/app/bills/bills.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BillsComponent } from './bills.component';
+
+describe('BillsComponent', () => {
+  let component: BillsComponent;
+  let fixture: ComponentFixture<BillsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BillsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BillsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/bookie/src/app/bills/bills.component.ts b/bookie/src/app/bills/bills.component.ts
new file mode 100644
index 0000000..f977c65
--- /dev/null
+++ b/bookie/src/app/bills/bills.component.ts
@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from "@angular/router";
+import { Table } from "../core/table";
+
+@Component({
+  selector: 'app-bills',
+  templateUrl: './bills.component.html',
+  styleUrls: ['./bills.component.css']
+})
+export class BillsComponent implements OnInit {
+  list: Table[];
+
+  constructor(private route: ActivatedRoute) {
+  }
+
+  ngOnInit() {
+    this.route.data
+      .subscribe((data: { list: Table[] }) => {
+        this.list = data.list;
+      });
+  }
+}
diff --git a/bookie/src/app/bills/bills.module.ts b/bookie/src/app/bills/bills.module.ts
new file mode 100644
index 0000000..a16d5c3
--- /dev/null
+++ b/bookie/src/app/bills/bills.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BillsRoutingModule } from './bills-routing.module';
+import { BillsComponent } from './bills.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatTableModule } from '@angular/material/table';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+@NgModule({
+  declarations: [BillsComponent],
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatCardModule,
+    MatTableModule,
+    BillsRoutingModule
+  ]
+})
+export class BillsModule { }
diff --git a/bookie/src/app/home/home.component.html b/bookie/src/app/home/home.component.html
index 5b387c5..a0faf26 100644
--- a/bookie/src/app/home/home.component.html
+++ b/bookie/src/app/home/home.component.html
@@ -19,6 +19,9 @@
 <a mat-raised-button  routerLink="/taxes">
   Taxes
 </a>
+<a mat-raised-button  routerLink="/roles">
+  Roles
+</a>
 <a mat-raised-button  routerLink="/logout" *ngIf="nameObject | async as name">
   <mat-icon>account_box</mat-icon>
   Logout {{name}}
diff --git a/bookie/src/app/role/role-list/role-list-datasource.ts b/bookie/src/app/role/role-list/role-list-datasource.ts
deleted file mode 100644
index 8d7a833..0000000
--- a/bookie/src/app/role/role-list/role-list-datasource.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import {DataSource} from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import {map} from 'rxjs/operators';
-import {merge, Observable, of as observableOf} from 'rxjs';
-import {Role} from '../role';
-
-export class RoleListDataSource extends DataSource<Role> {
-
-  constructor(private paginator: MatPaginator, private sort: MatSort, public data: Role[]) {
-    super();
-  }
-
-  connect(): Observable<Role[]> {
-    const dataMutations = [
-      observableOf(this.data),
-      this.paginator.page,
-      this.sort.sortChange
-    ];
-
-    // Set the paginators length
-    this.paginator.length = this.data.length;
-
-    return merge(...dataMutations).pipe(map(() => {
-      return this.getPagedData(this.getSortedData([...this.data]));
-    }));
-  }
-
-  disconnect() {
-  }
-
-  private getPagedData(data: Role[]) {
-    const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
-    return data.splice(startIndex, this.paginator.pageSize);
-  }
-
-  private getSortedData(data: Role[]) {
-    if (!this.sort.active || this.sort.direction === '') {
-      return data;
-    }
-
-    return data.sort((a, b) => {
-      const isAsc = this.sort.direction === 'asc';
-      switch (this.sort.active) {
-        case 'name':
-          return compare(a.name, b.name, isAsc);
-        case 'id':
-          return compare(+a.id, +b.id, isAsc);
-        default:
-          return 0;
-      }
-    });
-  }
-}
-
-/** Simple sort comparator for example ID/Name columns (for user-side sorting). */
-function compare(a, b, isAsc) {
-  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-}
diff --git a/bookie/src/app/role/role-detail/role-detail.component.css b/bookie/src/app/roles/role-detail/role-detail.component.css
similarity index 100%
rename from bookie/src/app/role/role-detail/role-detail.component.css
rename to bookie/src/app/roles/role-detail/role-detail.component.css
diff --git a/bookie/src/app/role/role-detail/role-detail.component.html b/bookie/src/app/roles/role-detail/role-detail.component.html
similarity index 100%
rename from bookie/src/app/role/role-detail/role-detail.component.html
rename to bookie/src/app/roles/role-detail/role-detail.component.html
diff --git a/bookie/src/app/roles/role-detail/role-detail.component.spec.ts b/bookie/src/app/roles/role-detail/role-detail.component.spec.ts
new file mode 100644
index 0000000..9c216c1
--- /dev/null
+++ b/bookie/src/app/roles/role-detail/role-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {RoleDetailComponent} from './role-detail.component';
+
+describe('RoleDetailComponent', () => {
+  let component: RoleDetailComponent;
+  let fixture: ComponentFixture<RoleDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [RoleDetailComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RoleDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/bookie/src/app/role/role-detail/role-detail.component.ts b/bookie/src/app/roles/role-detail/role-detail.component.ts
similarity index 81%
rename from bookie/src/app/role/role-detail/role-detail.component.ts
rename to bookie/src/app/roles/role-detail/role-detail.component.ts
index c3a782f..162ea79 100644
--- a/bookie/src/app/role/role-detail/role-detail.component.ts
+++ b/bookie/src/app/roles/role-detail/role-detail.component.ts
@@ -1,12 +1,11 @@
-import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
-
-import {RoleService} from '../role.service';
-import {Role} from '../role';
-import {ToasterService} from '../../core/toaster.service';
-import {ConfirmDialogComponent} from '../../shared/confirm-dialog/confirm-dialog.component';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RoleService } from '../role.service';
+import { Role } from '../role';
+import { ToasterService } from '../../core/toaster.service';
+import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import {FormArray, FormBuilder, FormGroup} from '@angular/forms';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-role-detail',
@@ -62,7 +61,7 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
       .subscribe(
         (result) => {
           this.toaster.show('Success', '');
-          this.router.navigateByUrl('/roles/list');
+          this.router.navigateByUrl('/roles');
         },
         (error) => {
           this.toaster.show('Danger', error.error);
@@ -75,7 +74,7 @@ export class RoleDetailComponent implements OnInit, AfterViewInit {
       .subscribe(
         (result) => {
           this.toaster.show('Success', '');
-          this.router.navigateByUrl('/Roles');
+          this.router.navigateByUrl('/roles');
         },
         (error) => {
           this.toaster.show('Danger', error.error);
diff --git a/bookie/src/app/roles/role-list-resolver.service.spec.ts b/bookie/src/app/roles/role-list-resolver.service.spec.ts
new file mode 100644
index 0000000..50794e6
--- /dev/null
+++ b/bookie/src/app/roles/role-list-resolver.service.spec.ts
@@ -0,0 +1,15 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {RoleListResolver} from './role-list-resolver.service';
+
+describe('RoleListResolver', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [RoleListResolver]
+    });
+  });
+
+  it('should be created', inject([RoleListResolver], (service: RoleListResolver) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/bookie/src/app/role/role-list-resolver.service.ts b/bookie/src/app/roles/role-list-resolver.service.ts
similarity index 100%
rename from bookie/src/app/role/role-list-resolver.service.ts
rename to bookie/src/app/roles/role-list-resolver.service.ts
diff --git a/bookie/src/app/roles/role-list/role-list-datasource.ts b/bookie/src/app/roles/role-list/role-list-datasource.ts
new file mode 100644
index 0000000..8b95577
--- /dev/null
+++ b/bookie/src/app/roles/role-list/role-list-datasource.ts
@@ -0,0 +1,17 @@
+import { DataSource } from '@angular/cdk/collections';
+import { Observable, of as observableOf } from 'rxjs';
+import { Role } from '../role';
+
+export class RoleListDataSource extends DataSource<Role> {
+
+  constructor(public data: Role[]) {
+    super();
+  }
+
+  connect(): Observable<Role[]> {
+    return observableOf(this.data);
+  }
+
+  disconnect() {
+  }
+}
diff --git a/bookie/src/app/role/role-list/role-list.component.css b/bookie/src/app/roles/role-list/role-list.component.css
similarity index 100%
rename from bookie/src/app/role/role-list/role-list.component.css
rename to bookie/src/app/roles/role-list/role-list.component.css
diff --git a/bookie/src/app/role/role-list/role-list.component.html b/bookie/src/app/roles/role-list/role-list.component.html
similarity index 100%
rename from bookie/src/app/role/role-list/role-list.component.html
rename to bookie/src/app/roles/role-list/role-list.component.html
diff --git a/bookie/src/app/roles/role-list/role-list.component.spec.ts b/bookie/src/app/roles/role-list/role-list.component.spec.ts
new file mode 100644
index 0000000..4de7c52
--- /dev/null
+++ b/bookie/src/app/roles/role-list/role-list.component.spec.ts
@@ -0,0 +1,23 @@
+import {ComponentFixture, fakeAsync, TestBed} from '@angular/core/testing';
+
+import {RoleListComponent} from './role-list.component';
+
+describe('RoleListComponent', () => {
+  let component: RoleListComponent;
+  let fixture: ComponentFixture<RoleListComponent>;
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [RoleListComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(RoleListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should compile', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/bookie/src/app/role/role-list/role-list.component.ts b/bookie/src/app/roles/role-list/role-list.component.ts
similarity index 51%
rename from bookie/src/app/role/role-list/role-list.component.ts
rename to bookie/src/app/roles/role-list/role-list.component.ts
index bfd1621..4a503fd 100644
--- a/bookie/src/app/role/role-list/role-list.component.ts
+++ b/bookie/src/app/roles/role-list/role-list.component.ts
@@ -1,9 +1,7 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
-import {RoleListDataSource} from './role-list-datasource';
-import {Role} from '../role';
-import {ActivatedRoute} from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { RoleListDataSource } from './role-list-datasource';
+import { Role } from '../role';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-role-list',
@@ -11,8 +9,6 @@ import {ActivatedRoute} from '@angular/router';
   styleUrls: ['./role-list.component.css']
 })
 export class RoleListComponent implements OnInit {
-  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  @ViewChild(MatSort, { static: true }) sort: MatSort;
   dataSource: RoleListDataSource;
   list: Role[];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
@@ -26,6 +22,6 @@ export class RoleListComponent implements OnInit {
       .subscribe((data: { list: Role[] }) => {
         this.list = data.list;
       });
-    this.dataSource = new RoleListDataSource(this.paginator, this.sort, this.list);
+    this.dataSource = new RoleListDataSource(this.list);
   }
 }
diff --git a/bookie/src/app/roles/role-resolver.service.spec.ts b/bookie/src/app/roles/role-resolver.service.spec.ts
new file mode 100644
index 0000000..02f06ff
--- /dev/null
+++ b/bookie/src/app/roles/role-resolver.service.spec.ts
@@ -0,0 +1,15 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {RoleResolver} from './role-resolver.service';
+
+describe('RoleResolver', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [RoleResolver]
+    });
+  });
+
+  it('should be created', inject([RoleResolver], (service: RoleResolver) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/bookie/src/app/role/role-resolver.service.ts b/bookie/src/app/roles/role-resolver.service.ts
similarity index 100%
rename from bookie/src/app/role/role-resolver.service.ts
rename to bookie/src/app/roles/role-resolver.service.ts
diff --git a/bookie/src/app/roles/role.service.spec.ts b/bookie/src/app/roles/role.service.spec.ts
new file mode 100644
index 0000000..8bfe235
--- /dev/null
+++ b/bookie/src/app/roles/role.service.spec.ts
@@ -0,0 +1,15 @@
+import {inject, TestBed} from '@angular/core/testing';
+
+import {RoleService} from './role.service';
+
+describe('RoleService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [RoleService]
+    });
+  });
+
+  it('should be created', inject([RoleService], (service: RoleService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/bookie/src/app/role/role.service.ts b/bookie/src/app/roles/role.service.ts
similarity index 77%
rename from bookie/src/app/role/role.service.ts
rename to bookie/src/app/roles/role.service.ts
index bc9e575..cd5a3ee 100644
--- a/bookie/src/app/role/role.service.ts
+++ b/bookie/src/app/roles/role.service.ts
@@ -28,21 +28,29 @@ export class RoleService {
 
   list(): Observable<Role[]> {
     const options = {params: new HttpParams().set('l', '')};
-    return <Observable<Role[]>>this.http.get<Role[]>(`${url}/list`, options)
+    return <Observable<Role[]>>this.http.get<Role[]>(url, options)
+      .pipe(
+        catchError(this.log.handleError(serviceName, 'list'))
+      );
+  }
+
+  listOfNames(): Observable<string[]> {
+    const options = {params: new HttpParams().set('n', '')};
+    return <Observable<string[]>>this.http.get<string[]>(url, options)
       .pipe(
         catchError(this.log.handleError(serviceName, 'list'))
       );
   }
 
   save(role: Role): Observable<Role> {
-    return <Observable<Role>>this.http.put<Role>(`${url}/new`, role, httpOptions)
+    return <Observable<Role>>this.http.post<Role>(`${url}/new`, role, httpOptions)
       .pipe(
         catchError(this.log.handleError(serviceName, 'save'))
       );
   }
 
   update(role: Role): Observable<Role> {
-    return <Observable<Role>>this.http.post<Role>(`${url}/${role.id}`, role, httpOptions)
+    return <Observable<Role>>this.http.put<Role>(`${url}/${role.id}`, role, httpOptions)
       .pipe(
         catchError(this.log.handleError(serviceName, 'update'))
       );
diff --git a/bookie/src/app/role/role.ts b/bookie/src/app/roles/role.ts
similarity index 100%
rename from bookie/src/app/role/role.ts
rename to bookie/src/app/roles/role.ts
diff --git a/bookie/src/app/roles/roles-routing.module.spec.ts b/bookie/src/app/roles/roles-routing.module.spec.ts
new file mode 100644
index 0000000..ce0f799
--- /dev/null
+++ b/bookie/src/app/roles/roles-routing.module.spec.ts
@@ -0,0 +1,13 @@
+import { RolesRoutingModule } from './roles-routing.module';
+
+describe('RolesRoutingModule', () => {
+  let rolesRoutingModule: RolesRoutingModule;
+
+  beforeEach(() => {
+    rolesRoutingModule = new RolesRoutingModule();
+  });
+
+  it('should create an instance', () => {
+    expect(rolesRoutingModule).toBeTruthy();
+  });
+});
diff --git a/bookie/src/app/role/role-routing.module.ts b/bookie/src/app/roles/roles-routing.module.ts
similarity index 91%
rename from bookie/src/app/role/role-routing.module.ts
rename to bookie/src/app/roles/roles-routing.module.ts
index db0fc8c..6f0728c 100644
--- a/bookie/src/app/role/role-routing.module.ts
+++ b/bookie/src/app/roles/roles-routing.module.ts
@@ -9,7 +9,7 @@ import {AuthGuard} from '../auth/auth-guard.service';
 
 const roleRoutes: Routes = [
   {
-    path: 'roles/list',
+    path: '',
     component: RoleListComponent,
     canActivate: [AuthGuard],
     data: {
@@ -20,7 +20,7 @@ const roleRoutes: Routes = [
     }
   },
   {
-    path: 'roles/new',
+    path: 'new',
     component: RoleDetailComponent,
     canActivate: [AuthGuard],
     data: {
@@ -31,7 +31,7 @@ const roleRoutes: Routes = [
     }
   },
   {
-    path: 'roles/:id',
+    path: ':id',
     component: RoleDetailComponent,
     canActivate: [AuthGuard],
     data: {
@@ -57,5 +57,5 @@ const roleRoutes: Routes = [
     RoleResolver
   ]
 })
-export class RoleRoutingModule {
+export class RolesRoutingModule {
 }
diff --git a/bookie/src/app/roles/roles.module.spec.ts b/bookie/src/app/roles/roles.module.spec.ts
new file mode 100644
index 0000000..4a8bd79
--- /dev/null
+++ b/bookie/src/app/roles/roles.module.spec.ts
@@ -0,0 +1,13 @@
+import { RolesModule } from './roles.module';
+
+describe('RolesModule', () => {
+  let rolesModule: RolesModule;
+
+  beforeEach(() => {
+    rolesModule = new RolesModule();
+  });
+
+  it('should create an instance', () => {
+    expect(rolesModule).toBeTruthy();
+  });
+});
diff --git a/bookie/src/app/role/role.module.ts b/bookie/src/app/roles/roles.module.ts
similarity index 93%
rename from bookie/src/app/role/role.module.ts
rename to bookie/src/app/roles/roles.module.ts
index efaf017..4605ed0 100644
--- a/bookie/src/app/role/role.module.ts
+++ b/bookie/src/app/roles/roles.module.ts
@@ -3,7 +3,7 @@ import {CommonModule} from '@angular/common';
 
 import {RoleListComponent} from './role-list/role-list.component';
 import {RoleDetailComponent} from './role-detail/role-detail.component';
-import {RoleRoutingModule} from './role-routing.module';
+import {RolesRoutingModule} from './roles-routing.module';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -36,12 +36,12 @@ import {FlexLayoutModule} from '@angular/flex-layout';
     MatTableModule,
     ReactiveFormsModule,
     SharedModule,
-    RoleRoutingModule
+    RolesRoutingModule
   ],
   declarations: [
     RoleListComponent,
     RoleDetailComponent
   ]
 })
-export class RoleModule {
+export class RolesModule {
 }