--- a/client/src/components/fairway/Fairwayprofile.vue	Mon Feb 25 15:10:13 2019 +0100
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon Feb 25 15:51:50 2019 +0100
@@ -1,26 +1,46 @@
 <template>
   <div :class="['position-relative', { show: showSplitscreen }]">
-    <button
-      class="rounded-bottom bg-white border-0 position-absolute splitscreen-toggle"
-      @click="$store.commit('application/showSplitscreen', false)"
-      v-if="showSplitscreen"
-    >
-      <font-awesome-icon icon="angle-down" />
-    </button>
-    <button
-      class="rounded-bottom bg-white border-0 position-absolute clear-selection"
-      @click="$store.dispatch('fairwayprofile/clearSelection')"
-      v-if="showSplitscreen"
-    >
-      <font-awesome-icon icon="times" class="pointer" />
-    </button>
     <div class="profile bg-white position-relative d-flex flex-column">
-      <h5
-        class="headline border-bottom mb-0 py-2"
-        v-if="selectedBottleneck && selectedSurvey"
-      >
-        {{ selectedBottleneck }} ({{ selectedSurvey.date_info }})
-      </h5>
+      <div class="d-flex flex-row justify-content-between border-bottom">
+        <div class="mt-1 mb-1 d-flex flex-row">
+          <small class="text-muted ml-1 mr-1 my-auto text-right"
+            ><translate>Available Waterlevels</translate></small
+          >
+          <select class="form-control" v-model="currentLevel">
+            <option
+              v-for="level in availableWaterlevels"
+              :value="level"
+              :key="level"
+            >
+              {{ formatSurveyDate(level) }}
+            </option>
+          </select>
+        </div>
+        <div class="flex-row mr-auto ml-auto">
+          <h5
+            class="headline mb-0 py-2"
+            v-if="selectedBottleneck && selectedSurvey"
+          >
+            {{ selectedBottleneck }} ({{ selectedSurvey.date_info }})
+          </h5>
+        </div>
+        <div>
+          <button
+            class="rounded-bottom bg-white border-0 splitscreen-toggle"
+            @click="$store.commit('application/showSplitscreen', false)"
+            v-if="showSplitscreen"
+          >
+            <font-awesome-icon icon="angle-down" />
+          </button>
+          <button
+            class="rounded-bottom bg-white border-0 clear-selection"
+            @click="$store.dispatch('fairwayprofile/clearSelection')"
+            v-if="showSplitscreen"
+          >
+            <font-awesome-icon icon="times" class="pointer" />
+          </button>
+        </div>
+      </div>
       <div class="d-flex flex-fill">
         <div
           class="loading d-flex justify-content-center align-items-center"
@@ -96,6 +116,7 @@
 import * as d3 from "d3";
 import { mapState, mapGetters } from "vuex";
 import debounce from "debounce";
+import { formatSurveyDate } from "@/lib/date.js";
 
 const GROUND_COLOR = "#4A2F06";
 
@@ -137,6 +158,17 @@
       "selectedSurvey",
       "surveysLoading"
     ]),
+    currentLevel: {
+      get() {
+        return this.selectedWaterLevel.date;
+      },
+      set(value) {
+        this.$store.commit("fairwayprofile/setSelectedWaterLevel", value);
+      }
+    },
+    availableWaterlevels() {
+      return Object.keys(this.waterLevels);
+    },
     currentData() {
       if (
         !this.selectedSurvey ||
@@ -188,6 +220,9 @@
     }
   },
   methods: {
+    formatSurveyDate(value) {
+      return formatSurveyDate(value);
+    },
     drawDiagram() {
       this.coordinatesSelect = null;
       const chartDiv = document.querySelector(".fairwayprofile");

--- a/client/src/store/fairway.js	Mon Feb 25 15:10:13 2019 +0100
+++ b/client/src/store/fairway.js	Mon Feb 25 15:51:50 2019 +0100
@@ -29,6 +29,7 @@
     minAlt: 0,
     maxAlt: 0,
     currentProfile: {},
+    referenceWaterLevel: null,
     waterLevels: {},
     selectedWaterLevel: "",
     fairwayData: [],
@@ -60,7 +61,7 @@
       state.additionalSurvey = additionalSurvey;
     },
     setSelectedWaterLevel: (state, level) => {
-      state.selectedWaterLevel = level;
+      state.selectedWaterLevel = state.waterLevels[level];
     },
     profileLoaded: (state, answer) => {
       const { response, surveyDate } = answer;
@@ -75,8 +76,12 @@
       const result = prepareProfile({ geoJSON, startPoint, endPoint });
       // Use Vue.set() to make new object properties rective
       // https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
-      Vue.set(state.waterLevels, when, { value });
-      if (state.selectedWaterLevel === "") state.selectedWaterLevel = when;
+      const entry = {
+        date: when,
+        vaule: value
+      };
+      Vue.set(state.waterLevels, when, entry);
+      if (state.selectedWaterLevel === "") state.selectedWaterLevel = entry;
       Vue.set(state.currentProfile, surveyDate, {
         points: result.points,
         length: result.lengthPolyLine