--- a/client/src/components/Main.vue	Fri May 03 10:31:40 2019 +0200
+++ b/client/src/components/Main.vue	Fri May 03 10:33:51 2019 +0200
@@ -1,30 +1,33 @@
 <template>
   <div id="panes" :class="'d-flex position-absolute rotate' + paneRotate">
-    <Pane :pane="panes[0]" :class="'d-flex ' + pane1Classes" />
-
-    <template v-if="panes.length === 2">
-      <Pane :pane="panes[1]" :class="'d-flex ' + pane2Classes" />
-    </template>
-
-    <template v-if="panes.length === 3">
-      <Pane :pane="panes[2]" class="d-flex wh-50" />
-      <Pane :pane="panes[1]" class="d-flex wh-50" />
-    </template>
-
-    <template v-if="panes.length === 4">
-      <Pane :pane="panes[1]" class="d-flex wh-50" />
-      <Pane :pane="panes[3]" class="d-flex wh-50" />
-      <Pane :pane="panes[2]" class="d-flex wh-50" />
-    </template>
+    <Pane :pane="panes[0]" :key="panes[0].id" :class="paneClasses[0]" />
+    <Pane
+      :pane="panes[1]"
+      :key="panes[1].id"
+      :class="paneClasses[1]"
+      v-if="panes.length >= 2"
+    />
+    <Pane
+      :pane="panes[2]"
+      :key="panes[2].id"
+      :class="paneClasses[2]"
+      v-if="panes.length >= 3"
+    />
+    <Pane
+      :pane="panes[3]"
+      :key="panes[3].id"
+      :class="paneClasses[3]"
+      v-if="panes.length === 4"
+    />
   </div>
 </template>
 
 <style lang="sass">
 #panes
-  top: -0.5px
-  right: -0.5px
-  bottom: -0.5px
-  left: -0.5px
+  top: -1px
+  right: -1px
+  bottom: -1px
+  left: -1px
   z-index: 1
   &.rotate1
     flex-wrap: wrap
@@ -39,7 +42,7 @@
     flex-wrap: wrap
     flex-direction: column-reverse
   .pane
-    border: solid 0.5px #fff
+    border: solid 1px #dee2e6
     background: #fff
 </style>
 
@@ -60,31 +63,54 @@
  */
 
 import { mapState } from "vuex";
+import * as paneSetups from "./paneSetups";
 
 export default {
   components: {
     Pane: () => import("./Pane")
   },
   computed: {
-    ...mapState("application", ["panes", "paneRotate"]),
-    // pane 1 and 2 are the only ones that can have varying size
-    // thats why tehre is no pane3class or pane4class
-    pane1Classes() {
-      if (this.panes.length === 1) return "wh-100";
-      if (this.panes.length === 2 || this.panes.length === 3) {
-        if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
-        if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
+    ...mapState("application", ["paneSetup", "paneRotate"]),
+    panes() {
+      return Object.values(paneSetups[this.paneSetup]);
+    },
+    paneClasses() {
+      if (this.paneSetup === "DEFAULT") {
+        return ["wh-100"];
+      }
+
+      if (this.paneSetup === "COMPARESURVEYS") {
+        return [2, 4].includes(this.paneRotate)
+          ? ["w-100 h-50", "w-100 h-50"]
+          : ["w-50 h-100", "w-50 h-100"];
+      }
+
+      if (this.paneSetup === "FAIRWAYPROFILE") {
+        return [1, 3].includes(this.paneRotate)
+          ? ["w-100 h-50", "w-100 h-50"]
+          : ["w-50 h-100", "w-50 h-100"];
       }
-      if (this.panes.length === 4) {
-        return "wh-50";
+
+      if (this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE") {
+        return [1, 3].includes(this.paneRotate)
+          ? ["wh-50", "wh-50", "w-100 h-50"]
+          : ["wh-50", "wh-50", "w-50 h-100"];
       }
-    },
-    pane2Classes() {
-      if (this.panes.length === 2) {
-        if (this.paneRotate === 1 || this.paneRotate === 3) return "w-100 h-50";
-        if (this.paneRotate === 2 || this.paneRotate === 4) return "w-50 h-100";
-      } else {
-        return "wh-50";
+
+      if (
+        ["GAUGE_WATERLEVEL", "GAUGE_HYDROLOGICALCONDITIONS"].includes(
+          this.paneSetup
+        )
+      ) {
+        return [1, 3].includes(this.paneRotate)
+          ? ["w-100 h-50", "w-100 h-50"]
+          : ["w-50 h-100", "w-50 h-100"];
+      }
+
+      if (this.paneSetup === "GAUGE_WATERLEVEL_HYDROLOGICALCONDITIONS") {
+        return [1, 3].includes(this.paneRotate)
+          ? ["w-100 h-50", "wh-50", "wh-50"]
+          : ["h-100 w-50", "wh-50", "wh-50"];
       }
     }
   }