--- a/client/src/components/fairway/AvailableFairwayDepth.vue	Fri May 10 11:45:39 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepth.vue	Fri May 10 11:56:57 2019 +0200
@@ -3,14 +3,19 @@
     <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
     <UISpinnerOverlay v-if="loading" />
     <div class="mt-3 d-flex flex-row my-auto">
-      <div class="my-auto">
+      <div class="my-auto mx-auto">
         <ul class="list-group">
-          <li class="text-left list-item" v-for="entry in legend" :key="entry">
+          <li
+            :style="legendStyle(index)"
+            class="text-left list-group-item"
+            v-for="(entry, index) in legend"
+            :key="index"
+          >
             {{ entry }}
           </li>
         </ul>
       </div>
-      <div :id="containerId" class="ml-auto diagram-container"></div>
+      <div :id="containerId" class="mx-auto my-auto diagram-container"></div>
     </div>
   </div>
 </template>
@@ -96,6 +101,12 @@
     }
   },
   methods: {
+    legendStyle(index) {
+      if (index == 0) return `background-color: ${this.$options.COLORS.LDC};`;
+      if (index < 4)
+        return `background-color: ${this.$options.COLORS.REST[index - 1]};`;
+      return `background-color: ${this.$options.COLORS.HIGHEST};`;
+    },
     close() {
       this.$store.commit("application/paneSetup", "DEFAULT");
     },