diff --git a/package-lock.json b/package-lock.json
index 478816a..dd92515 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3846,12 +3846,12 @@
       }
     },
     "browserslist": {
-      "version": "4.14.3",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.3.tgz",
-      "integrity": "sha512-GcZPC5+YqyPO4SFnz48/B0YaCwS47Q9iPChRGi6t7HhflKBcINzFrJvRfC+jp30sRMKxF+d4EHGs27Z0XP1NaQ==",
+      "version": "4.14.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.4.tgz",
+      "integrity": "sha512-7FOuawafVdEwa5Jv4nzeik/PepAjVte6HmVGHsjt2bC237jeL9QlcTBDF3PnHEvcC6uHwLGYPwZHNZMB7wWAnw==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001131",
+        "caniuse-lite": "^1.0.30001135",
         "electron-to-chromium": "^1.3.570",
         "escalade": "^3.1.0",
         "node-releases": "^1.1.61"
@@ -4072,9 +4072,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001131",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001131.tgz",
-      "integrity": "sha512-4QYi6Mal4MMfQMSqGIRPGbKIbZygeN83QsWq1ixpUwvtfgAZot5BrCKzGygvZaV+CnELdTwD0S4cqUNozq7/Cw==",
+      "version": "1.0.30001135",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001135.tgz",
+      "integrity": "sha512-ziNcheTGTHlu9g34EVoHQdIu5g4foc8EsxMGC7Xkokmvw0dqNtX8BS8RgCgFBaAiSp2IdjvBxNdh0ssib28eVQ==",
       "dev": true
     },
     "canonical-path": {
@@ -5655,9 +5655,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.570",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz",
-      "integrity": "sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg==",
+      "version": "1.3.571",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.571.tgz",
+      "integrity": "sha512-UYEQ2Gtc50kqmyOmOVtj6Oqi38lm5yRJY3pLuWt6UIot0No1L09uu6Ja6/1XKwmz/p0eJFZTUZi+khd1PV1hHA==",
       "dev": true
     },
     "elegant-spinner": {
@@ -11424,14 +11424,15 @@
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
-      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.3.tgz",
+      "integrity": "sha512-0ClFaY4X1ra21LRqbW6y3rUbWcxnSVkDFG57R7Nxus9J9myPFlv+jYDMohzpkBx0RrjjiqjtycpchQ+PLGmZ9w==",
       "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "indexes-of": "^1.0.1",
-        "uniq": "^1.0.1"
+        "uniq": "^1.0.1",
+        "util-deprecate": "^1.0.2"
       }
     },
     "postcss-svgo": {
diff --git a/package.json b/package.json
index c3356f9..9f9d4e0 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1000.8",
+    "@angular-devkit/build-angular": "^0.1000.8",
     "@angular/cli": "~10.0.8",
     "@angular/compiler-cli": "~10.0.14",
     "@graphql-codegen/cli": "^1.17.8",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index bf77355..322f0d7 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -28,6 +28,11 @@
   </mat-toolbar>
 
   <mat-sidenav-container id="content">
+    <!--<mat-sidenav #appDrawer mode="over" opened="false">
+      <mat-nav-list>
+        <app-menu-list-item *ngFor="let item of navItems" [item]="item"></app-menu-list-item>
+      </mat-nav-list>
+    </mat-sidenav>-->
     <mat-sidenav #sidenav>
       <mat-nav-list (click)="sidenav.toggle()">
         <a mat-list-item [routerLink]="'/tableOverview'"> Tabellenübersicht </a>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e568f0e..e486760 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,10 @@
-import { Component, Renderer2 } from '@angular/core';
+import { Component, ElementRef, Renderer2 } from '@angular/core';
 import { ColorThemeService } from './services/colorTheme.service';
 import { AuthService } from './services/auth.service';
 import { Router } from '@angular/router';
 import { ViewChild } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
+import { NavService } from './components/menu-list-item/nav.service';
 
 @Component({
   selector: 'app-root',
@@ -16,12 +17,14 @@ export class AppComponent {
   loggedIn = false;
 
   @ViewChild('sidenav') public sideNav:MatSidenav;
+  @ViewChild('appDrawer') appDrawer: ElementRef;
 
   constructor(
     private renderer: Renderer2,
     private themeService: ColorThemeService,
     private authService: AuthService,
     private router: Router,
+    private navService: NavService
   ) {
     this.renderer.addClass(document.body, 'mat-app-background'); //so the background color changes dependent on current theme
     this.themeService.load();
@@ -37,4 +40,8 @@ export class AppComponent {
     this.authService.logout().subscribe().add(() => this.router.navigate(['login']));
     this.sideNav.close();
   }
+
+  ngAfterViewInit() {
+    this.navService.appDrawer = this.appDrawer;
+  }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 149b333..5d9936c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -19,6 +19,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import {MatCardModule} from '@angular/material/card';
+import {MatGridListModule} from '@angular/material/grid-list';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -30,10 +32,13 @@ import { ParticipantsComponent } from './pages/tables/participants/participants.
 import { LendingStationsComponent } from './pages/tables/lending-stations/lending-stations.component';
 import { TableOverviewComponent } from './pages/table-overview/table-overview.component';
 import { StringCellComponent } from './components/tableComponents/string-cell/string-cell.component';
+import { MenuListItemComponent } from './components/menu-list-item/menu-list-item.component';
+import { NavService }from './components/menu-list-item/nav.service';
 
 @NgModule({
   declarations: [
     AppComponent,
+    MenuListItemComponent,
     LoginComponent,
     BikesComponent,
     ParticipantsComponent,
@@ -51,6 +56,8 @@ import { StringCellComponent } from './components/tableComponents/string-cell/st
     MatToolbarModule,
     MatButtonModule,
     MatTableModule,
+    MatCardModule,
+    MatGridListModule,
     MatInputModule,
     MatMenuModule,
     MatSlideToggleModule,
@@ -64,7 +71,7 @@ import { StringCellComponent } from './components/tableComponents/string-cell/st
     GraphQLModule,
     DragDropModule,
   ],
-  providers: [],
+  providers: [NavService],
   bootstrap: [AppComponent],
 })
 export class AppModule {
diff --git a/src/app/components/menu-list-item/menu-list-item.component.html b/src/app/components/menu-list-item/menu-list-item.component.html
new file mode 100644
index 0000000..62a708b
--- /dev/null
+++ b/src/app/components/menu-list-item/menu-list-item.component.html
@@ -0,0 +1,16 @@
+<a mat-list-item [ngStyle]="{'padding-left': (depth * 12) + 'px'}" (click)="onItemSelected(item)"
+   [ngClass]="{'active': item.route ? router.isActive(item.route, true): false, 'expanded': expanded}"
+   class="menu-list-item">
+  <mat-icon class="routeIcon">{{item.iconName}}</mat-icon>
+  {{item.displayName}}
+  <span fxFlex *ngIf="item.children && item.children.length">
+    <span fxFlex></span>
+    <mat-icon [@indicatorRotate]="expanded ? 'expanded': 'collapsed'">
+      expand_more
+    </mat-icon>
+  </span>
+</a>
+<div *ngIf="expanded">
+  <app-menu-list-item *ngFor="let child of item.children" [item]="child" [depth]="depth+1">
+  </app-menu-list-item>
+</div>
diff --git a/src/app/components/menu-list-item/menu-list-item.component.scss b/src/app/components/menu-list-item/menu-list-item.component.scss
new file mode 100644
index 0000000..df8dd0f
--- /dev/null
+++ b/src/app/components/menu-list-item/menu-list-item.component.scss
@@ -0,0 +1,28 @@
+/*@import '../theme';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  width: 100%;
+
+  .mat-list-item.active {
+    background-color: mat-color($app-primary, 50);
+  }
+  &:hover,
+  &:focus {
+    >.mat-list-item:not(.expanded) {
+      background-color: mat-color($app-primary, 100) !important;
+    }
+  }
+}
+
+.mat-list-item {
+  padding: 8px 0;
+  display: flex;
+  width: auto;
+
+  .routeIcon {
+    margin-right: 40px;
+  }
+}*/
diff --git a/src/app/components/menu-list-item/menu-list-item.component.ts b/src/app/components/menu-list-item/menu-list-item.component.ts
new file mode 100644
index 0000000..b0d3476
--- /dev/null
+++ b/src/app/components/menu-list-item/menu-list-item.component.ts
@@ -0,0 +1,54 @@
+import {Component, HostBinding, Input, OnInit} from '@angular/core';
+import {NavItem} from './nav-item';
+import {Router} from '@angular/router';
+import {NavService} from './nav.service';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+
+@Component({
+  selector: 'app-menu-list-item',
+  templateUrl: './menu-list-item.component.html',
+  styleUrls: ['./menu-list-item.component.scss'],
+  animations: [
+    trigger('indicatorRotate', [
+      state('collapsed', style({transform: 'rotate(0deg)'})),
+      state('expanded', style({transform: 'rotate(180deg)'})),
+      transition('expanded <=> collapsed',
+        animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
+      ),
+    ])
+  ]
+})
+export class MenuListItemComponent implements OnInit {
+  expanded: boolean = false;
+  @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
+  @Input() item: NavItem;
+  @Input() depth: number;
+
+  constructor(public navService: NavService,
+              public router: Router) {
+    if (this.depth === undefined) {
+      this.depth = 0;
+    }
+  }
+
+  ngOnInit() {
+    this.navService.currentUrl.subscribe((url: string) => {
+      if (this.item.route && url) {
+        // console.log(`Checking '/${this.item.route}' against '${url}'`);
+        this.expanded = url.indexOf(`/${this.item.route}`) === 0;
+        this.ariaExpanded = this.expanded;
+        // console.log(`${this.item.route} is expanded: ${this.expanded}`);
+      }
+    });
+  }
+
+  onItemSelected(item: NavItem) {
+    if (!item.children || !item.children.length) {
+      this.router.navigate([item.route]);
+      this.navService.closeNav();
+    }
+    if (item.children && item.children.length) {
+      this.expanded = !this.expanded;
+    }
+  }
+}
diff --git a/src/app/components/menu-list-item/nav-item.ts b/src/app/components/menu-list-item/nav-item.ts
new file mode 100644
index 0000000..c19ddfd
--- /dev/null
+++ b/src/app/components/menu-list-item/nav-item.ts
@@ -0,0 +1,8 @@
+export interface NavItem {
+    displayName: string;
+    disabled?: boolean;
+    iconName: string;
+    route?: string;
+    children?: NavItem[];
+  }
+  
\ No newline at end of file
diff --git a/src/app/components/menu-list-item/nav.service.ts b/src/app/components/menu-list-item/nav.service.ts
new file mode 100644
index 0000000..24302d3
--- /dev/null
+++ b/src/app/components/menu-list-item/nav.service.ts
@@ -0,0 +1,25 @@
+import {EventEmitter, Injectable} from '@angular/core';
+import {Event, NavigationEnd, Router} from '@angular/router';
+import {BehaviorSubject} from 'rxjs';
+
+@Injectable()
+export class NavService {
+  public appDrawer: any;
+  public currentUrl = new BehaviorSubject<string>(undefined);
+
+  constructor(private router: Router) {
+    this.router.events.subscribe((event: Event) => {
+      if (event instanceof NavigationEnd) {
+        this.currentUrl.next(event.urlAfterRedirects);
+      }
+    });
+  }
+
+  public closeNav() {
+    this.appDrawer.close();
+  }
+
+  public openNav() {
+    this.appDrawer.open();
+  }
+}
diff --git a/src/app/pages/table-overview/table-overview.component.html b/src/app/pages/table-overview/table-overview.component.html
index 61a83f2..161fcdd 100644
--- a/src/app/pages/table-overview/table-overview.component.html
+++ b/src/app/pages/table-overview/table-overview.component.html
@@ -1 +1,27 @@
-<p>table-overview works!</p>
+
+<div class="grid-list-spacer">
+<div class="big-list">
+<mat-grid-list class="big-list" cols="2" rowHeight="3:1">
+    <mat-grid-tile routerLink = "/table/bikes">Lastenräder</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/participants">Beteiligte</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/lendingStations">Ausleihstationen</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/lendingStations">Tabelle 4</mat-grid-tile>
+  </mat-grid-list>
+  <div>
+  <mat-grid-list cols="4" rowHeight="30px">
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 5</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 7</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 8</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 9</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 10</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 11</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 12</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 13</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 14</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 15</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 16</mat-grid-tile>
+    <mat-grid-tile routerLink = "/table/bikes">Tabelle 17</mat-grid-tile>
+  </mat-grid-list>
+</div>
+
+  
diff --git a/src/app/pages/table-overview/table-overview.component.scss b/src/app/pages/table-overview/table-overview.component.scss
index e69de29..40613c0 100644
--- a/src/app/pages/table-overview/table-overview.component.scss
+++ b/src/app/pages/table-overview/table-overview.component.scss
@@ -0,0 +1,11 @@
+mat-grid-tile {
+    background: gray;
+  }
+
+.grid-list-spacer{
+  margin: 15px;
+}
+
+.big-list{
+  margin-bottom: 30px;
+}
\ No newline at end of file
diff --git a/src/app/pages/tables/bikes/bikes.component.html b/src/app/pages/tables/bikes/bikes.component.html
index f14e5b5..a8b857f 100644
--- a/src/app/pages/tables/bikes/bikes.component.html
+++ b/src/app/pages/tables/bikes/bikes.component.html
@@ -7,6 +7,7 @@
       mat-table
       [dataSource]="bikes"
       class="mat-elevation-z8"
+      matSort
       cdkDropList
       cdkDropListOrientation="horizontal"
       (cdkDropListDropped)="drop($event)"
@@ -36,7 +37,7 @@
 
       <!-- Name Column -->
       <ng-container matColumnDef="name" sticky>
-        <th mat-header-cell *matHeaderCellDef>Name</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
         <td mat-cell *matCellDef="let element">
           <app-string-cell
             [editable]="element.isGettingEdited"
@@ -47,13 +48,13 @@
 
       <!-- ID Column -->
       <ng-container matColumnDef="id">
-        <th mat-header-cell cdkDrag *matHeaderCellDef>ID</th>
+        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>ID</th>
         <td mat-cell *matCellDef="let element">{{ element.id }}</td>
       </ng-container>
 
       <!-- FrameNumber Column -->
       <ng-container matColumnDef="frameNumber">
-        <th mat-header-cell cdkDrag *matHeaderCellDef>Fahrgestellnummer</th>
+        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>Fahrgestellnummer</th>
         <td mat-cell *matCellDef="let element">
           <app-string-cell
             [editable]="element.isGettingEdited"
@@ -64,7 +65,7 @@
 
       <!-- NumberOfChildren Column -->
       <ng-container matColumnDef="numberOfChildren">
-        <th mat-header-cell cdkDrag *matHeaderCellDef>Anzahl Kinder</th>
+        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>Anzahl Kinder</th>
         <td mat-cell *matCellDef="let element">
           <app-string-cell
             [editable]="element.isGettingEdited"
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 459188a..15242f4 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,8 +4,8 @@
 
 export const environment = {
   production: false,
-  apiUrl: "http://localhost:4000",
-  authUrl: "http://localhost:8080"
+  apiUrl: "http://173.212.197.169:4000",
+  authUrl: "http://173.212.197.169:8080"
 };
 
 /*
diff --git a/src/generated/graphql.ts b/src/generated/graphql.ts
index 3bfd8d7..0b64c79 100644
--- a/src/generated/graphql.ts
+++ b/src/generated/graphql.ts
@@ -940,8 +940,6 @@ export const CargoBikeFieldsMutableFragmentDoc = gql`
     billing
     hasFixedRate
   }
-  lockedBy
-  lockedUntil
   dimensionsAndLoad {
     bikeLength
     bikeWeight