diff --git a/static/src/app/app.component.css b/static/src/app/app.component.css
index 119c9ba..6d14a98 100644
--- a/static/src/app/app.component.css
+++ b/static/src/app/app.component.css
@@ -49,23 +49,15 @@ li {
 }
 
 #scrollTopBtn {
-  position: fixed; /* Fixed/sticky position */
+  position: fixed;
   bottom: 20px;
   right: 30px;
   z-index: 99;
-  border: none;
-  outline: none;
-  background-color: #101010;
-  color: white;
-  font-weight: bolder;
-  cursor: pointer;
-  padding: 7px 25px 10px 25px;
-  border-radius: 20px;
-  font-size: 22px;
+  background: rgba(16, 16, 16, 0.8);
 }
 
 #scrollTopBtn:hover {
-  background-color: rgba(25, 142, 25, 1);
+  background: rgba(16, 16, 16);
 }
 
 .unprocessed {
diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html
index b6219a2..b6a2c11 100644
--- a/static/src/app/app.component.html
+++ b/static/src/app/app.component.html
@@ -133,4 +133,11 @@
 
 <span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>
 
-<button (click)="scrollToTop()" *ngIf="scrollTopVisible" id="scrollTopBtn" title="Zum Seitenanfang">△</button>
+<button mat-icon-button
+        mat-mini-fab
+        id="scrollTopBtn"
+        *ngIf="scrollTopVisible"
+        matTooltip="Zum Seitenanfang"
+        (click)="scrollToTop()">
+  <mat-icon svgIcon="arrow-up"></mat-icon>
+</button>
diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts
index 8c24bb5..1098b1e 100644
--- a/static/src/app/app.component.ts
+++ b/static/src/app/app.component.ts
@@ -43,7 +43,8 @@ export class AppComponent implements OnInit {
     'delete': 'twotone-delete-24px',
     'stats-detail': 'round-assessment-24px',
     'chevron-left': 'baseline-chevron_left-24px',
-    'chevron-right': 'baseline-chevron_right-24px'
+    'chevron-right': 'baseline-chevron_right-24px',
+    'arrow-up': 'baseline-arrow_upward-24px'
   };
 
   version = 'v'.concat(require('./../../../package.json').version);
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 a6802cb..5c1c52a 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.css
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.css
@@ -9,3 +9,32 @@ h3 {
 h1, h3 {
   text-align: center;
 }
+
+.decoration-overview-container {
+  max-width: 1782px;
+  min-width: 927px;
+  margin:auto;
+  position: relative;
+}
+
+.fraction-global {
+  display: flow-root;
+}
+
+.fraction-global > h3 {
+  color: #666666;
+}
+
+.fraction-left {
+  float: left;
+  width: 50%;
+  padding-right:81px;
+  margin-bottom: 135px;
+}
+
+.fraction-right {
+  float: right;
+  width: 50%;
+  padding-left:81px;
+  margin-bottom: 135px;
+}
diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.html b/static/src/app/pub/decoration-overview/decoration-overview.component.html
index c6eef5c..6c36c11 100644
--- a/static/src/app/pub/decoration-overview/decoration-overview.component.html
+++ b/static/src/app/pub/decoration-overview/decoration-overview.component.html
@@ -1,21 +1,21 @@
-<div style="width: 1100px; margin:auto; position: relative;">
+<div class="decoration-overview-container">
   <h1>Übersicht über alle Auszeichnungen</h1>
 
-  <div style="float:left;">
+  <div class="fraction-global">
+    <h3>Global</h3>
+    <cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
+                         [decoration]="decoration">
+    </cc-decoration-panel>
+  </div>
+
+  <div class="fraction-left">
     <h3 [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
     <cc-decoration-panel *ngFor="let decoration of decorationsBlufor"
                          [decoration]="decoration">
     </cc-decoration-panel>
   </div>
 
-  <div style="float:left; margin-left: 2.5%;">
-    <h3 style="color: #666666">Global</h3>
-    <cc-decoration-panel *ngFor="let decoration of decorationsGlobal"
-                         [decoration]="decoration">
-    </cc-decoration-panel>
-  </div>
-
-  <div style="float:right;">
+  <div class="fraction-right">
     <h3 [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
     <cc-decoration-panel *ngFor="let decoration of decorationsOpfor"
                          [decoration]="decoration">
diff --git a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css
index 480bc45..0bf1ca2 100644
--- a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css
+++ b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.css
@@ -1,4 +1,62 @@
 .decoration-card {
-  max-width: 338px;
+  background: rgba(255, 255, 255, 0.87);
+  width: 150px;
+  height: 250px;
   margin: 6px;
+  padding: 0;
+  overflow: hidden;
+  float: left;
+}
+
+.decoration-card:hover {
+  background: #ffffff;
+  overflow: visible;
+  box-shadow: 0 0 18px 2px #666666;
+}
+
+.decoration-card:hover .decoration-description {
+  background: #ffffff;
+  position: relative;
+  z-index: 5;
+}
+
+.image-head {
+  height: 110px;
+  text-align: center;
+  padding: 12px;
+}
+
+.decoration-card .mat-card-content > div {
+  padding: 8px;
+}
+
+.decoration-card .mat-card-content > div:first-child {
+  color: white;
+  display: inherit;
+  text-align: center;
+  word-wrap: break-word;
+}
+
+img.img-medal {
+  height: 100%;
+}
+
+img.img-ribbon {
+  padding-top: 20%;
+  width: 100%;
+}
+
+.gradient {
+  position: absolute;
+  z-index: 2;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 24px;
+  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(70%, rgba(255, 255, 255, 0.84)));
+  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.84) 70%);
 }
diff --git a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html
index 54386aa..592bc22 100644
--- a/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html
+++ b/static/src/app/pub/decoration-overview/decoration-panel/decoration-panel.component.html
@@ -1,16 +1,18 @@
 <mat-card class="decoration-card">
-  <mat-card-header>
-    <mat-card-title>{{decoration.name}}</mat-card-title>
-    <mat-card-subtitle
-      [style.color]="decoration.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
-      {{decoration.fraction === 'BLUFOR'? fraction.BLUFOR : decoration.fraction === 'OPFOR' ? fraction.OPFOR : 'GLOBAL'}}
-    </mat-card-subtitle>
-  </mat-card-header>
-  <mat-card-content>
+  <div class="image-head">
     <img src="resource/decoration/{{decoration._id}}.png"
-         alt="{{decoration.name}}">
-    <p>
+         alt="{{decoration.name}}"
+         [class]="decoration.isMedal ? 'img-medal' : 'img-ribbon'">
+  </div>
+  <mat-card-content>
+    <div [style.background]="decoration.fraction === 'BLUFOR' ?
+    fraction.COLOR_BLUFOR : decoration.fraction === 'OPFOR' ? fraction.COLOR_OPFOR : '#666666'">
+      {{decoration.name}}
+    </div>
+    <div class="decoration-description">
       {{decoration.description}}
-    </p>
+    </div>
+    <div class="gradient">
+    </div>
   </mat-card-content>
 </mat-card>
diff --git a/static/src/app/utils/fraction.enum.ts b/static/src/app/utils/fraction.enum.ts
index 23aa8c1..9b1ff6e 100644
--- a/static/src/app/utils/fraction.enum.ts
+++ b/static/src/app/utils/fraction.enum.ts
@@ -1,11 +1,11 @@
 export enum Fraction {
   BLUFOR = 'NATO',
   OPFOR = 'CSAT',
-  COLOR_BLUFOR = '#0000FF',
+  COLOR_BLUFOR = '#3c5fa1',
   COLOR_BLUFOR_LIGHT = '#6666dd',
   COLOR_BLUFOR_DARK = '#0C0CA6',
   COLOR_BLUFOR_GREY = '#515179',
-  COLOR_OPFOR = '#B22222',
+  COLOR_OPFOR = '#a90100',
   COLOR_OPFOR_DARK = '#890F0F',
   COLOR_OPFOR_LIGHT = '#fb5555',
   COLOR_OPFOR_GREY = '#955c5f'
diff --git a/static/src/assets/icon/baseline-arrow_upward-24px.svg b/static/src/assets/icon/baseline-arrow_upward-24px.svg
new file mode 100644
index 0000000..f4446cd
--- /dev/null
+++ b/static/src/assets/icon/baseline-arrow_upward-24px.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="none" d="M0 0h24v24H0V0z"/>
+    <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
+</svg>