diff --git a/static/src/app/pub/public.module.ts b/static/src/app/pub/public.module.ts
index 7bc33fb..69b979d 100644
--- a/static/src/app/pub/public.module.ts
+++ b/static/src/app/pub/public.module.ts
@@ -4,10 +4,12 @@ import {CommonModule} from '@angular/common';
 import {RankService} from '../services/army-management/rank.service';
 import {pubRouterModule, pubRoutingComponents} from './public.routing';
 import {DecorationService} from '../services/army-management/decoration.service';
+import {MatTableModule} from '@angular/material/table';
+
 
 @NgModule({
   declarations: pubRoutingComponents,
-  imports: [CommonModule, SharedModule, pubRouterModule],
+  imports: [CommonModule, SharedModule, MatTableModule, pubRouterModule],
   providers: [DecorationService, RankService]
 })
 export class PublicModule {
diff --git a/static/src/app/pub/rank-overview/rank-overview.component.css b/static/src/app/pub/rank-overview/rank-overview.component.css
index 896472d..a5e4798 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.css
+++ b/static/src/app/pub/rank-overview/rank-overview.component.css
@@ -1,75 +1,25 @@
-.squad-layout {
-  overflow: hidden;
-  padding: 5px 15px 5px 15px;
+table {
+  width: 100%;
 }
 
-.row {
-  clear: both;
+:host /deep/ table.mat-table {
+  background: rgba(255, 255, 255, 0.6);
 }
 
-.squad-cell {
-  display: table-cell;
-  padding: 5px;
-}
-
-.colored-row {
-  background: rgb(34, 34, 34);
-}
-
-.title-row {
-  border-radius: 12px 12px 0 0;
-}
-
-.footer-row {
-  border-radius: 0 0 12px 12px;
-}
-
-.middle-row {
-  min-height: 120px;
-  border: rgb(34, 34, 34);
-  background-color: rgba(255, 255, 255, 0.88);
-  border-left-style: solid;
-  border-right-style: solid;
-}
-
-.title {
-  color: whitesmoke;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-.name-cell {
-  display: inherit;
-  margin-left: 200px;
-}
-
-h1 {
-  text-align: center;
-}
-
-img {
-  position: absolute;
-  margin-top: 8px;
-  margin-left: 25px;
-}
-
-.member-link {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.army-head {
-  font-weight: bolder;
-  text-align: center
-}
-
-.member-count {
-  margin-top: 15px;
+td > img {
+  height: 120px;
   padding: 8px;
-  text-align: center;
-  font-weight: bold;
-  color: whitesmoke;
-  background: #222222;
-  border-radius: 12px;
 }
 
+h1, h3 {
+  text-align: center;
+}
+
+h3 {
+  font-weight: bolder;
+}
+
+.column-container {
+  width:48%;
+  padding-bottom: 20px;
+}
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 fa2c0f0..53d75df 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.html
+++ b/static/src/app/pub/rank-overview/rank-overview.component.html
@@ -1,18 +1,45 @@
-<div style="width: 1100px; margin:auto; position: relative;">
+<div style="width: 1000px; margin:auto; position: relative;">
   <h1>Übersicht über alle Ränge</h1>
 
-  <div class="pull-left" style="width: 45%;">
-    <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
-    <div class="squad-layout" *ngFor="let rank of ranks">
-      {{rank.name}}
-    </div>
+  <div class="column-container pull-left">
+    <h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
+
+    <table mat-table [dataSource]="ranksBlufor" class="mat-elevation-z8">
+
+      <ng-container matColumnDef="picture">
+        <th mat-header-cell *matHeaderCellDef> Rankabzeichen </th>
+        <td mat-cell *matCellDef="let element"><img src="resource/rank/{{element._id}}.png"></td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <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;"></tr>
+    </table>
   </div>
 
-  <div class="pull-right" style="width: 45%;">
-    <h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
-    <div class="squad-layout" *ngFor="let rank of ranks">
-      {{rank.name}}
-    </div>
+  <div class="column-container pull-right">
+    <h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
+
+    <table mat-table [dataSource]="ranksOpfor" class="pull-right mat-elevation-z8">
+
+      <ng-container matColumnDef="picture">
+        <th mat-header-cell *matHeaderCellDef> Rankabzeichen </th>
+        <td mat-cell *matCellDef="let element"><img src="resource/rank/{{element._id}}.png"></td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <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;"></tr>
+    </table>
   </div>
 
+
 </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 bb4abfe..45f7989 100644
--- a/static/src/app/pub/rank-overview/rank-overview.component.ts
+++ b/static/src/app/pub/rank-overview/rank-overview.component.ts
@@ -1,6 +1,5 @@
 import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
-
 import {DOCUMENT} from '@angular/common';
 import {Fraction} from '../../utils/fraction.enum';
 import {CSSHelpers} from '../../utils/global.helpers';
@@ -16,7 +15,11 @@ import {RankService} from '../../services/army-management/rank.service';
 })
 export class RankOverviewComponent implements OnInit, OnDestroy {
 
-  ranks: Rank[];
+  ranksOpfor: Rank[];
+
+  ranksBlufor: Rank[];
+
+  displayedColumns: string[] = ['picture', 'name'];
 
   readonly fraction = Fraction;
 
@@ -33,10 +36,12 @@ export class RankOverviewComponent implements OnInit, OnDestroy {
     // init rank data
     this.rankService.findRanks()
         .subscribe(ranks => {
-          this.ranks = ranks;
+          this.ranksBlufor = ranks.filter(r => r.fraction === 'BLUFOR');
+          this.ranksOpfor = ranks.filter(r => r.fraction === 'OPFOR');
         });
   };
 
+
   ngOnDestroy() {
     if (!this.router.url.includes(RouteConfig.overviewPath)) {
       this.document.getElementById('right').setAttribute('style', '');