diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.css b/static/src/app/pub/decoration-overview/decoration-overview.component.css
index c7d4078..6d3d223 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.css
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.css
@@ -22,7 +22,7 @@ h1, h3 {
 }
 
 .fraction-global > h3 {
-  color: #666666;
+  color: #222222;
 }
 
 .fraction-left {
diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.ts b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
index 74cd180..c13a2da 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts
@@ -7,6 +7,8 @@ import {CSSHelpers} from '../../utils/global.helpers';
 import {RouteConfig} from '../../app.config';
 import {Decoration} from '../../models/model-interfaces';
 import {DecorationService} from '../../services/army-management/decoration.service';
+import {MatBottomSheet} from '@angular/material';
+import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.component';
 
 
 @Component({
@@ -29,6 +31,7 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
   constructor(private router: Router,
               private route: ActivatedRoute,
               private decorationService: DecorationService,
+              private bottomSheet: MatBottomSheet,
               @Inject(DOCUMENT) private document) {
   }
 
@@ -46,7 +49,7 @@ export class DecorationOverviewComponent implements OnInit, OnDestroy {
   };
 
   select(decoration: Decoration) {
-    this.router.navigate(['../find/award', decoration._id], {relativeTo: this.route});
+    this.bottomSheet.open(UserListSheetComponent, {data: { decoration: decoration }});
   }
 
   ngOnDestroy() {
diff --git a/static/src/app/pub/public.module.ts b/static/src/app/pub/public.module.ts
index 428b60b..f1f1a63 100644
--- a/static/src/app/pub/public.module.ts
+++ b/static/src/app/pub/public.module.ts
@@ -6,10 +6,15 @@ import {pubRouterModule, pubRoutingComponents} from './public.routing';
 import {DecorationService} from '../services/army-management/decoration.service';
 import {MatTableModule} from '@angular/material/table';
 import {MatCardModule} from '@angular/material/card';
+import {MatBottomSheetModule} from '@angular/material/bottom-sheet';
+import {MatListModule} from '@angular/material/list';
+import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
 
 @NgModule({
   declarations: pubRoutingComponents,
-  imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, pubRouterModule],
+  entryComponents: [UserListSheetComponent],
+  imports: [CommonModule, SharedModule, MatTableModule, MatCardModule, MatBottomSheetModule, MatListModule,
+    pubRouterModule],
   providers: [DecorationService, RankService]
 })
 export class PublicModule {
diff --git a/static/src/app/pub/public.routing.ts b/static/src/app/pub/public.routing.ts
index 918c161..7a67b93 100644
--- a/static/src/app/pub/public.routing.ts
+++ b/static/src/app/pub/public.routing.ts
@@ -4,8 +4,8 @@ import {ModuleWithProviders} from '@angular/core';
 import {DecorationOverviewComponent} from './decoration-overview/decoration-overview.component';
 import {PublicComponent} from './public.component';
 import {DecorationPanelComponent} from './decoration-overview/decoration-panel/decoration-panel.component';
-import {TraceOverviewComponent} from './trace-overview/trace-overview.component';
 import {RankPanelComponent} from './rank-overview/rank-panel/rank-panel.component';
+import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
 
 export const publicRoutes: Routes = [
   {
@@ -18,20 +18,10 @@ export const publicRoutes: Routes = [
     component: DecorationOverviewComponent,
     outlet: 'right'
   },
-  {
-    path: 'find/rank/:id',
-    component: TraceOverviewComponent,
-    outlet: 'right'
-  },
-  {
-    path: 'find/award/:id',
-    component: TraceOverviewComponent,
-    outlet: 'right'
-  },
 ];
 
 export const pubRouterModule: ModuleWithProviders = RouterModule.forChild(publicRoutes);
 
 export const pubRoutingComponents = [PublicComponent, RankOverviewComponent, DecorationOverviewComponent,
-  DecorationPanelComponent, TraceOverviewComponent, RankPanelComponent];
+  DecorationPanelComponent, RankPanelComponent, UserListSheetComponent];
 
diff --git a/static/src/app/pub/rank-overview/rank-overview.component.html b/static/src/app/pub/rank-overview/rank-overview.component.html
index c7f792a..937afed 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.html
+++ b/static/src/app/pub/rank-overview/rank-overview.component.html
@@ -16,7 +16,6 @@
         <td mat-cell *matCellDef="let element"> {{element.name}}</td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
     </table>
   </div>
@@ -36,7 +35,6 @@
         <td mat-cell *matCellDef="let element">{{element.name}}</td>
       </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
     </table>
   </div>
diff --git a/static/src/app/pub/rank-overview/rank-overview.component.ts b/static/src/app/pub/rank-overview/rank-overview.component.ts
index 86c9139..ebb174a 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.ts
+++ b/static/src/app/pub/rank-overview/rank-overview.component.ts
@@ -6,6 +6,8 @@ import {CSSHelpers} from '../../utils/global.helpers';
 import {RouteConfig} from '../../app.config';
 import {Rank} from '../../models/model-interfaces';
 import {RankService} from '../../services/army-management/rank.service';
+import {MatBottomSheet} from '@angular/material';
+import {UserListSheetComponent} from '../user-list-sheet/user-list-sheet.component';
 
 
 @Component({
@@ -26,6 +28,7 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
   constructor(private router: Router,
               private route: ActivatedRoute,
               private rankService: RankService,
+              private bottomSheet: MatBottomSheet,
               @Inject(DOCUMENT) private document) {
   }
 
@@ -42,10 +45,9 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
   };
 
   selectRow(rank: Rank) {
-    this.router.navigate(['../find/rank', rank._id], {relativeTo: this.route});
+    this.bottomSheet.open(UserListSheetComponent, {data: { rank: rank }});
   }
 
-
   ngOnDestroy() {
     if (!this.router.url.includes(RouteConfig.overviewPath)) {
       this.document.getElementById('right').setAttribute('style', '');
diff --git a/static/src/app/pub/trace-overview/trace-overview.component.css b/static/src/app/pub/trace-overview/trace-overview.component.css
deleted file mode 100644
index e8b564f..0000000
--- a/static/src/app/pub/trace-overview/trace-overview.component.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.tracer-container {
-  text-align: center;
-  max-width: 1100px;
-  min-width: 800px;
-  position: relative;
-  margin: auto auto 25px;
-  min-height: calc(100vh - 95px);
-}
-
-.return-button {
-  display: block;
-  width: auto;
-  float: left;
-}
-
-.show-panel {
-  display: inline-block;
-  margin: inherit;
-}
-
-:host /deep/ .show-panel mat-card {
-  cursor: default;
-}
-
-.decoration-show-panel {
-  height: 250px;
-}
-
-.user-table-container {
-  height: 100%;
-}
-
-table.mat-table {
-  width: 50%;
-  margin: auto;
-  text-align: left;
-  background: rgba(255, 255, 255, 0.6);
-}
-
-table.mat-table:hover {
-  background: rgba(255, 255, 255, 0.6);
-}
-
-:host /deep/ tr.mat-row:hover {
-  background: #ffffff;
-  cursor: pointer;
-}
diff --git a/static/src/app/pub/trace-overview/trace-overview.component.html b/static/src/app/pub/trace-overview/trace-overview.component.html
deleted file mode 100644
index 9fb4195..0000000
--- a/static/src/app/pub/trace-overview/trace-overview.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div class="tracer-container">
-  <h1>Alle aktiven Teilnehmer mit {{isRank ? 'Rang' : 'Auszeichnung'}}</h1>
-
-  <div class="return-button" style="position:absolute;">
-    <button mat-raised-button (click)="navigateBack()">
-      <mat-icon svgIcon="chevron-left"></mat-icon>Zurück
-    </button>
-  </div>
-
-  <div class="show-panel"
-       *ngIf="isRank">
-    <cc-rank-panel [rank]="traceItem">
-    </cc-rank-panel>
-  </div>
-  <div class="show-panel decoration-show-panel"
-       *ngIf="!isRank">
-    <cc-decoration-panel [decoration]="traceItem">
-    </cc-decoration-panel>
-  </div>
-
-  <div class="user-table-container">
-    <table mat-table [dataSource]="users" class="mat-elevation-z8">
-
-      <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef>Name</th>
-        <td mat-cell *matCellDef="let element">{{element.username}}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="fraction">
-        <th mat-header-cell *matHeaderCellDef>Fraktion</th>
-        <td mat-cell *matCellDef="let element"
-            [style.color]="element.squadId.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR :fraction.COLOR_OPFOR">
-          {{element.squadId.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
-        </td>
-      </ng-container>
-
-      <ng-container matColumnDef="squadName">
-        <th mat-header-cell *matHeaderCellDef>Squad</th>
-        <td mat-cell *matCellDef="let element">{{element.squadId.name}}</td>
-      </ng-container>
-
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectUser(row)"></tr>
-    </table>
-  </div>
-</div>
diff --git a/static/src/app/pub/trace-overview/trace-overview.component.ts b/static/src/app/pub/trace-overview/trace-overview.component.ts
deleted file mode 100644
index 049eb28..0000000
--- a/static/src/app/pub/trace-overview/trace-overview.component.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
-import {DOCUMENT, Location} from '@angular/common';
-import {Fraction} from '../../utils/fraction.enum';
-import {CSSHelpers} from '../../utils/global.helpers';
-import {RouteConfig} from '../../app.config';
-import {Decoration, Rank, User} from '../../models/model-interfaces';
-import {UserService} from '../../services/army-management/user.service';
-import {RankService} from '../../services/army-management/rank.service';
-import {DecorationService} from '../../services/army-management/decoration.service';
-
-
-@Component({
-  selector: 'cc-trace-overview',
-  templateUrl: './trace-overview.component.html',
-  styleUrls: ['./trace-overview.component.css']
-})
-export class TraceOverviewComponent implements OnInit, OnDestroy {
-
-  traceItem: Rank | Decoration = {};
-
-  users: User[];
-
-  isRank = true;
-
-  displayedColumns: string[] = ['name', 'fraction', 'squadName'];
-
-  readonly fraction = Fraction;
-
-  constructor(private router: Router,
-              private route: ActivatedRoute,
-              private location: Location,
-              private userService: UserService,
-              private rankService: RankService,
-              private decorationService: DecorationService,
-              @Inject(DOCUMENT) private document) {
-  }
-
-  ngOnInit() {
-    // set background image css
-    this.document.getElementById('right').setAttribute('style', CSSHelpers.getBackgroundCSS('../assets/bg.jpg'));
-    this.route.params.subscribe(params => {
-      const itemId = params.id;
-
-      if (this.router.url.includes('find/award/')) {
-        // Award
-        this.isRank = false;
-        this.decorationService.getDecoration(itemId).subscribe(decoration => {
-          this.traceItem = decoration;
-          this.userService.findUsers({decorationId: decoration._id}).subscribe(users => {
-            this.users = users.filter(user => user.squadId != null);
-          });
-        });
-      } else if (this.router.url.includes('find/rank/')) {
-        // Rank
-        this.isRank = true;
-        this.rankService.getRank(itemId).subscribe(rank => {
-          this.traceItem = rank;
-          this.userService.findUsers({fraction: rank.fraction}).subscribe(users => {
-            this.users = users.filter(user => user.squadId != null && user.rankLvl === rank.level);
-          });
-        });
-      }
-    });
-  };
-
-  selectUser(user) {
-    this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]);
-  }
-
-  navigateBack() {
-    this.location.back();
-  }
-
-  ngOnDestroy() {
-    if (!this.router.url.includes(RouteConfig.overviewPath)) {
-      this.document.getElementById('right').setAttribute('style', '');
-    }
-  }
-}
diff --git a/static/src/app/pub/user-list-sheet/user-list-sheet.component.html b/static/src/app/pub/user-list-sheet/user-list-sheet.component.html
new file mode 100644
index 0000000..5ab5273
--- /dev/null
+++ b/static/src/app/pub/user-list-sheet/user-list-sheet.component.html
@@ -0,0 +1,28 @@
+<div *ngIf="data.rank">
+  <img src="resource/rank/{{data.rank._id}}.png" height="65" style="float:left;">
+  <h4 style="text-align: center;height: 65px; padding-top: 20px;">
+    Aktive Teilnehmer mit Rang: {{data.rank.name}}
+  </h4>
+</div>
+
+<div *ngIf="data.decoration">
+  <img src="resource/decoration/{{data.decoration._id}}.png"
+       height="{{data.decoration.isMedal ? 65 : 32}}"
+       style="float:left;">
+  <h4 style="text-align: center;"
+      [style.height]="data.decoration.isMedal ? '65px' : 'inherit'"
+      [style.padding-top]="data.decoration.isMedal ? '20px' : 'inherit'">
+    Aktive Teilnehmer mit {{data.decoration.isMedal ? 'Orden' : 'Ordensband'}}: {{data.decoration.name}}
+  </h4>
+</div>
+
+<mat-nav-list *ngFor="let user of users">
+  <a mat-list-item (click)="selectUser(user)">
+      <span mat-line>
+        {{user.username}}
+      </span>
+    <span mat-line [style.color]="user.squadId.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR :fraction.COLOR_OPFOR">
+        {{user.squadId.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} -  {{user.squadId.name}}
+      </span>
+  </a>
+</mat-nav-list>
diff --git a/static/src/app/pub/user-list-sheet/user-list-sheet.component.ts b/static/src/app/pub/user-list-sheet/user-list-sheet.component.ts
new file mode 100644
index 0000000..27b1e64
--- /dev/null
+++ b/static/src/app/pub/user-list-sheet/user-list-sheet.component.ts
@@ -0,0 +1,54 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef} from '@angular/material';
+import {RankOverviewComponent} from '../rank-overview/rank-overview.component';
+import {ActivatedRoute, Router} from '@angular/router';
+import {RankService} from '../../services/army-management/rank.service';
+import {DecorationService} from '../../services/army-management/decoration.service';
+import {UserService} from '../../services/army-management/user.service';
+import {User} from '../../models/model-interfaces';
+import {Fraction} from '../../utils/fraction.enum';
+
+@Component({
+  selector: 'cc-user-list-sheet',
+  templateUrl: 'user-list-sheet.component.html',
+})
+export class UserListSheetComponent implements OnInit {
+
+  users: User[];
+
+  readonly fraction = Fraction;
+
+  constructor(private router: Router,
+              private route: ActivatedRoute,
+              private userService: UserService,
+              private rankService: RankService,
+              private decorationService: DecorationService,
+              private bottomSheetRef: MatBottomSheetRef<RankOverviewComponent>,
+              @Inject(MAT_BOTTOM_SHEET_DATA) public data: any) {
+  }
+
+  ngOnInit() {
+      if (this.data.decoration) {
+        const itemId = this.data.decoration._id;
+        this.decorationService.getDecoration(itemId).subscribe(decoration => {
+          this.userService.findUsers({decorationId: decoration._id}).subscribe(users => {
+            this.users = users.filter(user => user.squadId != null);
+          });
+        });
+      } else if (this.data.rank) {
+        // Rank
+        const itemId = this.data.rank._id;
+        this.rankService.getRank(itemId).subscribe(rank => {
+          this.userService.findUsers({fraction: rank.fraction}).subscribe(users => {
+            this.users = users.filter(user => user.squadId != null && user.rankLvl === rank.level);
+          });
+        });
+      }
+  }
+
+  selectUser(user) {
+    this.bottomSheetRef.dismiss();
+    event.preventDefault();
+    this.router.navigate(['overview', {outlets: {'right': ['member', user._id]}}]);
+  }
+}