--- a/client/src/morphtool/Morphtool.vue	Wed Nov 21 11:42:00 2018 +0100
+++ b/client/src/morphtool/Morphtool.vue	Wed Nov 21 12:10:12 2018 +0100
@@ -1,51 +1,23 @@
 <template>
-    <div class="mb-3 mr-3 ml-auto rounded position-relative">
-        <div v-if="selectedBottleneck && surveys && !selectedSurvey" class="ui-element bg-white rounded p-3 shadow">
-            <h4 class="text-center mx-4">{{ selectedBottleneck }}</h4>
-            <hr>
-            <div
-                @click="$store.dispatch('fairwayprofile/clearSelection');"
-                class="ui-element d-flex morphtoolminus position-absolute"
-            >
-                <i class="fa fa-close p-2"></i>
-            </div>
-            <div>
+    <div :class="['box ui-element rounded bg-white ml-auto mr-3 mb-3 text-nowrap', { expanded: selectedBottleneck && surveys && !selectedSurvey }]">
+        <div style="width: 15rem">
+            <h5 class="mb-0 py-2 border-bottom">
+              {{ selectedBottleneck }}
+            </h5>
+            <div class="p-3">
                 <div
-                    v-for="survey of surveys"
+                    v-for="(survey, i) of surveys"
                     :key="survey.data_info"
-                    class="my-1"
+                    :class="{ 'mt-1': i }"
                     @click.prevent="$store.commit('bottlenecks/setSelectedSurvey', survey)"
                 >
                     <a href="#" @click.prevent>{{ survey.date_info }}</a>
                 </div>
             </div>
         </div>
-        <div v-if="selectedSurvey && !showSplitscreen" class="ui-element shadow morphtool rounded position-relative bg-white my-auto">
-            <div class="d-flex flex-row justify-content-between">
-                <h6 class="my-auto px-2">
-                    {{ selectedBottleneck }}
-                    ({{ selectedSurvey.date_info }})
-                </h6>
-                <i class="fa fa-angle-up py-2 px-2 border-left" @click="$store.commit('application/showSplitscreen', true)" v-if="Object.keys(currentProfile).length"></i>
-                <i class="fa fa-close text-danger py-2 px-2 border-left" @click="$store.dispatch('fairwayprofile/clearSelection');"></i>
-            </div>
-        </div>
     </div>
 </template>
 
-<style scoped lang="sass">
-.morphtool
-  height: $icon-width
-  z-index: 2
-
-.morphtoolminus
-  top: 0
-  right: 0
-  height: $icon-width
-  width: $icon-height
-  z-index: 2
-</style>
-
 <script>
 /*
  * This is Free Software under GNU Affero General Public License v >= 3.0
@@ -60,16 +32,13 @@
  * 
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
+ * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState, mapGetters } from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "morphtool",
   computed: {
-    ...mapGetters("map", ["getLayerByName"]),
-    ...mapState("map", ["openLayersMap", "cutTool"]),
-    ...mapState("application", ["showSplitscreen"]),
-    ...mapState("fairwayprofile", ["currentProfile"]),
     ...mapState("bottlenecks", [
       "selectedBottleneck",
       "surveys",