--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Mon May 27 12:15:35 2019 +0200
+++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue	Mon May 27 12:16:45 2019 +0200
@@ -5,6 +5,13 @@
     <div class="d-flex flex-fill">
       <DiagramLegend>
         <div v-for="(entry, index) in legendLNWL" :key="index" class="legend">
+          <span
+            :style="
+              `${legendStyle(
+                index
+              )}; border-radius: 0.25rem; width: 40px; height: 20px;`
+            "
+          ></span>
           {{ entry }}
         </div>
         <div>
@@ -232,6 +239,15 @@
     }
   },
   methods: {
+    legendStyle(index) {
+      const style = {
+        0: `background-color: ${this.$options.LWNLCOLORS.LDC};`,
+        1: `background-color: ${this.$options.AFDCOLORS[0]};`,
+        2: `background-color: ${this.$options.AFDCOLORS[1]};`,
+        3: `background-color: ${this.$options.LWNLCOLORS.HDC};`
+      };
+      return style[index];
+    },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {
         this.templateData = this.defaultTemplate;