diff --git a/static/src/app/army/army-member.component.css b/static/src/app/army/army-member.component.css
index c8dfb3b..594963a 100644
--- a/static/src/app/army/army-member.component.css
+++ b/static/src/app/army/army-member.component.css
@@ -1,12 +1,14 @@
 .overview {
-  position: fixed;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  bottom: 20px;
-  padding-left: 50px;
-  padding-top: 190px;
-  margin-left: 10px;
   height: 100vh;
+  width: 90%;
+  padding: 5px;
+  margin: auto;
+  position: relative;
+  left: -1%;
+}
+
+:host /deep/ #right {
+  padding-left: 0;
 }
 
 .return-button {
diff --git a/static/src/app/army/army-member.component.html b/static/src/app/army/army-member.component.html
index a7d458e..373b72e 100644
--- a/static/src/app/army/army-member.component.html
+++ b/static/src/app/army/army-member.component.html
@@ -1,58 +1,57 @@
-<div class="return-button">
-  <span class="btn btn-default" style="float:left" (click)="backToOverview()">< zurück zur Übersicht</span>
-
-  <h3 [ngClass]="user.squad?.fraction === 'BLUFOR' ? 'blufor' : 'opfor'" style="padding-left: 20%;">
-    Auszeichnungen von {{user.rank?.name}} {{user.username}}
-  </h3>
-</div>
-
-
 <div class="overview">
+  <div style="width: 90%; margin:auto">
+    <div class="return-button">
+      <span class="btn btn-default" style="float:left" (click)="backToOverview()">< zurück zur Übersicht</span>
 
-  <div>
-    <img style="margin-left: 13%;" src="resource/signature/{{user._id}}.png">
-  </div>
-  <div class="input-group" style="width: 662px; margin-left: 13%;">
-    <input type="text" style="background: white;" class="form-control" [(ngModel)]="signatureUrl" readonly>
-    <span class="input-group-btn">
+      <h3 [ngClass]="user.squad?.fraction === 'BLUFOR' ? 'blufor' : 'opfor'" style="padding-left: 20%;">
+        Auszeichnungen von {{user.rank?.name}} {{user.username}}
+      </h3>
+    </div>
+
+    <div>
+      <img style="margin-left: 13%;" src="resource/signature/{{user._id}}.png">
+    </div>
+    <div class="input-group" style="width: 662px; margin-left: 13%;">
+      <input type="text" style="background: white;" class="form-control" [(ngModel)]="signatureUrl" readonly>
+      <span class="input-group-btn">
         <button class="btn btn-default" [class.btn-success]="isCopied" type="button"
                 ngxClipboard [cbContent]="signatureUrl" (cbOnSuccess)="isCopied = true">kopieren</button>
       </span>
-  </div>
-
-  <div class="pull-left" style="margin-top:20px;">
-    <div class="table-container" style="width: 75%; min-width: 500px">
-      <table class="table table-hover">
-        <thead>
-        <tr class="table-head">
-          <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
-          <th class="col-sm-2">Bezeichnung</th>
-          <th class="col-sm-2">Begründung</th>
-          <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
-        </tr>
-        </thead>
-        <tbody *ngFor="let award of user.awards">
-        <tr *ngIf="award.confirmed === 1" class="cell-outline">
-          <td class="text-center" *ngIf="award.decorationId.isMedal">
-            <img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
-          </td>
-          <td class="text-center" *ngIf="!award.decorationId.isMedal">
-            <img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
-          </td>
-          <td style="font-weight: bold">
-            {{award.decorationId.name}}
-          </td>
-          <td>
-            {{award.reason}}
-          </td>
-          <td class="text-right">
-            <span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
-          </td>
-        </tr>
-        </tbody>
-      </table>
     </div>
 
-  </div>
+    <div class="pull-left" style="margin-top:20px;">
+      <div class="table-container" style="min-width: 500px">
+        <table class="table table-hover">
+          <thead>
+          <tr class="table-head">
+            <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
+            <th class="col-sm-2">Bezeichnung</th>
+            <th class="col-sm-2">Begründung</th>
+            <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
+          </tr>
+          </thead>
+          <tbody *ngFor="let award of user.awards">
+          <tr *ngIf="award.confirmed === 1" class="cell-outline">
+            <td class="text-center" *ngIf="award.decorationId.isMedal">
+              <img height="90px" src="resource/decoration/{{award.decorationId._id}}.png">
+            </td>
+            <td class="text-center" *ngIf="!award.decorationId.isMedal">
+              <img width="100px" src="resource/decoration/{{award.decorationId._id}}.png">
+            </td>
+            <td style="font-weight: bold">
+              {{award.decorationId.name}}
+            </td>
+            <td>
+              {{award.reason}}
+            </td>
+            <td class="text-right">
+              <span class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</span>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
 
+    </div>
+  </div>
 </div>
diff --git a/static/src/app/army/army.component.css b/static/src/app/army/army.component.css
index 7a0fe4c..16ead7f 100644
--- a/static/src/app/army/army.component.css
+++ b/static/src/app/army/army.component.css
@@ -1,41 +1,61 @@
-h1 {
-  width: 920px;
-  margin-bottom: 50px;
-  margin-left: 25%
-}
-
-img {
-  margin-top: 10px;
-  padding-right: 30px;
-}
-
-.div-table {
-  display: table;
-  border-radius: 10px;
-  margin-left: 1%;
-  width: auto;
-  border-spacing: 5px; /* cellspacing:poor IE support for  this */
-}
-
-.div-table-row {
-  display: table-row;
-  width: auto;
-  clear: both;
-}
-
-.div-table-col {
-  float: left; /* fix for  buggy browsers */
-  display: table-column;
+.squad-layout {
+  overflow: hidden;
   padding: 5px 15px 5px 15px;
 }
 
-.army-head {
-  font-weight: bolder;
-  text-align: center
+.row {
+  clear: both;
+}
+
+.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: white;
+  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;
+  display: block;
   text-decoration: underline;
 }
 
@@ -46,3 +66,9 @@ img {
 .text-blufor {
   color: blue;
 }
+
+.army-head {
+  font-weight: bolder;
+  text-align: center
+}
+
diff --git a/static/src/app/army/army.component.html b/static/src/app/army/army.component.html
index 3a02e79..6c1809b 100644
--- a/static/src/app/army/army.component.html
+++ b/static/src/app/army/army.component.html
@@ -1,62 +1,56 @@
-<h1>Übersicht über alle Spieler, Squads und Armeen</h1>
+<div style="width: 1100px; margin:auto; position: relative;left: -1%;">
+  <h1>Übersicht über alle Spieler, Squads und Armeen</h1>
 
-<div style="width: 1200px; margin-left: 25%">
-
-  <div class="div-table" style="width: 490px; float:left">
+  <div class="pull-left" style="width: 45%;">
     <h3 class="text-blufor army-head">NATO</h3>
-    <div *ngFor="let squad of army.NATO.squads" style="outline:1px solid #D4D4D4;">
-      <div class="div-table-row">
-
-        <div class="div-table-col">
-          <img src="resource/squad/{{squad._id}}.png">
+    <div class="squad-layout" *ngFor="let squad of army.NATO.squads">
+      <div class="row colored-row title-row">
+        <div class="squad-cell pull-left"><img
+          src="resource/squad/{{squad._id}}.png"></div>
+        <div class="squad-cell title name-cell">{{squad.name}}</div>
+      </div>
+      <div class="row middle-row">
+        <div class="squad-cell name-cell">
+        <span class="member-link text-blufor"
+              *ngFor="let member of squad.members"
+              (click)="select(member._id)">
+          {{member.rank}} {{member.username}}
+        </span>
         </div>
-        <div class="div-table-col">
-          <div class=" div-table-row">
-            <h4>{{squad.name}}</h4>
-          </div>
-          <div class=" div-table-row" style="padding-left: 8px">
-            <div *ngFor="let member of squad.members">
-              <div class="member-link text-blufor" (click)="select(member._id)">{{member.rank}} {{member.username}}
-              </div>
-            </div>
-            <br>
-            <br>
-            Mitglieder: {{squad.memberCount}}
-          </div>
+      </div>
+      <div class="row colored-row footer-row">
+        <div class="squad-cell pull-left" style="color: whitesmoke; margin-left: 42px">
+          Mitglieder: {{squad.memberCount}}
         </div>
       </div>
     </div>
-    <br>
-    <br>
-    <div style="padding-left: 80px">Armeemitglieder: {{army.NATO.memberCount}}</div>
+    <div style="padding: 20px; text-align: center;">Armeemitglieder: {{army.NATO.memberCount}}</div>
   </div>
 
-  <div class="div-table" style="width: 540px; padding-left: 50px">
+  <div class="pull-right" style="width: 45%;">
     <h3 class="text-opfor army-head">CSAT</h3>
-    <div *ngFor="let squad of army.CSAT.squads" style="outline:1px solid #D4D4D4;">
-      <div class="div-table-row">
-
-        <div class="div-table-col">
-          <img src="resource/squad/{{squad._id}}.png">
+    <div class="squad-layout" *ngFor="let squad of army.CSAT.squads">
+      <div class="row colored-row title-row">
+        <div class="squad-cell pull-left"><img
+          src="resource/squad/{{squad._id}}.png"></div>
+        <div class="squad-cell title name-cell">{{squad.name}}</div>
+      </div>
+      <div class="row middle-row">
+        <div class="squad-cell name-cell">
+        <span class="member-link text-opfor"
+              *ngFor="let member of squad.members"
+              (click)="select(member._id)">
+          {{member.rank}} {{member.username}}
+        </span>
         </div>
-        <div class="div-table-col">
-          <div class=" div-table-row">
-            <h4>{{squad.name}}</h4>
-          </div>
-          <div class=" div-table-row">
-            <div *ngFor="let member of squad.members">
-              <div class="member-link text-opfor" (click)="select(member._id)">{{member.rank}} {{member.username}}</div>
-            </div>
-            <br>
-            <br>
-            Mitglieder: {{squad.memberCount}}
-          </div>
+      </div>
+      <div class="row colored-row footer-row">
+        <div class="squad-cell pull-left" style="color: whitesmoke; margin-left: 42px">
+          Mitglieder: {{squad.memberCount}}
         </div>
       </div>
     </div>
-    <br>
-    <br>
-    <div style="padding-left: 80px">Armeemitglieder: {{army.CSAT.memberCount}}</div>
+    <div style="padding: 20px; text-align: center;">Armeemitglieder: {{army.CSAT.memberCount}}</div>
   </div>
 
 </div>
diff --git a/static/src/app/army/army.component.ts b/static/src/app/army/army.component.ts
index 55565dd..f9ea9f7 100644
--- a/static/src/app/army/army.component.ts
+++ b/static/src/app/army/army.component.ts
@@ -26,7 +26,7 @@ export class ArmyComponent {
   };
 
   select(memberId) {
-    this.router.navigate(['member', memberId], {relativeTo: this.route});
+    this.router.navigate([{outlets: {'right': ['member', memberId]}}], {relativeTo: this.route});
   }
 
 }
diff --git a/static/src/app/army/army.routing.ts b/static/src/app/army/army.routing.ts
index b708cf0..d530b6b 100644
--- a/static/src/app/army/army.routing.ts
+++ b/static/src/app/army/army.routing.ts
@@ -6,11 +6,13 @@ import {ArmyMemberComponent} from "./army-member.component";
 export const armyRoutes: Routes = [
   {
     path: '',
-    component: ArmyComponent
+    component: ArmyComponent,
+    outlet: 'right'
   },
   {
     path: 'member/:id',
     component: ArmyMemberComponent,
+    outlet: 'right'
   }
 ];